misc/slidetogether
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Overall timer

Browse Source
This commit is contained in:
Ian Gulliver
2020-06-27 21:18:19 +00:00
parent 323a7f26db
commit ade233fe47
4 changed files with 139 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
static/remote.css
View File

@@ -78,6 +78,11 @@ tfoot tr {
cursor: pointer;
}
.action {
cursor: pointer;
margin-left: 10px;
}
.github {
bottom: 0;
color: var(--subtle-color);

41
static/remote.js
View File

@@ -63,6 +63,7 @@ function watch(roomId, clientId, adminSecret, prnt) {
}
const es = new EventSource(url.toString());
renderControls(roomId, clientId, adminSecret, prnt, es);
renderTimers(roomId, adminSecret, prnt, es);
if (adminSecret) {
renderAdmin(roomId, adminSecret, prnt, es);
}
@@ -100,11 +101,47 @@ function renderControls(roomId, clientId, adminSecret, prnt, es) {
controls.classList.remove("enable");
}
});
const clockDiv = create(prnt, "div", "\u00a0Time: ");
}
function renderTimers(roomId, adminSecret, prnt, es) {
let overallStart = null;
es.addEventListener("message", (e) => {
const event = JSON.parse(e.data);
if (!event.standard_event) {
return;
}
overallStart = parseInt(event.standard_event.timer_start || "0", 10) || null;
});
const width = 10;
const clockDiv = create(prnt, "div", "Clock: ".padStart(width, "\u00a0"));
const clock = create(clockDiv, "span");
const overallDiv = create(prnt, "div", "Overall: ".padStart(width, "\u00a0"));
const overall = create(overallDiv, "span");
if (adminSecret) {
const reset = create(overallDiv, "span", "↺", ["action"]);
reset.addEventListener("click", () => {
const req = {
room_id: roomId,
admin_secret: adminSecret,
};
fetch("/api/reset", {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(req),
});
});
}
setInterval(() => {
const now = new Date();
clock.innerText = `${now.getHours().toString().padStart(2, "0")}:${now.getMinutes().toString().padStart(2, "0")}:${now.getSeconds().toString().padStart(2, "0")}`;
clock.innerText = `${now.getHours().toString().padStart(2, "0")}h${now.getMinutes().toString().padStart(2, "0")}m${now.getSeconds().toString().padStart(2, "0")}s`;
if (overallStart) {
const o = Math.trunc(now.getTime() / 1000 - overallStart);
overall.innerText = `${Math.trunc(o / 3600).toString().padStart(2, "0")}h${Math.trunc(o % 3600 / 60).toString().padStart(2, "0")}m${Math.trunc(o % 60).toString().padStart(2, "0")}s`;
}
else {
overall.innerText = "";
}
}, 250);
}
function renderAdmin(roomId, adminSecret, prnt, es) {

57
static/remote.ts
View File

@@ -34,12 +34,18 @@ interface RemoveRequest {
client_id: string;
}
interface ResetRequest {
room_id: string;
admin_secret: string;
}
interface Event {
standard_event?: StandardEvent;
admin_event?: AdminEvent;
}
interface StandardEvent {
timer_start?: string;
active?: boolean;
admin_secret?: string;
}
@@ -135,6 +141,8 @@ function watch(roomId: string, clientId: string, adminSecret: string | null, prn
renderControls(roomId, clientId, adminSecret, prnt, es);
renderTimers(roomId, adminSecret, prnt, es);
if (adminSecret) {
renderAdmin(roomId, adminSecret, prnt, es);
}
@@ -180,12 +188,57 @@ function renderControls(roomId: string, clientId: string, adminSecret: string |
controls.classList.remove("enable");
}
});
}
const clockDiv = create(prnt, "div", "\u00a0Time: ");
function renderTimers(roomId: string, adminSecret: string | null, prnt: HTMLElement, es: EventSource) {
let overallStart: number | null = null;
es.addEventListener("message", (e) => {
const event = JSON.parse(e.data) as Event;
if (!event.standard_event) {
return;
}
overallStart = parseInt(event.standard_event.timer_start || "0", 10) || null;
});
const width = 10;
const clockDiv = create(prnt, "div", "Clock: ".padStart(width, "\u00a0"));
const clock = create(clockDiv, "span");
const overallDiv = create(prnt, "div", "Overall: ".padStart(width, "\u00a0"));
const overall = create(overallDiv, "span");
if (adminSecret) {
const reset = create(overallDiv, "span", "↺", ["action"]);
reset.addEventListener("click", () => {
const req: ResetRequest = {
room_id: roomId,
admin_secret: adminSecret,
};
fetch("/api/reset", {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(req),
});
});
}
setInterval(() => {
const now = new Date();
clock.innerText = `${now.getHours().toString().padStart(2, "0")}:${now.getMinutes().toString().padStart(2, "0")}:${now.getSeconds().toString().padStart(2, "0")}`;
clock.innerText = `${now.getHours().toString().padStart(2, "0")}h${now.getMinutes().toString().padStart(2, "0")}m${now.getSeconds().toString().padStart(2, "0")}s`;
if (overallStart) {
const o = Math.trunc(now.getTime() / 1000 - overallStart);
overall.innerText = `${Math.trunc(o / 3600).toString().padStart(2, "0")}h${Math.trunc(o % 3600 / 60).toString().padStart(2, "0")}m${Math.trunc(o % 60).toString().padStart(2, "0")}s`;
} else {
overall.innerText = "";
}
}, 250);
}