Add status commands and add commands
This commit is contained in:
parent
f3295c0f63
commit
6a09ae8ff7
4 changed files with 190 additions and 148 deletions
|
@ -40,25 +40,83 @@ def index():
|
||||||
|
|
||||||
@app.route("/pc")
|
@app.route("/pc")
|
||||||
@login_required
|
@login_required
|
||||||
def root():
|
def pc():
|
||||||
return render_template("pc.html")
|
return render_template("pc.html")
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/stocks")
|
||||||
|
@login_required
|
||||||
|
def stocks():
|
||||||
|
return render_template("stocks.html")
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/menu")
|
||||||
|
@login_required
|
||||||
|
def menu():
|
||||||
|
return render_template("menu.html")
|
||||||
|
|
||||||
|
|
||||||
|
commands = [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"plate": "sanddwitch",
|
||||||
|
"content": "Jambon - Tomate - Brie",
|
||||||
|
"drink": "Boisson surprise",
|
||||||
|
"dessert": "Panini nutella",
|
||||||
|
"state": "waiting"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"plate": "sanddwitch",
|
||||||
|
"content": "Jambon - Tomate - Brie",
|
||||||
|
"drink": "Boisson surprise",
|
||||||
|
"dessert": "Panini nutella",
|
||||||
|
"state": "gave"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"plate": "sanddwitch",
|
||||||
|
"content": "Jambon - Tomate - Brie",
|
||||||
|
"drink": "Boisson surprise",
|
||||||
|
"dessert": "Panini nutella",
|
||||||
|
"state": "error"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
@socketio.on("connect")
|
@socketio.on("connect")
|
||||||
def test_connect():
|
def test_connect():
|
||||||
emit("my response", {"data": "Connected"})
|
emit("command list", {"list": commands, "idcom": len(commands)})
|
||||||
|
|
||||||
|
|
||||||
@socketio.on("disconnect")
|
@socketio.on("add command")
|
||||||
def test_disconnect():
|
def addcmd(json):
|
||||||
print("Client disconnected")
|
commands.append({"id": len(commands)+1, "plate": json["plate"], "content": json["content"], "drink": json["drink"], "dessert": json["dessert"], "state": "waiting"})
|
||||||
|
emit("new command", commands[-1], broadcast=True)
|
||||||
|
|
||||||
|
|
||||||
@socketio.on("message")
|
@socketio.on("clear command")
|
||||||
def handle_message(message):
|
def rmcmd(json):
|
||||||
print("received message: " + message)
|
for i, c in enumerate(commands):
|
||||||
|
if c["id"] == json["id"]:
|
||||||
|
c["state"] = "waiting"
|
||||||
|
break
|
||||||
|
emit("cleared command", {"id": json["id"]}, broadcast=True)
|
||||||
|
|
||||||
|
|
||||||
@socketio.on("my event")
|
@socketio.on("give command")
|
||||||
def handle_my_custom_event(json):
|
def givecmd(json):
|
||||||
print("received json: " + str(json))
|
for i, c in enumerate(commands):
|
||||||
|
if c["id"] == json["id"]:
|
||||||
|
c["state"] = "gave"
|
||||||
|
break
|
||||||
|
emit("gave command", {"id": json["id"]}, broadcast=True)
|
||||||
|
|
||||||
|
|
||||||
|
@socketio.on("error command")
|
||||||
|
def errcmd(json):
|
||||||
|
for i, c in enumerate(commands):
|
||||||
|
if c["id"] == json["id"]:
|
||||||
|
c["state"] = "error"
|
||||||
|
break
|
||||||
|
emit("glitched command", {"id": json["id"]}, broadcast=True)
|
||||||
|
|
|
@ -64,8 +64,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--===============================================================================================-->
|
<!--===============================================================================================-->
|
||||||
<script src="{{ url_for('static', filename='vendor/jquery/jquery-3.2.1.min.js') }}"></script>
|
<script src="{{ url_for('static', filename='vendor/jquery/jquery-3.2.1.min.js') }}"></script>
|
||||||
<!--===============================================================================================-->
|
<!--===============================================================================================-->
|
||||||
|
|
|
@ -1,31 +1,10 @@
|
||||||
<!DOCTYPE html>
|
{% extends "base.html" %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
{% block content %}
|
||||||
<title>BDE INFO - Kfet</title>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<!--===============================================================================================-->
|
|
||||||
<link rel="icon" type="image/png" href="../static/images/icons/favicon.ico"/>
|
|
||||||
<!--===============================================================================================-->
|
|
||||||
<link rel="stylesheet" type="text/css" href="../static/vendor/bootstrap/css/bootstrap.min.css">
|
|
||||||
<!--===============================================================================================-->
|
|
||||||
<link rel="stylesheet" type="text/css" href="../static/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
|
|
||||||
<!--===============================================================================================-->
|
|
||||||
<link rel="stylesheet" type="text/css" href="../static/vendor/animate/animate.css">
|
|
||||||
<!--===============================================================================================-->
|
|
||||||
<link rel="stylesheet" type="text/css" href="../static/vendor/css-hamburgers/hamburgers.min.css">
|
|
||||||
<!--===============================================================================================-->
|
|
||||||
<link rel="stylesheet" type="text/css" href="../static/vendor/select2/select2.min.css">
|
|
||||||
<!--===============================================================================================-->
|
|
||||||
<link rel="stylesheet" type="text/css" href="../static/css/util.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="../static/css/main.css">
|
|
||||||
<!--===============================================================================================-->
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<a href="stocks.html"><li>Stocks</li></a>
|
<a href="{{ url_for('stocks') }}"><li>Stocks</li></a>
|
||||||
<a href="menu.html"><li>Menu</li></a>
|
<a href="{{ url_for('menu') }}"><li>Menu</li></a>
|
||||||
<a href="#popup"><li id="deco">Se déconnecter</li></a>
|
<a href="#popup"><li id="deco">Se déconnecter</li></a>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
@ -42,7 +21,7 @@
|
||||||
<div class="container-contact2-form-btn">
|
<div class="container-contact2-form-btn">
|
||||||
<div class="wrap-contact2-form-btn">
|
<div class="wrap-contact2-form-btn">
|
||||||
<div class="contact2-form-bgbtn"></div>
|
<div class="contact2-form-bgbtn"></div>
|
||||||
<a href="login.html"><button class="contact2-form-btn">
|
<a href="{{ url_for('logout') }}"><button class="contact2-form-btn">
|
||||||
Déconnexion
|
Déconnexion
|
||||||
</button></a>
|
</button></a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -111,103 +90,135 @@
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div class="liste">
|
<div class="liste">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
|
||||||
<script>
|
<script>
|
||||||
//Récup de la liste
|
let socket = io();
|
||||||
const liste = document.querySelector('.liste');
|
let list = document.querySelector('.liste');
|
||||||
//Numéro de commande
|
|
||||||
var idcom = 1;
|
|
||||||
|
|
||||||
//Création de la div
|
function addcmd(id, plate, content, drink, dessert, state) {
|
||||||
|
let newDiv = document.createElement("div");
|
||||||
|
newDiv.classList.add('com');
|
||||||
|
newDiv.id = `cmd${id}`;
|
||||||
|
$(list).append(newDiv);
|
||||||
|
let numCom = document.createElement("h1");
|
||||||
|
let subDiv = document.createElement("div");
|
||||||
|
let p1 = document.createElement("p");
|
||||||
|
let p2 = document.createElement("p");
|
||||||
|
let p3 = document.createElement("p");
|
||||||
|
let p4 = document.createElement("p");
|
||||||
|
let btn1 = document.createElement("button");
|
||||||
|
let btn2 = document.createElement("button");
|
||||||
|
let btn3 = document.createElement("button");
|
||||||
|
subDiv.classList.add('spec');
|
||||||
|
btn1.classList.add('annuler');
|
||||||
|
btn2.classList.add('donner');
|
||||||
|
btn3.classList.add('erreur');
|
||||||
|
numCom.innerHTML = `Commande ${id}`;
|
||||||
|
p1.innerHTML = plate;
|
||||||
|
p2.innerHTML = content;
|
||||||
|
p3.innerHTML = drink;
|
||||||
|
p4.innerHTML = dessert;
|
||||||
|
btn1.innerHTML = "Annuler";
|
||||||
|
btn2.innerHTML = "Donnée";
|
||||||
|
btn3.innerHTML = "Erreur";
|
||||||
|
newDiv.append(numCom);
|
||||||
|
newDiv.append(subDiv);
|
||||||
|
subDiv.append(p1);
|
||||||
|
subDiv.append(p2);
|
||||||
|
subDiv.append(p3);
|
||||||
|
subDiv.append(p4);
|
||||||
|
subDiv.append(btn1);
|
||||||
|
newDiv.append(btn2);
|
||||||
|
newDiv.append(btn3);
|
||||||
|
document.querySelector('#resume>h1').innerHTML = `Commande ${id+1}`;
|
||||||
|
newDiv.addEventListener('click', ev => {
|
||||||
|
newDiv.classList.toggle('show-spec');
|
||||||
|
});
|
||||||
|
newDiv.querySelector('.donner').addEventListener('click', ev => {
|
||||||
|
ev.stopPropagation();
|
||||||
|
socket.emit("give command", {"id": id});
|
||||||
|
});
|
||||||
|
newDiv.querySelector('.annuler').addEventListener('click', ev => {
|
||||||
|
ev.stopPropagation();
|
||||||
|
socket.emit("clear command", {"id": id});
|
||||||
|
});
|
||||||
|
newDiv.querySelector('.erreur').addEventListener('click', ev => {
|
||||||
|
ev.stopPropagation();
|
||||||
|
socket.emit("error command", {"id": id});
|
||||||
|
});
|
||||||
|
switch (state) {
|
||||||
|
case "gave":
|
||||||
|
give(newDiv);
|
||||||
|
break;
|
||||||
|
case "error":
|
||||||
|
error(newDiv);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
document.querySelector('#resume button').addEventListener('click', ev => {
|
function clear(e) {
|
||||||
|
e.classList.remove('donnee');
|
||||||
|
e.classList.remove('probleme');
|
||||||
|
e.classList.remove('show-spec');
|
||||||
|
list.prepend(e);
|
||||||
|
}
|
||||||
|
|
||||||
var newDiv = document.createElement("div");
|
function give(e) {
|
||||||
//Ajout de la div avec classe com
|
e.classList.remove('show-spec');
|
||||||
newDiv.classList.add('com');
|
e.classList.add('donnee');
|
||||||
liste.append(newDiv);
|
list.appendChild(e);
|
||||||
//Création des variables
|
}
|
||||||
var numCom = document.createElement("h1");
|
|
||||||
var subDiv = document.createElement("div");
|
|
||||||
var p1 = document.createElement("p");
|
|
||||||
var p2 = document.createElement("p");
|
|
||||||
var p3 = document.createElement("p");
|
|
||||||
var p4 = document.createElement("p");
|
|
||||||
var btn1 = document.createElement("button");
|
|
||||||
var btn2 = document.createElement("button");
|
|
||||||
var plat = document.querySelector('#resume :nth-child(2)');
|
|
||||||
//Attribution des classes
|
|
||||||
subDiv.classList.add('spec');
|
|
||||||
btn1.classList.add('annuler');
|
|
||||||
btn2.classList.add('donner');
|
|
||||||
//Attribution des Labels
|
|
||||||
numCom.innerHTML = `Commande ${idcom}`;
|
|
||||||
p1.innerHTML = `${plat}`;
|
|
||||||
p2.innerHTML = "Jambon - Tomate - Brie";
|
|
||||||
p3.innerHTML = "Boisson surprise";
|
|
||||||
p4.innerHTML = "Panini nutella";
|
|
||||||
btn1.innerHTML = "Annuler";
|
|
||||||
btn2.innerHTML = "Donnée";
|
|
||||||
//Intégration des variables
|
|
||||||
newDiv.append(numCom);
|
|
||||||
newDiv.append(subDiv);
|
|
||||||
subDiv.append(p1);
|
|
||||||
subDiv.append(p2);
|
|
||||||
subDiv.append(p3);
|
|
||||||
subDiv.append(p4);
|
|
||||||
subDiv.append(btn1);
|
|
||||||
newDiv.append(btn2);
|
|
||||||
idcom = idcom+1;
|
|
||||||
document.querySelector('#resume>h1').innerHTML = `Commande ${idcom}`;
|
|
||||||
|
|
||||||
|
function error(e) {
|
||||||
|
e.classList.remove('show-spec');
|
||||||
|
e.classList.add('probleme');
|
||||||
|
list.appendChild(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
socket.on("command list", function (data) {
|
||||||
|
var child = list.lastElementChild;
|
||||||
|
while (child) {
|
||||||
|
list.removeChild(child);
|
||||||
|
child = list.lastElementChild;
|
||||||
|
}
|
||||||
|
for (let c of data.list) {
|
||||||
|
addcmd(c.id, c.plate, c.content, c.drink, c.dessert, c.state);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
socket.on("new command", function (data) {
|
||||||
|
addcmd(data.id, data.plate, data.content, data.drink, data.dessert, data.state);
|
||||||
|
});
|
||||||
|
|
||||||
document.querySelectorAll('.liste .com').forEach(e => {
|
socket.on("cleared command", function (data) {
|
||||||
e.addEventListener('click', ev => {
|
clear(document.querySelector(`.liste #cmd${data.id}`));
|
||||||
e.classList.toggle('show-spec');
|
});
|
||||||
});
|
|
||||||
e.querySelector('.donner').addEventListener('click', ev => {
|
socket.on("gave command", function (data) {
|
||||||
ev.stopPropagation();
|
give(document.querySelector(`.liste #cmd${data.id}`));
|
||||||
e.classList.remove('show-spec');
|
});
|
||||||
e.classList.add('donnee');
|
|
||||||
liste.appendChild(e);
|
socket.on("glitched command", function (data) {
|
||||||
});
|
error(document.querySelector(`.liste #cmd${data.id}`));
|
||||||
e.querySelector('.annuler').addEventListener('click', ev => {
|
});
|
||||||
e.classList.remove('donnee');
|
|
||||||
e.classList.remove('probleme');
|
document.querySelector('#resume button').addEventListener('click', ev => {
|
||||||
e.classList.remove('show-spec');
|
socket.emit("add command", {"plate": document.querySelector('#resume :nth-child(2)'), "content": "Jambon - Tomate - Brie", "drink": "Boisson surprise", "dessert": "Panini nutella"});
|
||||||
liste.prepend(e);
|
|
||||||
ev.stopPropagation();
|
|
||||||
});
|
|
||||||
e.querySelector('.erreur').addEventListener('click', ev => {
|
|
||||||
ev.stopPropagation();
|
|
||||||
e.classList.remove('show-spec');
|
|
||||||
e.classList.add('probleme');
|
|
||||||
liste.appendChild(e);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--===============================================================================================-->
|
<!--===============================================================================================-->
|
||||||
<script src="../static/vendor/jquery/jquery-3.2.1.min.js"></script>
|
<script src="{{ url_for('static', filename='vendor/jquery/jquery-3.2.1.min.js') }}"></script>
|
||||||
<!--===============================================================================================-->
|
<!--===============================================================================================-->
|
||||||
<script src="../static/vendor/bootstrap/js/popper.js"></script>
|
<script src="{{ url_for('static', filename='vendor/bootstrap/js/popper.js') }}"></script>
|
||||||
<script src="../static/vendor/bootstrap/js/bootstrap.min.js"></script>
|
<script src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.min.js') }}"></script>
|
||||||
<!--===============================================================================================-->
|
<!--===============================================================================================-->
|
||||||
<script src="../static/vendor/select2/select2.min.js"></script>
|
<script src="{{ url_for('static', filename='vendor/select2/select2.min.js') }}"></script>
|
||||||
<!--===============================================================================================-->
|
<!--===============================================================================================-->
|
||||||
<script src="../static/js/main.js"></script>
|
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
||||||
|
{% endblock %}
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
@ -1,28 +1,6 @@
|
||||||
<!DOCTYPE html>
|
{% extends "base.html" %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<title>BDE INFO - Kfet</title>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<!--===============================================================================================-->
|
|
||||||
<link rel="icon" type="image/png" href="../static/images/icons/favicon.ico"/>
|
|
||||||
<!--===============================================================================================-->
|
|
||||||
<link rel="stylesheet" type="text/css" href="../static/vendor/bootstrap/css/bootstrap.min.css">
|
|
||||||
<!--===============================================================================================-->
|
|
||||||
<link rel="stylesheet" type="text/css" href="../static/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
|
|
||||||
<!--===============================================================================================-->
|
|
||||||
<link rel="stylesheet" type="text/css" href="../static/vendor/animate/animate.css">
|
|
||||||
<!--===============================================================================================-->
|
|
||||||
<link rel="stylesheet" type="text/css" href="../static/vendor/css-hamburgers/hamburgers.min.css">
|
|
||||||
<!--===============================================================================================-->
|
|
||||||
<link rel="stylesheet" type="text/css" href="../static/vendor/select2/select2.min.css">
|
|
||||||
<!--===============================================================================================-->
|
|
||||||
<link rel="stylesheet" type="text/css" href="../static/css/util.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="../static/css/main.css">
|
|
||||||
<!--===============================================================================================-->
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
{% block content %}
|
||||||
<div class="bg-contact2" id="main-container" style="background-image: url('../static/images/bg-01.jpg');">
|
<div class="bg-contact2" id="main-container" style="background-image: url('../static/images/bg-01.jpg');">
|
||||||
<form id="stocks" class="container" action="#">
|
<form id="stocks" class="container" action="#">
|
||||||
<div id="plat">
|
<div id="plat">
|
||||||
|
@ -72,7 +50,4 @@
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
{% endblock %}
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
Reference in a new issue