-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
131 lines (116 loc) · 4.96 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sobani</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<link href="./src/assets/css/main.css" rel="stylesheet">
</head>
<body>
<div class="nonecentered">
<div class="indicator">
<div id="connection-indicator"></div>
<a class="connection-text" id="connection-not">Not Connected</a>
</div>
</div>
<center>
<div class="container" style="line-height: 1em; padding-top: 40px;">
<img src="./src/assets/icon.png" style="width: 250px; height: 250px;" />
<br>
<p style="font-weight: bold;">Welcome to use Sobani!</p>
<p>Current Version: 0.1.2</p>
<div id="shareid-field"></div>
<div id="loading"></div>
<input type="button" class="disconnect-button" value="Disconnect" onclick="disconnect()" style="display: none;">
<div class="form-group field" style="display: block;">
<input type="text" class="form-field" id="remote-id" placeholder="ShareID" required>
<input type="button" class="connect-button" id="connect-button" value="Connect" onclick="connect()"
style="display: block;">
<br>
<label for="name" class="form-label">Share ID</label>
</div>
</div>
</center>
<div class="logger"></div>
<div class="lastseen" style="display: none">
Last Seen: <span id="lastseen-time"></span>
</div>
<script type="text/javascript" src="./src/assets/js/jquery-3.4.1.min.js"></script>
<script>
let input = document.getElementById("remote-id");
input.addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("connect-button").click();
}
});
// Announced
window.api.response("announced", shareId => {
$("#shareid-field").append(`<p>Your share ID is <span>${shareId}</span></p>`)
})
// Controlling
window.api.response("control", status => {
$(".load")[0].remove()
$(".container").append(`<p class="log">${status}<p>`)
})
// Indicator
window.api.response("indicator", update => {
var timer
switch (update.status) {
// If Connected
case "connected":
timer === undefined ? 0 : clearTimeout(timer)
// Toggle Indicator
document.getElementById("connection-indicator").style.background = "#4CDA7B";
$("#connection-not")[0].remove();
$(".indicator").append(`<a class="connection-text" id="connection-true">Connected</a>`);
$("#shareid-field").append(`<p id="connected-user" data-share-id="${update.id}">Your are connected with <span>${update.id}</span></p>`);
// document.getElementsByClassName("lastseen")[0].style.display = "block";
// Remove Connect
document.getElementsByClassName("form-label")[0].style.display = "none";
document.getElementsByClassName("form-field")[0].style.display = "none";
document.getElementsByClassName("connect-button")[0].style.display = "none"
document.getElementsByClassName("disconnect-button")[0].style.display = "block";
break;
// If Disconnected
case "disconnected":
// Toggle Indicator
document.getElementById("connection-indicator").style.background = "#ff2f5c";
$("#connection-true")[0].remove();
$(".indicator").append(`<a class="connection-text" id="connection-not">Not Connected</a>`);
$("#connected-user")[0].remove();
// Remove Disconnect
document.getElementsByClassName("form-label")[0].style.display = "block";
document.getElementsByClassName("form-field")[0].style.display = "block";
document.getElementsByClassName("connect-button")[0].style.display = "block"
document.getElementsByClassName("disconnect-button")[0].style.display = "none";
// Remove all logs
$(".log").remove();
break;
}
})
window.api.response("lastseen", function (lastseen) {
$("#lastseen-time")[0].text = lastseen;
})
// Connect Action
function connect() {
let text = $("#remote-id")[0].value;
if (text === "" || text === undefined || text.trim() === "") {
alert("Field is required\nMust enter a valid ShareID");
}
else {
document.getElementsByClassName("form-label")[0].style.display = "none";
document.getElementsByClassName("form-field")[0].style.display = "none";
document.getElementsByClassName("connect-button")[0].style.display = "none"
$("#loading").append("<div class='load'></div>");
window.api.request("connect", text.trim());
}
}
function disconnect() {
document.getElementsByClassName("form-group")[0].style.display = "block";
window.api.request("disconnect", $("#connected-user")[0].getAttribute("data-share-id"))
}
</script>
</body>
</html>