python-tdd/src/templates/apps/dashboard/sky.html

{% extends "core/base.html" %}
{% load static %}

{% block title_text %}My Sky{% endblock title_text %}
{% block header_text %}<span>Dash</span>sky{% endblock header_text %}

{% block content %}
<div class="sky-page"
     id="id_sky_overlay"
     data-preview-url="{% url 'sky_preview' %}"
     data-save-url="{% url 'sky_save' %}">

    <div class="sky-modal-body sky-body">

        {# ── Form column ─────────────────────────────────────────────────── #}
        <div class="sky-form-col">
            <div class="sky-form-main">
                <form id="id_sky_form" autocomplete="off">

                    <div class="sky-field">
                        <label for="id_nf_date">Birth date</label>
                        <input id="id_nf_date" name="date" type="date" required
                               {% if saved_birth_date %}value="{{ saved_birth_date }}"{% endif %}>
                    </div>

                    <div class="sky-field">
                        <label for="id_nf_time">Birth time</label>
                        <input id="id_nf_time" name="time" type="time"
                               value="{{ saved_birth_time|default:'12:00' }}">
                        <small>Local time at birth place. Use 12:00 if unknown.</small>
                    </div>

                    <div class="sky-field sky-place-field">
                        <label for="id_nf_place">Birth place</label>
                        <div class="sky-place-wrap">
                            <input id="id_nf_place" name="place" type="text"
                                   placeholder="Start typing a city…"
                                   autocomplete="off"
                                   {% if saved_birth_place %}value="{{ saved_birth_place }}"{% endif %}>
                            <button type="button" id="id_nf_geolocate"
                                    class="btn btn-secondary btn-sm"
                                    title="Use device location">
                                <i class="fa-solid fa-location-crosshairs"></i>
                            </button>
                        </div>
                        <div id="id_nf_suggestions" class="sky-suggestions" hidden></div>
                    </div>

                    <div class="sky-field sky-coords">
                        <div>
                            <label>Latitude</label>
                            <input id="id_nf_lat" name="lat" type="text"
                                   placeholder="—" readonly tabindex="-1"
                                   {% if saved_birth_lat %}value="{{ saved_birth_lat }}"{% endif %}>
                        </div>
                        <div>
                            <label>Longitude</label>
                            <input id="id_nf_lon" name="lon" type="text"
                                   placeholder="—" readonly tabindex="-1"
                                   {% if saved_birth_lon %}value="{{ saved_birth_lon }}"{% endif %}>
                        </div>
                    </div>

                    <div class="sky-field">
                        <label for="id_nf_tz">Timezone</label>
                        <input id="id_nf_tz" name="tz" type="text"
                               placeholder="auto-detected from location"
                               {% if saved_birth_tz %}value="{{ saved_birth_tz }}"{% endif %}>
                        <small id="id_nf_tz_hint"></small>
                    </div>

                </form>

                <div id="id_sky_status" class="sky-status"></div>
            </div>{# /.sky-form-main #}

            <button type="button" id="id_sky_confirm" class="btn btn-primary" disabled>
                Save Sky
            </button>
        </div>

        {# Wheel column always renders so async SAVE SKY can populate it without a #}
        {# refresh — visibility (incl. the DEL btn) is gated by body.sky-saved.    #}
        <div class="sky-wheel-col">
            <svg id="id_sky_svg" class="sky-svg"></svg>
            <form id="id_sky_delete_form" method="POST" action="{% url 'sky_delete' %}">
                {% csrf_token %}
                <button type="submit" class="btn btn-danger"
                        data-confirm="Forget sky?">DEL</button>
            </form>
        </div>

    </div>{# /.sky-modal-body #}
</div>{# /.sky-page #}

{# Planet hover tooltip — position:fixed escapes any overflow:hidden ancestor #}
<div id="id_sky_tooltip" class="tt" style="display:none;"></div>
<div id="id_sky_tooltip_2" class="tt" style="display:none;"></div>

<script src="{% static 'apps/gameboard/d3.min.js' %}"></script>
<script src="{% static 'apps/gameboard/sky-wheel.js' %}"></script>
<script src="{% static 'apps/dashboard/note.js' %}"></script>
<script>
(function () {
  'use strict';

  const overlay     = document.getElementById('id_sky_overlay');
  const form        = document.getElementById('id_sky_form');
  const svgEl       = document.getElementById('id_sky_svg');
  const statusEl    = document.getElementById('id_sky_status');
  const confirmBtn  = document.getElementById('id_sky_confirm');
  const geoBtn      = document.getElementById('id_nf_geolocate');
  const placeInput  = document.getElementById('id_nf_place');
  const latInput    = document.getElementById('id_nf_lat');
  const lonInput    = document.getElementById('id_nf_lon');
  const tzInput     = document.getElementById('id_nf_tz');
  const tzHint      = document.getElementById('id_nf_tz_hint');
  const suggestions = document.getElementById('id_nf_suggestions');

  const PREVIEW_URL = overlay.dataset.previewUrl;
  const SAVE_URL    = overlay.dataset.saveUrl;
  const NOMINATIM   = 'https://nominatim.openstreetmap.org/search';
  const USER_AGENT  = 'EarthmanRPG/1.0 (https://earthmanrpg.me)';

  let _lastChartData = null;
  let _placeDebounce = null;
  let _chartDebounce = null;
  const PLACE_DELAY  = 400;
  const CHART_DELAY  = 300;

  const _preloadReady = SkyWheel.preload();

  // ── Status helper ───────────────────────────────────────────────────────

  function setStatus(msg, type) {
    statusEl.textContent = msg;
    statusEl.className = 'sky-status' + (type ? ` sky-status--${type}` : '');
  }

  // ── Nominatim place search ──────────────────────────────────────────────

  placeInput.addEventListener('input', () => {
    clearTimeout(_placeDebounce);
    const q = placeInput.value.trim();
    if (q.length < 3) { hideSuggestions(); return; }
    _placeDebounce = setTimeout(() => fetchPlaces(q), PLACE_DELAY);
  });

  placeInput.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') hideSuggestions();
  });

  document.addEventListener('click', (e) => {
    if (!placeInput.contains(e.target) && !suggestions.contains(e.target)) {
      hideSuggestions();
    }
  });

  function fetchPlaces(query) {
    fetch(`${NOMINATIM}?format=json&q=${encodeURIComponent(query)}&limit=6`, {
      headers: { 'User-Agent': USER_AGENT },
    })
      .then(r => r.json())
      .then(results => {
        if (!results.length) { hideSuggestions(); return; }
        renderSuggestions(results);
      })
      .catch(() => hideSuggestions());
  }

  function renderSuggestions(results) {
    suggestions.innerHTML = '';
    results.forEach(place => {
      const item = document.createElement('button');
      item.type = 'button';
      item.className = 'sky-suggestion-item';
      item.textContent = place.display_name;
      item.addEventListener('click', () => selectPlace(place));
      suggestions.appendChild(item);
    });
    suggestions.hidden = false;
  }

  function hideSuggestions() {
    suggestions.hidden = true;
    suggestions.innerHTML = '';
  }

  function selectPlace(place) {
    placeInput.value = place.display_name;
    latInput.value   = parseFloat(place.lat).toFixed(4);
    lonInput.value   = parseFloat(place.lon).toFixed(4);
    tzInput.value    = '';
    tzHint.textContent = '';
    hideSuggestions();
    schedulePreview();
  }

  // ── Geolocation ─────────────────────────────────────────────────────────

  geoBtn.addEventListener('click', () => {
    if (!navigator.geolocation) {
      setStatus('Geolocation not supported by this browser.', 'error');
      return;
    }
    setStatus('Requesting device location…');
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        latInput.value = pos.coords.latitude.toFixed(4);
        lonInput.value = pos.coords.longitude.toFixed(4);
        tzInput.value  = '';
        tzHint.textContent = '';
        fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${latInput.value}&lon=${lonInput.value}`, {
          headers: { 'User-Agent': USER_AGENT },
        })
          .then(r => r.json())
          .then(data => { placeInput.value = _cityName(data.address) || data.display_name || ''; })
          .catch(() => {});
        setStatus('');
        schedulePreview();
      },
      () => setStatus('Location access denied.', 'error'),
    );
  });

  function _cityName(addr) {
    if (!addr) return '';
    const city    = addr.city || addr.town || addr.village || addr.hamlet || addr.municipality || '';
    const region  = addr.state || addr.county || addr.state_district || '';
    const country = addr.country || '';
    return [city, region, country].filter(Boolean).join(', ');
  }

  // ── Debounced chart preview ─────────────────────────────────────────────

  form.addEventListener('input', (e) => {
    if (e.target === placeInput) return;
    clearTimeout(_chartDebounce);
    _chartDebounce = setTimeout(schedulePreview, CHART_DELAY);
  });

  function _formReady() {
    return document.getElementById('id_nf_date').value &&
           latInput.value && lonInput.value;
  }

  function schedulePreview() {
    if (!_formReady()) return;
    const date = document.getElementById('id_nf_date').value;
    const time = document.getElementById('id_nf_time').value || '12:00';
    const lat  = latInput.value;
    const lon  = lonInput.value;
    const tz   = tzInput.value.trim();

    const params = new URLSearchParams({ date, time, lat, lon });
    if (tz) params.set('tz', tz);

    setStatus('Calculating…');
    confirmBtn.disabled = true;

    fetch(`${PREVIEW_URL}?${params}`, { credentials: 'same-origin' })
      .then(r => {
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        return r.json();
      })
      .then(data => {
        _lastChartData = data;
        if (!tzInput.value && data.timezone) {
          tzInput.value = data.timezone;
          tzHint.textContent = 'Auto-detected from coordinates.';
        }
        setStatus('');
        confirmBtn.disabled = false;
        // Only redraw the wheel when a saved sky already exists on the page —
        // pre-first-save we suppress the live wheel preview so it doesn't
        // shunt the form (and SAVE SKY) below the fold. Mirrors the My Sky
        // applet's "no wheel until saved" UX. The in-room PICK SKY overlay
        // intentionally still previews live.
        if (_savedSky) {
          if (svgEl.querySelector('*')) {
            SkyWheel.redraw(data);
          } else {
            SkyWheel.draw(svgEl, data);
          }
        }
      })
      .catch(err => {
        setStatus(`Could not fetch chart: ${err.message}`, 'error');
        confirmBtn.disabled = true;
      });
  }

  // ── Save ────────────────────────────────────────────────────────────────

  confirmBtn.addEventListener('click', () => {
    if (!_lastChartData) return;
    confirmBtn.disabled = true;
    setStatus('Saving…');

    const payload = {
      birth_dt:     `${document.getElementById('id_nf_date').value}T${document.getElementById('id_nf_time').value || '12:00'}:00`,
      birth_lat:    parseFloat(latInput.value),
      birth_lon:    parseFloat(lonInput.value),
      birth_place:  placeInput.value,
      birth_tz:     tzInput.value.trim(),
      house_system: _lastChartData.house_system || 'O',
      chart_data:   _lastChartData,
    };

    fetch(SAVE_URL, {
      method:      'POST',
      credentials: 'same-origin',
      headers: { 'Content-Type': 'application/json', 'X-CSRFToken': _getCsrf() },
      body: JSON.stringify(payload),
    })
      .then(r => {
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        return r.json();
      })
      .then(data => {
        setStatus('Sky saved!');
        Note.handleSaveResponse(data);
        _activateSavedState();
      })
      .catch(err => {
        setStatus(`Save failed: ${err.message}`, 'error');
        confirmBtn.disabled = false;
      });
  });

  // ── Async save activation ──────────────────────────────────────────────
  // After SAVE SKY succeeds we transition into the saved state without a page
  // refresh: add body.sky-saved (reveals the wheel-col + DEL btn, switches
  // the aperture into snap-binary mode), draw the wheel from _lastChartData,
  // and pin the aperture to the form section so _scrollApertureToTop()'s
  // ease-out reveals the wheel sliding in from above.

  function _activateSavedState() {
    if (!_lastChartData) return;
    const wasAlreadySaved = document.body.classList.contains('sky-saved');
    document.body.classList.add('sky-saved');
    if (svgEl.querySelector('*')) {
      SkyWheel.redraw(_lastChartData);
    } else {
      SkyWheel.draw(svgEl, _lastChartData);
    }
    if (!wasAlreadySaved) {
      // First-time save: pin scroll to the form section so the wheel reveal
      // animates in instead of replacing the form with a hard cut.
      const formCol = document.querySelector('.sky-page .sky-form-col');
      if (formCol) overlay.scrollTop = formCol.offsetTop;
    }
    _scrollApertureToTop();
  }

  // ── Snap-back scroll on save ────────────────────────────────────────────
  // .sky-page is scroll-snap-y-mandatory (post-save). After SAVE SKY the user
  // should land back on the wheel section even if they clicked from the form
  // section. cubic-bezier(0.2, 0.9, 0.4, 1) — fast start, gentle settle.

  function _scrollApertureToTop() {
    if (overlay.scrollTop === 0) return;
    const start = overlay.scrollTop;
    const startTime = performance.now();
    const DURATION = 280;
    const ease = (t) => {
      // ease-out cubic — visually equivalent to cubic-bezier(0, 0, 0.4, 1).
      const u = 1 - t;
      return 1 - u * u * u;
    };
    function step(now) {
      const t = Math.min(1, (now - startTime) / DURATION);
      overlay.scrollTop = Math.max(0, start * (1 - ease(t)));
      if (t < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }

  // ── CSRF ─────────────────────────────────────────────────────────────────

  function _getCsrf() {
    const m = document.cookie.match(/csrftoken=([^;]+)/);
    return m ? m[1] : '';
  }

  // ── Draw saved sky on load; only call PySwiss if no saved chart yet ─────

  const _savedSky = {{ saved_sky_json|safe }};
  _preloadReady.then(() => {
    if (_savedSky) {
      _lastChartData = _savedSky;
      confirmBtn.disabled = false;
      SkyWheel.draw(svgEl, _savedSky);
    } else if (_formReady()) {
      schedulePreview();
    }
  });
})();
</script>
{% endblock %}