Project-Name-Here/openCountdown
3
0
Fork 0
Code Issues Pull Requests Releases 6 Wiki Activity

Fix countdown inital value, fix colortable time pickers

Browse Source
This commit is contained in:
Sören Oesterwind 2022-03-27 12:41:41 +02:00
parent 1aea4d54df
commit 469fa5048c
4 changed files with 60 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
helpers.js
View File

@ -22,12 +22,11 @@ function convertStringBooleanToBoolean(stringBoolean) {
function wrapBooleanConverter(stringBoolean, res) { function wrapBooleanConverter(stringBoolean, res) {
const temp = convertStringBooleanToBoolean(stringBoolean); const temp = convertStringBooleanToBoolean(stringBoolean);
if(temp === -1) { if(temp == -1) {
res.json({ status: "error", message: "Invalid boolean value" }); res.json({ status: "error", message: "Invalid boolean value" });
} else { } else {
return(temp); return(temp);
} }
} }
// export { convertStringBooleanToBoolean, wrapBooleanConverter };
module.exports = { convertStringBooleanToBoolean, wrapBooleanConverter }; module.exports = { convertStringBooleanToBoolean, wrapBooleanConverter };

36
index.js
View File

@ -40,12 +40,12 @@ currentState = {
showMessage: false, showMessage: false,
messageAppearTime: 0, messageAppearTime: 0,
showProgressbar: true, showProgressbar: true,
colorSegments: { 40000: "yellow", 20000: "#FFAE00", 5000: "#ff0000", "START": "green" }, colorSegments: { 40000: "yellow", 20000: "#FFAE00", 5000: "#ff0000", "START": "green" },
textColors: {}, textColors: {},
srvTime: 0, srvTime: 0,
enableColoredText: true, enableColoredText: true,
debug: false, debug: false,
sessionToken: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15), sessionToken: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),
}; };
const dataToBeWritten = {}; const dataToBeWritten = {};
@ -58,7 +58,7 @@ currentState.textColors = currentState.colorSegments
const wsServer = new ws.Server({ noServer: true }); const wsServer = new ws.Server({ noServer: true });
wsServer.on('connection', socket => { wsServer.on('connection', socket => {
socket.on('message', function incoming(data) { socket.on('message', function incoming(data) {
if(data.toString() == "new client"){ if (data.toString() == "new client") {
updatedData() updatedData()
} }
}); });
@ -78,7 +78,7 @@ function updatedData() {
currentState.srvTime = new Date().getTime() currentState.srvTime = new Date().getTime()
wsServer.broadcast(JSON.stringify(currentState)); wsServer.broadcast(JSON.stringify(currentState));
clearTimeout(updatey); clearTimeout(updatey);
setTimeout(updatedData, 5000 ); setTimeout(updatedData, 5000);
} }
console.log("Preparing routes..."); console.log("Preparing routes...");
@ -131,7 +131,7 @@ app.get("/api/v1/set/mode", function (req, res) {
app.get("/api/v1/set/layout/showMillis", function (req, res) { app.get("/api/v1/set/layout/showMillis", function (req, res) {
const resy = helper.wrapBooleanConverter(req.query.show, res) const resy = helper.wrapBooleanConverter(req.query.show, res)
if (resy) { if (resy != undefined) {
currentState.showMilliSeconds = resy; currentState.showMilliSeconds = resy;
if (req.query.persist === 'true') { if (req.query.persist === 'true') {
dataToBeWritten.showMilliSeconds = currentState.showMilliSeconds dataToBeWritten.showMilliSeconds = currentState.showMilliSeconds
@ -151,6 +151,7 @@ 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) {
currentState.timeAmountInital = 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)
currentState.pauseMoment = new Date().getTime();
res.json({ status: "ok" }); res.json({ status: "ok" });
updatedData() updatedData()
}); });
@ -180,7 +181,7 @@ app.get("/api/v1/ctrl/timer/restart", function (req, res) {
app.get("/api/v1/set/layout/showTime", function (req, res) { app.get("/api/v1/set/layout/showTime", function (req, res) {
const resy = helper.wrapBooleanConverter(req.query.show, res) const resy = helper.wrapBooleanConverter(req.query.show, res)
if (resy) { if (resy != undefined) {
currentState.showTimeOnCountdown = resy; currentState.showTimeOnCountdown = resy;
if (req.query.persist === 'true') { if (req.query.persist === 'true') {
dataToBeWritten.showTimeOnCountdown = currentState.showTimeOnCountdown dataToBeWritten.showTimeOnCountdown = currentState.showTimeOnCountdown
@ -202,7 +203,7 @@ app.get("/api/v1/set/progressbar/show", function (req, res) {
app.get("/api/v1/set/progressbar/colors", function (req, res) { app.get("/api/v1/set/progressbar/colors", function (req, res) {
try { try {
let data = req.query.colors let data = req.query.colors
if(req.query.isBase64 === "true"){ if (req.query.isBase64 === "true") {
data = atob(data) data = atob(data)
} }
currentState.colorSegments = JSON.parse(data); currentState.colorSegments = JSON.parse(data);
@ -219,14 +220,19 @@ app.get("/api/v1/set/progressbar/colors", function (req, res) {
app.get("/api/v1/set/text/colors", function (req, res) { app.get("/api/v1/set/text/colors", function (req, res) {
try { try {
let data = req.query.colors if (req.query.copy === "true") {
if(req.query.isBase64 === "true"){ currentState.textColors = currentState.colorSegments
data = atob(data) res.json({ status: "ok" });
} } else {
console.debug(data) let data = req.query.colors
currentState.textColors = JSON.parse(data); if (req.query.isBase64 === "true") {
if (req.query.persist === 'true') { data = atob(data)
dataToBeWritten.textColors = currentState.textColors }
console.debug(data)
currentState.textColors = JSON.parse(data);
if (req.query.persist === 'true') {
dataToBeWritten.textColors = currentState.textColors
}
} }
res.json({ status: "ok" }); res.json({ status: "ok" });
} catch (error) { } catch (error) {

44
static/js/interface.js
View File

@ -49,31 +49,56 @@ $(function () {
jsonview.expand(tree2); jsonview.expand(tree2);
}) })
$("#addRow").click(function (event) { $("#addRow").on("click", function (event) {
tableEntryDom = document.getElementById("tableCopySource").cloneNode(true) const tableEntryDom = document.getElementById("tableCopySource").cloneNode(true)
let temp = tableEntryDom.innerHTML let temp = tableEntryDom.innerHTML
temp = temp.replace("#COLOR#", "gray"); temp = temp.replace("#COLOR#", "gray");
temp = temp.replace("#bg-COLOR#", "gray"); temp = temp.replace("#bg-COLOR#", "gray");
temp = temp.replace("#VALUE#", 60); // BUG: Doesn't work but not too important temp = temp.replace("#VALUE#", 60); // BUG: Doesn't work but not too important
temp = temp.replace("timeValue-ID", Math.floor(Math.random() * 9999999))
tableEntryDom.innerHTML = temp; tableEntryDom.innerHTML = temp;
tableEntryDom.firstChild.nextSibling.children[0].classList.add("timeDurPicker")
tableEntryDom.id = Math.floor(Math.random() * 9999999)
document.getElementById("colors1").appendChild(tableEntryDom) document.getElementById("colors1").appendChild(tableEntryDom)
$(".deleteRow1").on("click", function removeRowEntry(event) { $(".deleteRow1").on("click", function removeRowEntry(event) {
$(event.target).closest("tr").remove(); $(event.target).closest("tr").remove();
}); });
$('.timeDurPicker').durationPicker({
showSeconds: true,
showDays: false,
onChanged: function (newVal, test, val2) {
// $('#duration-label2').text(newVal);
val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1].value = newVal
//console.log(val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1].value)
//console.log(val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1])
}
});
}); });
$("#addRow2").click(function (event) { $("#addRow2").on("click", function (event) {
tableEntryDom = document.getElementById("tableCopySource").cloneNode(true) const tableEntryDom = document.getElementById("tableCopySource").cloneNode(true)
let temp = tableEntryDom.innerHTML let temp = tableEntryDom.innerHTML
temp = temp.replace("#COLOR#", "gray"); temp = temp.replace("#COLOR#", "gray");
temp = temp.replace("#bg-COLOR#", "gray"); temp = temp.replace("#bg-COLOR#", "gray");
temp = temp.replace("#VALUE#", 60); temp = temp.replace("#VALUE#", 60); // BUG: Doesn't work but not too important
temp = temp.replace("timeValue-ID", Math.floor(Math.random() * 9999999))
tableEntryDom.innerHTML = temp; tableEntryDom.innerHTML = temp;
tableEntryDom.firstChild.nextSibling.children[0].classList.add("timeDurPicker")
tableEntryDom.id = Math.floor(Math.random() * 9999999)
document.getElementById("colors2").appendChild(tableEntryDom) document.getElementById("colors2").appendChild(tableEntryDom)
$(".deleteRow1").on("click", function removeRowEntry(event) { $(".deleteRow1").on("click", function removeRowEntry(event) {
$(event.target).closest("tr").remove(); $(event.target).closest("tr").remove();
}); });
$('.timeDurPicker').durationPicker({
showSeconds: true,
showDays: false,
onChanged: function (newVal, test, val2) {
// $('#duration-label2').text(newVal);
val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1].value = newVal
//console.log(val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1].value)
//console.log(val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1])
}
});
}); });
@ -122,6 +147,7 @@ $(function () {
if(item != "START"){ if(item != "START"){
temp = temp.replace("#VALUE#", item/1000); temp = temp.replace("#VALUE#", item/1000);
tableEntryDom.innerHTML = temp; tableEntryDom.innerHTML = temp;
tableEntryDom.firstChild.nextSibling.children[0].classList.add("timeDurPicker")
} else { } else {
tableEntryDom.innerHTML = temp; tableEntryDom.innerHTML = temp;
tableEntryDom.children[2].children[0].children[0].disabled = true; tableEntryDom.children[2].children[0].children[0].disabled = true;
@ -151,6 +177,7 @@ $(function () {
if(item != "START"){ if(item != "START"){
temp = temp.replace("#VALUE#", item/1000); temp = temp.replace("#VALUE#", item/1000);
tableEntryDom.innerHTML = temp; tableEntryDom.innerHTML = temp;
tableEntryDom.firstChild.nextSibling.children[0].classList.add("timeDurPicker")
} else { } else {
tableEntryDom.innerHTML = temp; tableEntryDom.innerHTML = temp;
tableEntryDom.children[2].children[0].children[0].disabled = true; tableEntryDom.children[2].children[0].children[0].disabled = true;
@ -160,6 +187,9 @@ $(function () {
tableEntryDom.children[0].innerHTML = '<i class="bi bi-flag-fill"></i> Start' tableEntryDom.children[0].innerHTML = '<i class="bi bi-flag-fill"></i> Start'
} }
// timeDurPicker
tableEntryDom.id = "1C" + currIndex tableEntryDom.id = "1C" + currIndex
tableEntryDom.style.display = "table-row" tableEntryDom.style.display = "table-row"
document.getElementById("colors2").appendChild(tableEntryDom) document.getElementById("colors2").appendChild(tableEntryDom)
@ -254,7 +284,7 @@ $(function () {
allPathes.push("/api/v1/set/progressbar/show?show=" + progBarShowB) allPathes.push("/api/v1/set/progressbar/show?show=" + progBarShowB)
allPathes.push("/api/v1/set/text/enableColoring?enable=" + textColorsB) allPathes.push("/api/v1/set/text/enableColoring?enable=" + textColorsB)
allPathes.push("/api/v1/set/progressbar/colors?isBase64=true&colors=" + btoa(JSON.stringify(colors))) allPathes.push("/api/v1/set/progressbar/colors?isBase64=true&colors=" + btoa(JSON.stringify(colors)))
///allPathes.push("/api/v1/set/text/colors?isBase64=true&colors=" + btoa(JSON.stringify(colors2))) allPathes.push("/api/v1/set/text/colors?isBase64=true&colors=" + btoa(JSON.stringify(colors2)))
for (pI in allPathes) { for (pI in allPathes) {

2
templates/newAdminPanel.html
View File

@ -325,7 +325,7 @@
</thead> </thead>
<tr id="tableCopySource"> <tr id="tableCopySource">
<td contenteditable="false" class="time"> <td contenteditable="false" class="time">
<input type="text" class="form-control timeDurPicker" id="timeValue-ID" value="#VALUE#"> <input type="text" class="form-control " id="timeValue-ID" value="#VALUE#">
<value></value> <value></value>
</td> </td>
<td class="pt-3-half full" contenteditable="false"> <td class="pt-3-half full" contenteditable="false">