188 lines
6.1 KiB
HTML
188 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head>
|
|
<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>
|
|
function chart(id, name, data, unit, dates) {
|
|
|
|
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: {
|
|
labels: dates,
|
|
datasets: [{
|
|
label: name,
|
|
backgroundColor: cs.getPropertyValue('--c-primary'),
|
|
borderColor: cs.getPropertyValue('--c-secondary'),
|
|
data: data
|
|
}]
|
|
},
|
|
|
|
|
|
// 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
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
</script>
|
|
<title>Dashboard</title>
|
|
<link rel="stylesheet" th:href="@{/css/ecom.css}"/>
|
|
</head>
|
|
|
|
<body>
|
|
<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">
|
|
<section class="primary hero">
|
|
<h3>Hauptkonto</h3>
|
|
<h2 th:text="${mainAccountBalance}" />
|
|
</section>
|
|
|
|
<section class="primary hero">
|
|
<h3>Umsatzsteuerkonto</h3>
|
|
<h2 th:text="${vatAccountBalance}" />
|
|
</section>
|
|
|
|
<section class="spacer"></section>
|
|
<section class="spacer"></section>
|
|
</div>
|
|
|
|
|
|
<h2>Verkauf</h2>
|
|
<div class="grid xl">
|
|
<section class="">
|
|
<h3>Verkäufe (Anzahl)</h3>
|
|
<canvas id="sales"></canvas>
|
|
<script>
|
|
fetch('./dashboardsummary')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
chart('sales', 'Verkäufe/Tag', data.map(d => d.todaysCustomersOrders),
|
|
"", data.map(g => " "+g.created));
|
|
});
|
|
|
|
</script>
|
|
</section>
|
|
|
|
<section class="">
|
|
<h3>Verkäufe (Umsatz)</h3>
|
|
<canvas id="umsatz"></canvas>
|
|
<script>
|
|
fetch('./dashboardsummary')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
chart('umsatz', 'Umsatz/Tag', data.map(d => d.todaysSalesCent / 100),
|
|
"€", data.map(g => " "+g.created));
|
|
});
|
|
|
|
</script>
|
|
</section>
|
|
|
|
<section class="">
|
|
<h3>Neukunden</h3>
|
|
<canvas id="Neukunden"></canvas>
|
|
<script>
|
|
fetch('./dashboardsummary')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
chart('Neukunden', 'Neukunden', data.map(d => d.todaysNewCustomers),
|
|
"", data.map(g => " "+g.created));
|
|
});
|
|
|
|
</script>
|
|
</section>
|
|
<section class="spacer"></section>
|
|
<section class="spacer"></section>
|
|
</div>
|
|
|
|
<h2>Lager</h2>
|
|
<div class="grid xl">
|
|
<section class="">
|
|
<h2>Lagerauslastung</h2>
|
|
<canvas id="warehouse"></canvas>
|
|
<script>
|
|
fetch('./dashboardsummary')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
chart('warehouse', 'Lagerauslastung', data.map(d => d.currentWarehouseCapacity * 100),
|
|
"%", data.map(g => g.created));
|
|
});
|
|
|
|
</script>
|
|
</section>
|
|
|
|
<section class="">
|
|
<h2>Lagereffizienz</h2>
|
|
<canvas id="warehouse-ef"></canvas>
|
|
<script>
|
|
fetch('./dashboardsummary')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
chart('warehouse-ef', 'Lagereffizienz', data.map(d => d.todaysWarehouseCapacity * 100),
|
|
"%", data.map(g => g.created));
|
|
});
|
|
|
|
</script>
|
|
</section>
|
|
<section class="spacer"></section>
|
|
<section class="spacer"></section>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<footer th:replace="fragments/footer :: footer"></footer>
|
|
</body>
|
|
|
|
</html>
|