welton/RRBEC
1
0
Fork 0
mirror of https://github.com/welton89/RRBEC.git synced 2026-04-05 13:35:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

websocket part2 | notificação

Browse Source
This commit is contained in:
Welton Moura
2025-03-04 22:17:30 -03:00
parent 3a7cbfc413
commit d366d2db97
11 changed files with 195 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
gestaoRaul/templates/base.html
View File

@@ -26,6 +26,7 @@
<h1>
<img src="{% static 'midia/logo.png' %}" width="60">
</h1>
<button id="icon-notify" style="border: none; margin-left: 10px; border-radius: 20px; height: 40px;width: 40px; padding: 2px; align-self: center;" onclick="cookieNotificacao()" >🔔</button>
</div>
<div class="nav-list">
<ul>
@@ -52,7 +53,7 @@
</div>
<div class="logout-button">
{{ user.first_name }} {{ user.last_name }}
<div id="user-info">{{user.first_name}} {{user.last_name}}</div>
<a href="{% url 'logout' %}" style="width: 50px;"><img src="{% static 'midia/icons/logout.svg' %}" style="width: 40px;"></a>
</div>

23
gestaoRaul/templates/htmx_components/orders/htmx_list_orders_fila.html
View File

@@ -1,17 +1,10 @@
<!-- <div class="tab">
<button class="tablinks active" onclick="openTab(event, 'Fila')">Fila</button>
<button class="tablinks" onclick="openTab(event, 'Preparo')">Preparo</button>
<button class="tablinks" onclick="openTab(event, 'Finalizado')">Pronto</button>
<button class="tablinks" onclick="openTab(event, 'Entregue')">Entregue</button>
</div> -->
<div id="Fila" class="tabcontent">
{% for order in orders %}
{% if order.preparing == None and order.productComanda != Null %}
<div class="m-card"
<div class="m-card" id="m-card-{{order.id}}"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
@@ -19,7 +12,7 @@
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4 id="obs-{{order.id}}">{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
@@ -36,7 +29,7 @@
{% for order in orders %}
{% if order.finished == None and order.preparing != None %}
<div class="m-card"
<div class="m-card" id="m-card-{{order.id}}"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
@@ -44,7 +37,7 @@
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4 id="obs-{{order.id}}">{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
@@ -59,7 +52,7 @@
<div id="Finalizado" class="tabcontent">
{% for order in orders %}
{% if order.delivered == None and order.finished != None %}
<div class="m-card"
<div class="m-card" id="m-card-{{order.id}}"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
@@ -67,7 +60,7 @@
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4 id="obs-{{order.id}}">{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
@@ -83,7 +76,7 @@
{% for order in orders %}
{% if order.delivered != None %}
<div class="m-card"
<div class="m-card" id="m-card-{{order.id}}"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
@@ -91,7 +84,7 @@
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4 id="obs-{{order.id}}">{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>

103
gestaoRaul/templates/static/base.js
View File

@@ -1,5 +1,36 @@
function verificarCookieNotificacao() {
console.log('cookie notificacao verificado');
if (document.cookie.indexOf('notificacao=') === -1) {
document.cookie = 'notificacao=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/';
var iconNotify = document.getElementById('icon-notify');
iconNotify.style.backgroundColor = 'green';
console.log('cookie notificacao criado');
}else{
let valorAtual = document.cookie.replace(/(?:(?:^|.*;\s*)notificacao\s*\=\s*([^;]*).*$)|^.*$/, "$1");
var iconNotify = document.getElementById('icon-notify');
iconNotify.style.backgroundColor = valorAtual === 'true' ? 'green' : 'red';
}
}
verificarCookieNotificacao();
const websocket = new WebSocket('ws://localhost:8765');
function cookieNotificacao() {
if (document.cookie.indexOf('notificacao=') !== -1) {
let valorAtual = document.cookie.replace(/(?:(?:^|.*;\s*)notificacao\s*\=\s*([^;]*).*$)|^.*$/, "$1");
var iconNotify = document.getElementById('icon-notify');
let novoValor = valorAtual === 'true' ? 'false' : 'true';
if (novoValor === 'true') {
iconNotify.style.backgroundColor = 'green';
}else{
iconNotify.style.backgroundColor = 'red';
}
document.cookie = 'notificacao=' + novoValor + '; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/';
} else {
document.cookie = 'notificacao=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/';
}
}
const websocket = new WebSocket('ws://192.168.1.150:8765');
const nomeUsuario = document.getElementById('user-info').textContent;
websocket.addEventListener('open', (event) => {
console.log('Conectado ao servidor WebSocket');
@@ -7,18 +38,66 @@ websocket.addEventListener('open', (event) => {
websocket.addEventListener('message', (event) => {
const data = JSON.parse(event.data);
if (data.local === 'cozinha' && data.tipo === 'add'){
const novoElemento = document.createElement('div');
novoElemento.innerHTML = data.message;
var fila = document.getElementById('Fila').appendChild(novoElemento);
texto = new SpeechSynthesisUtterance(data.speak);
window.speechSynthesis.speak(texto);
console.log('Mensagem recebida:', data.local);
}
else if (data.local === 'cozinha' && data.tipo === 'edit'){
var card = document.getElementById('obs-'+data.id).innerHTML = data.message
console.log('Mensagem recebida:', data.local);
switch (data.local) {
case 'cozinha':
if (document.getElementById('Fila') !== null && data.tipo === 'add'){
const novoElemento = document.createElement('div');
novoElemento.innerHTML = data.message;
var fila = document.getElementById('Fila').appendChild(novoElemento);
let valorAtual = document.cookie.replace(/(?:(?:^|.*;\s*)notificacao\s*\=\s*([^;]*).*$)|^.*$/, "$1");
if (valorAtual === 'true') {
texto = new SpeechSynthesisUtterance(data.speak);
window.speechSynthesis.speak(texto);
}
console.log('Mensagem recebida:', data.local);
}
else if (document.getElementById('obs-'+data.id) !== null && data.tipo === 'edit'){
const obs = document.getElementById('obs-'+data.id)
const card = obs.parentNode;
card.style.backgroundColor = 'rgb(243, 165, 75)';
obs.innerHTML = data.message;
let valorAtual = document.cookie.replace(/(?:(?:^|.*;\s*)notificacao\s*\=\s*([^;]*).*$)|^.*$/, "$1");
if (valorAtual === 'true') {
texto = new SpeechSynthesisUtterance(data.speak);
window.speechSynthesis.speak(texto);
}
console.log('Mensagem recebida:', data.local);
}
else if (document.getElementById('m-card-'+data.id) !== null && data.tipo === 'delete'){
const card = document.getElementById('m-card-'+data.id)
card.style.backgroundColor = 'rgb(253, 69, 69)';
// obs.innerHTML = data.message;
let valorAtual = document.cookie.replace(/(?:(?:^|.*;\s*)notificacao\s*\=\s*([^;]*).*$)|^.*$/, "$1");
if (valorAtual === 'true') {
texto = new SpeechSynthesisUtterance(data.speak);
window.speechSynthesis.speak(texto);
}
console.log('Mensagem recebida:', data.local);
}
break;
case 'praca':
console.log('Código a ser executado se expressao === valor2')
break;
case 'guarita':
// Código a ser executado se expressao === valor3
break;
case 'balcao':
// Código a ser executado se expressao === valor3
break;
default:
console.log('Local desconhecido:', data);
}
});
websocket.addEventListener('error', (event) => {

50
gestaoRaul/templates/static/orders/js/orders.js
View File

@@ -1,7 +1,7 @@
function reloadPage(){
setTimeout(function() {
location.reload();}, 4000);
location.reload();}, 3000);
}
function openTab(evt, etapa) {
@@ -42,15 +42,13 @@ function openTab(evt, etapa) {
setTimeout(function() {
displayBlock(tab);}, 1000);
// reloadPage();
}
displayBlock('Fila');
function mostrarNotificacao(titulo,corpo,grupo) {
if (Notification.permission != 'granted') {
Notification.requestPermission().then(function(permission) {
@@ -71,31 +69,31 @@ function openTab(evt, etapa) {
}
}
function notificacao(){
// function notificacao(){
var resposta = fetch(`/pedidos/notificacao/`, {method: 'GET',
headers: {'Content-Type': 'application/json',
},})
.then(response => response.json())
.then(data => {
if (data['notificacao'] == 'true'){
document.cookie = `fila=${data['fila']}`;
mostrarNotificacao(data['titulo'], data['corpo'],'Cozinha')
texto = new SpeechSynthesisUtterance(data['corpo']+', '+data['titulo']+'.');
window.speechSynthesis.speak(texto);
reloadPage();
// var resposta = fetch(`/pedidos/notificacao/`, {method: 'GET',
// headers: {'Content-Type': 'application/json',
// },})
// .then(response => response.json())
// .then(data => {
// if (data['notificacao'] == 'true'){
// document.cookie = `fila=${data['fila']}`;
// mostrarNotificacao(data['titulo'], data['corpo'],'Cozinha')
// texto = new SpeechSynthesisUtterance(data['corpo']+', '+data['titulo']+'.');
// window.speechSynthesis.speak(texto);
// reloadPage();
}else{
console.log(data['notificacao'])
console.log('notificação foi false')
}
})
.catch(error => {
alert('Erro verificar notificação:', error)
console.error('Erro verificar notificação:', error);
});
// }else{
// console.log(data['notificacao'])
// console.log('notificação foi false')
// }
// })
// .catch(error => {
// alert('Erro verificar notificação:', error)
// console.error('Erro verificar notificação:', error);
// });
}
// }
// setInterval(()=> {