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