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));