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

some more touchups + fixes

Browse Source
This commit is contained in:
Sören Oesterwind 2022-03-19 18:28:56 +01:00
parent c0cfc04fef
commit ab4edb3d8e
4 changed files with 91 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
static/css/mainStyle.css
View File

@ -16,6 +16,12 @@ 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,11 +51,10 @@ $(document).ready(function () {
$("#colors1").append(
'<tr>' +
'<td contenteditable="true" class="time"></td>' +
'<td contenteditable="true" class="color"><input id="demo-input1" class="colorPicky" type="button" value="#COLOR#" /></td></td>' +
'<td contenteditable="true" class="color full"><input id="demo-input1" "type="text" value="#COLOR#" data-coloris /></td></td>' +
'<td><button type="button" class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">Remove</button></td>' +
'</tr>'
);
$('.colorPicky').colorpicker();
});
@ -63,42 +62,23 @@ $(document).ready(function () {
$("#colors2").append(
'<tr>' +
'<td contenteditable="true" class="time"></td>' +
'<td contenteditable="true" class="color"><input id="demo-input2" class="colorPicky" type="button" value="#COLOR#" /></td></td>' +
'<td contenteditable="true" class="color full"><input id="demo-input2" type="text" value="#COLOR#" data-coloris /></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" contenteditable="false" style="background-color: #bg-COLOR#;"><input id="demo-input1" class="colorPicky" type="button" value="#COLOR#" /></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>\
<span class="table-remove"><button type="button"\
class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">\
@ -124,7 +104,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
@ -133,22 +113,44 @@ $(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)
$('.colorPicky').colorpicker();
//console.debug(jsonResult, currentModeInt)
$('.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)
@ -184,8 +186,6 @@ $(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,7 +196,6 @@ $(document).ready(function () {
for (pI in allPathes) {
const path = allPathes[pI];
console.warn(path)
saveOption(path, function (event) {
console.debug(event)
})
@ -226,7 +225,6 @@ $(document).ready(function () {
for (pI in allPathes) {
const path = allPathes[pI];
console.warn(path)
saveOption(path, function (event) {
console.debug(event)
})
@ -398,7 +396,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])
});
});

81
static/js/script.js
View File

@ -9,6 +9,9 @@ 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");
@ -47,31 +50,9 @@ 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
@ -79,9 +60,9 @@ let timeDiff = 0
function enterFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) { // for IE11 (remove June 15, 2022)
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.webkitRequestFullscreen) { // iOS Safari
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
}
@ -101,7 +82,6 @@ function updateFullscreen() {
}
function msToTime(s, data) {
isSmallerThenZero = false
if (s < 0) {
@ -170,26 +150,7 @@ 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 {
@ -231,12 +192,15 @@ 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";
if (data.timerRunState) {
const now = new Date()
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) + "%";
@ -251,15 +215,38 @@ function handleUpdate() {
} else {
document.getElementById("timer").style.color = "white"
}
}
if (data.timerRunState) {
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 {
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"
}
} 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 href="colorpicker/css/bootstrap-colorpicker.css" rel="stylesheet">
<script src="colorpicker/js/bootstrap-colorpicker.js"></script>
<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>
</head>
<body>
@ -412,6 +412,13 @@
<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">
@ -436,7 +443,13 @@
</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>