1{{#> layout }}
2<script>
3 window.addEventListener("DOMContentLoaded", function () {
4 let users = document.getElementById("users");
5 if (users) {
6 users.addEventListener("change", async function (event) {
7 const action = event.target.getAttribute("action");
8 if (action) {
9 console.log(action, event.target.checked);
10 const response = await fetch(action, {
11 method: 'PUT',
12 headers: {
13 'Content-Type': 'application/json'
14 },
15 body: JSON.stringify({ admin: event.target.checked })
16 });
17 }
18 });
19 }
20 });
21</script>
22
23<div class="h-screen text-white border-r border-white text-main font-extralight">
24 <div class="flex flex-row items-center justify-between p-5 border-b border-white pl-7 pr-7 admin-nav">
25 <h1 class="font-display font-extralight">Admin</h1>
26 <ul class="flex flex-row">
27 <li><a href="#userlist"
28 class="mr-4 leading-relaxed no-underline lowercase text-main hover:underline">Users</a></li>
29 <li><a href="#signuplist"
30 class="leading-relaxed no-underline lowercase text-main hover:underline">Signups</a></li>
31 </ul>
32 </div>
33
34 <h2 id="userlist" class="pt-10 mb-5 text-white pl-7 pr-7 font-display font-extralight">Users</h2>
35
36 <div class="flex flex-col w-full pb-5 font-mono text-xs" id="users">
37 <div class="flex flex-row pl-5 pr-10 font-bold">
38 <p class="w-1/3 p-2">Github Username</p>
39 <p class="w-32 p-2 text-center">Admin</p>
40 <p class="w-24 p-2"> </p>
41 </div>
42 <div class="flex flex-col pl-5 pr-10 text-gray-100">
43 <form action="/admin/users" method="post" class="m-0">
44 <div class="flex flex-row items-center">
45 <p class="w-1/3 p-2"><input class="block w-full p-2 text-xs bg-transparent border border-white"
46 type="text" name="github_login" required minlength="4" placeholder="@github_handle"></p>
47 <p class="w-32 p-2 text-center"><input type="checkbox" id="admin" name="admin" value="true"></p>
48 <p class="w-24 p-2"><button class="underline hover:no-underline">Add</button></p>
49 </div>
50 </form>
51 </div>
52 </div>
53
54 <div class="flex flex-col w-full pb-10 font-mono text-xs border-b border-white">
55 <div class="flex flex-row pl-5 pr-10 font-bold">
56 <p class="w-1/3 p-2">Github Username</p>
57 <p class="w-32 p-2 text-center">Admin</p>
58 <p class="w-24 p-2"> </p>
59 </div>
60 {{#each users}}
61 <div class="flex flex-col pl-5 pr-10 text-gray-100 alternate-bg">
62 <form action="/admin/users/{{id}}/delete" method="post" class="m-0">
63 <div class="flex flex-row items-center">
64 <p class="w-1/3 p-2">{{github_login}}</p>
65 <p class="w-32 p-2 text-center"><input action="/admin/users/{{id}}" type="checkbox" {{#if
66 admin}}checked{{/if}}></p>
67 <p class="w-24 p-2"><button class="underline hover:no-underline">Remove</button></p>
68 </div>
69 </form>
70 </div>
71 {{/each}}
72 </div>
73
74 <h2 class="pt-10 mb-5 text-white pl-7 pr-7 font-display font-extralight">Signups</h2>
75
76 <div class="flex flex-col w-full pb-10 font-mono text-xs border-b border-white">
77
78 <div class="flex flex-row justify-between pl-5 pr-10 font-bold">
79 <p class="w-1/5 p-2">Email</p>
80 <p class="w-1/5 p-2">Github</p>
81 <p class="w-24 p-2 text-center">Releases</p>
82 <p class="w-24 p-2 text-center">Updates</p>
83 <p class="w-24 p-2 text-center">Community</p>
84 <p class="w-24 p-2 text-right">Remove</p>
85 </div>
86 {{#each signups}}
87 <div class="flex flex-col pb-1 pl-5 pr-10 text-gray-100 alternate-bg">
88 <form action="/admin/signups/{{id}}/delete" method="post" class="m-0">
89 <div class="flex flex-row items-center justify-between">
90 <p class="w-1/5 p-2 pb-1">{{email_address}}</p>
91 <p class="w-1/5 p-2 pb-1">{{github_login}}</p>
92 <p class="w-24 p-2 pb-1 text-center">{{#if wants_releases}}[✓]{{else}}[ ]{{/if}}</p>
93 <p class="w-24 p-2 pb-1 text-center">{{#if wants_updates}}[✓]{{else}}[ ]{{/if}}</p>
94 <p class="w-24 p-2 pb-1 text-center">{{#if wants_community}}[✓]{{else}}[ ]{{/if}}</p>
95 <p class="w-24 p-2 pb-1 text-right"><button
96 class="text-lg text-gray-500 hover:text-white">×</button></p>
97 </div>
98 </form>
99 <p class="max-w-full p-2 pt-0 overflow-hidden leading-normal text-gray-400 max-h-5 whitespace-nowrap overflow-ellipsis"
100 title="{{about}}">{{about}}</p>
101 </div>
102 {{/each}}
103 </div>
104</div>
105{{/layout}}