Merge branch 'feature/counterstart' into develop

rowers/templates/embedded_video.html

@@ -99,6 +99,8 @@
       <input type="range" min="0" max="{{ maxtime }}" value="{{ analysis.delay }}"
       id="myRange">
     </div>
+    <div id="dataplay"></div>
+    <!-- <div id="datastop"></div> -->
   </li>
   <li class="grid_2">
     <div id="player"></div>
@@ -117,7 +119,8 @@
       // 3. This function creates an <iframe> (and YouTube player)
       //    after the API code downloads.
       var player;
-      var playing;
+      var playing = false;
+      var dataplaying = false;
       var videotime = 0;
       var data = JSON.parse('{{ data|safe }}');
       {% for id, metric in metrics.items %}
@@ -183,56 +186,65 @@
         datatime = slider.value;
 
         if (lock.checked) {
-          sliderpos = Math.round(videotime) + Math.round(delay);
-          slider.value = sliderpos;
-          // Setting Data
-          // velo = boatspeed[Math.round(datatime)];
-          lat = latitude[Math.round(datatime)];
-          lon = longitude[Math.round(datatime)];
-          // strokerate = spm[Math.round(datatime)];
-          // catchangle = ctch[Math.round(datatime)];
-          {% for id, metric in metrics.items %}
-          {{ id }}_now = {{ id }}_values[Math.round(datatime)];
-          // console.log(datatime,{{ id }}_now, "{{ metric.name }}")
-          {% endfor %}
+          if (!dataplaying) { // set data values
+            sliderpos = Math.round(videotime) + Math.round(delay);
+            slider.value = sliderpos;
 
-          document.getElementById("time").innerHTML = Math.round(videotime);
-          document.getElementById("datatime").innerHTML = Math.round(datatime);
-          // document.getElementById("speed").innerHTML = velo;
-          // document.getElementById("spm").innerHTML = strokerate;
-          // document.getElementById("catch").innerHTML = catchangle;
-          {% for id, metric in metrics.items %}
-          document.getElementById("{{ id }}").innerHTML = {{ id }}_now;
-          document.getElementById("{{ id }}").className = 'bold';
-          {% endfor %}
-          {% for group in metricsgroups %}
-          try {
-            set_{{ group }}();
-          } catch (e) {}
-          {% endfor %}
-          try {
-            var newLatLng = new L.LatLng(lat, lon);
-            // console.log(newLatLng);
-            marker.setLatLng(newLatLng);
-          } catch (e) {
+            // Setting Data
+            // velo = boatspeed[Math.round(datatime)];
+            lat = latitude[Math.round(datatime)];
+            lon = longitude[Math.round(datatime)];
+            // strokerate = spm[Math.round(datatime)];
+            // catchangle = ctch[Math.round(datatime)];
+            {% for id, metric in metrics.items %}
+            {{ id }}_now = {{ id }}_values[Math.round(datatime)];
+            // console.log(datatime,{{ id }}_now, "{{ metric.name }}")
+            {% endfor %}
+
+
+            document.getElementById("time").innerHTML = Math.round(videotime);
+
+            document.getElementById("datatime").innerHTML = Math.round(datatime);
+
+            // document.getElementById("speed").innerHTML = velo;
+            // document.getElementById("spm").innerHTML = strokerate;
+            // document.getElementById("catch").innerHTML = catchangle;
+            {% for id, metric in metrics.items %}
+            document.getElementById("{{ id }}").innerHTML = {{ id }}_now;
+            document.getElementById("{{ id }}").className = 'bold';
+            {% endfor %}
+            {% for group in metricsgroups %}
+            try {
+              set_{{ group }}();
+            } catch (e) {}
+            {% endfor %}
+            try {
+              var newLatLng = new L.LatLng(lat, lon);
+              // console.log(newLatLng);
+              marker.setLatLng(newLatLng);
+            } catch (e) {
+            }
           }
 
         } else {
-          output.value = Math.round(datatime)-Math.round(videotime);
+          if (!dataplaying) {
+            output.value = Math.round(datatime)-Math.round(videotime);
+          }
         }
 
       }
 
       function stopVideo() {
-        player.stopVideo();
+        player.pauseVideo();
+        playing = false;
       }
 
       // call this function when player state changes
       function onPlayerStateChange(event) {
         if (event.data == YT.PlayerState.PLAYING) {
-          playing = false;
+
         } else {
-          playing = true;
+
         }
       }
     </script>
@@ -304,6 +316,7 @@
   $(document).ready( function() {
   // lock
   var lock = document.getElementById("lock");
+  // lock.onchange nog doen
   var output = document.getElementById("id_delay");
   {% if locked %}
   lock.checked = true;
@@ -322,15 +335,18 @@
 
   // Update the current slider value (each time you drag the slider handle)
   slider.oninput = function() {
-    try {
-      output.value = Math.round(slider.value)-Math.round(player.getCurrentTime()); // Display the default slider value
-      delay = Math.round(slider.value)-Math.round(player.getCurrentTime());
+    if (!lock.checked) {
+      try {
+
+        delay = Math.round(slider.value)-Math.round(player.getCurrentTime());
+        output.value = Math.round(slider.value)-Math.round(player.getCurrentTime()); // Display the default slider value
+      }
+      catch(err) {
+        output.value = Math.round(slider.value);
+        delay = Math.round(slider.value);
+      }
     }
-    catch(err) {
-      output.value = Math.round(slider.value);
-      delay = Math.round(slider.value);
-    }
-    clearInterval(timeupdater)
+    clearInterval(timeupdater);
     var datatime = this.value
     var videotime = Math.round(player.getCurrentTime());
     if (lock.checked) {
@@ -338,13 +354,14 @@
         player.seekTo(this.value-output.value);
         videotime = this.value-output.value;
       } else {
-        if (playing) {
+        if (playing && !dataplaying) {
           player.seekTo(0);
           player.playVideo();
         }
-        else {
+        else if (!playing && !dataplaying) {
           player.seekTo(0);
           player.pauseVideo();
+          playing = false;
         }
       }
     } else {
@@ -412,10 +429,10 @@
         else {
           player.seekTo(0);
           player.pauseVideo();
+          playing = false;
         }
       }
     } else {
-      console.log('changing, not checked');
       output.value = this.value-Math.round(player.getCurrentTime());
     }
     var datatime = this.value
@@ -468,7 +485,101 @@
     } else {
       output.disabled = false;
     }
+}
+// Slider start stop
+// moet de buttons pas hieronder definieren en dan in de html
+// pluggen
+var timer;
+
+
+function clock() {
+  timer = setInterval(myClock, 1000);
+  var c = parseInt(slider.value,10);
+  console.log('starting clock');
+
+  function myClock() {
+    document.getElementById("datatime").innerHTML = c;
+    c = c+1;
+    slider.value = c;
+
+    // update data fields
+    lat = latitude[Math.round(c)];
+    lon = longitude[Math.round(c)];
+    {% for id, metric in metrics.items %}
+    {{ id }}_now = {{ id }}_values[Math.round(c)];
+    // console.log(datatime,{{ id }}_now, "{{ metric.name }}")
+    {% endfor %}
+
+    {% for id, metric in metrics.items %}
+    document.getElementById("{{ id }}").innerHTML = {{ id }}_now;
+    document.getElementById("{{ id }}").className = 'bold';
+    {% endfor %}
+    {% for group in metricsgroups %}
+    try {
+      set_{{ group }}();
+    } catch (e) {}
+    {% endfor %}
+    try {
+      var newLatLng = new L.LatLng(lat, lon);
+      // console.log(newLatLng);
+      marker.setLatLng(newLatLng);
+    } catch (e) {
+    }
+
+    if (lock.checked) {
+      player.seekTo(c+parseInt(output.value));
+    }
+    if (c == latitude.length) {
+      clearInterval(timer);
+      c = 0;
+    }
   }
+}
+
+// onderstaande alleen als lock.checked
+var dataplay = document.createElement("input");
+dataplay.type = "button";
+dataplay.value = "Play";
+document.getElementById("dataplay").appendChild(dataplay);
+
+// var datastop = document.createElement("input");
+// datastop.type = "button";
+// datastop.value = "Stop";
+// document.getElementById("datastop").appendChild(datastop)
+
+dataplay.onclick = function() {
+  if (lock.checked) {
+    dataplaying = false;
+    if (playing == false) {
+      player.playVideo();
+      dataplay.value = "Pause";
+      playing = true;
+    } else {
+      player.pauseVideo();
+      dataplay.value = "Play";
+      playing = false;
+    }
+  } else {
+    if (!dataplaying) {
+      clock();
+      dataplay.value = "Pause";
+      dataplaying = true;
+      if (lock.checked) {
+        playing = true;
+      }
+    } else {
+      clearInterval(timer);
+      dataplay.value = "Play";
+      dataplaying = false;
+    }
+  }
+}
+
+// datastop.onclick = function() {
+//   console.log('stopping');
+//   clearInterval(timer);
+// }
+
 });
 </script>
 <script type="text/javascript" src="https://bernii.github.io/gauge.js/dist/gauge.js"></script>

templates/newbase.html

@@ -302,7 +302,7 @@
 
       <ad class="ad">
         {% if request|announcements %}
-        <h1>News</h1>
+        <h2>News</h2>
         {% for a in request|announcements %}
         <div class="site-announcement-box">
           <div class="site-announcement-white">
@@ -346,7 +346,7 @@
         <p>
         <ul>
           <li>
-            <h1>Help</h1>
+            <h2>Help</h2>
             <ul>
               <li>
                 <a href="/rowers/help/">Help</a>
@@ -366,7 +366,7 @@
             </ul>
           </li>
           <li>
-            <h1>About</h1>
+            <h2>About</h2>
             <ul>
               <li>
                 <a href="/rowers/email/">Contact</a>
@@ -386,7 +386,7 @@
             </ul>
           </li>
           <li>
-            <h1>Paid Plans</h1>
+            <h2>Paid Plans</h2>
             <ul>
               <li>
                 <a href="/rowers/paidplans/">Paid Plans</a>
@@ -394,7 +394,7 @@
             </ul>
           </li>
           <li>
-            <h1>Legal</h1>
+            <h2>Legal</h2>
             <ul>
               <li>
                 <a href="/rowers/legal/">Terms and Conditions</a>