-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
173 lines (144 loc) · 6.54 KB
/
index.html
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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="./favicon.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script>
function setFetchingMessage() {
if (document.getElementById("emails").innerHTML == "") {
document.getElementById("emails")
.innerHTML = "Fetching... <small>If it takes longer, refresh the page.</small>";
document.getElementById("users")
.innerHTML = "Fetching... <small>If it takes longer, refresh the page.</small>";
document.getElementById("requests")
.innerHTML = "Fetching... <small>If it takes longer, refresh the page.</small>";
document.getElementById("runtime")
.innerHTML = "Fetching... <small>If it takes longer, refresh the page.</small>";
document.getElementById("start")
.innerHTML = "Fetching... <small>If it takes longer, refresh the page.</small>";
}
}
</script>
<style>
html,
body {
background-color: #FFF7E8;
}
@media (min-width: 1000px) {
.bg-info {
grid-row: 1;
grid-column-start: 1;
grid-column-end: 3;
}
.bg-success {
grid-row: 1;
grid-column-start: 3;
grid-column-end: 5;
}
.bg-dark {
grid-row: 2;
grid-column-start: 1;
grid-column-end: 3;
}
.bg-light {
grid-row: 2;
grid-column-start: 3;
grid-column-end: 5;
}
.alert-warning {
grid-row: 3;
grid-column-start: 2;
grid-column-end: 4;
}
#information {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
}
</style>
<title>WCA-Alert Infos</title>
</head>
<body>
<header>
<!-- Header image -->
<img src="https://raw.githubusercontent.com/luisfelipesdn12/Alerta-de-Campeonatos-WCA/master/images/Email%20Header%20English.png"
class="img-fluid" alt="Project header" style="margin-bottom: 1%;">
</header>
<h2 class="text-center" style="margin-bottom: 2%; margin-top: 2%;">Runtime information</h2>
<div id="information">
<!-- Emails card -->
<div class="card text-white bg-info mb-3" style="margin-block: 1%; margin-right: 2%; margin-left: 2%;">
<div class="card-header">Emails</div>
<div class="card-body">
<h5 class="card-title">
<p id="emails">
</h5>
<p class="card-text">The people who has been notified because we've identified changes in the
competitions number from the last verification.</p>
</div>
</div>
<!-- Users card -->
<div class="card text-white bg-success mb-3" style="margin-block: 1%; margin-right: 2%; margin-left: 2%;">
<div class="card-header">Users</div>
<div class="card-body">
<h5 class="card-title">
<p id="users">
</h5>
<p class="card-text">The number of users who we've checked the city.</p>
</div>
</div>
<!-- Requests card -->
<div class="card text-white bg-dark mb-3" style="margin-block: 1%; margin-right: 2%; margin-left: 2%;">
<div class="card-header">Requests</div>
<div class="card-body">
<h5 class="card-title">
<p id="requests">
</h5>
<p class="card-text">The number of requests to the WCA API witch were necessaries to check the users
city.</p>
</div>
</div>
<!-- Runtime card -->
<div class="card bg-light mb-3" style="margin-block: 1%; margin-right: 2%; margin-left: 2%;">
<div class="card-header">Runtime</div>
<div class="card-body">
<h5 class="card-title">
<p id="runtime">
</h5>
<p class="card-text">The duration of the verifications and other program operations in the last runtime.
</p>
</div>
</div>
<!-- Start at card -->
<div class="alert alert-warning" role="alert" style="margin-block: 1%; margin-right: 2%; margin-left: 2%;">
That information is referring to runtime witch started at:
<hr>
<p id="start">
</div>
</div>
<hr>
<footer>
<p class="text-center" style="margin-right: 1%; margin-left: 1%;">Alerta-de-Campeonatos-WCA is a script witch
send an email when there's a new WCA competition.</p>
<p class="text-center" style="margin-right: 1%; margin-left: 1%;">Know more in the <a
href="https://github.com/luisfelipesdn12/Alerta-de-Campeonatos-WCA">GitHub repository</a>.</p>
</footer>
<script>
window.setTimeout(setFetchingMessage, 1500);
fetch("https://gist.githubusercontent.com/luisfelipesdn12/1be498aa8a48b911f64276343511f541/raw/resume.json")
.then(response => response.json())
.then(resJson => {
document.getElementById("users").innerHTML = resJson.UsersChecked + " users checked";
document.getElementById("emails").innerHTML = resJson.EmailsSended + " emails sended";
document.getElementById("requests").innerHTML = resJson.RequestsSended + " requests sended";
document.getElementById("start").innerHTML = new Date(Date.parse(resJson.StartIn.substring(0, 19) + " UTC"));
document.getElementById("runtime").innerHTML = resJson.RuntimeDuration + " were spend";
})
.catch(err => console.log("An error occurs while we\'re trying to use the GitHub API.", err));
</script>
</body>
</html>