Studium/Softwareprojektmanagement
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'SPM-12'

Browse Source
This commit is contained in:
Johannes Theiner 2019-05-07 19:05:10 +02:00
commit 24d68319b9
16 changed files with 775 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,4 +1,5 @@
*.iml
.idea
.project
target
target
.vscode

26
src/main/webapp/preview/data/flop_articles.json Normal file
View File

@ -0,0 +1,26 @@
{
"labels": [
"Insgesamt",
"Gruppe 1",
"Gruppe 2",
"Gruppe 3"
],
"data1": [
50,
10,
20,
30
],
"data2": [
30,
5,
20,
5
],
"data3": [
80,
20,
30,
30
]
}

26
src/main/webapp/preview/data/overview.json Normal file
View File

@ -0,0 +1,26 @@
{
"labels": [
"1 Jan",
"2 Jan",
"3 Jan",
"4 Jan",
"5 Jan",
"6 Jan"
],
"data1": [
200,
150,
190,
99,
142,
222
],
"data2": [
434,
300,
324,
198,
349,
353
]
}

18
src/main/webapp/preview/data/shoping_times.json Normal file
View File

@ -0,0 +1,18 @@
{
"labels": [
"8-9",
"9-10",
"10-11",
"11-12",
"12-13",
"13-14"
],
"data1": [
12,
19,
3,
5,
2,
3
]
}

12
src/main/webapp/preview/data/sold_articles.json Normal file
View File

@ -0,0 +1,12 @@
{
"labels": [
"Gruppe 1",
"Gruppe 2",
"Gruppe 3"
],
"data1": [
2055,
816,
953
]
}

30
src/main/webapp/preview/data/top_articles.json Normal file
View File

@ -0,0 +1,30 @@
{
"labels": [
"Insgesamt",
"Gruppe 1",
"Gruppe 2",
"Gruppe 3"
],
"label1": "Gartengeräte",
"data1": [
150,
50,
50,
50
],
"label2": "Eisenwaren",
"data2": [
120,
10,
80,
30
],
"label3": "Baumaterialien",
"data3": [
200,
102,
53,
45
]
}

301
src/main/webapp/preview/index.html Normal file
View File

@ -0,0 +1,301 @@
<!DOCTYPE html>
<html>
<head>
<title>BauDas</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" media="screen,projection" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body class="blue-grey lighten-5">
<!--Navbar-->
<div class="navbar-fixed">
<nav class="nav-extended blue-grey lighten-3 white-text row">
<a href="#" class="brand-logo hide-on-small-and-down center">BauDas</a>
<!--Navbar Tabs-->
<div class="nav-content col 12 ">
<ul class="tabs tabs-transparent blue-grey lighten-3 white-text">
<li class="tab"><a class="active" href="#analysis"><i class="material-icons left">poll</i>Analyse</a></li>
<li class="tab"><a href="#marketing"><i class="material-icons left">public</i>Marketing</a></li>
</ul>
</div>
<!--Navbar Items-->
<div class="nav-wrapper col 2 right">
<ul class="right hide-on-med-and-down">
<li><a data-target="slide-out" class="sidenav-trigger show-on-large"><i class="material-icons left">menu</i>Menü</a></li><!--Sidenav-->
<li><a href="login.html"><i class="material-icons left">person_outline</i>Logout</a></li><!--Logout-->
</ul>
<ul class="right">
<li><a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a></li><!--Sidenav-->
<li><a href="login.html" class="sidenav-trigger"><i class="material-icons">person_outline</i></a></li><!--Logout-->
</ul>
</div>
</nav>
</div>
<br>
<!--Sidenav Content-->
<ul id="slide-out" class="sidenav">
<li><div class="user-view">
<div class="background">
<img style="width: 100%" src="logoOrginal.gif">
</div>
<br>
<br>
</div></li>
<li><div class="divider"></div></li>
<li><div class="input-field container">
<label>Gruppenauswahl</label>
<br>
<select>
<option value="0">alle</option>
<option value="1">Gruppe 1</option>
<option value="2">Gruppe 2</option>
<option value="3">Gruppe 3</option>
</select>
</div></li>
<li><div class="input-field container">
<label>Datensatzauswahl</label>
<br>
<select>
<option value="0">aktuell</option>
<option value="1">Datensatz 1</option>
<option value="2">Datensatz 2</option>
<option value="3">Datensatz 3</option>
<option value="4">Datensatz 4</option>
<option value="5">Datensatz 5</option>
</select>
<br>
</div></li>
<li><div class="divider"></div></li>
<li><form action="upload">
<br>
<div class="file-field input-field container">
<div class="btn blue-grey lighten-2">
<span>File</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Datei hochladen">
</div>
</div>
</form></li>
<li><div class="container">
<a class="waves-effect waves-light btn blue-grey lighten-2 right"><i class="material-icons left">file_upload</i>Hochladen</a>
</div></li>
</ul>
<!--Cards-->
<!--Analyse-Cards-->
<div id="analysis" class="row container">
<!--Übersicht-->
<div class="col s12 m12">
<div id="overview" class="card white">
<div class="center">
<span class="card-title center">Übersicht</span>
</div>
<div class="card-action center">
<a href="#">Tagesübersicht</a>
<a href="#">Wochenübersicht</a>
</div>
<div class="card-content">
<div>
<canvas id="overview_chart" width="1000" height="400"></canvas>
</div>
</div>
</div>
</div>
<!--Einkaufszeiten-->
<div class="col s12 m6">
<div id="shoping_times" class="card white">
<div class="card-content">
<div class="center">
<span class="card-title">Einkaufszeiten</span>
</div>
<div class="center">
<div class="input-field col s12">
<select>
<option value="0">Montag</option>
<option value="1">Dienstag</option>
<option value="2">Mittwoch</option>
<option value="3">Donnerstag</option>
<option value="4">Freitag</option>
<option value="5">Samstag</option>
<option value="6">Sonntag</option>
</select>
<label>Wochentag</label>
</div>
</div>
<div>
<canvas id="shoping_times_chart" width="1000" height="400"></canvas>
</div>
</div>
</div>
</div>
<!--Verkaufte Artikel-->
<div class="col s12 m6">
<div id="sold_articles" class="card white">
<div class="card-content">
<div class="center">
<span class="card-title center">Verkaufte Artikel</span>
</div>
<div class="center">
<div class="input-field col s12">
<select>
<option value="0">Artikel 1</option>
<option value="1">Artikel 2</option>
<option value="2">Artikel 3</option>
</select>
<label>Artikel</label>
</div>
</div>
<div>
<canvas id="sold_articles_cake" width="1000" height="400"></canvas>
</div>
</div>
</div>
</div>
<!--Top Artikel-->
<div class="col s12 m6">
<div id="top_articles" class="card white">
<div class="center">
<span class="card-title center">Top Artikel</span>
</div>
<div class="card-action center">
<a href="#">Umsatz</a>
<a href="#">Stückzahl</a>
</div>
<div class="card-content">
<div>
<canvas id="top_articles_chart" width="1000" height="400"></canvas>
</div>
</div>
</div>
</div>
<!--Flop Artikel-->
<div class="col s12 m6">
<div id="flop_articles" class="card white">
<div class="center">
<span class="card-title center">Flop Artikel</span>
</div>
<div class="card-action center">
<a href="#">Umsatz</a>
<a href="#">Stückzahl</a>
</div>
<div class="card-content">
<div>
<canvas id="flop_articles_chart" width="1000" height="400"></canvas>
</div>
</div>
</div>
</div>
<!--Warenkorbanlyse-->
<div id="shopping_card_analysis" class="col s12 m6">
<div class="card white">
<div class="card-content">
<div class="center">
<span class="card-title center">Warenkorbanalyse</span>
</div>
<div>
<p>Coming Soon</p>
</div>
</div>
</div>
</div>
<!--Gruppenübersicht-->
<div class="col s12 m6">
<div id="group_overview" class="card white">
<div class="card-content">
<div class="center">
<span class="card-title center">Gruppenübersicht</span>
</div>
<div>
<p>Coming Soon</p>
</div>
</div>
</div>
</div>
</div>
<!--Marketing-Cards-->
<div id="marketing" class="row container">
<div class="col s12 m6">
<div id="marketing_tip_1" class="card white">
<div class="card-content">
<div class="center">
<span class="card-title center">Marketingmaßnahme 1</span>
</div>
<div>
<p>Coming Soon</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6">
<div id="marketing_tip_2" class="card white">
<div class="card-content">
<div class="center">
<span class="card-title center">Marketingmaßnahme 2</span>
</div>
<div>
<p>Coming Soon</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6">
<div id="marketing_tip_3" class="card white">
<div class="card-content">
<div class="center">
<span class="card-title center">Marketingmaßnahme 3</span>
</div>
<div>
<p>Coming Soon</p>
</div>
</div>
</div>
</div>
<div class="col s12 m6">
<div id="marketing_tip_4" class="card white">
<div class="card-content">
<div class="center">
<span class="card-title center">Marketingmaßnahme 4</span>
</div>
<div>
<p>Coming Soon</p>
</div>
</div>
</div>
</div>
</div>
<!--Anfang Skriptbereich-->
<!--Script für Diagramme-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
<script src="js/overview.js"></script>
<script src="js/shoping_times.js"></script>
<script src="js/sold_articles.js"></script>
<script src="js/top_articles.js"></script>
<script src="js/flop_articles.js"></script>
<!--Script für Materlialize-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript" src="js/materialize_components.js"></script>
<!--Ende Skriptbereich-->
</body>
</html>

47
src/main/webapp/preview/js/flop_articles.js Normal file
View File

@ -0,0 +1,47 @@
$.ajax({
url: 'data/flop_articles.json',
dataType: 'json'
}).done(function (results) {
new Chart(document.getElementById("flop_articles_chart"), {
type: 'horizontalBar',
data: {
labels: results.labels,
datasets: [{
label: 'Holz',
backgroundColor: 'rgba(244, 177, 131, 1)',
stack: 'Stack 0',
data: results.data1
}, {
label: 'Eisenwaren',
backgroundColor: 'rgba(255, 217, 102, 1)',
stack: 'Stack 1',
data: results.data2
}, {
label: 'Baumaterialien',
backgroundColor: 'rgba(196, 209, 142, 1)',
stack: 'Stack 2',
data: results.data3
}]
},
options: {
responsive: true,
title: {
display: false,
text: 'Flop Artikel'
},
legend: {
position: 'bottom',
},
scales: {
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
}]
}
}
});
});

14
src/main/webapp/preview/js/materialize_components.js Normal file
View File

@ -0,0 +1,14 @@
$(".dropdown-trigger").dropdown();
$('.tabs').tabs();
$(document).ready(function(){
$('.sidenav').sidenav();
});
$(document).ready(function(){
$('select').formSelect();
});
$(document).ready(function(){
$('.collapsible').collapsible();
});
$(document).ready(function() {
M.updateTextFields();
});

58
src/main/webapp/preview/js/overview.js Normal file
View File

@ -0,0 +1,58 @@
$.ajax({
url: 'data/overview.json',
dataType: 'json'
}).done(function (results) {
new Chart(document.getElementById("overview_chart"), {
type: 'line',
data: {
labels: results.labels,
datasets: [{
label: "Warenanzahl",
data: results.data1,
fill: true,
backgroundColor: 'rgba(113, 114, 231, 0.7)',
lineTension: 0,
}, {
label: "Einnahmen in €",
data: results.data2,
fill: true,
backgroundColor: 'rgba(104, 216, 154, 0.8)',
lineTension: 0,
}]
},
options: {
responsive: true,
title: {
display: false,
text: 'Übersicht'
},
legend: {
display: false
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
elements: {
point: {
radius: 0
}
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false
}
}],
yAxes: [{
display: true,
}]
}
}
});
});

57
src/main/webapp/preview/js/shoping_times.js Normal file
View File

@ -0,0 +1,57 @@
$.ajax({
url: 'data/shoping_times.json',
dataType: 'json'
}).done(function (results) {
new Chart(document.getElementById("shoping_times_chart"), {
type: 'bar',
data: {
labels: results.labels,
datasets: [{
label: 'Anzahl verkaufter Artikel',
data: results.data1,
backgroundColor: [
'rgba(143, 170, 220, 0.9)',
'rgba(255, 50, 1, 0.9)',
'rgba(143, 170, 220, 0.9)',
'rgba(143, 170, 220, 0.9)',
'rgba(103, 215, 153, 0.9)',
'rgba(143, 170, 220, 0.9)',
],
borderColor: [
'rgba(143, 170, 220, 0.9)',
'rgba(255, 50, 1, 1)',
'rgba(143, 170, 220, 1)',
'rgba(143, 170, 220, 1)',
'rgba(103, 215, 153, 1)',
'rgba(143, 170, 220, 1)',
],
borderWidth: 1
}]
},
options: {
responsive: true,
title: {
display: false,
text: 'Einkaufszeiten'
},
legend: {
display: false
},
scales: {
yAxes: [{
categoryPercentage: 1.0,
barPercentage: 0.5,
ticks: {
beginAtZero: true
}
}],
xAxes: [{
gridLines: {
display: false
},
}]
}
}
});
});

38
src/main/webapp/preview/js/sold_articles.js Normal file
View File

@ -0,0 +1,38 @@
$.ajax({
url: 'data/sold_articles.json',
dataType: 'json'
}).done(function (results) {
new Chart(document.getElementById("sold_articles_cake"), {
type: 'pie',
data: {
datasets: [{
data: results.data1,
backgroundColor: [
'rgba(237, 125, 49, 0.9)',
'rgba(255, 192, 0, 0.9)',
'rgba(112, 173, 71, 0.9)',
],
label: 'Dataset 1'
}],
labels: results.labels
},
options: {
responsive: true,
title: {
display: false,
text: 'Verkaufte Artikel',
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
legend: {
position: 'bottom'
}
}
});
});

47
src/main/webapp/preview/js/top_articles.js Normal file
View File

@ -0,0 +1,47 @@
$.ajax({
url: 'data/top_articles.json',
dataType: 'json'
}).done(function (results) {
new Chart(document.getElementById("top_articles_chart"), {
type: 'phorizontalBarie',
data: {
labels: results.labels,
datasets: [{
label: results.label1,
backgroundColor: 'rgba(244, 177, 131, 1)',
stack: 'Stack 0',
data: results.data1
}, {
label: results.label2,
backgroundColor: 'rgba(255, 217, 102, 1)',
stack: 'Stack 1',
data: results.data2
}, {
label: results.label3,
backgroundColor: 'rgba(196, 209, 142, 1)',
stack: 'Stack 2',
data: results.data3
}]
},
options: {
responsive: true,
title: {
display: false,
text: 'Top Artikel'
},
legend: {
position: 'bottom',
},
scales: {
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
}]
}
}
});
});

44
src/main/webapp/preview/login.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" media="screen,projection" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body class="blue-grey lighten-5">
<div class="container row">
<!--Login-->
<div class="center">
<div class="card white col s6 push-s3">
<div class="card-content">
<div class="center">
<img style="width: 50%" src="logoOrginal.gif">
</div>
<div class="divider"></div>
<div class="row">
<div class="col s8 push-s2">
<input id="password" type="password" class="validate" placeholder="Passwort">
<a class="waves-effect waves-light btn blue-grey lighten-2"><i class="material-icons left">lock_open</i>Login</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Anfang Skriptbereich-->
<!--Script für Materlialize-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript" src="js/materialize_components.js"></script>
<!--Ende Skriptbereich-->
</body>
</html>

BIN
src/main/webapp/preview/logoOrginal.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

55
src/main/webapp/preview/registration.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Registrierung</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" media="screen,projection" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body class="blue-grey lighten-5">
<div class="container">
<!--Login-->
<div class="center">
<div class="card white">
<div class="center">
<span class="card-title center">Regstrierung</span>
</div>
<div class="card-content">
<div>
<img style="width: 100%" src="logoOrginal.gif">
</div>
<div class="divider"></div>
<div class="row">
<div class="col s12">
<input id="login" type="text">
<label for="login">Login-Name</label>
</div>
<div class="col s12">
<input id="password" type="text">
<label for="password">Passwort</label>
</div>
</div>
</div>
<div class="card-action right">
<a href="#">Bestätigen</a>
<a href="login.html">Zurück</a>
</div>
</div>
</div>
</div>
<!--Anfang Skriptbereich-->
<!--Script für Materlialize-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript" src="js/materialize_components.js"></script>
<!--Ende Skriptbereich-->
</body>
</html>