1
0
Fork 0

Add status commands and add commands

This commit is contained in:
Ethanell 2020-01-27 00:22:42 +01:00
parent f3295c0f63
commit 6a09ae8ff7
4 changed files with 190 additions and 148 deletions

View file

@ -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)

View file

@ -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>
<!--===============================================================================================--> <!--===============================================================================================-->

View file

@ -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>

View file

@ -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>