From f33307ab37f79732f924f2135591e663612dc0df Mon Sep 17 00:00:00 2001
From: Tommi Penttinen <tmpent@utu.fi>
Date: Tue, 22 Jun 2021 17:53:30 +0300
Subject: [PATCH] Parametrized the buttons

---
 index.html => paavo.html | 47 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 42 insertions(+), 5 deletions(-)
 rename index.html => paavo.html (55%)

diff --git a/index.html b/paavo.html
similarity index 55%
rename from index.html
rename to paavo.html
index 6f39df3..1ae502c 100644
--- a/index.html
+++ b/paavo.html
@@ -20,17 +20,28 @@
   <link rel="stylesheet" href="css/bootstrap.min.css">
 
   <meta name="theme-color" content="#fafafa">
+  <style type="text/css">
+    .row + .row {
+      margin-top: 5em;
+    }
+  </style>
 </head>
 
 <body>
   <script type="text/javascript">
     TMS_NUMBER = 2050001;
+    DIRECTION1_TEXT = "Suunta: tulee vasemmalta";
+    DIRECTION2_TEXT = "Suunta: tulee oikealta";
+
+    VEHICLE_CAR = 1;
+    VEHICLE_TRUCK = 2;
+    VEHICLE_BUS = 3;
+
     SEP = ',';
-    // SERVER = 'wss://smarter-data.tt.utu.fi/';
-    SERVER = 'ws://localhost:8080/'
+    SERVER = 'wss://smarter-data.tt.utu.fi/ws/';
+    // SERVER = 'ws://localhost:8080/'
 
-    function send_data(direction, vehicle_class) {
-      console.log("here");
+    function send_data(ws, direction, vehicle_class) {
       ws.send(TMS_NUMBER + SEP + direction + SEP + vehicle_class + SEP + new Date().getTime());
     }
   </script>
@@ -44,13 +55,39 @@
   <div class="container">
     <div class="row">
       <div class="col-sm">
-        <button type="button" class="btn btn-lg btn-primary">Kuorma-auto</button>
+        <button id="direction1" type="button" class="btn btn-lg btn-light" disabled>Suunta 1</button>
+      </div>
+      <div class="col-sm">
+        <button type="button" class="btn btn-lg btn-primary" onclick="send_data(ws, 1, VEHICLE_CAR)">Henkilöauto</button>
+      </div>
+      <div class="col-sm">
+        <button type="button" class="btn btn-lg btn-dark" onclick="send_data(ws, 1, VEHICLE_TRUCK)">Kuorma-auto</button>
+      </div>
+      <div class="col-sm">
+        <button type="button" class="btn btn-lg btn-warning" onclick="send_data(ws, 1, VEHICLE_BUS)">Bussi</button>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm">
+        <button id="direction2" type="button" class="btn btn-lg btn-light" disabled>Suunta 2</button>
+      </div>
+      <div class="col-sm">
+        <button type="button" class="btn btn-lg btn-primary" onclick="send_data(ws, 2, VEHICLE_CAR)">Henkilöauto</button>
+      </div>
+      <div class="col-sm">
+        <button type="button" class="btn btn-lg btn-dark" onclick="send_data(ws, 2, VEHICLE_TRUCK)">Kuorma-auto</button>
+      </div>
+      <div class="col-sm">
+        <button type="button" class="btn btn-lg btn-warning" onclick="send_data(ws, 2, VEHICLE_BUS)">Bussi</button>
       </div>
     </div>
   </div>
   <script type="text/javascript">
     // Varoita, jos piste ei ole valittuna.
 
+    document.getElementById('direction1').textContent = DIRECTION1_TEXT;
+    document.getElementById('direction2').textContent = DIRECTION2_TEXT;
+
     // https://stackoverflow.com/a/23176223
     function connect() {
       ws = new WebSocket(SERVER);
-- 
GitLab