public/admin.html


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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="dark">
  <title>pathways · admin</title>
  <link rel="stylesheet" href="/admin.css?v=3">
</head>
<body>
  <main id="app">
    <section id="view-setup" hidden>
      <h1>pathways<span class="dot">.</span> admin</h1>
      <p class="sub">no admin password is set yet. create one to manage the walk graph and uploads.</p>
      <form id="setup-form" autocomplete="off">
        <input type="password" id="setup-pw" minlength="8" required placeholder="password (min 8 chars)">
        <input type="password" id="setup-pw2" required placeholder="repeat password">
        <button type="submit">set password</button>
      </form>
      <p class="err" id="setup-err"></p>
    </section>

    <section id="view-login" hidden>
      <h1>pathways<span class="dot">.</span> admin</h1>
      <form id="login-form">
        <input type="password" id="login-pw" required placeholder="password" autocomplete="current-password">
        <label class="remember"><input type="checkbox" id="login-remember" checked> remember this device</label>
        <button type="submit">sign in</button>
      </form>
      <p class="err" id="login-err"></p>
    </section>

    <section id="view-dash" hidden>
      <header class="top">
        <h1>pathways<span class="dot">.</span> admin</h1>
        <nav>
          <button class="tab active" data-tab="status">status</button>
          <button class="tab" data-tab="import">import</button>
          <button class="tab" data-tab="graph">walk graph</button>
          <button id="logout">sign out</button>
        </nav>
      </header>

      <section id="tab-status">
        <div class="cards">
          <div class="card"><span class="k">photos</span><span class="v" id="st-total">–</span></div>
          <div class="card"><span class="k">graph built</span><span class="v" id="st-built">–</span></div>
          <div class="card"><span class="k">built age</span><span class="v" id="st-age">–</span></div>
          <div class="card"><span class="k">overrides</span><span class="v" id="st-overrides">–</span></div>
          <div class="card"><span class="k">database</span><span class="v" id="st-db">–</span></div>
          <div class="card"><span class="k">uptime</span><span class="v" id="st-up">–</span></div>
        </div>
        <p class="facets" id="st-facets"></p>
        <div class="row">
          <button id="rebuild">rebuild walk graph</button>
          <button id="reset-graph" class="danger">clear all overrides</button>
        </div>
        <p class="err" id="dash-err"></p>
      </section>

      <section id="tab-import" hidden>
        <div class="dropzone" id="dz" tabindex="0">
          <input type="file" id="im-files" accept="image/jpeg,image/png,image/webp" multiple hidden>
          <div class="dz-icon">+</div>
          <p>drop photos here, or click to choose</p>
          <p class="dz-note">jpg &middot; png &middot; webp &mdash; copied into the library and indexed</p>
        </div>
        <div class="progress" id="im-progress" hidden>
          <div class="bar"><div class="fill" id="im-fill"></div></div>
          <p class="im-status" id="im-status"></p>
        </div>
        <p class="err" id="im-err"></p>
        <div class="recent" id="im-recent" hidden>
          <h2>recently added</h2>
          <div class="results" id="im-new"></div>
        </div>
      </section>

      <section id="tab-graph" hidden>
        <input type="search" id="gq" placeholder="search photos by title or id…">
        <div class="results" id="g-results" hidden></div>
        <div class="graph" id="g-graph" hidden></div>
      </section>
    </section>
  </main>
  <div id="toast"></div>
  <script src="/admin.js?v=3"></script>
</body>
</html>