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" class="mr-4 leading-relaxed no-underline lowercase text-main hover:underline">Users</a></li>
28 <li><a href="#signuplist" class="leading-relaxed no-underline lowercase text-main hover:underline">Signups</a></li>
29 </ul>
30 </div>
31
32 <h2 id="userlist" class="pt-10 mb-5 text-white pl-7 pr-7 font-display font-extralight">Users</h2>
33
34 <div class="flex flex-col w-full pb-5 font-mono text-xs" id="users">
35 <div class="flex flex-row pl-5 pr-10 font-bold">
36 <p class="w-1/3 p-2">Github Username</p>
37 <p class="w-32 p-2 text-center">Admin</p>
38 <p class="w-24 p-2"> </p>
39 </div>
40 <div class="flex flex-col pl-5 pr-10 text-gray-100">
41 <form action="/users" method="post" class="m-0">
42 <div class="flex flex-row items-center">
43 <p class="w-1/3 p-2"><input class="block w-full p-2 text-xs bg-transparent border border-white" type="text" name="github_login" required minlength="4" placeholder="@github_handle"></p>
44 <p class="w-32 p-2 text-center"><input type="checkbox" id="admin" name="admin" value="true"></p>
45 <p class="w-24 p-2"><button class="underline hover:no-underline">Add</button></p>
46 </div>
47 </form>
48 </div>
49 </div>
50
51 <div class="flex flex-col w-full pb-10 font-mono text-xs border-b border-white">
52 <div class="flex flex-row pl-5 pr-10 font-bold">
53 <p class="w-1/3 p-2">Github Username</p>
54 <p class="w-32 p-2 text-center">Admin</p>
55 <p class="w-24 p-2"> </p>
56 </div>
57 {{#each users}}
58 <div class="flex flex-col pl-5 pr-10 text-gray-100 alternate-bg">
59 <form action="/users/{{id}}/delete" method="post" class="m-0">
60 <div class="flex flex-row items-center">
61 <p class="w-1/3 p-2">{{github_login}}</p>
62 <p class="w-32 p-2 text-center"><input action="/users/{{id}}" type="checkbox" {{#if admin}}checked{{/if}}></p>
63 <p class="w-24 p-2"><button class="underline hover:no-underline">Remove</button></p>
64 </div>
65 </form>
66 </div>
67 {{/each}}
68 </div>
69
70 <h2 class="pt-10 mb-5 text-white pl-7 pr-7 font-display font-extralight">Signups</h2>
71
72 <div class="flex flex-col w-full pb-10 font-mono text-xs border-b border-white">
73
74 <div class="flex flex-row justify-between pl-5 pr-10 font-bold">
75 <p class="w-1/5 p-2">Email</p>
76 <p class="w-1/5 p-2">Github</p>
77 <p class="w-24 p-2 text-center">Releases</p>
78 <p class="w-24 p-2 text-center">Updates</p>
79 <p class="w-24 p-2 text-center">Community</p>
80 <p class="w-24 p-2 text-right">Remove</p>
81 </div>
82 {{#each signups}}
83 <div class="flex flex-col pb-1 pl-5 pr-10 text-gray-100 alternate-bg">
84 <form action="/signups/{{id}}/delete" method="post" class="m-0">
85 <div class="flex flex-row items-center justify-between">
86 <p class="w-1/5 p-2 pb-1">{{email_address}}</p>
87 <p class="w-1/5 p-2 pb-1">{{github_login}}</p>
88 <p class="w-24 p-2 pb-1 text-center">{{#if wants_releases}}[✓]{{else}}[ ]{{/if}}</p>
89 <p class="w-24 p-2 pb-1 text-center">{{#if wants_updates}}[✓]{{else}}[ ]{{/if}}</p>
90 <p class="w-24 p-2 pb-1 text-center">{{#if wants_community}}[✓]{{else}}[ ]{{/if}}</p>
91 <p class="w-24 p-2 pb-1 text-right"><button class="text-lg text-gray-500 hover:text-white">×</button></p>
92 </div>
93 </form>
94 <p class="max-w-full p-2 pt-0 overflow-hidden leading-normal text-gray-400 max-h-5 whitespace-nowrap overflow-ellipsis" title="{{about}}">{{about}}</p>
95 </div>
96 {{/each}}
97 </div>
98</div>
99{{/layout}}