Add icons #7

webassets/apidocs/openapi.yml

@@ -493,6 +493,10 @@ components:
           type: integer
           description: Activation score. SOTA only
           example: 0
+        icon:
+          type: string
+          descripton: Icon, from the Font Awesome set. This is fairly opinionated but is here to help the Spothole web UI and Field Spotter. Does not include the "fa-" prefix.
+          example: tree
         grid:
           type: string
           description: Maidenhead grid locator for the spot.  This could be from a geographical reference e.g. POTA, or just from the country

webassets/css/style.css

@@ -7,4 +7,10 @@
     max-width: 60em;
     margin: 0 auto;
   }
+}
+
+span.icon-wrapper {
+    display: inline-block;
+    width: 1.5em;
+    text-align: center;
 }

webassets/js/code.js

@@ -36,7 +36,7 @@ function loadSpots() {
           $tr.append(`<td>${row["freq"]}</td>`);
           $tr.append(`<td>${row["mode"]}</td>`);
           $tr.append('<td>' + escapeHtml(`${row["comment"]}`) + '</td>');
-          $tr.append(`<td>${row["source"]}</td>`);
+          $tr.append(`<td><span class='icon-wrapper'><i class='fa-solid fa-${row["icon"]}'></i></span> ${row["source"]}</td>`);
           $tr.append(`<td>${row["de_flag"]}&nbsp;${row["de_call"]}</td>`);
           table.find('tbody').append($tr);
         });