164 lines
4.9 KiB
HTML
164 lines
4.9 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) {
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
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: ['Freitag', 'Donnerstag', 'Mittwoch', 'Dienstag', 'Montag'],
|
|
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>
|
|
chart('sales', 'Verkäufe/Tag', [15, 12, 14, 8, 7])
|
|
|
|
</script>
|
|
</section>
|
|
|
|
<section class="">
|
|
<h3>Verkäufe (Umsatz)</h3>
|
|
<canvas id="umsatz"></canvas>
|
|
<script>
|
|
chart('umsatz', 'Umsatz/Tag', [1512.45, 1225.15, 1452.54, 814.54, 746.00], "EUR")
|
|
|
|
</script>
|
|
</section>
|
|
|
|
<section class="">
|
|
<h3>Neukunden</h3>
|
|
<canvas id="Neukunden"></canvas>
|
|
<script>
|
|
chart('Neukunden', 'Neukunden', [1, 1, 0, 5, 0], "")
|
|
|
|
</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>
|
|
chart('warehouse', 'Lagerauslastung', [50, 30, 20, 80, 60], "%")
|
|
|
|
</script>
|
|
</section>
|
|
|
|
<section class="">
|
|
<h2>Lagereffizienz</h2>
|
|
<canvas id="warehouse-ef"></canvas>
|
|
<script>
|
|
chart('warehouse-ef', 'Lagereffizienz', [80, 70, 60, 75, 54], "%")
|
|
|
|
</script>
|
|
</section>
|
|
<section class="spacer"></section>
|
|
<section class="spacer"></section>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<footer th:replace="fragments/footer :: footer"></footer>
|
|
</body>
|
|
|
|
</html>
|