-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathstatuspage.html
103 lines (89 loc) · 2.87 KB
/
statuspage.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{.ProjectName}} Build status</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" />
</head>
<body>
<section class="section">
<div class="container">
<div class="box has-text-centered neelu-box">
<h1 class="title is-1">Build Status</h1>
<h3 class="subtitle is-5" id="lastBuildStart">{{.DateTimeString}}</h3>
<p class="subtitle"><span id="buildstatus">{{.BuildStatus}}</span>
<br><span id="coverage">{{.Coverage}}%</span>
</p>
</div>
<div class="columns is-centered">
<div class="column is-two-thirds">
<progress class="progress is-large" id="localprogressbar" value="{{.Coverage}}" max="100">
{{.Coverage}}%
</progress>
</div>
</div>
</div>
</section>
</body>
<style>
.neelu-box {
border-style: solid;
border-width: 2px;
border-color: #4a4a4a;
border-radius: 0px;
}
.progress {
padding: 4px;
border-radius: 0px;
border-style: solid;
border-color: #4a4a4a;
border-width: 1px;
width: 100%;
}
</style>
<script>
function formatAMPM(dateString) {
let date = new Date(dateString);
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0' + minutes : minutes;
var month = date.getMonth() + 1;
var day = date.getDate();
var year = date.getFullYear();
if (month <= 9) {
month = "0" + month.toString();
}
if (day <= 9) {
day = "0" + day.toString();
}
var strTime = year + "-" + month + "-" + day + " " + hours + ':' + minutes + ' ' + ampm;
return strTime;
}
var lastBuildStart = document.getElementById("lastBuildStart");
var buildstatus = document.getElementById("buildstatus");
var coverage = document.getElementById("coverage");
var localprogressbar = document.getElementById("localprogressbar");
var time = formatAMPM(lastBuildStart.innerHTML);
lastBuildStart.innerHTML = time;
var socket = new WebSocket({{.WebSocketRoute}});
socket.onmessage = function (message) {
if (message.data != null) {
var event = JSON.parse(message.data);
// console.log(message.data);
lastBuildStart.innerHTML = formatAMPM(event.lastBuildStart);
buildstatus.innerHTML = event.buildStatus;
coverage.innerHTML = event.coverage + "%";
localprogressbar.innerHTML = event.coverage + "%";
localprogressbar.setAttribute("value", event.coverage);
buildstatus.innerHTML = event.buildStatus;
if (event.coverage == 100) {
buildstatus.innerHTML = "success"
}
}
}
</script>
</html>