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
Show Stats 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; padding: 0px;
width: 80rem; width: 80rem;
max-width: 80rem; max-width: 80rem;
min-width: 30rem; min-width: 20rem;
height: 0px; height: 0px;
padding: 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> <!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org"> <html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no"> <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> <title>Dashboard</title>
<link rel="stylesheet" th:href="@{/css/ecom.css}"/> <link rel="stylesheet" th:href="@{/css/ecom.css}" />
</head> </head>
<body> <body>
<nav th:replace="/fragments/header :: header">Header</nav> <nav th:replace="/fragments/header :: header">Header</nav>
<div class="sidebar-layout content-width"> <div class="sidebar-layout content-width">
<nav></nav> <nav></nav>
<div> <div>
<h1>Dashboard</h1> <h1>Dashboard</h1>
</div> </div>
</div> </div>
<main class="sidebar-layout content-width"> <main class="sidebar-layout content-width">
<nav th:replace="/fragments/intern :: sidebar"></nav> <nav th:replace="/fragments/intern :: sidebar"></nav>
<div class="detailgrid"> <div>
<section class="hero">
<h1 class="huge">!</h1> <h2>Buchhaltung</h2>
</section> <div class="grid xl">
<section> <section class="primary hero">
<h1>Insert</h1> <h3>Hauptkonto</h3>
</section> <h2>4080,00 EUR</h2>
<section> </section>
<h1>Dashboard</h1>
</section> <section class="primary hero">
<section> <h3>Umsatzsteuerkonto</h3>
<h1>HERE</h1> <h2>-505,00 EUR</h2>
</section> </section>
<section class="hero">
<h1 class="huge">!</h1> <section class="spacer"></section>
</section> <section class="spacer"></section>
<section> </div>
<h1>Insert</h1>
</section>
<section> <h2>Verkauf</h2>
<h1>Dashboard</h1> <div class="grid xl">
</section> <section class="">
<section> <h3>Verkäufe (Anzahl)</h3>
<h1>HERE</h1> <canvas id="sales"></canvas>
</section> <script>
<section class="hero"> chart('sales', 'Verkäufe/Tag', [15, 12, 14, 8, 7])
<h1 class="huge">!</h1> </script>
</section> </section>
<section>
<h1>Insert</h1> <section class="">
</section> <h3>Verkäufe (Umsatz)</h3>
<section> <canvas id="umsatz"></canvas>
<h1>Dashboard</h1> <script>
</section> chart('umsatz', 'Umsatz/Tag', [1512.45, 1225.15, 1452.54, 814.54, 746.00], "EUR")
<section> </script>
<h1>HERE</h1> </section>
</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> </div>
</main> </div>
<footer th:replace="/fragments/footer :: footer"></footer> </main>
<footer th:replace="/fragments/footer :: footer"></footer>
</body> </body>
</html> </html>