2020-01-27 19:04:11 +01:00
<!DOCTYPE html>
< html lang = "de" dir = "ltr" xmlns:th = "http://www.thymeleaf.org" >
2020-02-04 21:30:21 +01:00
2020-01-27 19:04:11 +01:00
< head >
2020-04-27 09:48:24 +02:00
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=0.75, user-scalable=no" >
< script src = "/js/chart.js" > < / script >
< script >
2020-06-15 17:47:55 +02:00
function chart(id, name, data, unit, dates) {
2020-02-04 21:30:21 +01:00
let elm = document.getElementById(id);
let cs = getComputedStyle(elm)
let ctx = elm.getContext('2d');
let base = cs.getPropertyValue('color');
let baseHl = base;
let chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
2020-06-15 17:47:55 +02:00
labels: dates,
2020-02-04 21:30:21 +01:00
datasets: [{
label: name,
backgroundColor: cs.getPropertyValue('--c-primary'),
borderColor: cs.getPropertyValue('--c-secondary'),
data: data
}]
},
2020-01-27 19:04:11 +01:00
2020-02-04 21:30:21 +01:00
// Configuration options go here
options: {
legend: {
labels: {
fontColor: base
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
fontColor: base,
callback: function(value) {
return `${value} ${unit || ""}`
}
},
gridLines: {
color: baseHl
}
}],
xAxes: [{
ticks: {
fontColor: base
},
gridLines: {
color: baseHl
}
}]
}
}
});
}
2020-04-27 09:48:24 +02:00
< / script >
< title > Dashboard< / title >
< link rel = "stylesheet" th:href = "@{/css/ecom.css}" / >
2020-01-27 19:04:11 +01:00
< / head >
2020-02-04 21:30:21 +01:00
2020-01-27 19:04:11 +01:00
< body >
2020-04-27 09:48:24 +02:00
< nav th:replace = "fragments/header :: header" > Header< / nav >
< div class = "sidebar-layout content-width" >
< nav > < / nav >
< div >
< h1 > Dashboard< / h1 >
< script th:src = "@{/js/back.js}" > < / script >
< div class = "back" data-group = "intern" data-name = "Zurück zum Dashboard." data-insert = "false" > < / div >
< / div >
< / div >
< main class = "sidebar-layout content-width" >
< nav th:replace = "fragments/intern :: sidebar" > < / nav >
< div >
< h2 > Buchhaltung< / h2 >
< div class = "grid xl" >
2020-02-04 21:30:21 +01:00
< section class = "primary hero" >
2020-04-27 09:48:24 +02:00
< h3 > Hauptkonto< / h3 >
2020-06-05 19:17:44 +02:00
< h2 th:text = "${mainAccountBalance}" / >
2020-02-04 21:30:21 +01:00
< / section >
< section class = "primary hero" >
2020-04-27 09:48:24 +02:00
< h3 > Umsatzsteuerkonto< / h3 >
2020-06-05 19:17:44 +02:00
< h2 th:text = "${vatAccountBalance}" / >
2020-02-04 21:30:21 +01:00
< / section >
< section class = "spacer" > < / section >
< section class = "spacer" > < / section >
2020-04-27 09:48:24 +02:00
< / div >
2020-02-04 21:30:21 +01:00
2020-04-27 09:48:24 +02:00
< h2 > Verkauf< / h2 >
< div class = "grid xl" >
2020-02-04 21:30:21 +01:00
< section class = "" >
2020-04-27 09:48:24 +02:00
< h3 > Verkäufe (Anzahl)< / h3 >
< canvas id = "sales" > < / canvas >
< script >
2020-06-15 17:47:55 +02:00
fetch('./dashboardsummary')
.then(response => response.json())
.then(data => {
chart('sales', 'Verkäufe/Tag', data.map(d => d.todaysCustomersOrders),
2020-06-15 21:41:54 +02:00
"", data.map(g => " "+g.created));
2020-06-15 17:47:55 +02:00
});
2020-04-27 09:48:24 +02:00
< / script >
2020-02-04 21:30:21 +01:00
< / section >
< section class = "" >
2020-04-27 09:48:24 +02:00
< h3 > Verkäufe (Umsatz)< / h3 >
< canvas id = "umsatz" > < / canvas >
< script >
2020-06-15 17:47:55 +02:00
fetch('./dashboardsummary')
.then(response => response.json())
.then(data => {
chart('umsatz', 'Umsatz/Tag', data.map(d => d.todaysSalesCent / 100),
2020-06-15 21:41:54 +02:00
"€", data.map(g => " "+g.created));
2020-06-15 17:47:55 +02:00
});
2020-04-27 09:48:24 +02:00
< / script >
2020-02-04 21:30:21 +01:00
< / section >
< section class = "" >
2020-04-27 09:48:24 +02:00
< h3 > Neukunden< / h3 >
< canvas id = "Neukunden" > < / canvas >
< script >
2020-06-15 17:47:55 +02:00
fetch('./dashboardsummary')
.then(response => response.json())
.then(data => {
chart('Neukunden', 'Neukunden', data.map(d => d.todaysNewCustomers),
2020-06-15 21:41:54 +02:00
"", data.map(g => " "+g.created));
2020-06-15 17:47:55 +02:00
});
2020-04-27 09:48:24 +02:00
< / script >
2020-02-04 21:30:21 +01:00
< / section >
< section class = "spacer" > < / section >
< section class = "spacer" > < / section >
2020-04-27 09:48:24 +02:00
< / div >
2020-02-04 21:30:21 +01:00
2020-04-27 09:48:24 +02:00
< h2 > Lager< / h2 >
< div class = "grid xl" >
2020-02-04 21:30:21 +01:00
< section class = "" >
2020-04-27 09:48:24 +02:00
< h2 > Lagerauslastung< / h2 >
< canvas id = "warehouse" > < / canvas >
< script >
2020-06-15 17:47:55 +02:00
fetch('./dashboardsummary')
.then(response => response.json())
.then(data => {
2020-06-20 23:54:33 +02:00
chart('warehouse', 'Lagerauslastung', data.map(d => d.currentWarehouseCapacity * 100),
2020-06-15 17:47:55 +02:00
"%", data.map(g => g.created));
});
2020-04-27 09:48:24 +02:00
< / script >
2020-02-04 21:30:21 +01:00
< / section >
< section class = "" >
2020-04-27 09:48:24 +02:00
< h2 > Lagereffizienz< / h2 >
< canvas id = "warehouse-ef" > < / canvas >
< script >
2020-06-15 17:47:55 +02:00
fetch('./dashboardsummary')
.then(response => response.json())
.then(data => {
2020-06-20 23:54:33 +02:00
chart('warehouse-ef', 'Lagereffizienz', data.map(d => d.todaysWarehouseCapacity * 100),
2020-06-15 17:47:55 +02:00
"%", data.map(g => g.created));
});
2020-04-27 09:48:24 +02:00
< / script >
2020-02-04 21:30:21 +01:00
< / section >
< section class = "spacer" > < / section >
< section class = "spacer" > < / section >
2020-04-27 09:48:24 +02:00
< / div >
< / div >
< / main >
< footer th:replace = "fragments/footer :: footer" > < / footer >
2020-01-27 19:04:11 +01:00
< / body >
2020-02-04 21:30:21 +01:00
2020-01-27 19:04:11 +01:00
< / html >