Merge branch 'client' into 'master'

Client

See merge request kelder/rubygoldberg-tracker!1
This commit is contained in:
flynn 2019-09-27 19:41:52 +02:00
commit 37c8e13167
6 changed files with 82 additions and 0 deletions

View file

@ -37,3 +37,18 @@ Go enjoy the dashboard @ *localhost:5000*
## The client ## The client
This is an example client and will also be used as first link in the machine. This is an example client and will also be used as first link in the machine.
### Requirements
A local http file server of some kind.
for ex the python http server.
### Running
Go into the correct directory with the code
cd watcher
with python's http server
python -m http.server

11
client/index.css Normal file
View file

@ -0,0 +1,11 @@
.input-group {
padding: 10px;
}
input {
padding: 5px;
}
label {
margin-right: 10px;
}

33
client/index.html Normal file
View file

@ -0,0 +1,33 @@
<html>
<head>
<link href="index.css" rel="stylesheet" />
<script src="index.js"></script>
</head>
<body>
<form name="link">
<div class="input-group">
<label for="url-field">Watch server url</label>
<input name="url-field" type="text" value="localhost:5000" required></input>
</div>
<div class="input-group">
<label for="run-field">Run id</label>
<input name="run-field" type="number" value="1" required></input>
</div>
<div class="input-group">
<label for="link-field"> Link id </label>
<input name="link-field" type="number" value="0" required></input>
</div>
<div class="input-group">
<input type="button" name="start" value="Start" onclick="call_backend()" />
<input type="button" name="handoff" value="Handoff" onclick="call_backend()" />
</div>
</form>
<p>Result: <span id="result" style="font-weight: bold;"></span></p>
</body>
</html>

20
client/index.js Normal file
View file

@ -0,0 +1,20 @@
let call_backend = function(e) {
type = event.target.getAttribute('name');
var url_base = document.forms["link"]["url-field"].value;
var run = document.forms["link"]["run-field"].value;
var link = document.forms["link"]["link-field"].value;
x = new XMLHttpRequest();
x.onreadystatechange = function() {
if (x.readyState === 4) {
console.log("response: " + x.responseText);
document.getElementById("result").innerHTML = x.responseText;
};
};
var url = "http://" + url_base + "/link/" + (type === "start" ? "start" : "handoff") + "/" + run + "/" + link;
// console.log(url);
x.open("GET", url, true);
x.send();
};

View file

@ -9,9 +9,11 @@ import matplotlib.pyplot as plt
import socketio import socketio
from apscheduler.schedulers.background import BackgroundScheduler from apscheduler.schedulers.background import BackgroundScheduler
from flask import Flask, render_template, request from flask import Flask, render_template, request
from flask_cors import CORS
sio = socketio.Server() sio = socketio.Server()
app = Flask(__name__) app = Flask(__name__)
cors = CORS(app)
app.wsgi_app = socketio.WSGIApp(sio, app.wsgi_app) app.wsgi_app = socketio.WSGIApp(sio, app.wsgi_app)
# We request users to send the run number to prevent accidentially getting old requests from a previous run # We request users to send the run number to prevent accidentially getting old requests from a previous run

View file

@ -1,4 +1,5 @@
flask flask
flask-cors
python-socketio python-socketio
apscheduler apscheduler
matplotlib matplotlib