From a08535bcc5015043d7c13a82a167e0b39e838fc1 Mon Sep 17 00:00:00 2001
From: Tommi Penttinen <tmpent@utu.fi>
Date: Wed, 23 Jun 2021 20:34:22 +0300
Subject: [PATCH] Mobile Safari needed special work due to <audio> tag playback
 restrictions

---
 enni.html        | 22 +++++++++++++++++++++-
 js/smarter-ui.js | 18 +++++++++++++++++-
 paavo.html       | 22 +++++++++++++++++++++-
 petra.html       | 22 +++++++++++++++++++++-
 tommi.html       | 22 +++++++++++++++++++++-
 5 files changed, 101 insertions(+), 5 deletions(-)

diff --git a/enni.html b/enni.html
index 08872a3..b0c288e 100644
--- a/enni.html
+++ b/enni.html
@@ -40,6 +40,22 @@
   <script src="js/plugins.js"></script>
   <script src="js/main.js"></script>
   <script src="js/bootstrap.bundle.min.js"></script>
+  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+
+
+
+  <div class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Yhteys palvelimeen</h5>
+        </div>
+        <div class="modal-footer">
+          <button id="modal-close" type="button" class="btn btn-secondary disabled text-center" data-dismiss="modal" onclick="closeModal()">Yhdistetään...</button>
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="container">
     <div class="row">
       <div class="col">
@@ -71,7 +87,11 @@
     </div>
   </div>
   <script src="js/smarter-ui.js"></script>
-
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $('.modal').modal('show');
+    })
+  </script>
 </body>
 
 </html>
diff --git a/js/smarter-ui.js b/js/smarter-ui.js
index 8bd72a5..71a7409 100644
--- a/js/smarter-ui.js
+++ b/js/smarter-ui.js
@@ -1,6 +1,8 @@
 DIRECTION1_TEXT = "Suunta: tulee vasemmalta";
 DIRECTION2_TEXT = "Suunta: tulee oikealta";
 
+var AUDIO_ELEM = new Audio();
+
 // Make it easier to read CSV files
 USER_AGENT = navigator.userAgent.replace(';', '').replace(',', '');
 
@@ -29,20 +31,29 @@ var heartBeat;
 
 // https://stackoverflow.com/a/23176223
 function connect() {
+  console.log("Opening websocket");
   ws = new WebSocket(SERVER);
   ws.onopen = function() {
+    console.log("Opened websocket");
     // Initiate hearbeat
     heartBeat = setInterval(function() {
       console.log("PING");
       ws.send('PING' + SEP + new Date().getTime() + SEP + USER_AGENT); 
     }, 5000);
+    setTimeout(function() {
+      var modalClose = document.getElementById('modal-close');
+      modalClose.textContent = "Valmis!";
+      $(modalClose).toggleClass("disabled");      
+    }, 1000);
   };
 
   ws.onmessage = function(e) {
     console.log('Message:', e.data);
     try {
       var vehicle_class = JSON.parse(e.data).vehicle_class;
-      new Audio(AUDIO[vehicle_class]).play();
+      console.log("Got vehicle class: " + vehicle_class);
+      AUDIO_ELEM.src = AUDIO[vehicle_class];
+      AUDIO_ELEM.play();
     } catch (exc) {
       if (exc instanceof SyntaxError) {
         console.log("Not json : " + e.data);
@@ -66,3 +77,8 @@ function connect() {
   };
 }
 connect();
+
+function closeModal() {
+  AUDIO_ELEM.play();
+  $('.modal').modal('hide');
+}
\ No newline at end of file
diff --git a/paavo.html b/paavo.html
index a49c8e6..06dfbb3 100644
--- a/paavo.html
+++ b/paavo.html
@@ -40,6 +40,22 @@
   <script src="js/plugins.js"></script>
   <script src="js/main.js"></script>
   <script src="js/bootstrap.bundle.min.js"></script>
+  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+
+
+
+  <div class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Yhteys palvelimeen</h5>
+        </div>
+        <div class="modal-footer">
+          <button id="modal-close" type="button" class="btn btn-secondary disabled text-center" data-dismiss="modal" onclick="closeModal()">Yhdistetään...</button>
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="container">
     <div class="row">
       <div class="col">
@@ -71,7 +87,11 @@
     </div>
   </div>
   <script src="js/smarter-ui.js"></script>
-
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $('.modal').modal('show');
+    })
+  </script>
 </body>
 
 </html>
diff --git a/petra.html b/petra.html
index c6d9a8d..51c89e5 100644
--- a/petra.html
+++ b/petra.html
@@ -40,6 +40,22 @@
   <script src="js/plugins.js"></script>
   <script src="js/main.js"></script>
   <script src="js/bootstrap.bundle.min.js"></script>
+  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+
+
+
+  <div class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Yhteys palvelimeen</h5>
+        </div>
+        <div class="modal-footer">
+          <button id="modal-close" type="button" class="btn btn-secondary disabled text-center" data-dismiss="modal" onclick="closeModal()">Yhdistetään...</button>
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="container">
     <div class="row">
       <div class="col">
@@ -71,7 +87,11 @@
     </div>
   </div>
   <script src="js/smarter-ui.js"></script>
-
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $('.modal').modal('show');
+    })
+  </script>
 </body>
 
 </html>
diff --git a/tommi.html b/tommi.html
index 9c8f3dc..433d0fb 100644
--- a/tommi.html
+++ b/tommi.html
@@ -40,6 +40,22 @@
   <script src="js/plugins.js"></script>
   <script src="js/main.js"></script>
   <script src="js/bootstrap.bundle.min.js"></script>
+  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+
+
+
+  <div class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Yhteys palvelimeen</h5>
+        </div>
+        <div class="modal-footer">
+          <button id="modal-close" type="button" class="btn btn-secondary disabled text-center" data-dismiss="modal" onclick="closeModal()">Yhdistetään...</button>
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="container">
     <div class="row">
       <div class="col">
@@ -71,7 +87,11 @@
     </div>
   </div>
   <script src="js/smarter-ui.js"></script>
-
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $('.modal').modal('show');
+    })
+  </script>
 </body>
 
 </html>
-- 
GitLab