CooperandGoodman/yolkbook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement reliability improvements across frontend

Browse Source 
- api.js: add exponential backoff retry (3 attempts, 500/1000/2000ms) for
  GET requests on network errors and 5xx responses; mutating methods are
  not retried since they are not idempotent
- api.js: add offline indicator — fixed pill banner appears at bottom of
  page when navigator goes offline, disappears when back online
- style.css: add styles for offline banner and session expiry warning
- auth.js: show amber warning banner below nav when session expires within
  24 hours (with exact hours remaining); dismissible with X button
- auth.js: fix password min-length client-side check from 6 to 10 to
  match the backend
- log.js, flock.js, budget.js: disable submit button during async request
  and re-enable in finally block to prevent double-submits and make loading
  state visible
- dashboard.js: fix chart date labels to use user's configured timezone
  instead of the browser's local timezone

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Derek Cooper
2026-03-18 00:09:36 -07:00
parent 60fed6d464
commit ce1e9c5134
7 changed files with 122 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
nginx/html/js/api.js
View File

@@ -6,10 +6,7 @@ const API = {
const headers = { 'Content-Type': 'application/json' };
if (token) headers['Authorization'] = `Bearer ${token}`;
const res = await fetch(url, {
headers,
...options,
});
const res = await fetch(url, { headers, ...options });
if (res.status === 401) {
localStorage.removeItem('token');
@@ -25,12 +22,53 @@ const API = {
return res.json();
},
get: (url) => API._fetch(url),
post: (url, data) => API._fetch(url, { method: 'POST', body: JSON.stringify(data) }),
put: (url, data) => API._fetch(url, { method: 'PUT', body: JSON.stringify(data) }),
del: (url) => API._fetch(url, { method: 'DELETE' }),
// GET requests retry up to 3 times with exponential backoff on network errors or 5xx.
// Mutating methods (POST/PUT/DELETE) are not retried — they are not idempotent.
async _fetchWithRetry(url, options = {}) {
const isReadOnly = !options.method || options.method === 'GET';
const delays = [500, 1000, 2000];
let lastErr;
const attempts = isReadOnly ? 3 : 1;
for (let i = 0; i < attempts; i++) {
try {
return await API._fetch(url, options);
} catch (err) {
lastErr = err;
// Don't retry client errors (4xx) or if it's the last attempt
const is5xx = err.message.match(/\(5\d\d\)/);
if ((!isReadOnly || (!is5xx && !err.message.includes('Failed to fetch'))) || i === attempts - 1) throw err;
await new Promise(r => setTimeout(r, delays[i]));
}
}
throw lastErr;
},
get: (url) => API._fetchWithRetry(url),
post: (url, data) => API._fetchWithRetry(url, { method: 'POST', body: JSON.stringify(data) }),
put: (url, data) => API._fetchWithRetry(url, { method: 'PUT', body: JSON.stringify(data) }),
del: (url) => API._fetchWithRetry(url, { method: 'DELETE' }),
};
// ── Offline indicator ─────────────────────────────────────────────────────────
function _setOfflineBanner(offline) {
let banner = document.getElementById('offline-banner');
if (offline) {
if (!banner) {
banner = document.createElement('div');
banner.id = 'offline-banner';
banner.textContent = 'You are offline — changes cannot be saved';
document.body.prepend(banner);
}
} else {
if (banner) banner.remove();
}
}
window.addEventListener('online', () => _setOfflineBanner(false));
window.addEventListener('offline', () => _setOfflineBanner(true));
document.addEventListener('DOMContentLoaded', () => _setOfflineBanner(!navigator.onLine));
// Show a timed success or error message inside a .message element
function showMessage(el, text, type = 'success') {
el.textContent = text;

20
nginx/html/js/auth.js
View File

@@ -87,10 +87,26 @@ function buildTimezoneOptions(selected) {
// ── Nav + settings modal ──────────────────────────────────────────────────────
function _checkSessionExpiry(user) {
const msLeft = (user.exp * 1000) - Date.now();
const hoursLeft = msLeft / (1000 * 60 * 60);
if (hoursLeft > 24) return;
const warning = document.createElement('div');
warning.id = 'session-warning';
const label = hoursLeft < 1
? 'Your session expires in less than an hour — please log out and back in.'
: `Your session expires in ${Math.floor(hoursLeft)} hours — please log out and back in.`;
warning.innerHTML = `<span>${label}</span><button title="Dismiss" onclick="this.parentElement.remove()">&#x2715;</button>`;
document.querySelector('.nav')?.insertAdjacentElement('afterend', warning);
}
function initNav() {
const user = Auth.requireAuth();
if (!user) return;
_checkSessionExpiry(user);
const nav = document.querySelector('.nav');
if (!nav) return;
@@ -201,8 +217,8 @@ async function submitPasswordChange() {
msgEl.className = 'message error visible';
return;
}
if (newPw.length < 6) {
msgEl.textContent = 'Password must be at least 6 characters';
if (newPw.length < 10) {
msgEl.textContent = 'Password must be at least 10 characters';
msgEl.className = 'message error visible';
return;
}

8
nginx/html/js/budget.js
View File

@@ -231,12 +231,14 @@ document.addEventListener('DOMContentLoaded', () => {
feedForm.addEventListener('submit', async (e) => {
e.preventDefault();
const btn = feedForm.querySelector('[type=submit]');
const data = {
date: document.getElementById('date').value,
bags: parseFloat(bagsInput.value),
price_per_bag: parseFloat(priceInput.value),
notes: document.getElementById('notes').value.trim() || null,
};
btn.disabled = true;
try {
await API.post('/api/feed', data);
showMessage(msg, 'Feed purchase saved!');
@@ -246,16 +248,20 @@ document.addEventListener('DOMContentLoaded', () => {
loadBudget();
} catch (err) {
showMessage(msg, `Error: ${err.message}`, 'error');
} finally {
btn.disabled = false;
}
});
otherForm.addEventListener('submit', async (e) => {
e.preventDefault();
const btn = otherForm.querySelector('[type=submit]');
const data = {
date: document.getElementById('other-date').value,
total: parseFloat(document.getElementById('other-total').value),
notes: document.getElementById('other-notes').value.trim() || null,
};
btn.disabled = true;
try {
await API.post('/api/other', data);
showMessage(msg, 'Purchase saved!');
@@ -264,6 +270,8 @@ document.addEventListener('DOMContentLoaded', () => {
loadBudget();
} catch (err) {
showMessage(msg, `Error: ${err.message}`, 'error');
} finally {
btn.disabled = false;
}
});

12
nginx/html/js/dashboard.js
View File

@@ -1,7 +1,7 @@
let eggChart = null;
function buildChart(eggs) {
const today = new Date();
const tz = (typeof Auth !== 'undefined' && Auth.getUser()?.timezone) || 'UTC';
const labels = [];
const data = [];
@@ -9,14 +9,12 @@ function buildChart(eggs) {
const eggMap = {};
eggs.forEach(e => { eggMap[e.date] = e.eggs; });
// Generate the last 30 days in chronological order
// Generate the last 30 days in the user's configured timezone
for (let i = 29; i >= 0; i--) {
const d = new Date(today);
const d = new Date();
d.setDate(d.getDate() - i);
const y = d.getFullYear();
const mo = String(d.getMonth() + 1).padStart(2, '0');
const dy = String(d.getDate()).padStart(2, '0');
const dateStr = `${y}-${mo}-${dy}`;
const dateStr = d.toLocaleDateString('en-CA', { timeZone: tz });
const [, mo, dy] = dateStr.split('-');
labels.push(`${mo}/${dy}`);
data.push(eggMap[dateStr] ?? 0);
}

4
nginx/html/js/flock.js
View File

@@ -97,6 +97,7 @@ document.addEventListener('DOMContentLoaded', () => {
form.addEventListener('submit', async (e) => {
e.preventDefault();
const btn = form.querySelector('[type=submit]');
const data = {
date: document.getElementById('date').value,
@@ -104,6 +105,7 @@ document.addEventListener('DOMContentLoaded', () => {
notes: document.getElementById('notes').value.trim() || null,
};
btn.disabled = true;
try {
await API.post('/api/flock', data);
showMessage(msg, 'Flock change saved!');
@@ -112,6 +114,8 @@ document.addEventListener('DOMContentLoaded', () => {
loadFlock();
} catch (err) {
showMessage(msg, `Error: ${err.message}`, 'error');
} finally {
btn.disabled = false;
}
});

4
nginx/html/js/log.js
View File

@@ -7,6 +7,7 @@ document.addEventListener('DOMContentLoaded', () => {
form.addEventListener('submit', async (e) => {
e.preventDefault();
const btn = form.querySelector('[type=submit]');
const data = {
date: document.getElementById('date').value,
@@ -14,6 +15,7 @@ document.addEventListener('DOMContentLoaded', () => {
notes: document.getElementById('notes').value.trim() || null,
};
btn.disabled = true;
try {
await API.post('/api/eggs', data);
showMessage(msg, 'Entry saved!');
@@ -22,6 +24,8 @@ document.addEventListener('DOMContentLoaded', () => {
loadHistory();
} catch (err) {
showMessage(msg, `Error: ${err.message}`, 'error');
} finally {
btn.disabled = false;
}
});
});