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

Compare commits

base: Project-Name-Here:35df7485d2ffd4bc49f6e12bfbf2e4c4184f1036
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:08c946a80fe5daeef75684d34e64c62e0e2e0df3
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. "35df7485d2ffd4bc49f6e12bfbf2e4c4184f1036" and "08c946a80fe5daeef75684d34e64c62e0e2e0df3" have entirely different histories.
35df7485d2 ... 08c946a80f

4 changed files with 86 additions and 90 deletions
Show Stats Expand all files Collapse all files

6
static/css/mainStyle.css
View File

@ -16,12 +16,6 @@ body {
overflow-x: auto;
overflow-y: hidden;
}
.full .clr-field button {
width: 100%;
height: 100%;
border-radius: 5px;
}
.b-example-divider {
flex-shrink: 0;

74
static/js/interface.js
View File

@ -51,10 +51,11 @@ $(document).ready(function () {
$("#colors1").append(
'<tr>' +
'<td contenteditable="true" class="time"></td>' +
'<td contenteditable="true" class="color full"><input id="demo-input1" "type="text" value="#COLOR#" data-coloris /></td></td>' +
'<td contenteditable="true" class="color"><input id="demo-input1" class="colorPicky" type="button" value="#COLOR#" /></td></td>' +
'<td><button type="button" class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">Remove</button></td>' +
'</tr>'
);
$('.colorPicky').colorpicker();
});
@ -62,23 +63,42 @@ $(document).ready(function () {
$("#colors2").append(
'<tr>' +
'<td contenteditable="true" class="time"></td>' +
'<td contenteditable="true" class="color full"><input id="demo-input2" type="text" value="#COLOR#" data-coloris /></td></td>' +
'<td contenteditable="true" class="color"><input id="demo-input2" class="colorPicky" type="button" value="#COLOR#" /></td></td>' +
'<td><button type="button" class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">Remove</button></td>' +
'</tr>'
);
$('.colorPicky').colorpicker();
});
$("#copyColors").click(function CopyTextColors(event) {
event.target.innerHTML = '<div class="spinner-border-sm spinner-border"></div>'
saveOption("/api/v1/set/text/colors?copy=true", function finishCopyColors(event) {
setTimeout(function () {
document.getElementById("copyColors").innerHTML = "Copy from progressbar colors"
}, 500)
})
});
$("input[name='btnradio2']").click(function (event) {
console.debug()
const darkid = parseInt(event.currentTarget.id.replace("Mbtnradio", ""))
if (darkid == 1) {
DarkReader.disable()
} else if (darkid == 2) {
DarkReader.enable()
} else {
DarkReader.auto()
}
Cookies.set("interfaceColor", darkid)
});
// Restore settings
saveOption("/api/v1/data", function (event, xmlHttp) {
const tableEntry = ' <tr><td class="pt-3-half numVal" contenteditable="true">#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 id="demo-input1" type="text" class="coloris" value="#COLOR#"></div> \
</div> \
<td class="pt-3-half" contenteditable="false" style="background-color: #bg-COLOR#;"><input id="demo-input1" class="colorPicky" type="button" value="#COLOR#" /></td>\
<td>\
<span class="table-remove"><button type="button"\
class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">\
@ -104,7 +124,7 @@ $(document).ready(function () {
temp = temp.replace("#COLOR#", jsonResult.colorSegments[item]);
temp = temp.replace("#bg-COLOR#", jsonResult.colorSegments[item]);
document.getElementById("colors1").innerHTML += temp
//console.log(jsonResult.colorSegments[item])
console.log(jsonResult.colorSegments[item])
}
// Text colors
@ -113,44 +133,22 @@ $(document).ready(function () {
temp = temp.replace("#COLOR#", jsonResult.textColors[item]);
temp = temp.replace("#bg-COLOR#", jsonResult.textColors[item]);
document.getElementById("colors2").innerHTML += temp
//console.log(jsonResult.textColors[item])
console.log(jsonResult.textColors[item])
}
//console.debug(jsonResult, currentModeInt)
console.debug(jsonResult, currentModeInt)
$('.colorPicky').colorpicker();
$('.colorPicky').on('colorpickerChange', function (event) {
event.target.parentElement.style.backgroundColor = event.target.value
});
$(".deleteRow1").on("click", function removeRowEntry(event) {
//console.warn(event.target.parentElement)
console.warn(event.target.parentElement)
$(event.target).closest("tbody").remove();
});
})
$("#copyColors").click(function CopyTextColors(event) {
event.target.innerHTML = '<div class="spinner-border-sm spinner-border"></div>'
saveOption("/api/v1/set/text/colors?copy=true", function finishCopyColors(event) {
setTimeout(function () {
document.getElementById("copyColors").innerHTML = "Copy from progressbar colors"
}, 500)
})
});
$("input[name='btnradio2']").click(function (event) {
const darkid = parseInt(event.currentTarget.id.replace("Mbtnradio", ""))
if (darkid == 1) {
DarkReader.disable()
} else if (darkid == 2) {
DarkReader.enable()
} else {
DarkReader.auto()
}
Cookies.set("interfaceColor", darkid)
});
// Presets
$(".pres").click(function (event) {
currentTime = parseInt(event.currentTarget.value)
@ -186,6 +184,8 @@ $(document).ready(function () {
const colors = convertColorSegments("colors1")
const colors2 = convertColorSegments("colors2")
console.log(JSON.stringify(colors))
allPathes.push("/api/v1/set/layout/showTime?show=" + showTimeB)
allPathes.push("/api/v1/set/layout/showMillis?show=" + showMillisB)
allPathes.push("/api/v1/set/progressbar/show?show=" + progBarShowB)
@ -196,6 +196,7 @@ $(document).ready(function () {
for (pI in allPathes) {
const path = allPathes[pI];
console.warn(path)
saveOption(path, function (event) {
console.debug(event)
})
@ -225,6 +226,7 @@ $(document).ready(function () {
for (pI in allPathes) {
const path = allPathes[pI];
console.warn(path)
saveOption(path, function (event) {
console.debug(event)
})
@ -396,7 +398,7 @@ $(document).ready(function () {
$(".pageC").addClass("hidden")
$("#" + event.target.href.split("#")[1]).removeClass("hidden")
// console.log(event.target.href.split("#")[1])
console.log(event.target.href.split("#")[1])
});
});

79
static/js/script.js
View File

@ -9,9 +9,6 @@ let socket = new ReconnectingWebSocket("ws://localhost:" + location.port);
let ackdSessionToken = false
let isFirstPacket = true
let lastTime = "00:00:00";
let timerCountdownFirst = true;
socket.onopen = function (e) {
// alert("[open] Connection established");
//alert("Sending to server");
@ -50,9 +47,31 @@ socket.onclose = function (event) {
// e.g. server process killed or network down
// event.code is usually 1006 in this case
console.error('[close] Connection died');
/*websocketFailed = true
if (recoveryAttempts < 5) {
setTimeout(function handleWebsocketRecovery() {
// requestBackend()
websocketFailed = false
recoveryAttempts++;
console.warn("Trying to recover websocket connection")
socket.onopen = function (e) {
// alert("[open] Connection established");
//alert("Sending to server");
socket.send("new client");
};
}, 1000)
} else {
backReqInt = setInterval(requestBackend, 500);
}
*/
}
};
socket.onerror = function (error) {
// alert(`[error] ${error.message}`);
};
allowFullscreen = true
let dataFame = {}
let timeDiff = 0
@ -60,9 +79,9 @@ let timeDiff = 0
function enterFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
} else if (element.msRequestFullscreen) { // for IE11 (remove June 15, 2022)
element.msRequestFullscreen();
} else if (element.webkitRequestFullscreen) {
} else if (element.webkitRequestFullscreen) { // iOS Safari
element.webkitRequestFullscreen();
}
}
@ -82,6 +101,7 @@ function updateFullscreen() {
}
function msToTime(s, data) {
isSmallerThenZero = false
if (s < 0) {
@ -150,7 +170,26 @@ function handleUpdate() {
var data = dataFame;
document.getElementById("incomeData").innerHTML = JSON.stringify(data)
document.getElementById("timediff").innerHTML = timeDiff + "<br>" + String(new Date().getTime() - data.srvTime);
if (new Date().getTime() - data.srvTime > 1000 * 5) {
if (!isSlowed) {
console.error("Server timeout")
// clearInterval(updateInter)
// updateInter = setInterval(handleUpdate, 900)
document.getElementById("warningBanner").style.display = "block"
isSlowed = true
// recoInter = setInterval(handleRecovery, 10000)
}
} else {
if (isSlowed) {
//clearInterval(updateInter)
//clearInterval(recoInter)
//updateInter = setInterval(handleUpdate, 2)
document.getElementById("warningBanner").style.display = "none"
isSlowed = false
}
}
if (data.debug) {
document.getElementById("timediff").style.display = "block";
} else {
@ -192,35 +231,13 @@ function handleUpdate() {
document.getElementById("wholeProgBar").style.display = "none";
document.getElementById("clockSec").innerHTML = "";
document.getElementById("timer").style.color = "white"
timerCountdownFirst = true;
} else if (data.mode == "timer") {
document.getElementById("wholeProgBar").style.display = "block";
const now = new Date()
if(timerCountdownFirst){
const diff = data.countdownGoal - now.getTime()
timerCountdownFirst = false
document.getElementById("timer").innerHTML = msToTime(diff, data);
if (diff > 0) {
document.getElementById("progBar").style.width = percentage(diff, data.timeAmountInital) + "%";
} else {
document.getElementById("progBar").style.width = "0%";
}
document.getElementById("progBar").style.backgroundColor = findProgessColor(data.colorSegments, diff)
document.getElementById("testImg").style.display = "none";
if (data.enableColoredText) {
document.getElementById("timer").style.color = findProgessColor(data.textColors, diff)
} else {
document.getElementById("timer").style.color = "white"
}
}
if (data.timerRunState) {
const now = new Date()
const diff = data.countdownGoal - now.getTime()
document.getElementById("timer").innerHTML = msToTime(diff, data);
lastTime = msToTime(diff, data);
if (diff > 0) {
document.getElementById("progBar").style.width = percentage(diff, data.timeAmountInital) + "%";
} else {
@ -235,18 +252,14 @@ function handleUpdate() {
document.getElementById("timer").style.color = "white"
}
} else {
document.getElementById("timer").innerHTML = lastTime
}
} else if (data.mode == "black") {
timerCountdownFirst = true;
document.getElementById("timer").innerHTML = "";
document.getElementById("testImg").style.display = "none";
document.getElementById("wholeProgBar").style.display = "none";
document.getElementById("clockSec").innerHTML = "";
} else if (data.mode == "test") {
timerCountdownFirst = true;
document.getElementById("timer").innerHTML = "";
document.getElementById("testImg").style.display = "block";
document.getElementById("progBar").style.display = "none";

17
templates/newAdminPanel.html
View File

@ -21,8 +21,8 @@
<script type="text/javascript" src="/js/cookie.js"></script>
<link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/mainStyle.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>
<link href="colorpicker/css/bootstrap-colorpicker.css" rel="stylesheet">
<script src="colorpicker/js/bootstrap-colorpicker.js"></script>
</head>
<body>
@ -412,13 +412,6 @@
<input type="checkbox" name="debugMode" id="debugModeEnable" value="true"><br><br>
<button type="button" class="btn btn-outline-success" id="applyDebug">Apply settings</button>
<br>
<div class="full">
<p>Full size thumbnail</p>
<div class="clr-field" style="color: rgb(255, 204, 0);">
<button aria-labelledby="clr-open-label"></button>
<input type="text" class="coloris" value="#ffcc00"></div>
</div>
<br><br>
<h3>Raw server reponse</h3>
<code id="responeSnippet" style="width: 40%; display: inline-block;" class="overflow-auto">
@ -443,13 +436,7 @@
</main>
<script type="text/javascript" src="js/jsonview.js"></script>
<script type="text/javascript" src="/js/interface.js"> </script>
<script type="text/javascript">
Coloris({
el: '.coloris',
alpha: false,
});
</script>
</body>