apps/bookmarks/templates/admin.html 4.4 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
    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png" />
10
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png" />
11
    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png" />
12
    <link rel="manifest" href="/static/site.webmanifest" />
13
    <title>Bookmarks | Admin</title>
14
    <style>
15
      .section-label {
16
        font-size: 14px;
17
        font-weight: 400;
18
        opacity: 0.5;
19
        margin: 0 0 0.5rem;
20
      }
21
      section { width: 100%; margin-top: 1.5rem; }
22
    </style>
23
  </head>
24
  <body>
25
    <div class="header">
26
      <a href="/" class="logo">BOOKMARKS</a>
27
      <nav class="links">
28
        <a href="/logout">logout</a>
29
      </nav>
30
    </div>
31
32
    {{if .Success}}<p class="success">{{.Success}}</p>{{end}}
33
    {{if .Error}}<p class="error">{{.Error}}</p>{{end}}
34
35
    <section>
36
      <h3 class="section-label">Categories</h3>
37
      <form class="form" method="POST" action="/admin/categories">
38
        <div class="form-row">
39
          <div class="form-field">
40
            <input type="text" name="name" placeholder="new category" required />
41
          </div>
42
          <button type="submit">Add</button>
43
        </div>
44
      </form>
45
      {{if not .Categories}}
46
      <p class="empty">No categories yet.</p>
47
      {{else}}
48
      <ul class="admin-list">
49
        {{range .Categories}}
50
        <li class="admin-list-item">
51
          <div class="admin-list-info">
52
            <span class="admin-list-title">{{.Name}}</span>
53
          </div>
54
          <div class="admin-list-actions">
55
            <form method="POST" action="/admin/categories/{{.ShortID}}/move/up" class="inline-form">
56
              <button type="submit" class="link-button">↑</button>
57
            </form>
58
            <form method="POST" action="/admin/categories/{{.ShortID}}/move/down" class="inline-form">
59
              <button type="submit" class="link-button">↓</button>
60
            </form>
61
            <form method="POST" action="/admin/categories/{{.ShortID}}/delete" class="inline-form">
62
              <button type="submit" class="link-button danger">delete</button>
63
            </form>
64
          </div>
65
        </li>
66
        {{end}}
67
      </ul>
68
      {{end}}
69
    </section>
70
71
    <section>
72
      <h3 class="section-label">Add Link</h3>
73
      {{if not .Categories}}
74
      <p class="empty">Add a category first.</p>
75
      {{else}}
76
      <form class="form" method="POST" action="/admin/links">
77
        <div class="form-field">
78
          <label for="title">Title</label>
79
          <input type="text" id="title" name="title" required />
80
        </div>
81
        <div class="form-field">
82
          <label for="url">URL</label>
83
          <input type="url" id="url" name="url" required />
84
        </div>
85
        <div class="form-field">
86
          <label for="category">Category</label>
87
          <select id="category" name="category" required>
88
            {{range .Categories}}
89
            <option value="{{.Name}}">{{.Name}}</option>
90
            {{end}}
91
          </select>
92
        </div>
93
        <div class="form-actions">
94
          <button type="submit">Add link</button>
95
        </div>
96
      </form>
97
      {{end}}
98
    </section>
99
100
    <section>
101
      <h3 class="section-label">Links</h3>
102
      {{if not .Links}}
103
      <p class="empty">No links yet.</p>
104
      {{else}}
105
      <ul class="admin-list">
106
        {{range .Links}}
107
        <li class="admin-list-item">
108
          <div class="admin-list-info">
109
            <a class="admin-list-title" href="{{.URL}}" target="_blank" rel="noopener noreferrer">
110
              {{if .FaviconURL}}
111
              <img class="favicon" src="{{.FaviconURL}}" alt="" width="16" height="16" loading="lazy" />
112
              {{end}}
113
              {{.Title}}
114
            </a>
115
            <div class="admin-list-meta">
116
              <span class="tag">{{.Category}}</span>
117
            </div>
118
          </div>
119
          <div class="admin-list-actions">
120
            <form method="POST" action="/admin/links/{{.ShortID}}/delete" class="inline-form">
121
              <button type="submit" class="link-button danger">delete</button>
122
            </form>
123
          </div>
124
        </li>
125
        {{end}}
126
      </ul>
127
      {{end}}
128
    </section>
129
  </body>
130
</html>