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

feat: toast

Browse Source
This commit is contained in:
Welton Moura
2025-02-21 21:39:08 -03:00
parent baafa4cdec
commit 8a58d0a0db
9 changed files with 158 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
gestaoRaul/comandas/__pycache__/htmx_views.cpython-310.pyc
View File

Binary file not shown.

136
gestaoRaul/comandas/templates/viewcomanda.html
View File

@@ -154,19 +154,22 @@ Detalhes {{comanda.name}}
<button class="btn-secondary" onclick="modal_payment_parcial()">Pagamento Parcial</button> <button class="btn-secondary" onclick="modal_payment_parcial()">Pagamento Parcial</button>
</div> </div>
<!-- <dialog id="Modal-add-product" style="display: none;" >
<article> -->
<div id="addProduct" popover class="popover">
<div id="addProduct" popover class="popover"> <div id="toast" class="toast">
<p id="toast-message"></p>
</div>
<form id="productForm" > <form id="productForm" >
<div style="display: flex;justify-content: space-around;"> <div style="display: flex;justify-content: space-between;">
<h2>Adicionar Produto</h2> <button class="btn-cancel" type="button" onclick="closeModal()">Fechar</button> <h2>Adicionar Produto</h2> <img class="close" src="{% static 'midia/icons/close-circle.svg' %}" onclick="closeModal()">
</div> </div>
<input type="text" id="search-product" name="search-product" placeholder="Buscar Produto" hx-get="{% url 'listProduct' comanda.id %}" hx-trigger="keyup" hx-target="#product-list"><br> <input type="text" id="search-product" name="search-product" placeholder="Buscar Produto" hx-get="{% url 'listProduct' comanda.id %}" hx-trigger="keyup" hx-target="#product-list"><br>
<div id="product-list" class="grid-list-products"> <div id="product-list" class="grid-list-products">
{% for product in products %} {% for product in products %}
<div class="card-product" onclick="addProductComanda({{product.id}}, {{comanda.id}}, '{{product.cuisine}}')" > <div class="card-product" onclick="addProductComanda({{product.id}}, {{comanda.id}}, '{{product.cuisine}}')" >
{{product.name}} <br> {{product.name}} <br>
@@ -174,40 +177,38 @@ Detalhes {{comanda.name}}
</div > </div >
{% endfor %} {% endfor %}
</div> </div>
</form> </form>
</div> </div>
<!-- </article> <dialog id="modal-obs" style="display: none;">
</dialog> --> <article>
<h2>Observação do Pedido</h2>
<dialog id="modal-obs" style="display: none;"> <p>Observações do pedido que serão enviadas para o preparo na cozinha.</p>
<article> <textarea placeholder="Ex.: pedido sem cebola. para viagem." name="obs" id="obs"></textarea>
<h2>Observação do Pedido</h2> <div>
<p>Observações do pedido que serão enviadas para o preparo na cozinha.</p> <div style="display: flex;gap: 10px;">
<textarea placeholder="Ex.: pedido sem cebola. para viagem." name="obs" id="obs"></textarea> <button type="submit" class="btn-primary" onclick="addOrder()" >OK</button>
<div> <button type="button" class="btn-cancel" onclick="closeModalObs()">Cancela</button>
<div style="display: flex;gap: 10px;">
<button type="submit" class="btn-primary" onclick="addOrder()" >OK</button>
<button type="button" class="btn-cancel" onclick="closeModalObs()">Cancela</button>
</div> </div>
</article> </article>
</dialog> </dialog>
<dialog id="payment-comanda" style="display: none;" > <dialog id="payment-comanda" style="display: none;" >
<article> <article>
<form action="{% url 'paymentComanda' comanda.id %}" method="post"> <form action="{% url 'paymentComanda' comanda.id %}" method="post">
{% csrf_token %} {% csrf_token %}
<h2>Pagamento</h2> <h2>Pagamento</h2>
<div style="display: flex; align-content: space-around; align-items: center; justify-self: center;gap: 50px;"> <div style="display: flex; align-content: space-around; align-items: center; justify-self: center;gap: 50px;">
{% if config.taxa %} {% if config.taxa %}
<h1 id="first-total">R$ {{ valores.totalComTaxa }}</h1> <h1 id="first-total">R$ {{ valores.totalComTaxa }}</h1>
<h1 hidden id="totalComTaxa">R$ {{ valores.totalComTaxa }}</h1> <h1 hidden id="totalComTaxa">R$ {{ valores.totalComTaxa }}</h1>
<h1 hidden id="totalSemTaxa">R$ {{ valores.totalSemTaxa }}</h1> <h1 hidden id="totalSemTaxa">R$ {{ valores.totalSemTaxa }}</h1>
<div> <div>
<input id="taxa" name="taxa" type="checkbox" value="True" label="Taxa de serviço" checked >Taxa de serviço <input id="taxa" name="taxa" type="checkbox" value="True" label="Taxa de serviço" checked >Taxa de serviço
{% else %} {% else %}
<h1 id="first-total">R$ {{ valores.totalSemTaxa }}</h1> <h1 id="first-total">R$ {{ valores.totalSemTaxa }}</h1>
@@ -221,7 +222,7 @@ Detalhes {{comanda.name}}
</div> </div>
<footer> <footer>
<div style="display: flex;gap: 10px;"> <div style="display: flex;gap: 10px;">
<button type="submit" class="btn-secondary" onclick="backPage()">Receber</button> <button type="submit" class="btn-secondary" onclick="backPage()">Receber</button>
{% if comanda.status != 'FIADO' %} {% if comanda.status != 'FIADO' %}
<button type="button" class="btn-primary" onclick=" modal_conta_client()"> <button type="button" class="btn-primary" onclick=" modal_conta_client()">
@@ -232,7 +233,7 @@ Detalhes {{comanda.name}}
</div> </div>
</footer> </footer>
</form> </form>
</article> </article>
</dialog> </dialog>
@@ -243,38 +244,38 @@ Detalhes {{comanda.name}}
{% csrf_token %} {% csrf_token %}
<input id="value-parcial" name="value-parcial" type="number" step="0.01" max="{{total}}" placeholder="Valor"> <input id="value-parcial" name="value-parcial" type="number" step="0.01" max="{{total}}" placeholder="Valor">
<input id="name-parcial" name="name-parcial" type="text" placeholder="Nome" > <input id="name-parcial" name="name-parcial" type="text" placeholder="Nome" >
<footer> <footer>
<div style="display: flex;gap: 10px;"> <div style="display: flex;gap: 10px;">
<button type="submit" class="btn-secondary" onclick="backPage()">Receber</button> <button type="submit" class="btn-secondary" onclick="backPage()">Receber</button>
<button type="button" class="btn-cancel" onclick="close_modal_payment_parcial()">Cancelar</button> <button type="button" class="btn-cancel" onclick="close_modal_payment_parcial()">Cancelar</button>
</div> </div>
</footer> </footer>
</form> </form>
</article> </article>
</dialog> </dialog>
<dialog id="Modal-alter-comanda"> <dialog id="Modal-alter-comanda">
<article > <article >
<form id="form-comanda" method="post" action="{% url 'editComanda' %}"> <form id="form-comanda" method="post" action="{% url 'editComanda' %}">
{% csrf_token %} {% csrf_token %}
<h2>Editar Comanda</h2> <h2>Editar Comanda</h2>
<input hidden type="text" name="h-comandaId" id="h-comandaId" value="{{comanda.id}}"> <input hidden type="text" name="h-comandaId" id="h-comandaId" value="{{comanda.id}}">
<input type="text" id="nameComanda" name="nameComanda" required placeholder="Nome"><br> <input type="text" id="nameComanda" name="nameComanda" required placeholder="Nome"><br>
<select name="select-mesa" id="select-mesa" required > <select name="select-mesa" id="select-mesa" required >
{% for mesa in mesas %} {% for mesa in mesas %}
<option value="{{mesa.id}}">{{mesa.name}}</option> <option value="{{mesa.id}}">{{mesa.name}}</option>
{% endfor %} {% endfor %}
</select> </select>
<div style="display: flex;gap: 10px;"> <div style="display: flex;gap: 10px;">
<button type="submit" class="btn-primary">Alterar</button> <button type="submit" class="btn-primary">Alterar</button>
<button type="button" class="btn-cancel" onclick="closeModalAlter()">Cancelar</button> <button type="button" class="btn-cancel" onclick="closeModalAlter()">Cancelar</button>
</div> </div>
</form> </form>
</article> </article>
</dialog > </dialog >
@@ -283,20 +284,20 @@ Detalhes {{comanda.name}}
<article> <article>
<form id="form-comanda" method="post" action="{% url 'addContaCliente' %}"> <form id="form-comanda" method="post" action="{% url 'addContaCliente' %}">
{% csrf_token %} {% csrf_token %}
<h2>Adicionar na Conta</h2> <h2>Adicionar na Conta</h2>
<h1>R$ {{ valores.totalSemTaxa }}</h1> <h1>R$ {{ valores.totalSemTaxa }}</h1>
<div> <div>
<input hidden type="text" name="valor-conta" value="{{ total }}"> <input hidden type="text" name="valor-conta" value="{{ total }}">
<input hidden type="text" name="idComanda" value="{{ comanda.id }}"> <input hidden type="text" name="idComanda" value="{{ comanda.id }}">
<p>Selecione o Cliente:</p> <p>Selecione o Cliente:</p>
<select name="select-client" id="select-client" required> <select name="select-client" id="select-client" required>
<option value="">Selecione um cliente</option> <option value="">Selecione um cliente</option>
{% for client in clients %} {% for client in clients %}
<option value="{{client.id}}">{{client.name}}</option> <option value="{{client.id}}">{{client.name}}</option>
{% endfor %} {% endfor %}
</select> </select>
</div> </div>
<footer> <footer>
<div style="display: flex;gap: 10px;"> <div style="display: flex;gap: 10px;">
@@ -304,8 +305,8 @@ Detalhes {{comanda.name}}
<button type="button" class="btn-cancel" onclick="close_modal_conta_client()">Cancelar</button> <button type="button" class="btn-cancel" onclick="close_modal_conta_client()">Cancelar</button>
</div> </div>
</form> </form>
</footer> </footer>
</article> </article>
</dialog> </dialog>
@@ -315,4 +316,5 @@ Detalhes {{comanda.name}}
</body> </body>
{% endblock %} {% endblock %}

BIN
gestaoRaul/db.sqlite3
View File

Binary file not shown.

5
gestaoRaul/templates/base.html
View File

@@ -97,6 +97,10 @@
{% endblock %} {% endblock %}
<script src="{% static 'htmx_base.js' %}"></script> <script src="{% static 'htmx_base.js' %}"></script>
<script src="{% static 'base.js' %}"></script> <script src="{% static 'base.js' %}"></script>
<div id="toast" class="toast">
<p id="toast-message"></p>
</div>
</body> </body>
@@ -125,4 +129,5 @@
</footer> </footer>
</html> </html>

28
gestaoRaul/templates/static/base.css
View File

@@ -7,7 +7,6 @@
@keyframes jump { @keyframes jump {
0% { 0% {
transform: scale(0.0); transform: scale(0.0);
/* transform: translate(#000000); */
} }
70% { 70% {
transform: scale(1); transform: scale(1);
@@ -295,8 +294,31 @@ input, textarea, select {
transform: translateY(-10px); transform: translateY(-10px);
} }
.toast {
/* .dropdown:hover .dropbtn {background-color: #3e8e41;} */ position: fixed;
top: 40px;
left: 50%;
transform: translateX(-50%);
background-color: #599100;
color: #000000;
font-weight: bold;
padding: 15px;
border-radius: 10px;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
z-index: 200 !important;
}
.toast p {
color: #000000;
}
.toast.show {
opacity: 1;
visibility: visible;
}
@media screen and (max-width: 730px) { @media screen and (max-width: 730px) {
.dropdown-content { .dropdown-content {

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

@@ -14,9 +14,31 @@ var elem = document.getElementById("all");
function openFullscreen() { function openFullscreen() {
if (elem.requestFullscreen) { if (elem.requestFullscreen) {
elem.requestFullscreen(); elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */ } else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen(); elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */ } else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen(); elem.msRequestFullscreen();
} }
}
function showToast(message, type ,duration = 3000) {
const toast = document.getElementById('toast');
if (type === 'success') {
toast.style.backgroundColor = '#28a745';
} else if (type === 'error') {
toast.style.backgroundColor = '#dc3545';
} else if (type === 'info') {
toast.style.backgroundColor = '#ffc107';
}
const toastMessage = document.getElementById('toast-message');
toastMessage.textContent = message;
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
}, duration);
} }

39
gestaoRaul/templates/static/comandas/css/viewcomanda.css
View File

@@ -6,14 +6,16 @@
margin: 0 auto; margin: 0 auto;
} }
body {
z-index: 0;
}
.grid-list-products { .grid-list-products {
justify-items: center; justify-items: center;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 8px; gap: 8px;
max-width: 800px; max-width: 800px;
/* margin: 0 auto; */
} }
.card-product { .card-product {
@@ -27,12 +29,12 @@
background: var(--main-gradient); background: var(--main-gradient);
box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678); box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678);
border-radius: 5px; border-radius: 5px;
transition: transform 0.4s, box-shadow 0.4s;
} }
.card-product:hover { .card-product:hover {
transform: scale(1.05); transform: scale(1.05);
transition: transform 0.4s; transition: transform 0.4s, box-shadow 0.4s;
box-shadow: 0px 0px 10px rgba(86, 187, 255, 0.815); box-shadow: 0px 0px 10px rgba(86, 187, 255, 0.815);
} }
@@ -40,15 +42,25 @@
text-align: center; text-align: center;
} }
.close {
height: 45px;
transition: transform 0.4s;
}
.close:hover {
transform: scale(1.2);
transition: transform 0.4s;
filter: drop-shadow(0px 0px 8px rgba(255, 1, 1, 0.452));
}
.popover{ .popover{
position: relative;
width: 98%; width: 98%;
height: 98%; height: 96%;
max-width: 800px; max-width: 800px;
top: 20px; top: 20px;
left: 25%; left: 25%;
padding: 20px; padding: 20px;
/* background-color: #f2f2f29d; */ background-color: #1f1f1fb6;
border-radius: 15px; border-radius: 15px;
border: none; border: none;
box-shadow: 0px 0px 8px rgba(143, 143, 143, 0.2); box-shadow: 0px 0px 8px rgba(143, 143, 143, 0.2);
@@ -56,20 +68,19 @@
line-height: 50px; line-height: 50px;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
z-index: 1;
/* color: #333; */ /* color: #333; */
transition: transform 0.2s; transition: transform 0.4s;
animation: jump 0.5s; animation: jump 0.5s;
} }
.popover::backdrop { .popover::backdrop {
background-color: rgba(0, 0, 0, 0.315); background-color: rgba(39, 39, 39, 0.315);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
/* animation: jump 0.2s; */
} }
@media screen and (max-width: 730px) { @media screen and (max-width: 730px) {
.popover{ .popover{
@@ -78,7 +89,6 @@
max-width: 800px; max-width: 800px;
top: 20px; top: 20px;
left: 10px; left: 10px;
} }
.card-product { .card-product {
@@ -89,6 +99,5 @@
background: var(--main-gradient); background: var(--main-gradient);
box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678); box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678);
font-size: 14px; font-size: 14px;
} }
} }

34
gestaoRaul/templates/static/comandas/js/viewcomanda.js
View File

@@ -91,7 +91,6 @@ function imprimirFichas() {
if (element) { if (element) {
var content = element.innerHTML; var content = element.innerHTML;
// console.log(content);
content = content.replace( /<img[^>]*>/gi,''); content = content.replace( /<img[^>]*>/gi,'');
content = content.replace(/<tfoot[^>]*>(?:(?!<\/tfoot>)[\s\S])*<\/tfoot>/gi,''); content = content.replace(/<tfoot[^>]*>(?:(?!<\/tfoot>)[\s\S])*<\/tfoot>/gi,'');
@@ -128,7 +127,6 @@ function imprimirConta() {
if (element) { if (element) {
var content = element.innerHTML; var content = element.innerHTML;
// console.log(content);
content = content.replace(/<img[^>]*>/gi,''); content = content.replace(/<img[^>]*>/gi,'');
content = content.replace(/<th[^>]*>(?:(?!<\/th>)[\s\S])*<\/th>/gi,''); content = content.replace(/<th[^>]*>(?:(?!<\/th>)[\s\S])*<\/th>/gi,'');
// content = content.replace('icons',''); // content = content.replace('icons','');
@@ -180,20 +178,6 @@ function troco(){
} }
// document.onkeydown = teclado
// function teclado(event){
// if (document.getElementById('payment-comanda').style.display == 'block'){
// if (event.keyCode == 13){
// troco()
// }else{
// console.log(event.keyCode)
// }
// }else{
// console.log('')
// }
// }
function addOrder(){ function addOrder(){
obs = document.getElementById('obs').value obs = document.getElementById('obs').value
var id = document.getElementById('id-temp').value var id = document.getElementById('id-temp').value
@@ -206,9 +190,9 @@ function addOrder(){
.then(function(response) { .then(function(response) {
if(response.status == 200){ if(response.status == 200){
closeModalObs() closeModalObs()
alert('Pedido atualizado com sucesso!') showToast('✅Pedido atualizado com sucesso!😁','success')
}else{ }else{
alert('Erro ao atualizar pedido!') showToast('❌Ocorreu um erro!😢','error')
} }
}) })
@@ -232,23 +216,13 @@ function addProductComanda(productId,comandaId, cuisine) {
.then(function(response) { .then(function(response) {
return response.text(); return response.text();
}).then(function(text) { }).then(function(text) {
console.log(text);
var listProductsBalcaoElement = document.getElementById("list-products-comanda"); var listProductsBalcaoElement = document.getElementById("list-products-comanda");
listProductsBalcaoElement.innerHTML = text; listProductsBalcaoElement.innerHTML = text;
}) })
// const receber = document.getElementById('pagarComanda') showToast('Produto adicionado com sucesso!😁','success');
// const imprimir = document.getElementById('imprimirFichas')
// var search = document.getElementById('search-product')
// setTimeout(function() {
// updateTotal();}, 100);
alert('Produto adicionado com sucesso!');
} }
} }
function taxa(){ function taxa(){

7
gestaoRaul/templates/static/midia/icons/close-circle.svg Normal file
View File

@@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
Side by Side

After

Width:  |  Height:  |  Size: 641 B