From a85a76393757c3f35cb94cf792bfe98d138ad6c8 Mon Sep 17 00:00:00 2001 From: XtoMHA96 Date: Wed, 11 Oct 2023 12:26:37 +0100 Subject: [PATCH] v1.0.3 - Added extensible browser fonts - Bugfixes --- core/index.html | 34 ++++++------ core/template/cdown/control/control.js | 8 +-- core/template/cdowntime/control/control.js | 6 +- core/template/extensible/control/control.js | 58 ++++++++++++++++---- core/template/extensible/control/index.html | 25 ++++++++- core/template/extensible/control/styles.css | 23 +++++++- core/template/extensible/viewCdown/client.js | 4 +- core/template/extensible/viewCrono/client.js | 4 +- core/topbar.css | 2 + core/translates/en.yaml | 8 ++- core/translates/es.yaml | 4 +- functions.js | 3 +- server.js | 33 ++++++++++- 13 files changed, 163 insertions(+), 49 deletions(-) diff --git a/core/index.html b/core/index.html index 1bfc097..ce61dc5 100644 --- a/core/index.html +++ b/core/index.html @@ -22,22 +22,24 @@ - - + + + + + + diff --git a/core/template/cdown/control/control.js b/core/template/cdown/control/control.js index 8cd778e..7f23421 100644 --- a/core/template/cdown/control/control.js +++ b/core/template/cdown/control/control.js @@ -101,7 +101,7 @@ socket.addEventListener('message', (event) => { // Perform necessary actions with the variables here textMsg.textContent = elementVariables.msgEnd if (elementVariables.msgEnd === '') { - textMsg.textContent = translateElements.timer.ph_msgend + textMsg.textContent = translateElements.timer.phMsgEnd textMsg.style.color = '#555' } else { textMsg.style.color = '#000' } timeText.value = MsToText(elementVariables.textMilliseconds) @@ -122,7 +122,7 @@ socket.addEventListener('message', (event) => { if (message[classElement].status !== 'started') { textMsg.textContent = message[classElement].msgEnd if (message[classElement].msgEnd === '') { - textMsg.textContent = translateElements.timer.ph_msgend + textMsg.textContent = translateElements.timer.phMsgEnd textMsg.style.color = '#555' } else { textMsg.style.color = '#000' } timeText.value = MsToText(message[classElement].textMilliseconds) @@ -218,7 +218,7 @@ subContainer.addEventListener('click', (event) => { }) textMsg.addEventListener('focus', () => { - if (textMsg.textContent === translateElements.timer.ph_msgend) { + if (textMsg.textContent === translateElements.timer.phMsgEnd) { textMsg.textContent = '' textMsg.style.color = '#000' } @@ -227,7 +227,7 @@ textMsg.addEventListener('focus', () => { textMsg.addEventListener('blur', () => { socket.send(JSON.stringify({ action: 'editMsgCdown', msg: textMsg.textContent, classElement })) if (textMsg.textContent === '') { - textMsg.textContent = translateElements.timer.ph_msgend + textMsg.textContent = translateElements.timer.phMsgEnd textMsg.style.color = '#555' } else { textMsg.style.color = '#000' } }) diff --git a/core/template/cdowntime/control/control.js b/core/template/cdowntime/control/control.js index ba55c42..1943afb 100644 --- a/core/template/cdowntime/control/control.js +++ b/core/template/cdowntime/control/control.js @@ -107,7 +107,7 @@ socket.addEventListener('message', (event) => { // Perform necessary actions with the variables here textMsg.textContent = elementVariables.msgEnd if (elementVariables.msgEnd === '') { - textMsg.textContent = translateElements.timer.ph_msgend + textMsg.textContent = translateElements.timer.phMsgEnd textMsg.style.color = '#555' } else { textMsg.style.color = '#000' } timeData.value = new Date(elementVariables.endDatetime).toLocaleString('en-CA', { timeZone: elementVariables.timezone, hour12: false }).replace(/,\s/, 'T') @@ -189,7 +189,7 @@ subContainer.addEventListener('click', (event) => { }) textMsg.addEventListener('focus', () => { - if (textMsg.textContent === translateElements.timer.ph_msgend) { + if (textMsg.textContent === translateElements.timer.phMsgEnd) { textMsg.textContent = '' textMsg.style.color = '#000' } @@ -198,7 +198,7 @@ textMsg.addEventListener('focus', () => { textMsg.addEventListener('blur', () => { socket.send(JSON.stringify({ action: 'editMsgCdownTime', msg: textMsg.textContent, classElement })) if (textMsg.textContent === '') { - textMsg.textContent = translateElements.timer.ph_msgend + textMsg.textContent = translateElements.timer.phMsgEnd textMsg.style.color = '#555' } else { textMsg.style.color = '#000' } }) diff --git a/core/template/extensible/control/control.js b/core/template/extensible/control/control.js index 3377126..5ee63fd 100644 --- a/core/template/extensible/control/control.js +++ b/core/template/extensible/control/control.js @@ -3,8 +3,13 @@ const resetButton = document.getElementById('resetButton') const timeText = document.getElementById('timeText') const addContainer = document.getElementById('buttonsaddtime') const subContainer = document.getElementById('buttonssubtime') +const checkboxStopAdd = document.getElementById('checkboxStopAdd') +const checkboxLabelStopAdd = document.getElementById('checkboxLabelStopAdd') +const checkboxPauseAdd = document.getElementById('checkboxPauseAdd') +const checkboxLabelPauseAdd = document.getElementById('checkboxLabelPauseAdd') const textMsg = document.getElementById('text-endmsg') -const formatSelector = document.getElementById('formatSelector') +const formatSelectorCrono = document.getElementById('formatSelectorCrono') +const formatSelectorCdown = document.getElementById('formatSelectorCdown') const fontSelect = document.getElementById('fontSelect') // Font selector const fontSize = document.getElementById('fontSize') const boldButton = document.getElementById('boldButton') @@ -84,28 +89,41 @@ socket.addEventListener('message', (event) => { controlButton.textContent = translateElements.timer.buttons.start resetButton.textContent = translateElements.timer.buttons.reset + checkboxLabelStopAdd.textContent = translateElements.timer.enableStopAdd + checkboxLabelPauseAdd.textContent = translateElements.timer.enablePauseAdd if (elementVariables && typeof elementVariables === 'object') { checkTextTime = MsToText(elementVariables.textMilliseconds) checkHexColor = elementVariables.colorText // Format selector options - formatSelector.innerHTML = '' + formatSelectorCrono.innerHTML = '' message.formats[classElement.replace(/\d/g, '')].forEach((format) => { const option = document.createElement('option') option.value = format option.textContent = format - formatSelector.appendChild(option) + formatSelectorCrono.appendChild(option) + }) + + formatSelectorCdown.innerHTML = '' + message.formats[classElement.replace(/\d/g, '')].forEach((format) => { + const option = document.createElement('option') + option.value = format + option.textContent = format + formatSelectorCdown.appendChild(option) }) // Perform necessary actions with the variables here textMsg.textContent = elementVariables.msgEnd if (elementVariables.msgEnd === '') { - textMsg.textContent = translateElements.timer.ph_msgend + textMsg.textContent = translateElements.timer.phMsgEnd textMsg.style.color = '#555' } else { textMsg.style.color = '#000' } timeText.value = MsToText(elementVariables.textMilliseconds) - formatSelector.value = elementVariables.formatTime + // checkboxStopAdd.checked = elementVariables.enableStopAdd + // checkboxPauseAdd.checked = elementVariables.enablePauseAdd + formatSelectorCrono.value = elementVariables.formatTimeCrono + formatSelectorCdown.value = elementVariables.formatTimeCdown fontSelect.value = elementVariables.font fontSize.value = elementVariables.size textFormat(elementVariables) @@ -122,11 +140,14 @@ socket.addEventListener('message', (event) => { if (message[classElement].status !== 'started') { textMsg.textContent = message[classElement].msgEnd if (message[classElement].msgEnd === '') { - textMsg.textContent = translateElements.timer.ph_msgend + textMsg.textContent = translateElements.timer.phMsgEnd textMsg.style.color = '#555' } else { textMsg.style.color = '#000' } timeText.value = MsToText(message[classElement].textMilliseconds) - formatSelector.value = message[classElement].formatTime + checkboxStopAdd.checked = message[classElement].enableStopAdd + checkboxPauseAdd.checked = message[classElement].enablePauseAdd + formatSelectorCrono.value = message[classElement].formatTimeCrono + formatSelectorCdown.value = message[classElement].formatTimeCdown fontSelect.value = message[classElement].font fontSize.value = message[classElement].size colorPicker.value = message[classElement].colorText @@ -136,7 +157,8 @@ socket.addEventListener('message', (event) => { textFormat(message[classElement]) // Update the control button and other elements based on the received message updateControlButton(message[classElement].status) - formatSelector.value = message[classElement].formatTime + formatSelectorCrono.value = message[classElement].formatTimeCrono + formatSelectorCdown.value = message[classElement].formatTimeCdown } } else { window.location.reload() @@ -217,8 +239,16 @@ subContainer.addEventListener('click', (event) => { } }) +checkboxStopAdd.addEventListener('change', () => { + socket.send(JSON.stringify({ action: 'checkboxStopAdd', value: checkboxStopAdd.checked, classElement })) +}) + +checkboxPauseAdd.addEventListener('change', () => { + socket.send(JSON.stringify({ action: 'checkboxPauseAdd', value: checkboxPauseAdd.checked, classElement })) +}) + textMsg.addEventListener('focus', () => { - if (textMsg.textContent === translateElements.timer.ph_msgend) { + if (textMsg.textContent === translateElements.timer.phMsgEnd) { textMsg.textContent = '' textMsg.style.color = '#000' } @@ -227,13 +257,17 @@ textMsg.addEventListener('focus', () => { textMsg.addEventListener('blur', () => { socket.send(JSON.stringify({ action: 'editMsgExtensible', msg: textMsg.textContent, classElement })) if (textMsg.textContent === '') { - textMsg.textContent = translateElements.timer.ph_msgend + textMsg.textContent = translateElements.timer.phMsgEnd textMsg.style.color = '#555' } else { textMsg.style.color = '#000' } }) -formatSelector.addEventListener('change', () => { - socket.send(JSON.stringify({ action: 'changeFormat', format: formatSelector.value, classElement })) +formatSelectorCrono.addEventListener('change', () => { + socket.send(JSON.stringify({ action: 'changeFormatExtCrono', format: formatSelectorCrono.value, classElement })) +}) + +formatSelectorCdown.addEventListener('change', () => { + socket.send(JSON.stringify({ action: 'changeFormatExtCdown', format: formatSelectorCdown.value, classElement })) }) fontSelect.addEventListener('change', () => { diff --git a/core/template/extensible/control/index.html b/core/template/extensible/control/index.html index 96ce6c5..e244809 100644 --- a/core/template/extensible/control/index.html +++ b/core/template/extensible/control/index.html @@ -61,13 +61,34 @@ +
+ + +
+
+ + +


-
- +
+ + +
+
+ +

diff --git a/core/template/extensible/control/styles.css b/core/template/extensible/control/styles.css index c63125d..ded1b60 100644 --- a/core/template/extensible/control/styles.css +++ b/core/template/extensible/control/styles.css @@ -17,6 +17,13 @@ body { background-color: #555; } +#icon-fa-clock, +#icon-fa-stopwatch { + margin-right: 10px; + color: #000; + font-size: 30px; +} + .container { text-align: center; margin-top: 50px; @@ -106,6 +113,19 @@ body { border: 2px solid #d9362eaa; } +.checkboxBox { + background-color: #cccccc88; + border: 2px solid #cccccc88; /* Borde */ + border-radius: 5px; /* Borde redondeado */ + cursor: pointer; + width: 18px; /* Ancho personalizado */ + height: 18px; /* Alto personalizado */ +} + +.checkboxText { + font-size: 18px; /* Tamaño de fuente */ +} + .text-input-container { display: flex; justify-content: center; /* Centra horizontalmente */ @@ -126,7 +146,8 @@ body { } /* Estilos para el selector */ -#formatSelector, +#formatSelectorCrono, +#formatSelectorCdown, #fontSelect { background-color: #cccccc88; font-size: 24px; /* Tamaño de fuente */ diff --git a/core/template/extensible/viewCdown/client.js b/core/template/extensible/viewCdown/client.js index 50ee76d..c315ad0 100644 --- a/core/template/extensible/viewCdown/client.js +++ b/core/template/extensible/viewCdown/client.js @@ -33,12 +33,12 @@ socket.addEventListener('message', (event) => { } if (message[classElement].milliseconds !== undefined) { - if (formatTimeVar !== message[classElement].formatTime && intervalId) { + if (formatTimeVar !== message[classElement].formatTimeCdown && intervalId) { clearInterval(intervalId) intervalId = null } - formatTimeVar = message[classElement].formatTime + formatTimeVar = message[classElement].formatTimeCdown if (message[classElement].status === 'ended') { if (message[classElement].milliseconds !== 0) { updateTimeDisplay(formatTimeVar, message[classElement].milliseconds) diff --git a/core/template/extensible/viewCrono/client.js b/core/template/extensible/viewCrono/client.js index aa742fe..240d2e9 100644 --- a/core/template/extensible/viewCrono/client.js +++ b/core/template/extensible/viewCrono/client.js @@ -31,12 +31,12 @@ socket.addEventListener('message', (event) => { } if (message[classElement].millisecondsTotal !== undefined) { - if (formatTimeVar !== message[classElement].formatTime && intervalId) { + if (formatTimeVar !== message[classElement].formatTimeCrono && intervalId) { clearInterval(intervalId) intervalId = null } - formatTimeVar = message[classElement].formatTime + formatTimeVar = message[classElement].formatTimeCrono updateTimeDisplay(formatTimeVar, message[classElement].millisecondsTotal) // Update the timer based on the received message diff --git a/core/topbar.css b/core/topbar.css index e938070..1dc1897 100644 --- a/core/topbar.css +++ b/core/topbar.css @@ -37,6 +37,8 @@ margin-top: 3.5px; cursor: pointer; flex-grow: 1; + margin-right: 2.5px; + margin-left: 2.5px; } .link-button:hover { diff --git a/core/translates/en.yaml b/core/translates/en.yaml index 299f91d..fdfc1d9 100644 --- a/core/translates/en.yaml +++ b/core/translates/en.yaml @@ -1,8 +1,8 @@ home: close: Close the window and stop the code wiki: Documentation - cronoTitle: CLOCKS - cdownTitle: TIMERS + cronoTitle: CHRONOMETERS + cdownTitle: COUNTDOWNS cdowntimeTitle: TIME UNTIL... extensibleTitle: STREAM EXTENSIBLE timeTitle: CURRENT TIME @@ -12,4 +12,6 @@ timer: start: Start pause: Pause reset: Reset - ph_msgend: Message to display when time expires \ No newline at end of file + phMsgEnd: Message to display when time expires + enablePauseAdd: Enabled permission to add time when time is paused + enableStopAdd: Enabled permission to add time when time has not yet started \ No newline at end of file diff --git a/core/translates/es.yaml b/core/translates/es.yaml index 6e8cfcf..b6c2536 100644 --- a/core/translates/es.yaml +++ b/core/translates/es.yaml @@ -12,4 +12,6 @@ timer: start: Iniciar pause: Pausar reset: Reiniciar - ph_msgend: Mensaje a mostrar cuando finalice el tiempo \ No newline at end of file + phMsgEnd: Mensaje a mostrar cuando finalice el tiempo + enablePauseAdd: Habilitado el permiso para añadir tiempo cuando el tiempo está pausado + enableStopAdd: Habilitado el permiso para añadir tiempo cuando el tiempo aún no se ha iniciado diff --git a/functions.js b/functions.js index c6087a8..ca9a408 100644 --- a/functions.js +++ b/functions.js @@ -251,7 +251,8 @@ exports.createDataYAML = (GlobalVariables, classType) => { GlobalVariables[newKey].millisecondsTotal = 0 GlobalVariables[newKey].milliseconds = 60000 GlobalVariables[newKey].textMilliseconds = 60000 - GlobalVariables[newKey].formatTime = 'MM:ss' + GlobalVariables[newKey].formatTimeCrono = 'HH:mm:ss' + GlobalVariables[newKey].formatTimeCdown = 'HH:mm:ss' GlobalVariables[newKey].font = 'Arial' GlobalVariables[newKey].size = 50 GlobalVariables[newKey].bold = false diff --git a/server.js b/server.js index 5a60353..55986ef 100644 --- a/server.js +++ b/server.js @@ -185,9 +185,38 @@ wss.on('connection', (ws) => { } }) saveVariablesToYAML(GlobalVariables) - } else if (data.action === 'changeFormat' && data.format) { + } else if (data.action === 'checkboxStopAdd') { + // Change the text format when receiving the "changeFormat" + GlobalVariables[data.classElement].enableStopAdd = data.value + // Transmit the updated format to all WebSocket clients + wss.clients.forEach((client) => { + if (client.readyState === WebSocket.OPEN) { + client.send(JSON.stringify(GlobalVariables)) + } + }) + saveVariablesToYAML(GlobalVariables) + } else if (data.action === 'checkboxPauseAdd') { + // Change the text format when receiving the "changeFormat" + GlobalVariables[data.classElement].enablePauseAdd = data.value + // Transmit the updated format to all WebSocket clients + wss.clients.forEach((client) => { + if (client.readyState === WebSocket.OPEN) { + client.send(JSON.stringify(GlobalVariables)) + } + }) + saveVariablesToYAML(GlobalVariables) + } else if ((data.action === 'changeFormat' || + data.action === 'changeFormatExtCrono' || + data.action === 'changeFormatExtCdown' + ) && data.format) { const classElement = data.classElement - GlobalVariables[classElement].formatTime = data.format + if (data.action === 'changeFormatExtCrono') { + GlobalVariables[classElement].formatTimeCrono = data.format + } else if (data.action === 'changeFormatExtCdown') { + GlobalVariables[classElement].formatTimeCdown = data.format + } else { + GlobalVariables[classElement].formatTime = data.format + } wss.clients.forEach((client) => { if (client.readyState === WebSocket.OPEN) {