-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.j2
88 lines (84 loc) · 4.24 KB
/
index.j2
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
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>System Monitor</title>
<link rel="stylesheet" href="default.css">
</head>
<body>
<div class="main">
<div class="header_box">
<div class="show_always">
<div class="header plugin_name">Name</div>
<div class="header plugin_state">State</div>
<div class="header plugin_percentage">Summary</div>
</div>
<div class="show_on_demand">
<div class="header plugin_text">Text</div>
<div class="header plugin_last">Times</div>
</div>
</div>
{% for plugin_index, plugin in all_data.plugins.items() %}<div class="plugin" id="{{plugin_index|replace('\\040', '_')}}" onclick="toggle_hidden('{{plugin_index|replace('\\040', '_')}}')">
<div class="show_always">
<div class="content plugin_name" id="{{plugin_index|replace('\\040', '_')}}_name">{{plugin.data.name}}</div>
<div class="content plugin_state plugin_state_{{plugin.data.state}}" id="{{plugin_index|replace('\\040', '_')}}_state">{{ plugin.data.state }}</div>
<div class="content plugin_percentage" id="{{plugin_index|replace('\\040', '_')}}_percentage">{% if plugin.data.short_text is defined %}
<div class="progress_bar progress_bar_{{plugin.data.state}}" style="width:{% if plugin.data.percentage is defined %}{{plugin.data.percentage}}%{% else %}0{% endif %}"></div>
<div class="plugin_short_text">{{plugin.data.short_text}}</div>
{% else %}-{% endif %}</div>
</div>
<div class="show_on_demand" id="{{plugin_index|replace('\\040', '_')}}_hidden">
<div class="content plugin_text" id="{{plugin_index|replace('\\040', '_')}}_text">{{plugin.data.text}}</div>
<div class="content plugin_last" id="{{plugin_index|replace('\\040', '_')}}_last">
<span>{% if all_data.time_now - plugin.last_check > 300 %}Last check: {{ plugin.last_check|default(0)|timestamp_to_formated_time() }}{% if plugin.data.state != "OK" %}<br/>{% endif %}{% endif %}
{% if plugin.data.state != "OK" %}Last OK: {{ plugin.last_ok|default(0)|timestamp_to_formated_time() }}{% endif %}</span></div>
</div>
</div>
{% endfor %}
</div>
<div class="timestamp">HTML generated {{ all_data.time_now|timestamp_to_formated_time() }}</div>
<script>
function toggle_hidden(plugin_index) {
var hidden_box = document.getElementById(plugin_index.concat("_hidden"));
if(hidden_box) {
if (hidden_box.style.display === "flex") {
if((window).innerWidth / parseFloat(getComputedStyle(document.querySelector('body'))['font-size']) < 60)
{
hidden_box.style.display = "none";
}
} else {
hidden_box.style.display = "flex";
}
}
}
document.querySelectorAll('time').forEach(function ago(html_element) {
var object_date = new Date(html_element.dateTime);
var now = new Date();
var timediff = (now.getTime() - object_date.getTime()) / 1000;
let units = new Map();
units.set('second', 1);
units.set('minute', 60);
units.set('hour', 60);
units.set('day', 24);
units.set('week', 7);
var result = timediff;
var result_unit = 'second'
var divisor = 1;
for (let [unit, unit_size] of units) {
divisor = divisor * unit_size;
if ((timediff / divisor) >= 1) {
result = timediff / divisor;
result_unit = unit;
}
else {
break;
}
}
var plural_appendix = '';
if (Math.floor(result) != 1) {
plural_appendix = 's'
}
html_element.innerHTML = Math.floor(result) + ' ' + result_unit + plural_appendix + ' ago'
})
</script>
</body>