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 = {
mode: "clock",
countdownGoal: new Date().getTime(),
changed: true,
showMilliSeconds: true,
defaultFullScreen: true
defaultFullScreen: true,
timeAmountInital: 0,
timerRunState: true,
pauseMoment: 0
};
app.get("/", function (req, res) {
@ -28,13 +30,6 @@ app.get("/", function (req, res) {
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) {
const data = fs.readFileSync("templates/timerPage.html", "utf8");
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) {
console.log(req.query.time)
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;
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);

View File

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

View File

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

View File

@ -3,47 +3,73 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>openCountdown - Admin</title>
<meta name="description" content="openCountdown">
<meta name="author" content="TheGreydiamond">
<title>openCountdown - Admin</title>
<meta name="description" content="openCountdown">
<meta name="author" content="TheGreydiamond">
<link rel="stylesheet" href="css/styles.css?v=1.1">
<link rel="stylesheet" href="css/styles.css?v=1.1">
</head>
<body>
<form action="/api/v1/set/mode" target="hiddenFrame">
<form action="/api/v1/set/mode" target="hiddenFrame">
<select id="mode" name="mode">
<option value="timer">Timer</option>
<option value="clock">Clock</option>
<option value="black">Black</option>
<option value="test">Test</option>
</select>
<option value="timer">Timer</option>
<option value="clock">Clock</option>
<option value="black">Black</option>
<option value="test">Test</option>
</select>
<button type="submit">Submit</button>
</form>
<br>
<form action="/api/v1/set/showMillis" target="hiddenFrame">
<select id="show" name="show">
<option value="true">Enable Milliseconds</option>
<option value="false">Disable Milliseconds</option>
</select>
<button type="submit">Submit</button>
</form>
</form>
<br>
<form action="/api/v1/set/showMillis" target="hiddenFrame">
<select id="show" name="show">
<option value="true">Enable Milliseconds</option>
<option value="false">Disable Milliseconds</option>
</select>
<button type="submit">Submit</button>
</form>
<form action="/api/v1/set/addMillisToTimer" target="hiddenFrame">
<input type="time" step="0.001" name="time2" id="time2" onchange="updateHiddenForm()"></input>
<input type="hidden" step="0.001" name="time" id="time"></input>
<button type="submit">Submit</button>
</form>
<form action="/api/v1/set/addMillisToTimer" target="hiddenFrame">
<input type="time" step="0.001" name="time2" id="time2" onchange="updateHiddenForm()"></input>
<input type="hidden" step="0.001" name="time" id="time"></input>
<button type="submit">Submit</button>
</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>
<script src="js/interface.js"></script>
</html>