Add group to host to permit grouping hosts together

data.go

@@ -35,6 +35,7 @@ type Host struct {
 	Network string `json:"network"` // in CIDR notation
 	Name    string `json:"name"`
 	MAC     string `json:"mac"`
+	Group   string `json:"group"`
 }
 
 func LoadData(path string) (*Data, error) {

static/wol.html

@@ -17,9 +17,9 @@
 
   <div id="data" hidden>
     <h2>Hosts <small>(click to wake)</small></h2>
-    <ul id="hosts">
+    <div id="hosts">
         <!-- Filled via JavaScript -->
-    </ul>
+    </div>
 
     <h2>Add host</h2>
 
@@ -37,6 +37,11 @@
         <label for="add-mac">MAC:</label>
         <input type="text" id="add-mac">
       </p>
+      <p>
+        <label for="add-group">Group:</label>
+        <input type="text" id="add-group">
+        (optional, all hosts with the same group are grouped together)
+      </p>
       <p>
         <input type="submit" id="add-submit" value="Add">
       </p>

static/wol.js

@@ -48,9 +48,28 @@ async function load() {
     document.querySelector('#warning').hidden = !noNetworks;
     document.querySelector('#data').hidden = noNetworks;
 
+    // Group hosts with the same group together
+    const groups = new Map();
+    for (const x of json.hosts) {
+        if (!groups.has(x.group)) {
+            groups.set(x.group, []);
+        }
+        groups.get(x.group).push(x);
+    }
+
     const hosts = document.querySelector('#hosts');
     hosts.innerHTML = ''; // delete all children
-    for (const x of json.hosts) {
+    for (const group of [...groups.keys()].sort()) {
+        // Group name
+        if (group !== '') {
+            const h = document.createElement('h3');
+            h.textContent = group;
+            hosts.appendChild(h);
+        }
+        const ul = document.createElement('ul');
+        hosts.appendChild(ul);
+
+        for (const x of groups.get(group)) {
         const indicator = document.createElement('strong');
 
         const wake = document.createElement('a');
@@ -79,7 +98,8 @@ async function load() {
         li.appendChild(document.createTextNode(') '));
         li.appendChild(delSmall);
 
-        hosts.appendChild(li);
+        ul.appendChild(li);
+        }
     }
 }
 
@@ -91,12 +111,14 @@ async function hostAdd(evt) {
     const network = document.querySelector('#add-network').value;
     const name = document.querySelector('#add-name').value;
     const mac = document.querySelector('#add-mac').value.trim();
+    const group = document.querySelector('#add-group').value.trim();
 
     const data = {
         host: {
             network: network,
             name: name,
             mac: mac,
+            group: group,
         },
     };
     const resp = await fetch('api/add', {
@@ -121,6 +143,7 @@ async function hostAdd(evt) {
     // Don't reset "network" to not confuse the user
     document.querySelector('#add-name').value = '';
     document.querySelector('#add-mac').value = '';
+    document.querySelector('#add-group').value = '';
 
     // Simplest way to fetch latest version
     load();