-
Notifications
You must be signed in to change notification settings - Fork 204
/
yearly.php
149 lines (135 loc) · 5.49 KB
/
yearly.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Logging Jahresansicht</title>
<meta name="author" content="Kevin Wieland, Michael Ortestein" />
<link rel="apple-touch-icon" sizes="57x57" href="../img/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="../img/favicons/apple-touch-icon-60x60.png">
<link rel="icon" type="image/png" href="../img/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="../img/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="../manifest.json">
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#00a8ff">
<meta name="msapplication-config" content="../img/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<meta http-equiv="refresh" content="600; URL=index.php">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="../css/bootstrap-4.4.1/bootstrap.min.css">
<!-- Normalize -->
<link rel="stylesheet" type="text/css" href="../css/normalize-8.0.1.css">
<!-- Bootstrap-Datepicker -->
<link rel="stylesheet" type="text/css" href="../css/bootstrap-datepicker/bootstrap-datepicker3.min.css">
<!-- Font Awesome, all styles -->
<link href="../fonts/font-awesome-5.8.2/css/all.css" rel="stylesheet">
<!-- include settings-style -->
<link rel="stylesheet" type="text/css" href="logging_style.css">
<!-- important scripts to be loaded -->
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/bootstrap-4.4.1/bootstrap.bundle.min.js"></script>
</head>
<body>
<?php
include $_SERVER['DOCUMENT_ROOT'].'/openWB/web/logging/navbar.php';
?>
<div role="main" class="container" style="margin-top:20px">
<div class="row">
<div class="col" style="text-align: center;">
<h4>Logging Jahresansicht</h4>
</div>
</div>
<div class="row justify-content-center">
<div class="col-6 col-sm-3">
<div class="input-group mb-3">
<input class="form-control datepicker" id="theDate" type="text" readonly>
<div class="input-group-append">
<span class="input-group-text far fa-calendar-alt fa-lg vaRow"></span>
</div>
</div>
</div>
</div>
<div class="row" id="thegraph">
<div class="col">
<div id="waitforgraphloadingdiv" style="text-align: center;">
<br>Graph lädt, bitte warten...<br>
<div class="spinner-grow text-muted mt-3"></div>
</div>
<div id="canvasdiv">
<canvas id="canvas" style="height: 400px;"></canvas>
</div>
</div>
</div>
</div>
<footer class="footer bg-dark text-light font-small">
<div class="container text-center">
<small>Sie befinden sich hier: Logging/Jahr</small>
</div>
</footer>
<!-- load Chart.js library -->
<script src="../js/Chart.bundle.min.js"></script>
<script src="../js/hammerjs@2.0.8"></script>
<script src="../js/chartjs-plugin-zoom@0.7.4"></script>
<!-- load Bootstrap-Datepicker library -->
<script src="../js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="../js/bootstrap-datepicker/bootstrap-datepicker.de.min.js"></script>
<!-- load mqtt library -->
<script src = "../js/mqttws31.js" ></script>
<!-- get parsed date, setup datepicker and load respective Chart.js definition -->
<script>
$(document).ready(function(){
// GET expects date format Y like 2020
// get parsed date and format nicely for input field
const EARLIESTDATE = '01/01/2018'; // no earlier date choosable
// TODO: set earliestdate to first occurance of valid logging data
var LATESTDATE = '12/31/' + new Date().getFullYear();
var earliestDate = new Date(EARLIESTDATE);
var latestDate = new Date(LATESTDATE);
var url_string = window.location.href;
var url = new URL(url_string);
var parsedDateString = url.searchParams.get('date');
var pattern = /^[0-9]{4}$/;
var reloadNeeded = false;
if ( parsedDateString == null || parsedDateString.match(pattern) == null ) {
// nothing parsed or format not valid, so set date to today
var parsedDate = new Date();
} else {
var parsedDate = new Date(parsedDateString);
if ( (parsedDate < earliestDate) || (parsedDate > latestDate) ) {
// date parsed was out of valid range so set to today
parsedDate = new Date();
reloadNeeded = true;
}
}
if ( reloadNeeded ) {
// date parsed was too early so reload with today
alert('reloadNeeded! date: '+parsedDate.getFullYear());
window.location.href = "yearly.php?date=" + parsedDate.getFullYear();
}
var theDate = parsedDate.getFullYear();
$('#theDate').val(theDate); // set value of input field
// config the datepicker
$('.datepicker').datepicker({
format: 'yyyy',
language: "de-DE",
startDate: earliestDate.getFullYear().toString(),
endDate: latestDate.getFullYear().toString(),
startView: 'years',
minViewMode: 'years',
maxViewMode: 'years',
todayBtn: false,
todayHighlight: true,
autoclose: true
})
.on('changeDate', function(e) {
// `e` here contains the extra attributes
var dateToParse = e.date.getFullYear();
window.location.href = "yearly.php?date=" + dateToParse;
});
// load graph
$.getScript("yearlychart.js");
})
</script>
</body>
</html>