astrololo/services/presentation/app/templates/chart.html

{% extends "base.html" %}
{% block title %}Horoskop{% endblock %}
{% block nav_chart %}active{% endblock %}

{% block content %}
<p class="sub">Wpisz podstawowe dane momentu — program policzy pozycje obiektów (silnik efemeryd warstwy logicznej).</p>

<form method="post" action="/">
  <div class="grid">
    <label>Data
      <input type="date" name="date" value="{{ form.date or '' }}" required>
    </label>
    <label>Godzina (lokalna)
      <input type="time" name="time" value="{{ form.time or '' }}" required>
    </label>
    <label>Strefa (offset h)
      <input type="number" name="tz_offset" step="0.25" value="{{ form.tz_offset if form.tz_offset is not none else 0 }}">
    </label>
  </div>
  <details class="loc">
    <summary>Lokalizacja (opcjonalnie — przyda się później do osi i domów)</summary>
    <div class="grid">
      <label>Szerokość (lat)
        <input type="number" name="lat" step="0.0001" value="{{ form.lat if form.lat is not none else 0 }}">
      </label>
      <label>Długość (lon, + na wschód)
        <input type="number" name="lon" step="0.0001" value="{{ form.lon if form.lon is not none else 0 }}">
      </label>
    </div>
  </details>
  <div class="actions">
    <button type="button" id="nowBtn" class="ghost">Tu i teraz</button>
    <button type="submit">Policz pozycje</button>
  </div>
</form>

{% if error %}
  <div class="error">{{ error }}</div>
{% endif %}

{% if result %}
  <div class="meta">
    Silnik: <strong>{{ result.engine }}</strong> ·
    obiektów: {{ result.positions | length }}
    {% if moment %}· moment: {{ moment }}{% endif %}
  </div>
  <table>
    <thead>
      <tr>
        <th>Obiekt</th><th>Znak</th><th>W znaku</th><th>Absolutna</th><th>Kier.</th><th>Prędkość °/d</th>
      </tr>
    </thead>
    <tbody>
      {% for p in result.positions %}
        <tr>
          <td>{{ p.name }}</td>
          <td>{{ p.sign }}</td>
          <td class="mono">{{ p.in_sign }}</td>
          <td class="mono">{{ p.absolute }}</td>
          <td class="{{ 'retro' if p.direction == 'Rx' else '' }}">{{ p.direction }}</td>
          <td class="mono">{{ '%+.4f' | format(p.speed) }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endif %}

<script>
  // „Tu i teraz": uzupełnia datę/godzinę bieżącą i offset lokalny przeglądarki.
  document.getElementById('nowBtn').addEventListener('click', function () {
    const d = new Date();
    const pad = n => String(n).padStart(2, '0');
    document.querySelector('input[name=date]').value =
      d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate());
    document.querySelector('input[name=time]').value = pad(d.getHours()) + ':' + pad(d.getMinutes());
    document.querySelector('input[name=tz_offset]').value = (-d.getTimezoneOffset() / 60);
  });
</script>
{% endblock %}