From 9f95e704b9b95e59f335f082e9ee54160baa2f85 Mon Sep 17 00:00:00 2001
From: Shy <shy@posteo.de>
Date: Sat, 4 May 2024 18:28:09 +0200
Subject: [PATCH 1/2] Added buttons for known types.

---
 static/c4.css  | 15 +++++++++++++++
 static/form.js | 18 ++++++++++++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/static/c4.css b/static/c4.css
index 7805a9b..c0ca189 100644
--- a/static/c4.css
+++ b/static/c4.css
@@ -36,6 +36,21 @@ h1, h1 a  {
     font-size: smaller;
 }
 
+#knowntypes button {
+    color: #220;
+    background-color: #dfaa37;
+    border: 1px solid #220;
+    border-radius: 4px;
+    padding: 0.2em 0.4em;
+    margin: 0.2em;
+    font-weight: bolder;
+    cursor: pointer;
+}
+
+#knowntypes button:hover, #knowntypes button:focus {
+    background-color: #f5c251;
+}
+
 .btn {
   box-shadow: 0 3px 6px -1px rgba(0,0,0,0.3);
 }
diff --git a/static/form.js b/static/form.js
index a82d2a5..d5ab745 100644
--- a/static/form.js
+++ b/static/form.js
@@ -65,8 +65,22 @@ function knownTypes() {
       map[i.type] = true;
     }
   }
-  let types = Object.keys(map).sort().join(', ')
-  document.getElementById('knowntypes').textContent = `Known types: ${types}.`;
+
+  // Get location in document.
+  let known_types = document.getElementById('knowntypes');
+  known_types.textContent = `Known types: `;
+
+  // Create a button for every known type.
+  for (let label of Object.keys(map).sort()) {
+      btn = document.createElement('button');
+      btn.setAttribute('type', 'button');
+      btn.textContent = label;
+      btn.addEventListener('click', function() {
+          document.getElementById('type').value = label;
+      });
+
+      known_types.appendChild(btn);
+  }
 }
 
 function save() {

From c9cda14f38631eb717593c0ceab9234fb005394c Mon Sep 17 00:00:00 2001
From: Shy <shy@posteo.de>
Date: Mon, 6 May 2024 14:42:21 +0200
Subject: [PATCH 2/2] Fix indentation and use const where preferable

---
 static/form.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/static/form.js b/static/form.js
index d5ab745..d1affc1 100644
--- a/static/form.js
+++ b/static/form.js
@@ -67,19 +67,19 @@ function knownTypes() {
   }
 
   // Get location in document.
-  let known_types = document.getElementById('knowntypes');
+  const known_types = document.getElementById('knowntypes');
   known_types.textContent = `Known types: `;
 
   // Create a button for every known type.
   for (let label of Object.keys(map).sort()) {
-      btn = document.createElement('button');
-      btn.setAttribute('type', 'button');
-      btn.textContent = label;
-      btn.addEventListener('click', function() {
-          document.getElementById('type').value = label;
-      });
+    btn = document.createElement('button');
+    btn.setAttribute('type', 'button');
+    btn.textContent = label;
+    btn.addEventListener('click', function() {
+      document.getElementById('type').value = label;
+    });
 
-      known_types.appendChild(btn);
+    known_types.appendChild(btn);
   }
 }