Created
May 18, 2024 20:58
-
-
Save prince-neres/15124f26a5e7c7f822cafad56c31b4c5 to your computer and use it in GitHub Desktop.
Botão de bater ponto usando objects e fragmento
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #assign | |
| objectsEntriesIds = [526879,526881,526884,527547,527724,527730,527892,527894,527896,527898,527900,527905,527907,527909,527917,527919,527921,527923,527925,527927,527929,527931,527933,527935,527937,527939,527941,527943,527945,527947,527955,527960,527962,527966,527984,527986,527988,527990,527992,527994,527996,527998,528061,528092,528094,528247,528249,528251,528253,528255,528257,528277,529369,529477,529480,529482,529632,529634,529638,529640,529649,529651,529654,529657,529662,529671,529674,529676,529678,529680,529683,529685,529687,529689,529692,529705,529708,529710,529712,529714,529718,529720,529724,529726,529728,529758,529764,529766,529772,529774,529776,529778,529780,529782,529784,529786,529875,529877,529879,529881,529883,529885,529887,529889,529892,529894,529896,529898,529901,529903,529905,529907] | |
| registroDePontosResource = resourceLocator.locate("/c/registrodepontos", "RegistroDePonto") | |
| /> | |
| <#list objectsEntriesIds as objectEntryId> | |
| ${registroDePontosResource.deleteObjectEntry(objectEntryId)} | |
| </#list |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="point-record-fragment d-flex justify-content-center align-items-center py-3"> | |
| <button class="check-point-button btn btn-primary mb-3"> | |
| Carregando... | |
| </button> | |
| <div class="elapsed-time font-weight-boold text-center"></div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const checkPointButton = fragmentElement.querySelector(".check-point-button"); | |
| const elapsedTimeDiv = fragmentElement.querySelector(".elapsed-time"); | |
| const API_URL = `/o/c/registrodepontos/scopes/${themeDisplay.getScopeGroupId()}`; | |
| const locale = themeDisplay.getBCP47LanguageId(); | |
| const userId = themeDisplay.getUserId(); | |
| let latestCheckPoint; | |
| const getLatestUserCheckPoint = async () => { | |
| const sortParam = "sort=dateCreated%3Adesc"; | |
| const filterParam = `filter=r_userId_userId%20eq%20'${userId}'`; | |
| const pageSizeParam = "pageSize=1"; | |
| const url = `${API_URL}?${sortParam}&${filterParam}&${pageSizeParam}`; | |
| try { | |
| const response = await Liferay.Util.fetch(url, { | |
| headers: { "Accept-Language": locale }, | |
| }); | |
| if (!response.ok) | |
| throw new Error( | |
| `Erro ao buscar pontos de usuário: ${response.statusText}` | |
| ); | |
| const data = await response.json(); | |
| const { items } = data; | |
| return items.map((record) => ({ | |
| dateCreated: record.dateCreated, | |
| registerType: record.registerType, | |
| }))[0]; | |
| } catch (error) { | |
| console.error("Erro ao buscar pontos de usuário:", error); | |
| return {}; | |
| } | |
| }; | |
| const registerNewCheckPoint = async (registerType) => { | |
| setLoading(); | |
| const payload = { | |
| registerType, | |
| r_userId_userId: userId, | |
| }; | |
| try { | |
| const response = await Liferay.Util.fetch(API_URL, { | |
| method: "POST", | |
| headers: { | |
| "Accept-Language": locale, | |
| "Content-Type": "application/json", | |
| }, | |
| body: JSON.stringify(payload), | |
| }); | |
| if (!response.ok) | |
| throw new Error(`Erro ao registrar ponto de usuário: ${response.title}`); | |
| const data = await response.json(); | |
| if (registerType === "exit") showElapsedTime(data.dateCreated); | |
| updateCheckButton(data); | |
| latestCheckPoint.dateCreated = data.dateCreated; | |
| latestCheckPoint.registerType = data.registerType; | |
| } catch (error) { | |
| console.error("Erro ao registrar ponto de usuário:", error); | |
| return null; | |
| } | |
| }; | |
| const formatDateTime = (isoString) => { | |
| const date = new Date(isoString); | |
| const day = String(date.getDate()).padStart(2, "0"); | |
| const month = String(date.getMonth() + 1).padStart(2, "0"); | |
| const year = date.getFullYear(); | |
| const hours = String(date.getHours()).padStart(2, "0"); | |
| const minutes = String(date.getMinutes()).padStart(2, "0"); | |
| const seconds = String(date.getSeconds()).padStart(2, "0"); | |
| return `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`; | |
| }; | |
| const showElapsedTime = (checkOutDateTime) => { | |
| if (latestCheckPoint && latestCheckPoint.dateCreated) { | |
| const checkInDateTime = latestCheckPoint.dateCreated; | |
| const elapsedTime = new Date(checkOutDateTime) - new Date(checkInDateTime); | |
| const hours = Math.floor(elapsedTime / (1000 * 60 * 60)); | |
| const minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000); | |
| elapsedTimeDiv.innerHTML = `Tempo decorrido: <br> <b>${hours}h ${minutes}m ${seconds}s</b>`; | |
| } | |
| }; | |
| const showLastCheckDateTime = (checkInDateTime) => { | |
| elapsedTimeDiv.innerHTML = `Último apontamento: <br> <b>${formatDateTime(checkInDateTime)}</b>`; | |
| }; | |
| const setLoading = () => { | |
| checkPointButton.textContent = "Carregando..."; | |
| checkPointButton.disabled = true; | |
| }; | |
| const updateCheckButton = (latestCheckPoint) => { | |
| if (latestCheckPoint && latestCheckPoint.registerType.key === "entrance") { | |
| checkPointButton.textContent = "Registrar Saída"; | |
| checkPointButton.onclick = () => registerNewCheckPoint("exit"); | |
| checkPointButton.disabled = false; | |
| showLastCheckDateTime(latestCheckPoint.dateCreated); | |
| } else { | |
| checkPointButton.textContent = "Registrar Entrada"; | |
| checkPointButton.onclick = () => registerNewCheckPoint("entrance"); | |
| checkPointButton.disabled = false; | |
| } | |
| }; | |
| (async () => { | |
| latestCheckPoint = await getLatestUserCheckPoint(); | |
| updateCheckButton(latestCheckPoint); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment