diff options
Diffstat (limited to 'app/static')
| -rw-r--r-- | app/static/custom.css | 41 | ||||
| -rw-r--r-- | app/static/file.js | 11 | ||||
| -rw-r--r-- | app/static/timer.js (renamed from app/static/custom.js) | 188 |
3 files changed, 130 insertions, 110 deletions
diff --git a/app/static/custom.css b/app/static/custom.css index fafc51a..a5ca36f 100644 --- a/app/static/custom.css +++ b/app/static/custom.css @@ -1,19 +1,34 @@ -button, input, .select, .select select { +button, input, select { width: 100%; -} -table { - font-size: 17.5px; + height: 100%; } td { width: 20%; } -img { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); +.grid { + margin-top: 20px; + margin-bottom: 20px; +} +footer { + text-align: center; +} +.parent, .timer { + display: grid; + grid-column-gap: 20px; + grid-row-gap: 20px; + margin-top: 20px; + margin-bottom: 20px; + grid-auto-columns: 1fr; + grid-auto-rows: 1fr; +} +@media (min-width: 900px) { + table { + font-size: xx-large; + } + .parent { + grid-template-columns: repeat(4, 1fr); + } + .timer { + grid-template-columns: 4fr repeat(2, 1fr); + } } -.center { - margin: auto; - width: 50%; -}
\ No newline at end of file diff --git a/app/static/file.js b/app/static/file.js new file mode 100644 index 0000000..403ddf6 --- /dev/null +++ b/app/static/file.js @@ -0,0 +1,11 @@ +window.onload = function() { + const fileInput = document.querySelector("#file-js input[type=file]"); + if (fileInput !== null) { + fileInput.onchange = () => { + if (fileInput.files.length > 0) { + const fileName = document.querySelector("#file-js .file-name"); + fileName.textContent = fileInput.files[0].name; + } + } + }; +}
\ No newline at end of file diff --git a/app/static/custom.js b/app/static/timer.js index 1d36493..e8e7854 100644 --- a/app/static/custom.js +++ b/app/static/timer.js @@ -1,97 +1,91 @@ -let minsPerRound = Number(sessionStorage.getItem("minsPerRound")) || 12;
-let timerRunningFlag = Number(sessionStorage.getItem("timerRunningFlag")) || 0;
-let deadline = Number(sessionStorage.getItem("deadline")) || new Date().getTime();
-let clock = 0;
-
-function setTimer(m, s) {
- let timer = document.getElementById("timer-display");
- m = m < 10 ? ("0" + m) : m;
- s = s < 10 ? ("0" + s) : s;
- timer.value = `${m}:${s}`;
-}
-
-function setSessionData() {
- sessionStorage.setItem("deadline", deadline);
- sessionStorage.setItem("minsPerRound", minsPerRound);
- sessionStorage.setItem("timerRunningFlag", timerRunningFlag);
-}
-
-function resetTimer() {
- clearInterval(clock);
- setTimer(minsPerRound, 0);
- timerRunningFlag = 0;
- setSessionData();
-}
-
-function updateTimer(milliseconds) {
- const m = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
- const s = Math.floor((milliseconds % (1000 * 60)) / 1000);
- setTimer(m, s);
-}
-
-function refreshTimer() {
- const now = new Date().getTime();
- const millisecondsToDeadline = deadline - now;
- if (millisecondsToDeadline > 0) {
- updateTimer(millisecondsToDeadline);
- return;
- }
- resetTimer();
- const notification = new Notyf({
- duration: 30 * 1000,
- position: {x: 'center', y: 'top'},
- types: [{
- type: 'success',
- background: 'indianred',
- duration: 1000 * 1000,
- dismissible: true
- }]
- });
- notification.success("Round completed");
-}
-
-function startTimer(fresh) {
- if (fresh) {
- now = new Date().getTime();
- const millisecondsToDeadline = minsPerRound * 60 * 1000;
- deadline = now + millisecondsToDeadline;
- }
- timerRunningFlag = 1;
- setSessionData();
- clock = setInterval(refreshTimer, 1000);
-}
-
-if (timerRunningFlag) startTimer(0); else resetTimer();
-
-document.getElementById("timer-start").addEventListener('click', ()=> {
- if (timerRunningFlag != 0) return;
- startTimer(1);
-});
-
-document.getElementById("timer-stop").addEventListener('click', ()=>{
- resetTimer();
-});
-
-document.getElementById("timer-inc").addEventListener('click', ()=> {
- if (timerRunningFlag == 0) {
- minsPerRound += 1;
- resetTimer();
- }
-});
-
-document.getElementById("timer-dec").addEventListener('click', ()=> {
- if (timerRunningFlag == 0 && minsPerRound != 0) {
- minsPerRound -= 1;
- resetTimer();
- }
-});
-
-const fileInput = document.querySelector("#file-js input[type=file]");
- if (fileInput !== null) {
- fileInput.onchange = () => {
- if (fileInput.files.length > 0) {
- const fileName = document.querySelector("#file-js .file-name");
- fileName.textContent = fileInput.files[0].name;
- }
- }
-};
\ No newline at end of file +let minsPerRound = Number(sessionStorage.getItem("minsPerRound")) || 12; +let timerRunningFlag = Number(sessionStorage.getItem("timerRunningFlag")) || 0; +let deadline = Number(sessionStorage.getItem("deadline")) || new Date().getTime(); +let clock = 0; + +function setTimer(m, s) { + let timer = document.getElementById("timer-display"); + m = m < 10 ? ("0" + m) : m; + s = s < 10 ? ("0" + s) : s; + timer.value = `${m}:${s}`; +} + +function setSessionData() { + sessionStorage.setItem("deadline", deadline); + sessionStorage.setItem("minsPerRound", minsPerRound); + sessionStorage.setItem("timerRunningFlag", timerRunningFlag); +} + +function resetTimer() { + clearInterval(clock); + setTimer(minsPerRound, 0); + timerRunningFlag = 0; + setSessionData(); +} + +function updateTimer(milliseconds) { + const m = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60)); + const s = Math.floor((milliseconds % (1000 * 60)) / 1000); + setTimer(m, s); +} + +function refreshTimer() { + const now = new Date().getTime(); + const millisecondsToDeadline = deadline - now; + if (millisecondsToDeadline > 0) { + updateTimer(millisecondsToDeadline); + return; + } + resetTimer(); + const notification = new Notyf({ + duration: 30 * 1000, + position: {x: 'center', y: 'top'}, + types: [{ + type: 'success', + background: 'indianred', + duration: 1000 * 1000, + dismissible: true + }] + }); + notification.success("Round completed"); +} + +function startTimer(fresh) { + if (fresh) { + now = new Date().getTime(); + const millisecondsToDeadline = minsPerRound * 60 * 1000; + deadline = now + millisecondsToDeadline; + } + timerRunningFlag = 1; + setSessionData(); + clock = setInterval(refreshTimer, 1000); +} + +window.onload = function () { + if (timerRunningFlag) + startTimer(0); + else resetTimer(); + + document.getElementById("timer-start").addEventListener('click', ()=> { + if (timerRunningFlag != 0) return; + startTimer(1); + }); + + document.getElementById("timer-stop").addEventListener('click', ()=>{ + resetTimer(); + }); + + document.getElementById("timer-inc").addEventListener('click', ()=> { + if (timerRunningFlag == 0) { + minsPerRound += 1; + resetTimer(); + } + }); + + document.getElementById("timer-dec").addEventListener('click', ()=> { + if (timerRunningFlag == 0 && minsPerRound != 0) { + minsPerRound -= 1; + resetTimer(); + } + }); +}
\ No newline at end of file |