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

Compare commits

base: Project-Name-Here:469fa5048c8901eaae4c405dce5320094aaac076
Branches Tags
Project-Name-Here:master
Project-Name-Here:v1.0.8b
Project-Name-Here:v1.0.8
Project-Name-Here:v1.0.7
Project-Name-Here:v1.0.6
Project-Name-Here:v1.0.1
Project-Name-Here:v1.0.0
..
compare: Project-Name-Here:df3f5fdb58ac69dac3e5af1575f665d44cb45777
Branches Tags
Project-Name-Here:master
Project-Name-Here:v1.0.8b
Project-Name-Here:v1.0.8
Project-Name-Here:v1.0.7
Project-Name-Here:v1.0.6
Project-Name-Here:v1.0.1
Project-Name-Here:v1.0.0

No commits in common. "469fa5048c8901eaae4c405dce5320094aaac076" and "df3f5fdb58ac69dac3e5af1575f665d44cb45777" have entirely different histories.
469fa5048c ... df3f5fdb58

4 changed files with 71 additions and 200 deletions
Show Stats Expand all files Collapse all files

3
helpers.js
View File

@ -22,11 +22,12 @@ 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 != undefined) { if (resy) {
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,7 +151,6 @@ 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()
}); });
@ -181,7 +180,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 != undefined) { if (resy) {
currentState.showTimeOnCountdown = resy; currentState.showTimeOnCountdown = resy;
if (req.query.persist === 'true') { if (req.query.persist === 'true') {
dataToBeWritten.showTimeOnCountdown = currentState.showTimeOnCountdown dataToBeWritten.showTimeOnCountdown = currentState.showTimeOnCountdown
@ -203,7 +202,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);
@ -220,19 +219,14 @@ 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 {
if (req.query.copy === "true") { let data = req.query.colors
currentState.textColors = currentState.colorSegments if(req.query.isBase64 === "true"){
res.json({ status: "ok" }); data = atob(data)
} else { }
let data = req.query.colors console.debug(data)
if (req.query.isBase64 === "true") { currentState.textColors = JSON.parse(data);
data = atob(data) if (req.query.persist === 'true') {
} 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) {

160
static/js/interface.js
View File

@ -6,24 +6,20 @@ function convertTimeOffset() {
function convertColorSegments(elementId) { function convertColorSegments(elementId) {
const raw = document.getElementById(elementId); const raw = document.getElementById(elementId);
console.log(raw)
const segmentData = {} const segmentData = {}
for (elm in raw.children) { for (elm in raw.children) {
if (raw.children[elm].nodeName == "TR") { if (raw.children[elm].nodeName == "TBODY") {
const child = raw.children[elm].children[1].children[0] const child = raw.children[elm].firstChild.childNodes
let timeVal = parseInt(raw.children[elm].children[0].children[0].value * 1000); segmentData[child[0].innerText] = child[2].firstChild.value
if(Number.isInteger(timeVal)){
segmentData[timeVal] = child.style.color
} else {
segmentData["START"] = child.style.color
}
} }
} }
console.info(segmentData) console.info(segmentData)
return (segmentData) return (segmentData)
} }
$(function () { $(document).ready(function () {
// $(".numVal").bind("DOMSubtreeModified", alert); $(".numVal").bind("DOMSubtreeModified", alert);
const modes = ["timer", "clock", "black", "test"] const modes = ["timer", "clock", "black", "test"]
let selectPresetTime = 0; let selectPresetTime = 0;
@ -47,58 +43,28 @@ $(function () {
const tree2 = jsonview.create(dataSystem); const tree2 = jsonview.create(dataSystem);
jsonview.render(tree2, document.getElementById("systemInfo")); jsonview.render(tree2, document.getElementById("systemInfo"));
jsonview.expand(tree2); jsonview.expand(tree2);
// console.log(dataSystem)
}) })
$("#addRow").on("click", function (event) { $("#addRow").click(function (event) {
const tableEntryDom = document.getElementById("tableCopySource").cloneNode(true) $("#colors1").append(
let temp = tableEntryDom.innerHTML '<tr>' +
temp = temp.replace("#COLOR#", "gray"); '<td contenteditable="true" class="time"></td>' +
temp = temp.replace("#bg-COLOR#", "gray"); '<td contenteditable="true" class="color full"><input id="demo-input1" "type="text" value="#COLOR#" data-coloris /></td></td>' +
temp = temp.replace("#VALUE#", 60); // BUG: Doesn't work but not too important '<td><button type="button" class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">Remove</button></td>' +
temp = temp.replace("timeValue-ID", Math.floor(Math.random() * 9999999)) '</tr>'
tableEntryDom.innerHTML = temp; );
tableEntryDom.firstChild.nextSibling.children[0].classList.add("timeDurPicker")
tableEntryDom.id = Math.floor(Math.random() * 9999999)
document.getElementById("colors1").appendChild(tableEntryDom)
$(".deleteRow1").on("click", function removeRowEntry(event) {
$(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").on("click", function (event) { $("#addRow2").click(function (event) {
const tableEntryDom = document.getElementById("tableCopySource").cloneNode(true) $("#colors2").append(
let temp = tableEntryDom.innerHTML '<tr>' +
temp = temp.replace("#COLOR#", "gray"); '<td contenteditable="true" class="time"></td>' +
temp = temp.replace("#bg-COLOR#", "gray"); '<td contenteditable="true" class="color full"><input id="demo-input2" type="text" value="#COLOR#" data-coloris /></td></td>' +
temp = temp.replace("#VALUE#", 60); // BUG: Doesn't work but not too important '<td><button type="button" class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">Remove</button></td>' +
temp = temp.replace("timeValue-ID", Math.floor(Math.random() * 9999999)) '</tr>'
tableEntryDom.innerHTML = temp; );
tableEntryDom.firstChild.nextSibling.children[0].classList.add("timeDurPicker")
tableEntryDom.id = Math.floor(Math.random() * 9999999)
document.getElementById("colors2").appendChild(tableEntryDom)
$(".deleteRow1").on("click", function removeRowEntry(event) {
$(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])
}
});
}); });
@ -127,98 +93,38 @@ $(function () {
// Restore mode radio // Restore mode radio
const currentModeInt = modes.indexOf(jsonResult.mode); const currentModeInt = modes.indexOf(jsonResult.mode);
$("#btnradio" + (currentModeInt + 1))[0].checked = true $("#btnradio" + (currentModeInt + 1))[0].checked = true
// Restore layout settings // Restore layout settings
$("#showTime")[0].checked = jsonResult.showTimeOnCountdown; $("#showTime")[0].checked = jsonResult.showTimeOnCountdown;
$("#showMillis")[0].checked = jsonResult.showMilliSeconds; $("#showMillis")[0].checked = jsonResult.showMilliSeconds;
$("#progBarShow")[0].checked = jsonResult.showProgressbar; $("#progBarShow")[0].checked = jsonResult.showProgressbar;
$("#textColors")[0].checked = jsonResult.enableColoredText; $("#textColors")[0].checked = jsonResult.enableColoredText;
console.log(document.getElementById("tableCopySource"))
let tableEntryDom = document.getElementById("tableCopySource").cloneNode(true)
let currIndex = 0
for (item in jsonResult.colorSegments) { for (item in jsonResult.colorSegments) {
tableEntryDom = document.getElementById("tableCopySource").cloneNode(true) let temp = tableEntry.replace("#VALUE#", item);
let temp = tableEntryDom.innerHTML
temp = temp.replace("#COLOR#", jsonResult.colorSegments[item]); temp = temp.replace("#COLOR#", jsonResult.colorSegments[item]);
temp = temp.replace("#bg-COLOR#", jsonResult.colorSegments[item]); temp = temp.replace("#bg-COLOR#", jsonResult.colorSegments[item]);
temp = temp.replace("timeValue-ID", "timeValue-1C" + currIndex) document.getElementById("colors1").innerHTML += temp
//console.log(jsonResult.colorSegments[item])
if(item != "START"){
temp = temp.replace("#VALUE#", item/1000);
tableEntryDom.innerHTML = temp;
tableEntryDom.firstChild.nextSibling.children[0].classList.add("timeDurPicker")
} else {
tableEntryDom.innerHTML = temp;
tableEntryDom.children[2].children[0].children[0].disabled = true;
tableEntryDom.children[2].children[0].setAttribute("data-toggle", "tooltip")
tableEntryDom.children[2].children[0].setAttribute("data-placement", "right")// 'data-placement="right" title="Tooltip on right"'
tableEntryDom.children[2].children[0].setAttribute("title", "You cannot delete the start time")
tableEntryDom.children[0].innerHTML = '<i class="bi bi-flag-fill"></i> Start'
}
tableEntryDom.id = "1C" + currIndex
tableEntryDom.style.display = "table-row"
document.getElementById("colors1").appendChild(tableEntryDom)
currIndex++;
} }
// Text colors // Text colors
currIndex = 0
for (item in jsonResult.textColors) { for (item in jsonResult.textColors) {
tableEntryDom = document.getElementById("tableCopySource").cloneNode(true) let temp = tableEntry.replace("#VALUE#", item);
let temp = tableEntryDom.innerHTML
temp = temp.replace("#COLOR#", jsonResult.textColors[item]); temp = temp.replace("#COLOR#", jsonResult.textColors[item]);
temp = temp.replace("#bg-COLOR#", jsonResult.textColors[item]); temp = temp.replace("#bg-COLOR#", jsonResult.textColors[item]);
temp = temp.replace("timeValue-ID", "timeValue-1C" + currIndex) document.getElementById("colors2").innerHTML += temp
//console.log(jsonResult.textColors[item])
if(item != "START"){
temp = temp.replace("#VALUE#", item/1000);
tableEntryDom.innerHTML = temp;
tableEntryDom.firstChild.nextSibling.children[0].classList.add("timeDurPicker")
} else {
tableEntryDom.innerHTML = temp;
tableEntryDom.children[2].children[0].children[0].disabled = true;
tableEntryDom.children[2].children[0].setAttribute("data-toggle", "tooltip")
tableEntryDom.children[2].children[0].setAttribute("data-placement", "right")// 'data-placement="right" title="Tooltip on right"'
tableEntryDom.children[2].children[0].setAttribute("title", "You cannot delete the start time")
tableEntryDom.children[0].innerHTML = '<i class="bi bi-flag-fill"></i> Start'
}
// timeDurPicker
tableEntryDom.id = "1C" + currIndex
tableEntryDom.style.display = "table-row"
document.getElementById("colors2").appendChild(tableEntryDom)
currIndex++;
} }
$('.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])
}
});
//console.debug(jsonResult, currentModeInt) //console.debug(jsonResult, currentModeInt)
$('.colorPicky').on('colorpickerChange', function (event) { $('.colorPicky').on('colorpickerChange', function (event) {
event.target.parentElement.style.backgroundColor = event.target.value event.target.parentElement.style.backgroundColor = event.target.value
}); });
$(".deleteRow1").on("click", function removeRowEntry(event) { $(".deleteRow1").on("click", function removeRowEntry(event) {
$(event.target).closest("tr").remove(); //console.warn(event.target.parentElement)
$(event.target).closest("tbody").remove();
}); });
$('[data-toggle="tooltip"]').tooltip({container: "body"})
}) })
$("#copyColors").click(function CopyTextColors(event) { $("#copyColors").click(function CopyTextColors(event) {
@ -268,7 +174,7 @@ $(function () {
$("#applyLayout").click(function (event) { $("#applyLayout").click(function (event) {
$("#applyLayout")[0].innerHTML = '<div class="spinner-border-sm spinner-border"></div>' $("#applyLayout")[0].innerHTML = '<div class="spinner-border-sm spinner-border"></div>'
// Collect all data, build all paths // Collect all data, build all paths3
const allPathes = []; const allPathes = [];
const showTimeB = $("#showTime")[0].checked const showTimeB = $("#showTime")[0].checked

72
templates/newAdminPanel.html
View File

@ -261,7 +261,7 @@
<summary>Text Colors</summary> <summary>Text Colors</summary>
<p> <p>
<div id="table2" class="table-editable"> <div id="table" class="table-editable">
<table class="table table-bordered table-responsive-md table-striped text-center" id="colors2"> <table class="table table-bordered table-responsive-md table-striped text-center" id="colors2">
<thead> <thead>
<tr> <tr>
@ -314,53 +314,26 @@
</div> </div>
<br><br> <br><br>
<i class="bi-alarm"></i> <i class="bi-alarm"></i>
<templateObj> <templateObj id="tableCopySource">
<table class="table table-bordered table-responsive-md table-striped text-center" id="colors1"> <tr>
<thead> <td contenteditable="true" class="time">
<tr> <form>
<th class="text-center">Time</th> <div class="form-group">
<th class="text-center">Color</th> <label>Duration with seconds</label>
<th class="text-center">Remove</th> <input type="text" class="form-control" id="duration2">
</tr> </div>
</thead> <value></value>
<tr id="tableCopySource"> </form>
<td contenteditable="false" class="time">
<input type="text" class="form-control " id="timeValue-ID" value="#VALUE#">
<value></value>
</td>
<td class="pt-3-half full" contenteditable="false">
<div class="clr-field" style="color: #bg-COLOR#;">
<button aria-labelledby="clr-open-label"></button>
<input type="text" class="coloris" value="#COLOR#"></div>
</div>
</td>
<td>
<span class="table-remove"><button type="button"
class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">
Remove
</button></span>
</td>
</tr>
</tbody>
</table>
</td>
<td contenteditable="true" class="color full"><input id="demo-input2" type="text"
value="#COLOR#" data-coloris /></td>
<tr><td class="pt-3-half numVal" contenteditable="true">#VALUE#</td> </td>
<td class="pt-3-half full" contenteditable="false"> <td>
<div class="clr-field" style="color: #bg-COLOR#;"> <button type="button"
<button aria-labelledby="clr-open-label"></button> class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">Remove</button>
<input id="demo-input1" type="text" class="coloris" value="#COLOR#"></div> </td>
</div> </tr>
</td>
<td>
<span class="table-remove"><button type="button"
class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">
Remove
</button></span>
</td>
</tr>
</templateObj> </templateObj>
<script> <script>
$('#duration2').durationPicker({ $('#duration2').durationPicker({
@ -403,10 +376,7 @@
Coloris({ Coloris({
el: '.coloris', el: '.coloris',
alpha: false, alpha: false,
}); });
$(function () {
$('[data-toggle="tooltip"]').tooltip({container: "body"})
})
</script> </script>
</body> </body>