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
parent
b8b6931fd6
commit
e74c2f4634
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue