diff --git a/.gitignore b/.gitignore index b512c09..bcc7222 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -node_modules \ No newline at end of file +node_modules +rename.sh diff --git a/index.js b/index.js index 165e4bc..d8def66 100644 --- a/index.js +++ b/index.js @@ -2,6 +2,7 @@ const express = require("express"); const fs = require("fs"); const bodyParser = require("body-parser"); +console.log("Preparing server..."); const app = express(); app.use(express.static("static")); @@ -37,7 +38,7 @@ currentState = { currentState.textColors = currentState.colorSegments - +console.log("Preparing routes..."); app.get("/", function (req, res) { const data = fs.readFileSync("templates/newAdminPanel.html", "utf8"); res.send(data); @@ -92,7 +93,6 @@ app.get("/api/v1/ctrl/timer/play", function (req, res) { currentState.timerRunState = true currentState.countdownGoal += new Date().getTime() - currentState.pauseMoment; } - res.json({ status: "ok" }); }); @@ -135,6 +135,7 @@ app.get("/api/v1/set/text/colors", function (req, res) { app.get("/api/v1/set/text/enableColoring", function (req, res) { currentState.enableColoredText = (req.query.enable === 'true'); + res.json({ status: "ok" }); }); app.get("/api/v1/ctrl/message/show", function (req, res) { @@ -153,7 +154,9 @@ app.get("/api/v1/ctrl/message/hide", function (req, res) { currentState.showMessage = false res.json({ status: "ok" }); }); - +console.log("Starting server..."); app.listen(3005); -console.log("Server running on port 3005"); +console.info("Server running on port 3005"); +console.info("Visit localhost:3005/timer for the timer page"); +console.info("Visit localhost:3005 for the admin page"); diff --git a/static/css/styles.css b/static/css/styles.css index 2c0a752..953a446 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -104,3 +104,10 @@ html, body { animation:fade 1000ms infinite; -webkit-animation:fade 1000ms infinite; } + +.connectionWarning{ + background-color: red; + width: 100vw; + font-size: x-large; + font-family: sans-serif; +} \ No newline at end of file diff --git a/static/js/script.js b/static/js/script.js index cba512b..941bc97 100644 --- a/static/js/script.js +++ b/static/js/script.js @@ -3,6 +3,7 @@ newDateObj = new Date(newDateObj.getTime() + 1000 * 20) allowFullscreen = true let dataFame = {} +let timeDiff = 0 function enterFullscreen(element) { if (element.requestFullscreen) { @@ -76,15 +77,48 @@ function requestBackend() { if (resp.status == 200) { resp = resp.responseText; var data = JSON.parse(resp); + timeDiff = new Date().getTime() - data.srvTime dataFame = data; } } } +let isSlowed = false + +function handleRecovery() { + var img = document.body.appendChild(document.createElement("img")); + img.onload = function() + { + location.reload(); + }; + img.src = "SMPTE_Color_Bars.svg"; +} + +let recoInter = -1 + function handleUpdate() { var data = dataFame; document.getElementById("incomeData").innerHTML = JSON.stringify(data) - document.getElementById("timediff").innerHTML = new Date().getTime() - data.srvTime; + document.getElementById("timediff").innerHTML = timeDiff + "
" + String(new Date().getTime() - data.srvTime); + if (new Date().getTime() - data.srvTime > 1000 * 5) { + + if (!isSlowed) { + console.error("Server timeout") + clearInterval(updateInter) + updateInter = setInterval(handleUpdate, 900) + document.getElementById("warningBanner").style.display = "block" + isSlowed = true + recoInter = setInterval(handleRecovery, 10000) + } + } else { + if(isSlowed){ + clearInterval(updateInter) + clearInterval(recoInter) + updateInter = setInterval(handleUpdate, 2) + document.getElementById("warningBanner").style.display = "none" + isSlowed = false + } + } if (data.debug) { document.getElementById("timediff").style.display = "block"; @@ -101,7 +135,13 @@ function handleUpdate() { document.getElementById("overlay").style.display = "block"; document.getElementById("text").innerHTML = data.message } else { - off() + document.getElementById("overlay").style.display = "none"; + } + + if (data.showTimeOnCountdown && data.mode == "timer") { + document.getElementById("clockSec").innerHTML = getTime(); + } else { + document.getElementById("clockSec").innerHTML = ""; } if (new Date().getTime() - data.messageAppearTime < 5000) { @@ -123,9 +163,7 @@ function handleUpdate() { document.getElementById("timer").style.color = "white" } else if (data.mode == "timer") { - document.getElementById("wholeProgBar").style.display = "block"; - if (data.timerRunState) { const now = new Date() const diff = data.countdownGoal - now.getTime() @@ -145,12 +183,6 @@ function handleUpdate() { } } - if (data.showTimeOnCountdown) { - document.getElementById("clockSec").innerHTML = getTime(); - } else { - document.getElementById("clockSec").innerHTML = ""; - } - } else if (data.mode == "black") { document.getElementById("timer").innerHTML = ""; document.getElementById("testImg").style.display = "none"; @@ -189,16 +221,9 @@ function getTime() { return time; } -function on() { - document.getElementById("overlay").style.display = "block"; -} - -function off() { - document.getElementById("overlay").style.display = "none"; -} setInterval(requestBackend, 500); -setInterval(handleUpdate, 2); +updateInter = setInterval(handleUpdate, 2); let temp = new URLSearchParams(window.location.search).get("smaller"); diff --git a/templates/newAdminPanel.html b/templates/newAdminPanel.html index 822d04d..f0ad15e 100644 --- a/templates/newAdminPanel.html +++ b/templates/newAdminPanel.html @@ -230,8 +230,7 @@
+ value="1800000">00:30:00
@@ -298,7 +297,7 @@
- +
@@ -500,28 +499,24 @@ // Presets $(".pres").click(function (event) { - selectPresetTime = parseInt(event.currentTarget.value) + currentTime = parseInt(event.currentTarget.value) + const times = msToTime(currentTime) + $("#timerHoursV")[0].innerHTML = times[3]; + $("#timerMinuteV")[0].innerHTML = times[2]; + $("#timerSecondsV")[0].innerHTML = times[1]; }) - $("#GoPreset").click(function (event) { - $("#GoPreset")[0].innerHTML = '
' - - saveOption("/api/v1/set/addMillisToTimer?time=" + selectPresetTime, function (event) { - setTimeout(function () { - $("#GoPreset")[0].innerHTML = 'Go' - }, 200) - - }) - }) + - $("#goJogger").click(function (event) { - $("#goJogger")[0].innerHTML = '
' + $(".goTimer").click(function (event) { + event.currentTarget.innerHTML = '
' + setTimeout(function () { + event.currentTarget.innerHTML = 'Go' + }, 200); - saveOption("/api/v1/set/addMillisToTimer?time=" + currentTime, function (event) { - setTimeout(function () { - $("#goJogger")[0].innerHTML = 'Go' - }, 200) + saveOption("/api/v1/set/addMillisToTimer?time=" + currentTime, function (ev) { + }) }) @@ -537,13 +532,15 @@ const showMillisB = $("#showMillis")[0].checked const progBarShowB = $("#progBarShow")[0].checked const textColorsB = $("#textColors")[0].checked + allPathes.push("/api/v1/set/layout/showTime?show=" + showTimeB) allPathes.push("/api/v1/set/layout/showMillis?show=" + showMillisB) allPathes.push("/api/v1/set/progressbar/show?show=" + progBarShowB) - allPathes.push("/api/v1/set/text/enableColoring?show=" + textColorsB) + allPathes.push("/api/v1/set/text/enableColoring?enable=" + textColorsB) for (pI in allPathes) { const path = allPathes[pI]; + console.warn(path) saveOption(path, function (event) { console.debug(event) }) diff --git a/templates/timerPage.html b/templates/timerPage.html index a08a0a1..1a43e53 100644 --- a/templates/timerPage.html +++ b/templates/timerPage.html @@ -15,10 +15,16 @@ + +
Message here
+ +