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

style: page home and page map

Browse Source
This commit is contained in:
Welton Moura
2025-01-18 21:17:13 -03:00
parent 89a4d0e4be
commit 6b7bd1bbb2
12 changed files with 313 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
gestaoRaul/db.sqlite3
View File

Binary file not shown.

BIN
gestaoRaul/home/__pycache__/urls.cpython-310.pyc
View File

Binary file not shown.

BIN
gestaoRaul/home/__pycache__/views.cpython-310.pyc
View File

Binary file not shown.

77
gestaoRaul/home/templates/home.html
View File

@@ -8,16 +8,6 @@
<link rel="stylesheet" href="{% static 'home/css/home.css' %}"> <link rel="stylesheet" href="{% static 'home/css/home.css' %}">
{% endblock %} {% endblock %}
{% block 'title' %} {% block 'title' %}
@@ -28,46 +18,85 @@ RRB&C - DashBoard
<body> <body>
<h1>DashBoard</h1>
<div class="grid-container"> <div class="grid-container">
<input id="data-start" name="data-start" oninput="mediaCuisine()" type="date"> <h1>DashBoard</h1>
<input id="data-end" name="data-end" oninput="mediaCuisine()" type="date"> <div class="grid-container" style="grid-template-columns: repeat(2, 2fr);">
<!-- <button onclick="mediaCuisine()" >Filtrar</button> --> <input id="data-start" name="data-start" oninput="mediaCuisine()" type="date">
<input id="data-end" name="data-end" oninput="mediaCuisine()" type="date">
</div>
<h4 id="30-days"></h4>
</div> </div>
<div class="grid-container"> <div class="grid-container">
<div class="card-resumo">
<div >
<p> Faturamento </p>
<h2 id="total-pagamentos">Carregando... </h2>
</div>
<img src="{% static 'midia/icons/money-bag.svg' %}" >
</div>
<div class="card-resumo">
<div >
<p>Total de Vendas</p>
<h2 id="qtd-pagamentos">Carregando... </h2>
</div>
<img src="{% static 'midia/icons/cart.svg' %}" >
</div>
<div class="card-resumo">
<div >
<p>Ticket médio</p>
<h2 id="ticket-medio">Carregando... </h2>
</div>
<img src="{% static 'midia/icons/ticket.svg' %}" >
</div>
<div class="card"> <div class="card">
<h4> Valor de Pagamentos </h4>
<h5 id="total-pagamentos">R$ {{total_pagamentos |floatformat:2 }} </h5>
<hr> <hr>
<h4> Quantidade de Pagamentos </h4> <h4> Quantidade de vendas</h4>
<h5 id="qtd-pagamentos"> {{ qdt_pagamentos }} </h5> <h5 id="qtd-pagamentos"> Carregando... </h5>
<hr> <hr>
<h4> Ticket médio </h4> <h4> Ticket médio </h4>
<h5 id="ticket-medio">R$ {{ ticekMedio |floatformat:2}} </h5> <h5 id="ticket-medio">Carregando...</h5>
<hr> <hr>
</div> </div>
<div class="card"> <div class="card">
<h4> Gráficos de vendas </h4> <h4> Gráfico de vendas </h4>
<canvas id="vendas" style="width:100%;height: 85%;max-width:100%; background-color: rgb(191, 225, 255);border-radius: 5px;"> <canvas id="vendas" style="width:100%;height: 85%;max-width:100%; background-color: rgb(191, 225, 255);border-radius: 5px;">
</canvas> </canvas>
</div> </div>
<div class="card"> <div class="card">
<h4> Gráficos cozinha </h4> <h4> Gráfico cozinha </h4>
<div></div> <div style="
<canvas id="cuisine" style="width:100%;height: 85%;max-width:100%; background-color: rgb(191, 225, 255);border-radius: 5px;"> width:95%;
max-width:100%;
background-color: rgb(191, 225, 255);
border-radius: 5px;
padding: 10px 30px 10px 30px;">
<canvas id="cuisine" style="width:80%;height: 65%;max-width:100%; border-radius: 5px;">
</canvas> </canvas>
</div> </div>
</div>
</div> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <h4>Faturamento anual</h4>
<div style="height: 350px;margin: 30px;">
<canvas id="mensal" style="width:100%;height: 100%;max-width:100%; background-color: rgb(191, 225, 255);border-radius: 5px;">
</div>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script>
<script src="{% static 'home/js/home.js' %}"></script> <script src="{% static 'home/js/home.js' %}"></script>

3
gestaoRaul/home/views.py
View File

@@ -1,13 +1,12 @@
from django.shortcuts import render from django.shortcuts import render
from django.db.models import Sum from django.db.models import Sum
from django.db.models import Count, F from django.db.models import Count, F
from django.http import JsonResponse, HttpResponse from django.http import JsonResponse
from django.contrib.admin.views.decorators import staff_member_required from django.contrib.admin.views.decorators import staff_member_required
from django.contrib.auth.models import User from django.contrib.auth.models import User
from django.utils.dateparse import parse_datetime from django.utils.dateparse import parse_datetime
import datetime import datetime
import json

28
gestaoRaul/mesas/templates/mesas_map.html
View File

@@ -20,16 +20,37 @@ RRB&C - Mapa de Mesas
width: 1400px; width: 1400px;
height: 800px; height: 800px;
border-radius: 15px; border-radius: 15px;
/* margin: 15; */ margin-left: 30px;
background-image: url("{% static 'midia/mapMesa.webp' %}" ); background-image: url("{% static 'midia/mapMesa.webp' %}" );
background-size: cover; background-size: cover;
position: relative; position: relative;
} }
#scroll {
display: grid;
position: relative;
scrollbar-width: thin;
}
@media screen and (max-width: 730px) {
#scroll {
margin: 10px;
overflow: scroll;
}
#mapa {
margin: 0px;
}
}
</style> </style>
<h1>Mapa de Mesas</h1> <h1>Mapa de Mesas</h1>
<div id="scroll">
<div id="mapa" > <div id="mapa" >
{% for eixo in eixosXY %} {% for eixo in eixosXY %}
@@ -43,6 +64,7 @@ RRB&C - Mapa de Mesas
top: {{eixo.x}}px;position: absolute" > top: {{eixo.x}}px;position: absolute" >
</div> </div>
{% endfor %} {% endfor %}
</div>
</div> </div>
<h2>Depósito</h2> <h2>Depósito</h2>

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

@@ -20,6 +20,7 @@ text-align: center;
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 100;
} }
.nav-bar { .nav-bar {

29
gestaoRaul/templates/static/home/css/home.css
View File

@@ -3,6 +3,8 @@
.grid-container { .grid-container {
display: grid; display: grid;
justify-content: center; justify-content: center;
justify-items: center;
align-items: center;
grid-template-columns: repeat(3, 2fr); grid-template-columns: repeat(3, 2fr);
gap: 20px; gap: 20px;
max-width: 1200px; max-width: 1200px;
@@ -13,6 +15,7 @@
.card { .card {
width: 420px; width: 420px;
height: 420px; height: 420px;
justify-items: center;
background-color: #2b376e; background-color: #2b376e;
border-radius: 10px; border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
@@ -25,6 +28,32 @@
transition: transform 0.2s; transition: transform 0.2s;
} }
.card-resumo {
display: grid;
grid-template-columns: 2fr 0.6fr ;
justify-content: space-between;
align-items: center;
width: 300px;
height: 130px;
background-color: #2b376e;
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(156, 156, 156, 0.2);
text-align: left;
line-height: 20px;
/* scale: 0.9; */
/* font-size: 20px; */
/* font-weight: bold; */
padding: 15px 30px 15px 30px;
/* color: #333; */
/* transition: transform 0.2s; */
}
.card-resumo h2 {
/* color: #fff; */
font-size: 35px;
margin: 0px;
}

228
gestaoRaul/templates/static/home/js/home.js
View File

@@ -33,64 +33,200 @@ var chartCuisine = new Chart("cuisine", {
legend: {display: true}, legend: {display: true},
title: { title: {
display: true, display: true,
text: "Tempo médio (em minutos) do pedido em cada etapa." text: "Média (em minutos) do pedido em cada etapa."
}, },
} }
}); });
function faturaMensal() {
const genericOptions = {
responsive: true,
hoverBackgroundColor: 'white',
hoverRadius: 7,
hoverBorderWidth: 3,
onHover: { mode: ['dataset', 'tooltip'] },
scales: {
x: { grid: { display: true } },
y: {
min: 0,
max: 200,
ticks: { stepSize: 50 },
grid: { borderDash: [5, 5] }
}
},
layout: {
padding: {
bottom: 10,
left: 15,
right: 25
}
},
interaction: {
mode: 'index',
intersect: false
},
plugins: {
legend: { display: true },
tooltip: {
padding: 16,
titleFont: {
family: "'Poppins', 'sans-serif'",
size: 18,
weight: 'normal'
},
backgroundColor: 'rgba(8, 26, 81, 1)',
bodyColor: 'rgba(255, 255, 255, 0.7)',
bodyFont: {
family: "'Poppins', 'sans-serif'",
size: 15
},
bodySpacing: 8,
boxHeight: 6,
boxPadding: 8,
usePointStyle: true,
callbacks: {
title: ctx => {
var titulo
switch (ctx[0].label) {
case 'Jan':
titulo = 'Janeiro'
break;
case 'Fev':
titulo = 'Fevereiro'
break;
case 'Mar':
titulo = 'Março'
break;
case 'Abr':
titulo = 'Abril'
break;
case 'Mai':
titulo = 'Maio'
break;
case 'Jun':
titulo = 'Junho'
break;
case 'Jul':
titulo = 'Julho'
break;
case 'Ago':
titulo = 'Agosto'
break;
case 'Set':
titulo = 'Setembro'
break;
case 'Out':
titulo = 'Outubro'
break;
case 'Nov':
titulo = 'Novembro'
break;
case 'Dez':
titulo = 'Dezembro'
break;
// ... outros dias
default:
console.log("Dia inválido");
}
return titulo
},
label: ctx => {
return `${ctx.dataset.label}: R$ ${ctx.raw}`
}
}
}
}
}
const lineDash = {
id: 'lineDash',
beforeDraw: chart => {
if (chart.tooltip._active && chart.tooltip._active.length) {
const ctx = chart.ctx
ctx.save()
const activePoint = chart.tooltip._active[0]
ctx.beginPath()
ctx.setLineDash([5, 5])
ctx.moveTo(activePoint.element.x, chart.chartArea.top)
ctx.lineTo(activePoint.element.x, chart.chartArea.bottom)
ctx.lineWidth = 1
ctx.strokeStyle = 'rgba(1, 126, 250, 0.8)'
ctx.stroke()
ctx.restore()
}
}
}
var faturamentoMensal = new Chart('mensal', {
type: "line",
data: {
labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
datasets: [
{
label: 'Ano Anterior',
backgroundColor: 'rgba(255, 136, 0, 0.8)',
borderColor: 'rgba(255, 136, 0, 0.8)',
borderWidth: 2,
data: [22, 48, 41, 53, 82, 64, 55, 47, 50, 62, 58, 84],
},
{
label: 'Ano Atual',
backgroundColor: 'rgba(1, 126, 250, 1)',
borderColor: 'rgba(1, 126, 250, 1)',
borderWidth: 2,
data: [100, 150,80,85,90,70,120,90,100, ]
},
{
label: 'Projeção',
backgroundColor: 'rgb(1, 250, 13)',
borderColor: 'rgb(9, 250, 1)',
borderWidth: 2,
data: [, ,,,,,,,100, 89, 138, 110 ]
},
]
},
options: genericOptions,
plugins: [ lineDash]
});
}
function getDataAtualFormatada() { function getDataAtualFormatada() {
const data = new Date(); const data = new Date();
const ano = data.getFullYear(); const ano = data.getFullYear();
const mes = String(data.getMonth() + 1).padStart(2, '0'); // Mês começa em 0 const mes = String(data.getMonth() + 1).padStart(2, '0');
const dia = String(data.getDate()).padStart(2, '0'); const dia = String(data.getDate()).padStart(2, '0');
const dataFormatada = `${ano}-${mes}-${dia}`; const dataFormatada = `${ano}-${mes}-${dia}`;
const dataAnterior = new Date(data.setDate(data.getDate() - 30));
const anoAnterior = dataAnterior.getFullYear();
const mesAnterior = String(dataAnterior.getMonth() + 1).padStart(2, '0');
const diaAnterior = String(dataAnterior.getDate()).padStart(2, '0');
const dataFormatadaAnterior = `${anoAnterior}-${mesAnterior}-${diaAnterior}`;
return dataFormatada; datas = [dataFormatadaAnterior, dataFormatada]
return datas;
} }
function productsPlus(){
var xValues = [document.getElementById('n-0').innerText,
document.getElementById('n-1').innerText,
document.getElementById('n-2').innerText,
document.getElementById('n-3').innerText,
document.getElementById('n-4').innerText
];
var yValues = [document.getElementById('q-0').innerText,
document.getElementById('q-1').innerText,
document.getElementById('q-2').innerText,
document.getElementById('q-3').innerText,
document.getElementById('q-4').innerText
];
var barColors = ["red", "green","blue","orange","brown"];
// new Chart("vendas", {
// type: "bar",
// data: {
// labels: xValues,
// datasets: [{
// backgroundColor: barColors,
// data: yValues
// }]
// },
// options: {
// legend: {display: false},
// title: {
// display: true,
// text: "Produtos mais vendidos"
// },
// }
// });
}
function mediaCuisine(){ function mediaCuisine(){
var dateStart = document.getElementById('data-start').value == '' ? '2025-01-01' :document.getElementById('data-start').value; var dateStart = document.getElementById('data-start').value == '' ? '2025-01-01' :document.getElementById('data-start').value;
var dateEnd = document.getElementById('data-end').value == '' ? getDataAtualFormatada() :document.getElementById('data-end').value;; var dateEnd = document.getElementById('data-end').value == '' ? getDataAtualFormatada()[1] :document.getElementById('data-end').value;;
var yValues = []; var yValues = [];
var xValues = ['Fila', 'Preparando', 'Entregar']; var xValues = ['Fila', 'Preparando', 'Entregar'];
var totalPagamenstos = document.getElementById('total-pagamentos') var totalPagamenstos = document.getElementById('total-pagamentos')
@@ -129,6 +265,8 @@ var resposta = fetch(`/chartCuisine/${dateStart}/${dateEnd}`, {method: 'GET',
chartCuisine.data.labels = xValues chartCuisine.data.labels = xValues
chartCuisine.update(); chartCuisine.update();
document.getElementById('30-days').innerText = ''
}) })
.catch(error => { .catch(error => {
alert('Erro ao trazer dados da cozinha:', error) alert('Erro ao trazer dados da cozinha:', error)
@@ -137,8 +275,8 @@ var resposta = fetch(`/chartCuisine/${dateStart}/${dateEnd}`, {method: 'GET',
} }
function deleyGraficos(){ document.getElementById('data-start').value = getDataAtualFormatada()[0];
setTimeout(function() { document.getElementById('data-end').value = getDataAtualFormatada()[1];
mediaCuisine();}, 20000);
}
mediaCuisine() mediaCuisine()
faturaMensal()
document.getElementById('30-days').innerText = 'Últimos 30 dias'

7
gestaoRaul/templates/static/midia/icons/cart.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 fill="#e0e0e0" xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve" stroke="#e0e0e0">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
Side by Side

After

Width:  |  Height:  |  Size: 919 B

7
gestaoRaul/templates/static/midia/icons/money-bag.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 fill="#e0e0e0" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.009 512.009" xml:space="preserve">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

7
gestaoRaul/templates/static/midia/icons/ticket.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 height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 13.236 13.236" xml:space="preserve" fill="#e0e0e0">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB