Add shared favorite location v0.4.2

app/static/app.js

@@ -12,6 +12,7 @@ const state = {
   map: null,
   mapMarker: null,
   locationDirty: false,
+  favoriteLocations: [],
 };
 
 const $ = (selector) => document.querySelector(selector);
@@ -68,6 +69,10 @@ const elements = {
   longitude: $('#longitude-input'),
   locationName: $('#location-name-input'),
   clearLocation: $('#clear-location'),
+  favoriteSelect: $('#favorite-location-select'),
+  useFavorite: $('#use-favorite-location'),
+  saveFavorite: $('#save-favorite-location'),
+  deleteFavorite: $('#delete-favorite-location'),
   saveStatus: $('#save-status'),
   shortcutsButton: $('#shortcuts-button'),
   shortcutsDialog: $('#shortcuts-dialog'),
@@ -134,6 +139,8 @@ function saveFolderState() {
 }
 
 async function openFolder() {
+  await loadFavoriteLocations();
+
   if (!isSupported()) {
     showToast('Use a current Chromium browser over HTTPS. Folder access is unavailable here.', true);
     return;
@@ -740,6 +747,123 @@ function clearLocation() {
   showToast('Location cleared. Save the photo to remove GPS metadata.');
 }
 
+function renderFavoriteLocations(selectedId = '') {
+  const favorites = state.favoriteLocations;
+  elements.favoriteSelect.innerHTML = '';
+  if (!favorites.length) {
+    const option = document.createElement('option');
+    option.value = '';
+    option.textContent = 'No favorites saved';
+    elements.favoriteSelect.appendChild(option);
+    elements.favoriteSelect.disabled = true;
+    elements.useFavorite.disabled = true;
+    elements.deleteFavorite.disabled = true;
+    return;
+  }
+
+  const placeholder = document.createElement('option');
+  placeholder.value = '';
+  placeholder.textContent = 'Choose a favorite…';
+  elements.favoriteSelect.appendChild(placeholder);
+  for (const favorite of favorites) {
+    const option = document.createElement('option');
+    option.value = favorite.id;
+    option.textContent = `${favorite.name} — ${Number(favorite.latitude).toFixed(5)}, ${Number(favorite.longitude).toFixed(5)}`;
+    elements.favoriteSelect.appendChild(option);
+  }
+  elements.favoriteSelect.disabled = false;
+  elements.favoriteSelect.value = favorites.some((item) => item.id === selectedId) ? selectedId : '';
+  updateFavoriteButtons();
+}
+
+function updateFavoriteButtons() {
+  const selected = Boolean(elements.favoriteSelect.value);
+  elements.useFavorite.disabled = !selected;
+  elements.deleteFavorite.disabled = !selected;
+}
+
+async function loadFavoriteLocations(selectedId = '') {
+  try {
+    const response = await fetch('/api/favorites', { cache: 'no-store' });
+    if (!response.ok) throw new Error(`Could not load favorites (${response.status}).`);
+    const data = await response.json();
+    state.favoriteLocations = Array.isArray(data.favorites) ? data.favorites : [];
+    renderFavoriteLocations(selectedId);
+  } catch (error) {
+    state.favoriteLocations = [];
+    renderFavoriteLocations();
+    showToast(error.message || 'Could not load favorite locations.', true);
+  }
+}
+
+function useSelectedFavorite() {
+  const favorite = state.favoriteLocations.find((item) => item.id === elements.favoriteSelect.value);
+  if (!favorite) return;
+  setLocation(favorite.latitude, favorite.longitude, favorite.name, true, true);
+  showToast(`Location set to ${favorite.name}.`);
+}
+
+async function saveCurrentAsFavorite() {
+  if (!validCoordinates(elements.latitude.value, elements.longitude.value)) {
+    showToast('Set a valid location before saving it as a favorite.', true);
+    return;
+  }
+  const suggested = elements.locationName.value.trim() || 'Favorite location';
+  const entered = window.prompt('Name this favorite location:', suggested);
+  if (entered === null) return;
+  const name = entered.trim();
+  if (!name) {
+    showToast('Favorite name cannot be empty.', true);
+    return;
+  }
+
+  elements.saveFavorite.disabled = true;
+  try {
+    const response = await fetch('/api/favorites', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        name,
+        latitude: Number(elements.latitude.value),
+        longitude: Number(elements.longitude.value),
+      }),
+    });
+    if (!response.ok) {
+      let message = `Could not save favorite (${response.status}).`;
+      try { message = (await response.json()).detail || message; } catch {}
+      throw new Error(message);
+    }
+    const data = await response.json();
+    await loadFavoriteLocations(data.favorite?.id || '');
+    showToast(`${name} added to favorite locations.`);
+  } catch (error) {
+    showToast(error.message || 'Could not save favorite location.', true);
+  } finally {
+    elements.saveFavorite.disabled = false;
+  }
+}
+
+async function deleteSelectedFavorite() {
+  const favorite = state.favoriteLocations.find((item) => item.id === elements.favoriteSelect.value);
+  if (!favorite) return;
+  if (!window.confirm(`Delete favorite location “${favorite.name}”?`)) return;
+
+  elements.deleteFavorite.disabled = true;
+  try {
+    const response = await fetch(`/api/favorites/${encodeURIComponent(favorite.id)}`, { method: 'DELETE' });
+    if (!response.ok) {
+      let message = `Could not delete favorite (${response.status}).`;
+      try { message = (await response.json()).detail || message; } catch {}
+      throw new Error(message);
+    }
+    await loadFavoriteLocations();
+    showToast(`${favorite.name} removed from favorite locations.`);
+  } catch (error) {
+    showToast(error.message || 'Could not delete favorite location.', true);
+    updateFavoriteButtons();
+  }
+}
+
 async function searchAddress() {
   const query = elements.addressSearch.value.trim();
   if (query.length < 3) {
@@ -799,6 +923,10 @@ elements.copyPrevious.addEventListener('click', copyPreviousValues);
 elements.addressSearchButton.addEventListener('click', searchAddress);
 elements.addressSearch.addEventListener('keydown', (event) => { if (event.key === 'Enter') { event.preventDefault(); searchAddress(); } });
 elements.clearLocation.addEventListener('click', clearLocation);
+elements.favoriteSelect.addEventListener('change', updateFavoriteButtons);
+elements.useFavorite.addEventListener('click', useSelectedFavorite);
+elements.saveFavorite.addEventListener('click', saveCurrentAsFavorite);
+elements.deleteFavorite.addEventListener('click', deleteSelectedFavorite);
 for (const input of [elements.latitude, elements.longitude]) {
   input.addEventListener('input', () => { state.locationDirty = true; syncMapFromFields(false); });
   input.addEventListener('change', () => syncMapFromFields(true));

app/static/index.html

@@ -197,6 +197,25 @@
           </section>
 
           <section id="panel-location" class="tab-panel" data-panel="location" role="tabpanel" aria-labelledby="tab-location">
+            <div class="favorite-locations">
+              <div class="section-heading-row">
+                <div>
+                  <strong>Favorite locations</strong>
+                  <span>Shared by everyone using this Docker stack</span>
+                </div>
+              </div>
+              <div class="favorite-controls">
+                <select id="favorite-location-select" class="input" aria-label="Favorite locations">
+                  <option value="">No favorites saved</option>
+                </select>
+                <button id="use-favorite-location" class="button" type="button" disabled>Use</button>
+              </div>
+              <div class="favorite-actions">
+                <button id="save-favorite-location" class="button ghost" type="button">★ Add current location</button>
+                <button id="delete-favorite-location" class="button ghost danger-text" type="button" disabled>Delete selected</button>
+              </div>
+            </div>
+
             <div class="location-search">
               <label class="field location-search-field">
                 <span>Search for a place or address</span>

app/static/service-worker.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'photo-date-editor-v4-1';
+const CACHE_NAME = 'photo-date-editor-v4-2';
 const SHELL = ['/', '/styles.css', '/app.js', '/manifest.webmanifest', '/vendor/leaflet/leaflet.css', '/vendor/leaflet/leaflet.js'];
 
 self.addEventListener('install', (event) => {

app/static/styles.css

@@ -139,3 +139,19 @@ fieldset { border: 0; padding: 0; margin: 0 0 22px; } legend { font-weight: 650;
 .search-privacy { margin: 7px 0 0; }
 .map-status { margin-top: 8px; min-height: 1.2em; }
 .map-status.error { color: var(--danger); }
+
+/* v0.4.2 shared favorite locations */
+.favorite-locations {
+  margin: 0 0 18px;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: rgba(16, 23, 31, .72);
+}
+.section-heading-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
+.section-heading-row strong, .section-heading-row span { display: block; }
+.section-heading-row strong { font-size: 12px; }
+.section-heading-row span { margin-top: 2px; color: var(--muted); font-size: 10px; }
+.favorite-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
+.favorite-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 8px; }
+.danger-text { color: var(--danger); }