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