working websockets for the current run.

Added initial ws sync on page load
Added start and handoff updates via ws
This commit is contained in:
Maxime Bloch 2019-09-22 03:11:19 +02:00
parent b8b6931fd6
commit e74c2f4634
No known key found for this signature in database
GPG key ID: CE32A7D95B7D6418
3 changed files with 127 additions and 60 deletions

View file

@ -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()}
sio.emit('link_start', index)
run_data[index] = {"id": index, "start": time()}
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)

View file

@ -1,11 +1,71 @@
import io from 'socket.io-client';
$(function() {
var socket = io();
socket.on('start_run', function(run_index){
})
socket.on('link_start', function(link_id) {
$('#current_run').append($('<div class="item>"</div>').text(link_id));
});
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() {
const socket = io('localhost:5000');
socket.on('start_run', function(run_index) {});
socket.on('link_start', function(link_data) {
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));
}
});

View file

@ -2,55 +2,54 @@
<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 src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename = 'index.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>
<link rel="stylesheet" href="{{ url_for('static', filename = 'index.css') }}" />
</head>
<body>
<div class="container">
<div id="current_run" class="card">
<div class="item">
<div>
1
</div>
<div>
<button type="button">Start</button>
</div>
<div>
<i class="fas fa-question" style="color:grey"></i>
</div>
</div>
<div class="item">
<div>
1
<div id="current_run" class="card">
<div class="item">
<div>
0
</div>
<div>
<button type="button">Start</button>
</div>
<div>
<i class="fas fa-question" style="color:grey"></i>
</div>
</div>
<div>
<button type="button">Start</button>
<div class="item">
<div>
1
</div>
<div>
Time: ...
</div>
<div>
<i class="fas fa-check" style="color:green"></i>
</div>
</div>
<div>
<i class="fas fa-check" style="color:green"></i>
</div>
</div>
</div>
<div class="card">
<div class="item">
<div>
1
</div>
<div>
total time
</div>
<div>
max fase
</div>
</div>
</div>
<div class="card">
<div class="item">live requests</div>
</div>
<div class="card">
<div class="item">
<div>
1
</div>
<div>
total time
</div>
<div>
max fase
</div>
</div>
</div>
<div class="card">
<div class="item">live requests</div>
</div>
</div>
</body>
</body>
</html>