chris/timepulse
chris/timepulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update message timeout

Browse Source
This commit is contained in:
chris 2025-08-09 20:42:54 -04:00
parent c7379f5af3
commit efc29f199a
2 changed files with 38 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
public/js/utils.js
View File

@ -6,12 +6,34 @@ export const showLoading = (show) => {
loadingSpinner.innerHTML = show ? `<div class="inline-block animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>` : '';
};
export const showMessage = (message, type = 'success') => {
const messageBox = document.getElementById('message-box');
messageBox.innerHTML = `<div class="p-4 mb-4 text-sm rounded-lg flex items-center justify-between ${type === 'error' ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}" role="alert"><span>${message}</span><button onclick="this.parentElement.style.display='none'" class="font-bold text-lg">&times;</button></div>`;
messageBox.classList.remove('hidden');
};
// Keep a reference to the timer so we can reset it if a new message appears
let messageTimer = null;
export const showMessage = (message, type = 'success', duration = 4000) => { // duration is 4 seconds
const messageBox = document.getElementById('message-box');
// The HTML for the message itself, using Tailwind classes for styling
messageBox.innerHTML = `
<div class="p-4 rounded-lg shadow-xl flex items-center justify-between animate-fade-in-down
${type === 'error' ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}"
role="alert">
<span>${message}</span>
<button onclick="this.parentElement.parentElement.classList.add('hidden')"
class="font-bold text-lg hover:text-black">
&times;
</button>
</div>`;
messageBox.classList.remove('hidden');
// Clear any previous timer that might be running
clearTimeout(messageTimer);
// Set a new timer to hide the message box after the specified duration
messageTimer = setTimeout(() => {
messageBox.classList.add('hidden');
}, duration);
};
export const formatDecimal = (ms) => ms ? (ms / 3600000).toFixed(2) : '0.00';
export const formatDateTime = (s) => s ? new Date(s).toLocaleString(undefined, { month: '2-digit', day: '2-digit', year: '2-digit', hour: 'numeric', minute: '2-digit' }) : 'N/A';

11
public/style/style.css
View File

@ -45,3 +45,14 @@ body {
color: #1E40AF; /* Tailwind's blue-800 */
font-weight: 500;
}
/* Sticky Message Box Styles */
#message-box {
position: fixed; /* 'Fixes' the element relative to the browser window */
top: 1rem; /* 1rem (16px) from the top */
left: 50%; /* Start at 50% from the left */
transform: translateX(-50%); /* Shift left by half its own width to perfectly center it */
z-index: 2000; /* Ensures it appears on top of all other content */
width: 90%; /* Make it 90% of the screen width */
max-width: 500px; /* But no wider than 500px */
}