apps/habbits/templates/habit.html 4.9 K raw
1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <meta name="theme-color" content="#121113" />
7
    <link rel="stylesheet" href="/assets/darkmatter.css" />
8
    <link rel="stylesheet" href="/static/styles.css" />
9
    <title>Habbits | {{.Habit.Name}}</title>
10
  </head>
11
  <body>
12
    <div class="header">
13
      <a href="/" class="logo">HABBITS</a>
14
      <nav class="links">
15
        <a href="/">dashboard</a>
16
        <a href="/new">new habit</a>
17
        <a href="/settings">settings</a>
18
        <a href="/logout">logout</a>
19
      </nav>
20
    </div>
21
22
    {{if .Success}}<p class="success">{{.Success}}</p>{{end}}
23
    {{if .Error}}<p class="error">{{.Error}}</p>{{end}}
24
25
    {{$habit := .Habit}}
26
27
    <section class="section">
28
      <div class="admin-toolbar">
29
        <h2>{{.Habit.Name}} <span class="tag">{{.Habit.ValueType}}</span>{{if .Habit.Unit}} <span class="tag">{{.Habit.Unit}}</span>{{end}}</h2>
30
        <a href="/settings">edit habit</a>
31
      </div>
32
      {{if .Habit.Description}}<p class="admin-list-meta">{{.Habit.Description}}</p>{{end}}
33
    </section>
34
35
    <section class="section">
36
      <h2>New record</h2>
37
      <form class="form" method="POST" action="/records">
38
        <input type="hidden" name="return_to" value="/habits/{{.Habit.ShortID}}" />
39
        <input type="hidden" name="habit" value="{{.Habit.ShortID}}" />
40
        <div class="form-row">
41
          <div class="form-field">
42
            <label for="value">Value{{if .Habit.Unit}} ({{.Habit.Unit}}){{end}}</label>
43
            {{if eq .Habit.ValueType "bool"}}
44
            <select id="value" name="value" required>
45
              <option value="true">true</option>
46
              <option value="false">false</option>
47
            </select>
48
            {{else if eq .Habit.ValueType "int"}}
49
            <input type="number" step="1" id="value" name="value" required />
50
            {{else if eq .Habit.ValueType "float"}}
51
            <input type="number" step="any" id="value" name="value" required />
52
            {{else}}
53
            <input type="text" id="value" name="value" required />
54
            {{end}}
55
          </div>
56
          <div class="form-field">
57
            <label for="recorded_at">When</label>
58
            <input type="datetime-local" id="recorded_at" name="recorded_at" class="now-default" />
59
          </div>
60
        </div>
61
        <div class="form-actions">
62
          <button type="submit">Add record</button>
63
        </div>
64
      </form>
65
    </section>
66
67
    <section class="section">
68
      <div class="admin-toolbar">
69
        <h2>Records ({{.Habit.RecordCount}})</h2>
70
      </div>
71
      {{if not .Days}}
72
      <p class="empty">No records yet. Add one above.</p>
73
      {{else}}
74
      {{range .Days}}
75
      <div class="day-group">
76
        <h3 class="day-heading">{{.Date}}</h3>
77
        <ul class="admin-list">
78
          {{range .Records}}
79
          <li class="admin-list-item">
80
            <form class="form-row record-edit" method="POST" action="/records/{{.ShortID}}">
81
              <input type="hidden" name="return_to" value="/habits/{{$habit.ShortID}}" />
82
              <div class="form-field">
83
                {{if eq $habit.ValueType "bool"}}
84
                <select name="value" required>
85
                  <option value="true"{{if eq .Value "true"}} selected{{end}}>true</option>
86
                  <option value="false"{{if eq .Value "false"}} selected{{end}}>false</option>
87
                </select>
88
                {{else if eq $habit.ValueType "int"}}
89
                <input type="number" step="1" name="value" value="{{.Value}}" required />
90
                {{else if eq $habit.ValueType "float"}}
91
                <input type="number" step="any" name="value" value="{{.Value}}" required />
92
                {{else}}
93
                <input type="text" name="value" value="{{.Value}}" required />
94
                {{end}}
95
              </div>
96
              <div class="form-field">
97
                <input type="datetime-local" name="recorded_at" value="{{.RecordedAtInput}}" required />
98
              </div>
99
              <button type="submit" class="link-button">save</button>
100
            </form>
101
            <div class="admin-list-actions">
102
              <form method="POST" action="/records/{{.ShortID}}/delete" class="inline-form">
103
                <input type="hidden" name="return_to" value="/habits/{{$habit.ShortID}}" />
104
                <button type="submit" class="link-button danger">delete</button>
105
              </form>
106
            </div>
107
          </li>
108
          {{end}}
109
        </ul>
110
      </div>
111
      {{end}}
112
      {{end}}
113
    </section>
114
115
    <script>
116
      (function () {
117
        var now = new Date();
118
        now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
119
        var stamp = now.toISOString().slice(0, 16);
120
        document.querySelectorAll("input.now-default").forEach(function (el) {
121
          if (!el.value) el.value = stamp;
122
        });
123
      })();
124
    </script>
125
  </body>
126
</html>