style: toast ao add product na comanda

This commit is contained in:
2025-07-19 18:00:22 -03:00
parent f191b6a14b
commit b74736f391
6 changed files with 92 additions and 120 deletions

Binary file not shown.

View File

@@ -330,9 +330,9 @@ white-space: nowrap;
.toast {
position: fixed;
top: 40px;
top: 4px;
width: 30%;
left: 50%;
left: 30%;
justify-items: center;
align-items: center;
transform: translateX(-50%);
@@ -344,7 +344,7 @@ white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
z-index: 999 ;
z-index: 999999999999 !important;
}
.toast p {
@@ -462,4 +462,11 @@ white-space: nowrap;
body {
margin: 8px 0px 0px 0px;
}
.toast {
position: fixed;
top: 5px;
width: 70%;
left: 40%;
}
}

View File

@@ -19,115 +19,86 @@ document.addEventListener('DOMContentLoaded', function() {
function verificarCookieNotificacao() {
var iconNotify = document.getElementById('icon-notify');
if (document.cookie.indexOf('notificacao=') === -1) {
document.cookie = 'notificacao=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/';
iconNotify.style.backgroundColor = 'green';
iconNotify.textContent = '🔊';
}else{
let valorAtual = document.cookie.replace(/(?:(?:^|.*;\s*)notificacao\s*\=\s*([^;]*).*$)|^.*$/, "$1");
iconNotify.style.backgroundColor = valorAtual === 'true' ? 'green' : 'red';
iconNotify.textContent = valorAtual === 'true' ? '🔊' : '🔇';
}
}
verificarCookieNotificacao();
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';
iconNotify.textContent = '🔊';
}else{
iconNotify.style.backgroundColor = 'red';
iconNotify.textContent = '🔇';
}
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.0.150:8765');
const nomeUsuario = document.getElementById('user-info').textContent;
websocket.addEventListener('open', (event) => {
console.log('Conectado ao servidor WebSocket');
});
websocket.addEventListener('message', (event) => {
const data = JSON.parse(event.data);
switch (data.local) {
case 'cozinha':
if (document.getElementById('Fila') !== null && data.tipo === 'add'){
var novoElemento = document.createElement('div');
novoElemento.innerHTML = data.message;
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);
// setTimeout(function() {
// location.reload();
// }, 6000);
}
}
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);
// setTimeout(function() {
// location.reload();
// }, 6000);
}
}
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)';
let valorAtual = document.cookie.replace(/(?:(?:^|.*;\s*)notificacao\s*\=\s*([^;]*).*$)|^.*$/, "$1");
if (valorAtual === 'true') {
texto = new SpeechSynthesisUtterance(data.speak);
window.speechSynthesis.speak(texto);
setTimeout(function() {
location.reload();
}, 6000);
}
}
// const websocket = new WebSocket('ws://192.168.0.150:8765');
// const nomeUsuario = document.getElementById('user-info').textContent;
break;
case 'praca':
console.log('Mensagem para a praca:', data);
break;
case 'guarita':
console.log('Mensagem para a guarita:', data);
break;
case 'balcao':
console.log('Mensagem para a balcao:', data);
break;
default:
console.log('Local desconhecido:', data);
}
// websocket.addEventListener('open', (event) => {
// console.log('Conectado ao servidor WebSocket');
// });
});
websocket.addEventListener('error', (event) => {
console.error('Erro no WebSocket:', event);
});
websocket.addEventListener('close', (event) => {
console.log("conexão fechada");
});
// websocket.addEventListener('message', (event) => {
// const data = JSON.parse(event.data);
// switch (data.local) {
// case 'cozinha':
// if (document.getElementById('Fila') !== null && data.tipo === 'add'){
// var novoElemento = document.createElement('div');
// novoElemento.innerHTML = data.message;
// 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);
// // setTimeout(function() {
// // location.reload();
// // }, 6000);
// }
// }
// 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);
// // setTimeout(function() {
// // location.reload();
// // }, 6000);
// }
// }
// 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)';
// let valorAtual = document.cookie.replace(/(?:(?:^|.*;\s*)notificacao\s*\=\s*([^;]*).*$)|^.*$/, "$1");
// if (valorAtual === 'true') {
// texto = new SpeechSynthesisUtterance(data.speak);
// window.speechSynthesis.speak(texto);
// setTimeout(function() {
// location.reload();
// }, 6000);
// }
// }
// break;
// case 'praca':
// console.log('Mensagem para a praca:', data);
// break;
// case 'guarita':
// console.log('Mensagem para a guarita:', data);
// break;
// case 'balcao':
// console.log('Mensagem para a balcao:', data);
// break;
// default:
// console.log('Local desconhecido:', data);
// }
// });
// websocket.addEventListener('error', (event) => {
// console.error('Erro no WebSocket:', event);
// });
// websocket.addEventListener('close', (event) => {
// console.log("conexão fechada");
// });
@@ -154,7 +125,7 @@ function openFullscreen() {
}
}
function showToast(message, type ,duration = 3000) {
function showToast(message, type ,duration = 2500) {
const toast = document.getElementById('toast');
if (type === 'success') {

View File

@@ -396,6 +396,7 @@ async function addProductComanda(productId, comandaId, cuisine) {
const result = await response.text();
console.log(response);
showToast('Produto adicionado com sucesso!', 'success');
// Atualiza a lista de produtos
const listElement = document.getElementById("list-products-comanda");

View File

@@ -82,7 +82,6 @@
position: sticky;
top: 60px;
z-index: 10;
/* cursor: pointer; */
}
@media (max-width: 768px) {
@@ -96,4 +95,9 @@
max-width: 100px;
width: 80px;
}
#product-list th {
position: sticky;
top: 0px;
z-index: 10;
}
}

View File

@@ -81,18 +81,7 @@ function editProduct(id) {
// })
}
// document.getElementById('openModal').addEventListener('click', openModal);
// document.getElementById('productForm').addEventListener('submit', function(event) {
// event.preventDefault();
// const productName = document.getElementById('productName').value;
// const productPrice = document.getElementById('productPrice').value;
// const productDescription = document.getElementById('productDescription').value;
// closeModal();
// }
// );
function listerSortTeable(){