localhorst/e-commerce
Archived
4
1
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

impl bad dashboard

Browse Source
This commit is contained in:
CodeSteak
2020-02-04 21:30:21 +01:00
parent 57f8e640c4
commit 2c9ff570aa
3 changed files with 149 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
prototype/src/main/resources/static/css/ecom.css
View File

@ -720,7 +720,7 @@ input[type="number"]:focus {
padding: 0px;
width: 80rem;
max-width: 80rem;
min-width: 30rem;
min-width: 20rem;
height: 0px;
padding: 0px;
}

7
prototype/src/main/resources/static/js/chart.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

186
prototype/src/main/resources/templates/intern/index.html
View File

@ -1,61 +1,157 @@
<!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}"/>
<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 th:replace="/fragments/header :: header">Header</nav>
<div class="sidebar-layout content-width">
<nav></nav>
<div>
<h1>Dashboard</h1>
<h1>Dashboard</h1>
</div>
</div>
<main class="sidebar-layout content-width">
</div>
<main class="sidebar-layout content-width">
<nav th:replace="/fragments/intern :: sidebar"></nav>
<div class="detailgrid">
<section class="hero">
<h1 class="huge">!</h1>
</section>
<section>
<h1>Insert</h1>
</section>
<section>
<h1>Dashboard</h1>
</section>
<section>
<h1>HERE</h1>
</section>
<section class="hero">
<h1 class="huge">!</h1>
</section>
<section>
<h1>Insert</h1>
</section>
<section>
<h1>Dashboard</h1>
</section>
<section>
<h1>HERE</h1>
</section>
<section class="hero">
<h1 class="huge">!</h1>
</section>
<section>
<h1>Insert</h1>
</section>
<section>
<h1>Dashboard</h1>
</section>
<section>
<h1>HERE</h1>
</section>
<div>
<h2>Buchhaltung</h2>
<div class="grid xl">
<section class="primary hero">
<h3>Hauptkonto</h3>
<h2>4080,00 EUR</h2>
</section>
<section class="primary hero">
<h3>Umsatzsteuerkonto</h3>
<h2>-505,00 EUR</h2>
</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', 'Lagerauslastung', [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>
</div>
</main>
<footer th:replace="/fragments/footer :: footer"></footer>
</body>
</html>