-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
174 lines (165 loc) · 7.78 KB
/
index.js
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
function shugaStatus() {
this.compile = new function() {
this.monitor = (key,category) => {
const req = new XMLHttpRequest();
req.open("POST","https://api.uptimerobot.com/v2/getMonitors",true);
req.setRequestHeader("Content-Type", "application/json");
req.onload = () => {
let resp = JSON.parse(req.responseText);
let obj = resp.monitors[0];
let ratio = obj.custom_uptime_ratio.split("-");
let daily = ratio[0];
let monthly = ratio[1];
let annually = ratio[2];
let status;
let link;
if(obj.status == 2) {
status = "Online";
} else if(obj.status == 9) {
status = "Down";
ShugaStatus.state.isOffline++;
} else if(obj.status == 8) {
status = "Intermittent";
ShugaStatus.state.isIntermittent++;
} else {
status = "Unknown";
}
if(obj.url.indexOf("http") == -1) {
link = "https://" + obj.url;
} else {
link = obj.url;
}
let badge = "";
if(obj.status == 9 || obj.status == 8) {
badge = `<span class="badge badge-secondary bg-${status.toLowerCase()}">!</span>`;
} else if(obj.status != 2) {
badge = `<span class="badge badge-secondary">?</span>`;
}
ShugaStatus.state.update();
let out = `<div class="monitor">
<h2>${badge} <a class="online-name hide-link" href="${link}" target="_blank">${obj.friendly_name}</a> <div class="online-status text-${status.toLowerCase()} right">${status}</div></h2>
<div class="row online-details">
<div class="col-md-4">
<div class="progress-today-percent right">${Math.round(daily*100)/100}%</div>
<p>Today</p>
<div class="progress-out"><div style="width:${daily}%" class="progress-in online-today"></div></div>
</div>
<div class="col-md-4">
<div class="progress-today-percent right">${Math.round(monthly*100)/100}%</div>
<p>This Month</p>
<div class="progress-out"><div style="width:${monthly}%" class="progress-in online-today"></div></div>
</div>
<div class="col-md-4">
<div class="progress-today-percent right">${Math.round(annually*100)/100}%</div>
<p>This Year</p>
<div class="progress-out"><div style="width:${annually}%" class="progress-in online-today"></div></div>
</div>
</div>
<hr>
</div>`;
document.querySelector(".entry-" + category.toLowerCase()).innerHTML += out;
}
let body = JSON.stringify({
api_key: key,
custom_uptime_ratios: "1-30-365"
});
req.send(body);
}
this.entry = (name) => {
let out = `<div class="container category">
<h1>${name}</h1>
<div class="entry entry-${name.toLowerCase()}">
</div>
</div>`
document.querySelector(".main").innerHTML += out;
}
}
this.init = () => {
for (cat in data) {
ShugaStatus.compile.entry(cat);
for (let i = 0; i < data[cat].length; i++) {
ShugaStatus.compile.monitor(data[cat][i],cat);
}
}
ShugaStatus.news();
}
this.deinit = () => {
let containers = document.querySelectorAll(".category:not(.news)");
for (i = containers.length-1; i >= 0; i--) {
containers[i].parentElement.removeChild(document.querySelectorAll(".category:not(.news)")[i]);
}
}
this.refresh = () => {
ShugaStatus.deinit();
window.setTimeout(ShugaStatus.init,1000);
}
this.state = new function() {
this.isOffline = 0;
this.isIntermittent = 0;
this.update = () => {
if(ShugaStatus.state.isOffline > 1) {
document.getElementById("tldr").innerHTML = ShugaStatus.state.isOffline + " services are currently suffering down-time.";
document.getElementById("tldr").className = "alert alert-danger";
} else if(ShugaStatus.state.isIntermittent > 1) {
document.getElementById("tldr").innerHTML = ShugaStatus.state.isIntermittent + " services are currently suffering some interruptions.";
document.getElementById("tldr").className = "alert alert-warning";
} else if(ShugaStatus.state.isOffline == 1) {
document.getElementById("tldr").innerHTML = ShugaStatus.state.isOffline + " service is currently suffering down-time.";
document.getElementById("tldr").className = "alert alert-danger";
} else if(ShugaStatus.state.isIntermittent == 1) {
document.getElementById("tldr").innerHTML = ShugaStatus.state.isIntermittent + " service is currently suffering some interruptions.";
document.getElementById("tldr").className = "alert alert-warning";
} else {
document.getElementById("tldr").innerHTML = "All services are operational!";
document.getElementById("tldr").className = "alert alert-success";
}
}
}
this.news = () => {
const req = new XMLHttpRequest();
req.open("GET", "updates.json", true);
req.onload = () => {
const news = document.querySelector(".news>.entry");
resp = JSON.parse(req.responseText);
news.innerHTML = "";
let n = 0;
for (i in resp) {
let date = new Date(Number(resp[i].date)).toLocaleDateString();
news.innerHTML += `<div class="news">
<b>${date}:</b> ${resp[i].body}
</div>`
n++;
}
if(n == 0) {
news.innerHTML = `<div class="news news-empty">
There is no news to display!
</div>`;
}
}
req.send();
}
this.progress = () => {
const el = document.querySelector(".progress-master");
value = Number(el.getAttribute("timer"));
value--;
if(value <= 0) {
ShugaStatus.refresh();
value = 300;
}
el.setAttribute("timer",value);
let seconds = Math.round(value%60);
if(seconds < 10) {
seconds = "0" + String(seconds);
}
el.innerHTML = "Refreshing in " + Math.floor(value/60) + ":" + seconds;
document.querySelector(".progress-underlay").innerHTML = "Refreshing in " + Math.floor(value/60) + ":" + seconds;
el.style.width = value/3 + "%";
}
}
const ShugaStatus = new shugaStatus();
// Manipulate data here. Object with arrays of API tokens.
const data = {
"Services": ["m782868659-c5618ee1cb30b226f8fe93d9","m783364201-65a81aa6774153dd114659dc","m783472611-2f6522b764d8b9d0d6560ef8", "m783503839-cbdb3e1d30df667d9f94a14b", "m783534583-6eb4f338d22e937d9d512889", "m783612285-edf647c7f1db26a92f37dc14", "m783434484-ad9277cedd553aa0a38bba68"],
}
document.body.addEventListener("load",ShugaStatus.init());
window.setInterval(ShugaStatus.progress,1000);