Label editing

frontend/static/admin.js

@@ -1,5 +1,6 @@
 (() => {
 const pluginList = document.querySelector('#plugin-list');
+const adminLabelList = document.querySelector('#admin-label-list');
 const userList = document.querySelector('#user-list');
 const userForm = document.querySelector('#user-form');
 const adminControls = document.querySelector('#admin-controls');
@@ -31,6 +32,31 @@ function renderPlugins(plugins) {
   }));
 }
 
+function renderLabels(labels) {
+  adminLabelList.replaceChildren(...labels.map((label) => {
+    const row = document.createElement('div');
+    row.className = 'plugin-row';
+    const text = document.createElement('span');
+    text.textContent = `${label.name}${label.creator ? ` (${label.creator})` : ' (default)'}`;
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'danger-button';
+    button.textContent = 'Delete';
+    button.addEventListener('click', async () => {
+      const response = await fetch(`/api/admin/labels/${label.id}`, {method: 'DELETE', headers: authHeaders()});
+      if (response.ok) loadLabels();
+    });
+    row.append(text, button);
+    return row;
+  }));
+}
+
+async function loadLabels() {
+  const response = await fetch('/api/admin/labels', {headers: authHeaders()});
+  if (!response.ok) throw new Error('Could not load labels');
+  renderLabels(await response.json());
+}
+
 function renderUsers(users) {
   userList.replaceChildren(...users.map((user) => {
     const row = document.createElement('div');
@@ -95,7 +121,7 @@ async function loadAdminState() {
     return;
   }
 
-  await Promise.all([loadUsers(), loadPlugins()]);
+  await Promise.all([loadUsers(), loadPlugins(), loadLabels()]);
   showAdminState(true);
 }
 
@@ -174,5 +200,6 @@ loadAdminState().catch((error) => {
   adminAuthNotice.classList.remove('hidden');
   userList.textContent = '';
   pluginList.textContent = '';
+  adminLabelList.textContent = '';
 });
 })();