From 2619771e18d821021553899d7b80e98d9162953c Mon Sep 17 00:00:00 2001 From: grey Date: Thu, 24 Feb 2022 21:08:31 +0100 Subject: [PATCH] Added messaging --- README.MD | 4 +-- index.js | 25 ++++++++++++++++-- static/css/styles.css | 54 ++++++++++++++++++++++++++++++++++++++- static/js/interface.js | 4 --- static/js/script.js | 39 +++++++++++++++++++++++++--- templates/adminPanel.html | 20 ++++++++++++++- templates/timerPage.html | 19 ++++++++++---- 7 files changed, 147 insertions(+), 18 deletions(-) diff --git a/README.MD b/README.MD index 064bc2d..f502efc 100644 --- a/README.MD +++ b/README.MD @@ -4,5 +4,5 @@ - [X] Pausing functions - [X] Presets - [ ] Progress bar -- [ ] time on countdown page -- [ ] one-way messaging \ No newline at end of file +- [X] time on countdown page +- [X] one-way messaging \ No newline at end of file diff --git a/index.js b/index.js index 9c009ec..995cd51 100644 --- a/index.js +++ b/index.js @@ -22,7 +22,11 @@ currentState = { defaultFullScreen: true, timeAmountInital: 0, timerRunState: true, - pauseMoment: 0 + pauseMoment: 0, + showTimeOnCountdown: true, + message: "", + showMessage: false, + messageAppearTime: 0 }; app.get("/", function (req, res) { @@ -58,7 +62,7 @@ app.get("/api/v1/set/addMillisToTimer", function (req, res) { currentState.timeAmountInital = req.query.time; currentState.countdownGoal = new Date().getTime() + parseInt(req.query.time) res.json({ status: "ok" }); -}); +}); app.get("/api/v1/ctrl/timer/pause", function (req, res) { currentState.timerRunState = false; @@ -77,4 +81,21 @@ app.get("/api/v1/ctrl/timer/restart", function (req, res) { res.json({ status: "ok" }); }); +app.get("/api/v1/set/showTime", function (req, res) { + currentState.showTimeOnCountdown = (req.query.show === 'true'); + res.json({ status: "ok" }); +}); + +app.get("/api/v1/ctrl/message/show", function (req, res) { + currentState.message = req.query.msg + currentState.showMessage = true + currentState.messageAppearTime = new Date().getTime() + res.json({ status: "ok" }); +}); + +app.get("/api/v1/ctrl/message/hide", function (req, res) { + currentState.showMessage = false + res.json({ status: "ok" }); +}); + app.listen(3005); diff --git a/static/css/styles.css b/static/css/styles.css index ed5f7e8..63f68fc 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -19,7 +19,7 @@ html, body { position: relative; justify-content: center; align-items: center; - + flex-direction: column; } .timer { @@ -27,6 +27,17 @@ html, body { text-align: center; font-variant-numeric: tabular-nums; font-family: sans-serif; + order: 1; +} + +.clockSec { + padding: 5%; + font-size: 10em; + color: grey; + text-align: center; + font-variant-numeric: tabular-nums; + font-family: sans-serif; + order: 1; } .testImg{ @@ -34,3 +45,44 @@ html, body { width: 100%; } + + +#overlay { + position: fixed; + font-family: sans-serif; + display: none; + width: 100%; + height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 2; +} + +#text{ + position: absolute; + top: 70%; + left: 50%; + font-size: 50px; + color: white; + transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); +} + +@keyframes fade { + from { opacity: 1.0; } + 50% { opacity: 0.5; } + to { opacity: 1.0; } +} + +@-webkit-keyframes fade { + from { opacity: 1.0; } + 50% { opacity: 0.5; } + to { opacity: 1.0; } +} + +.blink { +animation:fade 1000ms infinite; +-webkit-animation:fade 1000ms infinite; +} \ No newline at end of file diff --git a/static/js/interface.js b/static/js/interface.js index 5b0a466..827a688 100644 --- a/static/js/interface.js +++ b/static/js/interface.js @@ -2,7 +2,3 @@ function convertTimeOffset(){ selTime = new Date().getTime() + document.getElementById('time2').valueAsNumber document.getElementById("time").value = selTime } - -function updateHiddenForm2(){ - document.getElementById("time4").value = document.getElementById('time3').value -} \ No newline at end of file diff --git a/static/js/script.js b/static/js/script.js index f865928..52dee23 100644 --- a/static/js/script.js +++ b/static/js/script.js @@ -1,6 +1,8 @@ var newDateObj = new Date(); newDateObj = new Date(newDateObj.getTime() + 1000*20) +allowFullscreen = true + function enterFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); @@ -12,7 +14,7 @@ function enterFullscreen(element) { } function updateFullscreen(){ - if(JSON.parse(document.getElementById("incomeData").innerHTML).defaultFullScreen){ + if(JSON.parse(document.getElementById("incomeData").innerHTML).defaultFullScreen && allowFullscreen){ enterFullscreen(document.documentElement) } } @@ -44,16 +46,33 @@ function msToTime(s, data) { } function handleUpdate() { - resp = httpGet("/api/v1/data?markRead=mark"); + resp = httpGet("/api/v1/data"); var data = JSON.parse(resp); document.getElementById("incomeData").innerHTML = JSON.stringify(data) - if(data.defaultFullScreen && document.getElementById("initalDate").innerHTML.includes("true")){ + if(data.defaultFullScreen && document.getElementById("initalDate").innerHTML.includes("true") && allowFullscreen){ enterFullscreen(document.documentElement); document.getElementById("initalDate").innerHTML = "false" } + if(data.showMessage) { + document.getElementById("overlay").style.display = "block"; + document.getElementById("text").innerHTML = data.message + }else{ + off() + } + + if(new Date().getTime() - data.messageAppearTime < 5000) { + if (! document.getElementById("text").classList.contains('blink') ){ + document.getElementById("text").classList.add("blink") + } + }else{ + if ( document.getElementById("text").classList.contains('blink') ){ + document.getElementById("text").classList.remove("blink") + } + } + if (data.mode == "clock") { document.getElementById("timer").innerHTML = getTime(); @@ -66,6 +85,11 @@ function handleUpdate() { document.getElementById("timer").innerHTML = msToTime(diff, data); document.getElementById("testImg").style.display = "none"; } + if(data.showTimeOnCountdown){ + document.getElementById("clockSec").innerHTML = getTime(); + } else { + document.getElementById("clockSec").innerHTML = ""; + } } else if (data.mode == "black") { document.getElementById("timer").innerHTML = ""; @@ -98,6 +122,14 @@ function getTime() { return time; } +function on() { + document.getElementById("overlay").style.display = "block"; +} + +function off() { + document.getElementById("overlay").style.display = "none"; +} + setInterval(handleUpdate, 200); let temp = new URLSearchParams(window.location.search).get("smaller"); @@ -106,4 +138,5 @@ let temp = new URLSearchParams(window.location.search).get("smaller"); if (temp == "true") { var cssURL = '/css/smallerTextMod.css'; document.head.innerHTML +='' + allowFullscreen = false } diff --git a/templates/adminPanel.html b/templates/adminPanel.html index 51e6927..f2f7f15 100644 --- a/templates/adminPanel.html +++ b/templates/adminPanel.html @@ -25,6 +25,7 @@ +
+ + + + +
+
@@ -55,6 +64,7 @@
+ Play controls:
@@ -64,7 +74,15 @@
- + + Message: +
+ + +
+
+ +
diff --git a/templates/timerPage.html b/templates/timerPage.html index 125a9c8..2c32f4b 100644 --- a/templates/timerPage.html +++ b/templates/timerPage.html @@ -14,17 +14,26 @@ + +
+
Message here
+
+ - - - true - - + + + true + +
00:00:00
+
+ +
+