7656 lines
452 KiB
JavaScript
7656 lines
452 KiB
JavaScript
|
// Recurring Checklist — browser frontend.
|
|||
|
|
// Talks to the Express backend over JSON.
|
|||
|
|
// State of truth lives on the server; we just render + dispatch actions.
|
|||
|
|
|
|||
|
|
(function () {
|
|||
|
|
'use strict';
|
|||
|
|
|
|||
|
|
// ─── DOM ─────────────────────────────────────────────────────
|
|||
|
|
const itemTitleInput = document.getElementById('itemTitle');
|
|||
|
|
const itemDescriptionInput = document.getElementById('itemDescription');
|
|||
|
|
const isRecurringCheckbox = document.getElementById('isRecurring');
|
|||
|
|
const recurrenceOptions = document.getElementById('recurrenceOptions');
|
|||
|
|
// The add-task recurrence controls are built by makeRecurrenceEditor (below) into
|
|||
|
|
// #recurrenceOptions .rec-editor — same rich option set as a list's repeat editor.
|
|||
|
|
const addItemBtn = document.getElementById('addItemBtn');
|
|||
|
|
const todoList = document.getElementById('todoList');
|
|||
|
|
const doneList = document.getElementById('doneList');
|
|||
|
|
const notesList = document.getElementById('notesList');
|
|||
|
|
const feedbackList = document.getElementById('feedbackList');
|
|||
|
|
const listTabs = document.getElementById('listTabs');
|
|||
|
|
const addListBtn = document.getElementById('addListBtn');
|
|||
|
|
const addListSelect = document.getElementById('addListSelect');
|
|||
|
|
const renameListBtn = document.getElementById('renameListBtn');
|
|||
|
|
const deleteListBtn = document.getElementById('deleteListBtn');
|
|||
|
|
const exportJsonBtn = document.getElementById('exportJsonBtn');
|
|||
|
|
const importJsonBtn = document.getElementById('importJsonBtn');
|
|||
|
|
const importJsonInput = document.getElementById('importJsonInput');
|
|||
|
|
const sendDigestBtn = document.getElementById('sendDigestBtn');
|
|||
|
|
const addTaskModal = document.getElementById('addTaskModal');
|
|||
|
|
const addTaskBtn = document.getElementById('addTaskBtn');
|
|||
|
|
const addNoteBtn = document.getElementById('addNoteBtn');
|
|||
|
|
const addTaskCancel = document.getElementById('addTaskCancel');
|
|||
|
|
const listTabsToggle = document.getElementById('listTabsToggle');
|
|||
|
|
const listViewToggle = document.getElementById('listViewToggle');
|
|||
|
|
const listTree = document.getElementById('listTree');
|
|||
|
|
const activeListName = document.getElementById('activeListName');
|
|||
|
|
const treeCollapsed = {}; // tree node key -> true when collapsed
|
|||
|
|
const listMenu = document.getElementById('listMenu');
|
|||
|
|
const listMenuHandle = document.getElementById('listMenuHandle');
|
|||
|
|
const listMenuPanel = document.getElementById('listMenuPanel');
|
|||
|
|
const listMenuBackdrop = document.getElementById('listMenuBackdrop');
|
|||
|
|
const undoBtn = document.getElementById('undoBtn');
|
|||
|
|
const redoBtn = document.getElementById('redoBtn');
|
|||
|
|
|
|||
|
|
const moveItemModal = document.getElementById('moveItemModal');
|
|||
|
|
const moveItemSelect = document.getElementById('moveItemSelect');
|
|||
|
|
const moveMenu = document.getElementById('moveMenu');
|
|||
|
|
const moveMenuBackdrop = document.getElementById('moveMenuBackdrop');
|
|||
|
|
const moveItemSave = document.getElementById('moveItemSave');
|
|||
|
|
const moveItemCancel = document.getElementById('moveItemCancel');
|
|||
|
|
|
|||
|
|
const listModal = document.getElementById('listModal');
|
|||
|
|
const listModalTitle = document.getElementById('listModalTitle');
|
|||
|
|
const listModalMessage = document.getElementById('listModalMessage');
|
|||
|
|
const listModalInput = document.getElementById('listModalInput');
|
|||
|
|
const listModalTemplate = document.getElementById('listModalTemplate');
|
|||
|
|
const listModalTemplateGroup = document.getElementById('listModalTemplateGroup');
|
|||
|
|
const listModalColorGroup = document.getElementById('listModalColorGroup');
|
|||
|
|
const listModalHiddenGroup = document.getElementById('listModalHiddenGroup');
|
|||
|
|
const listModalRepeatGroup = document.getElementById('listModalRepeatGroup');
|
|||
|
|
const overviewBtn = document.getElementById('overviewBtn');
|
|||
|
|
const overviewModal = document.getElementById('overviewModal');
|
|||
|
|
const overviewClose = document.getElementById('overviewClose');
|
|||
|
|
const overviewBody = document.getElementById('overviewBody');
|
|||
|
|
const activityBtn = document.getElementById('activityBtn');
|
|||
|
|
const activityModal = document.getElementById('activityModal');
|
|||
|
|
const activityClose = document.getElementById('activityClose');
|
|||
|
|
const activityBody = document.getElementById('activityBody');
|
|||
|
|
const activitySearch = document.getElementById('activitySearch');
|
|||
|
|
const offlineBadge = document.getElementById('offlineBadge');
|
|||
|
|
const checkerChip = document.getElementById('checkerChip');
|
|||
|
|
const checkerChipName = document.getElementById('checkerChipName');
|
|||
|
|
const checkerModal = document.getElementById('checkerModal');
|
|||
|
|
const checkerSelect = document.getElementById('checkerSelect');
|
|||
|
|
const checkerAddRow = document.getElementById('checkerAddRow');
|
|||
|
|
const checkerNewName = document.getElementById('checkerNewName');
|
|||
|
|
const checkerAddBtn = document.getElementById('checkerAddBtn');
|
|||
|
|
const checkerClear = document.getElementById('checkerClear');
|
|||
|
|
const checkerClose = document.getElementById('checkerClose');
|
|||
|
|
const rosterBtn = document.getElementById('rosterBtn');
|
|||
|
|
const rosterModal = document.getElementById('rosterModal');
|
|||
|
|
const rosterBody = document.getElementById('rosterBody');
|
|||
|
|
const rosterClose = document.getElementById('rosterClose');
|
|||
|
|
const rosterSearch = document.getElementById('rosterSearch');
|
|||
|
|
let rosterTeams = []; // cached for search re-draw
|
|||
|
|
const listModalLocation = document.getElementById('listModalLocation');
|
|||
|
|
const listModalLocationGroup = document.getElementById('listModalLocationGroup');
|
|||
|
|
const listModalTeam = document.getElementById('listModalTeam');
|
|||
|
|
const listModalTeamGroup = document.getElementById('listModalTeamGroup');
|
|||
|
|
const listModalColors = document.getElementById('listModalColors');
|
|||
|
|
const listModalHidden = document.getElementById('listModalHidden');
|
|||
|
|
const listModalResetType = document.getElementById('listModalResetType');
|
|||
|
|
const listModalResetEvery = document.getElementById('listModalResetEvery');
|
|||
|
|
const listModalResetInterval = document.getElementById('listModalResetInterval');
|
|||
|
|
const listModalResetUnit = document.getElementById('listModalResetUnit');
|
|||
|
|
const listModalResetHint = document.getElementById('listModalResetHint');
|
|||
|
|
const listModalResetMonth = document.getElementById('listModalResetMonth');
|
|||
|
|
const listModalResetMonthRow = document.getElementById('listModalResetMonthRow');
|
|||
|
|
const listModalResetDow = document.getElementById('listModalResetDow');
|
|||
|
|
const listModalResetDowRow = document.getElementById('listModalResetDowRow');
|
|||
|
|
const listModalResetDom = document.getElementById('listModalResetDom');
|
|||
|
|
const listModalResetDomRow = document.getElementById('listModalResetDomRow');
|
|||
|
|
const listModalResetStartDow = document.getElementById('listModalResetStartDow');
|
|||
|
|
const listModalResetStartRow = document.getElementById('listModalResetStartRow');
|
|||
|
|
const listModalResetTimesRow = document.getElementById('listModalResetTimesRow');
|
|||
|
|
const listModalResetTimesList = document.getElementById('listModalResetTimesList');
|
|||
|
|
const listModalResetTimesAdd = document.getElementById('listModalResetTimesAdd');
|
|||
|
|
const listModalSave = document.getElementById('listModalSave');
|
|||
|
|
const listModalCancel = document.getElementById('listModalCancel');
|
|||
|
|
const resetListBtn = document.getElementById('resetListBtn');
|
|||
|
|
const duplicateListBtn = document.getElementById('duplicateListBtn');
|
|||
|
|
|
|||
|
|
const editTaskModal = document.getElementById('editTaskModal');
|
|||
|
|
const editTitle = document.getElementById('editTitle');
|
|||
|
|
const editDescription = document.getElementById('editDescription');
|
|||
|
|
const editIsRecurring = document.getElementById('editIsRecurring');
|
|||
|
|
const editRecurrenceOptions = document.getElementById('editRecurrenceOptions');
|
|||
|
|
// Edit-task recurrence controls are built by makeRecurrenceEditor into
|
|||
|
|
// #editRecurrenceOptions .rec-editor (same option set as the list repeat editor).
|
|||
|
|
const editModalSave = document.getElementById('editModalSave');
|
|||
|
|
const editModalCancel = document.getElementById('editModalCancel');
|
|||
|
|
|
|||
|
|
const userBadge = document.getElementById('userBadge');
|
|||
|
|
const userBadgeName = document.getElementById('userBadgeName');
|
|||
|
|
|
|||
|
|
const loginModal = document.getElementById('loginModal');
|
|||
|
|
const loginLocation = document.getElementById('loginLocation');
|
|||
|
|
const loginTeam = document.getElementById('loginTeam');
|
|||
|
|
const loginExecName = document.getElementById('loginExecName');
|
|||
|
|
const loginExecNameGroup = document.getElementById('loginExecNameGroup');
|
|||
|
|
const loginPassword = document.getElementById('loginPassword');
|
|||
|
|
const loginPasswordToggle = document.getElementById('loginPasswordToggle');
|
|||
|
|
const loginSubmit = document.getElementById('loginSubmit');
|
|||
|
|
const loginError = document.getElementById('loginError');
|
|||
|
|
const adminFilterLocation = document.getElementById('adminFilterLocation');
|
|||
|
|
const adminFilterTeamSel = document.getElementById('adminFilterTeam');
|
|||
|
|
|
|||
|
|
const manageUsersBtn = document.getElementById('manageUsersBtn');
|
|||
|
|
const userMgmtModal = document.getElementById('userMgmtModal');
|
|||
|
|
const userMgmtList = document.getElementById('userMgmtList');
|
|||
|
|
const userMgmtClose = document.getElementById('userMgmtClose');
|
|||
|
|
|
|||
|
|
// Equipment library (master) + photo lightbox (everyone)
|
|||
|
|
const equipMgmtBtn = document.getElementById('equipMgmtBtn');
|
|||
|
|
const equipMgmtModal = document.getElementById('equipMgmtModal');
|
|||
|
|
const equipMgmtClose = document.getElementById('equipMgmtClose');
|
|||
|
|
const equipMgmtList = document.getElementById('equipMgmtList');
|
|||
|
|
const equipMgmtError = document.getElementById('equipMgmtError');
|
|||
|
|
const equipSearch = document.getElementById('equipSearch');
|
|||
|
|
const equipName = document.getElementById('equipName');
|
|||
|
|
const equipAliases = document.getElementById('equipAliases');
|
|||
|
|
const equipImage = document.getElementById('equipImage');
|
|||
|
|
const equipNote = document.getElementById('equipNote');
|
|||
|
|
const equipSave = document.getElementById('equipSave');
|
|||
|
|
const equipCancelEdit = document.getElementById('equipCancelEdit');
|
|||
|
|
const equipFormTitle = document.getElementById('equipFormTitle');
|
|||
|
|
const equipAddSection = document.getElementById('equipAddSection'); // collapsible add-form
|
|||
|
|
const equipAddToggle = document.getElementById('equipAddToggle');
|
|||
|
|
const equipFile = document.getElementById('equipFile');
|
|||
|
|
const equipCamBtn = document.getElementById('equipCamBtn');
|
|||
|
|
const equipCamModal = document.getElementById('equipCamModal');
|
|||
|
|
const equipCamVideo = document.getElementById('equipCamVideo');
|
|||
|
|
const equipCamCapture = document.getElementById('equipCamCapture');
|
|||
|
|
const equipCamSwitch = document.getElementById('equipCamSwitch');
|
|||
|
|
const equipCamCancel = document.getElementById('equipCamCancel');
|
|||
|
|
const equipCamError = document.getElementById('equipCamError');
|
|||
|
|
const equipUploadStatus = document.getElementById('equipUploadStatus');
|
|||
|
|
const equipLocRow = document.getElementById('equipLocRow');
|
|||
|
|
const equipTeamRow = document.getElementById('equipTeamRow');
|
|||
|
|
const equipScopeHelp = document.getElementById('equipScopeHelp');
|
|||
|
|
const equipModal = document.getElementById('equipModal');
|
|||
|
|
const equipModalName = document.getElementById('equipModalName');
|
|||
|
|
const equipModalImg = document.getElementById('equipModalImg');
|
|||
|
|
const equipModalNote = document.getElementById('equipModalNote');
|
|||
|
|
const equipModalClose = document.getElementById('equipModalClose');
|
|||
|
|
const equipStage = document.getElementById('equipStage');
|
|||
|
|
const equipZoomIn = document.getElementById('equipZoomIn');
|
|||
|
|
const equipZoomOut = document.getElementById('equipZoomOut');
|
|||
|
|
const equipZoomReset = document.getElementById('equipZoomReset');
|
|||
|
|
const equipZoomHint = document.getElementById('equipZoomHint');
|
|||
|
|
const equipPrev = document.getElementById('equipPrev'); // lightbox gallery nav
|
|||
|
|
const equipNext = document.getElementById('equipNext');
|
|||
|
|
const equipThumbs = document.getElementById('equipThumbs');
|
|||
|
|
const equipCaption = document.getElementById('equipCaption');
|
|||
|
|
const equipPhotos = document.getElementById('equipPhotos'); // manager multi-photo editor
|
|||
|
|
const equipAddUrl = document.getElementById('equipAddUrl');
|
|||
|
|
const equipDocs = document.getElementById('equipDocs'); // manager attached-documents editor
|
|||
|
|
const equipDocFile = document.getElementById('equipDocFile');
|
|||
|
|
const equipDocUrl = document.getElementById('equipDocUrl');
|
|||
|
|
const equipDocAdd = document.getElementById('equipDocAdd');
|
|||
|
|
let equipEditId = null; // id being edited in the manager (null = add mode)
|
|||
|
|
let equipFormPhotos = []; // [{url,caption}] being edited in the manager
|
|||
|
|
let equipFormDocs = []; // [{url,name}] attached documents being edited
|
|||
|
|
let equipItems = {}; // cached equipment items for the manager list
|
|||
|
|
const equipTreeCollapsed = {}; // location group key -> true when collapsed
|
|||
|
|
const userMgmtError = document.getElementById('userMgmtError');
|
|||
|
|
const newUserLocation = document.getElementById('newUserLocation');
|
|||
|
|
const newUserTeam = document.getElementById('newUserTeam');
|
|||
|
|
const newUserPassword = document.getElementById('newUserPassword');
|
|||
|
|
const newUserEmails = document.getElementById('newUserEmails');
|
|||
|
|
const newUserCreate = document.getElementById('newUserCreate');
|
|||
|
|
const directoryEditor = document.getElementById('directoryEditor');
|
|||
|
|
const execList = document.getElementById('execList');
|
|||
|
|
const userMgmtSearch = document.getElementById('userMgmtSearch');
|
|||
|
|
const execSearch = document.getElementById('execSearch');
|
|||
|
|
const newExecName = document.getElementById('newExecName');
|
|||
|
|
const newExecPassword = document.getElementById('newExecPassword');
|
|||
|
|
const newExecCreate = document.getElementById('newExecCreate');
|
|||
|
|
|
|||
|
|
const toast = document.getElementById('toast');
|
|||
|
|
|
|||
|
|
// ─── State ───────────────────────────────────────────────────
|
|||
|
|
const FALLBACK_LIST = { id: 'new-list', name: 'New List' };
|
|||
|
|
let checklistData = { lists: [], selectedListId: null };
|
|||
|
|
let addTargetListId = null;
|
|||
|
|
let sessionToken = localStorage.getItem('checklist:token') || '';
|
|||
|
|
let currentUser = null; // {username, displayName, location, role}
|
|||
|
|
let userName = ''; // kept as alias for display (= currentUser.displayName)
|
|||
|
|
let activeListId = localStorage.getItem('checklist:activeListId') || null;
|
|||
|
|
let modalMode = null;
|
|||
|
|
let modalTargetId = null;
|
|||
|
|
let editingTaskId = null;
|
|||
|
|
let moveModalItemId = null;
|
|||
|
|
let isSaving = false;
|
|||
|
|
let pollTimer = null;
|
|||
|
|
let adminFilterLoc = ''; // master-admin filter: location ('' = all)
|
|||
|
|
let adminFilterTeam = ''; // master-admin filter: team ('' = all)
|
|||
|
|
let listModalColorValue = ''; // chosen color in the Add/Edit List modal
|
|||
|
|
let mgmtUsers = []; // cached team logins for the Manage Access list (sort/group/filter)
|
|||
|
|
let mgmtExecs = []; // cached executives for the Manage Access list (sort/filter)
|
|||
|
|
|
|||
|
|
function isAdmin() { return !!(currentUser && currentUser.role === 'admin'); }
|
|||
|
|
// Master admin = a role:'admin' account with no team (the env "admin" login).
|
|||
|
|
// Team admins are role:'admin' WITH a team and only manage their own lists.
|
|||
|
|
function isMasterAdmin() { return !!(currentUser && currentUser.role === 'admin' && !(currentUser.team && currentUser.team.trim())); }
|
|||
|
|
// Editors get the editing UI: team admins, the master/owner, and named executives.
|
|||
|
|
function isEditor() { return isAdmin() || !!(currentUser && currentUser.role === 'executive'); }
|
|||
|
|
|
|||
|
|
// ─── API ─────────────────────────────────────────────────────
|
|||
|
|
function authHeaders() {
|
|||
|
|
return sessionToken ? { 'Authorization': 'Bearer ' + sessionToken } : {};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function apiFetch(url, opts) {
|
|||
|
|
const o = Object.assign({}, opts || {});
|
|||
|
|
o.headers = Object.assign({}, o.headers || {}, authHeaders());
|
|||
|
|
if (o.body && !o.headers['Content-Type']) o.headers['Content-Type'] = 'application/json';
|
|||
|
|
const res = await fetch(url, o);
|
|||
|
|
if (res.status === 401) {
|
|||
|
|
handleSessionExpired();
|
|||
|
|
throw new Error('Session expired');
|
|||
|
|
}
|
|||
|
|
if (!res.ok) {
|
|||
|
|
let msg = `HTTP ${res.status}`;
|
|||
|
|
try { const j = await res.json(); if (j && j.error) msg = j.error; } catch (_) {
|
|||
|
|
try { const t = await res.text(); if (t) msg = t; } catch (_) {}
|
|||
|
|
}
|
|||
|
|
throw new Error(msg);
|
|||
|
|
}
|
|||
|
|
return res.json();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function apiGet(url) { return apiFetch(url, { method: 'GET' }); }
|
|||
|
|
function apiPost(url, body) { return apiFetch(url, { method: 'POST', body: JSON.stringify(body || {}) }); }
|
|||
|
|
function apiPut(url, body) { return apiFetch(url, { method: 'PUT', body: JSON.stringify(body || {}) }); }
|
|||
|
|
function apiDelete(url) { return apiFetch(url, { method: 'DELETE' }); }
|
|||
|
|
|
|||
|
|
// ── Self-update after a deploy ───────────────────────────────────────
|
|||
|
|
// This app is a single page: signing out and back in never reloads it, so a tab left open on a
|
|||
|
|
// wall tablet keeps running whatever JS it loaded — new features are simply absent there until
|
|||
|
|
// someone manually refreshes. The server stamps each /api/state poll with the build it serves;
|
|||
|
|
// when that changes we reload, but only at a SAFE moment: never mid-typing, never with a dialog
|
|||
|
|
// open, never mid-animation, and never while check-offs are still queued for sync. If it isn't
|
|||
|
|
// safe we show a banner and let the user pick the moment.
|
|||
|
|
let bootBuildId = null;
|
|||
|
|
function updateSafeNow() {
|
|||
|
|
const ae = document.activeElement;
|
|||
|
|
if (ae && (ae.tagName === 'INPUT' || ae.tagName === 'TEXTAREA' || ae.tagName === 'SELECT' || ae.isContentEditable)) return false;
|
|||
|
|
// Any dialog up? Test COMPUTED display, not the inline-style string — an inline
|
|||
|
|
// `align-items: flex-start` would false-match a naive [style*="flex"] check.
|
|||
|
|
const dialogs = document.querySelectorAll('.modal-overlay, .firstrun, .kb-cheat, .search-overlay');
|
|||
|
|
for (let i = 0; i < dialogs.length; i++) {
|
|||
|
|
if (getComputedStyle(dialogs[i]).display !== 'none') return false;
|
|||
|
|
}
|
|||
|
|
if (document.querySelector('.list-menu.open, .move-menu.open')) return false;
|
|||
|
|
if (Date.now() < animatingUntil) return false;
|
|||
|
|
if (loadPending().length) return false; // let queued check-offs reach the server first
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
function showUpdateBanner() {
|
|||
|
|
if (document.getElementById('updateBanner')) return;
|
|||
|
|
const b = document.createElement('div');
|
|||
|
|
b.id = 'updateBanner';
|
|||
|
|
b.className = 'update-banner';
|
|||
|
|
b.innerHTML = '<span>A new version is available.</span><button type="button" class="btn btn-primary btn-small">Refresh</button>';
|
|||
|
|
b.querySelector('button').addEventListener('click', () => location.reload());
|
|||
|
|
document.body.appendChild(b);
|
|||
|
|
}
|
|||
|
|
function noteServerBuild(id) {
|
|||
|
|
if (!id) return;
|
|||
|
|
if (!bootBuildId) { bootBuildId = id; return; } // first poll of this tab = the build we booted
|
|||
|
|
if (id === bootBuildId) return;
|
|||
|
|
if (updateSafeNow()) location.reload();
|
|||
|
|
else showUpdateBanner(); // retried on the next poll; the banner is the manual escape hatch
|
|||
|
|
}
|
|||
|
|
async function refreshState({ showToastOnError = true } = {}) {
|
|||
|
|
try {
|
|||
|
|
const incoming = await apiGet('/api/state');
|
|||
|
|
// Preserve the user's currently-selected tab across polls.
|
|||
|
|
// The server's selectedListId is only used as a fallback when the client has no choice yet.
|
|||
|
|
checklistData = incoming;
|
|||
|
|
noteServerBuild(incoming.buildId); // deploy landed? refresh this tab (see below)
|
|||
|
|
reapplyPendingChecks(); // keep optimistic, not-yet-synced check-offs visible
|
|||
|
|
pruneCollapseState(); // drop overrides for deleted items (no-op on an empty poll)
|
|||
|
|
pruneColFoldState(); // drop column folds for deleted lists (same empty-poll guard)
|
|||
|
|
if (incoming.directory) renderDirectory(incoming.directory);
|
|||
|
|
if (!addTargetListId || !checklistData.lists.find((l) => l.id === addTargetListId)) {
|
|||
|
|
addTargetListId = checklistData.selectedListId || (checklistData.lists[0] && checklistData.lists[0].id) || null;
|
|||
|
|
}
|
|||
|
|
// Don't rebuild the columns while a check animation is playing (the optimistic DOM
|
|||
|
|
// already reflects this state) — defer the reconcile to just after it settles. But never
|
|||
|
|
// starve it: a sustained tapping burst keeps pushing animatingUntil out, so hard-cap the
|
|||
|
|
// total deferral so a teammate's change can't stay hidden longer than ~1.6s.
|
|||
|
|
if (Date.now() < animatingUntil) {
|
|||
|
|
if (!firstDeferAt) firstDeferAt = Date.now();
|
|||
|
|
if (Date.now() - firstDeferAt > 1600) renderLists(); // cap reached → reconcile now
|
|||
|
|
else renderLater();
|
|||
|
|
} else renderLists();
|
|||
|
|
// Live-refresh the Overview while it's open (works for execs too — this poll runs for
|
|||
|
|
// every role), so progress + recent activity update without closing/reopening it.
|
|||
|
|
if (overviewModal && getComputedStyle(overviewModal).display !== 'none') {
|
|||
|
|
const keep = overviewBody ? overviewBody.scrollTop : 0;
|
|||
|
|
drawOverview();
|
|||
|
|
if (overviewBody) overviewBody.scrollTop = keep;
|
|||
|
|
}
|
|||
|
|
// Keep the incident badge + any open incident views in sync across polls.
|
|||
|
|
updateIncidentsBadge();
|
|||
|
|
if (incidentsModal && incidentsModal.style.display === 'flex') drawIncidents();
|
|||
|
|
if (reliabilityModal && reliabilityModal.style.display === 'flex') drawReliability();
|
|||
|
|
if (equipModal && equipModal.style.display === 'flex' && equipGalleryEquipId) renderEquipIssues(equipGalleryEquipId);
|
|||
|
|
} catch (err) {
|
|||
|
|
if (showToastOnError) showToast('Failed to load state: ' + err.message, 'error');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function pushAdminState(next) {
|
|||
|
|
if (!isMasterAdmin()) {
|
|||
|
|
showToast('Master admin only', 'error');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
const before = applyingHistory ? null : snapshotStructure(checklistData);
|
|||
|
|
isSaving = true;
|
|||
|
|
try {
|
|||
|
|
await apiPost('/api/admin/state', { state: next });
|
|||
|
|
checklistData = Object.assign({}, checklistData, {
|
|||
|
|
lists: next.lists,
|
|||
|
|
selectedListId: next.selectedListId,
|
|||
|
|
checks: next.checks || checklistData.checks
|
|||
|
|
});
|
|||
|
|
renderLists();
|
|||
|
|
if (before) recordHistory({ type: 'structure', before: before, after: snapshotStructure(checklistData) });
|
|||
|
|
return true;
|
|||
|
|
} catch (err) {
|
|||
|
|
showToast('Save failed: ' + err.message, 'error');
|
|||
|
|
return false;
|
|||
|
|
} finally {
|
|||
|
|
isSaving = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Undo / redo (full-admin, this session) ─────────────────────────
|
|||
|
|
// Covers the editor's own actions: structural edits funnel through
|
|||
|
|
// pushAdminState (add/edit/move/delete/duplicate tasks, add/rename/delete
|
|||
|
|
// lists, drag-reorder, duplicate list) and the editor's own check/uncheck.
|
|||
|
|
// History is in-memory (cleared on reload) and per-this-browser, so it never
|
|||
|
|
// reaches into a teammate's work. Crucially, restoring a structural snapshot
|
|||
|
|
// keeps the CURRENT live checks (we swap only the lists) so undoing an edit
|
|||
|
|
// can never wipe checkmarks a teammate just made during a service.
|
|||
|
|
// Deliberately NOT undoable: Reset List and Import JSON (confirmed,
|
|||
|
|
// bulk/destructive actions with their own warning).
|
|||
|
|
const HISTORY_LIMIT = 60;
|
|||
|
|
let undoStack = [];
|
|||
|
|
let redoStack = [];
|
|||
|
|
let applyingHistory = false;
|
|||
|
|
function snapshotStructure(d) {
|
|||
|
|
return {
|
|||
|
|
lists: JSON.parse(JSON.stringify(d && d.lists ? d.lists : [])),
|
|||
|
|
selectedListId: d ? d.selectedListId : null
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
function recordHistory(entry) {
|
|||
|
|
undoStack.push(entry);
|
|||
|
|
if (undoStack.length > HISTORY_LIMIT) undoStack.shift();
|
|||
|
|
redoStack = [];
|
|||
|
|
updateUndoUI();
|
|||
|
|
}
|
|||
|
|
function clearHistory() {
|
|||
|
|
undoStack = [];
|
|||
|
|
redoStack = [];
|
|||
|
|
updateUndoUI();
|
|||
|
|
}
|
|||
|
|
function updateUndoUI() {
|
|||
|
|
if (undoBtn) undoBtn.disabled = !undoStack.length;
|
|||
|
|
if (redoBtn) redoBtn.disabled = !redoStack.length;
|
|||
|
|
}
|
|||
|
|
async function applyHistoryEntry(entry, dir) {
|
|||
|
|
if (entry.type === 'structure') {
|
|||
|
|
const target = dir === 'undo' ? entry.before : entry.after;
|
|||
|
|
await pushAdminState({
|
|||
|
|
lists: JSON.parse(JSON.stringify(target.lists)),
|
|||
|
|
selectedListId: target.selectedListId,
|
|||
|
|
checks: checklistData.checks // keep live checks — never clobber a teammate's
|
|||
|
|
});
|
|||
|
|
} else if (entry.type === 'scoped-ops') {
|
|||
|
|
// Executive / team-admin structural undo: apply id-targeted ops for ONLY the
|
|||
|
|
// list(s) this action changed (set = that list's snapshot, or null to delete).
|
|||
|
|
// Keeps live checks; never touches a co-owner's other lists.
|
|||
|
|
const ops = entry.ops.map((op) => ({ id: op.id, set: (dir === 'undo' ? op.before : op.after) }));
|
|||
|
|
await apiScopedRestore(ops);
|
|||
|
|
await refreshState({ showToastOnError: false });
|
|||
|
|
} else if (entry.type === 'check') {
|
|||
|
|
const val = dir === 'undo' ? entry.before : entry.after;
|
|||
|
|
pushCheck(entry.listId, entry.itemId, val);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
async function undo() {
|
|||
|
|
if (!isEditor() || applyingHistory || !undoStack.length) return;
|
|||
|
|
playOnce(undoBtn, 'nudge');
|
|||
|
|
const entry = undoStack.pop();
|
|||
|
|
applyingHistory = true;
|
|||
|
|
try {
|
|||
|
|
await applyHistoryEntry(entry, 'undo');
|
|||
|
|
redoStack.push(entry);
|
|||
|
|
} catch (err) {
|
|||
|
|
undoStack.push(entry); // restore — keep it undoable, never silently drop a step
|
|||
|
|
showToast('Undo failed: ' + err.message, 'error');
|
|||
|
|
} finally {
|
|||
|
|
applyingHistory = false;
|
|||
|
|
updateUndoUI();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
async function redo() {
|
|||
|
|
if (!isEditor() || applyingHistory || !redoStack.length) return;
|
|||
|
|
playOnce(redoBtn, 'nudge');
|
|||
|
|
const entry = redoStack.pop();
|
|||
|
|
applyingHistory = true;
|
|||
|
|
try {
|
|||
|
|
await applyHistoryEntry(entry, 'redo');
|
|||
|
|
undoStack.push(entry);
|
|||
|
|
} catch (err) {
|
|||
|
|
redoStack.push(entry);
|
|||
|
|
showToast('Redo failed: ' + err.message, 'error');
|
|||
|
|
} finally {
|
|||
|
|
applyingHistory = false;
|
|||
|
|
updateUndoUI();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Offline-tolerant check-offs ────────────────────────────────────
|
|||
|
|
// A check is applied locally right away (optimistic), queued in localStorage,
|
|||
|
|
// and flushed to the server. If the network is down the queue persists and
|
|||
|
|
// syncs on reconnect — so a flaky venue wifi never blocks setup.
|
|||
|
|
const PENDING_KEY = 'checklist:pendingChecks';
|
|||
|
|
let isFlushing = false;
|
|||
|
|
function loadPending() { try { return JSON.parse(localStorage.getItem(PENDING_KEY) || '[]'); } catch (_) { return []; } }
|
|||
|
|
function savePending(q) { try { localStorage.setItem(PENDING_KEY, JSON.stringify(q)); } catch (_) {} }
|
|||
|
|
function enqueueCheck(op) {
|
|||
|
|
let q = loadPending();
|
|||
|
|
if (op.index != null) {
|
|||
|
|
// One entry per (list,item,index): a later toggle supersedes an earlier queued one.
|
|||
|
|
// NB: index 0 is valid — compare with != null, never truthiness.
|
|||
|
|
q = q.filter((p) => !(p.listId === op.listId && p.itemId === op.itemId && p.index === op.index));
|
|||
|
|
q.push({ listId: op.listId, itemId: op.itemId, index: op.index, checked: op.checked, by: op.by || '' });
|
|||
|
|
} else {
|
|||
|
|
// A parent toggle supersedes any queued op (parent + checkbox) for that item.
|
|||
|
|
q = q.filter((p) => !(p.listId === op.listId && p.itemId === op.itemId));
|
|||
|
|
q.push({ listId: op.listId, itemId: op.itemId, completed: op.completed, by: op.by || '' });
|
|||
|
|
}
|
|||
|
|
savePending(q);
|
|||
|
|
}
|
|||
|
|
// Mirror the server's check write into the local state so the UI reflects it now.
|
|||
|
|
function applyCheckLocally(listId, itemId, completed, by) {
|
|||
|
|
const key = readScopeKey(listId);
|
|||
|
|
if (!key) return;
|
|||
|
|
checklistData.checks = checklistData.checks || {};
|
|||
|
|
checklistData.checks[key] = checklistData.checks[key] || {};
|
|||
|
|
checklistData.checks[key][listId] = checklistData.checks[key][listId] || {};
|
|||
|
|
if (completed) {
|
|||
|
|
checklistData.checks[key][listId][itemId] = {
|
|||
|
|
completed: true, completedDate: new Date().toISOString(),
|
|||
|
|
completedBy: by || (currentUser && (currentUser.displayName || currentUser.username)) || '', pending: true
|
|||
|
|
};
|
|||
|
|
} else {
|
|||
|
|
delete checklistData.checks[key][listId][itemId];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Mirror a checkbox toggle into local state (optimistic), then re-derive the parent's
|
|||
|
|
// completion the same way the server will, so the card moves the instant you tap.
|
|||
|
|
function applyTaskCheckLocally(listId, itemId, index, checked, by) {
|
|||
|
|
const key = readScopeKey(listId);
|
|||
|
|
if (!key) return;
|
|||
|
|
checklistData.checks = checklistData.checks || {};
|
|||
|
|
checklistData.checks[key] = checklistData.checks[key] || {};
|
|||
|
|
checklistData.checks[key][listId] = checklistData.checks[key][listId] || {};
|
|||
|
|
const rec = checklistData.checks[key][listId][itemId] || {};
|
|||
|
|
rec.subChecks = rec.subChecks || {};
|
|||
|
|
const who = by || (currentUser && (currentUser.displayName || currentUser.username)) || '';
|
|||
|
|
if (checked) rec.subChecks[String(index)] = { by: who, at: new Date().toISOString() };
|
|||
|
|
else delete rec.subChecks[String(index)];
|
|||
|
|
const total = itemTaskCount(listId, itemId);
|
|||
|
|
const doneCount = Object.keys(rec.subChecks).filter((k) => { const n = Number(k); return Number.isInteger(n) && n >= 0 && n < total; }).length;
|
|||
|
|
const allDone = total > 0 && doneCount === total;
|
|||
|
|
if (allDone) {
|
|||
|
|
rec.completed = true;
|
|||
|
|
rec.completedDate = rec.completedDate || new Date().toISOString();
|
|||
|
|
rec.completedBy = rec.completedBy || who;
|
|||
|
|
rec.pending = true;
|
|||
|
|
} else {
|
|||
|
|
rec.completed = false; delete rec.completedDate; delete rec.completedBy;
|
|||
|
|
}
|
|||
|
|
if (!rec.completed && Object.keys(rec.subChecks).length === 0) delete checklistData.checks[key][listId][itemId];
|
|||
|
|
else checklistData.checks[key][listId][itemId] = rec;
|
|||
|
|
}
|
|||
|
|
// Re-apply still-pending check-offs on top of fresh server state (so a poll
|
|||
|
|
// that lands before sync doesn't visibly "uncheck" what the user just tapped).
|
|||
|
|
function reapplyPendingChecks() {
|
|||
|
|
loadPending().forEach((op) => {
|
|||
|
|
if (op.index != null) applyTaskCheckLocally(op.listId, op.itemId, op.index, op.checked, op.by);
|
|||
|
|
else applyCheckLocally(op.listId, op.itemId, op.completed, op.by);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
function updateOfflineUI() {
|
|||
|
|
if (!offlineBadge) return;
|
|||
|
|
const pending = loadPending().length;
|
|||
|
|
const offline = !navigator.onLine;
|
|||
|
|
if (offline || pending) {
|
|||
|
|
offlineBadge.textContent = offline
|
|||
|
|
? (pending ? `📴 Offline — ${pending} change${pending === 1 ? '' : 's'} will sync` : '📴 Offline')
|
|||
|
|
: `Syncing ${pending} change${pending === 1 ? '' : 's'}…`;
|
|||
|
|
offlineBadge.classList.toggle('is-offline', offline);
|
|||
|
|
offlineBadge.style.display = '';
|
|||
|
|
} else {
|
|||
|
|
offlineBadge.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
async function flushPendingChecks() {
|
|||
|
|
if (isFlushing || !sessionToken) return;
|
|||
|
|
isFlushing = true;
|
|||
|
|
try {
|
|||
|
|
while (loadPending().length) {
|
|||
|
|
const op = loadPending()[0];
|
|||
|
|
try {
|
|||
|
|
if (op.index != null) {
|
|||
|
|
await apiPost('/api/check/sub', { listId: op.listId, itemId: op.itemId, index: op.index, checked: op.checked, by: op.by || '' });
|
|||
|
|
} else {
|
|||
|
|
await apiPost('/api/check', { listId: op.listId, itemId: op.itemId, completed: op.completed, by: op.by || '' });
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
break; // offline or session issue — keep the queue, retry later
|
|||
|
|
}
|
|||
|
|
// Drop exactly the op we sent (a newer toggle for the same target stays).
|
|||
|
|
savePending(loadPending().filter((p) => op.index != null
|
|||
|
|
? !(p.listId === op.listId && p.itemId === op.itemId && p.index === op.index && p.checked === op.checked)
|
|||
|
|
: !(p.listId === op.listId && p.itemId === op.itemId && p.completed === op.completed)));
|
|||
|
|
updateOfflineUI();
|
|||
|
|
}
|
|||
|
|
} finally {
|
|||
|
|
isFlushing = false;
|
|||
|
|
updateOfflineUI();
|
|||
|
|
// Fully drained + online → reconcile with the server's authoritative state.
|
|||
|
|
if (!loadPending().length && navigator.onLine && sessionToken) {
|
|||
|
|
refreshState({ showToastOnError: false });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function pushCheck(listId, itemId, completed) {
|
|||
|
|
// On a shared team login, attribute to the tapped person (if set).
|
|||
|
|
const by = (currentUser && currentUser.role === 'user' && activePerson) ? activePerson : '';
|
|||
|
|
applyCheckLocally(listId, itemId, completed, by); // optimistic — instant feedback
|
|||
|
|
enqueueCheck({ listId, itemId, completed, by });
|
|||
|
|
renderLists();
|
|||
|
|
updateOfflineUI();
|
|||
|
|
flushPendingChecks();
|
|||
|
|
}
|
|||
|
|
function pushTaskCheck(listId, itemId, index, checked) {
|
|||
|
|
const by = (currentUser && currentUser.role === 'user' && activePerson) ? activePerson : '';
|
|||
|
|
const wasDone = isCheckedForMe(listId, itemId);
|
|||
|
|
applyTaskCheckLocally(listId, itemId, index, checked, by); // optimistic
|
|||
|
|
// Only fly the card between columns when the LAST/first step flips completion.
|
|||
|
|
if (isCheckedForMe(listId, itemId) !== wasDone) {
|
|||
|
|
justMovedItemId = itemId;
|
|||
|
|
clearCollapseOverride(itemId); // fresh completion force-collapses; reopen expands
|
|||
|
|
}
|
|||
|
|
enqueueCheck({ listId, itemId, index, checked, by });
|
|||
|
|
renderLists();
|
|||
|
|
updateOfflineUI();
|
|||
|
|
flushPendingChecks();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── "Tap your name" (shared team logins only) ──────────────────────
|
|||
|
|
// ─── Per-user, per-device collapse state (NEVER synced to the server) ──────────
|
|||
|
|
// Which task cards THIS account has manually collapsed/expanded, stored as DEVIATIONS
|
|||
|
|
// from the default (Done → collapsed, To Do → expanded). Keyed by username like
|
|||
|
|
// checkerKey(), so it lives only in this browser + this login and can't affect anyone
|
|||
|
|
// else viewing the same shared list. Each entry is { s:'collapsed'|'expanded', d:<isDone
|
|||
|
|
// when set> } so an override applies ONLY within the completion-state it was made in —
|
|||
|
|
// a reset back to To Do (or a fresh completion) re-derives the default for free.
|
|||
|
|
let collapseState = {};
|
|||
|
|
let justSwiped = 0; // ms of the last horizontal list-swipe → guards a stray tap→collapse
|
|||
|
|
function collapseKey() { return 'checklist:collapse:' + (currentUser ? currentUser.username : ''); }
|
|||
|
|
function loadCollapseState() {
|
|||
|
|
try { const raw = currentUser ? localStorage.getItem(collapseKey()) : null; collapseState = raw ? (JSON.parse(raw) || {}) : {}; }
|
|||
|
|
catch (_) { collapseState = {}; }
|
|||
|
|
if (!collapseState || typeof collapseState !== 'object') collapseState = {};
|
|||
|
|
}
|
|||
|
|
function saveCollapseState() { if (!currentUser) return; try { localStorage.setItem(collapseKey(), JSON.stringify(collapseState)); } catch (_) {} }
|
|||
|
|
function isCollapsed(itemId, isDone) {
|
|||
|
|
const o = collapseState[itemId];
|
|||
|
|
if (o && typeof o === 'object' && o.d === !!isDone) return o.s === 'collapsed';
|
|||
|
|
return !!isDone; // default: Done collapsed, To Do expanded
|
|||
|
|
}
|
|||
|
|
function setCollapseOverride(itemId, collapse, isDone) {
|
|||
|
|
if (!!collapse === !!isDone) delete collapseState[itemId]; // equals the default → store no deviation
|
|||
|
|
else collapseState[itemId] = { s: collapse ? 'collapsed' : 'expanded', d: !!isDone };
|
|||
|
|
saveCollapseState();
|
|||
|
|
}
|
|||
|
|
// Drop any manual collapse override for an item. Called when a task moves between To Do
|
|||
|
|
// and Done (a completion/uncompletion) so each fresh completion FORCE-collapses and each
|
|||
|
|
// reopen expands — a peek-expand of a Done card no longer survives a re-completion.
|
|||
|
|
function clearCollapseOverride(itemId) {
|
|||
|
|
if (collapseState[itemId] != null) { delete collapseState[itemId]; saveCollapseState(); }
|
|||
|
|
}
|
|||
|
|
// Drop overrides for items that no longer exist. NEVER run on an empty dataset — a
|
|||
|
|
// transient no-lists poll would otherwise wipe the whole saved layout.
|
|||
|
|
function pruneCollapseState() {
|
|||
|
|
if (!currentUser || !Array.isArray(checklistData.lists) || checklistData.lists.length === 0) return;
|
|||
|
|
const live = new Set();
|
|||
|
|
checklistData.lists.forEach((l) => (l.items || []).forEach((i) => live.add(i.id)));
|
|||
|
|
let changed = false;
|
|||
|
|
Object.keys(collapseState).forEach((id) => { if (!live.has(id)) { delete collapseState[id]; changed = true; } });
|
|||
|
|
if (changed) saveCollapseState();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ── Fold a WHOLE column (the To Do / Done / Notes list) to just its header ──
|
|||
|
|
// Same contract as task collapse: client-only, per-user (every role gets it),
|
|||
|
|
// never synced — folding your Done list can't hide it for a teammate. Stored
|
|||
|
|
// sparsely: only folded entries exist, keyed "<listId>::<col>"; default open.
|
|||
|
|
let colFoldState = {};
|
|||
|
|
function colFoldKey() { return 'checklist:colfold:' + (currentUser ? currentUser.username : ''); }
|
|||
|
|
function loadColFoldState() {
|
|||
|
|
try { const raw = currentUser ? localStorage.getItem(colFoldKey()) : null; colFoldState = raw ? (JSON.parse(raw) || {}) : {}; }
|
|||
|
|
catch (_) { colFoldState = {}; }
|
|||
|
|
if (!colFoldState || typeof colFoldState !== 'object') colFoldState = {};
|
|||
|
|
}
|
|||
|
|
function saveColFoldState() { if (!currentUser) return; try { localStorage.setItem(colFoldKey(), JSON.stringify(colFoldState)); } catch (_) {} }
|
|||
|
|
function isColFolded(listId, colKey) { return !!colFoldState[listId + '::' + colKey]; }
|
|||
|
|
function setColFolded(listId, colKey, fold) {
|
|||
|
|
const k = listId + '::' + colKey;
|
|||
|
|
if (fold) colFoldState[k] = 1; else delete colFoldState[k]; // deviations only
|
|||
|
|
saveColFoldState();
|
|||
|
|
}
|
|||
|
|
// Drop folds for lists that no longer exist. NEVER on an empty dataset — a
|
|||
|
|
// transient no-lists poll would otherwise wipe the whole saved layout.
|
|||
|
|
function pruneColFoldState() {
|
|||
|
|
if (!currentUser || !Array.isArray(checklistData.lists) || checklistData.lists.length === 0) return;
|
|||
|
|
const live = new Set(checklistData.lists.map((l) => l.id));
|
|||
|
|
let changed = false;
|
|||
|
|
Object.keys(colFoldState).forEach((k) => { if (!live.has(k.split('::')[0])) { delete colFoldState[k]; changed = true; } });
|
|||
|
|
if (changed) saveColFoldState();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let activePerson = '';
|
|||
|
|
function checkerKey() { return 'checklist:checker:' + (currentUser ? currentUser.username : ''); }
|
|||
|
|
function loadActivePerson() {
|
|||
|
|
try { activePerson = (currentUser && currentUser.role === 'user') ? (localStorage.getItem(checkerKey()) || '') : ''; }
|
|||
|
|
catch (_) { activePerson = ''; }
|
|||
|
|
updateCheckerChip();
|
|||
|
|
}
|
|||
|
|
function setActivePerson(name) {
|
|||
|
|
activePerson = name || '';
|
|||
|
|
try { if (activePerson) localStorage.setItem(checkerKey(), activePerson); else localStorage.removeItem(checkerKey()); } catch (_) {}
|
|||
|
|
updateCheckerChip();
|
|||
|
|
}
|
|||
|
|
function updateCheckerChip() {
|
|||
|
|
if (!checkerChipName || !checkerChip) return;
|
|||
|
|
checkerChipName.textContent = activePerson || 'Who’s checking?';
|
|||
|
|
checkerChip.classList.toggle('is-set', !!activePerson);
|
|||
|
|
}
|
|||
|
|
// Fill the picker dropdown: a placeholder, "+ Add a name", then the roster.
|
|||
|
|
function populateCheckerSelect() {
|
|||
|
|
if (!checkerSelect) return;
|
|||
|
|
const roster = (checklistData && checklistData.myRoster) || [];
|
|||
|
|
checkerSelect.innerHTML =
|
|||
|
|
'<option value="">— pick your name —</option>' +
|
|||
|
|
'<option value="__add__">＋ Add a name…</option>' +
|
|||
|
|
roster.map((n) => `<option value="${escapeAttr(n)}">${escapeHtml(n)}</option>`).join('');
|
|||
|
|
checkerSelect.value = (activePerson && roster.indexOf(activePerson) >= 0) ? activePerson : '';
|
|||
|
|
}
|
|||
|
|
function openCheckerModal() {
|
|||
|
|
if (!checkerModal) return;
|
|||
|
|
populateCheckerSelect();
|
|||
|
|
if (checkerAddRow) checkerAddRow.style.display = 'none';
|
|||
|
|
if (checkerNewName) checkerNewName.value = '';
|
|||
|
|
if (checkerClear) checkerClear.style.display = activePerson ? '' : 'none';
|
|||
|
|
checkerModal.style.display = 'flex';
|
|||
|
|
}
|
|||
|
|
function onCheckerSelectChange() {
|
|||
|
|
const v = checkerSelect.value;
|
|||
|
|
if (v === '__add__') {
|
|||
|
|
if (checkerAddRow) { checkerAddRow.style.display = 'flex'; }
|
|||
|
|
if (checkerNewName) { checkerNewName.value = ''; checkerNewName.focus(); }
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (checkerAddRow) checkerAddRow.style.display = 'none';
|
|||
|
|
if (v) { setActivePerson(v); playOnce(checkerChip, 'just-set'); closeOverlay(checkerModal); }
|
|||
|
|
}
|
|||
|
|
async function addRosterName() {
|
|||
|
|
const name = (checkerNewName && checkerNewName.value || '').trim();
|
|||
|
|
if (!name) { if (checkerNewName) checkerNewName.focus(); return; }
|
|||
|
|
try {
|
|||
|
|
const res = await apiPost('/api/roster/add', { name });
|
|||
|
|
if (res && res.roster) checklistData.myRoster = res.roster;
|
|||
|
|
setActivePerson(name);
|
|||
|
|
playOnce(checkerChip, 'just-set');
|
|||
|
|
closeOverlay(checkerModal);
|
|||
|
|
} catch (err) { showToast('Could not add name: ' + err.message, 'error'); }
|
|||
|
|
}
|
|||
|
|
// On a fresh checker sign-in with no name chosen yet, prompt once.
|
|||
|
|
function maybePromptChecker() {
|
|||
|
|
if (currentUser && currentUser.role === 'user' && !activePerson) openCheckerModal();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Team-name rosters: add/remove names (master + execs) ───────────
|
|||
|
|
async function openRosterMgmt() {
|
|||
|
|
if (!rosterModal || !rosterBody) return;
|
|||
|
|
rosterModal.style.display = 'flex';
|
|||
|
|
rosterBody.innerHTML = '<div class="empty-state" style="padding:8px;">Loading…</div>';
|
|||
|
|
try {
|
|||
|
|
const data = await apiGet('/api/admin/rosters');
|
|||
|
|
rosterTeams = (data && data.teams) || [];
|
|||
|
|
drawRosterMgmt();
|
|||
|
|
} catch (err) { rosterBody.innerHTML = `<div class="empty-state" style="padding:8px;">Failed to load: ${escapeHtml(err.message)}</div>`; }
|
|||
|
|
}
|
|||
|
|
// Grouped by location with sticky headers + counts, in a scrollable list —
|
|||
|
|
// the same layout as the Team logins list.
|
|||
|
|
function drawRosterMgmt() {
|
|||
|
|
if (!rosterBody) return;
|
|||
|
|
if (!rosterTeams.length) { rosterBody.innerHTML = '<div class="empty-state" style="padding:8px;">No team logins to manage.</div>'; return; }
|
|||
|
|
const q = ((rosterSearch && rosterSearch.value) || '').trim().toLowerCase();
|
|||
|
|
const locName = (t) => (t.location || '').trim() || '(no location)';
|
|||
|
|
let teams = rosterTeams.filter((t) => !q || (locName(t) + ' ' + (t.team || '') + ' ' + (t.roster || []).join(' ')).toLowerCase().includes(q));
|
|||
|
|
if (!teams.length) { rosterBody.innerHTML = '<div class="empty-state" style="padding:8px;">No teams match that search.</div>'; return; }
|
|||
|
|
teams = teams.slice().sort((a, b) =>
|
|||
|
|
locName(a).toLowerCase().localeCompare(locName(b).toLowerCase()) || (a.team || '').toLowerCase().localeCompare((b.team || '').toLowerCase()));
|
|||
|
|
const counts = {};
|
|||
|
|
teams.forEach((t) => { const L = locName(t); counts[L] = (counts[L] || 0) + 1; });
|
|||
|
|
let html = '';
|
|||
|
|
let curLoc = null;
|
|||
|
|
teams.forEach((t) => {
|
|||
|
|
const L = locName(t);
|
|||
|
|
if (L !== curLoc) {
|
|||
|
|
curLoc = L;
|
|||
|
|
html += `<div class="mgmt-group-header">${escapeHtml(L)} <span class="mgmt-group-count">${counts[L]}</span></div>`;
|
|||
|
|
}
|
|||
|
|
const team = (t.team || '').trim() ? t.team : 'Whole building';
|
|||
|
|
const chips = (t.roster || []).length
|
|||
|
|
? t.roster.map((n) => `<span class="roster-chip">${escapeHtml(n)}<button type="button" class="roster-del" data-roster-user="${escapeAttr(t.username)}" data-roster-name="${escapeAttr(n)}" aria-label="Remove ${escapeAttr(n)}">×</button></span>`).join('')
|
|||
|
|
: '<span class="user-row-tag empty">no names yet</span>';
|
|||
|
|
html += `<div class="roster-team">
|
|||
|
|
<div class="roster-team-head">${escapeHtml(team)}</div>
|
|||
|
|
<div class="roster-chips">${chips}</div>
|
|||
|
|
<div class="roster-add">
|
|||
|
|
<input type="text" class="roster-add-input" data-roster-add-user="${escapeAttr(t.username)}" placeholder="Add a name…" autocapitalize="words" />
|
|||
|
|
<button type="button" class="btn btn-secondary btn-small roster-add-btn" data-roster-add-user="${escapeAttr(t.username)}">Add</button>
|
|||
|
|
</div>
|
|||
|
|
</div>`;
|
|||
|
|
});
|
|||
|
|
rosterBody.innerHTML = html;
|
|||
|
|
}
|
|||
|
|
async function rosterAdd(username, name) {
|
|||
|
|
const clean = (name || '').trim();
|
|||
|
|
if (!clean) return;
|
|||
|
|
try { await apiPost('/api/admin/rosters/add', { username, name: clean }); await openRosterMgmt(); }
|
|||
|
|
catch (err) { showToast('Failed: ' + err.message, 'error'); }
|
|||
|
|
}
|
|||
|
|
async function rosterRemove(username, name) {
|
|||
|
|
try { await apiPost('/api/admin/rosters/remove', { username, name }); await openRosterMgmt(); }
|
|||
|
|
catch (err) { showToast('Failed: ' + err.message, 'error'); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Scoped write endpoints used by team admins. The master admin keeps using
|
|||
|
|
// the full-state pushAdminState path (unchanged).
|
|||
|
|
function apiCreateList(body) { return apiPost('/api/lists', body); }
|
|||
|
|
function apiUpdateList(id, body) { return apiPut('/api/lists/' + encodeURIComponent(id), body); }
|
|||
|
|
function apiDeleteList(id) { return apiDelete('/api/lists/' + encodeURIComponent(id)); }
|
|||
|
|
function apiResetList(id) { return apiPost('/api/lists/' + encodeURIComponent(id) + '/reset', {}); }
|
|||
|
|
function apiAddItem(listId, body) { return apiPost('/api/lists/' + encodeURIComponent(listId) + '/items', body); }
|
|||
|
|
function apiUpdateItem(listId, itemId, body) { return apiPut('/api/lists/' + encodeURIComponent(listId) + '/items/' + encodeURIComponent(itemId), body); }
|
|||
|
|
function apiDeleteItem(listId, itemId) { return apiDelete('/api/lists/' + encodeURIComponent(listId) + '/items/' + encodeURIComponent(itemId)); }
|
|||
|
|
function apiMoveItem(listId, itemId, targetListId) { return apiPost('/api/lists/' + encodeURIComponent(listId) + '/items/' + encodeURIComponent(itemId) + '/move', { targetListId }); }
|
|||
|
|
function apiReorderItems(listId, order) { return apiPost('/api/lists/' + encodeURIComponent(listId) + '/items/reorder', { order }); }
|
|||
|
|
function apiReorderLists(order) { return apiPost('/api/lists/reorder', { order }); }
|
|||
|
|
function apiScopedRestore(ops) { return apiPost('/api/scoped-restore', { ops }); }
|
|||
|
|
|
|||
|
|
// Run a scoped mutation, then re-sync from the server. Mirrors pushAdminState's
|
|||
|
|
// isSaving guard so the 6s poll can't clobber an in-flight edit.
|
|||
|
|
async function saveMutation(promise, beforeSnapshot) {
|
|||
|
|
// Executives & team admins edit via scoped endpoints (not pushAdminState), so
|
|||
|
|
// capture their owned lists before/after for undo/redo. (Master never hits this
|
|||
|
|
// path — it uses pushAdminState — so this only records for non-master editors.)
|
|||
|
|
// A caller that optimistically mutated state BEFORE calling us (e.g. drag-reorder)
|
|||
|
|
// must pass its own pre-mutation snapshot, else `before` would already include the change.
|
|||
|
|
const before = beforeSnapshot !== undefined ? beforeSnapshot
|
|||
|
|
: ((!applyingHistory && isEditor() && !isMasterAdmin()) ? ownedListMap() : null);
|
|||
|
|
isSaving = true;
|
|||
|
|
try {
|
|||
|
|
const res = await promise;
|
|||
|
|
await refreshState({ showToastOnError: false });
|
|||
|
|
if (before) {
|
|||
|
|
const ops = diffOwnedMaps(before, ownedListMap()); // only the list(s) this action changed
|
|||
|
|
if (ops.length) recordHistory({ type: 'scoped-ops', ops: ops });
|
|||
|
|
}
|
|||
|
|
return res || true;
|
|||
|
|
} catch (err) {
|
|||
|
|
showToast('Save failed: ' + err.message, 'error');
|
|||
|
|
return false;
|
|||
|
|
} finally {
|
|||
|
|
isSaving = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Lists this account may EDIT. Master: all. Team admin: only its own team's.
|
|||
|
|
// Executive scope (mirrors server execCanEditList): INTERSECTION of locations
|
|||
|
|
// AND teams; an empty column means "any" on that axis; no scope = no access.
|
|||
|
|
function execCanEditClient(l) {
|
|||
|
|
if (!currentUser) return false;
|
|||
|
|
const locs = (currentUser.scopeLocations || []).map(normalizeName);
|
|||
|
|
const teams = (currentUser.scopeTeams || []).map(normalizeName);
|
|||
|
|
if (locs.length === 0 && teams.length === 0) return false;
|
|||
|
|
const lLoc = normalizeName(l.location || '');
|
|||
|
|
const lTeam = normalizeName(l.team || '');
|
|||
|
|
const locationOK = locs.length === 0 || locs.includes(lLoc);
|
|||
|
|
const teamOK = teams.length === 0 || teams.includes(lTeam);
|
|||
|
|
return locationOK && teamOK;
|
|||
|
|
}
|
|||
|
|
function ownsListClient(l) {
|
|||
|
|
if (!l) return false;
|
|||
|
|
if (isMasterAdmin()) return true;
|
|||
|
|
if (!isEditor()) return false; // members (role 'user') can never edit → no action buttons, no drag handle
|
|||
|
|
if (!currentUser) return false;
|
|||
|
|
if (currentUser.role === 'executive') return execCanEditClient(l);
|
|||
|
|
const uLoc = normalizeName(currentUser.location || '');
|
|||
|
|
const uTeam = normalizeName(currentUser.team || '');
|
|||
|
|
return !!uTeam && normalizeName(l.location || '') === uLoc && normalizeName(l.team || '') === uTeam;
|
|||
|
|
}
|
|||
|
|
function editableLists() {
|
|||
|
|
return (checklistData.lists || []).filter(ownsListClient);
|
|||
|
|
}
|
|||
|
|
// Owned lists keyed by id (deep-cloned) — used to diff before/after an edit so
|
|||
|
|
// executive/team-admin undo touches ONLY the list(s) the action actually changed
|
|||
|
|
// (never a co-owner's other lists). See diffOwnedMaps + the 'scoped-ops' history.
|
|||
|
|
function ownedListMap() {
|
|||
|
|
const m = {};
|
|||
|
|
editableLists().forEach((l) => { m[l.id] = JSON.parse(JSON.stringify(l)); });
|
|||
|
|
return m;
|
|||
|
|
}
|
|||
|
|
// ops = [{id, before, after}] for each owned list that changed (added/removed/edited).
|
|||
|
|
function diffOwnedMaps(before, after) {
|
|||
|
|
const ops = [];
|
|||
|
|
const ids = new Set([...Object.keys(before), ...Object.keys(after)]);
|
|||
|
|
ids.forEach((id) => {
|
|||
|
|
const b = before[id] || null;
|
|||
|
|
const a = after[id] || null;
|
|||
|
|
if (JSON.stringify(b) !== JSON.stringify(a)) ops.push({ id: id, before: b, after: a });
|
|||
|
|
});
|
|||
|
|
return ops;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Initial setup ───────────────────────────────────────────
|
|||
|
|
// Rich recurrence editors for the add- and edit-task modals (same option set as
|
|||
|
|
// a list's repeat editor: type, every-N, start weekday, day/month, intraday times).
|
|||
|
|
const addRec = makeRecurrenceEditor(recurrenceOptions ? recurrenceOptions.querySelector('.rec-editor') : null);
|
|||
|
|
const editRec = makeRecurrenceEditor(editRecurrenceOptions ? editRecurrenceOptions.querySelector('.rec-editor') : null);
|
|||
|
|
isRecurringCheckbox.addEventListener('change', () => {
|
|||
|
|
recurrenceOptions.style.display = isRecurringCheckbox.checked ? 'block' : 'none';
|
|||
|
|
});
|
|||
|
|
// "+ Add Task" and "+ Add Note" are two distinct buttons sharing this one modal. addKind records
|
|||
|
|
// which one opened it — a note has no checkbox and never recurs — so there's no in-modal toggle.
|
|||
|
|
let addKind = 'task';
|
|||
|
|
const addModalTitle = document.getElementById('addModalTitle');
|
|||
|
|
function setAddMode(kind) {
|
|||
|
|
addKind = kind === 'note' ? 'note' : 'task';
|
|||
|
|
const isNote = addKind === 'note';
|
|||
|
|
if (addModalTitle) addModalTitle.textContent = isNote ? 'Add Note' : 'Add Task';
|
|||
|
|
if (addItemBtn) addItemBtn.textContent = isNote ? 'Add Note' : 'Add Task';
|
|||
|
|
const recRow = document.getElementById('recurringFieldGroup');
|
|||
|
|
if (recRow) recRow.style.display = isNote ? 'none' : '';
|
|||
|
|
if (isNote) { isRecurringCheckbox.checked = false; if (recurrenceOptions) recurrenceOptions.style.display = 'none'; }
|
|||
|
|
itemTitleInput.placeholder = isNote ? 'Note title…' : 'Task title...';
|
|||
|
|
}
|
|||
|
|
addItemBtn.addEventListener('click', addItem);
|
|||
|
|
itemTitleInput.addEventListener('keypress', (e) => {
|
|||
|
|
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); addItem(); }
|
|||
|
|
});
|
|||
|
|
addListBtn.addEventListener('click', () => openListModal('add'));
|
|||
|
|
renameListBtn.addEventListener('click', () => openListModal('rename'));
|
|||
|
|
deleteListBtn.addEventListener('click', deleteList);
|
|||
|
|
if (resetListBtn) resetListBtn.addEventListener('click', resetCurrentList);
|
|||
|
|
if (duplicateListBtn) duplicateListBtn.addEventListener('click', duplicateCurrentList);
|
|||
|
|
// Undo / redo (full-admin): buttons + Ctrl/⌘+Z, Ctrl/⌘+Shift+Z (or Ctrl+Y).
|
|||
|
|
if (undoBtn) undoBtn.addEventListener('click', undo);
|
|||
|
|
if (redoBtn) redoBtn.addEventListener('click', redo);
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
if (!isEditor()) return;
|
|||
|
|
const key = (e.key || '').toLowerCase();
|
|||
|
|
if ((key !== 'z' && key !== 'y') || !(e.ctrlKey || e.metaKey)) return;
|
|||
|
|
// Never hijack native text-editing undo inside inputs / the description editor.
|
|||
|
|
const t = e.target;
|
|||
|
|
if (t && ((t.matches && t.matches('input, textarea, select, [contenteditable], [contenteditable="true"]')) || t.isContentEditable)) return;
|
|||
|
|
// Don't fire while a modal editor is open (the user is mid-edit there).
|
|||
|
|
const modalOpen = [...document.querySelectorAll('.modal-overlay')].some((m) => m.style.display && m.style.display !== 'none');
|
|||
|
|
if (modalOpen) return;
|
|||
|
|
e.preventDefault();
|
|||
|
|
if (key === 'y' || (key === 'z' && e.shiftKey)) redo(); else undo();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ─── Scroll lock: freeze the page behind any open overlay ───────────
|
|||
|
|
// The page itself scrolls now (full-page scroll), so without this the
|
|||
|
|
// background scrolls behind a modal / the ☰ tools menu / the Move popover.
|
|||
|
|
// One MutationObserver watches every overlay's style+class, so the lock
|
|||
|
|
// engages no matter which code path opened it — modals (display flip),
|
|||
|
|
// the list menu (.open), and the move popover (.open).
|
|||
|
|
function anyOverlayOpen() {
|
|||
|
|
const modal = [...document.querySelectorAll('.modal-overlay')].some((m) => m.style.display && m.style.display !== 'none');
|
|||
|
|
return modal || !!document.querySelector('.list-menu.open, .move-menu.open');
|
|||
|
|
}
|
|||
|
|
function syncScrollLock() {
|
|||
|
|
const lock = anyOverlayOpen();
|
|||
|
|
document.documentElement.classList.toggle('scroll-locked', lock);
|
|||
|
|
document.body.classList.toggle('scroll-locked', lock);
|
|||
|
|
}
|
|||
|
|
(function setupScrollLock() {
|
|||
|
|
const obs = new MutationObserver(syncScrollLock);
|
|||
|
|
document.querySelectorAll('.modal-overlay, .list-menu, .move-menu').forEach((el) =>
|
|||
|
|
obs.observe(el, { attributes: true, attributeFilter: ['style', 'class'] }));
|
|||
|
|
syncScrollLock();
|
|||
|
|
})();
|
|||
|
|
|
|||
|
|
// Animate a modal/overlay OUT, then hide it — mirrors the ☰ menu's close.
|
|||
|
|
// Keeps display:flex through the exit (so the animation shows AND the scroll lock
|
|||
|
|
// stays engaged until it's truly gone), then flips display:none on animationend
|
|||
|
|
// (with a timeout fallback). Reduced motion → instant hide. Every modal close
|
|||
|
|
// routes through here, so the exit animation is consistent everywhere.
|
|||
|
|
function closeOverlay(el) {
|
|||
|
|
if (!el) return;
|
|||
|
|
clearTimeout(el._closeTimer);
|
|||
|
|
if (el.style.display === 'none') { el.classList.remove('closing'); return; }
|
|||
|
|
const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|||
|
|
if (reduce) { el.classList.remove('closing'); el.style.display = 'none'; return; }
|
|||
|
|
const finish = () => {
|
|||
|
|
clearTimeout(el._closeTimer);
|
|||
|
|
el.removeEventListener('animationend', onEnd, true);
|
|||
|
|
el.classList.remove('closing');
|
|||
|
|
el.style.display = 'none';
|
|||
|
|
};
|
|||
|
|
const onEnd = (e) => { if (e.animationName === 'modalOut' || e.target === el) finish(); };
|
|||
|
|
el.classList.add('closing');
|
|||
|
|
el.addEventListener('animationend', onEnd, true);
|
|||
|
|
el._closeTimer = setTimeout(finish, 260);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Replay a one-shot animation class (retrigger by removing + reflow + re-adding),
|
|||
|
|
// and self-clean on animationend so it can fire again next time.
|
|||
|
|
function playOnce(el, cls) {
|
|||
|
|
if (!el) return;
|
|||
|
|
el.classList.remove(cls);
|
|||
|
|
void el.offsetWidth; // force reflow so the animation restarts
|
|||
|
|
el.classList.add(cls);
|
|||
|
|
el.addEventListener('animationend', () => el.classList.remove(cls), { once: true });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Motion One spring animations ──────────────────────────────────
|
|||
|
|
// Motion One (window.Motion, vendored & loaded before this file) gives us
|
|||
|
|
// real spring physics for the checklist. Everything here is OPTIONAL: if the
|
|||
|
|
// library didn't load (offline first paint, blocked), motionReady() is false
|
|||
|
|
// and the app keeps its pure-CSS animations. Reduced-motion always wins → instant.
|
|||
|
|
function motionReady() { return !!(window.Motion && typeof window.Motion.animate === 'function'); }
|
|||
|
|
function prefersReduced() {
|
|||
|
|
return !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
|
|||
|
|
}
|
|||
|
|
// Tell the stylesheet that JS owns the item slide-in, so the CSS `itemArrive`
|
|||
|
|
// transform stands down (the color flash stays). Without this flag the CSS
|
|||
|
|
// fallback runs instead — so the app animates either way.
|
|||
|
|
if (motionReady()) document.documentElement.classList.add('motion-on');
|
|||
|
|
|
|||
|
|
// ─── Haptics ───────────────────────────────────────────────────────
|
|||
|
|
// Short vibration feedback on devices that support the Web Vibration API (Android Chrome/
|
|||
|
|
// Firefox). iOS Safari has NO Vibration API and desktops have no vibrator, so this silently
|
|||
|
|
// no-ops there. Gated on reduced-motion like the visual animations, so a user who's asked for
|
|||
|
|
// less sensory feedback gets none.
|
|||
|
|
const HAPTIC_TAP = 10; // subtle tick on a button / checkbox press
|
|||
|
|
const HAPTIC_DONE = [18, 40, 18, 40, 18, 40, 110]; // little celebratory rhythm at 100% complete
|
|||
|
|
function haptic(pattern) {
|
|||
|
|
if (prefersReduced()) return;
|
|||
|
|
if (typeof navigator === 'undefined' || typeof navigator.vibrate !== 'function') return;
|
|||
|
|
try { navigator.vibrate(pattern); } catch (_) {}
|
|||
|
|
}
|
|||
|
|
// A light tick when a control is pressed. Capture phase so it fires even if a handler stops
|
|||
|
|
// propagation; 'click' (not pointerdown) so a scroll that begins on a control doesn't buzz.
|
|||
|
|
document.addEventListener('click', (e) => {
|
|||
|
|
const t = e.target;
|
|||
|
|
if (t && t.closest && t.closest('button, [role="button"], input[type="checkbox"], .list-tab, .checklist-item-header.is-collapsible, .checklist-column h2.col-foldable')) haptic(HAPTIC_TAP);
|
|||
|
|
}, true);
|
|||
|
|
|
|||
|
|
// FLIP + cross-column flight. Checking a box moves the item from To Do → Done, but the
|
|||
|
|
// columns clip their contents (overflow:hidden), so a normal in-place transform would get
|
|||
|
|
// chopped at the column edge — that's the "snap". flyAcross() briefly lifts that clipping and
|
|||
|
|
// lifts the item above the other column so it visibly TRAVELS to its new spot; meanwhile the
|
|||
|
|
// other items glide within their column to open/close the gap. capture() records each item's
|
|||
|
|
// old rect AND which column it was in; play() runs after the re-render.
|
|||
|
|
function clearInline(el) { el.style.transform = ''; el.style.opacity = ''; el.style.position = ''; el.style.zIndex = ''; }
|
|||
|
|
|
|||
|
|
// Animate an item, then ALWAYS strip its inline styles — on finish AND via a timer backstop,
|
|||
|
|
// so a node orphaned mid-animation (or an engine that never resolves .finished) can't leave an
|
|||
|
|
// item stuck offset or, worse, invisible. maxMs must comfortably exceed the spring's settle time.
|
|||
|
|
function springClean(el, keyframes, options, maxMs) {
|
|||
|
|
setTimeout(() => clearInline(el), maxMs); // arm the backstop FIRST so a throwing animate() can't skip it
|
|||
|
|
let a = null;
|
|||
|
|
try { a = window.Motion.animate(el, keyframes, options); }
|
|||
|
|
catch (_) { clearInline(el); return null; }
|
|||
|
|
a.finished.then(() => clearInline(el)).catch(() => clearInline(el));
|
|||
|
|
return a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// FLIP move via the Web Animations API DIRECTLY. Motion One animates a CSS *variable* that the
|
|||
|
|
// transform references, and that variable doesn't resolve into the computed transform on the very
|
|||
|
|
// first frame — so the item flashed at its destination, then jumped back and swiped in (the
|
|||
|
|
// "twitchy snap"). WAAPI interpolates the LITERAL transform; fill:'backwards' shows the start
|
|||
|
|
// offset immediately (no snap) and it reverts to the natural settled position when done.
|
|||
|
|
function flipAnim(el, fromX, fromY, durMs) {
|
|||
|
|
let a = null;
|
|||
|
|
try {
|
|||
|
|
a = el.animate(
|
|||
|
|
[{ transform: 'translate(' + fromX + 'px,' + fromY + 'px)' }, { transform: 'none' }],
|
|||
|
|
{ duration: durMs, easing: 'cubic-bezier(0.22, 1, 0.36, 1)', fill: 'backwards' }
|
|||
|
|
);
|
|||
|
|
} catch (_) { clearInline(el); return null; }
|
|||
|
|
a.finished.then(() => clearInline(el)).catch(() => clearInline(el));
|
|||
|
|
setTimeout(() => clearInline(el), durMs + 400);
|
|||
|
|
return a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Gentle stagger-in for a single item (used for new items + list switches).
|
|||
|
|
function enterItem(el, i) {
|
|||
|
|
const delay = Math.min(i * 0.035, 0.3);
|
|||
|
|
el.style.opacity = '0';
|
|||
|
|
springClean(el, { opacity: [0, 1], y: [12, 0] },
|
|||
|
|
{ easing: window.Motion.spring({ stiffness: 440, damping: 32 }), delay }, delay * 1000 + 1100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// While an item is mid-flight, let columns show content outside their box and lift the
|
|||
|
|
// flying item's column above its neighbour. Restored on a TIMER (not a completion ref-count)
|
|||
|
|
// so a re-render that orphans the animating node can never leave a column stuck open.
|
|||
|
|
let _colRestoreTimer = null;
|
|||
|
|
const _flightCols = new Set();
|
|||
|
|
function liftColumnsForFlight(col) {
|
|||
|
|
document.querySelectorAll('.checklist-column').forEach((c) => { c.style.overflow = 'visible'; });
|
|||
|
|
if (col) { col.style.position = 'relative'; col.style.zIndex = '5'; _flightCols.add(col); }
|
|||
|
|
clearTimeout(_colRestoreTimer);
|
|||
|
|
_colRestoreTimer = setTimeout(restoreColumnsAfterFlight, 1300); // ≥ the flight backstop, so columns never re-clip a still-flying item
|
|||
|
|
}
|
|||
|
|
function restoreColumnsAfterFlight() {
|
|||
|
|
clearTimeout(_colRestoreTimer); _colRestoreTimer = null;
|
|||
|
|
document.querySelectorAll('.checklist-column').forEach((c) => { c.style.overflow = ''; });
|
|||
|
|
_flightCols.forEach((c) => { c.style.zIndex = ''; c.style.position = ''; });
|
|||
|
|
_flightCols.clear();
|
|||
|
|
}
|
|||
|
|
// Fly an item that switched columns from its old position to its new one. Falls back to a
|
|||
|
|
// gentle pop when the trip would be off-screen or huge (e.g. a tall stacked phone layout).
|
|||
|
|
function flyAcross(el, dx, dy, nowRect) {
|
|||
|
|
const M = window.Motion;
|
|||
|
|
const offscreen = nowRect.bottom < 8 || nowRect.top > window.innerHeight - 8;
|
|||
|
|
if (offscreen || Math.abs(dy) > window.innerHeight * 1.1) {
|
|||
|
|
el.style.opacity = '0';
|
|||
|
|
springClean(el, { opacity: [0, 1], scale: [0.96, 1] },
|
|||
|
|
{ easing: M.spring({ stiffness: 420, damping: 30 }) }, 1100);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
liftColumnsForFlight(el.closest('.checklist-column'));
|
|||
|
|
el.style.position = 'relative';
|
|||
|
|
el.style.zIndex = '6';
|
|||
|
|
flipAnim(el, dx, dy, 560); // glide from the OLD column position to the new one — no snap
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const Flip = {
|
|||
|
|
capture(containers) {
|
|||
|
|
if (!motionReady() || prefersReduced()) return null;
|
|||
|
|
const rects = new Map();
|
|||
|
|
containers.forEach((c, col) => {
|
|||
|
|
if (!c) return;
|
|||
|
|
c.querySelectorAll('.checklist-item[data-item-id]').forEach((el) => {
|
|||
|
|
rects.set(el.getAttribute('data-item-id'), { rect: el.getBoundingClientRect(), col });
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
return rects;
|
|||
|
|
},
|
|||
|
|
play(first, containers) {
|
|||
|
|
if (!first) return;
|
|||
|
|
const M = window.Motion;
|
|||
|
|
const fresh = [];
|
|||
|
|
containers.forEach((c, col) => {
|
|||
|
|
if (!c) return;
|
|||
|
|
c.querySelectorAll('.checklist-item[data-item-id]').forEach((el) => {
|
|||
|
|
const id = el.getAttribute('data-item-id');
|
|||
|
|
const prev = first.get(id);
|
|||
|
|
if (!prev) { fresh.push(el); return; } // appeared this render → enter below
|
|||
|
|
const now = el.getBoundingClientRect();
|
|||
|
|
const dx = prev.rect.left - now.left;
|
|||
|
|
const dy = prev.rect.top - now.top;
|
|||
|
|
if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) return; // didn't move
|
|||
|
|
if (prev.col !== col) {
|
|||
|
|
flyAcross(el, dx, dy, now); // you checked/unchecked it → fly across the columns
|
|||
|
|
} else {
|
|||
|
|
flipAnim(el, dx, dy, 440); // shifted within its column → glide to the new spot
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
fresh.forEach((el, i) => enterItem(el, i));
|
|||
|
|
},
|
|||
|
|
// Stagger every visible item in — used on a list SWITCH / first load (never on polls).
|
|||
|
|
enterAll(containers) {
|
|||
|
|
if (!motionReady() || prefersReduced()) return;
|
|||
|
|
let i = 0;
|
|||
|
|
containers.forEach((c) => {
|
|||
|
|
if (!c) return;
|
|||
|
|
c.querySelectorAll('.checklist-item[data-item-id]').forEach((el) => { enterItem(el, i++); });
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// A short, celebratory particle burst when a list hits 100% complete.
|
|||
|
|
// Pure DOM + Motion, fixed-position, pointer-events:none, self-cleaning.
|
|||
|
|
function celebrateComplete(originEl) {
|
|||
|
|
if (!motionReady() || prefersReduced()) return;
|
|||
|
|
const M = window.Motion;
|
|||
|
|
const host = originEl || doneList || document.querySelector('.checklists-section') || document.body;
|
|||
|
|
const r = host.getBoundingClientRect();
|
|||
|
|
if (!r.width && !r.height) return;
|
|||
|
|
const cx = r.left + r.width / 2;
|
|||
|
|
const cy = r.top + Math.min(64, r.height / 2);
|
|||
|
|
const layer = document.createElement('div');
|
|||
|
|
layer.className = 'celebrate-layer';
|
|||
|
|
layer.setAttribute('aria-hidden', 'true');
|
|||
|
|
layer.style.cssText = 'position:fixed;left:0;top:0;width:0;height:0;z-index:4000;pointer-events:none;';
|
|||
|
|
document.body.appendChild(layer);
|
|||
|
|
const colors = ['#39a8ff', '#2ecc71', '#e0a800', '#ef4444', '#9b59b6', '#eceef2'];
|
|||
|
|
const N = 28;
|
|||
|
|
let pending = N;
|
|||
|
|
const done = () => { if (--pending <= 0 && layer.parentNode) layer.remove(); };
|
|||
|
|
for (let i = 0; i < N; i++) {
|
|||
|
|
const size = 6 + Math.round(Math.random() * 6);
|
|||
|
|
const p = document.createElement('div');
|
|||
|
|
p.style.cssText = 'position:fixed;top:' + cy + 'px;left:' + cx + 'px;width:' + size + 'px;height:' + size +
|
|||
|
|
'px;background:' + colors[i % colors.length] + ';border-radius:' + (Math.random() < 0.5 ? '50%' : '2px') +
|
|||
|
|
';will-change:transform,opacity;';
|
|||
|
|
layer.appendChild(p);
|
|||
|
|
const angle = (Math.PI * 2 * i) / N + (Math.random() - 0.5) * 0.6;
|
|||
|
|
const dist = 90 + Math.random() * 130;
|
|||
|
|
const dx = Math.cos(angle) * dist;
|
|||
|
|
const dy = Math.sin(angle) * dist - 40; // bias the burst upward, then it falls
|
|||
|
|
M.animate(p, { x: [0, dx], y: [0, dy, dy + 130], rotate: [0, (Math.random() - 0.5) * 560], opacity: [1, 1, 0] },
|
|||
|
|
{ duration: 1.0 + Math.random() * 0.45, easing: 'ease-out' })
|
|||
|
|
.finished.then(done).catch(done);
|
|||
|
|
}
|
|||
|
|
setTimeout(() => { if (layer.parentNode) layer.remove(); }, 2400); // safety net
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Collapsible cards: collapse/expand a single card IN PLACE ──────────────────
|
|||
|
|
// State (the .collapsed class) is set by the caller via the resting render or here on
|
|||
|
|
// finish; the animation is pure decoration. It ALWAYS lands on the resting class — even
|
|||
|
|
// if interrupted (backstop timer) or unavailable (reduced-motion / no WAAPI → instant).
|
|||
|
|
function animateCollapse(card, collapse) {
|
|||
|
|
const body = card.querySelector('.checklist-item-body');
|
|||
|
|
if (!body) return;
|
|||
|
|
if (body._collapseAnim) { try { body._collapseAnim.cancel(); } catch (_) {} body._collapseAnim = null; }
|
|||
|
|
if (body._collapseTimer) { clearTimeout(body._collapseTimer); body._collapseTimer = 0; }
|
|||
|
|
const commit = () => {
|
|||
|
|
card.classList.toggle('collapsed', collapse); // display:none makes the height moot
|
|||
|
|
if (body._collapseAnim) { try { body._collapseAnim.cancel(); } catch (_) {} body._collapseAnim = null; }
|
|||
|
|
body.style.height = ''; body.style.overflow = '';
|
|||
|
|
if (body._collapseTimer) { clearTimeout(body._collapseTimer); body._collapseTimer = 0; }
|
|||
|
|
};
|
|||
|
|
if (prefersReduced() || typeof body.animate !== 'function') { commit(); return; }
|
|||
|
|
let from, to;
|
|||
|
|
if (collapse) { from = body.scrollHeight; to = 0; }
|
|||
|
|
else { card.classList.remove('collapsed'); body.style.height = '0px'; body.style.overflow = 'hidden'; to = body.scrollHeight; from = 0; }
|
|||
|
|
body.style.overflow = 'hidden';
|
|||
|
|
body._collapseTimer = setTimeout(commit, 360); // backstop armed FIRST
|
|||
|
|
let a;
|
|||
|
|
// fill:'forwards' on collapse holds height:0 to the pre-paint onfinish commit (no flash
|
|||
|
|
// back to full height on Safari); expand reverts to its natural height, which is correct.
|
|||
|
|
try { a = body.animate([{ height: from + 'px' }, { height: to + 'px' }], { duration: 220, easing: 'cubic-bezier(0.4,0,0.2,1)', fill: collapse ? 'forwards' : 'none' }); }
|
|||
|
|
catch (_) { commit(); return; }
|
|||
|
|
body._collapseAnim = a;
|
|||
|
|
a.onfinish = commit; // fires pre-paint in the animation-update step
|
|||
|
|
if (a.finished) a.finished.then(commit).catch(commit);
|
|||
|
|
animatingUntil = Math.max(animatingUntil, Date.now() + 300); // defer the poll rebuild
|
|||
|
|
}
|
|||
|
|
function toggleCollapse(card) {
|
|||
|
|
if (!card || !card.isConnected) return;
|
|||
|
|
if (Date.now() - justSwiped < 350) return; // ignore the stray click that follows a list-swipe
|
|||
|
|
const body = card.querySelector('.checklist-item-body');
|
|||
|
|
if (!body) return;
|
|||
|
|
const id = card.getAttribute('data-item-id');
|
|||
|
|
const isDone = card.classList.contains('done');
|
|||
|
|
const willCollapse = !card.classList.contains('collapsed');
|
|||
|
|
setCollapseOverride(id, willCollapse, isDone); // PERSIST FIRST — state can never be stranded
|
|||
|
|
const btn = card.querySelector('.collapse-toggle');
|
|||
|
|
if (btn) btn.setAttribute('aria-expanded', willCollapse ? 'false' : 'true'); // chevron rotates off this
|
|||
|
|
animateCollapse(card, willCollapse);
|
|||
|
|
}
|
|||
|
|
// Fold/unfold a whole column, same shape as animateCollapse: the resting state is the
|
|||
|
|
// .col-folded class (display:none), the height animation is pure decoration and always
|
|||
|
|
// lands on the class — backstop timer, reduced-motion/no-WAAPI → instant. The list's
|
|||
|
|
// padding (and its mobile min-height floor) animate to 0 alongside the height so the
|
|||
|
|
// fold closes flush instead of stopping at the padding box.
|
|||
|
|
function animateColFold(col, fold) {
|
|||
|
|
const body = col.querySelector('.checklist-list');
|
|||
|
|
if (!body) return;
|
|||
|
|
if (body._foldAnim) { try { body._foldAnim.cancel(); } catch (_) {} body._foldAnim = null; }
|
|||
|
|
if (body._foldTimer) { clearTimeout(body._foldTimer); body._foldTimer = 0; }
|
|||
|
|
const commit = () => {
|
|||
|
|
col.classList.toggle('col-folded', fold);
|
|||
|
|
if (body._foldAnim) { try { body._foldAnim.cancel(); } catch (_) {} body._foldAnim = null; }
|
|||
|
|
body.style.height = ''; body.style.overflow = ''; body.style.minHeight = '';
|
|||
|
|
if (body._foldTimer) { clearTimeout(body._foldTimer); body._foldTimer = 0; }
|
|||
|
|
};
|
|||
|
|
if (prefersReduced() || typeof body.animate !== 'function') { commit(); return; }
|
|||
|
|
const cs = getComputedStyle(body);
|
|||
|
|
const pt = cs.paddingTop, pb = cs.paddingBottom;
|
|||
|
|
let from, to;
|
|||
|
|
if (fold) { from = body.scrollHeight; to = 0; }
|
|||
|
|
else { col.classList.remove('col-folded'); body.style.height = '0px'; body.style.overflow = 'hidden'; to = body.scrollHeight; from = 0; }
|
|||
|
|
body.style.overflow = 'hidden'; body.style.minHeight = '0';
|
|||
|
|
body._foldTimer = setTimeout(commit, 400); // backstop armed FIRST
|
|||
|
|
let a;
|
|||
|
|
try {
|
|||
|
|
a = body.animate(
|
|||
|
|
[{ height: from + 'px', paddingTop: fold ? pt : '0px', paddingBottom: fold ? pb : '0px' },
|
|||
|
|
{ height: to + 'px', paddingTop: fold ? '0px' : pt, paddingBottom: fold ? '0px' : pb }],
|
|||
|
|
{ duration: 240, easing: 'cubic-bezier(0.4,0,0.2,1)', fill: fold ? 'forwards' : 'none' });
|
|||
|
|
} catch (_) { commit(); return; }
|
|||
|
|
body._foldAnim = a;
|
|||
|
|
a.onfinish = commit;
|
|||
|
|
if (a.finished) a.finished.then(commit).catch(commit);
|
|||
|
|
animatingUntil = Math.max(animatingUntil, Date.now() + 320); // defer the poll rebuild
|
|||
|
|
}
|
|||
|
|
function toggleColFold(col) {
|
|||
|
|
if (!col || !col.isConnected) return;
|
|||
|
|
if (Date.now() - justSwiped < 350) return; // ignore the stray click that follows a list-swipe
|
|||
|
|
const list = getCurrentList();
|
|||
|
|
if (!list) return;
|
|||
|
|
const key = col.getAttribute('data-col');
|
|||
|
|
if (!key) return;
|
|||
|
|
const willFold = !col.classList.contains('col-folded');
|
|||
|
|
setColFolded(list.id, key, willFold); // PERSIST FIRST — state can never be stranded
|
|||
|
|
const btn = col.querySelector('.col-fold');
|
|||
|
|
if (btn) {
|
|||
|
|
const colName = COL_LABEL[key] || ((col.querySelector('.col-title') || {}).textContent) || key;
|
|||
|
|
btn.setAttribute('aria-expanded', willFold ? 'false' : 'true'); // chevron rotates off this
|
|||
|
|
btn.setAttribute('aria-label', (willFold ? 'Unfold the ' : 'Fold the ') + colName + ' list');
|
|||
|
|
}
|
|||
|
|
animateColFold(col, willFold);
|
|||
|
|
}
|
|||
|
|
// "Sucked into the header" flourish when a task completes: a throwaway clone of its body
|
|||
|
|
// retracts UPWARD + fades at the spot it occupied, while the already-collapsed card flies
|
|||
|
|
// to Done. Lives on a fixed overlay (like celebrateComplete) so a re-render can't strand it
|
|||
|
|
// and it never affects card layout. Purely optional — the card is already correctly collapsed.
|
|||
|
|
function playSuckIntoHeader(snap) {
|
|||
|
|
if (!snap || !snap.clone || !snap.rect) return;
|
|||
|
|
const r = snap.rect;
|
|||
|
|
const layer = document.createElement('div');
|
|||
|
|
layer.setAttribute('aria-hidden', 'true');
|
|||
|
|
layer.style.cssText = 'position:fixed;left:0;top:0;z-index:4000;pointer-events:none;';
|
|||
|
|
const el = snap.clone;
|
|||
|
|
el.querySelectorAll('[tabindex]').forEach((n) => n.removeAttribute('tabindex')); // no phantom tabstops
|
|||
|
|
el.style.cssText = 'position:fixed;left:' + r.left + 'px;top:' + r.top + 'px;width:' + r.width + 'px;margin:0;box-sizing:border-box;background:' + (snap.bg || '#252932') + ';transform-origin:top center;will-change:transform,opacity;';
|
|||
|
|
layer.appendChild(el);
|
|||
|
|
document.body.appendChild(layer);
|
|||
|
|
const cleanup = () => { if (layer.parentNode) layer.parentNode.removeChild(layer); };
|
|||
|
|
let a;
|
|||
|
|
try { a = el.animate([{ transform: 'translateY(0) scaleY(1)', opacity: 1 }, { transform: 'translateY(-42%) scaleY(0.06)', opacity: 0 }], { duration: 360, easing: 'cubic-bezier(0.55,0,0.85,0.35)', fill: 'forwards' }); }
|
|||
|
|
catch (_) { cleanup(); return; }
|
|||
|
|
a.onfinish = cleanup; if (a.finished) a.finished.then(cleanup).catch(cleanup);
|
|||
|
|
setTimeout(cleanup, 720); // backstop
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let celebratedListId = null; // guard: fire the burst once per completion, not on every poll
|
|||
|
|
let lastRenderedListId = null; // which list the columns last showed → detect a list switch for the cascade
|
|||
|
|
let animatingUntil = 0; // wall-clock ms: a reconcile render before this would rebuild the DOM mid-animation
|
|||
|
|
let deferredRenderTimer = null;
|
|||
|
|
let firstDeferAt = 0; // when the current reconcile first got deferred → hard-cap total staleness
|
|||
|
|
// Schedule the reconcile render for just after the current item animation finishes, so the
|
|||
|
|
// post-check server sync (or a 6s poll) can't rebuild the columns and cut the animation short.
|
|||
|
|
function renderLater() {
|
|||
|
|
if (deferredRenderTimer) clearTimeout(deferredRenderTimer);
|
|||
|
|
deferredRenderTimer = setTimeout(() => {
|
|||
|
|
deferredRenderTimer = null;
|
|||
|
|
if (Date.now() < animatingUntil) { renderLater(); return; } // still animating → keep waiting
|
|||
|
|
renderLists();
|
|||
|
|
}, Math.max(60, animatingUntil - Date.now() + 60));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Reset-schedule picker: reveal the day-of-week / day-of-month control for the chosen type.
|
|||
|
|
if (listModalResetType) listModalResetType.addEventListener('change', updateResetScheduleControls);
|
|||
|
|
if (listModalResetInterval) listModalResetInterval.addEventListener('input', updateResetScheduleControls);
|
|||
|
|
if (listModalResetTimesAdd) listModalResetTimesAdd.addEventListener('click', () => { const inp = addResetTimeEntry(''); if (inp) inp.focus(); });
|
|||
|
|
exportJsonBtn.addEventListener('click', exportChecklists);
|
|||
|
|
importJsonBtn.addEventListener('click', () => importJsonInput.click());
|
|||
|
|
importJsonInput.addEventListener('change', importChecklists);
|
|||
|
|
sendDigestBtn.addEventListener('click', sendDigestNow);
|
|||
|
|
if (addTaskBtn) addTaskBtn.addEventListener('click', openAddTask);
|
|||
|
|
if (addNoteBtn) addNoteBtn.addEventListener('click', () => { const l = getCurrentList(); if (l) openAddNote(l.id); else showToast('Pick a list first', 'error'); });
|
|||
|
|
|
|||
|
|
// ── Booth keyboard shortcuts (desktop operator) ──────────────────────
|
|||
|
|
// No-mouse operation from the booth. Guarded so they never fire while typing in a field, and nav
|
|||
|
|
// keys are ignored when a modal/menu is open. A blue ring marks the focused card; focus is tracked
|
|||
|
|
// by item id so it survives the 6s-poll re-render (re-applied at the end of renderLists).
|
|||
|
|
let kbFocusId = null;
|
|||
|
|
// offsetParent filter: skip cards inside a folded (or notes-only-hidden) column —
|
|||
|
|
// j/k must never land the focus ring on an invisible card.
|
|||
|
|
function kbVisibleCards() { return Array.prototype.slice.call(document.querySelectorAll('#todoList .checklist-item, .checklist-column[data-col^="grp-"] .checklist-item, #doneList .checklist-item, #notesList .checklist-item')).filter((el) => el.offsetParent !== null); }
|
|||
|
|
function applyKbFocus() {
|
|||
|
|
document.querySelectorAll('.checklist-item.kb-focus').forEach((c) => c.classList.remove('kb-focus'));
|
|||
|
|
if (!kbFocusId) return;
|
|||
|
|
const el = document.querySelector('.checklist-item[data-item-id="' + cssEscape(kbFocusId) + '"]');
|
|||
|
|
if (el) el.classList.add('kb-focus');
|
|||
|
|
}
|
|||
|
|
function kbMoveFocus(delta) {
|
|||
|
|
const cards = kbVisibleCards();
|
|||
|
|
if (!cards.length) { kbFocusId = null; return; }
|
|||
|
|
let idx = cards.findIndex((c) => c.getAttribute('data-item-id') === kbFocusId);
|
|||
|
|
idx = idx < 0 ? (delta > 0 ? 0 : cards.length - 1) : Math.max(0, Math.min(cards.length - 1, idx + delta));
|
|||
|
|
kbFocusId = cards[idx].getAttribute('data-item-id');
|
|||
|
|
applyKbFocus();
|
|||
|
|
cards[idx].scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
|||
|
|
}
|
|||
|
|
function kbFocusedCard() { return kbFocusId ? document.querySelector('.checklist-item[data-item-id="' + cssEscape(kbFocusId) + '"]') : null; }
|
|||
|
|
function kbToggleFocused() {
|
|||
|
|
const el = kbFocusedCard(); if (!el) { kbMoveFocus(1); return; }
|
|||
|
|
const cb = el.querySelector('.checklist-item-header input[type="checkbox"][data-action="toggle"]');
|
|||
|
|
if (cb) cb.click(); // plain-checkbox task only; notes & step-parents have none → harmless no-op
|
|||
|
|
}
|
|||
|
|
function kbCollapseFocused() { const el = kbFocusedCard(); const chev = el && el.querySelector('.collapse-toggle'); if (chev) chev.click(); }
|
|||
|
|
function kbSwitchList(delta) {
|
|||
|
|
let items = Array.prototype.slice.call(document.querySelectorAll('.list-tab'));
|
|||
|
|
if (!items.length) items = Array.prototype.slice.call(document.querySelectorAll('[data-tree-list]'));
|
|||
|
|
if (!items.length) return;
|
|||
|
|
let i = items.findIndex((t) => t.classList.contains('active'));
|
|||
|
|
i = i < 0 ? 0 : Math.max(0, Math.min(items.length - 1, i + delta));
|
|||
|
|
items[i].click();
|
|||
|
|
kbFocusId = null; // new list → drop stale focus
|
|||
|
|
}
|
|||
|
|
let kbCheatEl = null;
|
|||
|
|
function kbCheatSheet() {
|
|||
|
|
if (kbCheatEl) return kbCheatEl;
|
|||
|
|
kbCheatEl = document.createElement('div');
|
|||
|
|
kbCheatEl.className = 'kb-cheat';
|
|||
|
|
kbCheatEl.innerHTML = '<div class="panel"><h3>Keyboard shortcuts</h3>'
|
|||
|
|
+ [['← / →', 'Previous / next list'], ['j / k', 'Move down / up the tasks'], ['Space', 'Check / uncheck the highlighted task'], ['c', 'Collapse / expand it'], ['/', 'Search'], ['?', 'Show this list'], ['Esc', 'Close']]
|
|||
|
|
.map((r) => '<div class="krow"><span>' + r[1] + '</span><kbd>' + r[0] + '</kbd></div>').join('')
|
|||
|
|
+ '<button class="btn btn-secondary btn-small" style="width:100%;margin-top:14px;" data-kb-close type="button">Close</button></div>';
|
|||
|
|
kbCheatEl.addEventListener('click', (e) => { if (e.target === kbCheatEl || e.target.hasAttribute('data-kb-close')) kbCheatEl.classList.remove('open'); });
|
|||
|
|
document.body.appendChild(kbCheatEl);
|
|||
|
|
return kbCheatEl;
|
|||
|
|
}
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.metaKey || e.ctrlKey || e.altKey) return;
|
|||
|
|
const t = e.target;
|
|||
|
|
if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.tagName === 'SELECT' || t.isContentEditable)) return;
|
|||
|
|
if (e.key === '?') { e.preventDefault(); kbCheatSheet().classList.toggle('open'); return; }
|
|||
|
|
if (e.key === 'Escape') { if (kbCheatEl) kbCheatEl.classList.remove('open'); return; } // existing modal/menu Esc still runs
|
|||
|
|
if (document.querySelector('.kb-cheat.open, .modal-overlay[style*="flex"], .list-menu.open, .move-menu.open')) return;
|
|||
|
|
switch (e.key) {
|
|||
|
|
case 'ArrowLeft': e.preventDefault(); kbSwitchList(-1); break;
|
|||
|
|
case 'ArrowRight': e.preventDefault(); kbSwitchList(1); break;
|
|||
|
|
case 'j': e.preventDefault(); kbMoveFocus(1); break;
|
|||
|
|
case 'k': e.preventDefault(); kbMoveFocus(-1); break;
|
|||
|
|
case ' ': if (kbFocusId) { e.preventDefault(); kbToggleFocused(); } break;
|
|||
|
|
case 'c': if (kbFocusId) { e.preventDefault(); kbCollapseFocused(); } break;
|
|||
|
|
case '/': e.preventDefault(); openSearch(); break;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ── First-run welcome / tips (shown once per user, replayable from the menu) ──
|
|||
|
|
let firstRunChecked = false, firstRunEl = null;
|
|||
|
|
function firstRunKey() { return 'checklist:seen-firstrun:' + (currentUser ? currentUser.username : ''); }
|
|||
|
|
function buildFirstRun() {
|
|||
|
|
const tips = [
|
|||
|
|
['✓', "Tap the <b>checkbox</b> to mark a step done — it slides over to <b>Done</b>."],
|
|||
|
|
['👆', "Tap a step's <b>title</b> to open its photos, videos, and notes."],
|
|||
|
|
['📝', "A <b>Notes</b> column holds reference info — nothing to check off."]
|
|||
|
|
];
|
|||
|
|
if (isEditor()) tips.push(['☰', "Use the <b>Menu</b> to add tasks or notes, reorder columns, and more."]);
|
|||
|
|
tips.push(['⌨️', "On a desktop, press <b>?</b> any time for keyboard shortcuts."]);
|
|||
|
|
const el = document.createElement('div');
|
|||
|
|
el.className = 'firstrun';
|
|||
|
|
el.innerHTML = '<div class="panel"><h3>Welcome 👋</h3><p class="lead">A few quick things, then you’re set.</p>'
|
|||
|
|
+ tips.map((t) => '<div class="tip"><span class="ic">' + t[0] + '</span><span class="tx">' + t[1] + '</span></div>').join('')
|
|||
|
|
+ '<button class="btn btn-primary btn-small go" data-fr-close type="button">Got it</button></div>';
|
|||
|
|
el.addEventListener('click', (e) => { if (e.target === el || e.target.hasAttribute('data-fr-close')) { el.classList.remove('open'); try { localStorage.setItem(firstRunKey(), '1'); } catch (_) {} } });
|
|||
|
|
return el;
|
|||
|
|
}
|
|||
|
|
function showFirstRun(force) {
|
|||
|
|
if (!currentUser) return;
|
|||
|
|
if (!force) { try { if (localStorage.getItem(firstRunKey()) === '1') return; } catch (_) { return; } }
|
|||
|
|
if (firstRunEl) firstRunEl.remove();
|
|||
|
|
firstRunEl = buildFirstRun();
|
|||
|
|
document.body.appendChild(firstRunEl);
|
|||
|
|
requestAnimationFrame(() => firstRunEl.classList.add('open'));
|
|||
|
|
}
|
|||
|
|
function maybeShowFirstRun() { if (firstRunChecked) return; firstRunChecked = true; setTimeout(() => showFirstRun(false), 700); }
|
|||
|
|
{ const b = document.getElementById('helpTipsBtn'); if (b) b.addEventListener('click', () => showFirstRun(true)); }
|
|||
|
|
|
|||
|
|
// ── Global search (gear · notes · tasks · lists) — volunteer-accessible ──
|
|||
|
|
const searchOverlay = document.getElementById('searchOverlay');
|
|||
|
|
const globalSearchInput = document.getElementById('globalSearchInput');
|
|||
|
|
const searchResults = document.getElementById('searchResults');
|
|||
|
|
let searchHits = [], searchActive = -1;
|
|||
|
|
function openSearch() {
|
|||
|
|
if (!searchOverlay) return;
|
|||
|
|
searchOverlay.style.display = 'flex';
|
|||
|
|
globalSearchInput.value = '';
|
|||
|
|
runSearch('');
|
|||
|
|
requestAnimationFrame(() => globalSearchInput.focus());
|
|||
|
|
}
|
|||
|
|
function closeSearch() { if (searchOverlay) searchOverlay.style.display = 'none'; }
|
|||
|
|
function runSearch(qRaw) {
|
|||
|
|
const q = String(qRaw || '').trim().toLowerCase();
|
|||
|
|
const hits = [];
|
|||
|
|
const lists = visibleLists() || [];
|
|||
|
|
const scopeOf = (l) => [l.location, l.team].filter(Boolean).join(' · ');
|
|||
|
|
if (q) {
|
|||
|
|
const eq = (checklistData.equipment && checklistData.equipment.items) || {}; // gear first — troubleshooting
|
|||
|
|
// Editors see gear from EVERY campus here, and same-named entries (one per
|
|||
|
|
// campus, e.g. two "Ableton"s) are otherwise indistinguishable — tag each hit
|
|||
|
|
// with its scope so it's clear which location's gear it is BEFORE opening it.
|
|||
|
|
// Same rule as the list-tab badges: master + executives get the scope, members
|
|||
|
|
// only ever see their own scope so the tag would be redundant noise.
|
|||
|
|
const showGearScope = isMasterAdmin() || (currentUser && currentUser.role === 'executive');
|
|||
|
|
const gearSub = (e) => {
|
|||
|
|
if (!showGearScope) return 'Equipment';
|
|||
|
|
const parts = (e.scopeLocations || []).filter(Boolean)
|
|||
|
|
.concat((e.scopeTeams || []).filter(Boolean).map((t) => t + ' team'));
|
|||
|
|
return 'Equipment · ' + (parts.length ? parts.join(' · ') : 'everywhere');
|
|||
|
|
};
|
|||
|
|
Object.keys(eq).forEach((id) => { const e = eq[id]; if (((e.name || '') + ' ' + (e.note || '')).toLowerCase().indexOf(q) >= 0) hits.push({ group: 'Gear', type: 'gear', title: e.name || 'Gear', sub: gearSub(e), entry: e }); });
|
|||
|
|
lists.forEach((l) => (l.items || []).forEach((it) => {
|
|||
|
|
if (((it.title || '') + ' ' + (it.description || '')).toLowerCase().indexOf(q) >= 0) {
|
|||
|
|
const note = it.kind === 'note';
|
|||
|
|
hits.push({ group: note ? 'Notes' : 'Tasks', type: note ? 'note' : 'task', title: it.title || '(untitled)', sub: (note ? 'Note' : 'Task') + ' · ' + l.name, listId: l.id, itemId: it.id });
|
|||
|
|
}
|
|||
|
|
}));
|
|||
|
|
lists.forEach((l) => { if ((l.name || '').toLowerCase().indexOf(q) >= 0) hits.push({ group: 'Lists', type: 'list', title: l.name, sub: scopeOf(l) || 'List', listId: l.id }); });
|
|||
|
|
}
|
|||
|
|
searchHits = hits.slice(0, 60);
|
|||
|
|
searchActive = searchHits.length ? 0 : -1;
|
|||
|
|
renderSearchResults(q);
|
|||
|
|
}
|
|||
|
|
function renderSearchResults(q) {
|
|||
|
|
if (!q) { searchResults.innerHTML = '<div class="search-empty">Type to search gear, notes, tasks, and lists.</div>'; return; }
|
|||
|
|
if (!searchHits.length) { searchResults.innerHTML = '<div class="search-empty">No matches for “' + escapeHtml(q) + '”.</div>'; return; }
|
|||
|
|
const icon = { gear: '🔧', note: '📝', task: '✓', list: '📋' };
|
|||
|
|
let html = '', lastGroup = null;
|
|||
|
|
searchHits.forEach((h, i) => {
|
|||
|
|
if (h.group !== lastGroup) { lastGroup = h.group; html += '<div class="search-group">' + h.group + '</div>'; }
|
|||
|
|
html += '<div class="search-hit' + (i === searchActive ? ' active' : '') + '" data-hit="' + i + '"><span class="ic">' + (icon[h.type] || '•') + '</span><span class="main"><div class="t">' + escapeHtml(h.title) + '</div><div class="sub">' + escapeHtml(h.sub) + '</div></span></div>';
|
|||
|
|
});
|
|||
|
|
searchResults.innerHTML = html;
|
|||
|
|
}
|
|||
|
|
function openSearchHit(h) {
|
|||
|
|
if (!h) return;
|
|||
|
|
closeSearch();
|
|||
|
|
if (h.type === 'gear') { openEquipLightbox(h.entry.name, equipPhotosOf(h.entry), h.entry.note || '', h.entry.id, h.entry.docs || []); return; }
|
|||
|
|
if (h.listId) {
|
|||
|
|
setSelectedList(h.listId);
|
|||
|
|
if (h.itemId) { kbFocusId = h.itemId; setTimeout(() => { applyKbFocus(); const el = kbFocusedCard(); if (el) el.scrollIntoView({ block: 'center', behavior: 'smooth' }); }, 140); }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (searchOverlay && globalSearchInput && searchResults) {
|
|||
|
|
globalSearchInput.addEventListener('input', () => runSearch(globalSearchInput.value));
|
|||
|
|
globalSearchInput.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.key === 'Escape') { e.preventDefault(); closeSearch(); }
|
|||
|
|
else if (e.key === 'ArrowDown') { e.preventDefault(); if (searchHits.length) { searchActive = Math.min(searchHits.length - 1, searchActive + 1); renderSearchResults(globalSearchInput.value); } }
|
|||
|
|
else if (e.key === 'ArrowUp') { e.preventDefault(); if (searchHits.length) { searchActive = Math.max(0, searchActive - 1); renderSearchResults(globalSearchInput.value); } }
|
|||
|
|
else if (e.key === 'Enter') { e.preventDefault(); openSearchHit(searchHits[searchActive]); }
|
|||
|
|
});
|
|||
|
|
searchResults.addEventListener('click', (e) => { const el = e.target.closest('[data-hit]'); if (el) openSearchHit(searchHits[parseInt(el.getAttribute('data-hit'), 10)]); });
|
|||
|
|
searchOverlay.addEventListener('click', (e) => { if (e.target === searchOverlay) closeSearch(); });
|
|||
|
|
const sc = document.getElementById('searchClose'); if (sc) sc.addEventListener('click', closeSearch);
|
|||
|
|
const sb = document.getElementById('searchBtn'); if (sb) sb.addEventListener('click', openSearch);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ── Incident reports (gear problems) — volunteer report + editor triage ──
|
|||
|
|
const incidentModal = document.getElementById('incidentModal');
|
|||
|
|
const incidentGearRow = document.getElementById('incidentGearRow');
|
|||
|
|
const incidentGearName = document.getElementById('incidentGearName');
|
|||
|
|
const incidentSeverity = document.getElementById('incidentSeverity');
|
|||
|
|
const incidentWhat = document.getElementById('incidentWhat');
|
|||
|
|
const incidentDetails = document.getElementById('incidentDetails');
|
|||
|
|
const incidentReportingAs = document.getElementById('incidentReportingAs');
|
|||
|
|
const incidentSubmit = document.getElementById('incidentSubmit');
|
|||
|
|
let incidentGear = null; // { equipId, equipName } or null for a general report
|
|||
|
|
|
|||
|
|
function allIncidents() { return (checklistData && Array.isArray(checklistData.incidents)) ? checklistData.incidents : []; }
|
|||
|
|
function openIncidentsFor(equipId) { return allIncidents().filter((i) => i.status === 'open' && equipId && i.equipId === equipId); }
|
|||
|
|
function openIncidentCount() { return allIncidents().filter((i) => i.status === 'open').length; }
|
|||
|
|
function timeAgo(iso) {
|
|||
|
|
if (!iso) return '';
|
|||
|
|
const then = new Date(iso).getTime(); if (isNaN(then)) return '';
|
|||
|
|
const s = Math.max(0, Math.round((Date.now() - then) / 1000));
|
|||
|
|
if (s < 60) return 'just now';
|
|||
|
|
const m = Math.round(s / 60); if (m < 60) return m + 'm ago';
|
|||
|
|
const h = Math.round(m / 60); if (h < 24) return h + 'h ago';
|
|||
|
|
const d = Math.round(h / 24); if (d < 7) return d + 'd ago';
|
|||
|
|
return new Date(iso).toLocaleDateString();
|
|||
|
|
}
|
|||
|
|
function setSeverity(sev) {
|
|||
|
|
if (!incidentSeverity) return;
|
|||
|
|
incidentSeverity.querySelectorAll('.sev-btn').forEach((b) => b.classList.toggle('is-selected', b.getAttribute('data-sev') === sev));
|
|||
|
|
}
|
|||
|
|
function currentSeverity() {
|
|||
|
|
const sel = incidentSeverity && incidentSeverity.querySelector('.sev-btn.is-selected');
|
|||
|
|
return (sel && sel.getAttribute('data-sev')) || 'minor';
|
|||
|
|
}
|
|||
|
|
function openIncidentModal(gear) {
|
|||
|
|
if (!incidentModal) return;
|
|||
|
|
incidentGear = gear || null;
|
|||
|
|
if (incidentGearRow) {
|
|||
|
|
if (incidentGear && incidentGear.equipName) { incidentGearRow.style.display = ''; incidentGearName.textContent = incidentGear.equipName; }
|
|||
|
|
else incidentGearRow.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
setSeverity('minor');
|
|||
|
|
if (incidentWhat) incidentWhat.value = '';
|
|||
|
|
if (incidentDetails) incidentDetails.value = '';
|
|||
|
|
// On a shared team login, attribute to whoever's checking (if they've tapped in).
|
|||
|
|
if (incidentReportingAs) {
|
|||
|
|
if (currentUser && currentUser.role === 'user' && activePerson) {
|
|||
|
|
incidentReportingAs.style.display = ''; incidentReportingAs.textContent = 'Reporting as ' + activePerson;
|
|||
|
|
} else incidentReportingAs.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
incidentModal.style.display = 'flex';
|
|||
|
|
requestAnimationFrame(() => { if (incidentWhat) incidentWhat.focus(); });
|
|||
|
|
}
|
|||
|
|
function closeIncidentModal() { if (incidentModal) closeOverlay(incidentModal); }
|
|||
|
|
async function submitIncident() {
|
|||
|
|
const what = (incidentWhat && incidentWhat.value || '').trim();
|
|||
|
|
if (!what && !(incidentGear && incidentGear.equipName)) { showToast('Tell us what’s wrong first.', 'error'); if (incidentWhat) incidentWhat.focus(); return; }
|
|||
|
|
const severity = currentSeverity();
|
|||
|
|
const body = {
|
|||
|
|
severity, what,
|
|||
|
|
details: (incidentDetails && incidentDetails.value || '').trim(),
|
|||
|
|
equipId: incidentGear ? (incidentGear.equipId || '') : '',
|
|||
|
|
equipName: incidentGear ? (incidentGear.equipName || '') : '',
|
|||
|
|
listId: (typeof getCurrentList === 'function' && getCurrentList()) ? getCurrentList().id : ''
|
|||
|
|
};
|
|||
|
|
if (currentUser && currentUser.role === 'user' && activePerson) body.by = activePerson;
|
|||
|
|
if (incidentSubmit) { incidentSubmit.disabled = true; incidentSubmit.textContent = 'Sending…'; }
|
|||
|
|
try {
|
|||
|
|
const r = await apiPost('/api/incidents', body);
|
|||
|
|
closeIncidentModal();
|
|||
|
|
showToast(severity === 'down'
|
|||
|
|
? (r && r.emailed ? '🔴 Reported — the team has been emailed.' : '🔴 Reported. (No email recipients set — it’s in the report.)')
|
|||
|
|
: '🟡 Thanks — logged for the report.', 'success');
|
|||
|
|
await refreshState({ showToastOnError: false }); // pull the new incident into state
|
|||
|
|
if (equipModal && equipModal.style.display === 'flex' && equipGalleryEquipId) renderEquipIssues(equipGalleryEquipId);
|
|||
|
|
updateIncidentsBadge();
|
|||
|
|
} catch (err) {
|
|||
|
|
showToast(err && err.message ? err.message : 'Could not send the report.', 'error');
|
|||
|
|
} finally {
|
|||
|
|
if (incidentSubmit) { incidentSubmit.disabled = false; incidentSubmit.textContent = 'Send report'; }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Issue history shown inside the gear lightbox (open issues only; volunteer-facing).
|
|||
|
|
function renderEquipIssues(equipId) {
|
|||
|
|
const el = document.getElementById('equipIssues');
|
|||
|
|
if (!el) return;
|
|||
|
|
const open = openIncidentsFor(equipId);
|
|||
|
|
if (!open.length) { el.innerHTML = ''; el.style.display = 'none'; return; }
|
|||
|
|
el.style.display = '';
|
|||
|
|
const canFix = isEditor();
|
|||
|
|
let html = '<div class="equip-issues-head">⚠ Known issues (' + open.length + ')</div>';
|
|||
|
|
open.forEach((inc) => {
|
|||
|
|
html += '<div class="equip-issue ' + (inc.severity === 'down' ? 'down' : 'minor') + '">'
|
|||
|
|
+ '<span class="ei-sev">' + (inc.severity === 'down' ? '🔴' : '🟡') + '</span>'
|
|||
|
|
+ '<span class="ei-body"><span class="ei-what">' + escapeHtml(inc.what || 'Reported problem') + '</span>'
|
|||
|
|
+ (inc.details ? '<span class="ei-details">' + escapeHtml(inc.details) + '</span>' : '')
|
|||
|
|
+ '<span class="ei-meta">' + escapeHtml(inc.by || '') + ' · ' + escapeHtml(timeAgo(inc.ts)) + '</span></span>'
|
|||
|
|
+ (canFix ? '<button class="btn btn-secondary btn-small ei-resolve" data-incident-id="' + inc.id + '">Resolve</button>' : '')
|
|||
|
|
+ '</div>';
|
|||
|
|
});
|
|||
|
|
el.innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Editor triage view — every incident the user can see, resolve/reopen.
|
|||
|
|
const incidentsModal = document.getElementById('incidentsModal');
|
|||
|
|
const incidentsList = document.getElementById('incidentsList');
|
|||
|
|
const incidentsOpenOnly = document.getElementById('incidentsOpenOnly');
|
|||
|
|
const incidentsSearch = document.getElementById('incidentsSearch');
|
|||
|
|
function openIncidents() {
|
|||
|
|
if (!incidentsModal) return;
|
|||
|
|
incidentsModal.style.display = 'flex';
|
|||
|
|
drawIncidents();
|
|||
|
|
}
|
|||
|
|
function closeIncidents() { if (incidentsModal) closeOverlay(incidentsModal); }
|
|||
|
|
function drawIncidents() {
|
|||
|
|
if (!incidentsList) return;
|
|||
|
|
const openOnly = incidentsOpenOnly ? incidentsOpenOnly.checked : true;
|
|||
|
|
const q = (incidentsSearch && incidentsSearch.value || '').trim().toLowerCase();
|
|||
|
|
let rows = allIncidents().slice();
|
|||
|
|
if (openOnly) rows = rows.filter((i) => i.status === 'open');
|
|||
|
|
if (q) rows = rows.filter((i) => ((i.equipName || '') + ' ' + (i.what || '') + ' ' + (i.details || '') + ' ' + (i.location || '') + ' ' + (i.team || '') + ' ' + (i.by || '')).toLowerCase().indexOf(q) >= 0);
|
|||
|
|
// Open first (down before minor), then by recency.
|
|||
|
|
rows.sort((a, b) => {
|
|||
|
|
if ((a.status === 'open') !== (b.status === 'open')) return a.status === 'open' ? -1 : 1;
|
|||
|
|
if (a.status === 'open' && a.severity !== b.severity) return a.severity === 'down' ? -1 : 1;
|
|||
|
|
return String(b.ts).localeCompare(String(a.ts));
|
|||
|
|
});
|
|||
|
|
if (!rows.length) { incidentsList.innerHTML = '<div class="incidents-empty">No gear issues' + (openOnly ? ' open' : '') + ' in your area. 🎉</div>'; return; }
|
|||
|
|
incidentsList.innerHTML = rows.map((inc) => {
|
|||
|
|
const scope = [inc.location, inc.team].filter(Boolean).join(' · ') || 'Unassigned';
|
|||
|
|
const resolved = inc.status === 'resolved';
|
|||
|
|
return '<div class="incident-row ' + (resolved ? 'is-resolved' : inc.severity) + '">'
|
|||
|
|
+ '<span class="ir-sev">' + (resolved ? '✅' : (inc.severity === 'down' ? '🔴' : '🟡')) + '</span>'
|
|||
|
|
+ '<div class="ir-main"><div class="ir-title">' + escapeHtml(inc.equipName || inc.what || 'Gear issue') + ' <span class="ir-scope">' + escapeHtml(scope) + '</span></div>'
|
|||
|
|
+ (inc.equipName && inc.what ? '<div class="ir-what">' + escapeHtml(inc.what) + '</div>' : '')
|
|||
|
|
+ (inc.details ? '<div class="ir-details">' + escapeHtml(inc.details) + '</div>' : '')
|
|||
|
|
+ '<div class="ir-meta">' + escapeHtml(inc.by || '') + ' · ' + escapeHtml(timeAgo(inc.ts))
|
|||
|
|
+ (resolved ? ' · resolved by ' + escapeHtml(inc.resolvedBy || '?') + ' ' + escapeHtml(timeAgo(inc.resolvedAt)) : '') + '</div></div>'
|
|||
|
|
+ '<button class="btn btn-secondary btn-small ir-action" data-incident-id="' + inc.id + '" data-reopen="' + (resolved ? '1' : '0') + '">' + (resolved ? 'Reopen' : 'Resolve') + '</button>'
|
|||
|
|
+ '</div>';
|
|||
|
|
}).join('');
|
|||
|
|
}
|
|||
|
|
async function resolveIncident(id, reopen) {
|
|||
|
|
try {
|
|||
|
|
await apiPost('/api/incidents/' + encodeURIComponent(id) + '/resolve', { reopen: !!reopen });
|
|||
|
|
await refreshState({ showToastOnError: false });
|
|||
|
|
drawIncidents();
|
|||
|
|
updateIncidentsBadge();
|
|||
|
|
if (equipModal && equipModal.style.display === 'flex' && equipGalleryEquipId) renderEquipIssues(equipGalleryEquipId);
|
|||
|
|
showToast(reopen ? 'Reopened.' : 'Marked resolved.', 'success');
|
|||
|
|
} catch (err) { showToast(err && err.message ? err.message : 'Could not update.', 'error'); }
|
|||
|
|
}
|
|||
|
|
function updateIncidentsBadge() {
|
|||
|
|
const badge = document.getElementById('incidentsBtnCount');
|
|||
|
|
if (!badge) return;
|
|||
|
|
const n = openIncidentCount();
|
|||
|
|
if (n > 0) { badge.textContent = n; badge.style.display = ''; }
|
|||
|
|
else badge.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Wiring
|
|||
|
|
{ const b = document.getElementById('reportIssueBtn'); if (b) b.addEventListener('click', () => openIncidentModal(null)); }
|
|||
|
|
{ const b = document.getElementById('equipReportBtn'); if (b) b.addEventListener('click', () => openIncidentModal(equipGalleryEquipId ? { equipId: equipGalleryEquipId, equipName: equipGalleryName } : { equipName: equipGalleryName })); }
|
|||
|
|
{ const b = document.getElementById('incidentsBtn'); if (b) b.addEventListener('click', openIncidents); } // menu panel auto-closes on button click
|
|||
|
|
{ const b = document.getElementById('incidentClose'); if (b) b.addEventListener('click', closeIncidentModal); }
|
|||
|
|
{ const b = document.getElementById('incidentsClose'); if (b) b.addEventListener('click', closeIncidents); }
|
|||
|
|
if (incidentSeverity) incidentSeverity.addEventListener('click', (e) => { const btn = e.target.closest('.sev-btn'); if (btn) setSeverity(btn.getAttribute('data-sev')); });
|
|||
|
|
if (incidentSubmit) incidentSubmit.addEventListener('click', submitIncident);
|
|||
|
|
if (incidentWhat) incidentWhat.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); submitIncident(); } });
|
|||
|
|
if (incidentsOpenOnly) incidentsOpenOnly.addEventListener('change', drawIncidents);
|
|||
|
|
if (incidentsSearch) incidentsSearch.addEventListener('input', drawIncidents);
|
|||
|
|
if (incidentsList) incidentsList.addEventListener('click', (e) => { const b = e.target.closest('.ir-action'); if (b) resolveIncident(b.getAttribute('data-incident-id'), b.getAttribute('data-reopen') === '1'); });
|
|||
|
|
{ const el = document.getElementById('equipIssues'); if (el) el.addEventListener('click', (e) => { const b = e.target.closest('.ei-resolve'); if (b) resolveIncident(b.getAttribute('data-incident-id'), false); }); }
|
|||
|
|
|
|||
|
|
// ── Reliability dashboard — gear ranked by reported issues (read-only, over the scoped incidents) ──
|
|||
|
|
const reliabilityModal = document.getElementById('reliabilityModal');
|
|||
|
|
const reliabilityList = document.getElementById('reliabilityList');
|
|||
|
|
const reliabilityOpenFirst = document.getElementById('reliabilityOpenFirst');
|
|||
|
|
const reliabilitySummary = document.getElementById('reliabilitySummary');
|
|||
|
|
const RELIABILITY_WEEKS = 8;
|
|||
|
|
function openReliability() { if (!reliabilityModal) return; reliabilityModal.style.display = 'flex'; drawReliability(); }
|
|||
|
|
function closeReliability() { if (reliabilityModal) closeOverlay(reliabilityModal); }
|
|||
|
|
function drawReliability() {
|
|||
|
|
if (!reliabilityList) return;
|
|||
|
|
const incs = allIncidents();
|
|||
|
|
const groups = {};
|
|||
|
|
incs.forEach((i) => {
|
|||
|
|
const key = i.equipId || ('name:' + (i.equipName || i.what || 'Unknown'));
|
|||
|
|
const g = groups[key] || (groups[key] = { name: i.equipName || i.what || 'Unknown gear', equipId: i.equipId || '', total: 0, open: 0, down: 0, last: '', scopes: {}, items: [] });
|
|||
|
|
g.total++; if (i.status === 'open') g.open++; if (i.severity === 'down') g.down++;
|
|||
|
|
if (!g.last || String(i.ts) > g.last) g.last = i.ts;
|
|||
|
|
const sc = [i.location, i.team].filter(Boolean).join(' · '); if (sc) g.scopes[sc] = 1;
|
|||
|
|
g.items.push(i);
|
|||
|
|
});
|
|||
|
|
const openFirst = reliabilityOpenFirst ? reliabilityOpenFirst.checked : true;
|
|||
|
|
const rows = Object.values(groups).sort((a, b) => {
|
|||
|
|
if (openFirst && b.open !== a.open) return b.open - a.open;
|
|||
|
|
if (b.total !== a.total) return b.total - a.total;
|
|||
|
|
return String(b.last).localeCompare(String(a.last));
|
|||
|
|
});
|
|||
|
|
if (reliabilitySummary) reliabilitySummary.textContent = rows.length ? (rows.length + (rows.length === 1 ? ' item · ' : ' items · ') + incs.length + (incs.length === 1 ? ' report' : ' reports')) : '';
|
|||
|
|
if (!rows.length) { reliabilityList.innerHTML = '<div class="incidents-empty">No gear issues reported yet in your area. 🎉</div>'; return; }
|
|||
|
|
const weekAgo = (ts) => Math.floor((Date.now() - new Date(ts).getTime()) / (7 * 86400000));
|
|||
|
|
reliabilityList.innerHTML = rows.map((g) => {
|
|||
|
|
const buckets = new Array(RELIABILITY_WEEKS).fill(0);
|
|||
|
|
g.items.forEach((i) => { const w = weekAgo(i.ts); if (w >= 0 && w < RELIABILITY_WEEKS) buckets[RELIABILITY_WEEKS - 1 - w]++; });
|
|||
|
|
const max = Math.max(1, ...buckets);
|
|||
|
|
const spark = buckets.map((c, idx) => '<span class="spark-bar' + (c ? ' has' : '') + '" style="height:' + Math.round(3 + (c / max) * 21) + 'px" title="' + c + ' in week ' + (RELIABILITY_WEEKS - idx) + '"></span>').join('');
|
|||
|
|
const scopes = Object.keys(g.scopes).join(', ');
|
|||
|
|
const badge = g.open ? '<span class="rr-open">' + g.open + ' open</span>' : '<span class="rr-clear">clear</span>';
|
|||
|
|
return '<div class="reliability-row' + (g.open ? '' : ' is-clear') + '" data-gear="' + escapeAttr(g.name) + '">'
|
|||
|
|
+ '<div class="rr-main"><div class="rr-name">' + escapeHtml(g.name) + (scopes ? ' <span class="rr-scope">' + escapeHtml(scopes) + '</span>' : '') + '</div>'
|
|||
|
|
+ '<div class="rr-meta">' + g.total + (g.total === 1 ? ' report' : ' reports') + (g.down ? ' · ' + g.down + ' down' : '') + ' · last ' + escapeHtml(timeAgo(g.last)) + '</div></div>'
|
|||
|
|
+ '<div class="rr-spark" title="Issues over the last ' + RELIABILITY_WEEKS + ' weeks">' + spark + '</div>'
|
|||
|
|
+ '<div class="rr-badge">' + badge + '</div></div>';
|
|||
|
|
}).join('');
|
|||
|
|
}
|
|||
|
|
{ const b = document.getElementById('reliabilityBtn'); if (b) b.addEventListener('click', openReliability); }
|
|||
|
|
{ const b = document.getElementById('reliabilityClose'); if (b) b.addEventListener('click', closeReliability); }
|
|||
|
|
if (reliabilityOpenFirst) reliabilityOpenFirst.addEventListener('change', drawReliability);
|
|||
|
|
// Click a gear → open its full issue history in the triage view.
|
|||
|
|
if (reliabilityList) reliabilityList.addEventListener('click', (e) => {
|
|||
|
|
const row = e.target.closest('.reliability-row'); if (!row) return;
|
|||
|
|
closeReliability();
|
|||
|
|
if (incidentsSearch) incidentsSearch.value = row.getAttribute('data-gear') || '';
|
|||
|
|
if (incidentsOpenOnly) incidentsOpenOnly.checked = false;
|
|||
|
|
openIncidents();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (addTaskCancel) addTaskCancel.addEventListener('click', closeAddTask);
|
|||
|
|
// Intentionally NO click-outside-to-close: an accidental backdrop tap must not
|
|||
|
|
// discard a half-typed form. Close only via the Close button (true for all the
|
|||
|
|
// edit/data-entry modals below — only the photo lightbox closes on click-off).
|
|||
|
|
addListSelect.addEventListener('change', (e) => { addTargetListId = e.target.value; populateItemGroupSelect(addTargetListId); });
|
|||
|
|
// Column-header ＋ buttons: open Add Task with that section preselected.
|
|||
|
|
document.addEventListener('click', (e) => {
|
|||
|
|
const b = e.target && e.target.closest && e.target.closest('[data-add-task-group]');
|
|||
|
|
if (!b) return;
|
|||
|
|
addGroupPreset = b.getAttribute('data-add-task-group');
|
|||
|
|
openAddTask();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
moveItemSave.addEventListener('click', handleMoveItemSave);
|
|||
|
|
moveItemCancel.addEventListener('click', closeMoveItemModal);
|
|||
|
|
|
|||
|
|
listModalSave.addEventListener('click', handleModalSave);
|
|||
|
|
listModalCancel.addEventListener('click', closeListModal);
|
|||
|
|
if (listModalColors) listModalColors.addEventListener('click', (e) => {
|
|||
|
|
const sw = e.target.closest('.swatch');
|
|||
|
|
// The custom-color swatch drives itself via its <input type="color"> below.
|
|||
|
|
if (sw && !sw.classList.contains('swatch-custom')) setListModalColor(sw.dataset.color || '');
|
|||
|
|
});
|
|||
|
|
const listModalCustomColor = document.getElementById('listModalCustomColor');
|
|||
|
|
if (listModalCustomColor) ['input', 'change'].forEach((ev) =>
|
|||
|
|
listModalCustomColor.addEventListener(ev, (e) => setListModalColor(e.target.value)));
|
|||
|
|
listModalInput.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.key === 'Enter') { e.preventDefault(); handleModalSave(); }
|
|||
|
|
else if (e.key === 'Escape') { e.preventDefault(); closeListModal(); }
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
editIsRecurring.addEventListener('change', () => {
|
|||
|
|
editRecurrenceOptions.style.display = editIsRecurring.checked ? 'block' : 'none';
|
|||
|
|
});
|
|||
|
|
editModalSave.addEventListener('click', saveEditTask);
|
|||
|
|
editModalCancel.addEventListener('click', closeEditModal);
|
|||
|
|
|
|||
|
|
userBadge.addEventListener('click', () => {
|
|||
|
|
// Local mode has no account to sign out of — the "user" is a synthetic session this
|
|||
|
|
// device created for itself. Signing out would strand you on a password sheet for a
|
|||
|
|
// password that only exists inside the app, so the badge offers the one thing that
|
|||
|
|
// actually makes sense here: leaving on-device mode.
|
|||
|
|
const N = window.CHECKLIST_NATIVE;
|
|||
|
|
if (N && N.mode === 'local') { switchAppMode(); return; }
|
|||
|
|
if (!sessionToken) { openLogin(); return; }
|
|||
|
|
if (confirm('Sign out?')) logout();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
loginSubmit.addEventListener('click', submitLogin);
|
|||
|
|
if (loginPasswordToggle && loginPassword) loginPasswordToggle.addEventListener('click', () => {
|
|||
|
|
const show = loginPassword.type === 'password';
|
|||
|
|
loginPassword.type = show ? 'text' : 'password';
|
|||
|
|
loginPasswordToggle.textContent = show ? '🙈' : '🐵';
|
|||
|
|
const label = show ? 'Hide password' : 'Show password';
|
|||
|
|
loginPasswordToggle.setAttribute('aria-label', label);
|
|||
|
|
loginPasswordToggle.title = label;
|
|||
|
|
loginPassword.focus();
|
|||
|
|
});
|
|||
|
|
[loginLocation, loginTeam, loginExecName, loginPassword].forEach((el) => el && el.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.key === 'Enter') { e.preventDefault(); submitLogin(); }
|
|||
|
|
}));
|
|||
|
|
if (loginLocation) loginLocation.addEventListener('change', updateLoginTeamVisibility);
|
|||
|
|
if (adminFilterLocation) adminFilterLocation.addEventListener('change', (e) => { adminFilterLoc = e.target.value; renderLists(); });
|
|||
|
|
if (adminFilterTeamSel) adminFilterTeamSel.addEventListener('change', (e) => { adminFilterTeam = e.target.value; renderLists(); });
|
|||
|
|
if (listTabsToggle) listTabsToggle.addEventListener('click', () => {
|
|||
|
|
animateListsHidden(!document.body.classList.contains('lists-hidden'));
|
|||
|
|
});
|
|||
|
|
if (listViewToggle) listViewToggle.addEventListener('click', () => {
|
|||
|
|
switchListView(!document.body.classList.contains('tree-view'));
|
|||
|
|
});
|
|||
|
|
if (listTree) listTree.addEventListener('click', (e) => {
|
|||
|
|
const toggle = e.target.closest('[data-tree-toggle]');
|
|||
|
|
if (toggle) { const k = toggle.dataset.treeToggle; treeCollapsed[k] = !treeCollapsed[k]; renderListTree(); return; }
|
|||
|
|
const leaf = e.target.closest('[data-tree-list]');
|
|||
|
|
if (leaf) setSelectedList(leaf.dataset.treeList);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
manageUsersBtn.addEventListener('click', openUserMgmt);
|
|||
|
|
userMgmtClose.addEventListener('click', () => { closeOverlay(userMgmtModal); });
|
|||
|
|
|
|||
|
|
// Equipment manager (master) + photo lightbox wiring
|
|||
|
|
if (checkerChip) checkerChip.addEventListener('click', openCheckerModal);
|
|||
|
|
if (checkerClose) checkerClose.addEventListener('click', () => { closeOverlay(checkerModal); });
|
|||
|
|
if (checkerModal) checkerModal.addEventListener('click', (e) => { if (e.target === checkerModal) closeOverlay(checkerModal); });
|
|||
|
|
if (checkerSelect) checkerSelect.addEventListener('change', onCheckerSelectChange);
|
|||
|
|
if (checkerAddBtn) checkerAddBtn.addEventListener('click', addRosterName);
|
|||
|
|
if (checkerNewName) checkerNewName.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); addRosterName(); } });
|
|||
|
|
if (checkerClear) checkerClear.addEventListener('click', () => { setActivePerson(''); closeOverlay(checkerModal); });
|
|||
|
|
// Roster manager (master + execs)
|
|||
|
|
if (rosterBtn) rosterBtn.addEventListener('click', openRosterMgmt);
|
|||
|
|
if (rosterSearch) rosterSearch.addEventListener('input', drawRosterMgmt);
|
|||
|
|
if (rosterClose) rosterClose.addEventListener('click', () => { closeOverlay(rosterModal); });
|
|||
|
|
if (rosterModal) rosterModal.addEventListener('click', (e) => { if (e.target === rosterModal) closeOverlay(rosterModal); });
|
|||
|
|
if (rosterBody) {
|
|||
|
|
rosterBody.addEventListener('click', (e) => {
|
|||
|
|
const del = e.target.closest('.roster-del');
|
|||
|
|
if (del) { rosterRemove(del.dataset.rosterUser, del.dataset.rosterName); return; }
|
|||
|
|
const addBtn = e.target.closest('.roster-add-btn');
|
|||
|
|
if (addBtn) { const inp = rosterBody.querySelector(`.roster-add-input[data-roster-add-user="${CSS.escape(addBtn.dataset.rosterAddUser)}"]`); rosterAdd(addBtn.dataset.rosterAddUser, inp && inp.value); }
|
|||
|
|
});
|
|||
|
|
rosterBody.addEventListener('keydown', (e) => {
|
|||
|
|
const inp = e.target.closest('.roster-add-input');
|
|||
|
|
if (inp && e.key === 'Enter') { e.preventDefault(); rosterAdd(inp.dataset.rosterAddUser, inp.value); }
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (overviewBtn) overviewBtn.addEventListener('click', openOverview);
|
|||
|
|
if (overviewClose) overviewClose.addEventListener('click', () => { closeOverlay(overviewModal); });
|
|||
|
|
if (overviewModal) overviewModal.addEventListener('click', (e) => { if (e.target === overviewModal) closeOverlay(overviewModal); });
|
|||
|
|
if (overviewBody) overviewBody.addEventListener('click', (e) => {
|
|||
|
|
const row = e.target.closest('[data-overview-list]');
|
|||
|
|
if (row) { setSelectedList(row.dataset.overviewList); closeOverlay(overviewModal); }
|
|||
|
|
});
|
|||
|
|
if (activityBtn) activityBtn.addEventListener('click', openActivity);
|
|||
|
|
if (activityClose) activityClose.addEventListener('click', () => { stopActivityAutoRefresh(); closeOverlay(activityModal); });
|
|||
|
|
if (activityModal) activityModal.addEventListener('click', (e) => { if (e.target === activityModal) { stopActivityAutoRefresh(); closeOverlay(activityModal); } });
|
|||
|
|
if (activitySearch) activitySearch.addEventListener('input', () => drawActivity());
|
|||
|
|
if (listModalTemplate) listModalTemplate.addEventListener('change', onTemplatePick);
|
|||
|
|
if (equipMgmtBtn) equipMgmtBtn.addEventListener('click', openEquipMgmt);
|
|||
|
|
if (equipMgmtClose) equipMgmtClose.addEventListener('click', () => { closeEquipCamera(); closeOverlay(equipMgmtModal); });
|
|||
|
|
if (equipSave) equipSave.addEventListener('click', saveEquipment);
|
|||
|
|
if (equipCancelEdit) equipCancelEdit.addEventListener('click', resetEquipForm);
|
|||
|
|
if (equipAddToggle) equipAddToggle.addEventListener('click', () => {
|
|||
|
|
const open = !!(equipAddSection && equipAddSection.classList.contains('open'));
|
|||
|
|
if (open) {
|
|||
|
|
// Collapsing while editing = abandon the edit, so we never keep a live
|
|||
|
|
// equipEditId behind a collapsed "Add equipment" button (which could later
|
|||
|
|
// PUT-overwrite the wrong item). resetEquipForm() also collapses.
|
|||
|
|
if (equipEditId) resetEquipForm(); else setEquipAddOpen(false);
|
|||
|
|
} else {
|
|||
|
|
setEquipAddOpen(true);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if (equipFile) equipFile.addEventListener('change', handleEquipFile);
|
|||
|
|
// In-app camera. Hide the button entirely if this browser/context can't use it
|
|||
|
|
// (e.g. non-HTTPS without localhost) so it's never a dead button.
|
|||
|
|
if (equipCamBtn) {
|
|||
|
|
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
|||
|
|
equipCamBtn.addEventListener('click', openEquipCamera);
|
|||
|
|
} else { equipCamBtn.style.display = 'none'; }
|
|||
|
|
}
|
|||
|
|
if (equipCamCapture) equipCamCapture.addEventListener('click', captureEquipPhoto);
|
|||
|
|
if (equipCamSwitch) equipCamSwitch.addEventListener('click', switchEquipCamera);
|
|||
|
|
if (equipCamCancel) equipCamCancel.addEventListener('click', closeEquipCamera);
|
|||
|
|
if (equipCamModal) equipCamModal.addEventListener('click', (e) => { if (e.target === equipCamModal) closeEquipCamera(); });
|
|||
|
|
// "Add" a pasted/typed image URL to the photo gallery (or press Enter in the field).
|
|||
|
|
if (equipAddUrl) equipAddUrl.addEventListener('click', addEquipUrlFromInput);
|
|||
|
|
if (equipImage) equipImage.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); addEquipUrlFromInput(); } });
|
|||
|
|
// The photo gallery: caption edits, remove, and drag-reorder.
|
|||
|
|
if (equipPhotos) {
|
|||
|
|
equipPhotos.addEventListener('click', (e) => {
|
|||
|
|
const rm = e.target.closest('[data-equip-photo-remove]');
|
|||
|
|
if (rm) { const i = parseInt(rm.getAttribute('data-equip-photo-remove'), 10); equipFormPhotos.splice(i, 1); renderEquipPhotos(); }
|
|||
|
|
});
|
|||
|
|
equipPhotos.addEventListener('input', (e) => {
|
|||
|
|
const cap = e.target.closest('input[data-equip-photo-cap]');
|
|||
|
|
if (cap) { const i = parseInt(cap.getAttribute('data-equip-photo-cap'), 10); if (equipFormPhotos[i]) equipFormPhotos[i].caption = cap.value; }
|
|||
|
|
});
|
|||
|
|
setupEquipPhotoReorder();
|
|||
|
|
}
|
|||
|
|
// Attached documents: upload, pasted link, rename, remove.
|
|||
|
|
if (equipDocFile) equipDocFile.addEventListener('change', handleEquipDocFile);
|
|||
|
|
if (equipDocAdd) equipDocAdd.addEventListener('click', addEquipDocUrlFromInput);
|
|||
|
|
if (equipDocUrl) equipDocUrl.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); addEquipDocUrlFromInput(); } });
|
|||
|
|
if (equipDocs) {
|
|||
|
|
equipDocs.addEventListener('click', (e) => {
|
|||
|
|
const rm = e.target.closest('[data-equip-doc-remove]');
|
|||
|
|
if (rm) { const i = parseInt(rm.getAttribute('data-equip-doc-remove'), 10); equipFormDocs.splice(i, 1); renderEquipDocs(); }
|
|||
|
|
});
|
|||
|
|
equipDocs.addEventListener('input', (e) => {
|
|||
|
|
const nm = e.target.closest('input[data-equip-doc-name]');
|
|||
|
|
if (nm) { const i = parseInt(nm.getAttribute('data-equip-doc-name'), 10); if (equipFormDocs[i]) equipFormDocs[i].name = nm.value; }
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (equipSearch) equipSearch.addEventListener('input', drawEquipList);
|
|||
|
|
if (equipMgmtList) equipMgmtList.addEventListener('click', handleEquipListClick);
|
|||
|
|
if (equipModalClose) equipModalClose.addEventListener('click', closeEquipLightbox);
|
|||
|
|
if (equipModal) equipModal.addEventListener('click', (e) => { if (e.target === equipModal) closeEquipLightbox(); });
|
|||
|
|
// Tap any equipment word anywhere → show its photo.
|
|||
|
|
document.addEventListener('click', (e) => {
|
|||
|
|
const term = e.target.closest && e.target.closest('.equip-term');
|
|||
|
|
if (!term) return;
|
|||
|
|
const id = term.getAttribute('data-equip-id');
|
|||
|
|
const entry = id && checklistData.equipment && checklistData.equipment.items && checklistData.equipment.items[id];
|
|||
|
|
// Prefer the entry's full photo list; fall back to the single inline image
|
|||
|
|
// (e.g. a [[label|url]] marker that doesn't resolve to a library entry).
|
|||
|
|
const single = term.getAttribute('data-equip-image');
|
|||
|
|
const photos = entry ? equipPhotosOf(entry) : (single ? [{ url: single, caption: '' }] : []);
|
|||
|
|
openEquipLightbox(term.getAttribute('data-equip-name'), photos, term.getAttribute('data-equip-note'), id || '', (entry && entry.docs) || []);
|
|||
|
|
});
|
|||
|
|
// Toggle an inline checkbox (LIVE list only). Only a tap ON THE BOX itself checks the
|
|||
|
|
// item — tapping the label (including an equipment word) never toggles, so you can tap a
|
|||
|
|
// gear name for its photo with no risk of an accidental check-off. Keyboard toggles the
|
|||
|
|
// focused row (deliberate, so it's not restricted to the box). No <label> wrapper.
|
|||
|
|
function taskTargetFrom(el, requireBox) {
|
|||
|
|
if (!el || !el.closest) return null;
|
|||
|
|
if (requireBox && !el.closest('.md-task-box')) return null;
|
|||
|
|
const row = el.closest('.md-task');
|
|||
|
|
if (!row || !row.closest('.checklist-item-description')) return null; // live view only
|
|||
|
|
const card = row.closest('.checklist-item');
|
|||
|
|
if (card && card.getAttribute('data-kind') === 'note') return null; // a note's boxes are inert (backstops the server no-op)
|
|||
|
|
const itemId = card && card.getAttribute('data-item-id');
|
|||
|
|
const idx = parseInt(row.getAttribute('data-task-index'), 10);
|
|||
|
|
if (!itemId || isNaN(idx)) return null;
|
|||
|
|
return { row, itemId, idx };
|
|||
|
|
}
|
|||
|
|
document.addEventListener('click', (e) => {
|
|||
|
|
const t = taskTargetFrom(e.target, true); // pointer: the BOX only
|
|||
|
|
if (t) taskToggle(t.itemId, t.idx, !t.row.classList.contains('is-done'));
|
|||
|
|
});
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.key !== ' ' && e.key !== 'Enter') return;
|
|||
|
|
const t = taskTargetFrom(e.target, false); // keyboard: the focused row
|
|||
|
|
if (t) { e.preventDefault(); taskToggle(t.itemId, t.idx, !t.row.classList.contains('is-done')); }
|
|||
|
|
});
|
|||
|
|
// Collapse/expand a task card: the chevron <button> (also handles Space/Enter natively),
|
|||
|
|
// or a tap anywhere on a collapsible header EXCEPT the completion checkbox, the progress
|
|||
|
|
// pill, or any other interactive control — those keep their own behavior.
|
|||
|
|
document.addEventListener('click', (e) => {
|
|||
|
|
const t = e.target; if (!t || !t.closest) return;
|
|||
|
|
let card = null;
|
|||
|
|
const btn = t.closest('.collapse-toggle');
|
|||
|
|
if (btn) card = btn.closest('.checklist-item');
|
|||
|
|
else {
|
|||
|
|
const header = t.closest('.checklist-item-header.is-collapsible');
|
|||
|
|
if (header && !t.closest('input,[data-action],button,a,label,.equip-term,.md-task,.subtask-parent')) {
|
|||
|
|
card = header.closest('.checklist-item');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (card) toggleCollapse(card);
|
|||
|
|
});
|
|||
|
|
// Request photos: tap a thumbnail → the full pan/zoom lightbox gallery.
|
|||
|
|
document.addEventListener('click', (e) => {
|
|||
|
|
const b = e.target && e.target.closest && e.target.closest('.request-photo-open');
|
|||
|
|
if (!b) return;
|
|||
|
|
const itemId = b.getAttribute('data-req-photos');
|
|||
|
|
const ownerList = (checklistData.lists || []).find((l) => (l.items || []).some((i) => i.id === itemId));
|
|||
|
|
const item = ownerList && ownerList.items.find((i) => i.id === itemId);
|
|||
|
|
if (item && Array.isArray(item.images) && item.images.length) openEquipLightbox(item.title, item.images, '', '', []);
|
|||
|
|
});
|
|||
|
|
// Fold/unfold a whole column: its header chevron, or a tap anywhere on the column
|
|||
|
|
// header EXCEPT the reorder/add-note buttons — those keep their own behavior.
|
|||
|
|
document.addEventListener('click', (e) => {
|
|||
|
|
const t = e.target; if (!t || !t.closest) return;
|
|||
|
|
let col = null;
|
|||
|
|
const btn = t.closest('.col-fold');
|
|||
|
|
if (btn) col = btn.closest('.checklist-column');
|
|||
|
|
else {
|
|||
|
|
const h2 = t.closest('.checklist-column h2.col-foldable');
|
|||
|
|
if (h2 && !t.closest('button,input,a,label')) col = h2.closest('.checklist-column');
|
|||
|
|
}
|
|||
|
|
if (col) toggleColFold(col);
|
|||
|
|
});
|
|||
|
|
// Lightbox gallery navigation: arrows, thumbnail strip, and ← / → keys.
|
|||
|
|
if (equipPrev) equipPrev.addEventListener('click', () => equipShowPhoto(equipGalleryIndex - 1));
|
|||
|
|
if (equipNext) equipNext.addEventListener('click', () => equipShowPhoto(equipGalleryIndex + 1));
|
|||
|
|
if (equipThumbs) equipThumbs.addEventListener('click', (e) => {
|
|||
|
|
const b = e.target.closest('.equip-thumb-btn');
|
|||
|
|
if (b) equipShowPhoto(parseInt(b.getAttribute('data-i'), 10) || 0);
|
|||
|
|
});
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
if (!equipModal || equipModal.style.display === 'none' || equipGalleryPhotos.length < 2) return;
|
|||
|
|
if (e.key === 'ArrowLeft') { e.preventDefault(); equipShowPhoto(equipGalleryIndex - 1); }
|
|||
|
|
else if (e.key === 'ArrowRight') { e.preventDefault(); equipShowPhoto(equipGalleryIndex + 1); }
|
|||
|
|
});
|
|||
|
|
newUserCreate.addEventListener('click', createUser);
|
|||
|
|
if (directoryEditor) directoryEditor.addEventListener('click', (e) => {
|
|||
|
|
const addBtn = e.target.closest('button[data-dir-add]');
|
|||
|
|
if (addBtn) { addDirectoryEntry(addBtn.dataset.dirAdd); return; }
|
|||
|
|
const editBtn = e.target.closest('button[data-dir-edit]');
|
|||
|
|
if (editBtn) { beginDirectoryRename(editBtn, editBtn.dataset.dirEdit, editBtn.dataset.name); return; }
|
|||
|
|
const saveBtn = e.target.closest('button[data-dir-rename-save]');
|
|||
|
|
if (saveBtn) { commitDirectoryRename(saveBtn.dataset.dirRenameSave, saveBtn.dataset.from); return; }
|
|||
|
|
const cancelBtn = e.target.closest('button[data-dir-rename-cancel]');
|
|||
|
|
if (cancelBtn) { renderDirectoryEditor(); return; }
|
|||
|
|
const delBtn = e.target.closest('button[data-dir-del]');
|
|||
|
|
if (delBtn) removeDirectoryEntry(delBtn.dataset.dirDel, delBtn.dataset.name);
|
|||
|
|
});
|
|||
|
|
// Save a location's abbreviation when its field loses focus / changes.
|
|||
|
|
if (directoryEditor) directoryEditor.addEventListener('change', (e) => {
|
|||
|
|
const inp = e.target.closest('input[data-dir-abbrev]');
|
|||
|
|
if (inp) saveLocationAbbrev(inp.dataset.dirAbbrev, inp.value);
|
|||
|
|
});
|
|||
|
|
if (newExecCreate) newExecCreate.addEventListener('click', createExec);
|
|||
|
|
if (execList) execList.addEventListener('click', handleExecListClick);
|
|||
|
|
if (userMgmtSearch) userMgmtSearch.addEventListener('input', drawUserMgmtList);
|
|||
|
|
if (execSearch) execSearch.addEventListener('input', drawExecList);
|
|||
|
|
|
|||
|
|
setupListMenuHandle();
|
|||
|
|
setupListSwipeNav();
|
|||
|
|
setupMarkdownToolbars();
|
|||
|
|
setupMovePopover();
|
|||
|
|
|
|||
|
|
// ─── Markdown formatting toolbar (description fields) ────────
|
|||
|
|
// Lets anyone format without knowing markdown: buttons insert the syntax into
|
|||
|
|
// the textarea selection, and a Write/Preview toggle shows the rendered result.
|
|||
|
|
function applyMarkdown(ta, action) {
|
|||
|
|
const val = ta.value, start = ta.selectionStart, end = ta.selectionEnd;
|
|||
|
|
const sel = val.slice(start, end);
|
|||
|
|
let out, selStart, selEnd;
|
|||
|
|
const wrap = (mk, ph) => {
|
|||
|
|
const m = mk.length;
|
|||
|
|
// Already wrapped (markers inside the selection)? → unwrap (toggle off).
|
|||
|
|
if (sel.length >= 2 * m && sel.slice(0, m) === mk && sel.slice(-m) === mk) {
|
|||
|
|
const inner = sel.slice(m, sel.length - m);
|
|||
|
|
out = val.slice(0, start) + inner + val.slice(end);
|
|||
|
|
selStart = start; selEnd = start + inner.length;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// Markers sit just OUTSIDE the selection? → strip them (toggle off).
|
|||
|
|
if (val.slice(start - m, start) === mk && val.slice(end, end + m) === mk) {
|
|||
|
|
out = val.slice(0, start - m) + sel + val.slice(end + m);
|
|||
|
|
selStart = start - m; selEnd = selStart + sel.length;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const text = sel || ph;
|
|||
|
|
out = val.slice(0, start) + mk + text + mk + val.slice(end);
|
|||
|
|
selStart = start + mk.length; selEnd = selStart + text.length; // keep the text selected
|
|||
|
|
};
|
|||
|
|
// `re` detects "is this line already this kind of prefix?" (toggle-off test);
|
|||
|
|
// `stripRe` (defaults to `re`) removes any competing marker before adding a new one,
|
|||
|
|
// so e.g. converting a bullet → checkbox never stacks "- [ ] - ".
|
|||
|
|
const linePrefix = (fn, re, stripRe) => {
|
|||
|
|
const strip = stripRe || re;
|
|||
|
|
const ls = val.lastIndexOf('\n', start - 1) + 1; // start of the first selected line
|
|||
|
|
const block = val.slice(ls, end);
|
|||
|
|
const lines = block.split('\n');
|
|||
|
|
const meaningful = lines.filter((ln) => ln.trim() !== '');
|
|||
|
|
// Toggle OFF when every non-blank line already carries this kind of prefix (mirrors bold).
|
|||
|
|
const allPrefixed = meaningful.length > 0 && meaningful.every((ln) => re.test(ln));
|
|||
|
|
const next = lines.map((ln, i) => {
|
|||
|
|
const bare = ln.replace(strip, ''); // strip any competing prefix (no stacking)
|
|||
|
|
if (allPrefixed) return bare; // toggle off
|
|||
|
|
return ln.trim() === '' ? ln : fn(i) + bare; // toggle on (skip blank lines)
|
|||
|
|
}).join('\n');
|
|||
|
|
out = val.slice(0, ls) + next + val.slice(end);
|
|||
|
|
selStart = selEnd = ls + next.length; // cursor at end, ready to type
|
|||
|
|
};
|
|||
|
|
switch (action) {
|
|||
|
|
case 'bold': wrap('**', 'bold text'); break;
|
|||
|
|
case 'italic': wrap('*', 'italic text'); break;
|
|||
|
|
case 'h': linePrefix(() => '## ', /^#{1,6} /); break;
|
|||
|
|
case 'ul': linePrefix(() => '- ', /^- /); break;
|
|||
|
|
case 'ol': linePrefix((i) => (i + 1) + '. ', /^\d+\. /); break;
|
|||
|
|
// Checkbox: insert "- [ ] " (always UNCHECKED — checked state is runtime, never
|
|||
|
|
// authored); toggling off strips the checkbox back to plain text; converting a
|
|||
|
|
// bullet/number line strips its marker first so nothing stacks.
|
|||
|
|
case 'task': linePrefix(() => '- [ ] ', /^\s*[-*]\s+\[[ xX]\]\s?/, /^\s*(?:[-*]\s+(?:\[[ xX]\]\s?)?|\d+\.\s+)/); break;
|
|||
|
|
case 'link': {
|
|||
|
|
const text = sel || 'link text';
|
|||
|
|
out = val.slice(0, start) + '[' + text + '](https://)' + val.slice(end);
|
|||
|
|
selStart = start + 1; selEnd = start + 1 + text.length; // select the label to overtype
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
default: return;
|
|||
|
|
}
|
|||
|
|
ta.value = out;
|
|||
|
|
ta.focus();
|
|||
|
|
ta.setSelectionRange(selStart, selEnd);
|
|||
|
|
}
|
|||
|
|
// ─── WYSIWYG description editor ──────────────────────────────
|
|||
|
|
// Two surfaces share ONE canonical value (the <textarea> = markdown source):
|
|||
|
|
// • Formatted mode (default): a contenteditable shows rendered markdown and is
|
|||
|
|
// edited directly; the toolbar applies real formatting (no symbols shown).
|
|||
|
|
// • Source mode ("Markdown" on): the raw <textarea>, edited as markdown text.
|
|||
|
|
// The textarea is always what gets saved, so save/load code is untouched. We only
|
|||
|
|
// re-derive the source from the formatted view when the user actually edited it
|
|||
|
|
// (a dirty flag) — so untouched descriptions are preserved byte-for-byte.
|
|||
|
|
function richFor(taId) { return document.querySelector('.md-rich[data-md-rich-for="' + taId + '"]'); }
|
|||
|
|
function barFor(taId) { return document.querySelector('.md-toolbar[data-md-target="' + taId + '"]'); }
|
|||
|
|
|
|||
|
|
// Inline HTML → markdown for the supported subset (bold/italic/links + nesting).
|
|||
|
|
function inlineToMarkdown(node) {
|
|||
|
|
let s = '';
|
|||
|
|
node.childNodes.forEach((ch) => {
|
|||
|
|
if (ch.nodeType === 3) { s += ch.nodeValue.replace(/\u00a0/g, ' '); return; }
|
|||
|
|
if (ch.nodeType !== 1) return;
|
|||
|
|
const tag = ch.nodeName;
|
|||
|
|
if (tag === 'BR') { s += '\n'; return; }
|
|||
|
|
const inner = inlineToMarkdown(ch);
|
|||
|
|
if (tag === 'A') {
|
|||
|
|
const href = (ch.getAttribute('href') || '').trim();
|
|||
|
|
const label = inner.replace(/\s*\n+\s*/g, ' ').trim(); // no newlines inside [label] — keeps the link valid
|
|||
|
|
s += (href && label) ? '[' + label + '](' + href + ')' : inner;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!inner) return; // drop empty inline wrappers
|
|||
|
|
const style = (ch.getAttribute && ch.getAttribute('style')) || '';
|
|||
|
|
const bold = tag === 'STRONG' || tag === 'B' || /font-weight:\s*(bold|[6-9]00)/i.test(style);
|
|||
|
|
const italic = tag === 'EM' || tag === 'I' || /font-style:\s*italic/i.test(style);
|
|||
|
|
if (bold && italic) s += '***' + inner + '***';
|
|||
|
|
else if (bold) s += '**' + inner + '**';
|
|||
|
|
else if (italic) s += '*' + inner + '*';
|
|||
|
|
else s += inner; // span/font/u/unknown inline → just its text
|
|||
|
|
});
|
|||
|
|
return s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// One inline node (text or element) → markdown, applying its OWN formatting.
|
|||
|
|
// Browsers emit top-level <b>/<i>/<a> with no block wrapper; this keeps their
|
|||
|
|
// formatting (inlineToMarkdown only wraps a node's *children*).
|
|||
|
|
function inlineNodeToMarkdown(node) {
|
|||
|
|
if (node.nodeType === 3) return node.nodeValue.replace(/\u00a0/g, ' ');
|
|||
|
|
if (node.nodeType !== 1) return '';
|
|||
|
|
const tag = node.nodeName;
|
|||
|
|
if (tag === 'BR') return '\n';
|
|||
|
|
const inner = inlineToMarkdown(node);
|
|||
|
|
if (tag === 'A') {
|
|||
|
|
const href = (node.getAttribute('href') || '').trim();
|
|||
|
|
const label = inner.replace(/\s*\n+\s*/g, ' ').trim(); // no newlines inside [label] — keeps the link valid
|
|||
|
|
return (href && label) ? '[' + label + '](' + href + ')' : inner;
|
|||
|
|
}
|
|||
|
|
if (!inner) return '';
|
|||
|
|
const style = (node.getAttribute && node.getAttribute('style')) || '';
|
|||
|
|
const bold = tag === 'STRONG' || tag === 'B' || /font-weight:\s*(bold|[6-9]00)/i.test(style);
|
|||
|
|
const italic = tag === 'EM' || tag === 'I' || /font-style:\s*italic/i.test(style);
|
|||
|
|
if (bold && italic) return '***' + inner + '***';
|
|||
|
|
if (bold) return '**' + inner + '**';
|
|||
|
|
if (italic) return '*' + inner + '*';
|
|||
|
|
return inner;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Whole contenteditable → markdown source. Block-aware; defensive about the
|
|||
|
|
// varied HTML browsers produce on Enter/paste (div/p/br, b/i/span styles).
|
|||
|
|
function htmlToMarkdown(root) {
|
|||
|
|
const blocks = [];
|
|||
|
|
let para = [];
|
|||
|
|
const flush = () => {
|
|||
|
|
if (!para.length) return;
|
|||
|
|
const t = para.join('').replace(/[ \t]+\n/g, '\n').replace(/\s+$/, '');
|
|||
|
|
if (t.trim() !== '') blocks.push(t);
|
|||
|
|
para = [];
|
|||
|
|
};
|
|||
|
|
const hashes = (tag) => '#'.repeat(((parseInt(tag.charAt(1), 10) - 1) % 3) + 1);
|
|||
|
|
Array.prototype.forEach.call(root.childNodes, (node) => {
|
|||
|
|
if (node.nodeType === 3) { para.push(node.nodeValue.replace(/\u00a0/g, ' ')); return; }
|
|||
|
|
if (node.nodeType !== 1) return;
|
|||
|
|
const tag = node.nodeName;
|
|||
|
|
if (tag === 'BR') { para.push('\n'); return; }
|
|||
|
|
if (/^H[1-6]$/.test(tag)) { flush(); const t = inlineToMarkdown(node).replace(/\n+/g, ' ').trim(); if (t) blocks.push(hashes(tag) + ' ' + t); return; }
|
|||
|
|
if (tag === 'UL' || tag === 'OL') {
|
|||
|
|
flush();
|
|||
|
|
const lines = []; let n = 1;
|
|||
|
|
Array.prototype.forEach.call(node.children, (li) => {
|
|||
|
|
if (li.nodeName !== 'LI') return;
|
|||
|
|
// A checkbox row → re-emit "- [ ]"/"- [x]". Serialize the LABEL span only
|
|||
|
|
// (the .md-task-box is decorative/empty) so the box glyph can never fold
|
|||
|
|
// into the label and grow the markdown on each round-trip.
|
|||
|
|
if (li.classList && li.classList.contains('md-task')) {
|
|||
|
|
// Serialize the label PLUS any text a bad delete/merge may have stranded
|
|||
|
|
// elsewhere in the row — but never the decorative (hardened-empty) box — so a
|
|||
|
|
// checkbox line's text can never be silently dropped on save even if the DOM
|
|||
|
|
// was momentarily damaged. Clone-and-drop-box keeps the box from ever folding
|
|||
|
|
// in (the original label-only concern) while capturing stray content.
|
|||
|
|
const tmp = li.cloneNode(true);
|
|||
|
|
tmp.querySelectorAll('.md-task-box').forEach((b) => b.remove()); // drop every decorative box
|
|||
|
|
const t = inlineToMarkdown(tmp).replace(/\n+/g, ' ').trim();
|
|||
|
|
lines.push('- [' + (li.getAttribute('data-checked') === 'true' ? 'x' : ' ') + '] ' + t);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const t = inlineToMarkdown(li).replace(/\n+/g, ' ').trim();
|
|||
|
|
lines.push((tag === 'OL' ? (n++) + '. ' : '- ') + t);
|
|||
|
|
});
|
|||
|
|
if (lines.length) blocks.push(lines.join('\n'));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (tag === 'P' || tag === 'DIV' || tag === 'BLOCKQUOTE') {
|
|||
|
|
const hasBlockKids = Array.prototype.some.call(node.childNodes, (c) =>
|
|||
|
|
c.nodeType === 1 && /^(P|DIV|H[1-6]|UL|OL|BLOCKQUOTE)$/.test(c.nodeName));
|
|||
|
|
flush();
|
|||
|
|
if (hasBlockKids) { const inner = htmlToMarkdown(node); if (inner.trim()) blocks.push(inner); }
|
|||
|
|
else { const t = inlineToMarkdown(node).replace(/\s+$/, ''); if (t.trim() !== '') blocks.push(t); }
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
para.push(inlineNodeToMarkdown(node)); // top-level inline element (keeps its own b/i/a)
|
|||
|
|
});
|
|||
|
|
flush();
|
|||
|
|
return blocks.join('\n\n');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function markdownToRichHtml(md) {
|
|||
|
|
try { return (window.MD && MD.render) ? MD.render(md || '') : escapeHtml(md || ''); }
|
|||
|
|
catch (_) { return escapeHtml(md || ''); }
|
|||
|
|
}
|
|||
|
|
// Make rendered links atomic in the editor: Chrome otherwise "extends" a link
|
|||
|
|
// when you type at its edge, swallowing surrounding text and corrupting the
|
|||
|
|
// markdown round-trip. contenteditable=false stops that.
|
|||
|
|
function hardenRichLinks(rich) {
|
|||
|
|
if (!rich) return;
|
|||
|
|
rich.querySelectorAll('a').forEach((a) => a.setAttribute('contenteditable', 'false'));
|
|||
|
|
// Keep the decorative checkbox box atomic + guaranteed EMPTY: a caret/paste that
|
|||
|
|
// leaked text into it would otherwise fold into the label and grow the markdown.
|
|||
|
|
rich.querySelectorAll('.md-task-box').forEach((b) => {
|
|||
|
|
b.setAttribute('contenteditable', 'false');
|
|||
|
|
if (b.textContent) b.textContent = '';
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateRichEmpty(rich) {
|
|||
|
|
rich.classList.toggle('is-empty', !rich.textContent.trim());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Build a fresh, UNCHECKED checkbox <li> matching md.js's output shape (empty CSS-drawn
|
|||
|
|
// box + a label span) — used when Enter continues a checklist in the formatted editor.
|
|||
|
|
function makeTaskLi() {
|
|||
|
|
const li = document.createElement('li');
|
|||
|
|
li.className = 'md-task';
|
|||
|
|
li.setAttribute('data-checked', 'false');
|
|||
|
|
const box = document.createElement('span');
|
|||
|
|
box.className = 'md-task-box';
|
|||
|
|
box.setAttribute('contenteditable', 'false');
|
|||
|
|
box.setAttribute('aria-hidden', 'true');
|
|||
|
|
const label = document.createElement('span');
|
|||
|
|
label.className = 'md-task-label';
|
|||
|
|
li.appendChild(box);
|
|||
|
|
li.appendChild(label);
|
|||
|
|
return li;
|
|||
|
|
}
|
|||
|
|
// Shared tail after any structural edit inside the formatted editor: mark dirty, refresh the
|
|||
|
|
// empty/placeholder state, re-harden links/boxes, re-light the toolbar, keep the caret in view.
|
|||
|
|
function finishRichEdit(rich) {
|
|||
|
|
rich.dataset.dirty = '1';
|
|||
|
|
updateRichEmpty(rich);
|
|||
|
|
hardenRichLinks(rich);
|
|||
|
|
refreshToolbarActive(rich.dataset.mdRichFor);
|
|||
|
|
scrollCaretIntoView(rich);
|
|||
|
|
}
|
|||
|
|
// Replace a checkbox <li> with a plain block, splitting/removing its <ul> correctly. Shared by
|
|||
|
|
// the Enter-exit and the Backspace-unwrap so the (fiddly) list surgery lives in ONE place. Has
|
|||
|
|
// an explicit first-row branch the old inline Enter code lacked (which left an empty <ul>).
|
|||
|
|
function replaceTaskLiWithBlock(li, block) {
|
|||
|
|
const ul = li.closest('ul');
|
|||
|
|
if (!ul) { li.replaceWith(block); return; }
|
|||
|
|
if (!li.previousElementSibling && !li.nextElementSibling) {
|
|||
|
|
ul.parentNode.insertBefore(block, ul); ul.remove(); // sole row → replace the list
|
|||
|
|
} else if (!li.previousElementSibling) {
|
|||
|
|
ul.parentNode.insertBefore(block, ul); li.remove(); // first row → line BEFORE the list
|
|||
|
|
} else if (!li.nextElementSibling) {
|
|||
|
|
ul.parentNode.insertBefore(block, ul.nextSibling); li.remove(); // last row → line AFTER the list
|
|||
|
|
} else {
|
|||
|
|
const newUl = document.createElement('ul'); // middle → split the list
|
|||
|
|
let sib = li.nextElementSibling;
|
|||
|
|
while (sib) { const next = sib.nextElementSibling; newUl.appendChild(sib); sib = next; }
|
|||
|
|
ul.parentNode.insertBefore(block, ul.nextSibling);
|
|||
|
|
if (newUl.children.length) ul.parentNode.insertBefore(newUl, block.nextSibling);
|
|||
|
|
li.remove();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Enter inside the FORMATTED editor: if the caret is on a checkbox line, continue the
|
|||
|
|
// list with a new checkbox (splitting the label at the caret); pressing Enter on an
|
|||
|
|
// EMPTY checkbox ends the list (a plain new line), mirroring how bullet/numbered lists
|
|||
|
|
// behave. Non-checkbox lines fall through to the browser's normal Enter.
|
|||
|
|
function handleRichEnter(e, rich) {
|
|||
|
|
if (e.key !== 'Enter' || e.shiftKey || e.isComposing) return;
|
|||
|
|
const sel = window.getSelection();
|
|||
|
|
if (!sel || !sel.rangeCount) return;
|
|||
|
|
const range = sel.getRangeAt(0);
|
|||
|
|
if (!range.collapsed) return; // a selection → let the browser handle it
|
|||
|
|
let el = range.startContainer;
|
|||
|
|
el = (el.nodeType === 1) ? el : el.parentNode;
|
|||
|
|
const li = el && el.closest ? el.closest('li.md-task') : null;
|
|||
|
|
if (!li || !rich.contains(li)) return;
|
|||
|
|
e.preventDefault();
|
|||
|
|
const label = li.querySelector('.md-task-label');
|
|||
|
|
if (!label || label.textContent.trim() === '') {
|
|||
|
|
// Empty checkbox + Enter → end the list: drop the checkbox and drop the caret onto
|
|||
|
|
// a plain blank line where the list splits (shared surgery; handles the first-row case).
|
|||
|
|
const block = document.createElement('div');
|
|||
|
|
block.appendChild(document.createElement('br'));
|
|||
|
|
replaceTaskLiWithBlock(li, block);
|
|||
|
|
const r = document.createRange(); r.setStart(block, 0); r.collapse(true);
|
|||
|
|
sel.removeAllRanges(); sel.addRange(r);
|
|||
|
|
} else {
|
|||
|
|
// Continue: move everything after the caret into a brand-new checkbox row.
|
|||
|
|
const after = range.cloneRange();
|
|||
|
|
after.setEnd(label, label.childNodes.length);
|
|||
|
|
const frag = after.extractContents();
|
|||
|
|
const newLi = makeTaskLi();
|
|||
|
|
newLi.querySelector('.md-task-label').appendChild(frag);
|
|||
|
|
li.parentNode.insertBefore(newLi, li.nextSibling);
|
|||
|
|
const r = document.createRange(); r.setStart(newLi.querySelector('.md-task-label'), 0); r.collapse(true);
|
|||
|
|
sel.removeAllRanges(); sel.addRange(r);
|
|||
|
|
}
|
|||
|
|
rich.dataset.dirty = '1';
|
|||
|
|
updateRichEmpty(rich);
|
|||
|
|
hardenRichLinks(rich);
|
|||
|
|
refreshToolbarActive(rich.dataset.mdRichFor);
|
|||
|
|
scrollCaretIntoView(rich);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ── Escaping a checkbox line in the FORMATTED editor (Backspace / Delete) ──
|
|||
|
|
// A step is <li.md-task>[<span.md-task-box ce=false>, <span.md-task-label>]. With no handler the
|
|||
|
|
// browser's default delete is incoherent against the contenteditable=false box: it strips the
|
|||
|
|
// label span, orphans the box, hides the caret, and leaves an li that still serializes to "- [ ]"
|
|||
|
|
// (a stuck checkbox). These handlers make delete DO THE OBVIOUS THING instead — see handleRichDeleteKeys.
|
|||
|
|
|
|||
|
|
// Collapsed caret at the very START of a checkbox label? Returns that <li.md-task> (where Backspace
|
|||
|
|
// should REMOVE the checkbox), else null. Resolves the li FIRST so a caret parked at li/box level
|
|||
|
|
// (e.g. a left-margin tap) still counts as "start"; only bails on genuine text before the caret.
|
|||
|
|
function taskLiIfCaretAtStart(range) {
|
|||
|
|
if (!range || !range.collapsed) return null;
|
|||
|
|
const node = range.startContainer;
|
|||
|
|
const startEl = (node.nodeType === 1) ? node : node.parentNode;
|
|||
|
|
const li = startEl && startEl.closest ? startEl.closest('li.md-task') : null;
|
|||
|
|
if (!li) return null;
|
|||
|
|
const label = li.querySelector('.md-task-label');
|
|||
|
|
if (!label) return li; // damaged li (label gone) → still convertible
|
|||
|
|
if (node !== label && !label.contains(node)) {
|
|||
|
|
// caret seated at li/box level, not inside the label
|
|||
|
|
if (node === li) {
|
|||
|
|
const labelIdx = Array.prototype.indexOf.call(li.childNodes, label);
|
|||
|
|
if (range.startOffset > labelIdx) return null; // caret is AFTER the label → not start
|
|||
|
|
}
|
|||
|
|
return li;
|
|||
|
|
}
|
|||
|
|
const pre = document.createRange();
|
|||
|
|
pre.setStart(label, 0);
|
|||
|
|
try { pre.setEnd(node, range.startOffset); } catch (_) { return null; }
|
|||
|
|
if ((pre.cloneContents().textContent || '') !== '') return null; // real text before caret
|
|||
|
|
return li;
|
|||
|
|
}
|
|||
|
|
// Turn a checkbox line into a plain paragraph: keep its text, drop the checkbox, caret at start.
|
|||
|
|
function convertTaskLiToPlain(li, rich) {
|
|||
|
|
const block = document.createElement('div');
|
|||
|
|
// Move every child into the plain block in document order EXCEPT the decorative box;
|
|||
|
|
// unwrap the label span (keep its inline children). Iterating ALL children — not just the
|
|||
|
|
// label's — means any stray text/element a prior bad merge left OUTSIDE the label is
|
|||
|
|
// salvaged here too, matching the save-path serialization so an unwrap can never drop text.
|
|||
|
|
Array.prototype.slice.call(li.childNodes).forEach((c) => {
|
|||
|
|
if (c.nodeType === 1 && c.classList && c.classList.contains('md-task-box')) return;
|
|||
|
|
if (c.nodeType === 1 && c.classList && c.classList.contains('md-task-label')) {
|
|||
|
|
while (c.firstChild) block.appendChild(c.firstChild);
|
|||
|
|
} else {
|
|||
|
|
block.appendChild(c);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// Drop empty text nodes: the real browser leaves a zero-length "" text node inside an
|
|||
|
|
// emptied inline label, and moving it here would make the block look non-empty — so the
|
|||
|
|
// <br> below never gets added and the resulting <div> is NOT a valid caret container
|
|||
|
|
// (the caret then falls back into the previous step and typing lands there). Stripping
|
|||
|
|
// them means an emptied line is truly empty and always gets its caret-holding <br>.
|
|||
|
|
Array.prototype.slice.call(block.childNodes).forEach((c) => {
|
|||
|
|
if (c.nodeType === 3 && c.nodeValue === '') c.remove();
|
|||
|
|
});
|
|||
|
|
if (!block.childNodes.length) block.appendChild(document.createElement('br'));
|
|||
|
|
replaceTaskLiWithBlock(li, block);
|
|||
|
|
const r = document.createRange(); r.setStart(block, 0); r.collapse(true);
|
|||
|
|
const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(r);
|
|||
|
|
finishRichEdit(rich);
|
|||
|
|
}
|
|||
|
|
// Collapsed caret at the START of a plain line whose PREVIOUS block is a checkbox list?
|
|||
|
|
// Returns {block, li} to merge the plain line's text onto that checkbox's label, else null.
|
|||
|
|
function plainLineToMergeUp(range) {
|
|||
|
|
if (!range || !range.collapsed) return null;
|
|||
|
|
const node = range.startContainer;
|
|||
|
|
const startEl = (node.nodeType === 1) ? node : node.parentNode;
|
|||
|
|
if (!startEl || !startEl.closest) return null;
|
|||
|
|
if (startEl.closest('li.md-task')) return null; // that's a task line, not a plain one
|
|||
|
|
const block = startEl.closest('div,p');
|
|||
|
|
if (!block || !block.parentNode) return null;
|
|||
|
|
const pre = document.createRange();
|
|||
|
|
pre.setStart(block, 0);
|
|||
|
|
try { pre.setEnd(node, range.startOffset); } catch (_) { return null; }
|
|||
|
|
if ((pre.cloneContents().textContent || '') !== '') return null; // not at block start
|
|||
|
|
const prev = block.previousElementSibling;
|
|||
|
|
if (!prev) return null;
|
|||
|
|
let li = null;
|
|||
|
|
if (prev.nodeName === 'UL') {
|
|||
|
|
const last = prev.lastElementChild;
|
|||
|
|
if (last && last.classList && last.classList.contains('md-task')) li = last;
|
|||
|
|
} else if (prev.classList && prev.classList.contains('md-task')) {
|
|||
|
|
li = prev;
|
|||
|
|
}
|
|||
|
|
return li ? { block: block, li: li } : null;
|
|||
|
|
}
|
|||
|
|
// Append one node list onto a label at its end and seat the caret at the join point.
|
|||
|
|
function appendIntoLabelAtCaret(label, source, rich) {
|
|||
|
|
while (source.lastChild && source.lastChild.nodeType === 1 && source.lastChild.nodeName === 'BR') {
|
|||
|
|
source.removeChild(source.lastChild); // drop a trailing empty-line <br>
|
|||
|
|
}
|
|||
|
|
const anchor = label.lastChild; // original end of the label (join point)
|
|||
|
|
while (source.firstChild) label.appendChild(source.firstChild);
|
|||
|
|
const r = document.createRange();
|
|||
|
|
if (anchor) {
|
|||
|
|
if (anchor.nodeType === 3) r.setStart(anchor, anchor.nodeValue.length);
|
|||
|
|
else r.setStartAfter(anchor);
|
|||
|
|
} else { r.setStart(label, 0); }
|
|||
|
|
r.collapse(true);
|
|||
|
|
const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(r);
|
|||
|
|
finishRichEdit(rich);
|
|||
|
|
}
|
|||
|
|
// Backspace at start of a plain line under a checkbox list → merge the line into that label.
|
|||
|
|
function mergePlainLineUp(block, li, rich) {
|
|||
|
|
const label = li.querySelector('.md-task-label');
|
|||
|
|
if (!label) { convertTaskLiToPlain(li, rich); return; } // damaged → don't guess
|
|||
|
|
appendIntoLabelAtCaret(label, block, rich);
|
|||
|
|
block.remove();
|
|||
|
|
}
|
|||
|
|
// Forward Delete at the END of a checkbox label whose next row is a checkbox → merge next up.
|
|||
|
|
function nextTaskToMerge(range) {
|
|||
|
|
if (!range || !range.collapsed) return null;
|
|||
|
|
const node = range.startContainer;
|
|||
|
|
const startEl = (node.nodeType === 1) ? node : node.parentNode;
|
|||
|
|
const label = startEl && startEl.closest ? startEl.closest('.md-task-label') : null;
|
|||
|
|
if (!label) return null;
|
|||
|
|
const li = label.closest('li.md-task');
|
|||
|
|
if (!li) return null;
|
|||
|
|
const post = document.createRange();
|
|||
|
|
try { post.setStart(node, range.startOffset); } catch (_) { return null; }
|
|||
|
|
post.setEnd(label, label.childNodes.length);
|
|||
|
|
if ((post.cloneContents().textContent || '') !== '') return null; // not at label end
|
|||
|
|
const next = li.nextElementSibling;
|
|||
|
|
if (next && next.classList && next.classList.contains('md-task')) return { li: li, next: next };
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
function mergeNextTaskUp(li, next, rich) {
|
|||
|
|
const label = li.querySelector('.md-task-label');
|
|||
|
|
const nextLabel = next.querySelector('.md-task-label');
|
|||
|
|
if (!label) { next.remove(); finishRichEdit(rich); return; }
|
|||
|
|
appendIntoLabelAtCaret(label, nextLabel || document.createElement('span'), rich);
|
|||
|
|
next.remove();
|
|||
|
|
}
|
|||
|
|
// Detect whether the current caret is at one of the checkbox-escape boundaries and, if so,
|
|||
|
|
// return the DOM action to run (else null). Shared by the keydown and beforeinput handlers so
|
|||
|
|
// the two entry points can never disagree. kind: 'back' (Backspace) or 'fwd' (forward Delete).
|
|||
|
|
function escapeDeleteAction(kind, rich) {
|
|||
|
|
const sel = window.getSelection();
|
|||
|
|
if (!sel || !sel.rangeCount) return null;
|
|||
|
|
const range = sel.getRangeAt(0);
|
|||
|
|
if (!range.collapsed || !rich.contains(range.startContainer)) return null; // selection → default
|
|||
|
|
if (kind === 'back') {
|
|||
|
|
const li = taskLiIfCaretAtStart(range);
|
|||
|
|
if (li) return () => convertTaskLiToPlain(li, rich); // start of a step → drop the checkbox
|
|||
|
|
const up = plainLineToMergeUp(range);
|
|||
|
|
if (up) return () => mergePlainLineUp(up.block, up.li, rich); // plain line under a step → merge up
|
|||
|
|
} else {
|
|||
|
|
const fwd = nextTaskToMerge(range);
|
|||
|
|
if (fwd) return () => mergeNextTaskUp(fwd.li, fwd.next, rich); // end of a step → pull next step up
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
// We intercept the delete on BOTH keydown AND beforeinput. Desktop browsers fire keydown and
|
|||
|
|
// honor its preventDefault (which then suppresses beforeinput). But iOS/iPad Safari's soft
|
|||
|
|
// keyboard often does NOT deliver a usable Backspace keydown (key can be 'Unidentified'), so the
|
|||
|
|
// browser's default runs and merges the new line up into the step above — the reported bug.
|
|||
|
|
// beforeinput's deleteContent*Backward/Forward is the reliable, spec-standard editing signal iOS
|
|||
|
|
// DOES fire, so it catches what keydown misses. A short timestamp guard stops the two paths from
|
|||
|
|
// both acting on the same physical delete. Modifier+Backspace at a boundary intentionally unwraps.
|
|||
|
|
function handleRichDeleteKeys(e, rich) {
|
|||
|
|
if (e.isComposing) return;
|
|||
|
|
const kind = e.key === 'Backspace' ? 'back' : (e.key === 'Delete' ? 'fwd' : null);
|
|||
|
|
if (!kind) return;
|
|||
|
|
const act = escapeDeleteAction(kind, rich);
|
|||
|
|
if (act) { e.preventDefault(); rich._delTs = Date.now(); act(); }
|
|||
|
|
}
|
|||
|
|
function handleRichBeforeInputDelete(e, rich) {
|
|||
|
|
if (e.isComposing) return;
|
|||
|
|
const t = e.inputType || '';
|
|||
|
|
const kind = (/^delete\w*Backward$/.test(t)) ? 'back' : ((/^delete\w*Forward$/.test(t)) ? 'fwd' : null);
|
|||
|
|
if (!kind) return;
|
|||
|
|
if (rich._delTs && (Date.now() - rich._delTs) < 250) return; // keydown already handled this delete
|
|||
|
|
const act = escapeDeleteAction(kind, rich);
|
|||
|
|
if (!act) return; // not one of our boundaries → let the normal delete run
|
|||
|
|
if (e.cancelable === false) return; // can't stop the default → let the input-repair net cope
|
|||
|
|
e.preventDefault();
|
|||
|
|
rich._delTs = Date.now();
|
|||
|
|
act();
|
|||
|
|
}
|
|||
|
|
// Safety net: if any incoherent delete we DIDN'T intercept (dictation, an OS gesture, an iOS edge)
|
|||
|
|
// ever leaves a checkbox <li> with its label span gone, the caret vanishes and the checkbox sticks.
|
|||
|
|
// Repair that ghost state in place from the input event. Idempotent + a no-op during normal typing
|
|||
|
|
// (a valid task li always has a label), so it only ever fires to self-heal real damage.
|
|||
|
|
function repairDamagedTaskLis(rich) {
|
|||
|
|
const damaged = [];
|
|||
|
|
Array.prototype.forEach.call(rich.querySelectorAll('li.md-task'), (li) => {
|
|||
|
|
if (!li.querySelector('.md-task-label')) damaged.push(li);
|
|||
|
|
});
|
|||
|
|
if (!damaged.length) return false;
|
|||
|
|
const sel = window.getSelection();
|
|||
|
|
const saved = (sel && sel.rangeCount) ? sel.getRangeAt(0).cloneRange() : null;
|
|||
|
|
const caretNode = saved ? saved.startContainer : null;
|
|||
|
|
damaged.forEach((li) => {
|
|||
|
|
if (!li.isConnected) return;
|
|||
|
|
const caretHere = caretNode && li.contains(caretNode);
|
|||
|
|
convertTaskLiToPlain(li, rich); // reseats the caret into the repaired block
|
|||
|
|
// If we healed a row the user ISN'T in, don't yank their caret to it — restore it.
|
|||
|
|
if (!caretHere && saved) { try { sel.removeAllRanges(); sel.addRange(saved); } catch (_) {} }
|
|||
|
|
});
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
// Enter inside the SOURCE (Markdown) textarea: same behavior via plain string edits.
|
|||
|
|
function handleTaEnter(e, ta) {
|
|||
|
|
if (e.key !== 'Enter' || e.shiftKey || e.isComposing) return;
|
|||
|
|
const v = ta.value, s = ta.selectionStart, en = ta.selectionEnd;
|
|||
|
|
if (s !== en) return;
|
|||
|
|
const ls = v.lastIndexOf('\n', s - 1) + 1;
|
|||
|
|
let le = v.indexOf('\n', s); if (le < 0) le = v.length;
|
|||
|
|
const m = /^(\s*[-*]\s+\[[ xX]\]\s?)(.*)$/.exec(v.slice(ls, le));
|
|||
|
|
if (!m) return; // not a checkbox line → normal Enter
|
|||
|
|
e.preventDefault();
|
|||
|
|
if (m[2].trim() === '') {
|
|||
|
|
ta.value = v.slice(0, ls) + v.slice(le); // empty checkbox → end the list
|
|||
|
|
ta.setSelectionRange(ls, ls);
|
|||
|
|
} else {
|
|||
|
|
const insert = '\n- [ ] ';
|
|||
|
|
ta.value = v.slice(0, s) + insert + v.slice(s);
|
|||
|
|
const c = s + insert.length;
|
|||
|
|
ta.setSelectionRange(c, c);
|
|||
|
|
}
|
|||
|
|
autoGrowTa(ta);
|
|||
|
|
refreshToolbarActive(ta.id);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Grow the source-mode textarea to fit its content (up to ~half the viewport) so it's
|
|||
|
|
// never a cramped little box and there's no need to fish for the resize grip on mobile.
|
|||
|
|
function autoGrowTa(ta) {
|
|||
|
|
if (!ta || ta.offsetParent === null) return; // hidden (formatted mode) → skip
|
|||
|
|
ta.style.height = 'auto';
|
|||
|
|
ta.style.height = Math.min(ta.scrollHeight + 2, Math.round(window.innerHeight * 0.5)) + 'px';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// If the formatted view was edited, push its content back to the source textarea.
|
|||
|
|
function flushMarkdownEditor(taId) {
|
|||
|
|
const ta = document.getElementById(taId);
|
|||
|
|
const bar = barFor(taId);
|
|||
|
|
const rich = richFor(taId);
|
|||
|
|
if (!ta || !bar || !rich) return;
|
|||
|
|
if (!bar.classList.contains('source-mode') && rich.dataset.dirty === '1') {
|
|||
|
|
ta.value = htmlToMarkdown(rich);
|
|||
|
|
rich.dataset.dirty = '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ── Caret preservation across the formatted ↔ source toggle ──
|
|||
|
|
// Best range for the rich editor's caret: the live selection if it's in the
|
|||
|
|
// editor, else the one captured on pointer-down (toolbar clicks steal focus).
|
|||
|
|
function currentRichRange(rich) {
|
|||
|
|
const sel = window.getSelection();
|
|||
|
|
if (sel.rangeCount && rich.contains(sel.getRangeAt(0).endContainer)) return sel.getRangeAt(0);
|
|||
|
|
if (rich._savedRange && rich.contains(rich._savedRange.endContainer)) return rich._savedRange;
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
// Rich-editor caret → offset in the MARKDOWN source (serialize everything before
|
|||
|
|
// the caret; its length is the caret's position in the raw text).
|
|||
|
|
function richCaretToMarkdownOffset(rich) {
|
|||
|
|
const r = currentRichRange(rich);
|
|||
|
|
if (!r) return null;
|
|||
|
|
try {
|
|||
|
|
const pre = document.createRange();
|
|||
|
|
pre.setStart(rich, 0);
|
|||
|
|
pre.setEnd(r.endContainer, r.endOffset);
|
|||
|
|
const tmp = document.createElement('div');
|
|||
|
|
tmp.appendChild(pre.cloneContents());
|
|||
|
|
return htmlToMarkdown(tmp).length;
|
|||
|
|
} catch (_) { return null; }
|
|||
|
|
}
|
|||
|
|
// Reverse: a caret offset in the markdown source → plain-text offset in the
|
|||
|
|
// rendered formatted view (render the source prefix, measure its text length).
|
|||
|
|
function markdownCaretToPlainOffset(mdValue, mdCaret) {
|
|||
|
|
const tmp = document.createElement('div');
|
|||
|
|
tmp.innerHTML = markdownToRichHtml(mdValue.slice(0, Math.max(0, mdCaret)));
|
|||
|
|
return tmp.textContent.length;
|
|||
|
|
}
|
|||
|
|
function scrollCaretIntoView(container) {
|
|||
|
|
const sel = window.getSelection();
|
|||
|
|
if (!sel.rangeCount) return;
|
|||
|
|
const rect = sel.getRangeAt(0).getBoundingClientRect();
|
|||
|
|
if (!rect || (rect.top === 0 && rect.bottom === 0)) return; // can't measure → skip
|
|||
|
|
const box = container.getBoundingClientRect();
|
|||
|
|
if (rect.bottom > box.bottom) container.scrollTop += (rect.bottom - box.bottom) + 10;
|
|||
|
|
else if (rect.top < box.top) container.scrollTop -= (box.top - rect.top) + 10;
|
|||
|
|
}
|
|||
|
|
// Put the caret at a plain-text offset inside the rich editor, then scroll to it.
|
|||
|
|
function placeRichCaretAtPlainOffset(rich, target) {
|
|||
|
|
const sel = window.getSelection();
|
|||
|
|
const walker = document.createTreeWalker(rich, NodeFilter.SHOW_TEXT);
|
|||
|
|
let node, last = null, remaining = target;
|
|||
|
|
while ((node = walker.nextNode())) {
|
|||
|
|
last = node;
|
|||
|
|
if (remaining <= node.nodeValue.length) {
|
|||
|
|
const r = document.createRange(); r.setStart(node, remaining); r.collapse(true);
|
|||
|
|
sel.removeAllRanges(); sel.addRange(r); scrollCaretIntoView(rich); return;
|
|||
|
|
}
|
|||
|
|
remaining -= node.nodeValue.length;
|
|||
|
|
}
|
|||
|
|
if (last) { const r = document.createRange(); r.setStart(last, last.nodeValue.length); r.collapse(true); sel.removeAllRanges(); sel.addRange(r); scrollCaretIntoView(rich); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Toggle one field between formatted (default) and raw markdown source,
|
|||
|
|
// keeping the caret where the user left it.
|
|||
|
|
function setMarkdownMode(taId, source) {
|
|||
|
|
const ta = document.getElementById(taId);
|
|||
|
|
const bar = barFor(taId);
|
|||
|
|
const rich = richFor(taId);
|
|||
|
|
if (!ta || !bar || !rich) return;
|
|||
|
|
const btn = bar.querySelector('.md-preview-btn');
|
|||
|
|
if (source) {
|
|||
|
|
const caret = richCaretToMarkdownOffset(rich); // map caret BEFORE hiding
|
|||
|
|
if (rich.dataset.dirty === '1') { ta.value = htmlToMarkdown(rich); rich.dataset.dirty = ''; }
|
|||
|
|
ta.style.height = (rich.offsetHeight || 180) + 'px'; // no size jump
|
|||
|
|
rich.style.display = 'none'; ta.style.display = '';
|
|||
|
|
bar.classList.add('source-mode');
|
|||
|
|
if (btn) { btn.classList.add('active'); btn.setAttribute('aria-pressed', 'true'); }
|
|||
|
|
ta.focus();
|
|||
|
|
autoGrowTa(ta); // fit the box to its content now that it's visible
|
|||
|
|
if (caret != null) { const p = Math.max(0, Math.min(caret, ta.value.length)); try { ta.setSelectionRange(p, p); } catch (_) {} }
|
|||
|
|
} else {
|
|||
|
|
const srcCaret = ta.selectionStart; // textareas keep their selection when blurred
|
|||
|
|
rich.innerHTML = markdownToRichHtml(ta.value); // re-render any raw edits
|
|||
|
|
hardenRichLinks(rich);
|
|||
|
|
rich.dataset.dirty = '';
|
|||
|
|
if (ta.style.display !== 'none') rich.style.height = (ta.offsetHeight || 180) + 'px';
|
|||
|
|
ta.style.display = 'none'; rich.style.display = '';
|
|||
|
|
bar.classList.remove('source-mode');
|
|||
|
|
if (btn) { btn.classList.remove('active'); btn.setAttribute('aria-pressed', 'false'); }
|
|||
|
|
updateRichEmpty(rich);
|
|||
|
|
rich.focus();
|
|||
|
|
placeRichCaretAtPlainOffset(rich, markdownCaretToPlainOffset(ta.value, srcCaret));
|
|||
|
|
}
|
|||
|
|
refreshToolbarActive(taId); // re-light the format buttons for the new mode/caret
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Apply real formatting inside the contenteditable (formatted mode).
|
|||
|
|
function applyRichFormat(rich, action) {
|
|||
|
|
rich.focus();
|
|||
|
|
// Toolbar buttons can steal focus and collapse the live selection to a bare
|
|||
|
|
// caret. Prefer the real (non-collapsed) selection captured on pointer-down so
|
|||
|
|
// we format the text the user actually highlighted.
|
|||
|
|
const sel = window.getSelection();
|
|||
|
|
const live = sel.rangeCount ? sel.getRangeAt(0) : null;
|
|||
|
|
const liveUsable = live && !live.collapsed && rich.contains(live.commonAncestorContainer);
|
|||
|
|
const saved = rich._savedRange;
|
|||
|
|
if (!liveUsable && saved && rich.contains(saved.commonAncestorContainer)) {
|
|||
|
|
try { sel.removeAllRanges(); sel.addRange(saved); } catch (_) {}
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
switch (action) {
|
|||
|
|
case 'bold': document.execCommand('bold'); break;
|
|||
|
|
case 'italic': document.execCommand('italic'); break;
|
|||
|
|
case 'h': { // toggle heading on/off like bold: heading → paragraph, else → heading
|
|||
|
|
const cur = (document.queryCommandValue('formatBlock') || '').toLowerCase();
|
|||
|
|
document.execCommand('formatBlock', false, /^h[1-6]$/.test(cur) ? 'p' : 'h4');
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
case 'ul': document.execCommand('insertUnorderedList'); break;
|
|||
|
|
case 'ol': document.execCommand('insertOrderedList'); break;
|
|||
|
|
case 'task': {
|
|||
|
|
// No execCommand for task lists → round-trip through the markdown source:
|
|||
|
|
// capture current edits, toggle the caret's line to/from "- [ ] ", re-render.
|
|||
|
|
const taId = rich.dataset.mdRichFor;
|
|||
|
|
const ta = taId && document.getElementById(taId);
|
|||
|
|
if (!ta) break;
|
|||
|
|
let caret = richCaretToMarkdownOffset(rich);
|
|||
|
|
ta.value = htmlToMarkdown(rich);
|
|||
|
|
if (caret == null) caret = ta.value.length;
|
|||
|
|
caret = Math.max(0, Math.min(caret, ta.value.length));
|
|||
|
|
const v = ta.value;
|
|||
|
|
const ls = v.lastIndexOf('\n', caret - 1) + 1;
|
|||
|
|
let le = v.indexOf('\n', caret); if (le < 0) le = v.length;
|
|||
|
|
const line = v.slice(ls, le);
|
|||
|
|
const next = /^\s*[-*]\s+\[[ xX]\]\s?/.test(line)
|
|||
|
|
? line.replace(/^\s*[-*]\s+\[[ xX]\]\s?/, '') // toggle off → plain
|
|||
|
|
: '- [ ] ' + line.replace(/^\s*(?:[-*]\s+(?:\[[ xX]\]\s?)?|\d+\.\s+)/, ''); // on → strip marker, add box
|
|||
|
|
ta.value = v.slice(0, ls) + next + v.slice(le);
|
|||
|
|
const newCaret = ls + next.length;
|
|||
|
|
rich.innerHTML = markdownToRichHtml(ta.value);
|
|||
|
|
hardenRichLinks(rich);
|
|||
|
|
rich.dataset.dirty = '1';
|
|||
|
|
updateRichEmpty(rich);
|
|||
|
|
placeRichCaretAtPlainOffset(rich, markdownCaretToPlainOffset(ta.value, newCaret));
|
|||
|
|
if (sel.rangeCount) rich._savedRange = sel.getRangeAt(0).cloneRange();
|
|||
|
|
return; // skip the shared tail (we already hardened/marked dirty/saved range)
|
|||
|
|
}
|
|||
|
|
case 'link': {
|
|||
|
|
const r = sel.rangeCount ? sel.getRangeAt(0) : null;
|
|||
|
|
const hasSel = r && !r.collapsed && rich.contains(r.commonAncestorContainer);
|
|||
|
|
if (hasSel) {
|
|||
|
|
// Turn the highlighted text into a link (e.g. select "pco" → link it).
|
|||
|
|
const url = (window.prompt('Paste the web address (URL) for the selected text:', 'https://') || '').trim();
|
|||
|
|
if (url) document.execCommand('createLink', false, url);
|
|||
|
|
} else {
|
|||
|
|
// Nothing selected: ask for the text to show and where it points.
|
|||
|
|
const text = (window.prompt('Link text (what people see):', '') || '').trim();
|
|||
|
|
if (!text) break;
|
|||
|
|
const url = (window.prompt('Paste the web address (URL):', 'https://') || '').trim();
|
|||
|
|
if (!url) break;
|
|||
|
|
const a = document.createElement('a'); a.href = url; a.textContent = text;
|
|||
|
|
if (r && rich.contains(r.commonAncestorContainer)) {
|
|||
|
|
r.insertNode(a); r.setStartAfter(a); r.collapse(true);
|
|||
|
|
sel.removeAllRanges(); sel.addRange(r);
|
|||
|
|
} else { rich.appendChild(a); }
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
default: return;
|
|||
|
|
}
|
|||
|
|
} catch (_) { /* ignore unsupported execCommand */ }
|
|||
|
|
hardenRichLinks(rich); // any newly-created link becomes atomic too
|
|||
|
|
rich.dataset.dirty = '1';
|
|||
|
|
updateRichEmpty(rich);
|
|||
|
|
if (sel.rangeCount) rich._savedRange = sel.getRangeAt(0).cloneRange();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Light up the toolbar buttons whose formatting is active at the caret (like the Markdown
|
|||
|
|
// toggle lights up in source mode). WYSIWYG uses queryCommandState; source mode reads the
|
|||
|
|
// markdown around the caret. Never touches the 'preview' button — setMarkdownMode owns that.
|
|||
|
|
function mdQueryState(cmd) { try { return document.queryCommandState(cmd); } catch (_) { return false; } }
|
|||
|
|
function mdQueryValue(cmd) { try { return document.queryCommandValue(cmd) || ''; } catch (_) { return ''; } }
|
|||
|
|
function refreshToolbarActive(taId) {
|
|||
|
|
const bar = barFor(taId); if (!bar) return;
|
|||
|
|
const setOn = (md, on) => {
|
|||
|
|
const b = bar.querySelector('button[data-md="' + md + '"]');
|
|||
|
|
if (b) { b.classList.toggle('active', !!on); b.setAttribute('aria-pressed', on ? 'true' : 'false'); }
|
|||
|
|
};
|
|||
|
|
if (bar.classList.contains('source-mode')) {
|
|||
|
|
const ta = document.getElementById(taId); if (!ta) return;
|
|||
|
|
const v = ta.value, s = ta.selectionStart;
|
|||
|
|
const lineStart = v.lastIndexOf('\n', s - 1) + 1;
|
|||
|
|
let lineEnd = v.indexOf('\n', s); if (lineEnd === -1) lineEnd = v.length;
|
|||
|
|
const line = v.slice(lineStart, lineEnd);
|
|||
|
|
const isTaskLine = /^\s*[-*]\s+\[[ xX]\]\s?/.test(line);
|
|||
|
|
setOn('task', isTaskLine);
|
|||
|
|
setOn('h', /^#{1,6} /.test(line));
|
|||
|
|
setOn('ul', /^- /.test(line) && !isTaskLine); // a checkbox line isn't a plain bullet
|
|||
|
|
setOn('ol', /^\d+\. /.test(line));
|
|||
|
|
setOn('bold', v.slice(lineStart, s).includes('**') && v.slice(s, lineEnd).includes('**'));
|
|||
|
|
setOn('italic', false); // '*' vs '**' is ambiguous in raw text — don't guess
|
|||
|
|
setOn('link', false);
|
|||
|
|
} else {
|
|||
|
|
const rich = richFor(taId); if (!rich) return;
|
|||
|
|
const sel = window.getSelection();
|
|||
|
|
if (!sel || !sel.rangeCount) return;
|
|||
|
|
let node = sel.getRangeAt(0).commonAncestorContainer;
|
|||
|
|
if (!rich.contains(node)) return; // selection is elsewhere — leave this toolbar alone
|
|||
|
|
setOn('bold', mdQueryState('bold'));
|
|||
|
|
setOn('italic', mdQueryState('italic'));
|
|||
|
|
setOn('h', /^h[1-6]$/.test(mdQueryValue('formatBlock').toLowerCase()));
|
|||
|
|
while (node && node.nodeType !== 1) node = node.parentNode;
|
|||
|
|
const inTask = !!(node && node.closest && node.closest('li.md-task'));
|
|||
|
|
setOn('task', inTask);
|
|||
|
|
setOn('ul', mdQueryState('insertUnorderedList') && !inTask); // don't invite pressing ul on a task line
|
|||
|
|
setOn('ol', mdQueryState('insertOrderedList'));
|
|||
|
|
setOn('link', !!(node && node.closest && node.closest('a')));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ── Attach a document (📎) ────────────────────────────────────────────
|
|||
|
|
// Upload a local file (PDF/Word/Excel/PowerPoint…) and insert a link to it at
|
|||
|
|
// the caret — the description counterpart of an equipment photo. Google Docs
|
|||
|
|
// and other web pages don't need this: the 🔗 Link button takes any URL.
|
|||
|
|
let attachInput = null;
|
|||
|
|
function attachDocument(taId, btn) {
|
|||
|
|
const ta = document.getElementById(taId);
|
|||
|
|
const bar = barFor(taId);
|
|||
|
|
const rich = richFor(taId);
|
|||
|
|
if (!ta || !bar || !rich) return;
|
|||
|
|
if (!attachInput) {
|
|||
|
|
attachInput = document.createElement('input');
|
|||
|
|
attachInput.type = 'file';
|
|||
|
|
attachInput.accept = '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv,.rtf';
|
|||
|
|
attachInput.style.display = 'none';
|
|||
|
|
document.body.appendChild(attachInput);
|
|||
|
|
}
|
|||
|
|
attachInput.onchange = async () => {
|
|||
|
|
const file = attachInput.files && attachInput.files[0];
|
|||
|
|
attachInput.value = ''; // allow re-picking the same file later
|
|||
|
|
if (!file) return;
|
|||
|
|
if (file.size > 25 * 1024 * 1024) { showToast('File too large (max 25 MB)', 'error'); return; }
|
|||
|
|
const dataUrl = await new Promise((resolve) => {
|
|||
|
|
const r = new FileReader();
|
|||
|
|
r.onload = () => resolve(r.result);
|
|||
|
|
r.onerror = () => resolve(null);
|
|||
|
|
r.readAsDataURL(file);
|
|||
|
|
});
|
|||
|
|
if (!dataUrl) { showToast('Could not read that file', 'error'); return; }
|
|||
|
|
if (btn) btn.disabled = true;
|
|||
|
|
try {
|
|||
|
|
const res = await apiPost('/api/documents/upload', { dataUrl, name: file.name });
|
|||
|
|
// [label] can't contain ] or newlines — keep the filename otherwise.
|
|||
|
|
const label = String(res.name || file.name).replace(/[\[\]\n]/g, ' ').trim() || 'document';
|
|||
|
|
if (bar.classList.contains('source-mode')) {
|
|||
|
|
const start = ta.selectionStart, end = ta.selectionEnd;
|
|||
|
|
const md = '[' + label + '](' + res.path + ')';
|
|||
|
|
ta.value = ta.value.slice(0, start) + md + ta.value.slice(end);
|
|||
|
|
ta.focus();
|
|||
|
|
ta.setSelectionRange(start + md.length, start + md.length);
|
|||
|
|
} else {
|
|||
|
|
const a = document.createElement('a');
|
|||
|
|
a.href = res.path;
|
|||
|
|
a.className = 'doc-link';
|
|||
|
|
a.target = '_blank'; a.rel = 'noopener noreferrer';
|
|||
|
|
a.setAttribute('contenteditable', 'false'); // atomic, like hardenRichLinks
|
|||
|
|
a.textContent = label;
|
|||
|
|
const space = document.createTextNode(' '); // typing continues OUTSIDE the atomic link
|
|||
|
|
const saved = rich._savedRange;
|
|||
|
|
const sel = window.getSelection();
|
|||
|
|
if (saved && rich.contains(saved.commonAncestorContainer)) {
|
|||
|
|
saved.collapse(false); // after any highlighted text, never replacing it
|
|||
|
|
saved.insertNode(space);
|
|||
|
|
saved.insertNode(a);
|
|||
|
|
saved.setStartAfter(space); saved.collapse(true);
|
|||
|
|
try { sel.removeAllRanges(); sel.addRange(saved); } catch (_) {}
|
|||
|
|
} else {
|
|||
|
|
rich.appendChild(a);
|
|||
|
|
rich.appendChild(space);
|
|||
|
|
}
|
|||
|
|
rich.dataset.dirty = '1';
|
|||
|
|
updateRichEmpty(rich);
|
|||
|
|
}
|
|||
|
|
showToast('Attached “' + label + '”', 'success');
|
|||
|
|
} catch (err) {
|
|||
|
|
showToast('Upload failed: ' + (err && err.message ? err.message : 'try again'), 'error');
|
|||
|
|
} finally {
|
|||
|
|
if (btn) btn.disabled = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
attachInput.click();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setupMarkdownToolbars() {
|
|||
|
|
// Remember the caret/selection inside whichever formatted editor it's in, so
|
|||
|
|
// toolbar buttons (which can steal focus) still format the intended text.
|
|||
|
|
document.addEventListener('selectionchange', () => {
|
|||
|
|
const sel = window.getSelection();
|
|||
|
|
if (!sel || sel.rangeCount === 0) return;
|
|||
|
|
const rg = sel.getRangeAt(0);
|
|||
|
|
let node = rg.commonAncestorContainer;
|
|||
|
|
while (node && node.nodeType !== 1) node = node.parentNode;
|
|||
|
|
const rich = node && node.closest ? node.closest('.md-rich') : null;
|
|||
|
|
if (rich) { rich._savedRange = rg.cloneRange(); refreshToolbarActive(rich.dataset.mdRichFor); }
|
|||
|
|
const ae = document.activeElement; // source-mode textarea caret moves
|
|||
|
|
if (ae && ae.tagName === 'TEXTAREA' && barFor(ae.id)) refreshToolbarActive(ae.id);
|
|||
|
|
});
|
|||
|
|
document.querySelectorAll('.md-toolbar').forEach((bar) => {
|
|||
|
|
const taId = bar.dataset.mdTarget;
|
|||
|
|
const ta = document.getElementById(taId);
|
|||
|
|
const rich = richFor(taId);
|
|||
|
|
if (!ta || !rich) return;
|
|||
|
|
// Pressing a toolbar button must not lose the editor's selection. Capture
|
|||
|
|
// it synchronously on pointer/mouse-down (before focus moves to the button)
|
|||
|
|
// and preventDefault so focus stays in the editor.
|
|||
|
|
const captureSel = (e) => {
|
|||
|
|
if (!e.target.closest('button[data-md]')) return;
|
|||
|
|
e.preventDefault();
|
|||
|
|
const sel = window.getSelection();
|
|||
|
|
if (sel && sel.rangeCount) {
|
|||
|
|
const rg = sel.getRangeAt(0);
|
|||
|
|
if (rich.contains(rg.commonAncestorContainer)) rich._savedRange = rg.cloneRange();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
bar.addEventListener('pointerdown', captureSel);
|
|||
|
|
bar.addEventListener('mousedown', captureSel);
|
|||
|
|
bar.addEventListener('click', (e) => {
|
|||
|
|
const btn = e.target.closest('button[data-md]');
|
|||
|
|
if (!btn) return;
|
|||
|
|
e.preventDefault();
|
|||
|
|
if (btn.dataset.md === 'preview') { setMarkdownMode(taId, !bar.classList.contains('source-mode')); return; }
|
|||
|
|
if (btn.dataset.md === 'attach') { attachDocument(taId, btn); return; } // async upload+insert, same in both modes
|
|||
|
|
if (bar.classList.contains('source-mode')) applyMarkdown(ta, btn.dataset.md);
|
|||
|
|
else applyRichFormat(rich, btn.dataset.md);
|
|||
|
|
refreshToolbarActive(taId);
|
|||
|
|
});
|
|||
|
|
rich.addEventListener('input', () => { repairDamagedTaskLis(rich); rich.dataset.dirty = '1'; updateRichEmpty(rich); refreshToolbarActive(taId); });
|
|||
|
|
rich.addEventListener('keydown', (e) => handleRichEnter(e, rich));
|
|||
|
|
rich.addEventListener('keydown', (e) => handleRichDeleteKeys(e, rich));
|
|||
|
|
rich.addEventListener('beforeinput', (e) => handleRichBeforeInputDelete(e, rich));
|
|||
|
|
['keyup', 'click', 'input'].forEach((ev) => ta.addEventListener(ev, () => refreshToolbarActive(taId)));
|
|||
|
|
ta.addEventListener('input', () => autoGrowTa(ta));
|
|||
|
|
ta.addEventListener('keydown', (e) => handleTaEnter(e, ta));
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Open a description fresh in formatted mode (never stuck in source/markdown).
|
|||
|
|
function resetMarkdownEditor(taId) {
|
|||
|
|
const ta = document.getElementById(taId);
|
|||
|
|
const bar = barFor(taId);
|
|||
|
|
const rich = richFor(taId);
|
|||
|
|
if (!ta || !bar || !rich) return;
|
|||
|
|
bar.classList.remove('source-mode');
|
|||
|
|
const btn = bar.querySelector('.md-preview-btn');
|
|||
|
|
if (btn) { btn.classList.remove('active'); btn.setAttribute('aria-pressed', 'false'); }
|
|||
|
|
rich.innerHTML = markdownToRichHtml(ta.value);
|
|||
|
|
hardenRichLinks(rich);
|
|||
|
|
rich.dataset.dirty = '';
|
|||
|
|
rich.style.height = ''; ta.style.height = '';
|
|||
|
|
ta.style.display = 'none'; rich.style.display = '';
|
|||
|
|
updateRichEmpty(rich);
|
|||
|
|
refreshToolbarActive(taId); // start with the buttons reflecting the (empty) content
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── List menu (popover / bottom sheet) ──────────────────────
|
|||
|
|
// Position the fixed panel so it's always fully on screen: align its right
|
|||
|
|
// edge under the button, open below if there's room else flip above, and
|
|||
|
|
// clamp to the viewport (capping height + scrolling if it's very tall). On
|
|||
|
|
// narrow phones the CSS bottom-sheet rule takes over, so we bail out there.
|
|||
|
|
function positionListMenu() {
|
|||
|
|
const panel = listMenuPanel;
|
|||
|
|
panel.style.left = panel.style.top = panel.style.maxHeight = '';
|
|||
|
|
if (window.innerWidth <= 700) return; // CSS bottom sheet handles phones
|
|||
|
|
const margin = 8;
|
|||
|
|
const vw = window.innerWidth, vh = window.innerHeight;
|
|||
|
|
panel.style.maxHeight = (vh - margin * 2) + 'px';
|
|||
|
|
const br = listMenuHandle.getBoundingClientRect();
|
|||
|
|
const pw = panel.offsetWidth;
|
|||
|
|
const ph = Math.min(panel.scrollHeight, vh - margin * 2);
|
|||
|
|
let left = Math.max(margin, Math.min(br.right - pw, vw - pw - margin));
|
|||
|
|
let top;
|
|||
|
|
if (ph <= vh - br.bottom - margin) top = br.bottom + 6; // below
|
|||
|
|
else if (ph <= br.top - margin) top = br.top - ph - 6; // flip above
|
|||
|
|
else top = margin; // clamp + scroll
|
|||
|
|
panel.style.left = left + 'px';
|
|||
|
|
panel.style.top = top + 'px';
|
|||
|
|
}
|
|||
|
|
function setupListMenuHandle() {
|
|||
|
|
if (!listMenu || !listMenuHandle || !listMenuPanel) return;
|
|||
|
|
let closeTimer = null;
|
|||
|
|
const clearSheetInline = () => {
|
|||
|
|
listMenuPanel.style.transition = '';
|
|||
|
|
listMenuPanel.style.transform = '';
|
|||
|
|
listMenuPanel.style.opacity = '';
|
|||
|
|
if (listMenuBackdrop) { listMenuBackdrop.style.transition = ''; listMenuBackdrop.style.opacity = ''; }
|
|||
|
|
};
|
|||
|
|
const setOpen = (open) => {
|
|||
|
|
if (open) {
|
|||
|
|
if (closeTimer) { clearTimeout(closeTimer); closeTimer = null; }
|
|||
|
|
clearSheetInline();
|
|||
|
|
listMenu.classList.add('open');
|
|||
|
|
listMenuHandle.setAttribute('aria-expanded', 'true');
|
|||
|
|
positionListMenu();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!listMenu.classList.contains('open')) return;
|
|||
|
|
listMenuHandle.setAttribute('aria-expanded', 'false');
|
|||
|
|
const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|||
|
|
if (reduce) { listMenu.classList.remove('open'); clearSheetInline(); return; }
|
|||
|
|
// Animate out: slide down (mobile sheet) or fade+lift (desktop popover),
|
|||
|
|
// starting from wherever it is now (so a mid-swipe drag continues smoothly).
|
|||
|
|
const mobile = window.innerWidth <= 700;
|
|||
|
|
void listMenuPanel.offsetHeight; // commit current transform before transitioning
|
|||
|
|
listMenuPanel.style.transition = 'transform 0.2s ease, opacity 0.2s ease';
|
|||
|
|
listMenuPanel.style.transform = mobile ? 'translateY(110%)' : 'translateY(-8px) scale(0.97)';
|
|||
|
|
listMenuPanel.style.opacity = '0';
|
|||
|
|
if (listMenuBackdrop) { listMenuBackdrop.style.transition = 'opacity 0.2s ease'; listMenuBackdrop.style.opacity = '0'; }
|
|||
|
|
if (closeTimer) clearTimeout(closeTimer);
|
|||
|
|
closeTimer = setTimeout(() => { listMenu.classList.remove('open'); clearSheetInline(); closeTimer = null; }, 210);
|
|||
|
|
};
|
|||
|
|
listMenuHandle.addEventListener('click', (e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
setOpen(!listMenu.classList.contains('open'));
|
|||
|
|
});
|
|||
|
|
// Pick a tool → run it, then close the menu (skip the hidden file input).
|
|||
|
|
listMenuPanel.addEventListener('click', (e) => {
|
|||
|
|
if (e.target.closest('button')) setOpen(false);
|
|||
|
|
});
|
|||
|
|
if (listMenuBackdrop) listMenuBackdrop.addEventListener('click', () => setOpen(false));
|
|||
|
|
// Click anywhere outside the menu closes it.
|
|||
|
|
document.addEventListener('click', (e) => {
|
|||
|
|
if (listMenu.classList.contains('open') && !listMenu.contains(e.target)) setOpen(false);
|
|||
|
|
});
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.key === 'Escape' && listMenu.classList.contains('open')) { setOpen(false); listMenuHandle.focus(); }
|
|||
|
|
});
|
|||
|
|
// Keep it on-screen if the window resizes while open.
|
|||
|
|
window.addEventListener('resize', () => { if (listMenu.classList.contains('open')) positionListMenu(); });
|
|||
|
|
|
|||
|
|
// Mobile bottom sheet: swipe it down to dismiss. We only drag-to-close when
|
|||
|
|
// the sheet's content is scrolled to the top and the finger moves DOWN — so
|
|||
|
|
// normal scrolling of the menu items is untouched.
|
|||
|
|
let touchStartY = null, touchStartScroll = 0, dragging = false;
|
|||
|
|
const SHEET_DISMISS = 80; // px of downward drag to close
|
|||
|
|
listMenuPanel.addEventListener('touchstart', (e) => {
|
|||
|
|
if (window.innerWidth > 700 || e.touches.length !== 1) { touchStartY = null; return; }
|
|||
|
|
touchStartY = e.touches[0].clientY;
|
|||
|
|
touchStartScroll = listMenuPanel.scrollTop;
|
|||
|
|
dragging = false;
|
|||
|
|
}, { passive: true });
|
|||
|
|
listMenuPanel.addEventListener('touchmove', (e) => {
|
|||
|
|
if (touchStartY === null) return;
|
|||
|
|
const dy = e.touches[0].clientY - touchStartY;
|
|||
|
|
if (dy > 0 && touchStartScroll <= 0) {
|
|||
|
|
dragging = true;
|
|||
|
|
listMenuPanel.style.transition = 'none';
|
|||
|
|
listMenuPanel.style.transform = 'translateY(' + Math.max(0, dy) + 'px)';
|
|||
|
|
if (e.cancelable) e.preventDefault(); // suppress page scroll / rubber-band while dragging
|
|||
|
|
}
|
|||
|
|
}, { passive: false });
|
|||
|
|
const endSwipe = (e) => {
|
|||
|
|
if (touchStartY === null) return;
|
|||
|
|
const t = (e.changedTouches && e.changedTouches[0]) || null;
|
|||
|
|
const dy = t ? t.clientY - touchStartY : 0;
|
|||
|
|
if (dragging) {
|
|||
|
|
if (dy > SHEET_DISMISS) {
|
|||
|
|
setOpen(false); // animates the slide-out from the current dragged position
|
|||
|
|
} else {
|
|||
|
|
listMenuPanel.style.transition = 'transform 0.18s ease';
|
|||
|
|
listMenuPanel.style.transform = ''; // snap back into place
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
touchStartY = null; dragging = false;
|
|||
|
|
};
|
|||
|
|
listMenuPanel.addEventListener('touchend', endSwipe, { passive: true });
|
|||
|
|
listMenuPanel.addEventListener('touchcancel', endSwipe, { passive: true });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Mobile swipe between lists ───────────────────────────────
|
|||
|
|
// On phones, a mostly-horizontal swipe across the board moves to the
|
|||
|
|
// previous / next list. We step through visibleLists() — the SAME ordered,
|
|||
|
|
// permission-filtered set the tabs are built from — so every tier (member,
|
|||
|
|
// team admin, executive, master) swipes only through the lists it's allowed
|
|||
|
|
// to see, in tab order. No separate permission check is needed here.
|
|||
|
|
function setupListSwipeNav() {
|
|||
|
|
const main = document.querySelector('.main-content');
|
|||
|
|
if (!main) return;
|
|||
|
|
const SWIPE_MIN = 60; // px of horizontal travel to count as a swipe
|
|||
|
|
const EDGE_RESIST = 0.3; // rubber-band when dragging past the first/last list
|
|||
|
|
let startX = 0, startY = 0, lastX = 0;
|
|||
|
|
let tracking = false; // a one-finger candidate gesture is in progress
|
|||
|
|
let locked = null; // null until we commit to 'x' (swipe) or 'y' (scroll)
|
|||
|
|
let section = null; // the .checklists-section we translate to follow the finger
|
|||
|
|
let neighbors = null; // { prevId, nextId } resolved when the gesture starts
|
|||
|
|
|
|||
|
|
const board = () => document.querySelector('.checklists-section');
|
|||
|
|
|
|||
|
|
// Previous / next list ids within THIS user's own visible, ordered set.
|
|||
|
|
function resolveNeighbors() {
|
|||
|
|
const lists = visibleLists();
|
|||
|
|
const cur = getCurrentList();
|
|||
|
|
if (!cur || lists.length < 2) return null; // nothing to swipe to
|
|||
|
|
const i = lists.findIndex((l) => l.id === cur.id);
|
|||
|
|
if (i < 0) return null;
|
|||
|
|
return {
|
|||
|
|
prevId: i > 0 ? lists[i - 1].id : null,
|
|||
|
|
nextId: i < lists.length - 1 ? lists[i + 1].id : null,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
function clearFollow(animate) {
|
|||
|
|
if (!section) return;
|
|||
|
|
section.style.transition = animate ? 'transform 0.2s ease-out' : 'none';
|
|||
|
|
section.style.transform = '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
main.addEventListener('touchstart', (e) => {
|
|||
|
|
// Phones only; one finger; never hijack the tabs (tap-to-switch / admin
|
|||
|
|
// drag-reorder), a contenteditable, or anything while a dialog is open.
|
|||
|
|
if (window.innerWidth > 700 || e.touches.length !== 1) { tracking = false; return; }
|
|||
|
|
if (e.target.closest('.list-tab, .list-tree, .modal-overlay, [contenteditable="true"]')) { tracking = false; return; }
|
|||
|
|
neighbors = resolveNeighbors();
|
|||
|
|
if (!neighbors) { tracking = false; return; }
|
|||
|
|
const t = e.touches[0];
|
|||
|
|
startX = lastX = t.clientX; startY = t.clientY;
|
|||
|
|
tracking = true; locked = null; section = board();
|
|||
|
|
}, { passive: true });
|
|||
|
|
|
|||
|
|
main.addEventListener('touchmove', (e) => {
|
|||
|
|
if (!tracking) return;
|
|||
|
|
const t = e.touches[0];
|
|||
|
|
const dx = t.clientX - startX;
|
|||
|
|
const dy = t.clientY - startY;
|
|||
|
|
lastX = t.clientX;
|
|||
|
|
if (locked === null) {
|
|||
|
|
if (Math.abs(dx) < 8 && Math.abs(dy) < 8) return; // wait for a clear direction
|
|||
|
|
locked = (Math.abs(dx) > Math.abs(dy) * 1.3) ? 'x' : 'y';
|
|||
|
|
if (locked === 'y') { tracking = false; return; } // it's a scroll — let the page move
|
|||
|
|
}
|
|||
|
|
if (locked !== 'x') return;
|
|||
|
|
if (e.cancelable) e.preventDefault(); // we own this gesture now → suppress page scroll
|
|||
|
|
// Rubber-band when sliding toward a list that isn't there (first/last).
|
|||
|
|
let eff = dx;
|
|||
|
|
if ((dx > 0 && !neighbors.prevId) || (dx < 0 && !neighbors.nextId)) eff = dx * EDGE_RESIST;
|
|||
|
|
if (section && !prefersReduced()) {
|
|||
|
|
section.style.transition = 'none';
|
|||
|
|
section.style.transform = 'translateX(' + eff + 'px)';
|
|||
|
|
}
|
|||
|
|
}, { passive: false });
|
|||
|
|
|
|||
|
|
function endGesture() {
|
|||
|
|
if (!tracking) return;
|
|||
|
|
tracking = false;
|
|||
|
|
if (locked !== 'x') return;
|
|||
|
|
justSwiped = Date.now(); // a horizontal swipe happened → suppress the stray trailing tap→collapse
|
|||
|
|
const dx = lastX - startX;
|
|||
|
|
// Swipe left → next list; swipe right → previous list.
|
|||
|
|
const targetId = dx <= -SWIPE_MIN ? neighbors.nextId
|
|||
|
|
: dx >= SWIPE_MIN ? neighbors.prevId
|
|||
|
|
: null;
|
|||
|
|
if (targetId) {
|
|||
|
|
haptic(HAPTIC_TAP);
|
|||
|
|
clearFollow(false); // drop the follow; the incoming list cascades in
|
|||
|
|
setSelectedList(targetId);
|
|||
|
|
} else {
|
|||
|
|
clearFollow(true); // too short, or hit an end → snap back
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
main.addEventListener('touchend', endGesture, { passive: true });
|
|||
|
|
main.addEventListener('touchcancel', () => { tracking = false; clearFollow(true); }, { passive: true });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Login / logout ──────────────────────────────────────────
|
|||
|
|
function openLogin() {
|
|||
|
|
loginLocation.value = '';
|
|||
|
|
loginTeam.value = '';
|
|||
|
|
if (loginExecName) loginExecName.value = '';
|
|||
|
|
loginPassword.value = '';
|
|||
|
|
loginError.style.display = 'none';
|
|||
|
|
loginModal.style.display = 'flex';
|
|||
|
|
updateLoginTeamVisibility();
|
|||
|
|
loadDirectory();
|
|||
|
|
// Autofocus is a real help on a desktop — you can type the location straight away.
|
|||
|
|
// On a touch device, focusing a <select> immediately pops the OS picker over the
|
|||
|
|
// whole sign-in sheet, so the app (and mobile web) opens on a wall of options
|
|||
|
|
// instead of the form. Fine pointer = mouse/trackpad, so desktop keeps the
|
|||
|
|
// affordance and phones get the sheet they expect.
|
|||
|
|
if (!window.matchMedia || window.matchMedia('(pointer: fine)').matches) {
|
|||
|
|
requestAnimationFrame(() => { loginLocation.focus({ preventScroll: true }); });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// "Executive" login swaps the Team dropdown for a "Who are you?" name field.
|
|||
|
|
function updateLoginTeamVisibility() {
|
|||
|
|
const teamGroup = loginTeam && loginTeam.closest('.form-group');
|
|||
|
|
const isExec = loginLocation && loginLocation.value === 'executive';
|
|||
|
|
if (teamGroup) {
|
|||
|
|
teamGroup.style.display = isExec ? 'none' : 'block';
|
|||
|
|
if (isExec) loginTeam.value = '';
|
|||
|
|
}
|
|||
|
|
if (loginExecNameGroup) {
|
|||
|
|
loginExecNameGroup.style.display = isExec ? 'block' : 'none';
|
|||
|
|
if (!isExec && loginExecName) loginExecName.value = '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function closeLogin() { closeOverlay(loginModal); }
|
|||
|
|
|
|||
|
|
async function submitLogin() {
|
|||
|
|
const location = loginLocation.value.trim();
|
|||
|
|
const team = loginTeam.value.trim();
|
|||
|
|
const name = (loginExecName && loginExecName.value || '').trim();
|
|||
|
|
const password = loginPassword.value;
|
|||
|
|
if (!location || !password) {
|
|||
|
|
loginError.textContent = 'Enter your location and password.';
|
|||
|
|
loginError.style.display = 'block';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
const res = await fetch('/api/login', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
// location doubles as `username` (master/legacy resolution); `name` is
|
|||
|
|
// the "Who are you?" value used only for named-executive logins.
|
|||
|
|
body: JSON.stringify({ username: location, location, team, name, password })
|
|||
|
|
});
|
|||
|
|
if (!res.ok) {
|
|||
|
|
let msg = 'Wrong username or password.';
|
|||
|
|
try { const j = await res.json(); if (j && j.error) msg = j.error; } catch (_) {}
|
|||
|
|
loginError.textContent = msg;
|
|||
|
|
loginError.style.display = 'block';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const data = await res.json();
|
|||
|
|
sessionToken = data.token;
|
|||
|
|
localStorage.setItem('checklist:token', sessionToken);
|
|||
|
|
applyUser(data.user);
|
|||
|
|
closeLogin();
|
|||
|
|
await refreshState();
|
|||
|
|
maybePromptChecker(); // checker with no name yet → pop the picker
|
|||
|
|
} catch (err) {
|
|||
|
|
loginError.textContent = 'Network error: ' + err.message;
|
|||
|
|
loginError.style.display = 'block';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function logout() {
|
|||
|
|
try { await apiPost('/api/logout', {}); } catch (_) {}
|
|||
|
|
sessionToken = '';
|
|||
|
|
localStorage.removeItem('checklist:token');
|
|||
|
|
applyUser(null);
|
|||
|
|
openLogin();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function applyUser(user) {
|
|||
|
|
currentUser = user;
|
|||
|
|
userName = user ? (user.displayName || user.username) : '';
|
|||
|
|
clearHistory(); // undo/redo history is per-session and per-user — never carry it across logins
|
|||
|
|
// Animation state is per-session too — start each login/logout with a clean slate so the
|
|||
|
|
// first render can't mis-detect a list switch, mis-fire confetti, or carry a deferred render.
|
|||
|
|
if (deferredRenderTimer) { clearTimeout(deferredRenderTimer); deferredRenderTimer = null; }
|
|||
|
|
restoreColumnsAfterFlight();
|
|||
|
|
animatingUntil = 0; firstDeferAt = 0; lastRenderedListId = null; celebratedListId = null; justMovedItemId = null;
|
|||
|
|
|
|||
|
|
// admin-mode = any admin (gets editing UI). master-mode = full control
|
|||
|
|
// (user management, digests, import — the master-only menu items).
|
|||
|
|
document.body.classList.toggle('admin-mode', !!(user && isEditor()));
|
|||
|
|
document.body.classList.toggle('master-mode', !!(user && isMasterAdmin()));
|
|||
|
|
// checker-mode = a shared team login (gets the "tap your name" chip).
|
|||
|
|
document.body.classList.toggle('checker-mode', !!(user && user.role === 'user'));
|
|||
|
|
loadActivePerson();
|
|||
|
|
loadCollapseState(); // per-user collapse layout (empty map on logout → no leak to the next login)
|
|||
|
|
loadColFoldState(); // per-user column folds (same lifecycle)
|
|||
|
|
// First-run tips: re-arm the check on each login (shows once per user+device); clear on logout.
|
|||
|
|
firstRunChecked = false;
|
|||
|
|
if (firstRunEl) firstRunEl.classList.remove('open');
|
|||
|
|
if (user) maybeShowFirstRun();
|
|||
|
|
// Restore the "hide lists" preference (only takes visual effect in master mode).
|
|||
|
|
let listsHidden = false;
|
|||
|
|
try { listsHidden = localStorage.getItem('checklist:listsHidden') === '1'; } catch (_) {}
|
|||
|
|
document.body.classList.toggle('lists-hidden', listsHidden);
|
|||
|
|
// Restore the tree-vs-tabs navigator preference (master mode only, via CSS).
|
|||
|
|
let treeView = false;
|
|||
|
|
try { treeView = localStorage.getItem('checklist:treeView') === '1'; } catch (_) {}
|
|||
|
|
document.body.classList.toggle('tree-view', treeView);
|
|||
|
|
if (user) {
|
|||
|
|
userBadgeName.textContent = userBadgeText(user);
|
|||
|
|
} else {
|
|||
|
|
userBadgeName.textContent = 'Sign in';
|
|||
|
|
checklistData = { lists: [], selectedListId: null, checks: {} };
|
|||
|
|
renderLists();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Clean header label: master -> "Admin"; team login -> "Woonsocket · Production".
|
|||
|
|
function userBadgeText(user) {
|
|||
|
|
if (!user) return 'Sign in';
|
|||
|
|
if (isMasterAdmin()) return user.displayName || 'Executive';
|
|||
|
|
const loc = (user.location || '').trim();
|
|||
|
|
const team = (user.team || '').trim();
|
|||
|
|
if (loc && team) return loc + ' · ' + team;
|
|||
|
|
if (loc) return loc;
|
|||
|
|
return user.displayName || user.username;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleSessionExpired() {
|
|||
|
|
sessionToken = '';
|
|||
|
|
localStorage.removeItem('checklist:token');
|
|||
|
|
applyUser(null);
|
|||
|
|
openLogin();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── User management (admin only) ────────────────────────────
|
|||
|
|
async function openUserMgmt() {
|
|||
|
|
userMgmtError.style.display = 'none';
|
|||
|
|
newUserLocation.value = '';
|
|||
|
|
newUserTeam.value = '';
|
|||
|
|
newUserPassword.value = '';
|
|||
|
|
newUserEmails.value = '';
|
|||
|
|
userMgmtModal.style.display = 'flex';
|
|||
|
|
if (newExecName) newExecName.value = '';
|
|||
|
|
if (newExecPassword) newExecPassword.value = '';
|
|||
|
|
if (userMgmtSearch) userMgmtSearch.value = '';
|
|||
|
|
if (execSearch) execSearch.value = '';
|
|||
|
|
renderDirectoryEditor();
|
|||
|
|
renderExecList();
|
|||
|
|
await renderUserMgmtList();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Editable short codes (abbreviations) for each location/team in the directory.
|
|||
|
|
function renderDirectoryEditor() {
|
|||
|
|
if (!directoryEditor) return;
|
|||
|
|
const dir = checklistData.directory || { locations: [], teams: [] };
|
|||
|
|
const rows = (kind, entries) => (entries && entries.length)
|
|||
|
|
? entries.map((e) => {
|
|||
|
|
// Locations get an editable abbreviation (shown in the list tags).
|
|||
|
|
const abbrevField = kind === 'locations'
|
|||
|
|
? `<input class="dir-abbrev" type="text" maxlength="5" value="${escapeAttr((e.abbrev ? e.abbrev : locAbbrevDefault(e.name)).toUpperCase())}" data-dir-abbrev="${escapeAttr(e.name)}" title="Short tag for ${escapeAttr(e.name)}" aria-label="Abbreviation for ${escapeAttr(e.name)}" />`
|
|||
|
|
: '';
|
|||
|
|
return `
|
|||
|
|
<div class="dir-row">
|
|||
|
|
<span class="dir-name">${escapeHtml(e.name)}</span>
|
|||
|
|
${abbrevField}
|
|||
|
|
<span class="dir-row-actions">
|
|||
|
|
<button class="dir-edit" type="button" title="Rename" data-dir-edit="${kind}" data-name="${escapeAttr(e.name)}">✎</button>
|
|||
|
|
<button class="dir-del" type="button" title="Remove" data-dir-del="${kind}" data-name="${escapeAttr(e.name)}">×</button>
|
|||
|
|
</span>
|
|||
|
|
</div>`;
|
|||
|
|
}).join('')
|
|||
|
|
: '<div class="empty-state" style="padding:4px;">none yet</div>';
|
|||
|
|
const addRow = (kind, ph) => kind === 'locations'
|
|||
|
|
? `<div class="dir-add">
|
|||
|
|
<input id="dirAdd-locations" placeholder="${ph}" autocapitalize="words" />
|
|||
|
|
<input id="dirAddAbbrev-locations" class="dir-abbrev" maxlength="5" placeholder="ABBR" aria-label="Abbreviation for the new location" />
|
|||
|
|
<button class="btn btn-secondary btn-small" type="button" data-dir-add="locations">Add</button>
|
|||
|
|
</div>`
|
|||
|
|
: `<div class="dir-add">
|
|||
|
|
<input id="dirAdd-${kind}" placeholder="${ph}" autocapitalize="words" />
|
|||
|
|
<button class="btn btn-secondary btn-small" type="button" data-dir-add="${kind}">Add</button>
|
|||
|
|
</div>`;
|
|||
|
|
directoryEditor.innerHTML =
|
|||
|
|
`<div class="dir-col"><div class="dir-head">Locations</div>${rows('locations', dir.locations)}${addRow('locations', 'Add location…')}</div>` +
|
|||
|
|
`<div class="dir-col"><div class="dir-head">Teams</div>${rows('teams', dir.teams)}${addRow('teams', 'Add team…')}</div>`;
|
|||
|
|
}
|
|||
|
|
// A fresh copy of the stored directory to mutate before PUTting it back.
|
|||
|
|
function dirClone() {
|
|||
|
|
const d = checklistData.directory || { locations: [], teams: [] };
|
|||
|
|
return {
|
|||
|
|
locations: (d.locations || []).map((e) => ({ name: e.name, abbrev: e.abbrev || '' })),
|
|||
|
|
teams: (d.teams || []).map((e) => ({ name: e.name, abbrev: e.abbrev || '' }))
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
// Serialize all directory writes through one chain so concurrent ops can't
|
|||
|
|
// clobber each other — e.g. an abbrev field's blur-save racing a delete click.
|
|||
|
|
// Each step reads a FRESH clone (the prior step already refreshed checklistData),
|
|||
|
|
// so the delete operates on state that already includes the abbrev change.
|
|||
|
|
let dirChain = Promise.resolve();
|
|||
|
|
function queueDirChange(mutate, successMsg) {
|
|||
|
|
dirChain = dirChain.then(async () => {
|
|||
|
|
const dir = dirClone();
|
|||
|
|
if (mutate(dir) === false) return; // mutator aborted (no-op / validation)
|
|||
|
|
await apiPut('/api/admin/directory', dir);
|
|||
|
|
await refreshState({ showToastOnError: false }); // re-renders dropdowns everywhere
|
|||
|
|
renderDirectoryEditor();
|
|||
|
|
if (successMsg) showToast(successMsg, 'success');
|
|||
|
|
}).catch((err) => { if (userMgmtError) { userMgmtError.textContent = err.message; userMgmtError.style.display = 'block'; } });
|
|||
|
|
return dirChain;
|
|||
|
|
}
|
|||
|
|
function addDirectoryEntry(kind) {
|
|||
|
|
const input = document.getElementById('dirAdd-' + kind);
|
|||
|
|
const name = ((input && input.value) || '').trim();
|
|||
|
|
if (!name) return;
|
|||
|
|
let abbrev = '';
|
|||
|
|
if (kind === 'locations') { const a = document.getElementById('dirAddAbbrev-locations'); abbrev = ((a && a.value) || '').trim(); }
|
|||
|
|
queueDirChange((dir) => {
|
|||
|
|
const arr = kind === 'teams' ? dir.teams : dir.locations;
|
|||
|
|
if (arr.some((e) => (e.name || '').toLowerCase() === name.toLowerCase())) { showToast('Already in the list', 'error'); return false; }
|
|||
|
|
arr.push(kind === 'teams' ? { name, abbrev: '' } : { name, abbrev });
|
|||
|
|
}, `Added "${name}"`);
|
|||
|
|
}
|
|||
|
|
function saveLocationAbbrev(name, abbrev) {
|
|||
|
|
const next = (abbrev || '').trim();
|
|||
|
|
queueDirChange((dir) => {
|
|||
|
|
const entry = dir.locations.find((e) => (e.name || '').toLowerCase() === (name || '').toLowerCase());
|
|||
|
|
if (!entry) return false;
|
|||
|
|
if ((entry.abbrev || '').toLowerCase() === next.toLowerCase()) return false; // no change
|
|||
|
|
entry.abbrev = next;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
function removeDirectoryEntry(kind, name) {
|
|||
|
|
queueDirChange((dir) => {
|
|||
|
|
if (kind === 'teams') dir.teams = dir.teams.filter((e) => e.name !== name);
|
|||
|
|
else dir.locations = dir.locations.filter((e) => e.name !== name);
|
|||
|
|
}, `Removed "${name}"`);
|
|||
|
|
}
|
|||
|
|
// Swap a directory row into an inline rename field (kind is 'locations'|'teams').
|
|||
|
|
function beginDirectoryRename(btn, kind, name) {
|
|||
|
|
const row = btn.closest('.dir-row');
|
|||
|
|
if (!row) return;
|
|||
|
|
row.innerHTML =
|
|||
|
|
`<input class="dir-rename-input" type="text" value="${escapeAttr(name)}" autocapitalize="words" />` +
|
|||
|
|
`<span class="dir-row-actions">` +
|
|||
|
|
`<button class="dir-edit" type="button" title="Save" data-dir-rename-save="${kind}" data-from="${escapeAttr(name)}">✓</button>` +
|
|||
|
|
`<button class="dir-del" type="button" title="Cancel" data-dir-rename-cancel="1">×</button>` +
|
|||
|
|
`</span>`;
|
|||
|
|
const input = row.querySelector('.dir-rename-input');
|
|||
|
|
if (input) {
|
|||
|
|
input.focus();
|
|||
|
|
input.select();
|
|||
|
|
input.addEventListener('keydown', (ev) => {
|
|||
|
|
if (ev.key === 'Enter') { ev.preventDefault(); commitDirectoryRename(kind, name); }
|
|||
|
|
else if (ev.key === 'Escape') { ev.preventDefault(); renderDirectoryEditor(); }
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Rename a location/team everywhere (cascades on the server); kind is plural here.
|
|||
|
|
async function commitDirectoryRename(kind, from) {
|
|||
|
|
const input = directoryEditor.querySelector('.dir-rename-input');
|
|||
|
|
const to = ((input && input.value) || '').trim();
|
|||
|
|
if (!to || to.toLowerCase() === String(from).toLowerCase()) { renderDirectoryEditor(); return; }
|
|||
|
|
const singular = kind === 'teams' ? 'team' : 'location';
|
|||
|
|
try {
|
|||
|
|
await apiPost('/api/admin/directory/rename', { kind: singular, from, to });
|
|||
|
|
await refreshState({ showToastOnError: false }); // re-renders all dropdowns/tabs
|
|||
|
|
renderDirectoryEditor();
|
|||
|
|
await renderUserMgmtList(); // logins may have been relabeled
|
|||
|
|
renderExecList(); // exec scopes may have shifted
|
|||
|
|
showToast(`Renamed to "${to}"`, 'success');
|
|||
|
|
} catch (err) {
|
|||
|
|
userMgmtError.textContent = err.message;
|
|||
|
|
userMgmtError.style.display = 'block';
|
|||
|
|
renderDirectoryEditor();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Executives (owner-managed named editors) ────────────────
|
|||
|
|
async function renderExecList() {
|
|||
|
|
if (!execList) return;
|
|||
|
|
execList.innerHTML = '<div class="empty-state" style="padding:8px;">Loading…</div>';
|
|||
|
|
try { mgmtExecs = (await apiGet('/api/admin/executives')).executives || []; }
|
|||
|
|
catch (err) { execList.innerHTML = `<div class="empty-state" style="padding:8px;">Failed to load: ${escapeHtml(err.message)}</div>`; return; }
|
|||
|
|
drawExecList();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Sorted (alphabetical by name) + filtered render from the cached executives.
|
|||
|
|
function drawExecList() {
|
|||
|
|
if (!execList) return;
|
|||
|
|
if (!mgmtExecs.length) { execList.innerHTML = '<div class="empty-state" style="padding:8px;">No executives yet. Add one below.</div>'; return; }
|
|||
|
|
const q = ((execSearch && execSearch.value) || '').trim().toLowerCase();
|
|||
|
|
let execs = mgmtExecs.filter((e) => !q || (e.name || '').toLowerCase().includes(q));
|
|||
|
|
if (!execs.length) { execList.innerHTML = '<div class="empty-state" style="padding:8px;">No executives match that search.</div>'; return; }
|
|||
|
|
execs = execs.slice().sort((a, b) => (a.name || '').toLowerCase().localeCompare((b.name || '').toLowerCase()));
|
|||
|
|
const dir = checklistData.directory || { locations: [], teams: [] };
|
|||
|
|
const has = (arr, name) => (arr || []).some((s) => s.toLowerCase() === name.toLowerCase());
|
|||
|
|
const cb = (kind, name, on, stale) => `<label class="exec-cb${stale ? ' exec-cb-stale' : ''}"><input type="checkbox" data-exec-cb="${kind}" value="${escapeAttr(name)}" ${on ? 'checked' : ''}/> ${escapeHtml(name)}${stale ? ' (removed)' : ''}</label>`;
|
|||
|
|
// A scope entry whose name is no longer in the directory (the server keeps it
|
|||
|
|
// only when scrubbing would broaden access): label it, and give it a checkbox
|
|||
|
|
// so the grant can be explicitly unchecked — otherwise it'd be un-removable.
|
|||
|
|
const dirHas = (arr) => { const s = new Set((arr || []).map((x) => (x.name || '').toLowerCase())); return (name) => s.has((name || '').toLowerCase()); };
|
|||
|
|
const locInDir = dirHas(dir.locations), teamInDir = dirHas(dir.teams);
|
|||
|
|
execList.innerHTML = execs.map((e) => {
|
|||
|
|
const tag = (s, inDir, suffix) => `<span class="user-row-tag${inDir ? '' : ' user-row-tag-stale'}" ${inDir ? '' : 'title="No longer in the directory"'}>${escapeHtml(s)}${suffix}${inDir ? '' : ' · removed'}</span>`;
|
|||
|
|
const tags = (e.scopeLocations || []).map((s) => tag(s, locInDir(s), ''))
|
|||
|
|
.concat((e.scopeTeams || []).map((s) => tag(s, teamInDir(s), ' team')));
|
|||
|
|
const scopeHtml = tags.length ? tags.join(' ') : '<span class="user-row-tag empty">no access yet</span>';
|
|||
|
|
const staleLocs = (e.scopeLocations || []).filter((s) => !locInDir(s));
|
|||
|
|
const staleTeams = (e.scopeTeams || []).filter((s) => !teamInDir(s));
|
|||
|
|
const locCbs = (dir.locations || []).map((l) => cb('location', l.name, has(e.scopeLocations, l.name)))
|
|||
|
|
.concat(staleLocs.map((s) => cb('location', s, true, true))).join('');
|
|||
|
|
const teamCbs = (dir.teams || []).map((t) => cb('team', t.name, has(e.scopeTeams, t.name)))
|
|||
|
|
.concat(staleTeams.map((s) => cb('team', s, true, true))).join('');
|
|||
|
|
return `
|
|||
|
|
<div class="user-row" data-exec-id="${escapeAttr(e.id)}">
|
|||
|
|
<div class="user-row-main">
|
|||
|
|
<div class="user-row-name">${escapeHtml(e.name)} <span class="user-row-username">executive</span></div>
|
|||
|
|
<div class="user-row-meta">${scopeHtml}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="user-row-actions">
|
|||
|
|
<button class="btn btn-secondary btn-small" data-exec-action="rename" data-exec-id="${escapeAttr(e.id)}" data-exec-name="${escapeAttr(e.name)}">Edit name</button>
|
|||
|
|
<button class="btn btn-secondary btn-small" data-exec-action="access" data-exec-id="${escapeAttr(e.id)}">Edit access</button>
|
|||
|
|
<button class="btn btn-secondary btn-small" data-exec-action="pw" data-exec-id="${escapeAttr(e.id)}">Reset password</button>
|
|||
|
|
<button class="btn btn-danger btn-small" data-exec-action="del" data-exec-id="${escapeAttr(e.id)}">Delete</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="exec-access" id="exec-access-${escapeAttr(e.id)}" style="display:none;">
|
|||
|
|
<div class="exec-access-help">Edits lists matching the checked location(s) AND team(s). Unchecked column = all.</div>
|
|||
|
|
<div class="dir-head">Locations</div>
|
|||
|
|
<div class="exec-cb-row">${locCbs || '<span class="empty-state">none</span>'}</div>
|
|||
|
|
<div class="dir-head" style="margin-top:6px;">Teams</div>
|
|||
|
|
<div class="exec-cb-row">${teamCbs || '<span class="empty-state">none</span>'}</div>
|
|||
|
|
<div style="text-align:right;margin-top:6px;">
|
|||
|
|
<button class="btn btn-primary btn-small" data-exec-action="save-access" data-exec-id="${escapeAttr(e.id)}">Save access</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}).join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function createExec() {
|
|||
|
|
userMgmtError.style.display = 'none';
|
|||
|
|
const name = ((newExecName && newExecName.value) || '').trim();
|
|||
|
|
const password = (newExecPassword && newExecPassword.value) || '';
|
|||
|
|
if (!name || !password) { userMgmtError.textContent = 'Name and password are required.'; userMgmtError.style.display = 'block'; return; }
|
|||
|
|
try {
|
|||
|
|
await apiPost('/api/admin/executives', { name, password });
|
|||
|
|
newExecName.value = '';
|
|||
|
|
newExecPassword.value = '';
|
|||
|
|
showToast(`Executive "${name}" created`, 'success');
|
|||
|
|
await renderExecList();
|
|||
|
|
} catch (err) { userMgmtError.textContent = err.message; userMgmtError.style.display = 'block'; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleExecListClick(ev) {
|
|||
|
|
const btn = ev.target.closest('button[data-exec-action]');
|
|||
|
|
if (!btn) return;
|
|||
|
|
const id = btn.dataset.execId;
|
|||
|
|
const action = btn.dataset.execAction;
|
|||
|
|
userMgmtError.style.display = 'none';
|
|||
|
|
try {
|
|||
|
|
if (action === 'rename') {
|
|||
|
|
const current = btn.dataset.execName || '';
|
|||
|
|
const name = prompt('Edit executive name (add a last name to tell people apart):', current);
|
|||
|
|
if (name === null) return; // cancelled
|
|||
|
|
const trimmed = name.trim();
|
|||
|
|
if (!trimmed || trimmed === current) return; // no change
|
|||
|
|
await apiPut('/api/admin/executives/' + encodeURIComponent(id), { name: trimmed });
|
|||
|
|
showToast('Name updated', 'success');
|
|||
|
|
await renderExecList();
|
|||
|
|
} else if (action === 'access') {
|
|||
|
|
const panel = document.getElementById('exec-access-' + id);
|
|||
|
|
if (panel) panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
|
|||
|
|
} else if (action === 'save-access') {
|
|||
|
|
const panel = document.getElementById('exec-access-' + id);
|
|||
|
|
const scopeLocations = [...panel.querySelectorAll('input[data-exec-cb="location"]:checked')].map((i) => i.value);
|
|||
|
|
const scopeTeams = [...panel.querySelectorAll('input[data-exec-cb="team"]:checked')].map((i) => i.value);
|
|||
|
|
await apiPut('/api/admin/executives/' + encodeURIComponent(id), { scopeLocations, scopeTeams });
|
|||
|
|
showToast('Access updated', 'success');
|
|||
|
|
await renderExecList();
|
|||
|
|
} else if (action === 'pw') {
|
|||
|
|
const pw = prompt('New password for this executive (4+ characters):');
|
|||
|
|
if (!pw) return;
|
|||
|
|
await apiPut('/api/admin/executives/' + encodeURIComponent(id), { password: pw });
|
|||
|
|
showToast('Password updated', 'success');
|
|||
|
|
} else if (action === 'del') {
|
|||
|
|
if (!confirm('Delete this executive?')) return;
|
|||
|
|
await apiDelete('/api/admin/executives/' + encodeURIComponent(id));
|
|||
|
|
showToast('Executive deleted', 'success');
|
|||
|
|
await renderExecList();
|
|||
|
|
}
|
|||
|
|
} catch (err) { userMgmtError.textContent = err.message; userMgmtError.style.display = 'block'; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Turn "north-attleboro" / "woonsocket" into "North Attleboro" / "Woonsocket"
|
|||
|
|
function prettyFromUsername(username) {
|
|||
|
|
const clean = (username || '').trim().toLowerCase();
|
|||
|
|
if (!clean) return '';
|
|||
|
|
return clean
|
|||
|
|
.replace(/[-_.]+/g, ' ')
|
|||
|
|
.replace(/(^|\s)(\p{L})/gu, (_, sep, ch) => sep + ch.toUpperCase());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function renderUserMgmtList() {
|
|||
|
|
userMgmtList.innerHTML = '<div class="empty-state" style="padding:8px;">Loading...</div>';
|
|||
|
|
try {
|
|||
|
|
mgmtUsers = (await apiGet('/api/admin/users')).users || [];
|
|||
|
|
} catch (err) {
|
|||
|
|
userMgmtList.innerHTML = `<div class="empty-state" style="padding:8px;">Failed to load: ${escapeHtml(err.message)}</div>`;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
drawUserMgmtList();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Grouped by location (alphabetical), teams alphabetical within each group
|
|||
|
|
// (whole-building logins first), plus a live text filter — so a long list
|
|||
|
|
// stays scannable.
|
|||
|
|
function drawUserMgmtList() {
|
|||
|
|
if (!userMgmtList) return;
|
|||
|
|
if (!mgmtUsers.length) {
|
|||
|
|
userMgmtList.innerHTML = '<div class="empty-state" style="padding:8px;">No team logins yet. Create one below.</div>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const dir = checklistData.directory || { locations: [], teams: [] };
|
|||
|
|
const eq = (a, b) => String(a || '').trim().toLowerCase() === String(b || '').trim().toLowerCase();
|
|||
|
|
const locOpts = (sel) => '<option value="">Select location…</option>' +
|
|||
|
|
(dir.locations || []).map((l) => `<option value="${escapeAttr(l.name)}" ${eq(l.name, sel) ? 'selected' : ''}>${escapeHtml(l.name)}</option>`).join('');
|
|||
|
|
// Only offer the team-less option to preserve a legacy building-wide login
|
|||
|
|
// that already has no team; new/normal logins must pick a team.
|
|||
|
|
const teamOpts = (sel) => (String(sel || '').trim() ? '' : '<option value="">Whole building (no team)</option>') +
|
|||
|
|
(dir.teams || []).map((t) => `<option value="${escapeAttr(t.name)}" ${eq(t.name, sel) ? 'selected' : ''}>${escapeHtml(t.name)}</option>`).join('');
|
|||
|
|
|
|||
|
|
const q = ((userMgmtSearch && userMgmtSearch.value) || '').trim().toLowerCase();
|
|||
|
|
let users = mgmtUsers.filter((u) => {
|
|||
|
|
if (!q) return true;
|
|||
|
|
const hay = [u.location, u.team, u.username, (u.emailRecipients || []).join(' ')].join(' ').toLowerCase();
|
|||
|
|
return hay.includes(q);
|
|||
|
|
});
|
|||
|
|
if (!users.length) { userMgmtList.innerHTML = '<div class="empty-state" style="padding:8px;">No logins match that search.</div>'; return; }
|
|||
|
|
|
|||
|
|
const locName = (u) => (u.location || '').trim() || '(no location)';
|
|||
|
|
const teamKey = (u) => ((u.team || '').trim() ? u.team.toLowerCase() : ''); // blank (whole-building) sorts first
|
|||
|
|
users = users.slice().sort((a, b) =>
|
|||
|
|
locName(a).toLowerCase().localeCompare(locName(b).toLowerCase()) || teamKey(a).localeCompare(teamKey(b)));
|
|||
|
|
|
|||
|
|
const counts = {};
|
|||
|
|
users.forEach((u) => { const L = locName(u); counts[L] = (counts[L] || 0) + 1; });
|
|||
|
|
|
|||
|
|
let html = '';
|
|||
|
|
let curLoc = null;
|
|||
|
|
users.forEach((u) => {
|
|||
|
|
const L = locName(u);
|
|||
|
|
if (L !== curLoc) {
|
|||
|
|
curLoc = L;
|
|||
|
|
html += `<div class="mgmt-group-header">${escapeHtml(L)} <span class="mgmt-group-count">${counts[L]}</span></div>`;
|
|||
|
|
}
|
|||
|
|
const team = (u.team || '').trim() ? u.team : 'Whole building';
|
|||
|
|
const emails = (u.emailRecipients && u.emailRecipients.length) ? u.emailRecipients.join(', ') : '';
|
|||
|
|
const uname = escapeAttr(u.username);
|
|||
|
|
html += `
|
|||
|
|
<div class="user-row" data-username="${uname}">
|
|||
|
|
<div class="user-row-main">
|
|||
|
|
<div class="user-row-name">${escapeHtml(team)} <span class="user-row-username">@${escapeHtml(u.username)}</span></div>
|
|||
|
|
<div class="user-row-meta">
|
|||
|
|
${emails ? `<span class="user-row-tag email" title="${escapeAttr(emails)}">✉ ${escapeHtml(emails)}</span>` : '<span class="user-row-tag empty">no report email</span>'}
|
|||
|
|
${u.role === 'admin' ? '<span class="user-row-tag admin">Team admin</span>' : ''}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="user-row-actions">
|
|||
|
|
<button class="btn btn-secondary btn-small" data-action="edit" data-username="${uname}">Edit</button>
|
|||
|
|
<button class="btn btn-secondary btn-small" data-action="pw" data-username="${uname}">Reset password</button>
|
|||
|
|
<button class="btn btn-danger btn-small" data-action="del" data-username="${uname}">Delete</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="user-edit" id="user-edit-${uname}" style="display:none;">
|
|||
|
|
<div class="user-edit-grid">
|
|||
|
|
<label>Location<select data-edit="location">${locOpts(u.location)}</select></label>
|
|||
|
|
<label>Team<select data-edit="team">${teamOpts(u.team)}</select></label>
|
|||
|
|
<label>Report email(s)<input data-edit="emails" type="text" value="${escapeAttr(emails)}" placeholder="comma-separated — optional" /></label>
|
|||
|
|
</div>
|
|||
|
|
<div class="user-edit-actions">
|
|||
|
|
<button class="btn btn-secondary btn-small" data-action="edit-cancel" data-username="${uname}">Cancel</button>
|
|||
|
|
<button class="btn btn-primary btn-small" data-action="save-edit" data-username="${uname}">Save changes</button>
|
|||
|
|
</div>
|
|||
|
|
</div>`;
|
|||
|
|
});
|
|||
|
|
userMgmtList.innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
userMgmtList.addEventListener('click', async (e) => {
|
|||
|
|
const btn = e.target.closest('button[data-action]');
|
|||
|
|
if (!btn) return;
|
|||
|
|
const u = btn.dataset.username;
|
|||
|
|
const action = btn.dataset.action;
|
|||
|
|
// Toggle the inline editor without re-rendering the whole list.
|
|||
|
|
if (action === 'edit' || action === 'edit-cancel') {
|
|||
|
|
const panel = document.getElementById('user-edit-' + u);
|
|||
|
|
if (panel) panel.style.display = (action === 'edit' && panel.style.display === 'none') ? 'block' : 'none';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
if (action === 'del') {
|
|||
|
|
if (!confirm(`Delete user "${u}"?`)) return;
|
|||
|
|
await apiDelete(`/api/admin/users/${encodeURIComponent(u)}`);
|
|||
|
|
showToast('User deleted', 'success');
|
|||
|
|
await renderUserMgmtList();
|
|||
|
|
} else if (action === 'pw') {
|
|||
|
|
const pw = prompt(`New password for "${u}" (4+ characters):`);
|
|||
|
|
if (!pw) return;
|
|||
|
|
await apiPut(`/api/admin/users/${encodeURIComponent(u)}`, { password: pw });
|
|||
|
|
showToast('Password updated', 'success');
|
|||
|
|
} else if (action === 'save-edit') {
|
|||
|
|
const panel = document.getElementById('user-edit-' + u);
|
|||
|
|
if (!panel) return;
|
|||
|
|
const location = panel.querySelector('select[data-edit="location"]').value.trim();
|
|||
|
|
const team = panel.querySelector('select[data-edit="team"]').value.trim();
|
|||
|
|
const emailRecipients = panel.querySelector('input[data-edit="emails"]').value.trim();
|
|||
|
|
if (!location) { userMgmtError.textContent = 'Pick a location for this login.'; userMgmtError.style.display = 'block'; return; }
|
|||
|
|
await apiPut(`/api/admin/users/${encodeURIComponent(u)}`, { location, team, emailRecipients });
|
|||
|
|
showToast('Login updated', 'success');
|
|||
|
|
await renderUserMgmtList();
|
|||
|
|
await refreshState({ showToastOnError: false }); // pick up any new location/team + relabel
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
userMgmtError.textContent = err.message;
|
|||
|
|
userMgmtError.style.display = 'block';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
async function createUser() {
|
|||
|
|
userMgmtError.style.display = 'none';
|
|||
|
|
const location = newUserLocation.value.trim();
|
|||
|
|
const team = newUserTeam.value.trim();
|
|||
|
|
const password = newUserPassword.value;
|
|||
|
|
const emailRecipients = newUserEmails.value.trim();
|
|||
|
|
if (!location || !team || !password) {
|
|||
|
|
userMgmtError.textContent = 'Location, team, and password are required.';
|
|||
|
|
userMgmtError.style.display = 'block';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
await apiPost('/api/admin/users', { location, team, password, role: 'user', emailRecipients });
|
|||
|
|
newUserLocation.value = '';
|
|||
|
|
newUserTeam.value = '';
|
|||
|
|
newUserPassword.value = '';
|
|||
|
|
newUserEmails.value = '';
|
|||
|
|
const label = team ? `${location} · ${team}` : location;
|
|||
|
|
showToast(`Login "${label}" created`, 'success');
|
|||
|
|
await renderUserMgmtList();
|
|||
|
|
await refreshState({ showToastOnError: false }); // pick up newly-registered location/team
|
|||
|
|
} catch (err) {
|
|||
|
|
userMgmtError.textContent = err.message;
|
|||
|
|
userMgmtError.style.display = 'block';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Rendering ───────────────────────────────────────────────
|
|||
|
|
// Preset section for the next Add Task open (set by a column header's ＋ button).
|
|||
|
|
let addGroupPreset = null;
|
|||
|
|
// Fill the Add Task "Section" select from the target list's task sections;
|
|||
|
|
// hidden entirely for notes and for lists with only the default section.
|
|||
|
|
function populateItemGroupSelect(listId, preset) {
|
|||
|
|
const row = document.getElementById('itemGroupRow');
|
|||
|
|
const sel = document.getElementById('itemGroupSelect');
|
|||
|
|
if (!row || !sel) return;
|
|||
|
|
const list = (checklistData.lists || []).find((l) => l.id === listId);
|
|||
|
|
const groups = list ? taskGroupsOf(list) : [{ id: 'todo', name: 'To Do' }];
|
|||
|
|
if (addKind === 'note' || groups.length < 2) { row.style.display = 'none'; sel.innerHTML = ''; return; }
|
|||
|
|
sel.innerHTML = groups.map((g) => `<option value="${escapeAttr(g.id)}">${escapeHtml(g.name)}</option>`).join('');
|
|||
|
|
sel.value = (preset && groups.some((g) => g.id === preset)) ? preset : 'todo';
|
|||
|
|
row.style.display = '';
|
|||
|
|
}
|
|||
|
|
function openAddTask() {
|
|||
|
|
renderListSelect(); // populate "Add to list" (scope-limited for execs/team admins)
|
|||
|
|
if (!addTargetListId) { showToast('No list you can add to yet', 'error'); return; }
|
|||
|
|
setAddMode('task');
|
|||
|
|
populateItemGroupSelect(addTargetListId, addGroupPreset);
|
|||
|
|
addGroupPreset = null; // one-shot
|
|||
|
|
resetMarkdownEditor('itemDescription');
|
|||
|
|
addTaskModal.style.display = 'flex';
|
|||
|
|
requestAnimationFrame(() => { itemTitleInput.focus({ preventScroll: true }); });
|
|||
|
|
}
|
|||
|
|
function closeAddTask() {
|
|||
|
|
closeOverlay(addTaskModal);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function normalizeName(name) {
|
|||
|
|
return (name || '').trim().toLowerCase();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Auto-initials fallback when a location has no abbreviation set yet
|
|||
|
|
// (mirrors the server's defaultAbbrev): "North Attleboro" -> "NA", "Greenville" -> "GR".
|
|||
|
|
function locAbbrevDefault(name) {
|
|||
|
|
const words = String(name || '').trim().split(/\s+/).filter(Boolean);
|
|||
|
|
if (words.length >= 2) return words.map((w) => w[0]).join('').toUpperCase().slice(0, 4);
|
|||
|
|
return String(name || '').trim().slice(0, 2).toUpperCase();
|
|||
|
|
}
|
|||
|
|
// Short label for a location, used in all the list scope tags. Prefers the
|
|||
|
|
// master-set abbreviation from the directory; falls back to auto-initials.
|
|||
|
|
function abbrevForLocation(name) {
|
|||
|
|
const n = (name || '').trim();
|
|||
|
|
if (!n) return '';
|
|||
|
|
const dir = (checklistData.directory && checklistData.directory.locations) || [];
|
|||
|
|
const hit = dir.find((e) => (e.name || '').toLowerCase() === n.toLowerCase());
|
|||
|
|
return (hit && hit.abbrev) ? String(hit.abbrev).toUpperCase() : locAbbrevDefault(n);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Human-readable description of a list's repeat (auto-reset) schedule.
|
|||
|
|
// "HH:MM" (24h) → "9:00 AM" for human-readable schedule text.
|
|||
|
|
function formatClock12(t) {
|
|||
|
|
const m = /^(\d{1,2}):(\d{2})$/.exec(String(t || ''));
|
|||
|
|
if (!m) return t;
|
|||
|
|
let h = parseInt(m[1], 10);
|
|||
|
|
const ap = h < 12 ? 'AM' : 'PM';
|
|||
|
|
h = h % 12; if (h === 0) h = 12;
|
|||
|
|
return `${h}:${m[2]} ${ap}`;
|
|||
|
|
}
|
|||
|
|
function resetScheduleText(s) {
|
|||
|
|
if (!s || !s.type) return '';
|
|||
|
|
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
|||
|
|
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
|||
|
|
const n = (s.interval && s.interval > 1) ? s.interval : 1;
|
|||
|
|
const every = (unit) => n > 1 ? `every ${n} ${unit}s` : `every ${unit}`;
|
|||
|
|
let text;
|
|||
|
|
switch (s.type) {
|
|||
|
|
case 'daily': text = `Repeats ${every('day')}` + (n > 1 && s.startDow != null ? ` (from ${days[s.startDow]})` : ''); break;
|
|||
|
|
case 'weekly': text = `Repeats ${every('week')} on ${days[s.dayOfWeek] || '?'}`; break;
|
|||
|
|
case 'monthly': text = `Repeats ${every('month')} on day ${s.dayOfMonth}`; break;
|
|||
|
|
case 'yearly': text = `Repeats ${every('year')} on ${months[s.month] || '?'} ${s.dayOfMonth}`; break;
|
|||
|
|
default: return '';
|
|||
|
|
}
|
|||
|
|
// Intraday times (daily/weekly): "… at 9:00 AM, 12:00 PM & 5:00 PM".
|
|||
|
|
if (Array.isArray(s.times) && s.times.length) {
|
|||
|
|
const labels = s.times.map(formatClock12);
|
|||
|
|
const joined = labels.length > 1
|
|||
|
|
? labels.slice(0, -1).join(', ') + ' & ' + labels[labels.length - 1]
|
|||
|
|
: labels[0];
|
|||
|
|
text += ` at ${joined}`;
|
|||
|
|
}
|
|||
|
|
return text;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function canonicalName(name) {
|
|||
|
|
const cleaned = (name || '').trim().replace(/\s+/g, ' ').slice(0, 80);
|
|||
|
|
if (!cleaned) return '';
|
|||
|
|
return cleaned
|
|||
|
|
.toLowerCase()
|
|||
|
|
.replace(/(^|[\s\-'])(\p{L})/gu, (_, sep, ch) => sep + ch.toUpperCase());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Mirror the server's scopeKey() so the checkboxes we render line up with the
|
|||
|
|
// keys the server stores checks under. Teamless users collapse to location only.
|
|||
|
|
function myScopeKey() {
|
|||
|
|
if (!currentUser) return '';
|
|||
|
|
const loc = (currentUser.location || '').trim();
|
|||
|
|
const team = (currentUser.team || '').trim();
|
|||
|
|
if (loc && team) return canonicalName(loc) + '::' + canonicalName(team);
|
|||
|
|
if (loc) return canonicalName(loc);
|
|||
|
|
return canonicalName(currentUser.displayName || currentUser.username);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// The (location, team) scope key a list's checks live under — mirrors the
|
|||
|
|
// server's scopeKey(list.location, list.team). '' for a global list.
|
|||
|
|
function scopeKeyForList(list) {
|
|||
|
|
if (!list) return '';
|
|||
|
|
const loc = (list.location || '').trim();
|
|||
|
|
const team = (list.team || '').trim();
|
|||
|
|
if (loc && team) return canonicalName(loc) + '::' + canonicalName(team);
|
|||
|
|
if (loc) return canonicalName(loc);
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Which scope's checks to READ for a list. The master AND executives oversee teams they
|
|||
|
|
// don't belong to, so they observe each team's live record (the list's own scope) — the same
|
|||
|
|
// shared record checkers write to. Members/team-admins use their own scope, which already IS
|
|||
|
|
// their lists' scope. (Write path mirrors this: applyCheckLocally + server /api/check.)
|
|||
|
|
function readScopeKey(listId) {
|
|||
|
|
if (isMasterAdmin() || (currentUser && currentUser.role === 'executive')) {
|
|||
|
|
const list = (checklistData.lists || []).find((l) => l.id === listId);
|
|||
|
|
return scopeKeyForList(list) || myScopeKey();
|
|||
|
|
}
|
|||
|
|
return myScopeKey();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getMyCheck(listId, itemId) {
|
|||
|
|
const me = readScopeKey(listId);
|
|||
|
|
if (!me) return null;
|
|||
|
|
const c = checklistData.checks && checklistData.checks[me] && checklistData.checks[me][listId];
|
|||
|
|
return (c && c[itemId]) || null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function visibleLists() {
|
|||
|
|
const lists = checklistData.lists || [];
|
|||
|
|
if (isMasterAdmin()) return applyAdminFilter(lists);
|
|||
|
|
if (currentUser && currentUser.role === 'executive') return lists.filter(execCanEditClient);
|
|||
|
|
if (!currentUser) return [];
|
|||
|
|
const myLoc = normalizeName(currentUser.location || '');
|
|||
|
|
const myTeam = normalizeName(currentUser.team || '');
|
|||
|
|
// Members never see hidden lists; editors (master/exec) still see them (dimmed) to manage.
|
|||
|
|
return lists.filter((l) => listVisibleTo(l, myLoc, myTeam) && !l.hidden);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// global (no location, no team) | building-wide (location, no team) | team (location + team)
|
|||
|
|
function listVisibleTo(l, myLoc, myTeam) {
|
|||
|
|
const loc = normalizeName(l.location || '');
|
|||
|
|
const team = normalizeName(l.team || '');
|
|||
|
|
if (!loc && !team) return true; // global — everyone
|
|||
|
|
if (loc && loc !== myLoc) return false; // a different building
|
|||
|
|
if (!team) return true; // building-wide — all teams here
|
|||
|
|
return team === myTeam; // team-specific
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Master-admin filter: narrow the visible lists by Location and/or Team.
|
|||
|
|
function applyAdminFilter(lists) {
|
|||
|
|
if (!adminFilterLoc && !adminFilterTeam) return lists;
|
|||
|
|
return lists.filter((l) => {
|
|||
|
|
const okLoc = !adminFilterLoc || normalizeName(l.location || '') === normalizeName(adminFilterLoc);
|
|||
|
|
const okTeam = !adminFilterTeam || normalizeName(l.team || '') === normalizeName(adminFilterTeam);
|
|||
|
|
return okLoc && okTeam;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
function renderAdminFilters() {
|
|||
|
|
const dir = checklistData.directory || { locations: [], teams: [] };
|
|||
|
|
if (adminFilterLocation) {
|
|||
|
|
adminFilterLocation.innerHTML = '<option value="">All locations</option>'
|
|||
|
|
+ (dir.locations || []).map((l) => `<option value="${escapeAttr(l.name)}">${escapeHtml(l.name)}</option>`).join('');
|
|||
|
|
adminFilterLocation.value = adminFilterLoc;
|
|||
|
|
if (adminFilterLocation.value !== adminFilterLoc) { adminFilterLoc = ''; adminFilterLocation.value = ''; } // selection no longer exists
|
|||
|
|
}
|
|||
|
|
if (adminFilterTeamSel) {
|
|||
|
|
adminFilterTeamSel.innerHTML = '<option value="">All teams</option>'
|
|||
|
|
+ (dir.teams || []).map((t) => `<option value="${escapeAttr(t.name)}">${escapeHtml(t.name)}</option>`).join('');
|
|||
|
|
adminFilterTeamSel.value = adminFilterTeam;
|
|||
|
|
if (adminFilterTeamSel.value !== adminFilterTeam) { adminFilterTeam = ''; adminFilterTeamSel.value = ''; }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Fill all location/team dropdowns (login form, list modal, add-login form) from the directory.
|
|||
|
|
function renderDirectory(dir) {
|
|||
|
|
const locs = (dir && dir.locations) || [];
|
|||
|
|
const teams = (dir && dir.teams) || [];
|
|||
|
|
// Add-team-login dropdowns (master): location required, team optional (whole-building login).
|
|||
|
|
if (newUserLocation && newUserLocation.tagName === 'SELECT') {
|
|||
|
|
const prev = newUserLocation.value;
|
|||
|
|
newUserLocation.innerHTML =
|
|||
|
|
'<option value="">Select location…</option>' +
|
|||
|
|
locs.map((l) => `<option value="${escapeAttr(l.name)}">${escapeHtml(l.name)}</option>`).join('');
|
|||
|
|
newUserLocation.value = prev || '';
|
|||
|
|
}
|
|||
|
|
if (newUserTeam && newUserTeam.tagName === 'SELECT') {
|
|||
|
|
const prev = newUserTeam.value;
|
|||
|
|
newUserTeam.innerHTML =
|
|||
|
|
'<option value="">Select team…</option>' +
|
|||
|
|
teams.map((t) => `<option value="${escapeAttr(t.name)}">${escapeHtml(t.name)}</option>`).join('');
|
|||
|
|
newUserTeam.value = prev || '';
|
|||
|
|
}
|
|||
|
|
// Login location dropdown: placeholder, every location, then Executive (master).
|
|||
|
|
if (loginLocation && loginLocation.tagName === 'SELECT') {
|
|||
|
|
const prev = loginLocation.value;
|
|||
|
|
loginLocation.innerHTML =
|
|||
|
|
'<option value="">Select location…</option>' +
|
|||
|
|
locs.map((l) => `<option value="${escapeAttr(l.name)}">${escapeHtml(l.name)}</option>`).join('') +
|
|||
|
|
'<option value="executive">Executive</option>';
|
|||
|
|
loginLocation.value = prev || '';
|
|||
|
|
}
|
|||
|
|
// Login team dropdown: a "Select team" prompt, then each team.
|
|||
|
|
if (loginTeam && loginTeam.tagName === 'SELECT') {
|
|||
|
|
const prev = loginTeam.value;
|
|||
|
|
loginTeam.innerHTML =
|
|||
|
|
'<option value="">Select team</option>' +
|
|||
|
|
teams.map((t) => `<option value="${escapeAttr(t.name)}">${escapeHtml(t.name)}</option>`).join('');
|
|||
|
|
loginTeam.value = prev || '';
|
|||
|
|
}
|
|||
|
|
populateScopeSelects({ locations: locs, teams: teams });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Fill the Edit List location/team dropdowns (master) from the directory.
|
|||
|
|
function populateScopeSelects(dir) {
|
|||
|
|
dir = dir || checklistData.directory || { locations: [], teams: [] };
|
|||
|
|
let locOpts = (dir.locations || []).slice();
|
|||
|
|
let teamOpts = (dir.teams || []).slice();
|
|||
|
|
// The master may place a list anywhere ("Everyone" / "Whole building"
|
|||
|
|
// allowed). An executive is limited to the locations/teams they're scoped
|
|||
|
|
// to; if a scope side is empty (= "any"), that side stays unrestricted.
|
|||
|
|
let allowAllLoc = true;
|
|||
|
|
let allowNoTeam = true;
|
|||
|
|
if (currentUser && currentUser.role === 'executive') {
|
|||
|
|
const sLoc = (currentUser.scopeLocations || []).map((s) => s.toLowerCase());
|
|||
|
|
const sTeam = (currentUser.scopeTeams || []).map((s) => s.toLowerCase());
|
|||
|
|
if (sLoc.length) { locOpts = locOpts.filter((l) => sLoc.includes((l.name || '').toLowerCase())); allowAllLoc = false; }
|
|||
|
|
if (sTeam.length) { teamOpts = teamOpts.filter((t) => sTeam.includes((t.name || '').toLowerCase())); allowNoTeam = false; }
|
|||
|
|
}
|
|||
|
|
// New lists must pick a real location AND team — no "Everyone"/"Whole building".
|
|||
|
|
// Those options only appear when EDITING a list that already has that empty
|
|||
|
|
// value, so an existing un-scoped list is never silently reassigned.
|
|||
|
|
const editing = (modalMode === 'rename' && modalTargetId)
|
|||
|
|
? (checklistData.lists || []).find((l) => l.id === modalTargetId) : null;
|
|||
|
|
const keepEmptyLoc = !!(editing && !String(editing.location || '').trim());
|
|||
|
|
const keepEmptyTeam = !!(editing && !String(editing.team || '').trim());
|
|||
|
|
if (listModalLocation && listModalLocation.tagName === 'SELECT') {
|
|||
|
|
const prev = listModalLocation.value;
|
|||
|
|
listModalLocation.innerHTML = (allowAllLoc && keepEmptyLoc ? '<option value="">Everyone (all locations)</option>' : '') +
|
|||
|
|
locOpts.map((l) => `<option value="${escapeAttr(l.name)}">${escapeHtml(l.name)}</option>`).join('');
|
|||
|
|
listModalLocation.value = prev || '';
|
|||
|
|
}
|
|||
|
|
if (listModalTeam && listModalTeam.tagName === 'SELECT') {
|
|||
|
|
const prev = listModalTeam.value;
|
|||
|
|
listModalTeam.innerHTML = (allowNoTeam && keepEmptyTeam ? '<option value="">Whole building (no team)</option>' : '') +
|
|||
|
|
teamOpts.map((t) => `<option value="${escapeAttr(t.name)}">${escapeHtml(t.name)}</option>`).join('');
|
|||
|
|
listModalTeam.value = prev || '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
async function loadDirectory() {
|
|||
|
|
try { renderDirectory(await fetch('/api/directory').then((r) => r.json())); } catch (_) {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getCurrentList() {
|
|||
|
|
const lists = visibleLists();
|
|||
|
|
// Prefer the user's own client-side choice (survives polls).
|
|||
|
|
let list = activeListId ? lists.find((l) => l.id === activeListId) : null;
|
|||
|
|
if (!list) {
|
|||
|
|
// Fall back to server's selectedListId, then first visible list.
|
|||
|
|
list = lists.find((l) => l.id === checklistData.selectedListId) || lists[0];
|
|||
|
|
if (list) {
|
|||
|
|
activeListId = list.id;
|
|||
|
|
localStorage.setItem('checklist:activeListId', list.id);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return list;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setSelectedList(id) {
|
|||
|
|
activeListId = id;
|
|||
|
|
localStorage.setItem('checklist:activeListId', id);
|
|||
|
|
if (!addTargetListId) addTargetListId = id;
|
|||
|
|
renderLists();
|
|||
|
|
}
|
|||
|
|
window.changeList = setSelectedList;
|
|||
|
|
|
|||
|
|
// Defensive client-side column-order normalizer (mirror of the server's sanitizeColumnOrder): keep
|
|||
|
|
// valid keys in order, dedupe, append any missing — so a garbage/undefined order from a replace-path
|
|||
|
|
// never breaks the DOM reorder.
|
|||
|
|
const COLUMN_KEYS_CLIENT = ['todo', 'done', 'notes', 'feedback'];
|
|||
|
|
function columnOrderOf(list) {
|
|||
|
|
const seen = new Set(); const out = [];
|
|||
|
|
(Array.isArray(list.columnOrder) ? list.columnOrder : []).forEach((k) => {
|
|||
|
|
if (COLUMN_KEYS_CLIENT.includes(k) && !seen.has(k)) { seen.add(k); out.push(k); }
|
|||
|
|
});
|
|||
|
|
COLUMN_KEYS_CLIENT.forEach((k) => { if (!seen.has(k)) out.push(k); });
|
|||
|
|
return out;
|
|||
|
|
}
|
|||
|
|
// Show/hide the Notes column, order the three columns per the shared columnOrder, and toggle
|
|||
|
|
// .has-notes (drives the ≤960px stacking). Idempotent — only touches the DOM when the order
|
|||
|
|
// differs — so a normal check-off render doesn't shuffle nodes between Flip.capture and Flip.play.
|
|||
|
|
// Returns whether Notes is visible, so the caller includes notesList in the FLIP arrays only then.
|
|||
|
|
// ── Custom task sections (To Do + owner-added columns like Monday/Tuesday) ──
|
|||
|
|
// Mirrors the server's sanitizeTaskGroups: the default section (stable id
|
|||
|
|
// 'todo', renamable) always exists and always leads; legacy lists = just it.
|
|||
|
|
function taskGroupsOf(list) {
|
|||
|
|
const raw = Array.isArray(list && list.taskGroups) ? list.taskGroups.filter((g) => g && g.id && g.name) : [];
|
|||
|
|
const out = raw.map((g) => ({ id: String(g.id), name: String(g.name) }));
|
|||
|
|
const di = out.findIndex((g) => g.id === 'todo');
|
|||
|
|
if (di < 0) out.unshift({ id: 'todo', name: 'To Do' });
|
|||
|
|
else if (di > 0) out.unshift(out.splice(di, 1)[0]);
|
|||
|
|
return out;
|
|||
|
|
}
|
|||
|
|
// Which section a task renders in — unknown/deleted section ids fall back to
|
|||
|
|
// the default so a task can never be stranded invisible.
|
|||
|
|
function itemGroupId(item, groups) {
|
|||
|
|
return (item && item.group && groups.some((g) => g.id === item.group)) ? item.group : 'todo';
|
|||
|
|
}
|
|||
|
|
// Materialize the EXTRA sections as real columns inserted right after the
|
|||
|
|
// built-in To Do column (which displays the default section under its custom
|
|||
|
|
// name). Idempotent and NODE-PRESERVING: existing group columns are reused so
|
|||
|
|
// FLIP container identity and fold animations survive re-renders; columns are
|
|||
|
|
// only added/removed when the section set actually changes. Runs for every
|
|||
|
|
// role — checkers see the sections; the ＋ add-task shortcut is owner-only.
|
|||
|
|
function syncTaskGroupColumns(list, groups) {
|
|||
|
|
const section = todoList.closest('.checklists-section');
|
|||
|
|
const todoCol = todoList.closest('.checklist-column');
|
|||
|
|
if (!section || !todoCol) return;
|
|||
|
|
const t = todoCol.querySelector('.col-title');
|
|||
|
|
if (t) t.textContent = groups[0].name;
|
|||
|
|
const wanted = groups.slice(1);
|
|||
|
|
const wantedIds = new Set(wanted.map((g) => 'grp-' + g.id));
|
|||
|
|
section.querySelectorAll('.checklist-column[data-col^="grp-"]').forEach((c) => {
|
|||
|
|
if (!wantedIds.has(c.getAttribute('data-col'))) c.remove(); // section deleted (or another list's)
|
|||
|
|
});
|
|||
|
|
let prev = todoCol;
|
|||
|
|
wanted.forEach((g) => {
|
|||
|
|
const key = 'grp-' + g.id;
|
|||
|
|
let col = section.querySelector('.checklist-column[data-col="' + cssEscape(key) + '"]');
|
|||
|
|
if (!col) {
|
|||
|
|
col = document.createElement('div');
|
|||
|
|
col.className = 'checklist-column';
|
|||
|
|
col.setAttribute('data-col', key);
|
|||
|
|
col.innerHTML = '<h2><span class="col-title"></span></h2><div class="checklist-list" data-group-list="' + escapeAttr(g.id) + '"></div>';
|
|||
|
|
}
|
|||
|
|
col.querySelector('.col-title').textContent = g.name;
|
|||
|
|
col.classList.toggle('col-hidden', todoCol.classList.contains('col-hidden')); // mirror tasksVisible
|
|||
|
|
if (prev.nextElementSibling !== col) prev.insertAdjacentElement('afterend', col);
|
|||
|
|
prev = col;
|
|||
|
|
});
|
|||
|
|
// Owner-only "＋ task" shortcut on every task column once sections exist,
|
|||
|
|
// so adding straight into "Tuesday" is one tap.
|
|||
|
|
const cols = [todoCol].concat([...section.querySelectorAll('.checklist-column[data-col^="grp-"]')]);
|
|||
|
|
const showAdd = groups.length > 1 && ownsListClient(list) && !list.notesOnly;
|
|||
|
|
cols.forEach((col, i) => {
|
|||
|
|
const h2 = col.querySelector('h2');
|
|||
|
|
let btn = h2 && h2.querySelector('.col-add-task');
|
|||
|
|
if (!showAdd) { if (btn) btn.remove(); return; }
|
|||
|
|
if (!btn) {
|
|||
|
|
btn = document.createElement('button');
|
|||
|
|
btn.type = 'button';
|
|||
|
|
btn.className = 'col-move col-add-task';
|
|||
|
|
btn.innerHTML = '<svg viewBox="0 0 20 20" width="15" height="15" aria-hidden="true"><path d="M10 4v12M4 10h12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>';
|
|||
|
|
const fold = h2.querySelector('.col-fold');
|
|||
|
|
if (fold) h2.insertBefore(btn, fold); else h2.appendChild(btn);
|
|||
|
|
}
|
|||
|
|
const gid = i === 0 ? 'todo' : col.getAttribute('data-col').slice(4);
|
|||
|
|
const gname = (col.querySelector('.col-title') || {}).textContent || 'this section';
|
|||
|
|
btn.setAttribute('data-add-task-group', gid);
|
|||
|
|
btn.setAttribute('title', 'Add a task to ' + gname);
|
|||
|
|
btn.setAttribute('aria-label', 'Add a task to ' + gname);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function applyColumnLayout(list, canEdit, noteCount, taskCount, feedbackCount) {
|
|||
|
|
const section = todoList.closest('.checklists-section');
|
|||
|
|
const notesCol = notesList.closest('.checklist-column');
|
|||
|
|
const feedbackCol = feedbackList && feedbackList.closest('.checklist-column');
|
|||
|
|
// Editors ALWAYS see the Notes column when notes exist (even if showNotes is off) so a note can
|
|||
|
|
// never be stranded/invisible after disabling Notes or moving a note into a non-Notes list.
|
|||
|
|
const notesVisible = canEdit ? (!!list.showNotes || noteCount > 0) : (!!list.showNotes && noteCount > 0);
|
|||
|
|
// Feedback column: checkers see it whenever it's enabled (even empty — they need the add box);
|
|||
|
|
// editors also see it while entries exist so turning it off can never strand unread input.
|
|||
|
|
const feedbackVisible = canEdit ? (!!list.showFeedback || feedbackCount > 0) : !!list.showFeedback;
|
|||
|
|
// Notes-only list: hide To Do/Done — but NEVER while real tasks exist (for anyone). A checkable
|
|||
|
|
// task must never be invisible, so tasks re-reveal the columns until they're moved/deleted.
|
|||
|
|
const tasksVisible = !list.notesOnly || taskCount > 0;
|
|||
|
|
if (notesCol) notesCol.classList.toggle('col-hidden', !notesVisible);
|
|||
|
|
if (feedbackCol) feedbackCol.classList.toggle('col-hidden', !feedbackVisible);
|
|||
|
|
if (section) {
|
|||
|
|
section.querySelectorAll('.checklist-column[data-col="todo"], .checklist-column[data-col="done"]')
|
|||
|
|
.forEach((c) => c.classList.toggle('col-hidden', !tasksVisible));
|
|||
|
|
// has-notes drives the 3-column stacking breakpoint — any third column
|
|||
|
|
// counts, including extra task sections (Monday/Tuesday/…).
|
|||
|
|
section.classList.toggle('has-notes', notesVisible || feedbackVisible || taskGroupsOf(list).length > 1);
|
|||
|
|
}
|
|||
|
|
// A notes-only list adds notes, not tasks — hide "+ Add Task" for it (the list-settings
|
|||
|
|
// checkbox converts it back; a task added any other way re-reveals the columns above).
|
|||
|
|
{ const atb = document.getElementById('addTaskBtn'); if (atb) atb.style.display = list.notesOnly ? 'none' : ''; }
|
|||
|
|
if (section) {
|
|||
|
|
const order = columnOrderOf(list);
|
|||
|
|
const cols = {};
|
|||
|
|
section.querySelectorAll('.checklist-column').forEach((c) => { cols[c.getAttribute('data-col')] = c; });
|
|||
|
|
const desired = order.filter((k) => cols[k]);
|
|||
|
|
const current = [...section.querySelectorAll('.checklist-column')].map((c) => c.getAttribute('data-col'));
|
|||
|
|
if (current.join(',') !== desired.join(',')) desired.forEach((k) => section.appendChild(cols[k]));
|
|||
|
|
const visibleKeys = order.filter((k) => (k === 'notes' ? notesVisible : tasksVisible));
|
|||
|
|
renderColHeaderControls(section, order, visibleKeys, list, canEdit);
|
|||
|
|
}
|
|||
|
|
return notesVisible;
|
|||
|
|
}
|
|||
|
|
const COL_LABEL = { todo: 'To Do', done: 'Done', notes: 'Notes', feedback: 'Feedback' };
|
|||
|
|
// Inject editor-only reorder chevrons (and, on Notes, a "+ note" button) into each column header.
|
|||
|
|
// Chevrons move a column one step among the VISIBLE columns; disabled at the ends. Glyphs rotate to
|
|||
|
|
// ↑/↓ when the columns are stacked (CSS), and the aria-label matches the current orientation.
|
|||
|
|
function renderColHeaderControls(section, order, visibleKeys, list, canEdit) {
|
|||
|
|
// Reorder chevrons only earn their header clutter when a third column (Notes or Feedback) is
|
|||
|
|
// up AND there are at least two visible columns to arrange (a notes-only board has nothing to
|
|||
|
|
// reorder — but it still needs the "+ add note" button, so only the chevrons are dropped below).
|
|||
|
|
const notesVisible = visibleKeys.indexOf('notes') >= 0;
|
|||
|
|
const extraVisible = notesVisible || visibleKeys.indexOf('feedback') >= 0;
|
|||
|
|
if (!canEdit || !extraVisible) { section.querySelectorAll('.col-reorder').forEach((b) => b.remove()); return; }
|
|||
|
|
const showChevrons = visibleKeys.length >= 2;
|
|||
|
|
const visible = visibleKeys;
|
|||
|
|
const stacked = window.matchMedia('(max-width: 960px)').matches;
|
|||
|
|
const chev = (pts) => `<svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><polyline points="${pts}" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
|
|||
|
|
section.querySelectorAll('.checklist-column').forEach((col) => {
|
|||
|
|
const key = col.getAttribute('data-col');
|
|||
|
|
const h2 = col.querySelector('h2');
|
|||
|
|
if (!h2) return;
|
|||
|
|
let box = h2.querySelector('.col-reorder');
|
|||
|
|
// Extra task sections are glued after To Do — they never get reorder chevrons.
|
|||
|
|
if (key && key.indexOf('grp-') === 0) { if (box) box.remove(); return; }
|
|||
|
|
if (!canEdit) { if (box) box.remove(); return; }
|
|||
|
|
if (!box) { box = document.createElement('span'); box.className = 'col-reorder'; h2.appendChild(box); }
|
|||
|
|
const pos = visible.indexOf(key);
|
|||
|
|
const atStart = pos <= 0, atEnd = pos < 0 || pos >= visible.length - 1;
|
|||
|
|
const name = COL_LABEL[key] || key;
|
|||
|
|
const addNote = key === 'notes'
|
|||
|
|
? `<button type="button" class="col-move col-add-note" data-add-note-list="${escapeAttr(list.id)}" title="Add a note" aria-label="Add a note to this list"><svg viewBox="0 0 20 20" width="15" height="15" aria-hidden="true"><path d="M10 4v12M4 10h12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>`
|
|||
|
|
: '';
|
|||
|
|
// Mass-delete lives with the other owner-only header controls, so checkers
|
|||
|
|
// never see it. Only rendered while there's something to clear.
|
|||
|
|
const clearFb = key === 'feedback' && Array.isArray(list.feedback) && list.feedback.length
|
|||
|
|
? `<button type="button" class="col-move col-clear-feedback" data-clear-feedback-list="${escapeAttr(list.id)}" title="Clear all feedback" aria-label="Delete all feedback on this list"><svg viewBox="0 0 20 20" width="15" height="15" aria-hidden="true"><path d="M4 6h12M8.5 6V4.5h3V6M6.5 6l.8 9.5h5.4l.8-9.5M8.7 8.8v4.4M11.3 8.8v4.4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`
|
|||
|
|
: '';
|
|||
|
|
box.innerHTML = addNote + clearFb + (showChevrons
|
|||
|
|
? `<button type="button" class="col-move" data-col-move="${escapeAttr(key)}" data-dir="-1" ${atStart ? 'disabled' : ''} aria-label="Move ${escapeAttr(name)} ${stacked ? 'up' : 'left'}">${chev('12 5 7 10 12 15')}</button>`
|
|||
|
|
+ `<button type="button" class="col-move" data-col-move="${escapeAttr(key)}" data-dir="1" ${atEnd ? 'disabled' : ''} aria-label="Move ${escapeAttr(name)} ${stacked ? 'down' : 'right'}">${chev('8 5 13 10 8 15')}</button>`
|
|||
|
|
: '');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// Stamp each column's fold state + header controls on EVERY render (renderLists calls this
|
|||
|
|
// before Flip.capture so measurements are final). Unlike the reorder chevrons this is for
|
|||
|
|
// every user type — fold state is per-user/per-device, so anyone may fold their own view.
|
|||
|
|
// The header also gains a count pill, shown (via CSS) only while folded, so a folded list
|
|||
|
|
// still says how much it's hiding.
|
|||
|
|
function applyColumnFold(list, counts) {
|
|||
|
|
const section = todoList.closest('.checklists-section');
|
|||
|
|
if (!section) return;
|
|||
|
|
section.querySelectorAll('.checklist-column').forEach((col) => {
|
|||
|
|
const key = col.getAttribute('data-col');
|
|||
|
|
const h2 = col.querySelector('h2');
|
|||
|
|
if (!h2 || !key) return;
|
|||
|
|
const folded = isColFolded(list.id, key);
|
|||
|
|
col.classList.toggle('col-folded', folded);
|
|||
|
|
h2.classList.add('col-foldable');
|
|||
|
|
let count = h2.querySelector('.col-count');
|
|||
|
|
if (!count) {
|
|||
|
|
count = document.createElement('span');
|
|||
|
|
count.className = 'col-count';
|
|||
|
|
const title = h2.querySelector('.col-title');
|
|||
|
|
if (title) title.insertAdjacentElement('afterend', count); else h2.appendChild(count);
|
|||
|
|
}
|
|||
|
|
count.textContent = String(counts[key] || 0);
|
|||
|
|
let btn = h2.querySelector('.col-fold');
|
|||
|
|
if (!btn) {
|
|||
|
|
btn = document.createElement('button');
|
|||
|
|
btn.type = 'button';
|
|||
|
|
btn.className = 'col-fold';
|
|||
|
|
btn.setAttribute('data-col-fold', key);
|
|||
|
|
btn.innerHTML = '<svg class="chevron" viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><path d="M5 8l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
|||
|
|
}
|
|||
|
|
btn.setAttribute('aria-expanded', folded ? 'false' : 'true');
|
|||
|
|
const listEl = col.querySelector('.checklist-list');
|
|||
|
|
if (listEl && listEl.id) btn.setAttribute('aria-controls', listEl.id);
|
|||
|
|
const colName = COL_LABEL[key] || (h2.querySelector('.col-title') || {}).textContent || key; // custom sections use their own name
|
|||
|
|
btn.setAttribute('aria-label', (folded ? 'Unfold the ' : 'Fold the ') + colName + ' list');
|
|||
|
|
// Keep the chevron the LAST header control even after renderColHeaderControls
|
|||
|
|
// creates its .col-reorder box (which appends itself to the h2).
|
|||
|
|
if (h2.lastElementChild !== btn) h2.appendChild(btn);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// Move a column one step among the currently-visible columns; persist the shared order (master via
|
|||
|
|
// full-state undo snapshot, scoped via PUT with a pre-mutation snapshot so undo records it and the
|
|||
|
|
// 6s poll — guarded by isSaving in saveMutation — can't clobber the optimistic order).
|
|||
|
|
function reorderColumn(listId, key, dir) {
|
|||
|
|
const list = (checklistData.lists || []).find((l) => l.id === listId);
|
|||
|
|
if (!list || !ownsListClient(list)) return;
|
|||
|
|
const hasNotes = (list.items || []).some((i) => i.kind === 'note');
|
|||
|
|
const hasTasks = (list.items || []).some((i) => i.kind !== 'note');
|
|||
|
|
const notesVisible = !!list.showNotes || hasNotes; // editor view
|
|||
|
|
const feedbackVisible = !!list.showFeedback || (Array.isArray(list.feedback) && list.feedback.length > 0);
|
|||
|
|
const tasksVisible = !list.notesOnly || hasTasks; // mirror applyColumnLayout
|
|||
|
|
const full = columnOrderOf(list);
|
|||
|
|
const visible = full.filter((k) => (k === 'notes' ? notesVisible : (k === 'feedback' ? feedbackVisible : tasksVisible)));
|
|||
|
|
const i = visible.indexOf(key); const j = i + dir;
|
|||
|
|
if (i < 0 || j < 0 || j >= visible.length) return;
|
|||
|
|
const nv = visible.slice(); const t = nv[i]; nv[i] = nv[j]; nv[j] = t;
|
|||
|
|
const next = nv.concat(full.filter((k) => !nv.includes(k))); // keep any hidden key (notes) at the end
|
|||
|
|
if (next.join(',') === full.join(',')) return;
|
|||
|
|
if (isMasterAdmin()) {
|
|||
|
|
const st = cloneState(checklistData);
|
|||
|
|
const l = st.lists.find((x) => x.id === listId); if (l) l.columnOrder = next;
|
|||
|
|
justMovedItemId = null; // this isn't an item move — don't trigger the card-flight FLIP
|
|||
|
|
pushAdminState(st);
|
|||
|
|
} else {
|
|||
|
|
const before = ownedListMap();
|
|||
|
|
list.columnOrder = next; // optimistic
|
|||
|
|
renderLists();
|
|||
|
|
saveMutation(apiUpdateList(listId, { columnOrder: next }), before);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function openAddNote(listId) {
|
|||
|
|
renderListSelect();
|
|||
|
|
addTargetListId = listId || addTargetListId;
|
|||
|
|
if (addListSelect && addTargetListId) addListSelect.value = addTargetListId;
|
|||
|
|
setAddMode('note');
|
|||
|
|
populateItemGroupSelect(addTargetListId); // notes have no section — hides the row
|
|||
|
|
resetMarkdownEditor('itemDescription');
|
|||
|
|
addTaskModal.style.display = 'flex';
|
|||
|
|
requestAnimationFrame(() => { itemTitleInput.focus({ preventScroll: true }); });
|
|||
|
|
}
|
|||
|
|
document.addEventListener('click', (e) => {
|
|||
|
|
const mv = e.target.closest && e.target.closest('.col-move[data-col-move]');
|
|||
|
|
if (mv) { const list = getCurrentList(); if (list) reorderColumn(list.id, mv.getAttribute('data-col-move'), parseInt(mv.getAttribute('data-dir'), 10)); return; }
|
|||
|
|
const an = e.target.closest && e.target.closest('.col-add-note');
|
|||
|
|
if (an) { openAddNote(an.getAttribute('data-add-note-list')); return; }
|
|||
|
|
const cf = e.target.closest && e.target.closest('.col-clear-feedback');
|
|||
|
|
if (cf) { clearAllFeedback(cf.getAttribute('data-clear-feedback-list')); }
|
|||
|
|
});
|
|||
|
|
function renderLists() {
|
|||
|
|
// This render supersedes any pending deferred reconcile and resets the deferral cap.
|
|||
|
|
if (deferredRenderTimer) { clearTimeout(deferredRenderTimer); deferredRenderTimer = null; }
|
|||
|
|
firstDeferAt = 0;
|
|||
|
|
renderAdminFilters();
|
|||
|
|
const visible = visibleLists();
|
|||
|
|
if (!visible || visible.length === 0) {
|
|||
|
|
if (isAdmin()) {
|
|||
|
|
listTabs.innerHTML = '<div class="empty-state" style="padding:8px;">No lists yet. Open the menu to add one.</div>';
|
|||
|
|
} else if (!userName) {
|
|||
|
|
listTabs.innerHTML = '';
|
|||
|
|
} else {
|
|||
|
|
listTabs.innerHTML = `<div class="empty-state" style="padding:8px;">No lists assigned to "${escapeHtml(userName)}" yet.</div>`;
|
|||
|
|
}
|
|||
|
|
todoList.innerHTML = '';
|
|||
|
|
doneList.innerHTML = '';
|
|||
|
|
notesList.innerHTML = '';
|
|||
|
|
if (feedbackList) feedbackList.innerHTML = '';
|
|||
|
|
document.querySelectorAll('.checklist-column[data-col^="grp-"]').forEach((c) => c.remove()); // stale sections
|
|||
|
|
if (listTree) listTree.innerHTML = '';
|
|||
|
|
justMovedItemId = null; // consume it even on this exit path so a later poll can't replay a flight
|
|||
|
|
renderListSelect();
|
|||
|
|
updateRequestsBadge();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
renderListTabs();
|
|||
|
|
renderListTree();
|
|||
|
|
updateListViewToggle();
|
|||
|
|
const list = getCurrentList();
|
|||
|
|
if (!list) { todoList.innerHTML = ''; doneList.innerHTML = ''; notesList.innerHTML = ''; if (feedbackList) feedbackList.innerHTML = ''; document.querySelectorAll('.checklist-column[data-col^="grp-"]').forEach((c) => c.remove()); justMovedItemId = null; return; }
|
|||
|
|
const canEdit = ownsListClient(list);
|
|||
|
|
// Notes are reference-only: never in To Do/Done, never counted toward completion.
|
|||
|
|
const taskItems = list.items.filter((i) => i.kind !== 'note');
|
|||
|
|
const noteItems = list.items.filter((i) => i.kind === 'note');
|
|||
|
|
const todoItems = taskItems.filter((i) => !isCheckedForMe(list.id, i.id));
|
|||
|
|
const doneItems = taskItems.filter((i) => isCheckedForMe(list.id, i.id));
|
|||
|
|
const fbEntries = Array.isArray(list.feedback) ? list.feedback : [];
|
|||
|
|
// Split the unchecked tasks into the list's sections (default 'todo' + any
|
|||
|
|
// custom ones like Monday/Tuesday). Checked tasks all share the one Done.
|
|||
|
|
const groups = taskGroupsOf(list);
|
|||
|
|
const byGroup = {};
|
|||
|
|
groups.forEach((g) => { byGroup[g.id] = []; });
|
|||
|
|
todoItems.forEach((i) => byGroup[itemGroupId(i, groups)].push(i));
|
|||
|
|
// Order/show the columns BEFORE any Flip.capture or rect snapshot so measurements are final.
|
|||
|
|
const notesVisible = applyColumnLayout(list, canEdit, noteItems.length, taskItems.length, fbEntries.length);
|
|||
|
|
syncTaskGroupColumns(list, groups);
|
|||
|
|
const foldCounts = { todo: byGroup.todo.length, done: doneItems.length, notes: noteItems.length, feedback: fbEntries.length };
|
|||
|
|
groups.slice(1).forEach((g) => { foldCounts['grp-' + g.id] = byGroup[g.id].length; });
|
|||
|
|
applyColumnFold(list, foldCounts);
|
|||
|
|
// The extra sections' item containers (created/kept by syncTaskGroupColumns).
|
|||
|
|
const groupEls = {};
|
|||
|
|
groups.slice(1).forEach((g) => {
|
|||
|
|
const el = document.querySelector('.checklist-column[data-col="grp-' + cssEscape(g.id) + '"] .checklist-list');
|
|||
|
|
if (el) groupEls[g.id] = el;
|
|||
|
|
});
|
|||
|
|
const userAction = justMovedItemId !== null; // a tap moved an item (vs a 6s poll)
|
|||
|
|
const movedId = justMovedItemId; // read before it's consumed below
|
|||
|
|
const listChanged = list.id !== lastRenderedListId; // navigated to a different list (or first load)
|
|||
|
|
const animOn = motionReady() && !prefersReduced(); // only then is there an animation to protect
|
|||
|
|
// "Suck into header" flourish: only on MY completing tap (userAction) of a card that is
|
|||
|
|
// moving To Do → Done, is currently EXPANDED (there's a body to vacuum up), and will land
|
|||
|
|
// collapsed. Snapshot the old body BEFORE the rebuild; the clone animates on a fixed
|
|||
|
|
// overlay afterward. A teammate's poll-completion (userAction=false) just renders collapsed.
|
|||
|
|
let suckSnap = null;
|
|||
|
|
if (userAction && animOn && movedId && doneItems.some((i) => i.id === movedId) && isCollapsed(movedId, true)) {
|
|||
|
|
// The old card may live in ANY task section, not just the built-in To Do.
|
|||
|
|
const oldCard = document.querySelector('.checklist-column[data-col="todo"] .checklist-item[data-item-id="' + cssEscape(movedId) + '"], .checklist-column[data-col^="grp-"] .checklist-item[data-item-id="' + cssEscape(movedId) + '"]');
|
|||
|
|
const oldBody = (oldCard && !oldCard.classList.contains('collapsed')) ? oldCard.querySelector('.checklist-item-body') : null;
|
|||
|
|
if (oldBody && oldBody.offsetHeight > 0) {
|
|||
|
|
suckSnap = { clone: oldBody.cloneNode(true), rect: oldBody.getBoundingClientRect(), bg: getComputedStyle(oldCard).backgroundColor };
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// FLIP only on a real mutation; a gentle cascade when you switch lists; nothing on polls.
|
|||
|
|
// Include notesList only when the Notes column is visible (a hidden/zero-rect node would make
|
|||
|
|
// every note read as "fresh" and enter-animate spuriously on each check-off). Folded columns
|
|||
|
|
// are excluded for the same reason — their cards are display:none / zero-rect.
|
|||
|
|
const flipTargets = [
|
|||
|
|
!isColFolded(list.id, 'todo') ? todoList : null,
|
|||
|
|
].concat(groups.slice(1).map((g) => (groupEls[g.id] && !isColFolded(list.id, 'grp-' + g.id)) ? groupEls[g.id] : null)).concat([
|
|||
|
|
!isColFolded(list.id, 'done') ? doneList : null,
|
|||
|
|
(notesVisible && !isColFolded(list.id, 'notes')) ? notesList : null,
|
|||
|
|
]).filter(Boolean);
|
|||
|
|
const firstRects = userAction ? Flip.capture(flipTargets) : null;
|
|||
|
|
renderList(todoList, byGroup.todo, false, list.id, canEdit);
|
|||
|
|
groups.slice(1).forEach((g) => { if (groupEls[g.id]) renderList(groupEls[g.id], byGroup[g.id], false, list.id, canEdit); });
|
|||
|
|
renderList(doneList, doneItems, true, list.id, canEdit);
|
|||
|
|
renderList(notesList, noteItems, false, list.id, canEdit, 'No notes yet');
|
|||
|
|
renderFeedback(list, canEdit); // bespoke render — never FLIP'd, keeps in-progress typing
|
|||
|
|
if (userAction) { Flip.play(firstRects, flipTargets); if (animOn) animatingUntil = Date.now() + 850; } // fly the (already-collapsed) card across; glide the rest
|
|||
|
|
else if (listChanged) { Flip.enterAll(flipTargets); if (animOn) animatingUntil = Date.now() + 550; } // cascade items in on a list switch
|
|||
|
|
if (suckSnap) { playSuckIntoHeader(suckSnap); animatingUntil = Math.max(animatingUntil, Date.now() + 1150); }
|
|||
|
|
lastRenderedListId = list.id;
|
|||
|
|
justMovedItemId = null; // consumed — don't replay on the next poll render
|
|||
|
|
// Celebrate the moment a list reaches 100% — but only on the tap that completes it
|
|||
|
|
// (not on every poll while it stays complete, and not on mere navigation to a done list).
|
|||
|
|
const complete = taskItems.length > 0 && todoItems.length === 0; // notes don't count
|
|||
|
|
if (complete) {
|
|||
|
|
// A folded Done list is display:none (zero rect, which celebrateComplete rejects) —
|
|||
|
|
// burst from its still-visible column header instead so 100% always celebrates.
|
|||
|
|
if (userAction && celebratedListId !== list.id) { celebrateComplete(doneList.offsetParent ? doneList : doneList.closest('.checklist-column')); haptic(HAPTIC_DONE); }
|
|||
|
|
celebratedListId = list.id;
|
|||
|
|
} else if (celebratedListId === list.id) {
|
|||
|
|
celebratedListId = null; // dropped back below 100% → arm the burst again
|
|||
|
|
}
|
|||
|
|
renderListSelect();
|
|||
|
|
applyKbFocus(); // re-apply the keyboard-focus ring (survives poll/action re-renders)
|
|||
|
|
updateRequestsBadge(); // header ✋ count tracks every render/poll
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// CANONICAL task-list regex — MUST stay byte-identical to md.js TASK_RE and server.js
|
|||
|
|
// TASK_LINE_RE, or checkbox indices/counts disagree across the stack.
|
|||
|
|
const TASK_LINE_RE = /^\s*[-*]\s+\[([ xX])\]\s*(.*)$/;
|
|||
|
|
// Checkbox lines authored inline in a description, in document order. index = position.
|
|||
|
|
function parseTaskList(description) {
|
|||
|
|
const out = [];
|
|||
|
|
String(description == null ? '' : description).replace(/\r\n?/g, '\n').split('\n').forEach((line) => {
|
|||
|
|
const m = TASK_LINE_RE.exec(line);
|
|||
|
|
if (m) out.push({ index: out.length, label: m[2] });
|
|||
|
|
});
|
|||
|
|
return out;
|
|||
|
|
}
|
|||
|
|
function itemTaskCount(listId, itemId) {
|
|||
|
|
const list = (checklistData.lists || []).find((l) => l.id === listId);
|
|||
|
|
const item = list && list.items.find((i) => i.id === itemId);
|
|||
|
|
return item ? parseTaskList(item.description).length : 0;
|
|||
|
|
}
|
|||
|
|
// How many of a task's checkboxes are checked for me (only in-range indices count).
|
|||
|
|
function subDoneCount(listId, itemId, check) {
|
|||
|
|
const c = check || getMyCheck(listId, itemId);
|
|||
|
|
const sc = (c && c.subChecks) || {};
|
|||
|
|
const total = itemTaskCount(listId, itemId);
|
|||
|
|
return Object.keys(sc).filter((k) => { const n = Number(k); return Number.isInteger(n) && n >= 0 && n < total; }).length;
|
|||
|
|
}
|
|||
|
|
function isTaskCheckedForMe(listId, itemId, index) {
|
|||
|
|
const c = getMyCheck(listId, itemId);
|
|||
|
|
return !!(c && c.subChecks && c.subChecks[String(index)]);
|
|||
|
|
}
|
|||
|
|
// A task with checkboxes is "done" iff EVERY checkbox is checked (derived live from the
|
|||
|
|
// per-location marks, so the column and the parent pill can never disagree, even before
|
|||
|
|
// the optimistic completed flag lands). Tasks without checkboxes use the normal flag.
|
|||
|
|
function isCheckedForMe(listId, itemId) {
|
|||
|
|
const total = itemTaskCount(listId, itemId);
|
|||
|
|
if (total > 0) return subDoneCount(listId, itemId) === total;
|
|||
|
|
const c = getMyCheck(listId, itemId);
|
|||
|
|
return !!(c && c.completed);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderListTabs() {
|
|||
|
|
const current = (getCurrentList() || {}).id;
|
|||
|
|
const lists = visibleLists();
|
|||
|
|
listTabs.innerHTML = lists.map((list) => {
|
|||
|
|
const scopeText = [abbrevForLocation(list.location), (list.team || '').trim()].filter(Boolean).join(' · ');
|
|||
|
|
// Master and executives both see lists across multiple locations/teams, so
|
|||
|
|
// show the scope on each tab to tell same-named lists apart. Members only
|
|||
|
|
// ever see their own scope, so the badge would be redundant noise for them.
|
|||
|
|
const showScope = isMasterAdmin() || (currentUser && currentUser.role === 'executive');
|
|||
|
|
const locBadge = showScope && scopeText
|
|||
|
|
? `<span class="list-tab-loc">${escapeHtml(scopeText)}</span>`
|
|||
|
|
: '';
|
|||
|
|
// Editors still see hidden lists (members don't) — mark them so it's obvious.
|
|||
|
|
const hiddenBadge = list.hidden ? '<span class="list-tab-hidden" title="Hidden from members">🚫 hidden</span>' : '';
|
|||
|
|
const repeatBadge = list.resetSchedule ? `<span class="list-tab-repeat" title="${escapeAttr(resetScheduleText(list.resetSchedule))}">🔁</span>` : '';
|
|||
|
|
// Requests inbox: show the OPEN count right on the tab so waiting requests are unmissable.
|
|||
|
|
let requestsBadgeTab = '';
|
|||
|
|
if (list.isRequests) {
|
|||
|
|
const rec = listTeamChecks(list) || {};
|
|||
|
|
const open = (list.items || []).filter((i) => i.kind !== 'note' && !((rec[i.id] || {}).completed)).length;
|
|||
|
|
if (open) requestsBadgeTab = `<span class="list-tab-requests" title="${open} open request${open === 1 ? '' : 's'}">✋ ${open}</span>`;
|
|||
|
|
}
|
|||
|
|
const dragAttrs = ownsListClient(list) // any owner (master, exec, team admin) can drag-reorder their lists
|
|||
|
|
? `draggable="true"
|
|||
|
|
ondragstart="onListDragStart(event,'${escapeAttr(list.id)}')"
|
|||
|
|
ondragend="onListDragEnd()"`
|
|||
|
|
: '';
|
|||
|
|
// Preset colors map to CSS via [data-color="name"]; a custom hex sets --lc inline.
|
|||
|
|
let colorAttr = '';
|
|||
|
|
if (list.color) {
|
|||
|
|
colorAttr = list.color.charAt(0) === '#'
|
|||
|
|
? `data-color="custom" style="--lc:${escapeAttr(list.color)}"`
|
|||
|
|
: `data-color="${escapeAttr(list.color)}"`;
|
|||
|
|
}
|
|||
|
|
return `
|
|||
|
|
<button class="list-tab ${list.id === current ? 'active' : ''} ${list.hidden ? 'list-hidden' : ''}"
|
|||
|
|
data-list-id="${escapeAttr(list.id)}"
|
|||
|
|
${colorAttr}
|
|||
|
|
onclick="changeList('${escapeAttr(list.id)}')"
|
|||
|
|
${dragAttrs}>
|
|||
|
|
${escapeHtml(list.name)}${locBadge}${repeatBadge}${requestsBadgeTab}${hiddenBadge}
|
|||
|
|
</button>
|
|||
|
|
`;
|
|||
|
|
}).join('');
|
|||
|
|
updateListsToggle(lists);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// "Hide lists" toggle (master): update its label + show the active list name
|
|||
|
|
// while the strip is collapsed so the owner keeps context.
|
|||
|
|
function updateListsToggle(lists) {
|
|||
|
|
if (!listTabsToggle) return;
|
|||
|
|
const count = (lists || visibleLists()).length;
|
|||
|
|
const hidden = document.body.classList.contains('lists-hidden');
|
|||
|
|
// Icon + label spans so the label can collapse to just the icon on mobile.
|
|||
|
|
listTabsToggle.innerHTML = hidden
|
|||
|
|
? `<span class="lt-icon" aria-hidden="true">📋</span><span class="lt-label">Show lists</span><span class="lt-count">${count}</span>`
|
|||
|
|
: `<span class="lt-icon" aria-hidden="true">📋</span><span class="lt-label">Hide lists</span>`;
|
|||
|
|
listTabsToggle.setAttribute('aria-label', hidden ? `Show lists (${count})` : 'Hide lists');
|
|||
|
|
listTabsToggle.setAttribute('aria-expanded', hidden ? 'false' : 'true');
|
|||
|
|
if (activeListName) {
|
|||
|
|
const cur = getCurrentList();
|
|||
|
|
if (cur) {
|
|||
|
|
const scope = [abbrevForLocation(cur.location), (cur.team || '').trim()].filter(Boolean).join(' · ');
|
|||
|
|
const scopeHtml = scope ? ` <span class="active-list-scope">${escapeHtml(scope)}</span>` : '';
|
|||
|
|
activeListName.innerHTML = `Editing <b>${escapeHtml(cur.name)}</b>${scopeHtml}`;
|
|||
|
|
} else {
|
|||
|
|
activeListName.innerHTML = '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Family-tree navigation (master): Location → Team → Lists ──────
|
|||
|
|
const COLOR_HEX = {
|
|||
|
|
blue: '#39a8ff', green: '#2ecc71', amber: '#e0a800', red: '#ef4444', purple: '#9b59b6',
|
|||
|
|
teal: '#1abc9c', pink: '#e84393', slate: '#7f8c8d', orange: '#e67e22', yellow: '#f1c40f',
|
|||
|
|
lime: '#8bc34a', cyan: '#00bcd4', indigo: '#5c6bc0', brown: '#8d6e63'
|
|||
|
|
};
|
|||
|
|
function colorHex(c) { return !c ? '' : (c.charAt(0) === '#' ? c : (COLOR_HEX[c] || '')); }
|
|||
|
|
|
|||
|
|
function updateListViewToggle() {
|
|||
|
|
if (!listViewToggle) return;
|
|||
|
|
const isTree = document.body.classList.contains('tree-view');
|
|||
|
|
listViewToggle.innerHTML = isTree
|
|||
|
|
? '<span class="lt-icon" aria-hidden="true">▦</span><span class="lt-label">Tab view</span>'
|
|||
|
|
: '<span class="lt-icon" aria-hidden="true">🌳</span><span class="lt-label">Tree view</span>';
|
|||
|
|
// Keep an accessible name when the label is icon-only on mobile.
|
|||
|
|
listViewToggle.setAttribute('aria-label', isTree ? 'Switch to tab view' : 'Switch to tree view');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Switch between the flat tab strip and the Location→Team→List tree with a
|
|||
|
|
// cascade animation: the current view shrinks/fades out, then the incoming
|
|||
|
|
// rows fall into place one after another. Falls back to an instant swap when
|
|||
|
|
// the user prefers reduced motion.
|
|||
|
|
// Slide the list strip out/in when hiding/showing, rather than snapping. The
|
|||
|
|
// body.lists-hidden swap (which drives display:none) is sequenced AFTER the
|
|||
|
|
// collapse so the animation is visible.
|
|||
|
|
let listsHideTimer = null;
|
|||
|
|
function animateListsHidden(hidden) {
|
|||
|
|
try { localStorage.setItem('checklist:listsHidden', hidden ? '1' : ''); } catch (_) {}
|
|||
|
|
const apply = () => { document.body.classList.toggle('lists-hidden', hidden); updateListsToggle(); };
|
|||
|
|
const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|||
|
|
const strip = document.body.classList.contains('tree-view') ? listTree : listTabs;
|
|||
|
|
if (reduce || !strip) { apply(); return; }
|
|||
|
|
if (listsHideTimer) { clearTimeout(listsHideTimer); listsHideTimer = null; }
|
|||
|
|
if (hidden) {
|
|||
|
|
strip.classList.add('strip-collapsing');
|
|||
|
|
listsHideTimer = setTimeout(() => { strip.classList.remove('strip-collapsing'); apply(); listsHideTimer = null; }, 190);
|
|||
|
|
} else {
|
|||
|
|
apply(); // un-hide first so the strip is laid out, then animate it in
|
|||
|
|
strip.classList.add('strip-expanding');
|
|||
|
|
listsHideTimer = setTimeout(() => { strip.classList.remove('strip-expanding'); listsHideTimer = null; }, 320);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let viewSwitchTimer = null;
|
|||
|
|
function switchListView(toTree) {
|
|||
|
|
try { localStorage.setItem('checklist:treeView', toTree ? '1' : ''); } catch (_) {}
|
|||
|
|
const apply = () => { document.body.classList.toggle('tree-view', toTree); updateListViewToggle(); renderLists(); };
|
|||
|
|
const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|||
|
|
if (reduce || !listTabs || !listTree) { apply(); return; }
|
|||
|
|
if (viewSwitchTimer) { clearTimeout(viewSwitchTimer); viewSwitchTimer = null; }
|
|||
|
|
const outEl = toTree ? listTabs : listTree; // the view currently on screen
|
|||
|
|
outEl.classList.add('view-leaving');
|
|||
|
|
viewSwitchTimer = setTimeout(() => {
|
|||
|
|
outEl.classList.remove('view-leaving');
|
|||
|
|
apply(); // swaps which view is shown + rebuilds its contents
|
|||
|
|
const inEl = toTree ? listTree : listTabs;
|
|||
|
|
if (!inEl) return;
|
|||
|
|
const items = Array.from(inEl.children);
|
|||
|
|
inEl.classList.add('view-entering');
|
|||
|
|
items.forEach((it, i) => { it.style.animationDelay = Math.min(i * 22, 400) + 'ms'; });
|
|||
|
|
viewSwitchTimer = setTimeout(() => {
|
|||
|
|
inEl.classList.remove('view-entering');
|
|||
|
|
items.forEach((it) => { it.style.animationDelay = ''; });
|
|||
|
|
viewSwitchTimer = null;
|
|||
|
|
}, 800);
|
|||
|
|
}, 140);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderListTree() {
|
|||
|
|
if (!listTree) return;
|
|||
|
|
if (!isEditor()) { listTree.innerHTML = ''; return; } // master + execs get the tree
|
|||
|
|
const lists = visibleLists();
|
|||
|
|
const current = (getCurrentList() || {}).id;
|
|||
|
|
const byLoc = {};
|
|||
|
|
lists.forEach((l) => {
|
|||
|
|
const loc = (l.location || '').trim() || 'Global';
|
|||
|
|
const team = (l.team || '').trim() || '__bldg__';
|
|||
|
|
(byLoc[loc] = byLoc[loc] || {});
|
|||
|
|
(byLoc[loc][team] = byLoc[loc][team] || []).push(l);
|
|||
|
|
});
|
|||
|
|
const locNames = Object.keys(byLoc).sort((a, b) => a.localeCompare(b));
|
|||
|
|
let html = '';
|
|||
|
|
locNames.forEach((loc) => {
|
|||
|
|
const teams = byLoc[loc];
|
|||
|
|
const locCount = Object.keys(teams).reduce((n, t) => n + teams[t].length, 0);
|
|||
|
|
const locKey = 'loc::' + loc;
|
|||
|
|
const locClosed = !!treeCollapsed[locKey];
|
|||
|
|
html += `<div class="tree-node tree-node-loc" data-tree-toggle="${escapeAttr(locKey)}">
|
|||
|
|
<span class="tree-caret">${locClosed ? '▸' : '▾'}</span>
|
|||
|
|
<span class="tree-label">${escapeHtml(loc)}</span>
|
|||
|
|
<span class="tree-count">${locCount}</span></div>`;
|
|||
|
|
if (locClosed) return;
|
|||
|
|
Object.keys(teams).sort((a, b) => a.localeCompare(b)).forEach((team) => {
|
|||
|
|
const arr = teams[team]; // manual order (global-array order) so drag-reorder sticks
|
|||
|
|
const teamKey = 'team::' + loc + '::' + team;
|
|||
|
|
const teamClosed = !!treeCollapsed[teamKey];
|
|||
|
|
const teamLabel = team === '__bldg__' ? 'Whole building' : team;
|
|||
|
|
html += `<div class="tree-node tree-node-team" data-tree-toggle="${escapeAttr(teamKey)}">
|
|||
|
|
<span class="tree-caret">${teamClosed ? '▸' : '▾'}</span>
|
|||
|
|
<span class="tree-label">${escapeHtml(teamLabel)}</span>
|
|||
|
|
<span class="tree-count">${arr.length}</span></div>`;
|
|||
|
|
if (teamClosed) return;
|
|||
|
|
arr.forEach((l) => {
|
|||
|
|
const dot = `<span class="tree-dot" style="background:${escapeAttr(colorHex(l.color) || '#555')}"></span>`;
|
|||
|
|
const hid = l.hidden ? '<span class="tree-hidden">hidden</span>' : '';
|
|||
|
|
const rep = l.resetSchedule ? `<span class="tree-repeat" title="${escapeAttr(resetScheduleText(l.resetSchedule))}">🔁</span>` : '';
|
|||
|
|
let reqPill = '';
|
|||
|
|
if (l.isRequests) {
|
|||
|
|
const rec = listTeamChecks(l) || {};
|
|||
|
|
const open = (l.items || []).filter((i) => i.kind !== 'note' && !((rec[i.id] || {}).completed)).length;
|
|||
|
|
if (open) reqPill = `<span class="list-tab-requests">✋ ${open}</span>`;
|
|||
|
|
}
|
|||
|
|
// Owned leaves are drag-reorderable within their team group (data-tree-group).
|
|||
|
|
const dragAttrs = ownsListClient(l)
|
|||
|
|
? `draggable="true" data-tree-group="${escapeAttr(teamKey)}"
|
|||
|
|
ondragstart="onTreeLeafDragStart(event,'${escapeAttr(l.id)}')"
|
|||
|
|
ondragend="onTreeLeafDragEnd()"`
|
|||
|
|
: '';
|
|||
|
|
html += `<div class="tree-leaf ${l.id === current ? 'active' : ''}" data-tree-list="${escapeAttr(l.id)}" ${dragAttrs}>
|
|||
|
|
${dot}<span class="tree-leaf-name">${escapeHtml(l.name)}</span>${rep}${reqPill}${hid}</div>`;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
listTree.innerHTML = html || '<div class="empty-state" style="padding:8px;">No lists.</div>';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ── Cross-department requests ─────────────────────────────────────────
|
|||
|
|
// Editors (master + execs) send a request to any department; it lands as a
|
|||
|
|
// task in that team's auto-created "Requests" inbox list. The badge in the
|
|||
|
|
// header shows the OPEN request count across every Requests list the signed-
|
|||
|
|
// in user can see — always visible, so an exec can't miss waiting requests.
|
|||
|
|
let requestPhotos = []; // [{url, caption}] attached before sending
|
|||
|
|
function renderRequestPhotos() {
|
|||
|
|
const box = document.getElementById('requestPhotos');
|
|||
|
|
if (!box) return;
|
|||
|
|
box.innerHTML = requestPhotos.map((p, i) => `
|
|||
|
|
<div class="equip-photo">
|
|||
|
|
<img class="equip-photo-thumb" src="${escapeAttr(normalizeImageUrl(p.url))}" alt="" loading="lazy" decoding="async" />
|
|||
|
|
<span class="request-photo-name">Photo ${i + 1}</span>
|
|||
|
|
<button class="equip-photo-remove" type="button" data-request-photo-remove="${i}" aria-label="Remove photo" title="Remove">✕</button>
|
|||
|
|
</div>`).join('');
|
|||
|
|
}
|
|||
|
|
function openRequestModal() {
|
|||
|
|
const modal = document.getElementById('requestModal');
|
|||
|
|
const sel = document.getElementById('requestTarget');
|
|||
|
|
if (!modal || !sel) return;
|
|||
|
|
const targets = Array.isArray(checklistData.requestTargets) ? checklistData.requestTargets : [];
|
|||
|
|
if (!targets.length) { showToast('No departments to request from yet', 'error'); return; }
|
|||
|
|
sel.innerHTML = targets.map((t) =>
|
|||
|
|
`<option value="${escapeAttr(t.location + '::' + t.team)}">${escapeHtml(t.team)} — ${escapeHtml(t.location)}</option>`).join('');
|
|||
|
|
document.getElementById('requestTitle').value = '';
|
|||
|
|
document.getElementById('requestDetails').value = '';
|
|||
|
|
const err = document.getElementById('requestError'); if (err) err.style.display = 'none';
|
|||
|
|
requestPhotos = [];
|
|||
|
|
renderRequestPhotos();
|
|||
|
|
modal.style.display = 'flex';
|
|||
|
|
requestAnimationFrame(() => document.getElementById('requestTitle').focus({ preventScroll: true }));
|
|||
|
|
}
|
|||
|
|
function closeRequestModal() { const m = document.getElementById('requestModal'); if (m) closeOverlay(m); }
|
|||
|
|
async function handleRequestPhotoFile() {
|
|||
|
|
const inp = document.getElementById('requestPhotoFile');
|
|||
|
|
const status = document.getElementById('requestUploadStatus');
|
|||
|
|
const file = inp && inp.files && inp.files[0];
|
|||
|
|
if (inp) inp.value = '';
|
|||
|
|
if (!file) return;
|
|||
|
|
if (requestPhotos.length >= 6) { showToast('Up to 6 photos per request', 'error'); return; }
|
|||
|
|
if (file.size > 20 * 1024 * 1024) { showToast('Photo too large (max 20 MB)', 'error'); return; }
|
|||
|
|
if (status) status.textContent = 'Uploading…';
|
|||
|
|
try {
|
|||
|
|
const dataUrl = await new Promise((resolve) => {
|
|||
|
|
const r = new FileReader();
|
|||
|
|
r.onload = () => resolve(r.result);
|
|||
|
|
r.onerror = () => resolve(null);
|
|||
|
|
r.readAsDataURL(file);
|
|||
|
|
});
|
|||
|
|
if (!dataUrl) throw new Error('Could not read that photo');
|
|||
|
|
const res = await apiPost('/api/equipment/upload-image', { dataUrl }); // same store + sweep as gear photos
|
|||
|
|
requestPhotos.push({ url: res.path, caption: '' });
|
|||
|
|
renderRequestPhotos();
|
|||
|
|
if (status) status.textContent = '';
|
|||
|
|
} catch (err) {
|
|||
|
|
if (status) status.textContent = '';
|
|||
|
|
showToast('Upload failed: ' + (err && err.message ? err.message : 'try again'), 'error');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
async function sendRequest() {
|
|||
|
|
const sel = document.getElementById('requestTarget');
|
|||
|
|
const title = (document.getElementById('requestTitle').value || '').trim();
|
|||
|
|
const details = (document.getElementById('requestDetails').value || '').trim();
|
|||
|
|
const err = document.getElementById('requestError');
|
|||
|
|
const showErr = (msg) => { if (err) { err.textContent = msg; err.style.display = 'block'; } else showToast(msg, 'error'); };
|
|||
|
|
if (!sel || !sel.value) { showErr('Pick a department.'); return; }
|
|||
|
|
if (!title) { showErr('Say what you need.'); return; }
|
|||
|
|
const sep = sel.value.indexOf('::');
|
|||
|
|
const location = sel.value.slice(0, sep), team = sel.value.slice(sep + 2);
|
|||
|
|
const btn = document.getElementById('requestSend');
|
|||
|
|
if (btn) btn.disabled = true;
|
|||
|
|
try {
|
|||
|
|
await apiPost('/api/requests', { location, team, title, details, images: requestPhotos });
|
|||
|
|
closeRequestModal();
|
|||
|
|
showToast('Request sent to ' + team + ' — ' + location, 'success');
|
|||
|
|
refreshState({ showToastOnError: false }); // badge/tab pills update if it's in our scope
|
|||
|
|
} catch (e) {
|
|||
|
|
showErr(e && e.message ? e.message : 'Could not send — try again');
|
|||
|
|
} finally {
|
|||
|
|
if (btn) btn.disabled = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
{
|
|||
|
|
const sendBtn = document.getElementById('requestSendBtn');
|
|||
|
|
if (sendBtn) sendBtn.addEventListener('click', () => { if (isEditor()) openRequestModal(); });
|
|||
|
|
const cancel = document.getElementById('requestCancel');
|
|||
|
|
if (cancel) cancel.addEventListener('click', closeRequestModal);
|
|||
|
|
const send = document.getElementById('requestSend');
|
|||
|
|
if (send) send.addEventListener('click', sendRequest);
|
|||
|
|
const file = document.getElementById('requestPhotoFile');
|
|||
|
|
if (file) file.addEventListener('change', handleRequestPhotoFile);
|
|||
|
|
const photos = document.getElementById('requestPhotos');
|
|||
|
|
if (photos) photos.addEventListener('click', (e) => {
|
|||
|
|
const rm = e.target.closest('[data-request-photo-remove]');
|
|||
|
|
if (rm) { requestPhotos.splice(parseInt(rm.getAttribute('data-request-photo-remove'), 10), 1); renderRequestPhotos(); }
|
|||
|
|
});
|
|||
|
|
const modal = document.getElementById('requestModal');
|
|||
|
|
if (modal) modal.addEventListener('click', (e) => { if (e.target === modal) closeRequestModal(); });
|
|||
|
|
}
|
|||
|
|
// Open-request count across every Requests list the user can see, judged by
|
|||
|
|
// the LIST's own team scope (the record its checkers/execs write into).
|
|||
|
|
function openRequestInfo() {
|
|||
|
|
let count = 0, firstId = null;
|
|||
|
|
(visibleLists() || []).forEach((l) => {
|
|||
|
|
if (!l.isRequests) return;
|
|||
|
|
const rec = listTeamChecks(l) || {};
|
|||
|
|
(l.items || []).forEach((it) => {
|
|||
|
|
if (it.kind === 'note') return;
|
|||
|
|
const c = rec[it.id];
|
|||
|
|
if (!(c && c.completed)) { count++; if (!firstId) firstId = l.id; }
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
return { count, firstId };
|
|||
|
|
}
|
|||
|
|
function updateRequestsBadge() {
|
|||
|
|
const el = document.getElementById('requestsBadge');
|
|||
|
|
if (!el) return;
|
|||
|
|
const info = currentUser ? openRequestInfo() : { count: 0, firstId: null };
|
|||
|
|
el.style.display = info.count ? '' : 'none';
|
|||
|
|
const n = document.getElementById('requestsBadgeCount');
|
|||
|
|
if (n) n.textContent = String(info.count);
|
|||
|
|
el.dataset.target = info.firstId || '';
|
|||
|
|
}
|
|||
|
|
{
|
|||
|
|
const badge = document.getElementById('requestsBadge');
|
|||
|
|
if (badge) badge.addEventListener('click', () => { const id = badge.dataset.target; if (id) setSelectedList(id); });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ── Feedback column (team input) ──────────────────────────────────────
|
|||
|
|
// Entries live in list.feedback[] (NEVER in items[] — nothing here can be
|
|||
|
|
// checked, counted, or reset). Unlike Notes this column is writable by
|
|||
|
|
// EVERYONE the list applies to: the composer at the bottom is always there.
|
|||
|
|
// Bespoke render, no FLIP: rebuilt on every poll, so any in-progress typing
|
|||
|
|
// (composer draft, open inline edit) is snapshotted and restored.
|
|||
|
|
let fbEditingId = null;
|
|||
|
|
function renderFeedback(list, canEdit) {
|
|||
|
|
if (!feedbackList) return;
|
|||
|
|
const entries = Array.isArray(list.feedback) ? list.feedback : [];
|
|||
|
|
if (fbEditingId && !entries.some((f) => f.id === fbEditingId)) fbEditingId = null; // entry got deleted elsewhere
|
|||
|
|
const compEl = feedbackList.querySelector('.feedback-composer textarea');
|
|||
|
|
const draft = compEl ? compEl.value : '';
|
|||
|
|
const compFocused = !!compEl && document.activeElement === compEl;
|
|||
|
|
const editEl = feedbackList.querySelector('.feedback-editbox textarea');
|
|||
|
|
const editVal = editEl ? editEl.value : null;
|
|||
|
|
const editFocused = !!editEl && document.activeElement === editEl;
|
|||
|
|
const canTouch = (f) => canEdit || !!(currentUser && currentUser.role === 'user' && f.byUser === currentUser.username);
|
|||
|
|
const fmtWhen = (iso) => {
|
|||
|
|
const d = new Date(iso || '');
|
|||
|
|
if (isNaN(d)) return '';
|
|||
|
|
return d.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ', ' + d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
|
|||
|
|
};
|
|||
|
|
const rows = entries.map((f) => {
|
|||
|
|
if (f.id === fbEditingId) {
|
|||
|
|
return `<div class="feedback-entry feedback-editbox" data-fb-id="${escapeAttr(f.id)}">
|
|||
|
|
<textarea class="feedback-input" maxlength="2000" aria-label="Edit feedback">${escapeHtml(editVal != null ? editVal : f.text)}</textarea>
|
|||
|
|
<div class="feedback-actions">
|
|||
|
|
<button type="button" class="btn btn-primary btn-small" data-fb-action="save" data-fb-id="${escapeAttr(f.id)}">Save</button>
|
|||
|
|
<button type="button" class="btn btn-secondary btn-small" data-fb-action="cancel" data-fb-id="${escapeAttr(f.id)}">Cancel</button>
|
|||
|
|
</div></div>`;
|
|||
|
|
}
|
|||
|
|
const meta = [f.by ? escapeHtml(f.by) : '', escapeHtml(fmtWhen(f.createdAt)), f.editedAt ? 'edited' : ''].filter(Boolean).join(' · ');
|
|||
|
|
const actions = canTouch(f)
|
|||
|
|
? `<div class="feedback-actions">
|
|||
|
|
<button type="button" class="btn btn-secondary btn-small" data-fb-action="edit" data-fb-id="${escapeAttr(f.id)}">Edit</button>
|
|||
|
|
<button type="button" class="btn btn-danger btn-small" data-fb-action="delete" data-fb-id="${escapeAttr(f.id)}">Delete</button></div>`
|
|||
|
|
: '';
|
|||
|
|
return `<div class="feedback-entry" data-fb-id="${escapeAttr(f.id)}">
|
|||
|
|
<div class="feedback-text">${escapeHtml(f.text).replace(/\n/g, '<br>')}</div>
|
|||
|
|
<div class="feedback-meta">${meta}</div>${actions}</div>`;
|
|||
|
|
});
|
|||
|
|
const empty = entries.length ? '' : '<div class="empty-state">Nothing yet — share input, ideas, or things to work on</div>';
|
|||
|
|
const composer = `<div class="feedback-composer">
|
|||
|
|
<textarea class="feedback-input" maxlength="2000" placeholder="Input, ideas, things to work on…" aria-label="Add feedback"></textarea>
|
|||
|
|
<button type="button" class="btn btn-primary btn-small" data-fb-action="add" data-fb-list="${escapeAttr(list.id)}">Add feedback</button></div>`;
|
|||
|
|
feedbackList.innerHTML = empty + rows.join('') + composer;
|
|||
|
|
const nc = feedbackList.querySelector('.feedback-composer textarea');
|
|||
|
|
if (nc && draft) nc.value = draft;
|
|||
|
|
if (nc && compFocused) { nc.focus({ preventScroll: true }); try { nc.setSelectionRange(nc.value.length, nc.value.length); } catch (_) {} }
|
|||
|
|
if (editFocused) {
|
|||
|
|
const ne = feedbackList.querySelector('.feedback-editbox textarea');
|
|||
|
|
if (ne) { ne.focus({ preventScroll: true }); try { ne.setSelectionRange(ne.value.length, ne.value.length); } catch (_) {} }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Mass-delete every feedback entry on a list. Editors only — the button renders
|
|||
|
|
// among the owner-only header controls, and the server re-checks ownsList. Goes
|
|||
|
|
// through saveMutation so a scoped editor (executive) can UNDO it — the scoped
|
|||
|
|
// snapshot diff carries feedback[]. Master (like Reset) relies on the confirm.
|
|||
|
|
async function clearAllFeedback(listId) {
|
|||
|
|
const list = (checklistData.lists || []).find((l) => l.id === listId);
|
|||
|
|
if (!list || !ownsListClient(list)) return;
|
|||
|
|
const n = (list.feedback || []).length;
|
|||
|
|
if (!n) return;
|
|||
|
|
if (!confirm('Delete all ' + n + ' feedback entr' + (n === 1 ? 'y' : 'ies') + ' on "' + list.name + '"? This clears the whole column.')) return;
|
|||
|
|
fbEditingId = null; // nothing left to edit
|
|||
|
|
const ok = await saveMutation(apiDelete('/api/lists/' + encodeURIComponent(listId) + '/feedback'));
|
|||
|
|
if (ok) showToast('Feedback cleared', 'success');
|
|||
|
|
}
|
|||
|
|
// One delegated handler for all feedback actions (buttons are re-created on every poll render).
|
|||
|
|
document.addEventListener('click', async (e) => {
|
|||
|
|
const btn = e.target && e.target.closest && e.target.closest('[data-fb-action]');
|
|||
|
|
if (!btn) return;
|
|||
|
|
const action = btn.getAttribute('data-fb-action');
|
|||
|
|
const list = getCurrentList();
|
|||
|
|
if (!list) return;
|
|||
|
|
const fid = btn.getAttribute('data-fb-id');
|
|||
|
|
try {
|
|||
|
|
if (action === 'add') {
|
|||
|
|
const ta = feedbackList.querySelector('.feedback-composer textarea');
|
|||
|
|
const text = ((ta && ta.value) || '').trim();
|
|||
|
|
if (!text) { showToast('Write something first', 'error'); return; }
|
|||
|
|
btn.disabled = true;
|
|||
|
|
const by = (currentUser && currentUser.role === 'user' && activePerson) ? activePerson : '';
|
|||
|
|
const res = await apiPost('/api/lists/' + encodeURIComponent(list.id) + '/feedback', { text, by });
|
|||
|
|
if (ta) ta.value = ''; // clear BEFORE the re-render snapshots the draft
|
|||
|
|
if (res && res.entry) { if (!Array.isArray(list.feedback)) list.feedback = []; list.feedback.push(res.entry); }
|
|||
|
|
renderLists();
|
|||
|
|
} else if (action === 'edit') {
|
|||
|
|
fbEditingId = fid;
|
|||
|
|
renderLists();
|
|||
|
|
const ne = feedbackList.querySelector('.feedback-editbox textarea');
|
|||
|
|
if (ne) { ne.focus({ preventScroll: true }); try { ne.setSelectionRange(ne.value.length, ne.value.length); } catch (_) {} }
|
|||
|
|
} else if (action === 'cancel') {
|
|||
|
|
fbEditingId = null;
|
|||
|
|
renderLists();
|
|||
|
|
} else if (action === 'save') {
|
|||
|
|
const ta = feedbackList.querySelector('.feedback-editbox textarea');
|
|||
|
|
const text = ((ta && ta.value) || '').trim();
|
|||
|
|
if (!text) { showToast('Write something first', 'error'); return; }
|
|||
|
|
btn.disabled = true;
|
|||
|
|
const res = await apiPut('/api/lists/' + encodeURIComponent(list.id) + '/feedback/' + encodeURIComponent(fid), { text });
|
|||
|
|
const cur = (list.feedback || []).find((f) => f.id === fid);
|
|||
|
|
if (cur && res && res.entry) { cur.text = res.entry.text; cur.editedAt = res.entry.editedAt; }
|
|||
|
|
fbEditingId = null;
|
|||
|
|
renderLists();
|
|||
|
|
} else if (action === 'delete') {
|
|||
|
|
if (!confirm('Delete this feedback?')) return;
|
|||
|
|
await apiDelete('/api/lists/' + encodeURIComponent(list.id) + '/feedback/' + encodeURIComponent(fid));
|
|||
|
|
list.feedback = (list.feedback || []).filter((f) => f.id !== fid);
|
|||
|
|
if (fbEditingId === fid) fbEditingId = null;
|
|||
|
|
renderLists();
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
btn.disabled = false;
|
|||
|
|
showToast(err && err.message ? err.message : 'That didn’t save — try again', 'error');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function renderList(container, items, isDone, listId, canEdit, emptyLabel) {
|
|||
|
|
if (items.length === 0) {
|
|||
|
|
container.innerHTML = '<div class="empty-state">' + escapeHtml(emptyLabel || 'No tasks yet') + '</div>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
container.innerHTML = items.map((item) => {
|
|||
|
|
const check = getMyCheck(listId, item.id);
|
|||
|
|
const isNote = item.kind === 'note'; // reference card: no checkbox, not checkable, not draggable
|
|||
|
|
// Sub-steps are now inline checkbox lines authored in the description itself.
|
|||
|
|
const taskTotal = isNote ? 0 : parseTaskList(item.description).length; // a note's "- [ ]" lines are inert
|
|||
|
|
const hasSubs = taskTotal > 0;
|
|||
|
|
const subDone = hasSubs ? subDoneCount(listId, item.id, check) : 0;
|
|||
|
|
const checked = hasSubs ? (subDone === taskTotal) : !!(check && check.completed);
|
|||
|
|
const recurrenceText = (!isNote && item.recurrence) ? getRecurrenceText(item.recurrence, checked) : '';
|
|||
|
|
const meta = (!isNote && checked && check && check.completedBy)
|
|||
|
|
? `<div class="checklist-item-meta">Checked by ${escapeHtml(check.completedBy)} · ${escapeHtml(formatStamp(check.completedDate))}</div>`
|
|||
|
|
: '';
|
|||
|
|
// Cross-department request: who asked and when, plus any photos they attached.
|
|||
|
|
const reqMeta = item.requestedBy
|
|||
|
|
? `<div class="checklist-item-meta request-meta">✋ Requested by ${escapeHtml(item.requestedBy)}${item.requestedAt ? ' · ' + escapeHtml(formatStamp(item.requestedAt)) : ''}</div>`
|
|||
|
|
: '';
|
|||
|
|
const photosHtml = (Array.isArray(item.images) && item.images.length)
|
|||
|
|
? `<div class="request-photo-strip">` + item.images.map((p, i) =>
|
|||
|
|
`<button type="button" class="request-photo-open" data-req-photos="${escapeAttr(item.id)}" aria-label="View photo ${i + 1} of ${item.images.length}"><img src="${escapeAttr(normalizeImageUrl(p.url))}" alt="" loading="lazy" decoding="async" /></button>`).join('') + `</div>`
|
|||
|
|
: '';
|
|||
|
|
const dragAttrs = (canEdit && !isNote) // notes aren't drag-reorderable (the done-based drop guard has no 3rd column)
|
|||
|
|
? `draggable="true"
|
|||
|
|
ondragstart="onItemDragStart(event,'${escapeAttr(item.id)}',${isDone})"
|
|||
|
|
ondragend="onItemDragEnd()"`
|
|||
|
|
: '';
|
|||
|
|
const moved = item.id === justMovedItemId ? ' just-moved' : '';
|
|||
|
|
const recurrenceTag = recurrenceText
|
|||
|
|
? `<span class="checklist-item-recurrence" title="${escapeAttr(recurrenceText)}"><span class="recurrence-icon" aria-hidden="true">🔄</span><span class="recurrence-text">${escapeHtml(recurrenceText)}</span></span>`
|
|||
|
|
: '';
|
|||
|
|
// The description now contains the checkbox lines (rendered by md.js as .md-task
|
|||
|
|
// rows); they are hydrated to live per-location state + made interactive below.
|
|||
|
|
const descHtml = item.description ? `<div class="checklist-item-description">${renderDescription(item.description)}</div>` : '';
|
|||
|
|
// The parent's own control is DISPLAY-ONLY when a task has checkboxes: it shows
|
|||
|
|
// progress (n/m) and a check when every box is done — you complete the task by
|
|||
|
|
// ticking the boxes, so nothing can be marked done without checking each item.
|
|||
|
|
const headerControl = isNote
|
|||
|
|
? `<span class="note-ico" aria-hidden="true"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3h9l5 5v13H6z"/><path d="M15 3v5h5"/></svg></span>`
|
|||
|
|
: hasSubs
|
|||
|
|
? `<span class="subtask-parent${checked ? ' complete' : ''}" title="Auto-completes when all checkboxes are checked" aria-label="${subDone} of ${taskTotal} steps done">${checked ? '✓' : subDone + '/' + taskTotal}</span>`
|
|||
|
|
: `<input type="checkbox" ${checked ? 'checked' : ''} data-action="toggle" data-item-id="${escapeAttr(item.id)}" />`;
|
|||
|
|
const actionsHtml = canEdit ? `
|
|||
|
|
<div class="checklist-item-actions admin-only">
|
|||
|
|
<button class="btn btn-secondary" data-action="edit" data-item-id="${escapeAttr(item.id)}">Edit</button>
|
|||
|
|
<button class="btn btn-secondary" data-action="duplicate" data-item-id="${escapeAttr(item.id)}" title="Make a copy in this list (then Move it elsewhere)">⧉ Duplicate</button>
|
|||
|
|
<button class="btn btn-secondary" data-action="move" data-item-id="${escapeAttr(item.id)}">Move</button>
|
|||
|
|
<button class="btn btn-danger" data-action="delete" data-item-id="${escapeAttr(item.id)}">Delete</button>
|
|||
|
|
</div>` : '';
|
|||
|
|
const bodyParts = reqMeta + descHtml + photosHtml + meta + actionsHtml;
|
|||
|
|
// Collapsible only if there's a body to hide. Steady-state .collapsed is re-derived
|
|||
|
|
// every render (survives the innerHTML rebuild); the chevron is a real <button> (SVG
|
|||
|
|
// glyph, iPad-safe) so it gets Space/Enter + a focus ring free and keeps the header's
|
|||
|
|
// completion checkbox a separate, independently-operable control (no role=button nesting).
|
|||
|
|
const hasBody = !!bodyParts;
|
|||
|
|
const collapsedNow = hasBody && isCollapsed(item.id, isDone);
|
|||
|
|
const bodyId = 'itembody-' + item.id;
|
|||
|
|
const chevron = hasBody
|
|||
|
|
? `<button type="button" class="collapse-toggle" data-item-id="${escapeAttr(item.id)}" aria-expanded="${collapsedNow ? 'false' : 'true'}" aria-controls="${escapeAttr(bodyId)}" aria-label="${collapsedNow ? 'Expand task details' : 'Collapse task details'}"><svg class="chevron" viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><path d="M5 8l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`
|
|||
|
|
: '';
|
|||
|
|
return `
|
|||
|
|
<div class="checklist-item ${isDone ? 'done' : ''}${moved}${hasSubs ? ' has-subtasks' : ''}${isNote ? ' is-note' : ''}${collapsedNow ? ' collapsed' : ''}" data-item-id="${escapeAttr(item.id)}" data-kind="${escapeAttr(item.kind || 'task')}" ${dragAttrs}>
|
|||
|
|
<div class="checklist-item-header${hasBody ? ' is-collapsible' : ''}">
|
|||
|
|
${headerControl}
|
|||
|
|
<div class="checklist-item-title">${escapeHtml(item.title)}</div>
|
|||
|
|
${recurrenceTag}
|
|||
|
|
${chevron}
|
|||
|
|
</div>
|
|||
|
|
${hasBody ? `<div class="checklist-item-body" id="${escapeAttr(bodyId)}">${bodyParts}</div>` : ''}
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}).join('');
|
|||
|
|
// After the HTML is in the DOM: (1) make equipment words tappable (safe text-node pass),
|
|||
|
|
// and (2) hydrate inline checkbox rows from live per-location state + make them tappable.
|
|||
|
|
const _list = (checklistData.lists || []).find((l) => l.id === listId);
|
|||
|
|
const _ctx = { loc: _list ? _list.location : '', team: _list ? _list.team : '' };
|
|||
|
|
container.querySelectorAll('.checklist-item').forEach((card) => {
|
|||
|
|
const itemId = card.getAttribute('data-item-id');
|
|||
|
|
card.querySelectorAll('.checklist-item-description').forEach((d) => linkEquipmentTerms(d, _ctx));
|
|||
|
|
// A NOTE's description is reference-only: leave its "- [ ]" rows as static, non-interactive
|
|||
|
|
// bullets (no is-done state, no tabindex) so nothing looks or acts tickable.
|
|||
|
|
if (card.getAttribute('data-kind') === 'note') return;
|
|||
|
|
// Drive .is-done/aria from live state (the authored [ ]/[x] is only a template),
|
|||
|
|
// and mark the row focusable/tappable — ONLY in the live list, not the editor copy.
|
|||
|
|
card.querySelectorAll('.checklist-item-description .md-task').forEach((row) => {
|
|||
|
|
const idx = parseInt(row.getAttribute('data-task-index'), 10);
|
|||
|
|
const done = isTaskCheckedForMe(listId, itemId, idx);
|
|||
|
|
row.classList.toggle('is-done', done);
|
|||
|
|
row.setAttribute('aria-checked', done ? 'true' : 'false');
|
|||
|
|
row.setAttribute('tabindex', '0');
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Render a task description: markdown (via md.js) with a safe fallback to escaped text.
|
|||
|
|
function renderDescription(text) {
|
|||
|
|
try { return (window.MD && MD.render) ? MD.render(text) : escapeHtml(text); }
|
|||
|
|
catch (_) { return escapeHtml(text); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Equipment terms: make gear words tappable to show a photo ──────
|
|||
|
|
function escapeRegex(s) { return String(s).replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); }
|
|||
|
|
|
|||
|
|
function equipNormScope(s) { return String(s || '').trim().toLowerCase().replace(/\s+/g, ' '); }
|
|||
|
|
|
|||
|
|
// How well does an equipment entry apply to a list at (ctx.loc, ctx.team)?
|
|||
|
|
// -1 = not for this list 0 = global (no scope) higher = more specific.
|
|||
|
|
// Lets the same word (e.g. "Ingest Mac Studio") resolve to the on-site photo
|
|||
|
|
// for whichever campus's list is being viewed.
|
|||
|
|
function equipApplyScore(e, ctx) {
|
|||
|
|
const locs = (e.scopeLocations || []).map(equipNormScope).filter(Boolean);
|
|||
|
|
const teams = (e.scopeTeams || []).map(equipNormScope).filter(Boolean);
|
|||
|
|
if (!locs.length && !teams.length) return 0; // global
|
|||
|
|
const cl = equipNormScope(ctx && ctx.loc);
|
|||
|
|
const ct = equipNormScope(ctx && ctx.team);
|
|||
|
|
const locOK = !locs.length || locs.includes(cl);
|
|||
|
|
const teamOK = !teams.length || teams.includes(ct);
|
|||
|
|
if (!locOK || !teamOK) return -1;
|
|||
|
|
return (locs.length ? 2 : 0) + (teams.length ? 1 : 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Find the equipment entry for a term, preferring the most location/team-
|
|||
|
|
// specific one that applies to this list (ctx). Global entries are the
|
|||
|
|
// fallback; out-of-scope entries are ignored.
|
|||
|
|
function equipLookup(term, ctx) {
|
|||
|
|
const items = (checklistData.equipment && checklistData.equipment.items) || {};
|
|||
|
|
const k = String(term || '').trim().toLowerCase();
|
|||
|
|
let best = null, bestScore = -1;
|
|||
|
|
for (const id in items) {
|
|||
|
|
const e = items[id];
|
|||
|
|
const matches = (e.name || '').toLowerCase() === k
|
|||
|
|
|| (e.aliases || []).some((a) => String(a).toLowerCase() === k);
|
|||
|
|
if (!matches) continue;
|
|||
|
|
const s = equipApplyScore(e, ctx);
|
|||
|
|
if (s >= 0 && s > bestScore) { best = e; bestScore = s; }
|
|||
|
|
}
|
|||
|
|
return best;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// A styled, tappable equipment word. `display` is the exact text shown to the
|
|||
|
|
// checker (the word they typed); `name` is the equipment's canonical name used
|
|||
|
|
// only for the popup title. No URL is ever shown to the user.
|
|||
|
|
function equipSpan(display, name, image, note, id) {
|
|||
|
|
const span = document.createElement('span');
|
|||
|
|
span.className = 'equip-term' + (image ? '' : ' equip-term-noimg');
|
|||
|
|
span.textContent = display;
|
|||
|
|
span.setAttribute('data-equip-name', name);
|
|||
|
|
if (image) span.setAttribute('data-equip-image', image);
|
|||
|
|
if (note) span.setAttribute('data-equip-note', note);
|
|||
|
|
if (id) span.setAttribute('data-equip-id', id); // lets the lightbox pull the entry's full photo set
|
|||
|
|
span.setAttribute('role', 'button');
|
|||
|
|
span.setAttribute('tabindex', '0');
|
|||
|
|
span.setAttribute('title', image ? 'Tap to see a photo' : (note || name));
|
|||
|
|
return span;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Auto-link known equipment names/aliases inside a plain-text segment → [nodes].
|
|||
|
|
function autoLinkSegment(text, termRe, ctx) {
|
|||
|
|
if (!termRe) return { changed: false, nodes: [document.createTextNode(text)] };
|
|||
|
|
termRe.lastIndex = 0;
|
|||
|
|
const nodes = [];
|
|||
|
|
let last = 0, m, changed = false;
|
|||
|
|
while ((m = termRe.exec(text))) {
|
|||
|
|
if (m.index > last) nodes.push(document.createTextNode(text.slice(last, m.index)));
|
|||
|
|
const entry = equipLookup(m[1], ctx);
|
|||
|
|
// Keep the matched word exactly as written; only the popup shows the canonical name.
|
|||
|
|
if (entry) { nodes.push(equipSpan(m[1], entry.name, entry.image, entry.note, entry.id)); changed = true; }
|
|||
|
|
else nodes.push(document.createTextNode(m[0]));
|
|||
|
|
last = m.index + m[0].length;
|
|||
|
|
}
|
|||
|
|
if (last < text.length) nodes.push(document.createTextNode(text.slice(last)));
|
|||
|
|
if (!nodes.length) nodes.push(document.createTextNode(text));
|
|||
|
|
return { changed, nodes };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Turn one text node's string into a fragment with [[markers]] + auto-linked terms.
|
|||
|
|
function buildEquipFragment(text, termRe, ctx) {
|
|||
|
|
const frag = document.createDocumentFragment();
|
|||
|
|
const markerRe = /\[\[([^\]]+)\]\]/g;
|
|||
|
|
const pieces = [];
|
|||
|
|
let last = 0, m, hadMarker = false;
|
|||
|
|
while ((m = markerRe.exec(text))) {
|
|||
|
|
if (m.index > last) pieces.push({ t: 'text', v: text.slice(last, m.index) });
|
|||
|
|
pieces.push({ t: 'marker', v: m[1] });
|
|||
|
|
last = m.index + m[0].length;
|
|||
|
|
hadMarker = true;
|
|||
|
|
}
|
|||
|
|
if (last < text.length) pieces.push({ t: 'text', v: text.slice(last) });
|
|||
|
|
let changed = hadMarker;
|
|||
|
|
pieces.forEach((p) => {
|
|||
|
|
if (p.t === 'marker') {
|
|||
|
|
const bar = p.v.indexOf('|');
|
|||
|
|
let label = p.v, image = '', note = '';
|
|||
|
|
if (bar >= 0) { label = p.v.slice(0, bar).trim(); image = p.v.slice(bar + 1).trim(); }
|
|||
|
|
else label = label.trim();
|
|||
|
|
const entry = equipLookup(label, ctx);
|
|||
|
|
// Show the label the user typed inside [[ ]]; popup uses the canonical name.
|
|||
|
|
let name = label;
|
|||
|
|
if (entry) { image = image || entry.image; note = entry.note; name = entry.name; }
|
|||
|
|
frag.appendChild(equipSpan(label, name, image, note, entry ? entry.id : ''));
|
|||
|
|
} else {
|
|||
|
|
const sub = autoLinkSegment(p.v, termRe, ctx);
|
|||
|
|
if (sub.changed) changed = true;
|
|||
|
|
sub.nodes.forEach((nd) => frag.appendChild(nd));
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return changed ? frag : null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Walk text nodes under root (skipping links, code, and existing equip spans).
|
|||
|
|
function walkTextNodes(root, fn) {
|
|||
|
|
const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
|
|||
|
|
acceptNode(n) {
|
|||
|
|
let p = n.parentNode;
|
|||
|
|
while (p && p !== root) {
|
|||
|
|
if (p.nodeName === 'A' || p.nodeName === 'CODE' ||
|
|||
|
|
(p.classList && p.classList.contains('equip-term'))) return NodeFilter.FILTER_REJECT;
|
|||
|
|
p = p.parentNode;
|
|||
|
|
}
|
|||
|
|
return n.nodeValue && n.nodeValue.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const nodes = [];
|
|||
|
|
let n;
|
|||
|
|
while ((n = walker.nextNode())) nodes.push(n);
|
|||
|
|
nodes.forEach(fn);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function linkEquipmentTerms(container, ctx) {
|
|||
|
|
const items = (checklistData.equipment && checklistData.equipment.items) || {};
|
|||
|
|
const terms = [];
|
|||
|
|
Object.keys(items).forEach((id) => {
|
|||
|
|
const e = items[id];
|
|||
|
|
if (equipApplyScore(e, ctx) < 0) return; // gear from another campus — skip here
|
|||
|
|
[e.name].concat(e.aliases || []).forEach((t) => { if (String(t || '').trim()) terms.push(String(t).trim()); });
|
|||
|
|
});
|
|||
|
|
const uniq = Array.from(new Set(terms)).sort((a, b) => b.length - a.length); // longest match wins
|
|||
|
|
const termRe = uniq.length ? new RegExp('\\b(' + uniq.map(escapeRegex).join('|') + ')\\b', 'gi') : null;
|
|||
|
|
walkTextNodes(container, (node) => {
|
|||
|
|
const frag = buildEquipFragment(node.nodeValue, termRe, ctx);
|
|||
|
|
if (frag) node.parentNode.replaceChild(frag, node);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Turn a Google Drive share/view/open link into a directly-embeddable image URL
|
|||
|
|
// (the plain "…/file/d/ID/view" link points at Drive's viewer page, not the image).
|
|||
|
|
// Any non-Drive URL passes through unchanged.
|
|||
|
|
function normalizeImageUrl(url) {
|
|||
|
|
const u = String(url || '').trim();
|
|||
|
|
if (!u) return '';
|
|||
|
|
let id = '';
|
|||
|
|
let m = u.match(/drive\.google\.com\/file\/d\/([-\w]{20,})/);
|
|||
|
|
if (m) id = m[1];
|
|||
|
|
if (!id && /(?:drive|docs)\.google\.com/.test(u)) { m = u.match(/[?&]id=([-\w]{20,})/); if (m) id = m[1]; }
|
|||
|
|
if (!id) { m = u.match(/lh3\.googleusercontent\.com\/d\/([-\w]{20,})/); if (m) id = m[1]; }
|
|||
|
|
if (id) return 'https://drive.google.com/thumbnail?id=' + id + '&sz=w3840'; // 4K-wide (Drive returns the original if smaller)
|
|||
|
|
// In the iOS/Android apps the page is served from the app bundle, so a server-absolute
|
|||
|
|
// path like /equip-images/x.jpg would resolve against the bundle and 404. On the web
|
|||
|
|
// resolveUrl is the identity function, so this line is inert there.
|
|||
|
|
return window.CHECKLIST_NATIVE ? window.CHECKLIST_NATIVE.resolveUrl(u) : u;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ── Equipment photo pan/zoom controller ──
|
|||
|
|
// A proper lightbox zoom: wheel/trackpad to zoom toward the cursor (desktop),
|
|||
|
|
// pinch to zoom + two-finger pan (touch), drag to pan when zoomed, double-tap/
|
|||
|
|
// click to toggle, and floating +/−/fit buttons. touch-action:none on the stage
|
|||
|
|
// means pinching the PHOTO zooms the photo — never the whole webpage. The image
|
|||
|
|
// is transformed at its natural pixel size, so zooming shows true detail.
|
|||
|
|
const equipZoom = (function () {
|
|||
|
|
const stage = equipStage, img = equipModalImg;
|
|||
|
|
if (!stage || !img) return { load() {}, showHint() {} };
|
|||
|
|
let scale = 1, tx = 0, ty = 0, fit = 1, minS = 1, maxS = 1;
|
|||
|
|
let natW = 0, natH = 0, ready = false, onErr = null;
|
|||
|
|
const pointers = new Map();
|
|||
|
|
let dragLast = null, pinchStart = null, didPan = false;
|
|||
|
|
let downTime = 0, downXY = null, lastTapTime = 0, lastTapXY = null, hintTimer = 0;
|
|||
|
|
const rect = () => stage.getBoundingClientRect();
|
|||
|
|
|
|||
|
|
function computeFit() {
|
|||
|
|
const r = rect();
|
|||
|
|
fit = (natW && natH && r.width && r.height) ? Math.min(r.width / natW, r.height / natH) : 1;
|
|||
|
|
minS = fit;
|
|||
|
|
// Zoom-in ceiling. fit shrinks as the source grows, so fit*5 alone would pin a
|
|||
|
|
// high-res photo near native 1:1 with no room to inspect a tiny label. Floor it so
|
|||
|
|
// the user can always reach at least ~2× native — and up to devicePixelRatio× on a
|
|||
|
|
// hi-DPI screen, i.e. true source-pixel:device-pixel detail.
|
|||
|
|
maxS = Math.max(fit * 5, window.devicePixelRatio || 1, 2);
|
|||
|
|
}
|
|||
|
|
function center() {
|
|||
|
|
const r = rect();
|
|||
|
|
scale = fit;
|
|||
|
|
tx = (r.width - natW * scale) / 2;
|
|||
|
|
ty = (r.height - natH * scale) / 2;
|
|||
|
|
}
|
|||
|
|
function clamp() {
|
|||
|
|
const r = rect(), cw = natW * scale, ch = natH * scale;
|
|||
|
|
tx = cw <= r.width ? (r.width - cw) / 2 : Math.min(0, Math.max(r.width - cw, tx));
|
|||
|
|
ty = ch <= r.height ? (r.height - ch) / 2 : Math.min(0, Math.max(r.height - ch, ty));
|
|||
|
|
}
|
|||
|
|
function apply(animate) {
|
|||
|
|
img.style.transition = animate ? 'transform 0.28s cubic-bezier(0.22,1,0.36,1)' : 'none';
|
|||
|
|
img.style.transform = 'translate(' + tx + 'px,' + ty + 'px) scale(' + scale + ')';
|
|||
|
|
const zoomed = scale > fit * 1.01;
|
|||
|
|
stage.classList.toggle('zoomed', zoomed);
|
|||
|
|
if (equipZoomOut) equipZoomOut.disabled = !ready || scale <= minS * 1.01;
|
|||
|
|
if (equipZoomIn) equipZoomIn.disabled = !ready || scale >= maxS * 0.995;
|
|||
|
|
if (equipZoomReset) equipZoomReset.disabled = !ready || !zoomed;
|
|||
|
|
}
|
|||
|
|
function zoomAt(clientX, clientY, factor, animate) {
|
|||
|
|
if (!ready) return;
|
|||
|
|
const r = rect(), sx = clientX - r.left, sy = clientY - r.top;
|
|||
|
|
const ix = (sx - tx) / scale, iy = (sy - ty) / scale; // image-local point under the cursor
|
|||
|
|
scale = Math.min(maxS, Math.max(minS, scale * factor));
|
|||
|
|
tx = sx - ix * scale; ty = sy - iy * scale; // keep that point under the cursor
|
|||
|
|
clamp(); apply(animate);
|
|||
|
|
}
|
|||
|
|
function zoomCenter(factor, animate) { const r = rect(); zoomAt(r.left + r.width / 2, r.top + r.height / 2, factor, animate); }
|
|||
|
|
function reset(animate) { if (!ready) return; computeFit(); center(); clamp(); apply(animate === true); }
|
|||
|
|
function prepare() {
|
|||
|
|
natW = img.naturalWidth || 0; natH = img.naturalHeight || 0;
|
|||
|
|
// A "successful" load with 0×0 intrinsic size (e.g. a dimensionless SVG) can't
|
|||
|
|
// be zoomed — treat it as a load failure so the user sees the actionable message
|
|||
|
|
// instead of a stuck black stage.
|
|||
|
|
if (!natW || !natH) { stage.classList.remove('loading'); if (onErr) onErr(); return; }
|
|||
|
|
img.style.width = natW + 'px'; img.style.height = natH + 'px';
|
|||
|
|
ready = true; stage.classList.remove('loading');
|
|||
|
|
computeFit(); center(); clamp(); apply(false);
|
|||
|
|
}
|
|||
|
|
function load(src, alt, onError) {
|
|||
|
|
onErr = onError || null;
|
|||
|
|
ready = false; natW = natH = 0;
|
|||
|
|
pointers.clear(); dragLast = null; pinchStart = null; didPan = false;
|
|||
|
|
img.alt = alt || '';
|
|||
|
|
stage.classList.add('loading'); stage.classList.remove('zoomed');
|
|||
|
|
img.style.transition = 'none';
|
|||
|
|
img.onload = () => { img.onload = null; prepare(); };
|
|||
|
|
img.onerror = () => { img.onerror = null; stage.classList.remove('loading'); if (onErr) onErr(); };
|
|||
|
|
img.src = src;
|
|||
|
|
if (img.complete && img.naturalWidth) { img.onload = null; prepare(); } // already cached
|
|||
|
|
}
|
|||
|
|
function dismissHint() { if (equipZoomHint) equipZoomHint.classList.remove('show'); if (hintTimer) { clearTimeout(hintTimer); hintTimer = 0; } }
|
|||
|
|
function showHint() {
|
|||
|
|
if (!equipZoomHint) return;
|
|||
|
|
const touch = window.matchMedia && window.matchMedia('(hover: none)').matches;
|
|||
|
|
equipZoomHint.textContent = touch ? 'Pinch to zoom · double-tap to reset' : 'Scroll to zoom · drag to pan · double-click to reset';
|
|||
|
|
equipZoomHint.classList.add('show');
|
|||
|
|
if (hintTimer) clearTimeout(hintTimer);
|
|||
|
|
hintTimer = setTimeout(() => equipZoomHint.classList.remove('show'), 2600);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
stage.addEventListener('wheel', (e) => {
|
|||
|
|
if (!ready) return;
|
|||
|
|
e.preventDefault(); dismissHint();
|
|||
|
|
zoomAt(e.clientX, e.clientY, Math.exp(-e.deltaY * 0.0016), false);
|
|||
|
|
}, { passive: false });
|
|||
|
|
|
|||
|
|
stage.addEventListener('pointerdown', (e) => {
|
|||
|
|
if (!ready) return;
|
|||
|
|
// The zoom controls live inside the stage — don't hijack their pointer
|
|||
|
|
// (capturing it here swallows the button's click on desktop, so it took
|
|||
|
|
// a "double-click" for the double-tap fallback to fire instead).
|
|||
|
|
if (e.target.closest && e.target.closest('.equip-zoom-controls, .equip-nav')) return;
|
|||
|
|
try { stage.setPointerCapture(e.pointerId); } catch (_) {}
|
|||
|
|
pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
|
|||
|
|
dismissHint(); didPan = false;
|
|||
|
|
downTime = performance.now(); downXY = { x: e.clientX, y: e.clientY };
|
|||
|
|
if (pointers.size === 2) {
|
|||
|
|
const p = [...pointers.values()];
|
|||
|
|
pinchStart = { dist: Math.hypot(p[0].x - p[1].x, p[0].y - p[1].y) || 1, cx: (p[0].x + p[1].x) / 2, cy: (p[0].y + p[1].y) / 2, scale: scale, tx: tx, ty: ty };
|
|||
|
|
dragLast = null;
|
|||
|
|
} else if (pointers.size === 1) {
|
|||
|
|
dragLast = { x: e.clientX, y: e.clientY };
|
|||
|
|
stage.classList.add('grabbing');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
stage.addEventListener('pointermove', (e) => {
|
|||
|
|
if (!pointers.has(e.pointerId)) return;
|
|||
|
|
pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
|
|||
|
|
if (pointers.size >= 2 && pinchStart) {
|
|||
|
|
const p = [...pointers.values()];
|
|||
|
|
const dist = Math.hypot(p[0].x - p[1].x, p[0].y - p[1].y) || 1;
|
|||
|
|
const cx = (p[0].x + p[1].x) / 2, cy = (p[0].y + p[1].y) / 2, r = rect();
|
|||
|
|
const ix = (pinchStart.cx - r.left - pinchStart.tx) / pinchStart.scale;
|
|||
|
|
const iy = (pinchStart.cy - r.top - pinchStart.ty) / pinchStart.scale;
|
|||
|
|
scale = Math.min(maxS, Math.max(minS, pinchStart.scale * (dist / pinchStart.dist)));
|
|||
|
|
tx = (cx - r.left) - ix * scale; ty = (cy - r.top) - iy * scale;
|
|||
|
|
clamp(); apply(false); didPan = true;
|
|||
|
|
} else if (pointers.size === 1 && dragLast && scale > fit * 1.01) {
|
|||
|
|
const dx = e.clientX - dragLast.x, dy = e.clientY - dragLast.y;
|
|||
|
|
dragLast = { x: e.clientX, y: e.clientY };
|
|||
|
|
if (Math.abs(dx) + Math.abs(dy) > 2) didPan = true;
|
|||
|
|
tx += dx; ty += dy; clamp(); apply(false);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
function up(e) {
|
|||
|
|
if (!pointers.has(e.pointerId)) return; // ignore pointers we never tracked (e.g. zoom-control clicks)
|
|||
|
|
const single = pointers.size === 1;
|
|||
|
|
pointers.delete(e.pointerId);
|
|||
|
|
try { stage.releasePointerCapture(e.pointerId); } catch (_) {}
|
|||
|
|
stage.classList.remove('grabbing');
|
|||
|
|
if (pointers.size < 2) pinchStart = null;
|
|||
|
|
if (pointers.size === 1) { const p = [...pointers.values()][0]; dragLast = { x: p.x, y: p.y }; }
|
|||
|
|
else if (pointers.size === 0) dragLast = null;
|
|||
|
|
// At fit (not zoomed in), a horizontal swipe flips to the prev/next photo —
|
|||
|
|
// so it never fights panning, which only happens when zoomed.
|
|||
|
|
if (single && downXY && ready && scale <= fit * 1.01) {
|
|||
|
|
const dx = e.clientX - downXY.x, dy = e.clientY - downXY.y;
|
|||
|
|
if (Math.abs(dx) > 45 && Math.abs(dx) > Math.abs(dy) * 1.4) {
|
|||
|
|
equipHandleSwipe(dx < 0 ? 1 : -1); // swipe left → next
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Unified double-tap / double-click (only when it was a tap, not a pan/pinch).
|
|||
|
|
if (single && !didPan && downXY && ready) {
|
|||
|
|
const dt = performance.now() - downTime, moved = Math.hypot(e.clientX - downXY.x, e.clientY - downXY.y);
|
|||
|
|
if (dt < 400 && moved < 12) {
|
|||
|
|
const now = performance.now();
|
|||
|
|
if (now - lastTapTime < 320 && lastTapXY && Math.hypot(e.clientX - lastTapXY.x, e.clientY - lastTapXY.y) < 40) {
|
|||
|
|
if (scale > fit * 1.05) reset(true);
|
|||
|
|
else zoomAt(e.clientX, e.clientY, Math.max(fit * 2.5, 1) / scale, true);
|
|||
|
|
lastTapTime = 0; lastTapXY = null;
|
|||
|
|
} else { lastTapTime = now; lastTapXY = { x: e.clientX, y: e.clientY }; }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (pointers.size === 0 && didPan) apply(true); // settle in-bounds
|
|||
|
|
}
|
|||
|
|
stage.addEventListener('pointerup', up);
|
|||
|
|
stage.addEventListener('pointercancel', (e) => { pointers.delete(e.pointerId); if (pointers.size < 2) pinchStart = null; if (pointers.size === 0) dragLast = null; stage.classList.remove('grabbing'); });
|
|||
|
|
|
|||
|
|
if (equipZoomIn) equipZoomIn.addEventListener('click', () => zoomCenter(1.6, true));
|
|||
|
|
if (equipZoomOut) equipZoomOut.addEventListener('click', () => zoomCenter(1 / 1.6, true));
|
|||
|
|
if (equipZoomReset) equipZoomReset.addEventListener('click', () => reset(true));
|
|||
|
|
window.addEventListener('resize', () => {
|
|||
|
|
if (!ready || !equipModal || equipModal.style.display === 'none' || equipModal.classList.contains('closing')) return;
|
|||
|
|
const wasFit = scale <= fit * 1.01;
|
|||
|
|
computeFit(); if (wasFit) center(); clamp(); apply(false);
|
|||
|
|
});
|
|||
|
|
return { load, showHint };
|
|||
|
|
})();
|
|||
|
|
|
|||
|
|
// Media items can be a video (added as a URL like a photo). Detect by extension so no data-model
|
|||
|
|
// change is needed — a video just lives in images[] as another {url,caption} and renders as a player.
|
|||
|
|
function isVideoUrl(u) { return /\.(mp4|webm|ogg|ogv|mov|m4v)(\?|#|$)/i.test(String(u || '')); }
|
|||
|
|
let equipVideoEl = null;
|
|||
|
|
function equipVideo() {
|
|||
|
|
if (equipVideoEl) return equipVideoEl;
|
|||
|
|
equipVideoEl = document.createElement('video');
|
|||
|
|
equipVideoEl.className = 'equip-video';
|
|||
|
|
equipVideoEl.setAttribute('controls', ''); equipVideoEl.setAttribute('playsinline', ''); equipVideoEl.setAttribute('preload', 'metadata');
|
|||
|
|
if (equipStage && equipStage.parentNode) equipStage.parentNode.insertBefore(equipVideoEl, equipStage.nextSibling);
|
|||
|
|
return equipVideoEl;
|
|||
|
|
}
|
|||
|
|
function equipHideVideo() { if (equipVideoEl) { try { equipVideoEl.pause(); } catch (_) {} equipVideoEl.style.display = 'none'; equipVideoEl.removeAttribute('src'); try { equipVideoEl.load(); } catch (_) {} } }
|
|||
|
|
// An equipment entry's photos as a normalized [{url,caption}] list (legacy-safe).
|
|||
|
|
function equipPhotosOf(entry) {
|
|||
|
|
if (!entry) return [];
|
|||
|
|
if (Array.isArray(entry.images) && entry.images.length) {
|
|||
|
|
return entry.images.map((p) => (p && typeof p === 'object')
|
|||
|
|
? { url: String(p.url || ''), caption: String(p.caption || '') }
|
|||
|
|
: { url: String(p || ''), caption: '' }).filter((p) => p.url);
|
|||
|
|
}
|
|||
|
|
return entry.image ? [{ url: entry.image, caption: '' }] : [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Equipment photo lightbox as a gallery (device photo, desktop config, …) ──
|
|||
|
|
let equipGalleryPhotos = [];
|
|||
|
|
let equipGalleryIndex = 0;
|
|||
|
|
let equipGalleryName = '';
|
|||
|
|
let equipGalleryEquipId = ''; // library id of the gear in the open lightbox (for issue history + reporting)
|
|||
|
|
let equipGalleryNoteHtml = ''; // rendered note, re-applied on every photo so a load error never loses it
|
|||
|
|
function renderEquipThumbs() {
|
|||
|
|
if (!equipThumbs) return;
|
|||
|
|
const multi = equipGalleryPhotos.length > 1;
|
|||
|
|
equipThumbs.style.display = multi ? '' : 'none';
|
|||
|
|
if (equipPrev) equipPrev.style.display = multi ? '' : 'none';
|
|||
|
|
if (equipNext) equipNext.style.display = multi ? '' : 'none';
|
|||
|
|
if (!multi) { equipThumbs.innerHTML = ''; return; }
|
|||
|
|
equipThumbs.innerHTML = equipGalleryPhotos.map((p, i) => {
|
|||
|
|
const active = i === equipGalleryIndex ? ' active' : '';
|
|||
|
|
if (isVideoUrl(p.url)) {
|
|||
|
|
return `<button class="equip-thumb-btn equip-thumb-vid${active}" type="button" data-i="${i}" title="${escapeAttr(p.caption || ('Video ' + (i + 1)))}" aria-label="Video ${i + 1}"><span aria-hidden="true">▶</span></button>`;
|
|||
|
|
}
|
|||
|
|
return `<button class="equip-thumb-btn${active}" type="button" data-i="${i}" title="${escapeAttr(p.caption || ('Photo ' + (i + 1)))}">
|
|||
|
|
<img src="${escapeAttr(normalizeImageUrl(p.url))}" alt="" draggable="false" loading="lazy" decoding="async" />
|
|||
|
|
</button>`;
|
|||
|
|
}).join('');
|
|||
|
|
}
|
|||
|
|
function equipShowPhoto(i) {
|
|||
|
|
if (!equipGalleryPhotos.length) return;
|
|||
|
|
equipGalleryIndex = Math.max(0, Math.min(equipGalleryPhotos.length - 1, i));
|
|||
|
|
const p = equipGalleryPhotos[equipGalleryIndex];
|
|||
|
|
if (equipCaption) {
|
|||
|
|
const cap = (p.caption || '').trim();
|
|||
|
|
const counter = equipGalleryPhotos.length > 1 ? `<span class="equip-caption-count">${equipGalleryIndex + 1}/${equipGalleryPhotos.length}</span>` : '';
|
|||
|
|
equipCaption.innerHTML = (cap ? `<span class="equip-caption-text">${escapeHtml(cap)}</span>` : '') + counter;
|
|||
|
|
equipCaption.style.display = (cap || counter) ? '' : 'none';
|
|||
|
|
}
|
|||
|
|
if (equipThumbs) [...equipThumbs.children].forEach((t, idx) => t.classList.toggle('active', idx === equipGalleryIndex));
|
|||
|
|
if (equipPrev) equipPrev.disabled = equipGalleryIndex <= 0;
|
|||
|
|
if (equipNext) equipNext.disabled = equipGalleryIndex >= equipGalleryPhotos.length - 1;
|
|||
|
|
// Re-apply the note on every photo — this restores it if a previous photo's
|
|||
|
|
// load error had replaced it, so navigating back never loses troubleshooting steps.
|
|||
|
|
if (equipModalNote) equipModalNote.innerHTML = equipGalleryNoteHtml;
|
|||
|
|
if (isVideoUrl(p.url)) {
|
|||
|
|
// Video item → inline player, skip the image zoom stage entirely.
|
|||
|
|
if (equipStage) equipStage.style.display = 'none';
|
|||
|
|
const v = equipVideo();
|
|||
|
|
v.style.display = 'block'; // explicit — the CSS default is display:none
|
|||
|
|
v.src = normalizeImageUrl(p.url);
|
|||
|
|
} else {
|
|||
|
|
equipHideVideo();
|
|||
|
|
if (equipStage) equipStage.style.display = '';
|
|||
|
|
equipZoom.load(normalizeImageUrl(p.url), equipGalleryName, () => {
|
|||
|
|
if (equipStage) equipStage.style.display = 'none';
|
|||
|
|
// Show the load error ABOVE the note (keep the note — nav to a good photo clears the error).
|
|||
|
|
const err = "<p>⚠️ Couldn't load this photo. Use a public JPG or PNG link — HEIC files don't display in browsers, and a Google Drive file must be shared “Anyone with the link.”</p>";
|
|||
|
|
if (equipModalNote) equipModalNote.innerHTML = err + (equipGalleryNoteHtml || '');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Called by the zoom controller on a horizontal swipe when the photo is at fit.
|
|||
|
|
function equipHandleSwipe(dir) {
|
|||
|
|
if (equipGalleryPhotos.length < 2) return;
|
|||
|
|
equipShowPhoto(equipGalleryIndex + dir);
|
|||
|
|
}
|
|||
|
|
function openEquipLightbox(name, photos, note, equipId, docs) {
|
|||
|
|
if (!equipModal) return;
|
|||
|
|
equipGalleryName = name || 'Equipment';
|
|||
|
|
equipGalleryEquipId = equipId ? String(equipId) : '';
|
|||
|
|
if (equipModalName) equipModalName.textContent = equipGalleryName;
|
|||
|
|
// Normalize + drop empties; accept an array or a single {url,caption}/string.
|
|||
|
|
equipGalleryPhotos = (Array.isArray(photos) ? photos : (photos ? [photos] : []))
|
|||
|
|
.map((p) => (p && typeof p === 'object') ? { url: String(p.url || ''), caption: String(p.caption || '') } : { url: String(p || ''), caption: '' })
|
|||
|
|
.filter((p) => p.url);
|
|||
|
|
equipGalleryIndex = 0;
|
|||
|
|
equipHideVideo(); // clear any prior video before (re)opening
|
|||
|
|
const has = equipGalleryPhotos.length > 0;
|
|||
|
|
// Attached documents render under the note (and survive photo-nav re-applies,
|
|||
|
|
// because they're part of equipGalleryNoteHtml).
|
|||
|
|
const docsHtml = (Array.isArray(docs) && docs.length)
|
|||
|
|
? '<div class="equip-docs">' + docs.map((d) => {
|
|||
|
|
const isUpload = String(d.url || '').indexOf('/doc-files/') === 0;
|
|||
|
|
return `<a${isUpload ? ' class="doc-link"' : ''} href="${escapeAttr(window.CHECKLIST_NATIVE ? window.CHECKLIST_NATIVE.resolveUrl(d.url) : d.url)}" target="_blank" rel="noopener noreferrer">${isUpload ? '' : '🔗 '}${escapeHtml(d.name || 'Document')}</a>`;
|
|||
|
|
}).join('') + '</div>'
|
|||
|
|
: '';
|
|||
|
|
equipGalleryNoteHtml = (note ? renderDescription(note) : '') + docsHtml;
|
|||
|
|
if (equipModalNote) equipModalNote.innerHTML = equipGalleryNoteHtml || (has ? '' : '<p>No photo added yet.</p>');
|
|||
|
|
if (equipStage) equipStage.style.display = has ? '' : 'none';
|
|||
|
|
if (equipCaption) equipCaption.style.display = 'none';
|
|||
|
|
renderEquipThumbs();
|
|||
|
|
renderEquipIssues(equipGalleryEquipId); // known-issue history for this gear
|
|||
|
|
equipModal.style.display = 'flex';
|
|||
|
|
if (has) { equipShowPhoto(0); equipZoom.showHint(); } // hint once on open, not per photo
|
|||
|
|
}
|
|||
|
|
function closeEquipLightbox() { equipHideVideo(); if (equipModal) closeOverlay(equipModal); }
|
|||
|
|
|
|||
|
|
// ─── Equipment library manager (master) ─────────────────────────
|
|||
|
|
async function openEquipMgmt() {
|
|||
|
|
if (!equipMgmtModal) return;
|
|||
|
|
equipMgmtError.style.display = 'none';
|
|||
|
|
resetEquipForm();
|
|||
|
|
if (equipSearch) equipSearch.value = '';
|
|||
|
|
equipMgmtModal.style.display = 'flex';
|
|||
|
|
equipMgmtList.innerHTML = '<div class="empty-state" style="padding:8px;">Loading…</div>';
|
|||
|
|
try { equipItems = (await apiGet('/api/admin/equipment')).items || {}; }
|
|||
|
|
catch (err) { equipMgmtList.innerHTML = `<div class="empty-state" style="padding:8px;">Failed to load: ${escapeHtml(err.message)}</div>`; return; }
|
|||
|
|
drawEquipList();
|
|||
|
|
}
|
|||
|
|
// One equipment row's HTML (used inside the location groups).
|
|||
|
|
function equipRowHtml(e) {
|
|||
|
|
const aliases = (e.aliases || []).length ? `<span class="user-row-tag">aka ${escapeHtml(e.aliases.join(', '))}</span>` : '';
|
|||
|
|
const note = e.note ? `<span class="user-row-tag empty">${escapeHtml(e.note)}</span>` : '';
|
|||
|
|
// Locations are shown by the group header; on the row show team scope only.
|
|||
|
|
const teamTags = (e.scopeTeams || []).map((s) => `<span class="user-row-tag">${escapeHtml(s)} team</span>`);
|
|||
|
|
const noScope = !(e.scopeLocations || []).length && !(e.scopeTeams || []).length;
|
|||
|
|
const nPhotos = equipPhotosOf(e).length;
|
|||
|
|
const photoTag = nPhotos > 1 ? `<span class="user-row-tag">📷 ${nPhotos} photos</span>` : '';
|
|||
|
|
const nDocs = (e.docs || []).length;
|
|||
|
|
const docTag = nDocs ? `<span class="user-row-tag">📎 ${nDocs} doc${nDocs === 1 ? '' : 's'}</span>` : '';
|
|||
|
|
const scope = (teamTags.length ? teamTags.join('') : (noScope ? '<span class="user-row-tag empty">everywhere</span>' : '')) + photoTag + docTag;
|
|||
|
|
const thumb = e.image
|
|||
|
|
? `<img class="equip-thumb" src="${escapeAttr(normalizeImageUrl(e.image))}" alt="" loading="lazy" decoding="async" />`
|
|||
|
|
: '<span class="equip-thumb equip-thumb-empty">no photo</span>';
|
|||
|
|
const eid = escapeAttr(e.id);
|
|||
|
|
// Execs can SEE gear that overlaps their scope but only EDIT gear fully
|
|||
|
|
// within it (server sets _canManage). View-only rows get no action buttons.
|
|||
|
|
const canManage = e._canManage !== false;
|
|||
|
|
const actions = canManage
|
|||
|
|
? `<div class="user-row-actions">
|
|||
|
|
<button class="btn btn-secondary btn-small" data-equip-action="edit" data-equip-id="${eid}">Edit</button>
|
|||
|
|
<button class="btn btn-danger btn-small" data-equip-action="del" data-equip-id="${eid}">Delete</button>
|
|||
|
|
</div>`
|
|||
|
|
: '<div class="user-row-actions"><span class="user-row-tag empty">view only</span></div>';
|
|||
|
|
return `
|
|||
|
|
<div class="user-row" data-equip-id="${eid}">
|
|||
|
|
<div class="user-row-main equip-row-main">
|
|||
|
|
${thumb}
|
|||
|
|
<div>
|
|||
|
|
<div class="user-row-name">${escapeHtml(e.name)}</div>
|
|||
|
|
<div class="user-row-meta">${scope}${aliases}${note}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
${actions}
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Equipment manager list, grouped into a collapsible tree by location (an item
|
|||
|
|
// scoped to several campuses appears under each; un-scoped items go under
|
|||
|
|
// "Everywhere"). Search filters first and auto-expands so matches are visible.
|
|||
|
|
const EQUIP_EVERYWHERE = '🌐 Everywhere';
|
|||
|
|
function drawEquipList() {
|
|||
|
|
if (!equipMgmtList) return;
|
|||
|
|
const q = ((equipSearch && equipSearch.value) || '').trim().toLowerCase();
|
|||
|
|
let entries = Object.keys(equipItems).map((id) => equipItems[id]);
|
|||
|
|
if (q) entries = entries.filter((e) => (e.name + ' ' + (e.aliases || []).join(' ')).toLowerCase().includes(q));
|
|||
|
|
entries.sort((a, b) => (a.name || '').toLowerCase().localeCompare((b.name || '').toLowerCase()));
|
|||
|
|
if (!entries.length) {
|
|||
|
|
equipMgmtList.innerHTML = `<div class="empty-state" style="padding:8px;">${Object.keys(equipItems).length ? 'No equipment matches.' : 'No equipment yet. Add some below.'}</div>`;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const groups = {};
|
|||
|
|
entries.forEach((e) => {
|
|||
|
|
const locs = (e.scopeLocations || []).map((s) => String(s).trim()).filter(Boolean);
|
|||
|
|
if (!locs.length) (groups[EQUIP_EVERYWHERE] = groups[EQUIP_EVERYWHERE] || []).push(e);
|
|||
|
|
else locs.forEach((loc) => (groups[loc] = groups[loc] || []).push(e));
|
|||
|
|
});
|
|||
|
|
const names = Object.keys(groups).sort((a, b) => {
|
|||
|
|
if (a === EQUIP_EVERYWHERE) return 1; // keep "Everywhere" last
|
|||
|
|
if (b === EQUIP_EVERYWHERE) return -1;
|
|||
|
|
return a.localeCompare(b);
|
|||
|
|
});
|
|||
|
|
const searching = !!q;
|
|||
|
|
// Collapsed groups are RENDERED but hidden (.closed) — so expanding/collapsing
|
|||
|
|
// is a class flip in handleEquipListClick, never an innerHTML rebuild. Rebuilding
|
|||
|
|
// on every toggle re-created every photo thumbnail and made the tree feel glacial.
|
|||
|
|
equipMgmtList.innerHTML = names.map((loc) => {
|
|||
|
|
const arr = groups[loc];
|
|||
|
|
const closed = !searching && !!equipTreeCollapsed[loc];
|
|||
|
|
const head = `<div class="equip-tree-head" data-equip-tree-toggle="${escapeAttr(loc)}">
|
|||
|
|
<span class="tree-caret">${closed ? '▸' : '▾'}</span>
|
|||
|
|
<span class="tree-label">${escapeHtml(loc)}</span>
|
|||
|
|
<span class="tree-count">${arr.length}</span></div>`;
|
|||
|
|
const body = `<div class="equip-tree-group${closed ? ' closed' : ''}">${arr.map(equipRowHtml).join('')}</div>`;
|
|||
|
|
return head + body;
|
|||
|
|
}).join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ── Manager photo gallery (add multiple, caption each, remove, reorder) ──
|
|||
|
|
function renderEquipPhotos() {
|
|||
|
|
if (!equipPhotos) return;
|
|||
|
|
if (!equipFormPhotos.length) {
|
|||
|
|
equipPhotos.innerHTML = '<div class="equip-photos-empty">No photos yet — add the device, its desktop/config, etc. below.</div>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
equipPhotos.innerHTML = equipFormPhotos.map((p, i) => {
|
|||
|
|
const thumb = isVideoUrl(p.url)
|
|||
|
|
? `<span class="equip-photo-thumb equip-photo-vid" aria-hidden="true">▶</span>`
|
|||
|
|
: `<img class="equip-photo-thumb" src="${escapeAttr(normalizeImageUrl(p.url))}" alt="" draggable="false" loading="lazy" decoding="async" />`;
|
|||
|
|
return `
|
|||
|
|
<div class="equip-photo" draggable="true" data-equip-photo="${i}">
|
|||
|
|
<span class="equip-photo-handle" title="Drag to reorder">⋮⋮</span>
|
|||
|
|
${thumb}
|
|||
|
|
<input class="equip-photo-caption" type="text" maxlength="120" data-equip-photo-cap="${i}"
|
|||
|
|
value="${escapeAttr(p.caption || '')}" placeholder="Label (e.g. Device, Desktop layout)" />
|
|||
|
|
<button class="equip-photo-remove" type="button" data-equip-photo-remove="${i}" aria-label="Remove" title="Remove">✕</button>
|
|||
|
|
</div>`;
|
|||
|
|
}).join('');
|
|||
|
|
}
|
|||
|
|
function addEquipPhoto(url, caption) {
|
|||
|
|
const u = String(url || '').trim();
|
|||
|
|
if (!u) return;
|
|||
|
|
if (equipFormPhotos.some((p) => p.url === u)) { renderEquipPhotos(); return; } // no dupes
|
|||
|
|
if (equipFormPhotos.length >= 12) { equipMgmtError.textContent = 'Up to 12 photos per item.'; equipMgmtError.style.display = 'block'; return; }
|
|||
|
|
equipFormPhotos.push({ url: u, caption: String(caption || '') });
|
|||
|
|
renderEquipPhotos();
|
|||
|
|
}
|
|||
|
|
function addEquipUrlFromInput() {
|
|||
|
|
if (!equipImage) return;
|
|||
|
|
const url = (equipImage.value || '').trim();
|
|||
|
|
if (!url) return;
|
|||
|
|
addEquipPhoto(url, '');
|
|||
|
|
equipImage.value = '';
|
|||
|
|
equipImage.focus();
|
|||
|
|
}
|
|||
|
|
// ── Manager attached-documents editor (📎 uploads + pasted links) ──
|
|||
|
|
function renderEquipDocs() {
|
|||
|
|
if (!equipDocs) return;
|
|||
|
|
if (!equipFormDocs.length) { equipDocs.innerHTML = ''; return; }
|
|||
|
|
equipDocs.innerHTML = equipFormDocs.map((d, i) => `
|
|||
|
|
<div class="equip-doc">
|
|||
|
|
<span class="equip-doc-ico" aria-hidden="true">${d.url.indexOf('/doc-files/') === 0 ? '📄' : '🔗'}</span>
|
|||
|
|
<input class="equip-doc-name" type="text" maxlength="80" data-equip-doc-name="${i}"
|
|||
|
|
value="${escapeAttr(d.name || '')}" placeholder="Name (what people see)" />
|
|||
|
|
<button class="equip-photo-remove" type="button" data-equip-doc-remove="${i}" aria-label="Remove document" title="Remove">✕</button>
|
|||
|
|
</div>`).join('');
|
|||
|
|
}
|
|||
|
|
function addEquipDoc(url, name) {
|
|||
|
|
const u = String(url || '').trim();
|
|||
|
|
if (!u) return;
|
|||
|
|
if (equipFormDocs.some((d) => d.url === u)) { renderEquipDocs(); return; } // no dupes
|
|||
|
|
if (equipFormDocs.length >= 10) { equipMgmtError.textContent = 'Up to 10 documents per item.'; equipMgmtError.style.display = 'block'; return; }
|
|||
|
|
equipFormDocs.push({ url: u, name: String(name || '').trim() });
|
|||
|
|
renderEquipDocs();
|
|||
|
|
}
|
|||
|
|
function addEquipDocUrlFromInput() {
|
|||
|
|
if (!equipDocUrl) return;
|
|||
|
|
const url = (equipDocUrl.value || '').trim();
|
|||
|
|
if (!url) return;
|
|||
|
|
if (!/^https?:\/\//i.test(url)) { equipMgmtError.textContent = 'Paste a full link starting with http(s)://'; equipMgmtError.style.display = 'block'; return; }
|
|||
|
|
equipMgmtError.style.display = 'none';
|
|||
|
|
let name = 'Link';
|
|||
|
|
try { const h = new URL(url).hostname.replace(/^www\./, ''); name = h === 'docs.google.com' ? 'Google Doc' : h; } catch (_) {}
|
|||
|
|
addEquipDoc(url, name);
|
|||
|
|
equipDocUrl.value = '';
|
|||
|
|
const inp = equipDocs && equipDocs.querySelector(`input[data-equip-doc-name="${equipFormDocs.length - 1}"]`);
|
|||
|
|
if (inp) { inp.focus(); inp.select(); } // name it right away
|
|||
|
|
}
|
|||
|
|
async function handleEquipDocFile() {
|
|||
|
|
const file = equipDocFile && equipDocFile.files && equipDocFile.files[0];
|
|||
|
|
if (equipDocFile) equipDocFile.value = ''; // same file can be re-picked later
|
|||
|
|
if (!file) return;
|
|||
|
|
if (file.size > 25 * 1024 * 1024) { equipMgmtError.textContent = 'File too large (max 25 MB).'; equipMgmtError.style.display = 'block'; return; }
|
|||
|
|
equipMgmtError.style.display = 'none';
|
|||
|
|
if (equipUploadStatus) equipUploadStatus.textContent = 'Uploading ' + file.name + '…';
|
|||
|
|
try {
|
|||
|
|
const dataUrl = await new Promise((resolve) => {
|
|||
|
|
const r = new FileReader();
|
|||
|
|
r.onload = () => resolve(r.result);
|
|||
|
|
r.onerror = () => resolve(null);
|
|||
|
|
r.readAsDataURL(file);
|
|||
|
|
});
|
|||
|
|
if (!dataUrl) throw new Error('Could not read that file');
|
|||
|
|
const res = await apiPost('/api/documents/upload', { dataUrl, name: file.name });
|
|||
|
|
addEquipDoc(res.path, res.name || file.name);
|
|||
|
|
if (equipUploadStatus) equipUploadStatus.textContent = '';
|
|||
|
|
} catch (err) {
|
|||
|
|
if (equipUploadStatus) equipUploadStatus.textContent = '';
|
|||
|
|
equipMgmtError.textContent = 'Upload failed: ' + err.message;
|
|||
|
|
equipMgmtError.style.display = 'block';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Drag-reorder the gallery thumbnails (desktop). Touch users add/remove instead.
|
|||
|
|
let equipDragFrom = -1;
|
|||
|
|
function setupEquipPhotoReorder() {
|
|||
|
|
equipPhotos.addEventListener('dragstart', (e) => {
|
|||
|
|
const el = e.target.closest('.equip-photo'); if (!el) return;
|
|||
|
|
equipDragFrom = parseInt(el.getAttribute('data-equip-photo'), 10);
|
|||
|
|
e.dataTransfer.effectAllowed = 'move';
|
|||
|
|
try { e.dataTransfer.setData('text/plain', String(equipDragFrom)); } catch (_) {}
|
|||
|
|
el.classList.add('dragging');
|
|||
|
|
});
|
|||
|
|
equipPhotos.addEventListener('dragover', (e) => { if (equipDragFrom >= 0) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; } });
|
|||
|
|
equipPhotos.addEventListener('drop', (e) => {
|
|||
|
|
if (equipDragFrom < 0) return;
|
|||
|
|
e.preventDefault();
|
|||
|
|
const el = e.target.closest('.equip-photo');
|
|||
|
|
// Drop on a thumbnail → insert before it; drop in the gap/empty area → append.
|
|||
|
|
let to = el ? parseInt(el.getAttribute('data-equip-photo'), 10) : equipFormPhotos.length;
|
|||
|
|
const [moved] = equipFormPhotos.splice(equipDragFrom, 1);
|
|||
|
|
if (to > equipDragFrom) to--; // the removed item shifted everything after it down by one
|
|||
|
|
equipFormPhotos.splice(Math.max(0, Math.min(equipFormPhotos.length, to)), 0, moved);
|
|||
|
|
equipDragFrom = -1;
|
|||
|
|
renderEquipPhotos();
|
|||
|
|
});
|
|||
|
|
equipPhotos.addEventListener('dragend', () => { equipDragFrom = -1; equipPhotos.querySelectorAll('.equip-photo.dragging').forEach((el) => el.classList.remove('dragging')); });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Re-encode a picked image to a small JPEG data URL (max side ~1600px). This
|
|||
|
|
// keeps uploads tiny and normalizes format — and harmlessly fails on HEIC,
|
|||
|
|
// which browsers can't decode, so we can warn instead of storing a dud.
|
|||
|
|
function downscaleImage(file, maxDim, quality) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const url = URL.createObjectURL(file);
|
|||
|
|
const img = new Image();
|
|||
|
|
img.onload = () => {
|
|||
|
|
URL.revokeObjectURL(url);
|
|||
|
|
const W = img.naturalWidth, H = img.naturalHeight;
|
|||
|
|
if (!W || !H) { reject(new Error('Could not read that image.')); return; }
|
|||
|
|
const scale = Math.min(1, maxDim / Math.max(W, H));
|
|||
|
|
const w = Math.max(1, Math.round(W * scale));
|
|||
|
|
const h = Math.max(1, Math.round(H * scale));
|
|||
|
|
const canvas = document.createElement('canvas');
|
|||
|
|
canvas.width = w; canvas.height = h;
|
|||
|
|
canvas.getContext('2d').drawImage(img, 0, 0, w, h);
|
|||
|
|
resolve(canvas.toDataURL('image/jpeg', quality));
|
|||
|
|
};
|
|||
|
|
img.onerror = () => { URL.revokeObjectURL(url); reject(new Error('Browsers can’t open this image type (HEIC won’t work). Use a JPG or PNG — or set iPhone Camera → Formats → “Most Compatible.”')); };
|
|||
|
|
img.src = url;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Read a Blob/File as a data URL WITHOUT touching the pixels (no canvas round-trip) —
|
|||
|
|
// preserves the original bytes EXACTLY, so full resolution survives and PNG/WebP keep
|
|||
|
|
// their crisp text/line-art and alpha (a canvas re-encode would flatten and soften them).
|
|||
|
|
function blobToDataUrl(blob) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const fr = new FileReader();
|
|||
|
|
fr.onload = () => resolve(fr.result);
|
|||
|
|
fr.onerror = () => reject(new Error('Could not read that file.'));
|
|||
|
|
fr.readAsDataURL(blob);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// Largest original we upload untouched. Bigger sources are transcoded down so the request
|
|||
|
|
// body stays within the server's budget. MUST stay <= the server's decoded cap (20 MB) —
|
|||
|
|
// 20 MB base64-encodes to ~26.7 MB, comfortably under the upload route's 30 MB body limit.
|
|||
|
|
const EQUIP_PRESERVE_MAX_BYTES = 20 * 1024 * 1024;
|
|||
|
|
// Shared path for any image source (file pick OR camera capture). Keep the ORIGINAL
|
|||
|
|
// full-resolution bytes when it's a web-displayable type within budget; only fall back to
|
|||
|
|
// a bounded 4096px / JPEG-q0.92 transcode for oversized or non-displayable sources. That
|
|||
|
|
// fallback (downscaleImage) also surfaces the friendly HEIC message via its img.onerror.
|
|||
|
|
const MAX_VIDEO_UPLOAD_BYTES = 30 * 1024 * 1024; // must match the server's MAX_VIDEO_BYTES
|
|||
|
|
async function uploadEquipImageBlob(blob) {
|
|||
|
|
if (!blob) return false;
|
|||
|
|
equipMgmtError.style.display = 'none';
|
|||
|
|
const type = (blob.type || '').toLowerCase();
|
|||
|
|
const isVid = type.startsWith('video/');
|
|||
|
|
if (equipUploadStatus) equipUploadStatus.textContent = isVid ? 'Processing video…' : 'Processing photo…';
|
|||
|
|
try {
|
|||
|
|
let dataUrl;
|
|||
|
|
if (isVid) {
|
|||
|
|
// Videos can't be canvas-transcoded — send the raw bytes, but hold the
|
|||
|
|
// size line client-side so we fail fast with a friendly message.
|
|||
|
|
if (!/^video\/(mp4|webm|quicktime|ogg)$/.test(type)) throw new Error('Use an MP4, WEBM, or MOV video (that format won’t play in browsers).');
|
|||
|
|
if (blob.size > MAX_VIDEO_UPLOAD_BYTES) throw new Error('Video is too large (max 30 MB). Trim it or lower the resolution.');
|
|||
|
|
dataUrl = await blobToDataUrl(blob);
|
|||
|
|
} else {
|
|||
|
|
const displayable = /^image\/(jpeg|png|webp|gif)$/.test(type);
|
|||
|
|
dataUrl = (displayable && blob.size <= EQUIP_PRESERVE_MAX_BYTES)
|
|||
|
|
? await blobToDataUrl(blob) // original — full resolution, lossless
|
|||
|
|
: await downscaleImage(blob, 4096, 0.92); // oversized/unknown → bounded transcode
|
|||
|
|
}
|
|||
|
|
if (equipUploadStatus) equipUploadStatus.textContent = 'Uploading…';
|
|||
|
|
const res = await apiPost('/api/equipment/upload-image', { dataUrl });
|
|||
|
|
addEquipPhoto(res.path, '');
|
|||
|
|
if (equipUploadStatus) equipUploadStatus.textContent = (isVid ? 'Video' : 'Photo') + ' added ✓';
|
|||
|
|
return true;
|
|||
|
|
} catch (err) {
|
|||
|
|
if (equipUploadStatus) equipUploadStatus.textContent = '';
|
|||
|
|
equipMgmtError.textContent = err.message; equipMgmtError.style.display = 'block';
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
async function handleEquipFile(ev) {
|
|||
|
|
const file = ev.target.files && ev.target.files[0];
|
|||
|
|
if (!file) return;
|
|||
|
|
try { await uploadEquipImageBlob(file); }
|
|||
|
|
finally { if (equipFile) equipFile.value = ''; } // let them re-pick the same file
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── In-app camera capture (getUserMedia) ───────────────────────────
|
|||
|
|
// Lets you snap a photo on the spot from any device — desktop included, where
|
|||
|
|
// the OS file dialog can't reach the camera. On phones/tablets "Choose photo"
|
|||
|
|
// already offers the camera, but this works there too.
|
|||
|
|
let equipCamStream = null;
|
|||
|
|
let equipCamFacing = 'environment'; // rear camera by default
|
|||
|
|
function stopEquipCamStream() {
|
|||
|
|
if (equipCamStream) { equipCamStream.getTracks().forEach((t) => t.stop()); equipCamStream = null; }
|
|||
|
|
if (equipCamVideo) equipCamVideo.srcObject = null;
|
|||
|
|
}
|
|||
|
|
async function startEquipCamStream() {
|
|||
|
|
stopEquipCamStream();
|
|||
|
|
if (equipCamError) { equipCamError.style.display = 'none'; equipCamError.textContent = ''; }
|
|||
|
|
try {
|
|||
|
|
// Ask for the highest resolution the device offers (ideal, so it never errors —
|
|||
|
|
// just falls back to the best available). Phone browsers cap getUserMedia around
|
|||
|
|
// 1080p; for true full-sensor 4K on a phone, "Add photo" → the native camera is best.
|
|||
|
|
equipCamStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: equipCamFacing, width: { ideal: 3840 }, height: { ideal: 2160 } }, audio: false });
|
|||
|
|
if (equipCamVideo) { equipCamVideo.srcObject = equipCamStream; await equipCamVideo.play().catch(() => {}); }
|
|||
|
|
} catch (err) {
|
|||
|
|
if (equipCamError) {
|
|||
|
|
equipCamError.textContent = 'Could not open the camera (' + ((err && err.name) || 'error') + '). Allow camera access in your browser, or use “Choose photo.”';
|
|||
|
|
equipCamError.style.display = 'block';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
async function openEquipCamera() {
|
|||
|
|
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
|
|||
|
|
equipMgmtError.textContent = 'This browser can’t open the camera. Use “Choose photo” instead.';
|
|||
|
|
equipMgmtError.style.display = 'block';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (equipCamModal) equipCamModal.style.display = 'flex';
|
|||
|
|
await startEquipCamStream();
|
|||
|
|
}
|
|||
|
|
function closeEquipCamera() {
|
|||
|
|
stopEquipCamStream();
|
|||
|
|
if (equipCamModal) closeOverlay(equipCamModal);
|
|||
|
|
}
|
|||
|
|
async function switchEquipCamera() {
|
|||
|
|
equipCamFacing = (equipCamFacing === 'environment') ? 'user' : 'environment';
|
|||
|
|
await startEquipCamStream();
|
|||
|
|
}
|
|||
|
|
async function captureEquipPhoto() {
|
|||
|
|
if (!equipCamVideo || !equipCamVideo.videoWidth) return;
|
|||
|
|
const canvas = document.createElement('canvas');
|
|||
|
|
canvas.width = equipCamVideo.videoWidth;
|
|||
|
|
canvas.height = equipCamVideo.videoHeight;
|
|||
|
|
canvas.getContext('2d').drawImage(equipCamVideo, 0, 0, canvas.width, canvas.height);
|
|||
|
|
closeEquipCamera(); // stop the stream + hide before the (async) upload
|
|||
|
|
await new Promise((resolve) => {
|
|||
|
|
// Single high-quality encode; uploadEquipImageBlob preserves these bytes as-is
|
|||
|
|
// (no second downscale), so the capture is no longer double-compressed.
|
|||
|
|
canvas.toBlob((blob) => { uploadEquipImageBlob(blob).finally(resolve); }, 'image/jpeg', 0.95);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Which locations/teams may the current user scope equipment to?
|
|||
|
|
// Options come from the union of the directory AND every location/team that
|
|||
|
|
// actually has a list — so a campus with lists but no team login (e.g. a
|
|||
|
|
// second site) is still selectable for its own on-site photos.
|
|||
|
|
function equipAllowedScope() {
|
|||
|
|
const dir = checklistData.directory || { locations: [], teams: [] };
|
|||
|
|
const lc = (s) => String(s || '').toLowerCase();
|
|||
|
|
const union = (fromDir, fromLists) => {
|
|||
|
|
const seen = new Map();
|
|||
|
|
fromDir.concat(fromLists).forEach((n) => { const k = lc(n); if (n && !seen.has(k)) seen.set(k, n); });
|
|||
|
|
return [...seen.values()].sort((a, b) => a.localeCompare(b));
|
|||
|
|
};
|
|||
|
|
const allLocs = union((dir.locations || []).map((l) => l.name), (checklistData.lists || []).map((l) => l.location).filter(Boolean));
|
|||
|
|
const allTeams = union((dir.teams || []).map((t) => t.name), (checklistData.lists || []).map((l) => l.team).filter(Boolean));
|
|||
|
|
if (isMasterAdmin()) return { locs: allLocs, teams: allTeams, master: true };
|
|||
|
|
// Execs: their own scope is the allowance (shown even if no list exists yet).
|
|||
|
|
const sLoc = (currentUser && currentUser.scopeLocations) || [];
|
|||
|
|
const sTeam = (currentUser && currentUser.scopeTeams) || [];
|
|||
|
|
return {
|
|||
|
|
locs: sLoc.length ? union(sLoc, []) : allLocs,
|
|||
|
|
teams: sTeam.length ? union(sTeam, []) : allTeams,
|
|||
|
|
master: false
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
function drawEquipScopeRows(selLocs, selTeams) {
|
|||
|
|
const allow = equipAllowedScope();
|
|||
|
|
const on = (arr, name) => (arr || []).some((s) => String(s).toLowerCase() === name.toLowerCase());
|
|||
|
|
const cb = (kind, name, checked) => `<label class="exec-cb"><input type="checkbox" data-equip-cb="${kind}" value="${escapeAttr(name)}" ${checked ? 'checked' : ''}/> ${escapeHtml(name)}</label>`;
|
|||
|
|
if (equipLocRow) equipLocRow.innerHTML = allow.locs.length ? allow.locs.map((n) => cb('location', n, on(selLocs, n))).join('') : '<span class="empty-state">none</span>';
|
|||
|
|
if (equipTeamRow) equipTeamRow.innerHTML = allow.teams.length ? allow.teams.map((n) => cb('team', n, on(selTeams, n))).join('') : '<span class="empty-state">none</span>';
|
|||
|
|
if (equipScopeHelp) equipScopeHelp.innerHTML = allow.master
|
|||
|
|
? 'Where it appears — check location(s)/team(s), or leave both empty for everywhere.'
|
|||
|
|
: 'Where it appears — check at least one of your location(s)/team(s).';
|
|||
|
|
}
|
|||
|
|
function getEquipScopeFromForm() {
|
|||
|
|
const locs = equipLocRow ? [...equipLocRow.querySelectorAll('input[data-equip-cb="location"]:checked')].map((i) => i.value) : [];
|
|||
|
|
const teams = equipTeamRow ? [...equipTeamRow.querySelectorAll('input[data-equip-cb="team"]:checked')].map((i) => i.value) : [];
|
|||
|
|
return { scopeLocations: locs, scopeTeams: teams };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Expand/collapse the add-equipment form (progressive disclosure). Opening scrolls
|
|||
|
|
// it into view so the fields are visible even at the bottom of a long list.
|
|||
|
|
function setEquipAddOpen(open) {
|
|||
|
|
if (!equipAddSection) return;
|
|||
|
|
equipAddSection.classList.toggle('open', !!open);
|
|||
|
|
if (equipAddToggle) equipAddToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
|||
|
|
if (open) requestAnimationFrame(() => { try { equipAddSection.scrollIntoView({ block: 'nearest', behavior: prefersReduced() ? 'auto' : 'smooth' }); } catch (_) {} });
|
|||
|
|
}
|
|||
|
|
function resetEquipForm() {
|
|||
|
|
equipEditId = null;
|
|||
|
|
if (equipName) equipName.value = '';
|
|||
|
|
if (equipAliases) equipAliases.value = '';
|
|||
|
|
if (equipNote) equipNote.value = '';
|
|||
|
|
if (equipFile) equipFile.value = '';
|
|||
|
|
if (equipImage) equipImage.value = '';
|
|||
|
|
if (equipUploadStatus) equipUploadStatus.textContent = '';
|
|||
|
|
if (equipDocFile) equipDocFile.value = '';
|
|||
|
|
if (equipDocUrl) equipDocUrl.value = '';
|
|||
|
|
equipFormPhotos = [];
|
|||
|
|
renderEquipPhotos();
|
|||
|
|
equipFormDocs = [];
|
|||
|
|
renderEquipDocs();
|
|||
|
|
drawEquipScopeRows([], []);
|
|||
|
|
if (equipSave) equipSave.textContent = 'Add equipment';
|
|||
|
|
if (equipFormTitle) equipFormTitle.textContent = 'Add equipment';
|
|||
|
|
if (equipCancelEdit) equipCancelEdit.style.display = 'none';
|
|||
|
|
setEquipAddOpen(false); // collapse back to the list-first view
|
|||
|
|
}
|
|||
|
|
async function saveEquipment() {
|
|||
|
|
equipMgmtError.style.display = 'none';
|
|||
|
|
const scope = getEquipScopeFromForm();
|
|||
|
|
// A URL left typed in the field but not yet "Add"ed still counts — fold it in.
|
|||
|
|
const pending = equipImage ? (equipImage.value || '').trim() : '';
|
|||
|
|
const images = equipFormPhotos.slice();
|
|||
|
|
if (pending && images.length < 12 && !images.some((p) => p.url === pending)) images.push({ url: pending, caption: '' });
|
|||
|
|
const body = {
|
|||
|
|
name: (equipName.value || '').trim(),
|
|||
|
|
aliases: (equipAliases.value || '').trim(),
|
|||
|
|
images: images.map((p) => ({ url: p.url, caption: p.caption || '' })),
|
|||
|
|
docs: equipFormDocs.map((d) => ({ url: d.url, name: (d.name || '').trim() })),
|
|||
|
|
note: (equipNote.value || '').trim(),
|
|||
|
|
scopeLocations: scope.scopeLocations,
|
|||
|
|
scopeTeams: scope.scopeTeams
|
|||
|
|
};
|
|||
|
|
if (!body.name) { equipMgmtError.textContent = 'Name is required.'; equipMgmtError.style.display = 'block'; return; }
|
|||
|
|
if (!isMasterAdmin()) {
|
|||
|
|
// Match the server's intersection rule: on each axis the exec is
|
|||
|
|
// restricted on, they must pick at least one value (leaving it blank
|
|||
|
|
// would mean "everywhere" on that axis — outside their area).
|
|||
|
|
const restrictedLoc = ((currentUser && currentUser.scopeLocations) || []).length > 0;
|
|||
|
|
const restrictedTeam = ((currentUser && currentUser.scopeTeams) || []).length > 0;
|
|||
|
|
if (restrictedLoc && !body.scopeLocations.length) {
|
|||
|
|
equipMgmtError.textContent = 'Pick at least one of your locations for this equipment.'; equipMgmtError.style.display = 'block'; return;
|
|||
|
|
}
|
|||
|
|
if (restrictedTeam && !body.scopeTeams.length) {
|
|||
|
|
equipMgmtError.textContent = 'Pick at least one of your teams for this equipment.'; equipMgmtError.style.display = 'block'; return;
|
|||
|
|
}
|
|||
|
|
if (!body.scopeLocations.length && !body.scopeTeams.length) {
|
|||
|
|
equipMgmtError.textContent = 'Pick at least one location or team for this equipment.'; equipMgmtError.style.display = 'block'; return;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
if (equipEditId) await apiPut('/api/admin/equipment/' + encodeURIComponent(equipEditId), body);
|
|||
|
|
else await apiPost('/api/admin/equipment', body);
|
|||
|
|
showToast(equipEditId ? 'Equipment updated' : 'Equipment added', 'success');
|
|||
|
|
equipItems = (await apiGet('/api/admin/equipment')).items || {};
|
|||
|
|
resetEquipForm();
|
|||
|
|
drawEquipList();
|
|||
|
|
await refreshState({ showToastOnError: false }); // term-linking picks up the change everywhere
|
|||
|
|
} catch (err) { equipMgmtError.textContent = err.message; equipMgmtError.style.display = 'block'; }
|
|||
|
|
}
|
|||
|
|
async function handleEquipListClick(ev) {
|
|||
|
|
const toggle = ev.target.closest('[data-equip-tree-toggle]');
|
|||
|
|
if (toggle) {
|
|||
|
|
// Toggle IN PLACE — flip the caret and hide/show the already-rendered group.
|
|||
|
|
// No drawEquipList(): a full rebuild re-created every row + thumbnail per tap.
|
|||
|
|
const k = toggle.dataset.equipTreeToggle;
|
|||
|
|
const closed = (equipTreeCollapsed[k] = !equipTreeCollapsed[k]);
|
|||
|
|
const caret = toggle.querySelector('.tree-caret');
|
|||
|
|
if (caret) caret.textContent = closed ? '▸' : '▾';
|
|||
|
|
const body = toggle.nextElementSibling;
|
|||
|
|
if (body && body.classList.contains('equip-tree-group')) body.classList.toggle('closed', closed);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const btn = ev.target.closest('button[data-equip-action]');
|
|||
|
|
if (!btn) return;
|
|||
|
|
const id = btn.dataset.equipId;
|
|||
|
|
const action = btn.dataset.equipAction;
|
|||
|
|
if (action === 'edit') {
|
|||
|
|
const e = equipItems[id];
|
|||
|
|
if (!e) return;
|
|||
|
|
equipEditId = id;
|
|||
|
|
equipName.value = e.name || '';
|
|||
|
|
equipAliases.value = (e.aliases || []).join(', ');
|
|||
|
|
equipNote.value = e.note || '';
|
|||
|
|
if (equipImage) equipImage.value = '';
|
|||
|
|
equipFormPhotos = equipPhotosOf(e); // legacy single image → one-photo gallery
|
|||
|
|
renderEquipPhotos();
|
|||
|
|
equipFormDocs = (e.docs || []).map((d) => ({ url: d.url, name: d.name || '' }));
|
|||
|
|
renderEquipDocs();
|
|||
|
|
drawEquipScopeRows(e.scopeLocations || [], e.scopeTeams || []);
|
|||
|
|
if (equipUploadStatus) equipUploadStatus.textContent = '';
|
|||
|
|
equipSave.textContent = 'Save changes';
|
|||
|
|
if (equipFormTitle) equipFormTitle.textContent = 'Edit equipment';
|
|||
|
|
if (equipCancelEdit) equipCancelEdit.style.display = '';
|
|||
|
|
setEquipAddOpen(true); // reveal the form (it's collapsed by default)
|
|||
|
|
equipName.focus();
|
|||
|
|
} else if (action === 'del') {
|
|||
|
|
if (!confirm('Delete this equipment entry? Its word will stop being tappable.')) return;
|
|||
|
|
try {
|
|||
|
|
await apiDelete('/api/admin/equipment/' + encodeURIComponent(id));
|
|||
|
|
showToast('Equipment deleted', 'success');
|
|||
|
|
equipItems = (await apiGet('/api/admin/equipment')).items || {};
|
|||
|
|
if (equipEditId === id) resetEquipForm();
|
|||
|
|
drawEquipList();
|
|||
|
|
await refreshState({ showToastOnError: false });
|
|||
|
|
} catch (err) { equipMgmtError.textContent = err.message; equipMgmtError.style.display = 'block'; }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Event delegation for checklist items
|
|||
|
|
document.addEventListener('click', (e) => {
|
|||
|
|
const target = e.target;
|
|||
|
|
if (!(target instanceof HTMLElement)) return;
|
|||
|
|
const action = target.dataset.action;
|
|||
|
|
if (!action) return;
|
|||
|
|
const itemId = target.dataset.itemId;
|
|||
|
|
if (action === 'edit') openEditModal(itemId);
|
|||
|
|
else if (action === 'duplicate') duplicateItem(itemId);
|
|||
|
|
else if (action === 'move') { e.stopPropagation(); openMovePopover(itemId, target); }
|
|||
|
|
else if (action === 'delete') deleteItem(itemId);
|
|||
|
|
});
|
|||
|
|
document.addEventListener('change', (e) => {
|
|||
|
|
const target = e.target;
|
|||
|
|
if (!(target instanceof HTMLInputElement)) return;
|
|||
|
|
if (target.dataset.action === 'toggle') toggleItem(target.dataset.itemId, target.checked);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function renderListSelect() {
|
|||
|
|
// Only lists this account may add to: master -> all, team admin -> own team's.
|
|||
|
|
const lists = editableLists();
|
|||
|
|
if (!addTargetListId || !lists.find((l) => l.id === addTargetListId)) {
|
|||
|
|
addTargetListId = lists[0] ? lists[0].id : null;
|
|||
|
|
}
|
|||
|
|
addListSelect.innerHTML = lists.map((list) => {
|
|||
|
|
const scope = [abbrevForLocation(list.location), (list.team || '').trim()].filter(Boolean).join(' · ');
|
|||
|
|
const label = scope ? `${list.name} — ${scope}` : list.name;
|
|||
|
|
return `<option value="${escapeAttr(list.id)}" ${list.id === addTargetListId ? 'selected' : ''}>${escapeHtml(label)}</option>`;
|
|||
|
|
}).join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Overview: today-at-a-glance progress + recent activity ──────────
|
|||
|
|
// Read a list's checks from its TEAM's record (what oversight cares about),
|
|||
|
|
// falling back to the viewer's own scope for global lists.
|
|||
|
|
function listTeamChecks(list) {
|
|||
|
|
const all = checklistData.checks || {};
|
|||
|
|
const k = scopeKeyForList(list);
|
|||
|
|
if (k && all[k] && all[k][list.id]) return all[k][list.id];
|
|||
|
|
const mine = myScopeKey();
|
|||
|
|
return (mine && all[mine] && all[mine][list.id]) || {};
|
|||
|
|
}
|
|||
|
|
function overviewListStats(list) {
|
|||
|
|
const checks = listTeamChecks(list);
|
|||
|
|
const tasks = (list.items || []).filter((it) => it.kind !== 'note'); // notes aren't completable
|
|||
|
|
const total = tasks.length;
|
|||
|
|
let done = 0;
|
|||
|
|
tasks.forEach((it) => { if (checks[it.id] && checks[it.id].completed) done++; });
|
|||
|
|
return { total, done };
|
|||
|
|
}
|
|||
|
|
function openOverview() {
|
|||
|
|
if (!overviewModal || !overviewBody) return;
|
|||
|
|
drawOverview();
|
|||
|
|
overviewModal.style.display = 'flex';
|
|||
|
|
}
|
|||
|
|
function drawOverview() {
|
|||
|
|
if (!overviewModal || !overviewBody) return;
|
|||
|
|
const lists = visibleLists().filter((l) => !l.hidden); // skip hidden special-event lists
|
|||
|
|
const byLoc = {};
|
|||
|
|
lists.forEach((l) => {
|
|||
|
|
const loc = (l.location || '').trim() || 'Global';
|
|||
|
|
const team = (l.team || '').trim() || '—';
|
|||
|
|
(byLoc[loc] = byLoc[loc] || {});
|
|||
|
|
(byLoc[loc][team] = byLoc[loc][team] || []).push(l);
|
|||
|
|
});
|
|||
|
|
let html = '';
|
|||
|
|
const locNames = Object.keys(byLoc).sort((a, b) => a.localeCompare(b));
|
|||
|
|
if (!locNames.length) html = '<div class="empty-state" style="padding:10px;">No lists to show.</div>';
|
|||
|
|
locNames.forEach((loc) => {
|
|||
|
|
html += `<div class="ov-loc">${escapeHtml(loc)}</div>`;
|
|||
|
|
const teams = byLoc[loc];
|
|||
|
|
Object.keys(teams).sort((a, b) => a.localeCompare(b)).forEach((team) => {
|
|||
|
|
html += `<div class="ov-team">${escapeHtml(team)}</div>`;
|
|||
|
|
teams[team].slice().sort((a, b) => (a.name || '').localeCompare(b.name || '')).forEach((l) => {
|
|||
|
|
const s = overviewListStats(l);
|
|||
|
|
const pct = s.total ? Math.round((s.done / s.total) * 100) : 0;
|
|||
|
|
const cls = (s.total && s.done === s.total) ? 'done' : (s.done > 0 ? 'partial' : 'none');
|
|||
|
|
const dot = `<span class="ov-dot" style="background:${escapeAttr(colorHex(l.color) || '#555')}"></span>`;
|
|||
|
|
html += `<div class="ov-row ${cls}" data-overview-list="${escapeAttr(l.id)}" role="button" tabindex="0">
|
|||
|
|
${dot}<span class="ov-name">${escapeHtml(l.name)}</span>
|
|||
|
|
<span class="ov-bar"><span class="ov-fill ${cls}" style="width:${pct}%"></span></span>
|
|||
|
|
<span class="ov-count">${s.done}/${s.total}</span></div>`;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
// Recent activity across the visible lists (newest first).
|
|||
|
|
const events = [];
|
|||
|
|
lists.forEach((l) => {
|
|||
|
|
const checks = listTeamChecks(l);
|
|||
|
|
Object.keys(checks).forEach((itemId) => {
|
|||
|
|
const c = checks[itemId];
|
|||
|
|
if (!c || !c.completed || !c.completedDate) return;
|
|||
|
|
const item = (l.items || []).find((i) => i.id === itemId);
|
|||
|
|
if (!item) return;
|
|||
|
|
events.push({ at: c.completedDate, by: c.completedBy || '', title: item.title, listName: l.name });
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
events.sort((a, b) => (a.at < b.at ? 1 : (a.at > b.at ? -1 : 0)));
|
|||
|
|
html += '<div class="ov-activity-head">Recent activity</div>';
|
|||
|
|
const recent = events.slice(0, 15);
|
|||
|
|
if (!recent.length) {
|
|||
|
|
html += '<div class="empty-state" style="padding:8px;">Nothing checked yet.</div>';
|
|||
|
|
} else {
|
|||
|
|
html += recent.map((e) => `<div class="ov-act"><span class="ov-act-check">✓</span>
|
|||
|
|
<span class="ov-act-text"><b>${escapeHtml(e.title)}</b> — ${escapeHtml(e.listName)}</span>
|
|||
|
|
<span class="ov-act-meta">${e.by ? escapeHtml(e.by) + ' · ' : ''}${escapeHtml(formatStamp(e.at))}</span></div>`).join('');
|
|||
|
|
}
|
|||
|
|
overviewBody.innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Activity Log (master-only audit view of who did what, app-wide) ───
|
|||
|
|
let activityEntries = [];
|
|||
|
|
let activityTimer = null;
|
|||
|
|
async function fetchActivity() {
|
|||
|
|
const data = await apiGet('/api/admin/activity');
|
|||
|
|
return Array.isArray(data && data.activity) ? data.activity : [];
|
|||
|
|
}
|
|||
|
|
async function openActivity() {
|
|||
|
|
if (!activityModal || !activityBody) return;
|
|||
|
|
if (activitySearch) activitySearch.value = '';
|
|||
|
|
activityBody.innerHTML = '<div class="empty-state" style="padding:12px;">Loading…</div>';
|
|||
|
|
activityModal.style.display = 'flex';
|
|||
|
|
try {
|
|||
|
|
activityEntries = await fetchActivity();
|
|||
|
|
drawActivity();
|
|||
|
|
} catch (err) {
|
|||
|
|
activityBody.innerHTML = '<div class="empty-state" style="padding:12px;">Couldn’t load activity: ' + escapeHtml(err.message || 'error') + '</div>';
|
|||
|
|
}
|
|||
|
|
startActivityAutoRefresh(); // live updates while it's open — no need to close/reopen
|
|||
|
|
}
|
|||
|
|
// Poll the log every 5s while the modal is open; re-render only on change, preserving scroll.
|
|||
|
|
function startActivityAutoRefresh() {
|
|||
|
|
stopActivityAutoRefresh();
|
|||
|
|
activityTimer = setInterval(async () => {
|
|||
|
|
if (!activityModal || getComputedStyle(activityModal).display === 'none') { stopActivityAutoRefresh(); return; }
|
|||
|
|
try {
|
|||
|
|
const next = await fetchActivity();
|
|||
|
|
const changed = next.length !== activityEntries.length
|
|||
|
|
|| (next[0] && next[0].ts) !== (activityEntries[0] && activityEntries[0].ts);
|
|||
|
|
if (changed) {
|
|||
|
|
activityEntries = next;
|
|||
|
|
const keep = activityBody.scrollTop;
|
|||
|
|
drawActivity();
|
|||
|
|
activityBody.scrollTop = keep;
|
|||
|
|
}
|
|||
|
|
} catch (_) { /* transient — retry next tick */ }
|
|||
|
|
}, 5000);
|
|||
|
|
}
|
|||
|
|
function stopActivityAutoRefresh() { if (activityTimer) { clearInterval(activityTimer); activityTimer = null; } }
|
|||
|
|
function activityRoleBadge(role) {
|
|||
|
|
const label = { master: 'Admin', executive: 'Exec', 'team-admin': 'Team Admin', checker: 'Checker' }[role] || role || '';
|
|||
|
|
return '<span class="act-role act-role-' + escapeAttr(role || 'checker') + '">' + escapeHtml(label) + '</span>';
|
|||
|
|
}
|
|||
|
|
function activityIcon(kind) {
|
|||
|
|
const k = String(kind || '');
|
|||
|
|
if (k === 'check') return '✅';
|
|||
|
|
if (k === 'uncheck') return '↩️';
|
|||
|
|
if (k.endsWith('.delete')) return '🗑';
|
|||
|
|
if (k.endsWith('.create') || k === 'import') return '➕';
|
|||
|
|
if (k.endsWith('.edit') || k === 'lists.save') return '✏️';
|
|||
|
|
if (k === 'item.move') return '➡️';
|
|||
|
|
if (k === 'item.reorder') return '↕️';
|
|||
|
|
if (k === 'list.reset') return '↺';
|
|||
|
|
if (k === 'list.duplicate') return '⧉';
|
|||
|
|
if (k === 'login') return '🔑';
|
|||
|
|
if (k.indexOf('exec') === 0 || k.indexOf('user') === 0) return '👤';
|
|||
|
|
if (k.indexOf('equip') === 0) return '🔧';
|
|||
|
|
if (k.indexOf('directory') === 0) return '🏢';
|
|||
|
|
return '•';
|
|||
|
|
}
|
|||
|
|
function activityDayLabel(d) {
|
|||
|
|
const today = new Date().toDateString();
|
|||
|
|
const yest = new Date(Date.now() - 86400000).toDateString();
|
|||
|
|
const ds = d.toDateString();
|
|||
|
|
if (ds === today) return 'Today';
|
|||
|
|
if (ds === yest) return 'Yesterday';
|
|||
|
|
return d.toLocaleDateString(undefined, { weekday: 'long', month: 'short', day: 'numeric' });
|
|||
|
|
}
|
|||
|
|
function drawActivity() {
|
|||
|
|
if (!activityBody) return;
|
|||
|
|
const q = ((activitySearch && activitySearch.value) || '').trim().toLowerCase();
|
|||
|
|
const entries = q
|
|||
|
|
? activityEntries.filter((e) => ((e.who || '') + ' ' + (e.msg || '') + ' ' + (e.role || '')).toLowerCase().indexOf(q) >= 0)
|
|||
|
|
: activityEntries;
|
|||
|
|
if (!entries.length) {
|
|||
|
|
activityBody.innerHTML = '<div class="empty-state" style="padding:12px;">' + (q ? 'No matching activity.' : 'No activity recorded yet.') + '</div>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let html = '';
|
|||
|
|
let curDay = null;
|
|||
|
|
entries.forEach((e) => {
|
|||
|
|
const d = new Date(e.ts);
|
|||
|
|
const valid = !isNaN(d.getTime());
|
|||
|
|
const day = valid ? activityDayLabel(d) : '—';
|
|||
|
|
if (day !== curDay) { curDay = day; html += '<div class="act-day">' + escapeHtml(day) + '</div>'; }
|
|||
|
|
const time = valid ? d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }) : '';
|
|||
|
|
html += '<div class="act-row">'
|
|||
|
|
+ '<span class="act-icon" aria-hidden="true">' + activityIcon(e.kind) + '</span>'
|
|||
|
|
+ '<div class="act-main">'
|
|||
|
|
+ '<div class="act-line">' + activityRoleBadge(e.role)
|
|||
|
|
+ '<span class="act-who">' + escapeHtml(e.who || '?') + '</span> '
|
|||
|
|
+ '<span class="act-msg">' + escapeHtml(e.msg || '') + '</span></div>'
|
|||
|
|
+ '<div class="act-time">' + escapeHtml(time) + '</div></div></div>';
|
|||
|
|
});
|
|||
|
|
activityBody.innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── List templates: start a new list from an existing one's tasks ───
|
|||
|
|
function populateTemplateSelect() {
|
|||
|
|
if (!listModalTemplate) return;
|
|||
|
|
const lists = visibleLists();
|
|||
|
|
listModalTemplate.innerHTML = '<option value="">Blank list (no tasks)</option>' +
|
|||
|
|
lists.map((l) => {
|
|||
|
|
const scope = [abbrevForLocation(l.location), (l.team || '').trim()].filter(Boolean).join(' · ');
|
|||
|
|
const n = (l.items || []).length;
|
|||
|
|
const label = `${l.name}${scope ? ' — ' + scope : ''} (${n} task${n === 1 ? '' : 's'})`;
|
|||
|
|
return `<option value="${escapeAttr(l.id)}">${escapeHtml(label)}</option>`;
|
|||
|
|
}).join('');
|
|||
|
|
listModalTemplate.value = '';
|
|||
|
|
}
|
|||
|
|
function onTemplatePick() {
|
|||
|
|
const src = (checklistData.lists || []).find((l) => l.id === (listModalTemplate && listModalTemplate.value));
|
|||
|
|
if (!src) return;
|
|||
|
|
setListModalColor(src.color || ''); // mirror the template's look…
|
|||
|
|
setResetScheduleInModal(src.resetSchedule || null);
|
|||
|
|
if (!listModalInput.value.trim()) listModalInput.value = src.name; // …and suggest its name
|
|||
|
|
}
|
|||
|
|
// Fresh copies of a template's tasks (no ids/checks carried over).
|
|||
|
|
function templateItemsFromModal() {
|
|||
|
|
if (modalMode !== 'add' || !listModalTemplate || !listModalTemplate.value) return [];
|
|||
|
|
const src = (checklistData.lists || []).find((l) => l.id === listModalTemplate.value);
|
|||
|
|
if (!src) return [];
|
|||
|
|
return (src.items || []).map((it) => ({
|
|||
|
|
title: it.title,
|
|||
|
|
description: it.description || '',
|
|||
|
|
kind: it.kind === 'note' ? 'note' : 'task',
|
|||
|
|
recurrence: it.kind === 'note' ? null : (it.recurrence ? Object.assign({}, it.recurrence) : null)
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Add / Edit / Toggle / Delete ────────────────────────────
|
|||
|
|
function addItem() {
|
|||
|
|
const title = itemTitleInput.value.trim();
|
|||
|
|
if (!title) { showToast('Enter a title first', 'error'); return; }
|
|||
|
|
flushMarkdownEditor('itemDescription'); // pull formatted-view edits into the source
|
|||
|
|
const description = itemDescriptionInput.value.trim();
|
|||
|
|
const kind = addKind === 'note' ? 'note' : 'task'; // set by which button (+Add Task / +Add Note) opened the modal
|
|||
|
|
const recurrence = (kind !== 'note' && isRecurringCheckbox.checked) ? addRec.read() : null; // notes never recur
|
|||
|
|
const groupSel = document.getElementById('itemGroupSelect');
|
|||
|
|
const groupRow = document.getElementById('itemGroupRow');
|
|||
|
|
const group = (kind !== 'note' && groupRow && groupRow.style.display !== 'none' && groupSel && groupSel.value) ? groupSel.value : 'todo';
|
|||
|
|
const targetId = addTargetListId;
|
|||
|
|
if (!targetId || !checklistData.lists.find((l) => l.id === targetId)) {
|
|||
|
|
showToast('Pick a list to add to', 'error');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const onDone = (ok) => {
|
|||
|
|
if (ok === false) return;
|
|||
|
|
itemTitleInput.value = '';
|
|||
|
|
itemDescriptionInput.value = '';
|
|||
|
|
resetMarkdownEditor('itemDescription'); // clear the formatted view too
|
|||
|
|
isRecurringCheckbox.checked = false;
|
|||
|
|
recurrenceOptions.style.display = 'none';
|
|||
|
|
addRec.write(null);
|
|||
|
|
itemTitleInput.focus();
|
|||
|
|
};
|
|||
|
|
if (isMasterAdmin()) {
|
|||
|
|
const next = cloneState(checklistData);
|
|||
|
|
const target = next.lists.find((l) => l.id === targetId);
|
|||
|
|
const newId = Date.now().toString() + '-' + Math.random().toString(16).slice(2, 6);
|
|||
|
|
target.items.push(Object.assign({ id: newId, title, description, kind, recurrence, createdAt: new Date().toISOString() }, kind === 'note' ? {} : { group }));
|
|||
|
|
if (kind === 'note') target.showNotes = true; // adding a note reveals the Notes column for everyone
|
|||
|
|
justMovedItemId = newId; // the new card slides + flashes in
|
|||
|
|
pushAdminState(next).then(onDone);
|
|||
|
|
} else {
|
|||
|
|
// The server auto-enables showNotes when a note is added (see items POST), so the scoped
|
|||
|
|
// path needs no second call.
|
|||
|
|
saveMutation(apiAddItem(targetId, { title, description, kind, recurrence, group })).then(onDone);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openEditModal(itemId) {
|
|||
|
|
const list = getCurrentList();
|
|||
|
|
if (!list) return;
|
|||
|
|
const item = list.items.find((i) => i.id === itemId);
|
|||
|
|
if (!item) return;
|
|||
|
|
editingTaskId = itemId;
|
|||
|
|
editTitle.value = item.title;
|
|||
|
|
editDescription.value = item.description || '';
|
|||
|
|
// A note never recurs: hide the whole Recurring control when editing a note (conversion is
|
|||
|
|
// forbidden, so kind stays fixed — there's no kind toggle here).
|
|||
|
|
const isNote = item.kind === 'note';
|
|||
|
|
editIsRecurring.checked = !isNote && !!item.recurrence;
|
|||
|
|
editRecurrenceOptions.style.display = editIsRecurring.checked ? 'block' : 'none';
|
|||
|
|
const editRecRow = editIsRecurring.closest('.checkbox-label, .form-group');
|
|||
|
|
if (editRecRow) editRecRow.style.display = isNote ? 'none' : '';
|
|||
|
|
editRec.write(isNote ? null : (item.recurrence || null));
|
|||
|
|
// Section picker — only for tasks on lists that actually have extra sections.
|
|||
|
|
{
|
|||
|
|
const row = document.getElementById('editGroupRow');
|
|||
|
|
const sel = document.getElementById('editGroupSelect');
|
|||
|
|
if (row && sel) {
|
|||
|
|
const groups = taskGroupsOf(list);
|
|||
|
|
if (isNote || groups.length < 2) { row.style.display = 'none'; sel.innerHTML = ''; }
|
|||
|
|
else {
|
|||
|
|
sel.innerHTML = groups.map((g) => `<option value="${escapeAttr(g.id)}">${escapeHtml(g.name)}</option>`).join('');
|
|||
|
|
sel.value = itemGroupId(item, groups);
|
|||
|
|
row.style.display = '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
resetMarkdownEditor('editDescription');
|
|||
|
|
editTaskModal.style.display = 'flex';
|
|||
|
|
requestAnimationFrame(() => { editTitle.focus({ preventScroll: true }); editTitle.select(); });
|
|||
|
|
}
|
|||
|
|
function closeEditModal() {
|
|||
|
|
editingTaskId = null;
|
|||
|
|
closeOverlay(editTaskModal);
|
|||
|
|
}
|
|||
|
|
function saveEditTask() {
|
|||
|
|
if (!editingTaskId) { closeEditModal(); return; }
|
|||
|
|
const title = editTitle.value.trim();
|
|||
|
|
if (!title) { showToast('Title is required', 'error'); return; }
|
|||
|
|
flushMarkdownEditor('editDescription'); // pull formatted-view edits into the source
|
|||
|
|
const description = editDescription.value.trim();
|
|||
|
|
const recurrence = editIsRecurring.checked ? editRec.read() : null;
|
|||
|
|
const egRow = document.getElementById('editGroupRow');
|
|||
|
|
const egSel = document.getElementById('editGroupSelect');
|
|||
|
|
const groupPicked = !!(egRow && egRow.style.display !== 'none' && egSel && egSel.value);
|
|||
|
|
// Find the list that actually contains this task (the viewed list, which
|
|||
|
|
// may differ from the server's selectedListId).
|
|||
|
|
const ownerList = (checklistData.lists || []).find((l) => l.items.some((i) => i.id === editingTaskId));
|
|||
|
|
if (!ownerList) { closeEditModal(); return; }
|
|||
|
|
if (isMasterAdmin()) {
|
|||
|
|
const next = cloneState(checklistData);
|
|||
|
|
const list = next.lists.find((l) => l.id === ownerList.id);
|
|||
|
|
const item = list.items.find((i) => i.id === editingTaskId);
|
|||
|
|
if (!item) { closeEditModal(); return; }
|
|||
|
|
item.title = title;
|
|||
|
|
item.description = description;
|
|||
|
|
item.recurrence = recurrence;
|
|||
|
|
if (groupPicked && item.kind !== 'note') item.group = egSel.value;
|
|||
|
|
pushAdminState(next).then(() => closeEditModal());
|
|||
|
|
} else {
|
|||
|
|
const body = { title, description, recurrence };
|
|||
|
|
if (groupPicked) body.group = egSel.value;
|
|||
|
|
saveMutation(apiUpdateItem(ownerList.id, editingTaskId, body))
|
|||
|
|
.then(() => closeEditModal());
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Set when the user checks/unchecks an item, so the next render animates that
|
|||
|
|
// one row sliding into its new column. Cleared after a single render so the
|
|||
|
|
// 6s poll never replays it.
|
|||
|
|
let justMovedItemId = null;
|
|||
|
|
function toggleItem(itemId, checked) {
|
|||
|
|
const list = getCurrentList();
|
|||
|
|
if (!list) return;
|
|||
|
|
if (!sessionToken) { openLogin(); return; }
|
|||
|
|
justMovedItemId = itemId;
|
|||
|
|
clearCollapseOverride(itemId); // fresh completion force-collapses; reopen expands
|
|||
|
|
if (isEditor() && !applyingHistory) {
|
|||
|
|
recordHistory({ type: 'check', listId: list.id, itemId: itemId, before: !checked, after: !!checked });
|
|||
|
|
}
|
|||
|
|
pushCheck(list.id, itemId, checked);
|
|||
|
|
}
|
|||
|
|
// Toggle one inline checkbox (by index). Completion is derived from the boxes, so a task
|
|||
|
|
// with checkboxes is never completed via /api/check — only /api/check/sub (pushTaskCheck).
|
|||
|
|
function taskToggle(itemId, index, checked) {
|
|||
|
|
const list = getCurrentList();
|
|||
|
|
if (!list || !itemId || !Number.isInteger(index)) return;
|
|||
|
|
if (!sessionToken) { openLogin(); return; }
|
|||
|
|
pushTaskCheck(list.id, itemId, index, checked);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Copy a task into the SAME list (fresh id, no checkmark carried over) so the
|
|||
|
|
// user can then Move the copy to another list. Routes master vs scoped like deleteItem.
|
|||
|
|
async function duplicateItem(itemId) {
|
|||
|
|
const ownerList = (checklistData.lists || []).find((l) => l.items.some((i) => i.id === itemId));
|
|||
|
|
if (!ownerList) return;
|
|||
|
|
const src = ownerList.items.find((i) => i.id === itemId);
|
|||
|
|
if (!src) return;
|
|||
|
|
const kind = src.kind === 'note' ? 'note' : 'task'; // duplicating a note keeps it a note (conversion is forbidden)
|
|||
|
|
const body = {
|
|||
|
|
title: src.title,
|
|||
|
|
description: src.description || '', // checkbox lines live in the description → copied for free
|
|||
|
|
kind,
|
|||
|
|
recurrence: kind === 'note' ? null : (src.recurrence ? Object.assign({}, src.recurrence) : null)
|
|||
|
|
};
|
|||
|
|
if (kind !== 'note' && src.group) body.group = src.group; // stay in the same section
|
|||
|
|
let ok;
|
|||
|
|
if (isMasterAdmin()) {
|
|||
|
|
const next = cloneState(checklistData);
|
|||
|
|
const list = next.lists.find((l) => l.id === ownerList.id);
|
|||
|
|
const copy = Object.assign({}, body, {
|
|||
|
|
id: `${Date.now()}-${Math.random().toString(16).slice(2, 6)}`,
|
|||
|
|
createdAt: new Date().toISOString()
|
|||
|
|
});
|
|||
|
|
const idx = list.items.findIndex((i) => i.id === itemId);
|
|||
|
|
list.items.splice(idx >= 0 ? idx + 1 : list.items.length, 0, copy); // place right after the original
|
|||
|
|
justMovedItemId = copy.id; // the copy slides + flashes in
|
|||
|
|
ok = await pushAdminState(next);
|
|||
|
|
} else {
|
|||
|
|
ok = await saveMutation(apiAddItem(ownerList.id, body));
|
|||
|
|
}
|
|||
|
|
if (ok) showToast('Task duplicated — use Move to send the copy to another list', 'success');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function deleteItem(itemId) {
|
|||
|
|
if (!confirm('Delete this task?')) return;
|
|||
|
|
const ownerList = (checklistData.lists || []).find((l) => l.items.some((i) => i.id === itemId));
|
|||
|
|
if (!ownerList) return;
|
|||
|
|
if (isMasterAdmin()) {
|
|||
|
|
const next = cloneState(checklistData);
|
|||
|
|
const list = next.lists.find((l) => l.id === ownerList.id);
|
|||
|
|
list.items = list.items.filter((i) => i.id !== itemId);
|
|||
|
|
pushAdminState(next);
|
|||
|
|
} else {
|
|||
|
|
saveMutation(apiDeleteItem(ownerList.id, itemId));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// A self-contained recurrence editor, built into `mount`. Same option set as the
|
|||
|
|
// list repeat editor (type, every-N interval, start weekday, day-of-week/month,
|
|||
|
|
// and intraday clock times). Uses classes (not ids) so it can be instantiated more
|
|||
|
|
// than once (add- and edit-task modals). Returns { read(), write(rec) }.
|
|||
|
|
function makeRecurrenceEditor(mount) {
|
|||
|
|
if (!mount) return { read: () => null, write: () => {} };
|
|||
|
|
const dayOpts = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
|
|||
|
|
.map((d, i) => `<option value="${i}">${d}</option>`).join('');
|
|||
|
|
const monthOpts = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
|
|||
|
|
.map((m, i) => `<option value="${i}">${m}</option>`).join('');
|
|||
|
|
mount.innerHTML = `
|
|||
|
|
<label class="rec-lbl">Repeat:</label>
|
|||
|
|
<select class="rec-type">
|
|||
|
|
<option value="daily">Daily</option>
|
|||
|
|
<option value="weekly">Weekly</option>
|
|||
|
|
<option value="monthly">Monthly</option>
|
|||
|
|
<option value="yearly">Yearly</option>
|
|||
|
|
</select>
|
|||
|
|
<div class="reset-row rec-every" style="display:none;">
|
|||
|
|
<span>Every</span>
|
|||
|
|
<input type="number" class="rec-interval" min="1" max="99" value="1" />
|
|||
|
|
<span class="rec-unit">days</span>
|
|||
|
|
<span class="reset-hint rec-hint"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="reset-row rec-start" style="display:none;">
|
|||
|
|
<span>starting on</span>
|
|||
|
|
<select class="rec-startdow">${dayOpts}</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="reset-row rec-dow" style="display:none;">
|
|||
|
|
<span>on</span>
|
|||
|
|
<select class="rec-dowsel">${dayOpts}</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="reset-row rec-month" style="display:none;">
|
|||
|
|
<span>in</span>
|
|||
|
|
<select class="rec-monthsel">${monthOpts}</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="reset-row rec-dom" style="display:none;">
|
|||
|
|
<span>on day</span>
|
|||
|
|
<input type="number" class="rec-dominp" min="1" max="31" value="1" />
|
|||
|
|
<span>of the month</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="reset-row reset-times-row rec-times" style="display:none;">
|
|||
|
|
<span>at</span>
|
|||
|
|
<div class="reset-times-list rec-timeslist"></div>
|
|||
|
|
<button type="button" class="btn btn-secondary btn-small reset-time-add rec-timesadd">+ Add time</button>
|
|||
|
|
<span class="reset-hint reset-times-hint">leave empty to reset once a day</span>
|
|||
|
|
</div>`;
|
|||
|
|
const $ = (s) => mount.querySelector(s);
|
|||
|
|
const typeSel = $('.rec-type'), interval = $('.rec-interval'), unit = $('.rec-unit'), hint = $('.rec-hint');
|
|||
|
|
const startRow = $('.rec-start'), startDow = $('.rec-startdow'), everyRow = $('.rec-every');
|
|||
|
|
const dowRow = $('.rec-dow'), dowSel = $('.rec-dowsel');
|
|||
|
|
const monthRow = $('.rec-month'), monthSel = $('.rec-monthsel');
|
|||
|
|
const domRow = $('.rec-dom'), domInp = $('.rec-dominp');
|
|||
|
|
const timesRow = $('.rec-times'), timesList = $('.rec-timeslist'), timesAdd = $('.rec-timesadd');
|
|||
|
|
const units = { daily: 'days', weekly: 'weeks', monthly: 'months', yearly: 'years' };
|
|||
|
|
function addTime(v) {
|
|||
|
|
const entry = document.createElement('span'); entry.className = 'reset-time-entry';
|
|||
|
|
const inp = document.createElement('input'); inp.type = 'time'; inp.className = 'reset-time-input'; if (v) inp.value = v;
|
|||
|
|
const rm = document.createElement('button'); rm.type = 'button'; rm.className = 'reset-time-remove'; rm.setAttribute('aria-label', 'Remove time'); rm.textContent = '×';
|
|||
|
|
rm.addEventListener('click', () => entry.remove());
|
|||
|
|
entry.appendChild(inp); entry.appendChild(rm); timesList.appendChild(entry); return inp;
|
|||
|
|
}
|
|||
|
|
function collectTimes() {
|
|||
|
|
const seen = new Set(), out = [];
|
|||
|
|
timesList.querySelectorAll('.reset-time-input').forEach((inp) => {
|
|||
|
|
const m = /^(\d{1,2}):(\d{2})$/.exec((inp.value || '').trim()); if (!m) return;
|
|||
|
|
const h = parseInt(m[1], 10), mn = parseInt(m[2], 10); if (h < 0 || h > 23 || mn < 0 || mn > 59) return;
|
|||
|
|
const k = String(h).padStart(2, '0') + ':' + String(mn).padStart(2, '0'); if (seen.has(k)) return; seen.add(k); out.push(k);
|
|||
|
|
});
|
|||
|
|
out.sort(); return out;
|
|||
|
|
}
|
|||
|
|
function refresh() {
|
|||
|
|
const t = typeSel.value; const iv = Math.max(1, parseInt(interval.value, 10) || 1);
|
|||
|
|
unit.textContent = units[t] || '';
|
|||
|
|
hint.textContent = t === 'weekly' ? '(2 = biweekly)' : '';
|
|||
|
|
everyRow.style.display = 'flex';
|
|||
|
|
startRow.style.display = (t === 'daily' && iv >= 2) ? 'flex' : 'none';
|
|||
|
|
dowRow.style.display = t === 'weekly' ? 'flex' : 'none';
|
|||
|
|
monthRow.style.display = t === 'yearly' ? 'flex' : 'none';
|
|||
|
|
domRow.style.display = (t === 'monthly' || t === 'yearly') ? 'flex' : 'none';
|
|||
|
|
timesRow.style.display = (t === 'daily' || t === 'weekly') ? 'flex' : 'none';
|
|||
|
|
}
|
|||
|
|
typeSel.addEventListener('change', refresh);
|
|||
|
|
interval.addEventListener('input', refresh);
|
|||
|
|
timesAdd.addEventListener('click', () => { const i = addTime(''); if (i) i.focus(); });
|
|||
|
|
function write(rec) {
|
|||
|
|
rec = rec || {};
|
|||
|
|
typeSel.value = ['daily', 'weekly', 'monthly', 'yearly'].includes(rec.type) ? rec.type : 'daily';
|
|||
|
|
interval.value = String(rec.interval > 1 ? rec.interval : 1);
|
|||
|
|
startDow.value = String(rec.startDow != null ? rec.startDow : 1);
|
|||
|
|
dowSel.value = String(rec.dayOfWeek != null ? rec.dayOfWeek : 0);
|
|||
|
|
monthSel.value = String(rec.month != null ? rec.month : 0);
|
|||
|
|
domInp.value = rec.dayOfMonth ? rec.dayOfMonth : 1;
|
|||
|
|
timesList.innerHTML = '';
|
|||
|
|
(Array.isArray(rec.times) ? rec.times : []).forEach(addTime);
|
|||
|
|
refresh();
|
|||
|
|
}
|
|||
|
|
function read() {
|
|||
|
|
const t = typeSel.value;
|
|||
|
|
const iv = Math.min(99, Math.max(1, parseInt(interval.value, 10) || 1));
|
|||
|
|
const dom = () => Math.min(31, Math.max(1, parseInt(domInp.value, 10) || 1));
|
|||
|
|
const times = collectTimes();
|
|||
|
|
const out = { type: t, interval: iv };
|
|||
|
|
if (t === 'daily' && iv > 1) out.startDow = parseInt(startDow.value, 10) || 0;
|
|||
|
|
if (t === 'weekly') out.dayOfWeek = parseInt(dowSel.value, 10) || 0;
|
|||
|
|
if (t === 'monthly') out.dayOfMonth = dom();
|
|||
|
|
if (t === 'yearly') { out.month = parseInt(monthSel.value, 10) || 0; out.dayOfMonth = dom(); }
|
|||
|
|
if ((t === 'daily' || t === 'weekly') && times.length) out.times = times;
|
|||
|
|
return out;
|
|||
|
|
}
|
|||
|
|
write(null);
|
|||
|
|
return { read, write };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Task recurrence now uses the same schedule shape as a list reset, so its
|
|||
|
|
// human-readable text is produced by the same formatter (interval + times).
|
|||
|
|
function getRecurrenceText(recurrence) {
|
|||
|
|
return resetScheduleText(recurrence);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatStamp(iso) {
|
|||
|
|
if (!iso) return '';
|
|||
|
|
try {
|
|||
|
|
const d = new Date(iso);
|
|||
|
|
return d.toLocaleString(undefined, { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
|
|||
|
|
} catch (_) { return iso; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── List management (admin) ─────────────────────────────────
|
|||
|
|
function setListModalColor(color) {
|
|||
|
|
listModalColorValue = color || '';
|
|||
|
|
if (!listModalColors) return;
|
|||
|
|
const isHex = /^#[0-9a-fA-F]{6}$/.test(listModalColorValue);
|
|||
|
|
listModalColors.querySelectorAll('.swatch').forEach((s) => {
|
|||
|
|
if (s.classList.contains('swatch-custom')) {
|
|||
|
|
s.classList.toggle('selected', isHex);
|
|||
|
|
if (isHex) s.style.setProperty('--lc', listModalColorValue);
|
|||
|
|
else s.style.removeProperty('--lc');
|
|||
|
|
} else {
|
|||
|
|
s.classList.toggle('selected', !isHex && (s.dataset.color || '') === listModalColorValue);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const inp = document.getElementById('listModalCustomColor');
|
|||
|
|
if (inp && isHex) inp.value = listModalColorValue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ── Reset schedule controls in the Edit List modal ──
|
|||
|
|
function updateResetScheduleControls() {
|
|||
|
|
const t = listModalResetType ? listModalResetType.value : '';
|
|||
|
|
const interval = Math.max(1, parseInt(listModalResetInterval && listModalResetInterval.value, 10) || 1);
|
|||
|
|
const units = { daily: 'days', weekly: 'weeks', monthly: 'months', yearly: 'years' };
|
|||
|
|
const show = (el, on) => { if (el) el.style.display = on ? 'flex' : 'none'; };
|
|||
|
|
show(listModalResetEvery, !!t);
|
|||
|
|
if (listModalResetUnit) listModalResetUnit.textContent = units[t] || '';
|
|||
|
|
// Tiny example only where it isn't misleading.
|
|||
|
|
if (listModalResetHint) listModalResetHint.textContent = t === 'weekly' ? '(2 = biweekly)' : '';
|
|||
|
|
// Daily: pick the weekday the cycle starts on — only matters for every 2+ days.
|
|||
|
|
show(listModalResetStartRow, t === 'daily' && interval >= 2);
|
|||
|
|
show(listModalResetDowRow, t === 'weekly'); // "on [Wednesday]"
|
|||
|
|
show(listModalResetMonthRow, t === 'yearly'); // "in [June]"
|
|||
|
|
show(listModalResetDomRow, t === 'monthly' || t === 'yearly'); // "on day [N] of the month"
|
|||
|
|
// Intraday repeat: reset at specific clock times — offered for daily/weekly only.
|
|||
|
|
show(listModalResetTimesRow, t === 'daily' || t === 'weekly');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ── Intraday reset times (the "repeat multiple times a day" editor) ──
|
|||
|
|
// Each entry is a native <input type="time"> (gives "HH:MM" 24h, displayed in
|
|||
|
|
// the user's locale) with a remove button. Empty list ⇒ plain once-a-day reset.
|
|||
|
|
function addResetTimeEntry(value) {
|
|||
|
|
if (!listModalResetTimesList) return;
|
|||
|
|
const entry = document.createElement('span');
|
|||
|
|
entry.className = 'reset-time-entry';
|
|||
|
|
const input = document.createElement('input');
|
|||
|
|
input.type = 'time';
|
|||
|
|
input.className = 'reset-time-input';
|
|||
|
|
if (value) input.value = value;
|
|||
|
|
const remove = document.createElement('button');
|
|||
|
|
remove.type = 'button';
|
|||
|
|
remove.className = 'reset-time-remove';
|
|||
|
|
remove.setAttribute('aria-label', 'Remove time');
|
|||
|
|
remove.textContent = '×';
|
|||
|
|
remove.addEventListener('click', () => { entry.remove(); });
|
|||
|
|
entry.appendChild(input);
|
|||
|
|
entry.appendChild(remove);
|
|||
|
|
listModalResetTimesList.appendChild(entry);
|
|||
|
|
return input;
|
|||
|
|
}
|
|||
|
|
function setResetTimes(times) {
|
|||
|
|
if (!listModalResetTimesList) return;
|
|||
|
|
listModalResetTimesList.innerHTML = '';
|
|||
|
|
(Array.isArray(times) ? times : []).forEach((t) => addResetTimeEntry(t));
|
|||
|
|
}
|
|||
|
|
// Collected, validated, de-duped and sorted "HH:MM" values from the inputs.
|
|||
|
|
function collectResetTimes() {
|
|||
|
|
if (!listModalResetTimesList) return [];
|
|||
|
|
const seen = new Set();
|
|||
|
|
const out = [];
|
|||
|
|
listModalResetTimesList.querySelectorAll('.reset-time-input').forEach((inp) => {
|
|||
|
|
const m = /^(\d{1,2}):(\d{2})$/.exec((inp.value || '').trim());
|
|||
|
|
if (!m) return;
|
|||
|
|
const h = parseInt(m[1], 10), mn = parseInt(m[2], 10);
|
|||
|
|
if (h < 0 || h > 23 || mn < 0 || mn > 59) return;
|
|||
|
|
const key = String(h).padStart(2, '0') + ':' + String(mn).padStart(2, '0');
|
|||
|
|
if (seen.has(key)) return;
|
|||
|
|
seen.add(key);
|
|||
|
|
out.push(key);
|
|||
|
|
});
|
|||
|
|
out.sort();
|
|||
|
|
return out;
|
|||
|
|
}
|
|||
|
|
function setResetScheduleInModal(schedule) {
|
|||
|
|
if (!listModalResetType) return;
|
|||
|
|
const type = (schedule && schedule.type) || '';
|
|||
|
|
listModalResetType.value = ['daily', 'weekly', 'monthly', 'yearly'].includes(type) ? type : '';
|
|||
|
|
if (listModalResetInterval) listModalResetInterval.value = String((schedule && schedule.interval > 1) ? schedule.interval : 1);
|
|||
|
|
if (listModalResetStartDow) listModalResetStartDow.value = String((schedule && schedule.startDow != null) ? schedule.startDow : 1);
|
|||
|
|
if (listModalResetDow) listModalResetDow.value = String((schedule && schedule.dayOfWeek != null) ? schedule.dayOfWeek : 0);
|
|||
|
|
if (listModalResetMonth) listModalResetMonth.value = String((schedule && schedule.month != null) ? schedule.month : 0);
|
|||
|
|
if (listModalResetDom) listModalResetDom.value = String((schedule && schedule.dayOfMonth) ? schedule.dayOfMonth : 1);
|
|||
|
|
setResetTimes((schedule && Array.isArray(schedule.times)) ? schedule.times : []);
|
|||
|
|
updateResetScheduleControls();
|
|||
|
|
}
|
|||
|
|
function getResetScheduleFromModal() {
|
|||
|
|
const t = listModalResetType ? listModalResetType.value : '';
|
|||
|
|
if (!t) return null;
|
|||
|
|
const dom = () => Math.min(31, Math.max(1, parseInt(listModalResetDom.value, 10) || 1));
|
|||
|
|
// Interval ("every N"); anchor is set server-side. No anchor sent → the
|
|||
|
|
// server (re)anchors to today whenever the repeat is set/changed here.
|
|||
|
|
const interval = Math.min(99, Math.max(1, parseInt(listModalResetInterval && listModalResetInterval.value, 10) || 1));
|
|||
|
|
// Intraday repeat times apply to daily/weekly; empty ⇒ once-a-day (unchanged).
|
|||
|
|
const times = collectResetTimes();
|
|||
|
|
if (t === 'daily') {
|
|||
|
|
const sched = { type: 'daily', interval };
|
|||
|
|
if (interval > 1) sched.startDow = parseInt(listModalResetStartDow && listModalResetStartDow.value, 10) || 0;
|
|||
|
|
if (times.length) sched.times = times;
|
|||
|
|
return sched;
|
|||
|
|
}
|
|||
|
|
if (t === 'weekly') {
|
|||
|
|
const sched = { type: 'weekly', interval, dayOfWeek: parseInt(listModalResetDow.value, 10) || 0 };
|
|||
|
|
if (times.length) sched.times = times;
|
|||
|
|
return sched;
|
|||
|
|
}
|
|||
|
|
if (t === 'monthly') return { type: 'monthly', interval, dayOfMonth: dom() };
|
|||
|
|
if (t === 'yearly') return { type: 'yearly', interval, month: parseInt(listModalResetMonth.value, 10) || 0, dayOfMonth: dom() };
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
async function resetCurrentList() {
|
|||
|
|
const list = getCurrentList();
|
|||
|
|
if (!list) { showToast('No list selected', 'error'); return; }
|
|||
|
|
if (!confirm(`Reset "${list.name}"?\n\nClears all checkmarks and moves every item back to To Do.`)) return;
|
|||
|
|
try {
|
|||
|
|
await apiResetList(list.id);
|
|||
|
|
showToast('List reset — everything back to To Do', 'success');
|
|||
|
|
await refreshState({ showToastOnError: false });
|
|||
|
|
} catch (err) { showToast('Reset failed: ' + err.message, 'error'); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openListModal(mode) {
|
|||
|
|
modalMode = mode;
|
|||
|
|
const current = getCurrentList();
|
|||
|
|
modalTargetId = current ? current.id : null;
|
|||
|
|
listModalTitle.textContent = mode === 'add' ? 'Add List' : 'Edit List';
|
|||
|
|
listModalMessage.style.display = 'none';
|
|||
|
|
listModalMessage.classList.remove('danger');
|
|||
|
|
listModalInput.style.display = 'block';
|
|||
|
|
// Master always picks scope; an executive picks it when ADDING a list
|
|||
|
|
// (server validates it lands in their area); team admins never (forced).
|
|||
|
|
const isExec = !!(currentUser && currentUser.role === 'executive');
|
|||
|
|
const showScope = isMasterAdmin() || (isExec && mode === 'add');
|
|||
|
|
listModalLocationGroup.style.display = showScope ? 'block' : 'none';
|
|||
|
|
if (listModalTeamGroup) listModalTeamGroup.style.display = showScope ? 'block' : 'none';
|
|||
|
|
listModalSave.textContent = 'Save';
|
|||
|
|
listModalSave.classList.remove('btn-danger');
|
|||
|
|
populateScopeSelects(); // ensure the location/team dropdowns are current
|
|||
|
|
// "Start from" template picker: only when adding a list.
|
|||
|
|
if (listModalTemplateGroup) listModalTemplateGroup.style.display = (mode === 'add') ? 'block' : 'none';
|
|||
|
|
if (mode === 'add') populateTemplateSelect();
|
|||
|
|
// Re-show the edit fields (a prior Delete hides them).
|
|||
|
|
if (listModalColorGroup) listModalColorGroup.style.display = '';
|
|||
|
|
if (listModalHiddenGroup) listModalHiddenGroup.style.display = '';
|
|||
|
|
if (listModalRepeatGroup) listModalRepeatGroup.style.display = '';
|
|||
|
|
if (mode === 'rename') {
|
|||
|
|
listModalInput.value = current ? current.name : '';
|
|||
|
|
listModalLocation.value = (current && current.location) ? current.location : '';
|
|||
|
|
if (listModalTeam) listModalTeam.value = (current && current.team) ? current.team : '';
|
|||
|
|
setListModalColor(current && current.color ? current.color : '');
|
|||
|
|
if (listModalHidden) listModalHidden.checked = !!(current && current.hidden);
|
|||
|
|
{ const sn = document.getElementById('listModalShowNotes'); if (sn) sn.checked = !!(current && current.showNotes); }
|
|||
|
|
{ const no = document.getElementById('listModalNotesOnly'); if (no) no.checked = !!(current && current.notesOnly); }
|
|||
|
|
{ const sf = document.getElementById('listModalShowFeedback'); if (sf) sf.checked = !!(current && current.showFeedback); }
|
|||
|
|
setListModalSections(current ? taskGroupsOf(current) : [{ id: 'todo', name: 'To Do' }]);
|
|||
|
|
syncListModalNotesOnly();
|
|||
|
|
setResetScheduleInModal(current && current.resetSchedule);
|
|||
|
|
// A Requests inbox is one-shot by design — no repeat schedule to edit.
|
|||
|
|
if (current && current.isRequests && listModalRepeatGroup) listModalRepeatGroup.style.display = 'none';
|
|||
|
|
} else {
|
|||
|
|
listModalInput.value = '';
|
|||
|
|
// Default to the first available option (master: "Everyone"/"Whole building";
|
|||
|
|
// executive: their first scoped location/team).
|
|||
|
|
if (listModalLocation.tagName === 'SELECT') listModalLocation.selectedIndex = 0; else listModalLocation.value = '';
|
|||
|
|
if (listModalTeam && listModalTeam.tagName === 'SELECT') listModalTeam.selectedIndex = 0; else if (listModalTeam) listModalTeam.value = '';
|
|||
|
|
setListModalColor('');
|
|||
|
|
if (listModalHidden) listModalHidden.checked = false;
|
|||
|
|
{ const sn = document.getElementById('listModalShowNotes'); if (sn) sn.checked = false; }
|
|||
|
|
{ const no = document.getElementById('listModalNotesOnly'); if (no) no.checked = false; }
|
|||
|
|
{ const sf = document.getElementById('listModalShowFeedback'); if (sf) sf.checked = false; }
|
|||
|
|
setListModalSections([{ id: 'todo', name: 'To Do' }]);
|
|||
|
|
syncListModalNotesOnly();
|
|||
|
|
setResetScheduleInModal(null);
|
|||
|
|
}
|
|||
|
|
listModal.style.display = 'flex';
|
|||
|
|
requestAnimationFrame(() => { listModalInput.focus({ preventScroll: true }); listModalInput.select(); });
|
|||
|
|
}
|
|||
|
|
function closeListModal() {
|
|||
|
|
modalMode = null; modalTargetId = null;
|
|||
|
|
closeOverlay(listModal);
|
|||
|
|
listModalInput.value = '';
|
|||
|
|
listModalLocation.value = '';
|
|||
|
|
}
|
|||
|
|
// ── Task sections editor (in the list modal) ─────────────────────────
|
|||
|
|
// Working copy of {id,name} rows. Renames keep the row's stable id — that's
|
|||
|
|
// what keeps every task in its section across a rename. Row 0 is the default
|
|||
|
|
// ('todo'): renamable, never removable. New rows get a fresh random id.
|
|||
|
|
let listModalGroups = [];
|
|||
|
|
function renderListModalSections() {
|
|||
|
|
const box = document.getElementById('listModalSections');
|
|||
|
|
if (!box) return;
|
|||
|
|
box.innerHTML = listModalGroups.map((g, i) => `
|
|||
|
|
<div class="list-section-row" data-gid="${escapeAttr(g.id)}">
|
|||
|
|
<input type="text" maxlength="40" data-section-name="${i}" value="${escapeAttr(g.name)}" placeholder="Section name (e.g. Monday)" />
|
|||
|
|
${i === 0
|
|||
|
|
? '<span class="list-section-default" title="New tasks land here unless another section is picked">default</span>'
|
|||
|
|
: `<button type="button" class="equip-photo-remove" data-section-remove="${i}" aria-label="Remove section" title="Remove — its tasks go back to the default section">✕</button>`}
|
|||
|
|
</div>`).join('');
|
|||
|
|
}
|
|||
|
|
function setListModalSections(groups) {
|
|||
|
|
listModalGroups = groups.map((g) => ({ id: g.id, name: g.name }));
|
|||
|
|
renderListModalSections();
|
|||
|
|
}
|
|||
|
|
{
|
|||
|
|
const box = document.getElementById('listModalSections');
|
|||
|
|
const add = document.getElementById('listModalSectionAdd');
|
|||
|
|
if (box) {
|
|||
|
|
box.addEventListener('input', (e) => {
|
|||
|
|
const inp = e.target.closest('input[data-section-name]');
|
|||
|
|
if (inp) { const i = parseInt(inp.getAttribute('data-section-name'), 10); if (listModalGroups[i]) listModalGroups[i].name = inp.value; }
|
|||
|
|
});
|
|||
|
|
box.addEventListener('click', (e) => {
|
|||
|
|
const rm = e.target.closest('[data-section-remove]');
|
|||
|
|
if (rm) { const i = parseInt(rm.getAttribute('data-section-remove'), 10); listModalGroups.splice(i, 1); renderListModalSections(); }
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (add) add.addEventListener('click', () => {
|
|||
|
|
if (listModalGroups.length >= 10) { showToast('Up to 10 sections per list', 'error'); return; }
|
|||
|
|
listModalGroups.push({ id: 'g' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6), name: '' });
|
|||
|
|
renderListModalSections();
|
|||
|
|
const inp = document.querySelector(`#listModalSections input[data-section-name="${listModalGroups.length - 1}"]`);
|
|||
|
|
if (inp) inp.focus();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// Read the editor back into a clean taskGroups array (blank-named extra rows
|
|||
|
|
// are dropped; a blanked default falls back to "To Do").
|
|||
|
|
function readListModalSections() {
|
|||
|
|
return listModalGroups
|
|||
|
|
.map((g, i) => ({ id: g.id, name: (g.name || '').trim() || (i === 0 ? 'To Do' : '') }))
|
|||
|
|
.filter((g) => g.name);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// "Notes only" implies the Notes column (force + lock the showNotes box) and makes the repeat
|
|||
|
|
// schedule meaningless (resets clear checks; a notes-only board has none) — hide that editor.
|
|||
|
|
// The stored schedule is left untouched in case the list is converted back.
|
|||
|
|
// It also hides the Task-sections editor (a notes-only board has no task columns).
|
|||
|
|
function syncListModalNotesOnly() {
|
|||
|
|
const no = document.getElementById('listModalNotesOnly');
|
|||
|
|
const sn = document.getElementById('listModalShowNotes');
|
|||
|
|
const on = !!(no && no.checked);
|
|||
|
|
if (sn) { if (on) sn.checked = true; sn.disabled = on; }
|
|||
|
|
if (listModalRepeatGroup) listModalRepeatGroup.style.display = on ? 'none' : '';
|
|||
|
|
{ const sg = document.getElementById('listModalSectionsGroup'); if (sg) sg.style.display = on ? 'none' : ''; }
|
|||
|
|
}
|
|||
|
|
{ const no = document.getElementById('listModalNotesOnly'); if (no) no.addEventListener('change', syncListModalNotesOnly); }
|
|||
|
|
function handleModalSave() {
|
|||
|
|
const name = listModalInput.value.trim();
|
|||
|
|
const location = (listModalLocation.value || '').trim();
|
|||
|
|
const team = (listModalTeam && listModalTeam.value || '').trim();
|
|||
|
|
const color = listModalColorValue;
|
|||
|
|
const hidden = listModalHidden ? listModalHidden.checked : false;
|
|||
|
|
const showNotesEl = document.getElementById('listModalShowNotes');
|
|||
|
|
const notesOnlyEl = document.getElementById('listModalNotesOnly');
|
|||
|
|
const notesOnly = notesOnlyEl ? notesOnlyEl.checked : false;
|
|||
|
|
const showNotes = notesOnly || (showNotesEl ? showNotesEl.checked : false); // notes-only implies the Notes column
|
|||
|
|
const showFeedbackEl = document.getElementById('listModalShowFeedback');
|
|||
|
|
const showFeedback = showFeedbackEl ? showFeedbackEl.checked : false;
|
|||
|
|
const taskGroups = readListModalSections();
|
|||
|
|
const resetSchedule = getResetScheduleFromModal();
|
|||
|
|
const starterItems = templateItemsFromModal(); // copied tasks if "Start from" chosen
|
|||
|
|
|
|||
|
|
// Team admin: scoped endpoints. The server forces the list into the
|
|||
|
|
// caller's own (location, team), so only the name is sent.
|
|||
|
|
if (!isMasterAdmin()) {
|
|||
|
|
if (modalMode === 'add') {
|
|||
|
|
if (!name) { closeListModal(); return; }
|
|||
|
|
let body = { name, color, hidden, showNotes, notesOnly, showFeedback, taskGroups, resetSchedule };
|
|||
|
|
if (currentUser && currentUser.role === 'executive') {
|
|||
|
|
const loc = listModalLocation.value.trim();
|
|||
|
|
const tm = (listModalTeam && listModalTeam.value || '').trim();
|
|||
|
|
if (!execCanEditClient({ location: loc, team: tm })) {
|
|||
|
|
showToast('Pick a location or team within your area', 'error');
|
|||
|
|
return; // keep the modal open
|
|||
|
|
}
|
|||
|
|
body = { name, location: loc, team: tm, color, hidden, showNotes, notesOnly, showFeedback, taskGroups, resetSchedule };
|
|||
|
|
}
|
|||
|
|
if (starterItems.length) body.items = starterItems; // server rebuilds fresh ids
|
|||
|
|
saveMutation(apiCreateList(body)).then((res) => {
|
|||
|
|
if (res && res.id) setSelectedList(res.id);
|
|||
|
|
closeListModal();
|
|||
|
|
});
|
|||
|
|
} else if (modalMode === 'rename') {
|
|||
|
|
if (!name) { closeListModal(); return; }
|
|||
|
|
saveMutation(apiUpdateList(modalTargetId, { name, color, hidden, showNotes, notesOnly, showFeedback, taskGroups, resetSchedule })).then(() => closeListModal());
|
|||
|
|
} else if (modalMode === 'delete') {
|
|||
|
|
saveMutation(apiDeleteList(modalTargetId)).then(() => closeListModal());
|
|||
|
|
} else {
|
|||
|
|
closeListModal();
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Master admin: full-state push (unchanged), now also carrying team scope.
|
|||
|
|
const next = cloneState(checklistData);
|
|||
|
|
if (modalMode === 'add') {
|
|||
|
|
if (!name) { closeListModal(); return; }
|
|||
|
|
const id = (name + (location ? '-' + location : '') + (team ? '-' + team : '')).toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9\-]/g, '') || Date.now().toString();
|
|||
|
|
if (next.lists.find((l) => l.id === id)) {
|
|||
|
|
showToast('A list with that name already exists', 'error');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const items = starterItems.map((it, i) => ({
|
|||
|
|
id: `${Date.now()}-${i}-${Math.random().toString(16).slice(2, 6)}`,
|
|||
|
|
title: it.title, description: it.description, kind: it.kind === 'note' ? 'note' : 'task', recurrence: it.kind === 'note' ? null : it.recurrence,
|
|||
|
|
createdAt: new Date().toISOString()
|
|||
|
|
}));
|
|||
|
|
next.lists.push({ id, name, location, team, color, hidden, showNotes, notesOnly, showFeedback, feedback: [], taskGroups, columnOrder: ['todo', 'done', 'notes', 'feedback'], resetSchedule, items, lastCheckDate: new Date().toDateString() });
|
|||
|
|
next.selectedListId = id;
|
|||
|
|
addTargetListId = id;
|
|||
|
|
} else if (modalMode === 'rename') {
|
|||
|
|
if (!name) { closeListModal(); return; }
|
|||
|
|
const list = next.lists.find((l) => l.id === modalTargetId);
|
|||
|
|
if (list) { list.name = name; list.location = location; list.team = team; list.color = color; list.hidden = hidden; list.showNotes = showNotes; list.notesOnly = notesOnly; list.showFeedback = showFeedback; list.taskGroups = taskGroups; list.resetSchedule = resetSchedule; }
|
|||
|
|
} else if (modalMode === 'delete') {
|
|||
|
|
next.lists = next.lists.filter((l) => l.id !== modalTargetId);
|
|||
|
|
if (next.lists.length === 0) {
|
|||
|
|
const newId = `${FALLBACK_LIST.id}-${Date.now()}`;
|
|||
|
|
next.lists.push({ id: newId, name: FALLBACK_LIST.name, location: '', team: '', items: [], lastCheckDate: new Date().toDateString() });
|
|||
|
|
next.selectedListId = newId;
|
|||
|
|
addTargetListId = newId;
|
|||
|
|
} else {
|
|||
|
|
if (!next.lists.find((l) => l.id === addTargetListId)) addTargetListId = next.lists[0].id;
|
|||
|
|
next.selectedListId = next.lists[0].id;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
pushAdminState(next).then(() => closeListModal());
|
|||
|
|
}
|
|||
|
|
function deleteList() {
|
|||
|
|
modalMode = 'delete';
|
|||
|
|
const current = getCurrentList();
|
|||
|
|
if (!current) return;
|
|||
|
|
modalTargetId = current.id;
|
|||
|
|
listModalTitle.textContent = 'Delete List';
|
|||
|
|
listModalMessage.textContent = `Delete "${current.name}"? Tasks inside will be removed. If it was the last list, a blank "New List" will be created.`;
|
|||
|
|
listModalMessage.style.display = 'block';
|
|||
|
|
listModalMessage.classList.add('danger');
|
|||
|
|
listModalInput.style.display = 'none';
|
|||
|
|
listModalLocationGroup.style.display = 'none';
|
|||
|
|
if (listModalTeamGroup) listModalTeamGroup.style.display = 'none';
|
|||
|
|
// Delete is a plain confirm — hide every edit field (template/color/hidden/repeat).
|
|||
|
|
if (listModalTemplateGroup) listModalTemplateGroup.style.display = 'none';
|
|||
|
|
if (listModalColorGroup) listModalColorGroup.style.display = 'none';
|
|||
|
|
if (listModalHiddenGroup) listModalHiddenGroup.style.display = 'none';
|
|||
|
|
if (listModalRepeatGroup) listModalRepeatGroup.style.display = 'none';
|
|||
|
|
listModalSave.textContent = 'Delete';
|
|||
|
|
listModalSave.classList.add('btn-danger');
|
|||
|
|
listModal.style.display = 'flex';
|
|||
|
|
listModalInput.blur();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Move item ───────────────────────────────────────────────
|
|||
|
|
function openMoveItemModal(itemId) {
|
|||
|
|
moveModalItemId = itemId;
|
|||
|
|
// A team admin can only move tasks among its own lists; master sees all.
|
|||
|
|
const candidates = isMasterAdmin() ? (checklistData.lists || []) : editableLists();
|
|||
|
|
const currentListId = (getCurrentList() || {}).id;
|
|||
|
|
moveItemSelect.innerHTML = candidates.map((list) => {
|
|||
|
|
const scope = [abbrevForLocation(list.location), (list.team || '').trim()].filter(Boolean).join(' · ');
|
|||
|
|
const label = scope ? `${list.name} — ${scope}` : list.name;
|
|||
|
|
return `<option value="${escapeAttr(list.id)}" ${list.id === currentListId ? 'selected' : ''}>${escapeHtml(label)}</option>`;
|
|||
|
|
}).join('');
|
|||
|
|
moveItemModal.style.display = 'flex';
|
|||
|
|
requestAnimationFrame(() => { moveItemSelect.focus({ preventScroll: true }); });
|
|||
|
|
}
|
|||
|
|
function closeMoveItemModal() { moveModalItemId = null; closeOverlay(moveItemModal); }
|
|||
|
|
function handleMoveItemSave() {
|
|||
|
|
if (!moveModalItemId) { closeMoveItemModal(); return; }
|
|||
|
|
const targetListId = moveItemSelect.value;
|
|||
|
|
const sourceList = (checklistData.lists || []).find((l) => l.items.some((i) => i.id === moveModalItemId));
|
|||
|
|
if (!sourceList || sourceList.id === targetListId) { closeMoveItemModal(); return; }
|
|||
|
|
if (isMasterAdmin()) {
|
|||
|
|
const next = cloneState(checklistData);
|
|||
|
|
const src = next.lists.find((l) => l.id === sourceList.id);
|
|||
|
|
const dst = next.lists.find((l) => l.id === targetListId);
|
|||
|
|
if (!src || !dst) { closeMoveItemModal(); return; }
|
|||
|
|
const idx = src.items.findIndex((i) => i.id === moveModalItemId);
|
|||
|
|
const [item] = src.items.splice(idx, 1);
|
|||
|
|
dst.items.push(item);
|
|||
|
|
pushAdminState(next).then(() => closeMoveItemModal());
|
|||
|
|
} else {
|
|||
|
|
saveMutation(apiMoveItem(sourceList.id, moveModalItemId, targetListId)).then(() => closeMoveItemModal());
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Move task: inline "Move to…" dropdown anchored to the Move button ──────
|
|||
|
|
// Do the actual move (master vs scoped), then refresh + toast.
|
|||
|
|
function moveItemTo(itemId, targetListId) {
|
|||
|
|
const sourceList = (checklistData.lists || []).find((l) => l.items.some((i) => i.id === itemId));
|
|||
|
|
if (!sourceList || sourceList.id === targetListId) return;
|
|||
|
|
if (isMasterAdmin()) {
|
|||
|
|
const next = cloneState(checklistData);
|
|||
|
|
const src = next.lists.find((l) => l.id === sourceList.id);
|
|||
|
|
const dst = next.lists.find((l) => l.id === targetListId);
|
|||
|
|
if (!src || !dst) return;
|
|||
|
|
const idx = src.items.findIndex((i) => i.id === itemId);
|
|||
|
|
const [item] = src.items.splice(idx, 1);
|
|||
|
|
dst.items.push(item);
|
|||
|
|
pushAdminState(next).then((ok) => { if (ok) showToast(`Moved to "${dst.name}"`, 'success'); });
|
|||
|
|
} else {
|
|||
|
|
saveMutation(apiMoveItem(sourceList.id, itemId, targetListId)).then((ok) => { if (ok) showToast('Task moved', 'success'); });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Move a task to another SECTION of its own list (Monday → Tuesday) — the
|
|||
|
|
// in-list counterpart of moveItemTo. Master via the full-state push; scoped
|
|||
|
|
// editors via the item PUT ({group} alone — the server touches nothing else
|
|||
|
|
// and snaps unknown section ids to the default).
|
|||
|
|
function moveItemToGroup(itemId, groupId) {
|
|||
|
|
const sourceList = (checklistData.lists || []).find((l) => l.items.some((i) => i.id === itemId));
|
|||
|
|
if (!sourceList) return;
|
|||
|
|
const groups = taskGroupsOf(sourceList);
|
|||
|
|
const target = groups.find((g) => g.id === groupId);
|
|||
|
|
if (!target) return;
|
|||
|
|
justMovedItemId = itemId; // FLIP: the card flies across the section columns
|
|||
|
|
if (isMasterAdmin()) {
|
|||
|
|
const next = cloneState(checklistData);
|
|||
|
|
const item = next.lists.find((l) => l.id === sourceList.id).items.find((i) => i.id === itemId);
|
|||
|
|
if (!item || item.kind === 'note') return;
|
|||
|
|
item.group = groupId;
|
|||
|
|
pushAdminState(next).then((ok) => { if (ok) showToast(`Moved to "${target.name}"`, 'success'); });
|
|||
|
|
} else {
|
|||
|
|
saveMutation(apiUpdateItem(sourceList.id, itemId, { group: groupId })).then((ok) => { if (ok) showToast(`Moved to "${target.name}"`, 'success'); });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Keep a fixed popover fully on-screen, anchored under (or above) the button.
|
|||
|
|
function positionPopoverNear(panel, anchorEl) {
|
|||
|
|
panel.style.left = panel.style.top = panel.style.maxHeight = '';
|
|||
|
|
panel.style.display = 'flex';
|
|||
|
|
const margin = 8, vw = window.innerWidth, vh = window.innerHeight;
|
|||
|
|
panel.style.maxHeight = (vh - margin * 2) + 'px';
|
|||
|
|
const br = anchorEl.getBoundingClientRect();
|
|||
|
|
const pw = panel.offsetWidth, ph = Math.min(panel.scrollHeight, vh - margin * 2);
|
|||
|
|
const left = Math.max(margin, Math.min(br.left, vw - pw - margin));
|
|||
|
|
let top;
|
|||
|
|
if (ph <= vh - br.bottom - margin) top = br.bottom + 6; // below the button
|
|||
|
|
else if (ph <= br.top - margin) top = br.top - ph - 6; // flip above
|
|||
|
|
else top = margin; // clamp + scroll
|
|||
|
|
panel.style.left = left + 'px';
|
|||
|
|
panel.style.top = top + 'px';
|
|||
|
|
}
|
|||
|
|
let moveMenuOpen = false;
|
|||
|
|
function openMovePopover(itemId, anchorBtn) {
|
|||
|
|
if (!moveMenu) { openMoveItemModal(itemId); return; } // fallback
|
|||
|
|
const sourceList = (checklistData.lists || []).find((l) => l.items.some((i) => i.id === itemId));
|
|||
|
|
const candidates = (isMasterAdmin() ? (checklistData.lists || []) : editableLists())
|
|||
|
|
.filter((l) => !sourceList || l.id !== sourceList.id);
|
|||
|
|
// This list's OTHER sections (Monday → Tuesday…) come first — a task can
|
|||
|
|
// move between sections right here, not just to another list entirely.
|
|||
|
|
// Notes have no section; single-section lists skip the block.
|
|||
|
|
let sectionOpts = [];
|
|||
|
|
if (sourceList) {
|
|||
|
|
const item = sourceList.items.find((i) => i.id === itemId);
|
|||
|
|
const groups = taskGroupsOf(sourceList);
|
|||
|
|
if (item && item.kind !== 'note' && groups.length > 1) {
|
|||
|
|
const cur = itemGroupId(item, groups);
|
|||
|
|
sectionOpts = groups.filter((g) => g.id !== cur);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (!candidates.length && !sectionOpts.length) { showToast('No other list or section to move this to', 'error'); return; }
|
|||
|
|
const sectionHtml = sectionOpts.length
|
|||
|
|
? '<div class="move-menu-head">Move to section…</div>' + sectionOpts.map((g) =>
|
|||
|
|
`<button type="button" class="move-opt" data-move-group="${escapeAttr(g.id)}"><span class="move-dot move-dot-section" aria-hidden="true"></span><span class="move-opt-name">${escapeHtml(g.name)}</span></button>`
|
|||
|
|
).join('')
|
|||
|
|
: '';
|
|||
|
|
const listHtml = candidates.length
|
|||
|
|
? `<div class="move-menu-head">${sectionOpts.length ? 'Or another list…' : 'Move to…'}</div>` + candidates.map((l) => {
|
|||
|
|
const scope = [abbrevForLocation(l.location), (l.team || '').trim()].filter(Boolean).join(' · ');
|
|||
|
|
const dot = `<span class="move-dot" style="background:${escapeAttr(colorHex(l.color) || '#8a93a6')}"></span>`;
|
|||
|
|
const tag = scope ? `<span class="move-scope">${escapeHtml(scope)}</span>` : '';
|
|||
|
|
return `<button type="button" class="move-opt" data-move-target="${escapeAttr(l.id)}">${dot}<span class="move-opt-name">${escapeHtml(l.name)}</span>${tag}</button>`;
|
|||
|
|
}).join('')
|
|||
|
|
: '';
|
|||
|
|
moveMenu.innerHTML = sectionHtml + listHtml;
|
|||
|
|
moveMenu.dataset.itemId = itemId;
|
|||
|
|
moveMenu.classList.add('open');
|
|||
|
|
if (moveMenuBackdrop) moveMenuBackdrop.style.display = 'block';
|
|||
|
|
positionPopoverNear(moveMenu, anchorBtn);
|
|||
|
|
moveMenuOpen = true;
|
|||
|
|
}
|
|||
|
|
function closeMovePopover() {
|
|||
|
|
if (!moveMenu) return;
|
|||
|
|
moveMenuOpen = false;
|
|||
|
|
if (moveMenuBackdrop) moveMenuBackdrop.style.display = 'none';
|
|||
|
|
clearTimeout(moveMenu._closeTimer);
|
|||
|
|
const hide = () => {
|
|||
|
|
moveMenu.classList.remove('open', 'closing');
|
|||
|
|
moveMenu.style.display = 'none';
|
|||
|
|
moveMenu.style.left = moveMenu.style.top = moveMenu.style.maxHeight = '';
|
|||
|
|
};
|
|||
|
|
const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|||
|
|
if (reduce || moveMenu.style.display === 'none') { hide(); return; }
|
|||
|
|
moveMenu.classList.add('closing'); // keeps .open (+ scroll lock) until the fade-out ends
|
|||
|
|
moveMenu._closeTimer = setTimeout(hide, 160);
|
|||
|
|
}
|
|||
|
|
function setupMovePopover() {
|
|||
|
|
if (!moveMenu) return;
|
|||
|
|
moveMenu.addEventListener('click', (e) => {
|
|||
|
|
const grp = e.target.closest('button[data-move-group]');
|
|||
|
|
if (grp) {
|
|||
|
|
const itemId = moveMenu.dataset.itemId;
|
|||
|
|
closeMovePopover();
|
|||
|
|
if (itemId) moveItemToGroup(itemId, grp.dataset.moveGroup);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const opt = e.target.closest('button[data-move-target]');
|
|||
|
|
if (!opt) return;
|
|||
|
|
const itemId = moveMenu.dataset.itemId;
|
|||
|
|
closeMovePopover();
|
|||
|
|
if (itemId) moveItemTo(itemId, opt.dataset.moveTarget);
|
|||
|
|
});
|
|||
|
|
if (moveMenuBackdrop) moveMenuBackdrop.addEventListener('click', closeMovePopover);
|
|||
|
|
document.addEventListener('click', (e) => {
|
|||
|
|
if (moveMenuOpen && !moveMenu.contains(e.target) && !(e.target.closest && e.target.closest('[data-action="move"]'))) closeMovePopover();
|
|||
|
|
});
|
|||
|
|
document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && moveMenuOpen) closeMovePopover(); });
|
|||
|
|
window.addEventListener('resize', () => { if (moveMenuOpen) closeMovePopover(); });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Import / Export ─────────────────────────────────────────
|
|||
|
|
function exportChecklists() {
|
|||
|
|
let data;
|
|||
|
|
if (isMasterAdmin()) {
|
|||
|
|
data = checklistData; // full backup
|
|||
|
|
} else {
|
|||
|
|
// Editors back up ONLY their own lists (never other teams' data). Include the
|
|||
|
|
// checks that belong to just those lists, keyed by their existing scope keys.
|
|||
|
|
const lists = visibleLists();
|
|||
|
|
const ids = new Set(lists.map((l) => l.id));
|
|||
|
|
const checks = {};
|
|||
|
|
const all = checklistData.checks || {};
|
|||
|
|
Object.keys(all).forEach((scope) => {
|
|||
|
|
const forScope = {};
|
|||
|
|
Object.keys(all[scope] || {}).forEach((listId) => { if (ids.has(listId)) forScope[listId] = all[scope][listId]; });
|
|||
|
|
if (Object.keys(forScope).length) checks[scope] = forScope;
|
|||
|
|
});
|
|||
|
|
data = {
|
|||
|
|
exported: { by: (currentUser && (currentUser.displayName || currentUser.username)) || 'editor', at: new Date().toISOString(), scope: 'my-lists' },
|
|||
|
|
lists,
|
|||
|
|
checks
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
const count = Array.isArray(data.lists) ? data.lists.length : 0;
|
|||
|
|
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
|||
|
|
const url = URL.createObjectURL(blob);
|
|||
|
|
const a = document.createElement('a');
|
|||
|
|
a.href = url;
|
|||
|
|
a.download = `checklists-${new Date().toISOString().slice(0, 10)}.json`;
|
|||
|
|
document.body.appendChild(a);
|
|||
|
|
a.click();
|
|||
|
|
a.remove();
|
|||
|
|
URL.revokeObjectURL(url);
|
|||
|
|
showToast(isMasterAdmin() ? 'Downloaded full backup' : `Downloaded ${count} of your list${count === 1 ? '' : 's'}`, 'success');
|
|||
|
|
}
|
|||
|
|
async function importChecklists(e) {
|
|||
|
|
const file = e.target.files && e.target.files[0];
|
|||
|
|
e.target.value = '';
|
|||
|
|
if (!file) return;
|
|||
|
|
try {
|
|||
|
|
const text = await file.text();
|
|||
|
|
const parsed = JSON.parse(text);
|
|||
|
|
const lists = (parsed && Array.isArray(parsed.lists)) ? parsed.lists : null;
|
|||
|
|
if (!lists) { showToast('Not a valid checklist export', 'error'); return; }
|
|||
|
|
if (!confirm(`Import ${lists.length} list(s)?\n\nExisting lists are refreshed, new ones added; lists outside your access are skipped.`)) return;
|
|||
|
|
// Server enforces scope: master restores any list; an executive only their own.
|
|||
|
|
const res = await apiPost('/api/import-lists', { lists });
|
|||
|
|
await refreshState({ showToastOnError: false });
|
|||
|
|
const msg = `Imported ${res.imported} list${res.imported === 1 ? '' : 's'}`
|
|||
|
|
+ (res.skipped ? ` · skipped ${res.skipped} outside your access` : '');
|
|||
|
|
showToast(msg, res.imported ? 'success' : 'error');
|
|||
|
|
} catch (err) {
|
|||
|
|
showToast('Import failed: ' + err.message, 'error');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function sendDigestNow() {
|
|||
|
|
if (!confirm('Email the report now to your area\'s recipients?')) return;
|
|||
|
|
try {
|
|||
|
|
const res = await apiPost('/api/send-report', {});
|
|||
|
|
showToast(`Report sent — ${res.sentCount} email${res.sentCount === 1 ? '' : 's'}`, 'success');
|
|||
|
|
} catch (err) {
|
|||
|
|
showToast('Failed to send: ' + err.message, 'error');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function duplicateCurrentList() {
|
|||
|
|
const list = getCurrentList();
|
|||
|
|
if (!list) { showToast('No list selected', 'error'); return; }
|
|||
|
|
const before = (isMasterAdmin() && !applyingHistory) ? snapshotStructure(checklistData) : null;
|
|||
|
|
try {
|
|||
|
|
const res = await apiPost('/api/lists/' + encodeURIComponent(list.id) + '/duplicate', {});
|
|||
|
|
await refreshState({ showToastOnError: false });
|
|||
|
|
if (res && res.id) setSelectedList(res.id);
|
|||
|
|
if (before) recordHistory({ type: 'structure', before: before, after: snapshotStructure(checklistData) });
|
|||
|
|
showToast(`Duplicated "${list.name}"`, 'success');
|
|||
|
|
} catch (err) {
|
|||
|
|
showToast('Duplicate failed: ' + err.message, 'error');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Drag & drop (admin only) ────────────────────────────────
|
|||
|
|
let dragListId = null;
|
|||
|
|
let dragItemId = null;
|
|||
|
|
let dragItemDone = false;
|
|||
|
|
|
|||
|
|
// List tabs render with draggable + ondragstart/ondragend only; the
|
|||
|
|
// dragover/drop logic lives on the #listTabs strip (wired once in
|
|||
|
|
// setupListTabDnd). Same win as the task cards: a vertical drop-line shows
|
|||
|
|
// exactly where the list will land — including past the last tab, so a list
|
|||
|
|
// can finally be dropped at the very end of the strip (the old
|
|||
|
|
// drop-onto-a-tab behavior could only insert before an existing tab).
|
|||
|
|
// Reposition the owned lists named in `orderedIds` into the array slots they
|
|||
|
|
// already occupy, in the given order — leaving every other list untouched. Mirrors
|
|||
|
|
// the server's /api/lists/reorder so master's optimistic client update matches.
|
|||
|
|
function applyPermuteWithinSlots(lists, orderedIds) {
|
|||
|
|
const idSet = new Set(orderedIds);
|
|||
|
|
const slots = [];
|
|||
|
|
for (let i = 0; i < lists.length; i++) if (idSet.has(lists[i].id)) slots.push(i);
|
|||
|
|
const byId = new Map(lists.map((l) => [l.id, l]));
|
|||
|
|
const ordered = orderedIds.map((id) => byId.get(id)).filter(Boolean);
|
|||
|
|
for (let k = 0; k < slots.length && k < ordered.length; k++) lists[slots[k]] = ordered[k];
|
|||
|
|
}
|
|||
|
|
// Commit a list reorder from either view. `orderedIds` is the desired order of a
|
|||
|
|
// set of list ids (the whole visible strip, or one tree team-group). Only ids the
|
|||
|
|
// caller OWNS are moved. Master uses the undoable full-state push; other editors
|
|||
|
|
// use the scoped reorder endpoint (order-only, so it records no undo diff).
|
|||
|
|
function commitListReorder(orderedIds) {
|
|||
|
|
const ownedIds = (orderedIds || []).filter((id) => {
|
|||
|
|
const l = (checklistData.lists || []).find((x) => x.id === id);
|
|||
|
|
return l && ownsListClient(l);
|
|||
|
|
});
|
|||
|
|
if (ownedIds.length < 2) return;
|
|||
|
|
// No-op guard: bail if the owned lists are already in this relative order.
|
|||
|
|
const cur = (checklistData.lists || []).map((l) => l.id).filter((id) => ownedIds.includes(id));
|
|||
|
|
if (cur.join(' ') === ownedIds.join(' ')) return;
|
|||
|
|
if (isMasterAdmin()) {
|
|||
|
|
const next = cloneState(checklistData);
|
|||
|
|
applyPermuteWithinSlots(next.lists, ownedIds);
|
|||
|
|
pushAdminState(next);
|
|||
|
|
} else {
|
|||
|
|
applyPermuteWithinSlots(checklistData.lists, ownedIds); // optimistic
|
|||
|
|
renderLists();
|
|||
|
|
saveMutation(apiReorderLists(ownedIds), null); // order-only → no undo entry
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onListDragStart(e, id) {
|
|||
|
|
const l = (checklistData.lists || []).find((x) => x.id === id);
|
|||
|
|
if (!ownsListClient(l)) return; // only lists you can edit are draggable
|
|||
|
|
dragListId = id;
|
|||
|
|
e.dataTransfer.effectAllowed = 'move';
|
|||
|
|
try { e.dataTransfer.setData('text/plain', id); } catch (_) {}
|
|||
|
|
const el = listTabs.querySelector(`.list-tab[data-list-id="${cssEscape(id)}"]`);
|
|||
|
|
if (el) setTimeout(() => { if (dragListId === id) el.classList.add('dragging'); }, 0);
|
|||
|
|
}
|
|||
|
|
function onListDragEnd() {
|
|||
|
|
dragListId = null;
|
|||
|
|
clearTabDropIndicator();
|
|||
|
|
clearTabDragging();
|
|||
|
|
}
|
|||
|
|
function clearTabDragging() {
|
|||
|
|
listTabs.querySelectorAll('.list-tab.dragging').forEach((el) => el.classList.remove('dragging'));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// The tab the dragged list should land *before* in the wrapping strip.
|
|||
|
|
// Prefer tabs on the cursor's row (Y within their span); within that row pick
|
|||
|
|
// the nearest tab and go before/after by the cursor's side of its centre.
|
|||
|
|
// null ⇒ past the last tab (end of strip).
|
|||
|
|
function getTabBeforeElement(container, x, y) {
|
|||
|
|
const tabs = [...container.querySelectorAll('.list-tab:not(.dragging)')];
|
|||
|
|
if (!tabs.length) return null;
|
|||
|
|
let pool = tabs.filter((t) => { const b = t.getBoundingClientRect(); return y >= b.top && y <= b.bottom; });
|
|||
|
|
if (!pool.length) {
|
|||
|
|
// Cursor is in a gap between rows (or above/below) — fall back to the nearest row by Y.
|
|||
|
|
let nb = null, nd = Infinity;
|
|||
|
|
for (const t of tabs) { const b = t.getBoundingClientRect(); const d = Math.abs(y - (b.top + b.height / 2)); if (d < nd) { nd = d; nb = b; } }
|
|||
|
|
if (nb) pool = tabs.filter((t) => { const b = t.getBoundingClientRect(); return b.top < nb.bottom && b.bottom > nb.top; });
|
|||
|
|
}
|
|||
|
|
if (!pool.length) return null;
|
|||
|
|
let best = null, bd = Infinity, before = true;
|
|||
|
|
for (const t of pool) { const b = t.getBoundingClientRect(); const cx = b.left + b.width / 2; const d = Math.abs(x - cx); if (d < bd) { bd = d; best = t; before = x < cx; } }
|
|||
|
|
if (!best) return null;
|
|||
|
|
if (before) return best;
|
|||
|
|
let n = best.nextElementSibling; // after `best` ⇒ before the next tab in DOM order
|
|||
|
|
while (n && !(n.classList && n.classList.contains('list-tab'))) n = n.nextElementSibling;
|
|||
|
|
return n || null;
|
|||
|
|
}
|
|||
|
|
let tabDropIndicator = null;
|
|||
|
|
function getTabDropIndicator() {
|
|||
|
|
if (!tabDropIndicator) {
|
|||
|
|
tabDropIndicator = document.createElement('div');
|
|||
|
|
tabDropIndicator.className = 'tab-drop-indicator';
|
|||
|
|
tabDropIndicator.setAttribute('aria-hidden', 'true');
|
|||
|
|
}
|
|||
|
|
return tabDropIndicator;
|
|||
|
|
}
|
|||
|
|
function clearTabDropIndicator() {
|
|||
|
|
if (tabDropIndicator && tabDropIndicator.parentNode) tabDropIndicator.parentNode.removeChild(tabDropIndicator);
|
|||
|
|
}
|
|||
|
|
function onListStripDragOver(e) {
|
|||
|
|
if (!dragListId) return; // only while reordering a list you own (dragListId is set only then)
|
|||
|
|
e.preventDefault();
|
|||
|
|
e.dataTransfer.dropEffect = 'move';
|
|||
|
|
const before = getTabBeforeElement(listTabs, e.clientX, e.clientY);
|
|||
|
|
const ind = getTabDropIndicator();
|
|||
|
|
if (before) { if (before.previousElementSibling !== ind) listTabs.insertBefore(ind, before); }
|
|||
|
|
else if (listTabs.lastElementChild !== ind) listTabs.appendChild(ind);
|
|||
|
|
}
|
|||
|
|
function onListStripDragLeave(e) {
|
|||
|
|
if (!e.relatedTarget || !listTabs.contains(e.relatedTarget)) clearTabDropIndicator();
|
|||
|
|
}
|
|||
|
|
function onListStripDrop(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
const ind = getTabDropIndicator();
|
|||
|
|
let beforeId = null;
|
|||
|
|
if (ind.parentNode === listTabs) {
|
|||
|
|
let sib = ind.nextElementSibling;
|
|||
|
|
while (sib && !(sib.classList && sib.classList.contains('list-tab'))) sib = sib.nextElementSibling;
|
|||
|
|
if (sib) beforeId = sib.getAttribute('data-list-id');
|
|||
|
|
}
|
|||
|
|
const movedId = dragListId;
|
|||
|
|
dragListId = null;
|
|||
|
|
clearTabDropIndicator();
|
|||
|
|
clearTabDragging();
|
|||
|
|
if (!movedId) return;
|
|||
|
|
// Build the new order of the VISIBLE strip with movedId dropped before
|
|||
|
|
// beforeId (or appended at the end). commitListReorder then repositions only
|
|||
|
|
// the lists the caller owns, within their own slots — so nothing else moves.
|
|||
|
|
const visIds = visibleLists().map((l) => l.id).filter((id) => id !== movedId);
|
|||
|
|
let at = beforeId ? visIds.indexOf(beforeId) : -1;
|
|||
|
|
if (at < 0) at = visIds.length;
|
|||
|
|
visIds.splice(at, 0, movedId);
|
|||
|
|
commitListReorder(visIds);
|
|||
|
|
}
|
|||
|
|
function setupListTabDnd() {
|
|||
|
|
if (!listTabs) return;
|
|||
|
|
listTabs.addEventListener('dragover', onListStripDragOver);
|
|||
|
|
listTabs.addEventListener('drop', onListStripDrop);
|
|||
|
|
listTabs.addEventListener('dragleave', onListStripDragLeave);
|
|||
|
|
}
|
|||
|
|
setupListTabDnd();
|
|||
|
|
|
|||
|
|
// ── Tree-view list reorder (drag a leaf within its team group) ──
|
|||
|
|
// Mirrors the tab-strip DnD but vertical and scoped to one team group, so a leaf
|
|||
|
|
// can only be reordered among its siblings (dragging never re-homes a list to a
|
|||
|
|
// different location/team). commitListReorder handles ownership + persistence.
|
|||
|
|
let dragTreeId = null, dragTreeGroup = null, treeDropIndicator = null;
|
|||
|
|
function onTreeLeafDragStart(e, id) {
|
|||
|
|
const l = (checklistData.lists || []).find((x) => x.id === id);
|
|||
|
|
if (!ownsListClient(l)) { try { e.preventDefault(); } catch (_) {} return; }
|
|||
|
|
dragTreeId = id;
|
|||
|
|
dragTreeGroup = e.currentTarget ? e.currentTarget.getAttribute('data-tree-group') : null;
|
|||
|
|
e.dataTransfer.effectAllowed = 'move';
|
|||
|
|
try { e.dataTransfer.setData('text/plain', id); } catch (_) {}
|
|||
|
|
const el = e.currentTarget;
|
|||
|
|
if (el) setTimeout(() => { if (dragTreeId === id) el.classList.add('dragging'); }, 0);
|
|||
|
|
}
|
|||
|
|
function onTreeLeafDragEnd() {
|
|||
|
|
dragTreeId = null; dragTreeGroup = null;
|
|||
|
|
clearTreeDropIndicator();
|
|||
|
|
if (listTree) listTree.querySelectorAll('.tree-leaf.dragging').forEach((el) => el.classList.remove('dragging'));
|
|||
|
|
}
|
|||
|
|
function getTreeDropIndicator() {
|
|||
|
|
if (!treeDropIndicator) {
|
|||
|
|
treeDropIndicator = document.createElement('div');
|
|||
|
|
treeDropIndicator.className = 'tree-drop-indicator';
|
|||
|
|
treeDropIndicator.setAttribute('aria-hidden', 'true');
|
|||
|
|
}
|
|||
|
|
return treeDropIndicator;
|
|||
|
|
}
|
|||
|
|
function clearTreeDropIndicator() {
|
|||
|
|
if (treeDropIndicator && treeDropIndicator.parentNode) treeDropIndicator.parentNode.removeChild(treeDropIndicator);
|
|||
|
|
}
|
|||
|
|
function treeGroupLeaves() {
|
|||
|
|
if (!listTree || !dragTreeGroup) return [];
|
|||
|
|
return [...listTree.querySelectorAll(`.tree-leaf[data-tree-group="${cssEscape(dragTreeGroup)}"]:not(.dragging)`)];
|
|||
|
|
}
|
|||
|
|
function getTreeBeforeElement(y) {
|
|||
|
|
for (const el of treeGroupLeaves()) {
|
|||
|
|
const b = el.getBoundingClientRect();
|
|||
|
|
if (y < b.top + b.height / 2) return el; // land before the first leaf whose midpoint is below the cursor
|
|||
|
|
}
|
|||
|
|
return null; // past the last leaf of the group
|
|||
|
|
}
|
|||
|
|
function onTreeDragOver(e) {
|
|||
|
|
if (!dragTreeId || !dragTreeGroup) return;
|
|||
|
|
e.preventDefault();
|
|||
|
|
e.dataTransfer.dropEffect = 'move';
|
|||
|
|
const before = getTreeBeforeElement(e.clientY);
|
|||
|
|
const ind = getTreeDropIndicator();
|
|||
|
|
if (before) { if (before.previousElementSibling !== ind) before.parentNode.insertBefore(ind, before); }
|
|||
|
|
else {
|
|||
|
|
const leaves = treeGroupLeaves();
|
|||
|
|
const last = leaves[leaves.length - 1];
|
|||
|
|
if (last && last.nextElementSibling !== ind) last.parentNode.insertBefore(ind, last.nextElementSibling);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function onTreeDragLeave(e) {
|
|||
|
|
if (!e.relatedTarget || !listTree.contains(e.relatedTarget)) clearTreeDropIndicator();
|
|||
|
|
}
|
|||
|
|
function onTreeDrop(e) {
|
|||
|
|
if (!dragTreeId || !dragTreeGroup) return;
|
|||
|
|
e.preventDefault();
|
|||
|
|
const movedId = dragTreeId, group = dragTreeGroup;
|
|||
|
|
const ind = getTreeDropIndicator();
|
|||
|
|
let beforeId = null;
|
|||
|
|
if (ind.parentNode) {
|
|||
|
|
let sib = ind.nextElementSibling;
|
|||
|
|
while (sib && !(sib.classList && sib.classList.contains('tree-leaf'))) sib = sib.nextElementSibling;
|
|||
|
|
if (sib) beforeId = sib.getAttribute('data-tree-list');
|
|||
|
|
}
|
|||
|
|
dragTreeId = null; dragTreeGroup = null;
|
|||
|
|
clearTreeDropIndicator();
|
|||
|
|
if (listTree) listTree.querySelectorAll('.tree-leaf.dragging').forEach((el) => el.classList.remove('dragging'));
|
|||
|
|
// New order of this group's leaves, with movedId dropped before beforeId (or at the end).
|
|||
|
|
const groupIds = [...listTree.querySelectorAll(`.tree-leaf[data-tree-group="${cssEscape(group)}"]`)]
|
|||
|
|
.map((el) => el.getAttribute('data-tree-list'));
|
|||
|
|
const order = groupIds.filter((id) => id !== movedId);
|
|||
|
|
let at = beforeId ? order.indexOf(beforeId) : -1;
|
|||
|
|
if (at < 0) at = order.length;
|
|||
|
|
order.splice(at, 0, movedId);
|
|||
|
|
commitListReorder(order);
|
|||
|
|
}
|
|||
|
|
function setupListTreeDnd() {
|
|||
|
|
if (!listTree) return;
|
|||
|
|
listTree.addEventListener('dragover', onTreeDragOver);
|
|||
|
|
listTree.addEventListener('drop', onTreeDrop);
|
|||
|
|
listTree.addEventListener('dragleave', onTreeDragLeave);
|
|||
|
|
}
|
|||
|
|
setupListTreeDnd();
|
|||
|
|
|
|||
|
|
// Task cards render with draggable + ondragstart/ondragend only; the
|
|||
|
|
// dragover/drop logic lives on the To Do / Done *columns* (wired once in
|
|||
|
|
// setupItemDnd) so you can drop into the empty space below the last card —
|
|||
|
|
// i.e. land a task at the very bottom of the list, which the old
|
|||
|
|
// drop-onto-a-card behavior could never do. A blue drop-line shows exactly
|
|||
|
|
// where the card will land instead of highlighting (swapping) a card.
|
|||
|
|
let dropIndicator = null;
|
|||
|
|
function getDropIndicator() {
|
|||
|
|
if (!dropIndicator) {
|
|||
|
|
dropIndicator = document.createElement('div');
|
|||
|
|
dropIndicator.className = 'drop-indicator';
|
|||
|
|
dropIndicator.setAttribute('aria-hidden', 'true');
|
|||
|
|
}
|
|||
|
|
return dropIndicator;
|
|||
|
|
}
|
|||
|
|
function clearDropIndicator() {
|
|||
|
|
if (dropIndicator && dropIndicator.parentNode) dropIndicator.parentNode.removeChild(dropIndicator);
|
|||
|
|
}
|
|||
|
|
function clearDragging() {
|
|||
|
|
document.querySelectorAll('.checklist-item.dragging').forEach((el) => el.classList.remove('dragging'));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Drag-reorder of TASKS is allowed for any editor who owns the current list (master, team
|
|||
|
|
// admin, or in-scope executive). Master persists via pushAdminState; the rest via the scoped
|
|||
|
|
// reorder endpoint. (Reordering the list TABS themselves stays master-only — separate concern.)
|
|||
|
|
function canReorderCurrentList() { return isEditor() && ownsListClient(getCurrentList()); }
|
|||
|
|
|
|||
|
|
function onItemDragStart(e, id, isDone) {
|
|||
|
|
if (!canReorderCurrentList()) return;
|
|||
|
|
dragItemId = id;
|
|||
|
|
dragItemDone = !!isDone;
|
|||
|
|
e.dataTransfer.effectAllowed = 'move';
|
|||
|
|
try { e.dataTransfer.setData('text/plain', id); } catch (_) {}
|
|||
|
|
// Defer the dim so the drag ghost is snapshotted at full opacity.
|
|||
|
|
const el = findItemEl(id);
|
|||
|
|
if (el) setTimeout(() => { if (dragItemId === id) el.classList.add('dragging'); }, 0);
|
|||
|
|
}
|
|||
|
|
function onItemDragEnd() {
|
|||
|
|
dragItemId = null;
|
|||
|
|
clearDropIndicator();
|
|||
|
|
clearDragging();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// The card the dragged item should land *before*: the first card whose
|
|||
|
|
// vertical midpoint is below the cursor. null ⇒ past the last card (end).
|
|||
|
|
function getDragBeforeElement(container, y) {
|
|||
|
|
const cards = container.querySelectorAll('.checklist-item:not(.dragging)');
|
|||
|
|
for (const card of cards) {
|
|||
|
|
const box = card.getBoundingClientRect();
|
|||
|
|
if (y < box.top + box.height / 2) return card;
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onColumnDragOver(e, columnIsDone) {
|
|||
|
|
if (!canReorderCurrentList() || !dragItemId) return;
|
|||
|
|
if (dragItemDone !== !!columnIsDone) return; // same column only (use the checkbox to move To Do ↔ Done)
|
|||
|
|
e.preventDefault();
|
|||
|
|
e.dataTransfer.dropEffect = 'move';
|
|||
|
|
const container = columnIsDone ? doneList : todoList;
|
|||
|
|
const before = getDragBeforeElement(container, e.clientY);
|
|||
|
|
const ind = getDropIndicator();
|
|||
|
|
if (before) { if (before.previousElementSibling !== ind) container.insertBefore(ind, before); }
|
|||
|
|
else if (container.lastElementChild !== ind) container.appendChild(ind);
|
|||
|
|
}
|
|||
|
|
function onColumnDragLeave(e, columnIsDone) {
|
|||
|
|
const container = columnIsDone ? doneList : todoList;
|
|||
|
|
// Only clear when the pointer truly leaves the column — not when crossing
|
|||
|
|
// between cards inside it (relatedTarget = where the pointer is heading).
|
|||
|
|
if (!e.relatedTarget || !container.contains(e.relatedTarget)) clearDropIndicator();
|
|||
|
|
}
|
|||
|
|
function onColumnDrop(e, columnIsDone) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
const container = columnIsDone ? doneList : todoList;
|
|||
|
|
const ind = getDropIndicator();
|
|||
|
|
// Resolve the drop slot from the indicator's position BEFORE clearing it.
|
|||
|
|
let beforeId = null;
|
|||
|
|
if (ind.parentNode === container) {
|
|||
|
|
let sib = ind.nextElementSibling;
|
|||
|
|
while (sib && !sib.classList.contains('checklist-item')) sib = sib.nextElementSibling;
|
|||
|
|
if (sib) beforeId = sib.getAttribute('data-item-id');
|
|||
|
|
}
|
|||
|
|
const visible = [...container.querySelectorAll('.checklist-item:not(.dragging)')];
|
|||
|
|
const lastVisibleId = visible.length ? visible[visible.length - 1].getAttribute('data-item-id') : null;
|
|||
|
|
const movedId = dragItemId;
|
|||
|
|
|
|||
|
|
dragItemId = null;
|
|||
|
|
clearDropIndicator();
|
|||
|
|
clearDragging();
|
|||
|
|
|
|||
|
|
if (!canReorderCurrentList() || !movedId || dragItemDone !== !!columnIsDone) return;
|
|||
|
|
const list = getCurrentList();
|
|||
|
|
if (!list) return;
|
|||
|
|
const next = cloneState(checklistData);
|
|||
|
|
const nextList = next.lists.find((l) => l.id === list.id);
|
|||
|
|
if (!nextList) return;
|
|||
|
|
const items = nextList.items;
|
|||
|
|
const fromIdx = items.findIndex((i) => i.id === movedId);
|
|||
|
|
if (fromIdx < 0) return;
|
|||
|
|
const [moved] = items.splice(fromIdx, 1);
|
|||
|
|
let insertAt;
|
|||
|
|
if (beforeId && beforeId !== movedId) {
|
|||
|
|
insertAt = items.findIndex((i) => i.id === beforeId); // land just above that card
|
|||
|
|
} else if (lastVisibleId && lastVisibleId !== movedId) {
|
|||
|
|
insertAt = items.findIndex((i) => i.id === lastVisibleId) + 1; // past the last card → bottom of the list
|
|||
|
|
} else {
|
|||
|
|
insertAt = items.length;
|
|||
|
|
}
|
|||
|
|
if (insertAt < 0) insertAt = items.length;
|
|||
|
|
items.splice(insertAt, 0, moved);
|
|||
|
|
justMovedItemId = movedId; // flash it into its new spot
|
|||
|
|
if (isMasterAdmin()) {
|
|||
|
|
pushAdminState(next); // master: full-state save (keeps undo + works on global lists)
|
|||
|
|
} else {
|
|||
|
|
// Executive / team admin: apply the new order optimistically, then persist it via the
|
|||
|
|
// scoped reorder endpoint. Snapshot owned lists BEFORE the optimistic mutation so
|
|||
|
|
// saveMutation can diff old→new order and record the reorder for their undo history.
|
|||
|
|
const reorderBefore = (!applyingHistory && isEditor()) ? ownedListMap() : null;
|
|||
|
|
const liveList = (checklistData.lists || []).find((l) => l.id === list.id);
|
|||
|
|
if (liveList) liveList.items = items;
|
|||
|
|
renderLists();
|
|||
|
|
saveMutation(apiReorderItems(list.id, items.map((i) => i.id)), reorderBefore);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function setupItemDnd() {
|
|||
|
|
if (!todoList || !doneList) return;
|
|||
|
|
todoList.addEventListener('dragover', (e) => onColumnDragOver(e, false));
|
|||
|
|
todoList.addEventListener('drop', (e) => onColumnDrop(e, false));
|
|||
|
|
todoList.addEventListener('dragleave', (e) => onColumnDragLeave(e, false));
|
|||
|
|
doneList.addEventListener('dragover', (e) => onColumnDragOver(e, true));
|
|||
|
|
doneList.addEventListener('drop', (e) => onColumnDrop(e, true));
|
|||
|
|
doneList.addEventListener('dragleave', (e) => onColumnDragLeave(e, true));
|
|||
|
|
}
|
|||
|
|
setupItemDnd();
|
|||
|
|
|
|||
|
|
function findItemEl(id) {
|
|||
|
|
return document.querySelector(`.checklist-item[data-item-id="${cssEscape(id)}"]`);
|
|||
|
|
}
|
|||
|
|
function cssEscape(s) {
|
|||
|
|
if (window.CSS && CSS.escape) return CSS.escape(s);
|
|||
|
|
return String(s).replace(/"/g, '\\"');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.onListDragStart = onListDragStart;
|
|||
|
|
window.onListDragEnd = onListDragEnd;
|
|||
|
|
window.onItemDragStart = onItemDragStart;
|
|||
|
|
window.onItemDragEnd = onItemDragEnd;
|
|||
|
|
window.onTreeLeafDragStart = onTreeLeafDragStart;
|
|||
|
|
window.onTreeLeafDragEnd = onTreeLeafDragEnd;
|
|||
|
|
|
|||
|
|
// ─── Helpers ─────────────────────────────────────────────────
|
|||
|
|
function cloneState(s) { return JSON.parse(JSON.stringify(s)); }
|
|||
|
|
function escapeHtml(text) {
|
|||
|
|
return String(text == null ? '' : text)
|
|||
|
|
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
|||
|
|
.replace(/"/g, '"').replace(/'/g, ''');
|
|||
|
|
}
|
|||
|
|
function escapeAttr(text) {
|
|||
|
|
return String(text == null ? '' : text).replace(/"/g, '"').replace(/'/g, ''');
|
|||
|
|
}
|
|||
|
|
function showToast(message, kind) {
|
|||
|
|
toast.textContent = message;
|
|||
|
|
toast.className = 'toast show' + (kind ? ' ' + kind : '');
|
|||
|
|
clearTimeout(showToast._t);
|
|||
|
|
showToast._t = setTimeout(() => { toast.className = 'toast'; }, 3000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hideLoading() {
|
|||
|
|
const overlay = document.getElementById('loadingOverlay');
|
|||
|
|
if (overlay) overlay.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Service worker (PWA install support) ────────────────────
|
|||
|
|
// Web only. The native shells serve this bundle from the app itself, so a worker would
|
|||
|
|
// add a second invisible cache layer (and iOS's capacitor:// scheme can't host one).
|
|||
|
|
if ('serviceWorker' in navigator && !(window.CHECKLIST_NATIVE && window.CHECKLIST_NATIVE.active)) {
|
|||
|
|
window.addEventListener('load', () => {
|
|||
|
|
navigator.serviceWorker.register('/sw.js').catch(() => { /* non-fatal */ });
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── First-launch setup (native apps only) ───────────────────
|
|||
|
|
// The store build is installed by anyone, not just Waters, so it cannot assume which
|
|||
|
|
// server it talks to. This runs BEFORE sign-in and blocks boot until a server is chosen.
|
|||
|
|
// On the web it never appears — there the server is simply the origin the page came from.
|
|||
|
|
function openServerSetup() {
|
|||
|
|
const overlay = document.getElementById('setupOverlay');
|
|||
|
|
if (!overlay) return;
|
|||
|
|
const choices = document.getElementById('setupChoices');
|
|||
|
|
const join = document.getElementById('setupJoin');
|
|||
|
|
const hostInfo = document.getElementById('setupHostInfo');
|
|||
|
|
const addr = document.getElementById('setupAddress');
|
|||
|
|
const err = document.getElementById('setupError');
|
|||
|
|
const connect = document.getElementById('setupConnect');
|
|||
|
|
|
|||
|
|
const showErr = (m) => { err.textContent = m; err.style.display = m ? 'block' : 'none'; };
|
|||
|
|
const panel = (which) => {
|
|||
|
|
choices.style.display = which === 'choices' ? '' : 'none';
|
|||
|
|
join.style.display = which === 'join' ? '' : 'none';
|
|||
|
|
hostInfo.style.display = which === 'host' ? '' : 'none';
|
|||
|
|
showErr('');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
overlay.querySelectorAll('[data-setup]').forEach((btn) => {
|
|||
|
|
btn.addEventListener('click', () => {
|
|||
|
|
if (btn.dataset.setup === 'local') {
|
|||
|
|
// No address to validate and nothing to reach — the server is this device.
|
|||
|
|
window.CHECKLIST_NATIVE.setMode('local');
|
|||
|
|
location.reload();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (btn.dataset.setup === 'host') { panel('host'); return; }
|
|||
|
|
// Pre-fill the bundled suggestion so Waters volunteers just tap Connect.
|
|||
|
|
const suggested = (window.CHECKLIST_NATIVE && window.CHECKLIST_NATIVE.suggestedServer) || '';
|
|||
|
|
if (suggested && !addr.value) addr.value = suggested.replace(/^https?:\/\//, '');
|
|||
|
|
panel('join');
|
|||
|
|
setTimeout(() => addr.focus(), 50);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
document.getElementById('setupBack').addEventListener('click', () => panel('choices'));
|
|||
|
|
document.getElementById('setupHostBack').addEventListener('click', () => panel('choices'));
|
|||
|
|
document.getElementById('setupHostNext').addEventListener('click', () => { panel('join'); setTimeout(() => addr.focus(), 50); });
|
|||
|
|
addr.addEventListener('keydown', (e) => { if (e.key === 'Enter') connect.click(); });
|
|||
|
|
|
|||
|
|
connect.addEventListener('click', async () => {
|
|||
|
|
const url = normalizeServerUrl(addr.value);
|
|||
|
|
if (!url) { showErr('Enter your server address, for example checklist.yourchurch.org'); return; }
|
|||
|
|
connect.disabled = true; connect.textContent = 'Checking…'; showErr('');
|
|||
|
|
try {
|
|||
|
|
await probeServer(url);
|
|||
|
|
window.CHECKLIST_NATIVE.setMode('server');
|
|||
|
|
window.CHECKLIST_NATIVE.setServer(url);
|
|||
|
|
// Full reload rather than patching state in place: native-bridge reads the
|
|||
|
|
// server once at parse time to set up its fetch patch, so restarting is the
|
|||
|
|
// only way to get a consistent world.
|
|||
|
|
location.reload();
|
|||
|
|
} catch (e) {
|
|||
|
|
showErr(e.message);
|
|||
|
|
connect.disabled = false; connect.textContent = 'Connect';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
panel('choices');
|
|||
|
|
overlay.style.display = 'flex';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// "Change server" on the sign-in sheet — native only; on the web the server is the origin
|
|||
|
|
// and there is nothing to change. Clearing the token too, because a session from the old
|
|||
|
|
// server is meaningless on the new one and would otherwise look like a mysterious 401.
|
|||
|
|
(function wireChangeServer() {
|
|||
|
|
const N = window.CHECKLIST_NATIVE;
|
|||
|
|
if (!N || !N.active) return;
|
|||
|
|
const wrap = document.getElementById('changeServerWrap');
|
|||
|
|
const link = document.getElementById('changeServerLink');
|
|||
|
|
if (!wrap || !link) return;
|
|||
|
|
wrap.style.display = '';
|
|||
|
|
if (N.mode === 'local') link.textContent = 'Switch mode';
|
|||
|
|
link.addEventListener('click', (e) => { e.preventDefault(); switchAppMode(); });
|
|||
|
|
}());
|
|||
|
|
|
|||
|
|
// Drop back to the setup screen. Nothing stored is deleted — local checklists stay in
|
|||
|
|
// IndexedDB and are still there if the user picks on-device mode again.
|
|||
|
|
function switchAppMode() {
|
|||
|
|
const N = window.CHECKLIST_NATIVE;
|
|||
|
|
if (!N || !N.active) return;
|
|||
|
|
const where = (N.apiBase || '').replace(/^https?:\/\//, '');
|
|||
|
|
const msg = N.mode === 'local'
|
|||
|
|
? 'Leave on-device mode?\n\nYour checklists stay on this device and will still be here if you come back.'
|
|||
|
|
: 'Disconnect from ' + (where || 'this server') + ' and choose again?\n\nYou will need to sign in again.';
|
|||
|
|
if (!confirm(msg)) return;
|
|||
|
|
N.clearServer();
|
|||
|
|
try { localStorage.removeItem('checklist:token'); } catch (_) {}
|
|||
|
|
location.reload();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Accept what people actually type: "checklist.church.org", with or without a scheme,
|
|||
|
|
// with or without a trailing slash or a stray path.
|
|||
|
|
function normalizeServerUrl(raw) {
|
|||
|
|
let v = String(raw || '').trim();
|
|||
|
|
if (!v) return '';
|
|||
|
|
if (!/^https?:\/\//i.test(v)) v = 'https://' + v;
|
|||
|
|
try {
|
|||
|
|
const u = new URL(v);
|
|||
|
|
if (!u.hostname || u.hostname.indexOf('.') === -1) return '';
|
|||
|
|
return u.origin; // drops any path, query or fragment
|
|||
|
|
} catch (_) { return ''; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Confirm the address is really a checklist server before committing to it — otherwise
|
|||
|
|
// a typo is stored and every screen afterwards fails for a reason nobody can see.
|
|||
|
|
// Signed out, /api/me answers 401 with {"error": ...}; that pair is the fingerprint.
|
|||
|
|
async function probeServer(base) {
|
|||
|
|
let res;
|
|||
|
|
try {
|
|||
|
|
res = await fetch(base + '/api/me', { method: 'GET', headers: { 'Accept': 'application/json' } });
|
|||
|
|
} catch (_) {
|
|||
|
|
throw new Error('Could not reach ' + base.replace(/^https?:\/\//, '') + '. Check the address and that you are online.');
|
|||
|
|
}
|
|||
|
|
if (res.status === 200 || res.status === 401) {
|
|||
|
|
let body = null;
|
|||
|
|
try { body = await res.json(); } catch (_) {}
|
|||
|
|
if (body && (body.error || body.user)) return true;
|
|||
|
|
}
|
|||
|
|
throw new Error('That address answered, but it is not a Checklist server.');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Boot ────────────────────────────────────────────────────
|
|||
|
|
async function boot() {
|
|||
|
|
// No server chosen yet (native first launch). Everything below would fail, so stop
|
|||
|
|
// here: no API calls, no sign-in sheet, no polling until setup completes.
|
|||
|
|
if (window.CHECKLIST_NATIVE && window.CHECKLIST_NATIVE.needsSetup) {
|
|||
|
|
hideLoading();
|
|||
|
|
openServerSetup();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// Local mode has exactly one user and no network surface, so a sign-in sheet would be
|
|||
|
|
// pure friction. Authenticate automatically with the per-install password the local
|
|||
|
|
// runtime generated — the real login path still runs, nothing is bypassed.
|
|||
|
|
if (window.CHECKLIST_NATIVE && window.CHECKLIST_NATIVE.mode === 'local') {
|
|||
|
|
try {
|
|||
|
|
// ALWAYS re-authenticate, never reuse a stored token. server.js keeps sessions
|
|||
|
|
// in memory, and in local mode that memory is the app process — so every
|
|||
|
|
// relaunch starts with an empty session table and yesterday's token is
|
|||
|
|
// meaningless. Trusting it dropped the user on a sign-in sheet they have no
|
|||
|
|
// password for.
|
|||
|
|
const pw = await window.LocalServer.adminPassword();
|
|||
|
|
const data = await apiPost('/api/login', { location: 'executive', password: pw });
|
|||
|
|
sessionToken = data.token;
|
|||
|
|
localStorage.setItem('checklist:token', sessionToken);
|
|||
|
|
// Photos from earlier sessions need blob URLs before anything renders.
|
|||
|
|
if (window.CHECKLIST_NATIVE.indexLocalMedia) await window.CHECKLIST_NATIVE.indexLocalMedia();
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('local sign-in failed', e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (sessionToken) {
|
|||
|
|
try {
|
|||
|
|
const me = await apiGet('/api/me');
|
|||
|
|
applyUser(me.user);
|
|||
|
|
await refreshState();
|
|||
|
|
maybePromptChecker(); // returning checker with no name yet → pop the picker
|
|||
|
|
} catch (_) {
|
|||
|
|
// Token bad/expired; fall through to login prompt.
|
|||
|
|
sessionToken = '';
|
|||
|
|
localStorage.removeItem('checklist:token');
|
|||
|
|
applyUser(null);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
applyUser(null);
|
|||
|
|
}
|
|||
|
|
hideLoading();
|
|||
|
|
if (!sessionToken) openLogin();
|
|||
|
|
// Poll for state updates from other users
|
|||
|
|
pollTimer = setInterval(() => {
|
|||
|
|
if (!sessionToken || isSaving || isFlushing) return;
|
|||
|
|
if (editTaskModal.style.display === 'flex') return;
|
|||
|
|
if (listModal.style.display === 'flex') return;
|
|||
|
|
if (loginModal.style.display === 'flex') return;
|
|||
|
|
if (userMgmtModal.style.display === 'flex') return;
|
|||
|
|
if (addTaskModal && addTaskModal.style.display === 'flex') return;
|
|||
|
|
if (equipMgmtModal && equipMgmtModal.style.display === 'flex') return;
|
|||
|
|
if (equipModal && equipModal.style.display === 'flex') return;
|
|||
|
|
if (loadPending().length) { flushPendingChecks(); return; } // catch up before re-polling
|
|||
|
|
refreshState({ showToastOnError: false }).catch(() => {});
|
|||
|
|
}, 6000);
|
|||
|
|
// The native iOS/Android shells fire this when the app returns to the foreground. A
|
|||
|
|
// backgrounded WebView has its timers frozen, so the poll above is asleep while the
|
|||
|
|
// phone is pocketed — without an immediate refresh, reopening the app shows up to 6s
|
|||
|
|
// of stale check-offs, long enough for two volunteers to duplicate work. Nothing
|
|||
|
|
// dispatches this on the web, where the tab's poll never stops.
|
|||
|
|
window.addEventListener('checklist:resume', () => {
|
|||
|
|
if (!sessionToken || isSaving || isFlushing) return;
|
|||
|
|
if (loadPending().length) { flushPendingChecks(); return; }
|
|||
|
|
refreshState({ showToastOnError: false }).catch(() => {});
|
|||
|
|
});
|
|||
|
|
// Sync queued check-offs the moment the network returns.
|
|||
|
|
window.addEventListener('online', () => { updateOfflineUI(); flushPendingChecks(); });
|
|||
|
|
window.addEventListener('offline', updateOfflineUI);
|
|||
|
|
updateOfflineUI();
|
|||
|
|
if (sessionToken) flushPendingChecks(); // resume anything left from a prior offline session
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
boot();
|
|||
|
|
})();
|