Signal quickselect

src/layouts/settings.pug

@@ -1,18 +1,22 @@
 mixin select(label, options)
     - const id = label.toLowerCase();
     label(for=id)
-        h4=label
-    select(id=id name=id)
+        h5=label
+    select(id=id name=id class="class")
         each option in options
             option=option
 
 mixin settings()
     section#send-signal
         form
             h3 Send signal
-            +select("Location", ["Front", "Middle", "Back", "Custom"])
-            +select("Type", ["Wait", "Need water", "Need medical intervention", "Police intervention", "Police brutality", "Custom"])
-            +select("Urgency", ["Incoming",  "When possible", "Urgent", "Life-threatening", "Custom" ])
+            h4 Quick select
+            +select("Urgency", ["Incoming",  "When possible", "Urgent", "Life-threatening" ])
+            +select("Type", ["wait", "need water", "need medical intervention", "police intervention", "police brutality"])
+            +select("Location", ["everywhere", "at the front", "at the middle", "at the back"])
+
+            label(for="signal") Signal to send:
+            input(type="text" name="signal" id="signal")
             input(type="submit" value="Send signal")
 
     section#settings

src/settings.ts

@@ -5,6 +5,7 @@ let pb: PocketBase;
 
 let addingSlogan = false;
 let oldSlogansListInner = "";
+const signalQuickSelectors = $("#send-signal select");
 
 async function changeCurrentSlogan(e) {
     const selectedRadio = $(e.target)
@@ -78,6 +79,10 @@ function sendSignal(e) {
 }
 
 
+function signalQuickSelect() {
+    const [urgency, type, location] = signalQuickSelectors.map((i, elem) => $(elem).val());
+    $("#signal").val(`${urgency}: ${type} ${location}`)
+}
 
 function settingsInit() : PocketBase {
     pb = init();
@@ -86,6 +91,9 @@ function settingsInit() : PocketBase {
         const addSlogan = $("#add-slogan")
         const editSlogans = $("#edit-slogans")
 
+        // Load default values into #signal value
+        signalQuickSelect();
+
         $("#slogan-changer").on("change", function() {
             // Save old slogan state
             if (oldSlogansListInner == "") {
@@ -94,6 +102,7 @@ function settingsInit() : PocketBase {
             activateSloganChanger();
         })
         $("#send-signal").on("submit", sendSignal);
+        signalQuickSelectors.on("input", signalQuickSelect);
 
         addSlogan.on("click", (e) => {
             if (!addingSlogan) {
@@ -137,8 +146,8 @@ function settingsInit() : PocketBase {
                 newLi.append(form);
                 li.replaceWith(newLi);
             })
-
         })
+
     })
 
     return pb;