aboutsummaryrefslogtreecommitdiff
path: root/internal/web/templates/index.html
blob: b20131d2d7591a71bd22a56aeadf2b69b564e1c5 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
{{/* index.html renders the full lectio-web page: essential controls on the left
     (date, lectionary, version checkboxes, all/gospel, layout, mono) and, pushed
     to the right, the nav + download links. Theme lives only in /settings now.

     The controls form (#controls) carries hx-get="/readings" and fires on any
     bubbling "change", so the readings pane re-fetches when a field changes.
     The date arrows step the date input by a day client-side and dispatch its
     change (so navigation is relative to the CURRENT date and updates the shown
     day). mono lives OUTSIDE the form so toggling it doesn't refetch readings. */}}
<!doctype html>
<html lang="{{.Lang}}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>lectio</title>
<link rel="stylesheet" href="/static/base.css">
<link id="theme" rel="stylesheet" href="/theme.css?name={{.Theme}}">
<script src="/static/htmx.min.js"></script>
<script>
function stepDate(n){
  var el=document.querySelector('#controls input[name=date]');
  if(!el||!el.value)return;
  var d=new Date(el.value+'T00:00:00');
  d.setDate(d.getDate()+n);
  el.value=d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0');
  el.dispatchEvent(new Event('change',{bubbles:true}));
}
</script>
</head>
<body{{if .Mono}} class="mono"{{end}}>
<div class="page">

  <form id="controls" class="controls" hx-get="/readings" hx-target="#pane" hx-trigger="change">
    <div class="controls-main">
    {{/* The reader entry point is the primary action, so it leads the bar. */}}
    <a class="nav-link nav-reader" href="/reader">{{.L.NavReader}} &rarr;</a>
    {{/* Always-present marker so the server can tell a form submit with every
         version unchecked (show nothing) from a fresh visit (config default). */}}
    <input type="hidden" name="vset" value="1">
    <span class="date-nav">
      <button type="button" onclick="stepDate(-1)">&larr;</button>
      <input type="date" name="date" value="{{.Date}}">
      <button type="button" onclick="stepDate(1)">&rarr;</button>
    </span>

    {{/* Lectionary is a setting now (see /settings), carried as a hidden field so
         the readings, export and month-calendar links still use it. */}}
    <input type="hidden" name="lectionary" value="{{.Lectionary}}">

    {{range .VersionOpts}}
    <label id="ver-{{.Code}}"><input type="checkbox" name="v" value="{{.Code}}" {{if .Checked}}checked{{end}}> {{.Code}}</label>
    {{end}}

    <label>{{.L.Parts}}
      <select name="all">
        <option value="0" {{if not .All}}selected{{end}}>{{.L.OptGospel}}</option>
        <option value="1" {{if .All}}selected{{end}}>{{.L.OptAll}}</option>
      </select>
    </label>

    <label>{{.L.Layout}}
      <select name="display">
        <option value="horizontal" {{if eq .Display "horizontal"}}selected{{end}}>{{.L.OptHorizontal}}</option>
        <option value="vertical" {{if eq .Display "vertical"}}selected{{end}}>{{.L.OptColumns}}</option>
        <option value="interlinear" {{if eq .Display "interlinear"}}selected{{end}}>{{.L.OptInterlinear}}</option>
      </select>
    </label>
    </div>

    {{/* Utility cluster, pinned to the top-right (see #controls / .controls-side):
         settings, then a "pobierz" disclosure that opens two download options --
         a month calendar (its own month/year pickers) and the shown day's
         readings as txt/md/pdf. Both URLs are built from live values at click
         time (the readings export from the whole control form, the calendar from
         its own pickers plus the hidden lectionary field). */}}
    <span class="controls-side">
      <a class="nav-link" href="/settings">{{.L.NavSettings}}</a>
      <details class="export">
        <summary class="nav-link">{{.L.Export}}</summary>
        <div class="export-panel">
          <div class="export-row">
            <span class="export-label">{{.L.Calendar}}</span>
            <select id="cal-month" aria-label="{{.L.Calendar}}">
              {{range .MonthOpts}}<option value="{{.Val}}"{{if .Sel}} selected{{end}}>{{.Label}}</option>{{end}}
            </select>
            <select id="cal-year">
              {{range .YearOpts}}<option value="{{.Val}}"{{if .Sel}} selected{{end}}>{{.Label}}</option>{{end}}
            </select>
            <a href="#" onclick="var m=document.getElementById('cal-month').value,y=document.getElementById('cal-year').value;location='/calendar?month='+y+'-'+('0'+m).slice(-2)+'&lectionary='+document.querySelector('#controls [name=lectionary]').value;return false;">PDF</a>
          </div>
          <div class="export-row">
            <span class="export-label">{{.Date}}</span>
            <a href="#" onclick="location='/export?fmt=txt&'+new URLSearchParams(new FormData(document.getElementById('controls'))).toString();return false;">txt</a>
            <a href="#" onclick="location='/export?fmt=md&'+new URLSearchParams(new FormData(document.getElementById('controls'))).toString();return false;">md</a>
            <a href="#" onclick="location='/export?fmt=pdf&'+new URLSearchParams(new FormData(document.getElementById('controls'))).toString();return false;">pdf</a>
          </div>
        </div>
      </details>
    </span>
  </form>

  <div id="pane">{{.Reading}}</div>

</div>

{{/* AGPL-3.0 §13: the source offer must be visible to anyone using this
     server over a network, so it sits on every full page, not just here. */}}
<footer class="licence"><a href="/source">source</a> · AGPL-3.0-or-later</footer>
</body>
</html>