https://contao-themes.net/files/launch/03_design/js/monitor.js?v=2f310d43

1function addRows(data, tableID) {
2
3    let tableRef = document.getElementById(tableID);
4
5    // delet table rows except first
6    for(var i = 1;i<tableRef.rows.length;){
7        tableRef.deleteRow(i);
8    }
9
10    data.forEach(function(data){
11        addRow(tableID, data);
12    });
13}
14
15let anchor = {
16    3: 'allinklcom',
17    5: '1und1ionos',
18    6: 'hosteurope',
19    9: 'strato',
20    10: 'alfahosting',
21    13: 'hostingwerk',
22    12: 'domainfactory',
23    14: 'webgo'
24};
25
26function addRow(tableID, item) {
27
28    let tableRef = document.getElementById(tableID);
29
30    //// insert row
31    let newRow = tableRef.insertRow(-1);
32
33    //// set fields
34    // status
35    if(item['pattern_online'] == 'yes')
36      createHtmlCell(newRow, 0, '<span class="bullet success-bg"></span>');
37    else
38      createHtmlCell(newRow, 0, '<span class="bullet error-bg"></span>');
39
40    // name
41    // createTextCell(newRow, 1, item.label);
42    createHtmlCell(newRow, 1, '<a href="' + window.location.href + '#' + anchor[item.id] + '">' + item.label + '</a>');
43    // end name
44
45    // Antwortzeit
46    createTextCell(newRow, 2, formatResponseTime(item.rtime) + ' Sekunden');
47
48    // zuletzt Online
49    if(item.last_online == null)
50      createTextCell(newRow, 3, 'Nie');
51    else
52      createTextCell(newRow, 3, onlineTime(item.last_check));
53
54    // zuletzt Offline
55    if(item.last_offline == null)
56      createTextCell(newRow, 4, 'Nie');
57    else
58      createTextCell(newRow, 4, localDate(item.last_offline));
59
60    // load chart
61    loadChart(anchor[item.id], item);
62}
63
64const optionsDay = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
65const optionsTime = { hour: "numeric", minute: "numeric"};
66
67function onlineTime(date) {
68    let time = 'vor ' + Math.floor(  (new Date().getTime() / 1000) - (new Date(date).getTime() / 1000)) + ' Sekunden';
69    return time;
70}
71
72function localDate(date) {
73    date = new Date(date);
74    let str = date.toLocaleDateString('de-DE', optionsTime) + ' Uhr, ' + date.toLocaleDateString('de-DE', optionsDay);
75    let parts = str.split(',');
76    return [parts[1], parts[2], parts[3]].join(', ');
77}
78
79function createHtmlCell(row, index, value ) {
80    let cell = row.insertCell(index);
81    cell.innerHTML = value;
82}
83
84function createTextCell(row, index, value ) {
85    let cell = row.insertCell(index);
86    let text = document.createTextNode(value);
87    cell.appendChild(text);
88}
89
90function refreshMonitor(){
91    var url = 'https://pdir.de/contao-monitor.php';
92
93    var request = new XMLHttpRequest();
94
95    request.open('GET', url, true);
96
97    request.onload = function() {
98        if (request.status >= 200 && request.status < 400) {
99            var data = JSON.parse(request.responseText);
100            addRows(data, 'monitors');
101        }
102    };
103
104    request.onerror = function() {
105        // There was a connection error of some sort
106        return url;
107    };
108
109    request.send();
110}
111
112function loadChart(anchor, data) {
113    // console.log('load charts');
114    // console.log(data);
115
116    /*
117    let allinklChart = new ConicGradient({
118        stops: "gold 40%, #f06 0", // required
119        repeating: true, // Default: false
120        size: 400 // Default: Math.max(innerWidth, innerHeight)
121    });*/
122    // console.log(allinklChart.svg); // SVG markup
123    // console.log(allinklChart.png); // PNG image (fixed dimensions) as a data URL
124    // console.log(allinklChart.dataURL); // data URL
125    // console.log(allinklChart.blobURL); // blog URL
126
127    // load charts
128    let chart = document.getElementById(anchor + 'Chart');
129    if(chart)
130    {
131      // console.log(data['uptime_last_7_days']);
132      if(data['uptime_last_7_days'] == 100)
133      {
134          chart.innerHTML = '<span class="percent">100%</span>';
135          chart.style.background = 'conic-gradient(yellowgreen 100%, #f06 0)';
136      }
137      else
138      {
139          let green = data['uptime_last_7_days'];
140          let red = 100 - data['uptime_last_7_days'];
141          //console.log(green);
142          //console.log(red);
143          chart.innerHTML = '<span class="percent">' + green + '%</span>';
144          chart.style.background = 'conic-gradient(yellowgreen ' + green + '%, #f06 ' + red + '%)';
145      }
146
147      // chart.style.borderRadius = '50%';
148    }
149
150    let rt = document.getElementById(anchor + 'RT');
151    if(rt)
152    {
153      // console.log(data['rt_avg_last_7_days']);
154      // let responseTime = parseFloat(data['rt_avg_last_7_days']).toFixed(2).toString();
155      // console.log(responseTime);
156      rt.innerText = formatResponseTime(data['rt_avg_last_7_days']) + ' Sek.';
157
158      // update price table
159      updateTableCell(anchor, formatResponseTime(data['rtime']) + ' Sek.', 'col_5');
160
161      // letzte Ausfallzeit
162      let ausfallzeit = 'Keine';
163      if(data['last_offline_duration'] != null)
164      {
165          ausfallzeit = data['last_offline_duration'];
166          ausfallzeit = ausfallzeit.replace('minutes', 'Minuten');
167          ausfallzeit = ausfallzeit.replace('minute', 'Minute');
168          ausfallzeit = ausfallzeit.replace('seconds', 'Sekunden');
169          ausfallzeit = ausfallzeit.replace('second', 'Sekunde');
170      }
171
172      updateTableCell(anchor, ausfallzeit, 'col_6');
173
174      // console.log('end loading charts');
175    }
176}
177
178function formatResponseTime(time) {
179    let responseTime = parseFloat(time).toFixed(3).toString();
180    return responseTime.replace('.', ',');
181}
182
183function updateTableCell(name, value, cssClass) {

184    let cells = document.getElementById('table_1511442').getElementsByTagName('td');
185    for (let i = 0; i < cells.length; i++) {
186        if(cells[i].innerText == name && cells[i].classList.contains(cssClass))
187        {
188            cells[i].innerText = value;
189        }
190    }
191}
192
193function setChartColors() {
194
195}
196
197document.addEventListener("DOMContentLoaded", () => {
198  refreshMonitor();
199});
200
201
202