-
Notifications
You must be signed in to change notification settings - Fork 0
/
ui.tmpl
62 lines (61 loc) · 2.31 KB
/
ui.tmpl
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Music Junk Cleaner</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<style>
.container{text-align: center;}
h2{margin-top: 15vh; margin-bottom: 3vh;}
*:active, *:focus{outline: 0;}
input[type="text"]{padding: 0 5px; background: lightyellow; text-align: center;}
.progress{margin:0;}
.inline{margin: 5vh 0;}
@media screen and (max-width: 640px) {
h1{
font-size: 3rem;
}
}
</style>
</head>
<body>
<div class="progress green lighten-4">
<div class="determinate green" id="determinate" style="width: 0%"></div>
</div>
<main class="container">
<h2>Music Junk Cleaner</h2>
<p class="">
Utility for cleaning music files. Kindly mark/keep junk data in input field, if shown.
</p>
<div class="inline" id="box">
<input type="text" id="fileData" class="input-field yello lighten-4" data-origin="">
<button class="waves-effect waves-light btn red" id="sbutton">That one's junk</button>
</div>
</main>
<script type="text/javascript">
(function() {
var pr_max = "{{.Count}}";
var data = document.getElementById("fileData");
var conn = new WebSocket("ws://{{.Host}}/ws");
conn.onopen = function(evt) {
console.log("Connection Open")
}
conn.onclose = function(evt) {
console.log("Connection Closed")
document.getElementById('box').innerHTML = "Completed processing of "+ pr_max+ " music files."
document.getElementById("determinate").style.width = "100%";
document.getElementById('box').style.background = "#fffde7";
}
conn.onmessage = function(evt) {
var localData = JSON.parse(evt.data);
data.value = localData.Context;
var x = (Number(localData.Count)*100/Number(pr_max)).toString();
document.getElementById("determinate").style.width = x +"%";
}
document.getElementById("sbutton").addEventListener("click", function(){
conn.send(JSON.stringify({junk : data.value}));
});
})();
</script>
</body>
</html>