added presets the the crude interface

This commit is contained in:
Sören Oesterwind 2022-02-24 20:17:24 +01:00
parent 704d3d0d98
commit c1c2a0cb47
5 changed files with 92 additions and 47 deletions

8
README.MD Normal file
View File

@ -0,0 +1,8 @@
# openCountdown
# ToDo
- [X] Pausing functions
- [X] Presets
- [ ] Progress bar
- [ ] time on countdown page
- [ ] one-way messaging

View File

@ -18,9 +18,11 @@ app.use(
currentState = { currentState = {
mode: "clock", mode: "clock",
countdownGoal: new Date().getTime(), countdownGoal: new Date().getTime(),
changed: true,
showMilliSeconds: true, showMilliSeconds: true,
defaultFullScreen: true defaultFullScreen: true,
timeAmountInital: 0,
timerRunState: true,
pauseMoment: 0
}; };
app.get("/", function (req, res) { app.get("/", function (req, res) {
@ -28,13 +30,6 @@ app.get("/", function (req, res) {
res.send(data); res.send(data);
}); });
app.post("/", function (req, res) {
console.log(req.body);
currentState.mode = req.body.mode;
currentState.countdownGoal = req.body.countdownGoal;
res.send("OK");
});
app.get("/timer", function (req, res) { app.get("/timer", function (req, res) {
const data = fs.readFileSync("templates/timerPage.html", "utf8"); const data = fs.readFileSync("templates/timerPage.html", "utf8");
res.send(data); res.send(data);
@ -60,9 +55,26 @@ app.get("/api/v1/set/timerGoal", function (req, res) {
}); });
app.get("/api/v1/set/addMillisToTimer", function (req, res) { app.get("/api/v1/set/addMillisToTimer", function (req, res) {
console.log(req.query.time) currentState.timeAmountInital = req.query.time;
currentState.countdownGoal = new Date().getTime() + parseInt(req.query.time) currentState.countdownGoal = new Date().getTime() + parseInt(req.query.time)
res.json({ status: "ok" }); res.json({ status: "ok" });
}); });
app.get("/api/v1/ctrl/timer/pause", function (req, res) {
currentState.timerRunState = false;
currentState.pauseMoment = new Date().getTime();
res.json({ status: "ok" });
});
app.get("/api/v1/ctrl/timer/play", function (req, res) {
currentState.timerRunState = true
currentState.countdownGoal += new Date().getTime() - currentState.pauseMoment;
res.json({ status: "ok" });
});
app.get("/api/v1/ctrl/timer/restart", function (req, res) {
currentState.countdownGoal = new Date().getTime() + parseInt(currentState.timeAmountInital)
res.json({ status: "ok" });
});
app.listen(3005); app.listen(3005);

View File

@ -3,6 +3,6 @@ function convertTimeOffset(){
document.getElementById("time").value = selTime document.getElementById("time").value = selTime
} }
function updateHiddenForm(){ function updateHiddenForm2(){
document.getElementById("time").value = document.getElementById('time2').valueAsNumber document.getElementById("time4").value = document.getElementById('time3').value
} }

View File

@ -60,13 +60,12 @@ function handleUpdate() {
document.getElementById("testImg").style.display = "none"; document.getElementById("testImg").style.display = "none";
} else if (data.mode == "timer") { } else if (data.mode == "timer") {
if(data.timerRunState){
const now = new Date() const now = new Date()
const diff = data.countdownGoal - now.getTime() const diff = data.countdownGoal - now.getTime()
document.getElementById("timer").innerHTML = msToTime(diff, data); document.getElementById("timer").innerHTML = msToTime(diff, data);
document.getElementById("testImg").style.display = "none"; document.getElementById("testImg").style.display = "none";
}
} else if (data.mode == "black") { } else if (data.mode == "black") {
document.getElementById("timer").innerHTML = ""; document.getElementById("timer").innerHTML = "";

View File

@ -16,7 +16,7 @@
<body> <body>
<form action="/api/v1/set/mode" target="hiddenFrame"> <form action="/api/v1/set/mode" target="hiddenFrame">
<select id="mode" name="mode"> <select id="mode" name="mode">
<option value="timer">Timer</option> <option value="timer">Timer</option>
<option value="clock">Clock</option> <option value="clock">Clock</option>
@ -24,26 +24,52 @@
<option value="test">Test</option> <option value="test">Test</option>
</select> </select>
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form> </form>
<br> <br>
<form action="/api/v1/set/showMillis" target="hiddenFrame"> <form action="/api/v1/set/showMillis" target="hiddenFrame">
<select id="show" name="show"> <select id="show" name="show">
<option value="true">Enable Milliseconds</option> <option value="true">Enable Milliseconds</option>
<option value="false">Disable Milliseconds</option> <option value="false">Disable Milliseconds</option>
</select> </select>
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form> </form>
<form action="/api/v1/set/addMillisToTimer" target="hiddenFrame"> <form action="/api/v1/set/addMillisToTimer" target="hiddenFrame">
<input type="time" step="0.001" name="time2" id="time2" onchange="updateHiddenForm()"></input> <input type="time" step="0.001" name="time2" id="time2" onchange="updateHiddenForm()"></input>
<input type="hidden" step="0.001" name="time" id="time"></input> <input type="hidden" step="0.001" name="time" id="time"></input>
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form> </form>
<iframe name="hiddenFrame" style="display: none"></iframe> <form action="/api/v1/set/addMillisToTimer" target="hiddenFrame">
<select id="time" name="time" onchange="">
<option value="300000">00:05:00</option>
<option value="600000">00:10:00</option>
<option value="900000">00:15:00</option>
<option value="1200000">00:20:00</option>
<option value="1500000">00:25:00</option>
<option value="1800000">00:30:00</option>
<option value="2100000">00:35:00</option>
<option value="2400000">00:40:00</option>
<option value="2700000">00:45:00</option>
</select>
<button type="submit">Submit</button>
</form>
<form action="/api/v1/ctrl/timer/play" target="hiddenFrame">
<button type="submit">Play</button>
</form>
<form action="/api/v1/ctrl/timer/pause" target="hiddenFrame">
<button type="submit">Pause</button>
</form>
<form action="/api/v1/ctrl/timer/restart" target="hiddenFrame">
<button type="submit">Restart</button>
</form>
<iframe name="hiddenFrame" style="display: none"></iframe>
<iframe src="/timer?smaller=true" height="80%" width="80%"> </iframe> <iframe src="/timer?smaller=true" height="80%" width="80%"> </iframe>
</body> </body>
<script src="js/interface.js"></script> <script src="js/interface.js"></script>
</html> </html>