working websockets for the current run.

Added initial ws sync on page load
Added start and handoff updates via ws

watcher/app.py

@@ -1,4 +1,4 @@
-from datetime import datetime
+from time import time
 
 import socketio
 from flask import Flask, render_template
@@ -16,7 +16,7 @@ app.wsgi_app = socketio.WSGIApp(sio, app.wsgi_app)
 # Save progress through time during 1 run
 # Save result of different runs
 
-db = {"current_run": 0, "run_start_timer": None, "run_data": {}}
+db = {"current_run": None, "run_start_timer": None, "run_data": {}}
 
 
 @app.route("/")
@@ -27,7 +27,7 @@ def index():
 @app.route("/start_run/<run_index>")
 def start_run(run_index):
     db["current_run"] = run_index
-    starttime = datetime.now()
+    starttime = time()
     if run_index in db["run_data"]:
         return "This run is already ran, take another number."
     db["run_data"][run_index] = {"starttime": starttime, "data": {}}
@@ -39,29 +39,37 @@ def start_run(run_index):
 @app.route("/link/start/<run>/<index>")
 def link_start(run, index):
     if db["current_run"] != run:
-        return "Wrong run number, you are probably behind.", 404
+        return "Wrong run number, check that you update your run", 404
     else:
         run_data = db["run_data"][run]["data"]
         if index in run_data:
             return "you already started in this run. Ignoring this request."
         else:
-            run_data[index] = {"start": datetime.now()}
+            run_data[index] = {"id": index, "start": time()}
-            sio.emit('link_start', index)
+            sio.emit('link_start', run_data[index])
             return "Success."
 
 
 @app.route("/link/handoff/<run>/<index>")
 def link_handoff(run, index):
     if db["current_run"] != run:
-        return "Wrong run number, you are probably behind.", 404
+        return "Wrong run number, check that you updated you run", 404
     else:
         link_data = db["run_data"][run]["data"][index]
-        if link_data["handoff"]:
+        if "handoff" in link_data:
             return "you already handed off control during this run. Ignoring this request"
         else:
-            link_data["handoff"] = datetime.now()
+            link_data["handoff"] = time()
+            sio.emit('link_handoff', link_data)
             return "Success."
 
 
+@sio.event
+def connect(sid, data):
+    if db["current_run"]:
+        current_run = db["run_data"][db["current_run"]]
+        sio.emit('sync_current_run', current_run, room=sid)
+
+
 if __name__ == '__main__':
     app.run(host="0.0.0.0", debug=True)

watcher/static/index.js

@@ -1,11 +1,71 @@
-import io from 'socket.io-client';
+requirejs.config({
+    paths: {
+        'socket.io': 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io',
+        'jquery': 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min',
+    },
+    waitSeconds: 3
+});
+
+
+
+require(['jquery', 'socket.io'], function(jq, io) {
+
+    function getDurationString(link_data) {
+        // Print time diff in following format
+        // 1s
+        // 11s
+        // 1:11s
+        // 1:01s
+        let duration = new Date((link_data["handoff"] - link_data["start"]) * 1000);
+        let minutes = duration.getMinutes();
+        let seconds = minutes > 0 ? (duration.getSeconds() > 9 ? duration.getSeconds() : "0" + duration.getSeconds()) : duration.getSeconds();
+        let durationString = (minutes > 0 ? (minutes + "m") : "") + seconds + "s";
+        return durationString;
+    }
+
 
     $(function() {
-    var socket = io();
+        const socket = io('localhost:5000');
-    socket.on('start_run', function(run_index){
+        socket.on('start_run', function(run_index) {});
-    })
 
-    socket.on('link_start', function(link_id) {
+        socket.on('link_start', function(link_data) {
-        $('#current_run').append($('<div class="item>"</div>').text(link_id));
+            addLink(link_data["id"], link_data);
+        });
+        socket.on('link_handoff', function(link_data) {
+            stop = new Date(link_data["handoff"] * 1000);
+            let stopString = stop.getHours() + ":" + stop.getMinutes();
+
+            $(`#link-${link_data["id"]} .link-status`).css("color", "green").removeClass("fa-question").addClass("fa-check");
+            $(`#link-${link_data["id"]} .link-time`).text(`Time: ${getDurationString(link_data)}`);
+        });
+
+        socket.on('sync_current_run', function(run_data) {
+            $('#current_run>div:gt(0)').remove();
+            for (link_id in run_data["data"]) {
+                addLink(link_id, run_data["data"][link_id]);
+            }
         });
     });
+
+    function addLink(link_id, link_data) {
+        let start = new Date(link_data["start"] * 1000);
+        let datestring = start.getHours() + ":" + start.getMinutes();
+        let stop = undefined;
+        let stopString = undefined;
+        if (link_data["handoff"]) {
+            stop = new Date(link_data["handoff"] * 1000);
+            stopString = stop.getHours() + ":" + stop.getMinutes();
+
+        }
+        let html = `
+<div id='link-${link_id}' class="item">
+  <div>${link_id}</div>
+  <div class="link-time">${stop !== undefined ? "Time: " + getDurationString(link_data) : "Running"}</div>
+  <div>
+    <i class="link-status fas fa-${stop !== undefined ? "check" : "question"}" ${stop !== undefined ? "style=\"color:green\"" : ""}></i>
+  </div>
+</div>
+`;
+        $('#current_run').append($(html));
+    }
+});

watcher/templates/index.html

@@ -2,9 +2,7 @@
 
 <head>
     <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
+    <script data-main="{{ url_for('static', filename = 'index.js') }}" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
-    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
-    <script type="text/javascript" src="{{ url_for('static', filename = 'index.js') }}"></script>
     <link rel="stylesheet" href="{{ url_for('static', filename = 'index.css') }}" />
 </head>
 
@@ -13,7 +11,7 @@
         <div id="current_run" class="card">
             <div class="item">
                 <div>
-              1
+                    0
                 </div>
                 <div>
                     <button type="button">Start</button>
@@ -27,7 +25,7 @@
                     1
                 </div>
                 <div>
-                <button type="button">Start</button>
+                    Time: ...
                 </div>
                 <div>
                     <i class="fas fa-check" style="color:green"></i>
@@ -53,4 +51,5 @@
         </div>
     </div>
 </body>
+
 </html>