blob: bf535951527a4b5c33fa05584cea17b53b13b33f (
plain)
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
|
<!DOCTYPE html>
<html>
<head>
<script>
setInterval(function() {
status = fetch("/api/v1/status").then(response => {
response.json().then(data => {
if (data.playing) {
document.getElementById('playing').innerHTML = "Playing";
} else {
document.getElementById('playing').innerHTML = "Stopped";
}
document.getElementById('dcp_name').innerHTML = data.dcp_name;
document.getElementById('position').innerHTML = data.position;
});
});
}, 250);
function play() {
fetch("/api/v1/play", { method: "POST" });
}
function stop() {
fetch("/api/v1/stop", { method: "POST" });
}
</script>
<style>
button {
border: 1px solid rgba(27, 31, 35, 0.15);
border-radius: 6px;
color: #24292E;
display: inline-block;
line-height: 20px;
padding: 6px 16px;
vertical-align: middle;
white-space: nowrap;
word-wrap: break-word;
}
button:hover {
background-color: #F3F4F6;
text-decoration: none;
transition-duration: 0.1s;
}
button:active {
background-color: #EDEFF2;
box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
transition: none 0s;
}
button:focus {
outline: 1px transparent;
}
button:before {
display: none;
}
table {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
border: 2px solid black;
}
tr {
text-align: left;
border: 1px solid black;
}
td {
padding: 4px 16px;
text-align: left;
border: 1px solid black;
}
</style>
<title>TITLE</title>
</head>
<body>
<button name="play" value="play" onclick="play()">Play</button>
<button name="stop" value="stop" onclick="stop()">Stop</button>
<table>
<tr><td>DCP</td><td><p id="dcp_name"></td></tr>
<tr><td>State</td><td><p id="playing"></td></tr>
<tr><td>Position</td><td><p id="position"></td></tr>
</table>
</body>
</html>
|
