add timer

SpaceTeam · Nov 15, 2020 · 2a8a58a · 2a8a58a
1 parent 41c03c1
commit 2a8a58a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/client/index.html b/client/index.html
@@ -100,7 +100,7 @@ <h2 class="mb-0">
         <div class="container-fluid sequence-fluid">
             <div class="row header justify-content-start">
                 <div class="col col-3">
-                    <h1 id="timer">0.0</h1>
+                    <h1 id="timer" class="timer">0.0</h1>
                 </div>
                 <div class="col col-2">
                   <select class="btn btn-secondary ecui-select" id="sequenceSelect" onchange="onSequenceSelectChange(value);">
@@ -314,7 +314,10 @@ <h1 id="timer">0.0</h1>
     <div class="tab-pane fade show active" id="pnid-tab" role="tabpanel" aria-labelledby="pnid-tab-button" style="background-color: #2d2d2d;">
 
         <div id="pnid" style="margin: auto; width: 1400px; height: 1100px; border-color: #4e4e4e; position: relative; background-color: #2d2d2d; z-index: 0;"> <!--background-color: #202020-->
-        <div id="oxSystem" class="abs pnid-container" style="height: 600px; width: 500px; top: 0%; left: 700px;">
+            <div class="abs anchor-center" style="top: 10%; left: 10%; display: inline;">
+                <h1 style="color: white; display: inline;">Timer: </h1><h1 id="timerPNID" class="timer" style="width: 100px; display: inline-block; text-align: right;">0.0</h1>
+            </div>
+            <div id="oxSystem" class="abs pnid-container" style="height: 600px; width: 500px; top: 0%; left: 700px;">
 
             <div id="pnid-oxTank" class="abs pnid-tank pnid-tank-ox" style="width:90px; height:180px; top: 350px; left: 140px; color: white;">
                 <div class="abs half-oval" style="left: 0%; top: 0%;"></div>

diff --git a/client/js/ClientSocket.js b/client/js/ClientSocket.js
@@ -186,7 +186,7 @@ function timerTick()
 {
     //console.log(timeMillis);
     let time = timeMillis/1000;
-    $('#timer').text(time);
+    $('.timer').text(time);
 
     if (Number.isInteger(time))
     {
@@ -199,7 +199,7 @@ function timerTick()
         //     ////responsiveVoice.speak("Hans, get se Flammenwerfer!", "Deutsch Male", {rate: 1.2});
         //     responsiveVoice.speak("ignition", "US English Female", {rate: 1.2});
         // }
-        $('#timer').append('.0');
+        $('.timer').append('.0');
     }
 
     seqChart.update(timeMillis);
@@ -471,7 +471,7 @@ function abortSequence(abortMsg)
 
     clearInterval(intervalDelegate);
 
-    $('#timer').css("color", "red");
+    $('.timer').css("color", "red");
     socket.emit('abort');
 
     sequenceButtonStop();
@@ -582,12 +582,12 @@ socket.on('sequence-load', function(jsonSeqsInfo) {
 
     seqChart = new SequenceChart("sequenceChart", sequences[0]);
 
-    $('#timer').text(jsonSequence.globals.startTime);
+    $('.timer').text(jsonSequence.globals.startTime);
     if (Number.isInteger(jsonSequence.globals.startTime))
     {
-        $('#timer').append('.0')
+        $('.timer').append('.0')
     }
-    $('#timer').css("color", "green");
+    $('.timer').css("color", "green");
     console.log('sequence-load:');
     console.log(jsonSequence);
 
@@ -612,7 +612,7 @@ socket.on('sequence-start', function() {
     //responsiveVoice.speak("starting sequence", "US English Female", {rate: 1});
 
     $('#toggleSequenceButton').text("Abort Sequence");
-    $('#timer').css("color", "green");
+    $('.timer').css("color", "green");
 
     seqChart.start();
 });
@@ -656,11 +656,11 @@ socket.on('sequence-done', function() {
 
     seqChart.stop();
 
-    $('#timer').text(endTime);
+    $('.timer').text(endTime);
     clearInterval(intervalDelegate);
     if (Number.isInteger(endTime))
     {
-        $('#timer').append('.0');
+        $('.timer').append('.0');
     }
     sequenceButtonStop();