feat(prezentacja): wspolne dane formularza miedzy zakladkami + imie i nazwisko (PRE-21)

Trzecia wskazowka partnerow. Kazda zakladke (Horoskop / Interpretacje / Kalendarz) wypelnialo sie od nowa — te same imie, data, godzina, strefa i miejsce. Teraz raz wpisane dane wedruja za uzytkownikiem, a zmiana w jednej zakladce przenosi sie na pozostale. Nowy formsync.js trzyma stan w localStorage. Dlaczego nie sesja na serwerze: serwer zostaje BEZSTANOWY — zadnego magazynu sesji, zadnych danych urodzeniowych trzymanych po stronie uslugi (spojne z postawa z LOG-32/PRE-16). Przy okazji dane synchronizuja sie tez miedzy osobnymi kartami przegladarki, bo zdarzenie `storage` daje to za darmo. Dolozone pole „imie i nazwisko" (wszystkie trzy zakladki) — potrzebne do naglowka raportu PDF (PRE-24). Handlery przyjmuja je i oddaja, wiec nie znika po przeliczeniu. Dwie rzeczy, ktore trzeba bylo domknac, zeby to dzialalo naprawde: 1. KOLEJNOSC SKRYPTOW. formsync.js ladowany w <head> z `defer` — skrypty defer wykonuja sie w kolejnosci dokumentu, wiec ten zdazy odtworzyc wspolrzedne, ZANIM geo.js zbuduje mape. Mapa startuje od razu we wlasciwym miejscu, zamiast przeskakiwac po chwili. 2. geo.js ustawia pola z KODU (`.value = ...`), co samo z siebie NIE wywoluje zdarzen — bez tego synchronizacja przegapilaby kazdy wybor z mapy, z wyszukiwarki i z „Tu i teraz". Dolozony setVal(), ktory jawnie zglasza `change`. Zakladka bez danego pola (np. Sygnifikatory) nie kasuje wartosci zapamietanej gdzie indziej; uszkodzony wpis w localStorage nie blokuje formularza. Q-14 rozstrzygniete: lancuch LaTeX->PDF stanie jako OSOBNA USLUGA render — spojne z izolacja swisseph (LOG-27), obraz produktu zostaje maly. Weryfikacja na zywym stacku (data+logika+prezentacja) w przegladarce: dane wpisane w Horoskopie pojawily sie w Interpretacjach; zmiana godziny w Interpretacjach dotarla do Kalendarza; pola nieobecne na zakladce (zodiak, system domow) przetrwaly; po POST imie zostalo, a horoskop policzyl sie normalnie. Testy: 22 nowe strukturalne. Calosc: prezentacja 67 passed. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-24 17:10:09 +02:00
parent 5c82e8bd9f
commit f34016a4a5
10 changed files with 237 additions and 9 deletions
@@ -0,0 +1,98 @@
+// Wspólne dane formularza między zakładkami (PRE-21).
+//
+// Problem: każdą zakładkę (Horoskop / Interpretacje / Kalendarz) wypełniało się
+// od nowa — te same imię, data, godzina, strefa i miejsce. Teraz raz wpisane
+// dane wędrują za użytkownikiem.
+//
+// Dlaczego localStorage, a nie sesja na serwerze: serwer zostaje BEZSTANOWY
+// (żadnego magazynu sesji, żadnych danych urodzeniowych trzymanych po stronie
+// usługi), a przy okazji dane synchronizują się też między osobnymi kartami
+// przeglądarki — zdarzenie `storage` daje to za darmo.
+//
+// UWAGA na kolejność: ten skrypt ładujemy w <head> z `defer`, więc wykonuje się
+// PO sparsowaniu dokumentu, ale PRZED geo.js (skrypty defer idą w kolejności
+// dokumentu). Dzięki temu mapa startuje już z odtworzonymi współrzędnymi i nie
+// trzeba jej potem przestawiać.
+(function () {
+  'use strict';
+
+  var KEY = 'astrololo.form.v1';
+
+  // Pola wspólne dla zakładek. Nazwa pola formularza -> jak je znaleźć.
+  // `geoSearch` (nazwa miejsca) nie ma atrybutu name — szukamy po id.
+  var FIELDS = [
+    { key: 'person',       sel: 'input[name=person]' },
+    { key: 'date',         sel: 'input[name=date]' },
+    { key: 'time',         sel: 'input[name=time]' },
+    { key: 'tz_offset',    sel: 'input[name=tz_offset]' },
+    { key: 'lat',          sel: 'input[name=lat]' },
+    { key: 'lon',          sel: 'input[name=lon]' },
+    { key: 'house_system', sel: 'select[name=house_system]' },
+    { key: 'zodiac',       sel: 'select[name=zodiac]' },
+    { key: 'place',        sel: '#geoSearch' }
+  ];
+
+  function load() {
+    try {
+      return JSON.parse(localStorage.getItem(KEY) || '{}') || {};
+    } catch (e) {
+      return {};                       // uszkodzony wpis nie może zablokować strony
+    }
+  }
+
+  function save(state) {
+    try {
+      localStorage.setItem(KEY, JSON.stringify(state));
+    } catch (e) {
+      /* tryb prywatny albo brak miejsca — trudno, formularz ma działać dalej */
+    }
+  }
+
+  function apply(state) {
+    FIELDS.forEach(function (f) {
+      var el = document.querySelector(f.sel);
+      if (!el) return;
+      var v = state[f.key];
+      if (v === undefined || v === null || v === '') return;
+      if (el.value !== v) el.value = v;
+    });
+  }
+
+  function collect() {
+    var state = load();
+    FIELDS.forEach(function (f) {
+      var el = document.querySelector(f.sel);
+      if (!el) return;                 // pola nieobecnego na tej zakładce nie kasujemy
+      if (el.value === '' || el.value === null) return;
+      state[f.key] = el.value;
+    });
+    return state;
+  }
+
+  // 1) odtwórz to, co użytkownik wpisał gdzie indziej
+  apply(load());
+
+  // 2) zapisuj każdą zmianę (input dla wpisywania, change dla list i kalendarzy)
+  FIELDS.forEach(function (f) {
+    var el = document.querySelector(f.sel);
+    if (!el) return;
+    ['input', 'change'].forEach(function (ev) {
+      el.addEventListener(ev, function () { save(collect()); });
+    });
+  });
+
+  // 3) zapisz stan po wysłaniu formularza — po przeładowaniu strony pola mają
+  //    pokazywać to, co faktycznie policzyliśmy
+  document.addEventListener('submit', function () { save(collect()); }, true);
+
+  // 4) druga otwarta karta zmieniła dane -> dociągnij je tutaj na żywo
+  window.addEventListener('storage', function (e) {
+    if (e.key === KEY) apply(load());
+  });
+
+  // 5) geo.js ustawia lat/lon z mapy poza polami formularza — po takiej zmianie
+  //    też chcemy zapamiętać (zdarzenie leci z „Tu i teraz" oraz z mapy)
+  document.addEventListener('astrololo:coords', function () {
+    setTimeout(function () { save(collect()); }, 0);
+  });
+})();
@@ -38,9 +38,18 @@
    // Kontener mógł być renderowany zanim ustaliła się jego szerokość — poprawka.
    setTimeout(function () { map.invalidateSize(); }, 60);

+    // Ustawienie `.value` z kodu NIE wywołuje zdarzeń, więc synchronizacja
+    // między zakładkami (formsync.js) przegapiłaby zmiany z mapy. Zgłaszamy je
+    // jawnie przez `change`.
+    function setVal(el, value) {
+      if (!el) return;
+      el.value = value;
+      el.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+
    function setCoords(lat, lon, fromMap) {
-      latEl.value = lat.toFixed(4);
-      lonEl.value = lon.toFixed(4);
+      setVal(latEl, lat.toFixed(4));
+      setVal(lonEl, lon.toFixed(4));
      marker.setLatLng([lat, lon]);
      if (!fromMap) map.setView([lat, lon], Math.max(map.getZoom(), 12));
      if (fromMap) reverseName(lat, lon);
@@ -51,10 +60,10 @@
      // po prostu nieprawdziwa — pokazywałaby inne miejsce niż współrzędne obok.
      // Dotyczy też sytuacji, gdy /reverse nie odpowie (brak sieci): lepiej puste
      // pole i poprawne współrzędne niż nazwa, która kłamie.
-      if (searchEl) searchEl.value = '';
+      if (searchEl) setVal(searchEl, '');
      fetch('/reverse?lat=' + lat + '&lon=' + lon)
        .then(function (r) { return r.ok ? r.json() : null; })
-        .then(function (d) { if (d && d.name && searchEl) searchEl.value = d.name; })
+        .then(function (d) { if (d && d.name && searchEl) setVal(searchEl, d.name); })
        .catch(function () {});
    }

@@ -73,7 +82,7 @@
        li.textContent = it.name;
        li.addEventListener('click', function () {
          setCoords(it.lat, it.lon, false);
-          searchEl.value = it.name;
+          setVal(searchEl, it.name);
          resultsEl.hidden = true;
        });
        resultsEl.appendChild(li);