Adds extensions to conf, so that img type can be determined

src/components/Item.vue

@@ -7,15 +7,15 @@
                 <div class="overflow-dots">...</div>
             </div>
             <img
-                v-if="iconType === 'img' && icon"
+                v-if="icon"
-                :src="`/img/item-icons/tile-icons/${icon}.png`"
+                :src="getAppropriateImgPath(icon)"
                 class="tile-icon"
             />
-            <img
+            <!-- <img
                 v-else-if="iconType === 'svg' && icon"
                 :src="`/img/item-icons/tile-svgs/${icon}.svg`"
                 class="tile-svg"
-            />
+            /> -->
             <!-- <img
                 v-else-if="fontAwesome"
                 :src="`/img/tile-svgs/${svg}.svg`"
@@ -35,7 +35,6 @@ export default {
     subtitle: String, // Optional sub-text
     description: String, // Optional tooltip hover text
     icon: String, // Optional path to icon, within public/img/tile-icons
-    iconType: String, // 'img' | 'svg' | 'fa' | undefined, // Type of icon
     svg: String, // Optional vector graphic, that is then dynamically filled
     color: String, // Optional background color, specified in hex code
     url: String, // URL to the resource, optional but recommended
@@ -50,6 +49,46 @@ export default {
       getId: this.id,
     };
   },
+  methods: {
+    isUrl(str) {
+      const pattern = new RegExp(/(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-/]))?/);
+      return pattern.test(str);
+    },
+    /* Checks if the icon is from a local image, remote URL, SVG or font-awesome */
+    getAppropriateImgPath(img) {
+      const imageType = this.determineImageType(img);
+      switch (imageType) {
+        case 'url':
+          return img;
+        case 'img':
+          return `/img/item-icons/tile-icons/${img}`;
+        case 'svg':
+          return img;
+        case 'fas':
+          return img;
+        default:
+          return '';
+      }
+    },
+    /* Checks if the icon is from a local image, remote URL, SVG or font-awesome */
+    determineImageType(img) {
+      const fileExtRegex = /(?:\.([^.]+))?$/;
+      const validImgExtensions = ['png', 'jpg'];
+      let imgType = '';
+      if (this.isUrl(img)) {
+        imgType = 'url';
+      } else if (validImgExtensions.includes(fileExtRegex.exec(img)[1])) {
+        imgType = 'img';
+      } else if (fileExtRegex.exec(img)[1] === 'svg') {
+        imgType = 'svg';
+      } else if (img.include('fas')) {
+        imgType = 'fas';
+      } else {
+        imgType = 'none';
+      }
+      return imgType;
+    },
+  },
   mounted() {
     // Detects overflowing text, and allows is to marguee on hover
     // The below code is horifically bad, it is embarassing that I wrote it...
@@ -60,7 +99,7 @@ export default {
       if (isOverflowing) {
         tileElem.className += ' is-overflowing';
       }
-    } // Not from present me to past me: WTF?!
+    } // Note from present me to past me: WTF?!
   },
 };
 </script>

src/data/conf.yml

@@ -7,162 +7,136 @@ sections:
   items:
   - title: OPNsense
     description: Firewall Central Management
-    icon: networking/opnsense
+    icon: networking/opnsense.png
     iconType: img
     url: https://192.168.1.1
   - title: NetData
     description: System resource usage on firewall
-    icon: networking/netdata
+    icon: networking/netdata.png
-    iconType: img
     url: http://192.168.1.1:19999/
   - title: MalTrail
     description: Malicious traffic detection system
-    icon: networking/maltrail
+    icon: networking/maltrail.png
     iconType: img
     url: 192.168.1.1:8338
   - title: Ntopng
     description: Network traffic probe and network use monitor
-    icon: networking/ntop
+    icon: networking/ntop.png
     iconType: img
     url: 192.168.1.1:3001
   - title: Sensei
     description: Additional data features
-    icon: networking/sensei
+    icon: networking/sensei.png
     iconType: img
     url: https://192.168.1.1/ui/sensei/
   - title: Monit
     description: Status of firewall system alerts
-    icon: networking/monit
+    icon: networking/monit.png
     iconType: img
     url: https://192.168.1.1/ui/monit/status
   - title: Firewall Logs
     description: Real-time view of firewall data and logs
-    icon: networking/logs
+    icon: networking/logs.png
     iconType: img
     url: https://192.168.1.1/ui/diagnostics/firewall/log
   - title: WireGuard
     description: Manage WireGuard client and server on firewall
-    icon: networking/wireguard
+    icon: networking/wireguard.png
-    iconType: img
     url: https://192.168.1.1/ui/wireguard/general
 - name: DNS Device
   items:
   - title: Pi-Hole
     description: DNS settings for ad & tracker blocking
-    provider: Cockpit
+    icon: networking/pihole.png
-    iconType: img
-    icon: networking/pihole
     url: http://192.168.130.2/admin
   - title: PiAlert
     description: Presence monitoring and ARP scanning
-    provider: GoAccess
+    icon: networking/pialert.png
-    iconType: img
-    icon: networking/pialert
     url: http://192.168.130.2/pialert/
   - title: SmokePing
     description: Network latency monitoring
-    iconType: img
+    icon: networking/smokeping.png
-    icon: networking/smokeping
     url: http://192.168.130.2:8086/
   - title: StatPing
     description: Up-time monitoring for local service
-    iconType: img
+    icon: networking/statping.png
-    icon: networking/statping
     url: http://192.168.130.2:8083/
   - title: LibreSpeed
     description: Local network speed and latency test
-    iconType: img
+    icon: networking/librespeed.png
-    icon: networking/librespeed
     url: http://192.168.130.2:49154/
   - title: NetData
     description: Real-time system resource usage
-    iconType: img
+    icon: networking/netdata.png
-    icon: networking/netdata
     url: http://192.168.130.2:19999
   - title: Portainer
     description: Docker container management
-    iconType: img
+    icon: networking/portainer.png
-    icon: networking/portainer
     url: http://192.168.130.2:9000/
   - title: cAdvisor
     description: Container monitoring
-    iconType: img
+    icon: networking/cadvisor.png
-    icon: networking/cadvisor
     url: http://192.168.130.2:8084/
   - title: Glances
     description: Simple resource usage
-    iconType: img
+    icon: networking/glances.png
-    icon: networking/glances
     url: http://192.168.130.2:61208
   - title: Dozzle
     description: Docker container web log viewer
-    iconType: img
+    icon: networking/dozzle.png
-    icon: networking/dozzle
     url: http://192.168.130.2:8093
   - title: Prometheus
     description: System Statistics Aggregation with PromQL
-    iconType: img
+    icon: networking/prometheus.png
-    icon: networking/prometheus
     url: http://192.168.130.2:8090/
   - title: Grafana
     description: Data visualised on dashboards
-    iconType: img
+    icon: networking/grafana.png
-    icon: networking/grafana
     url: http://192.168.130.2:8091/
 - name: Other Devices
   items:
   - title: Modem
     description: ISP Router Modem Combo
-    iconType: img
     icon: ''
     url: http://192.168.1.5
   - title: Wireless Access Point
     description: View clients connected to WiFi
     icon: ''
-    iconType: img
     url: http://192.168.1.109/info.php
   - title: Fing
     description: Monitor connectivity issues, ISP quality, health checks and troubleshooting
     provider: Fing
     icon: ''
-    iconType: img
     url: https://app.fing.com/
   - title: Switch
     description: Manage VLANs on Ubiquity Ethernet switch
     icon: ''
-    iconType: img
     url: "/"
 - name: External Services
   items:
   - title: DuckDNS
     description: Dynamic DNS for fixed public IP
-    icon: networking/duckdns
+    icon: networking/duckdns.png
-    iconType: img
     url: https://www.duckdns.org/
   - title: BorgBase
     description: Off-site system Borg backups
-    icon: networking/borgbase
+    icon: networking/borgbase.png
-    iconType: img
     url: https://www.borgbase.com/repositories
   - title: Mullvad
     description: Hosted VPN provider
-    icon: networking/mullvad
+    icon: networking/mullvad.png
-    iconType: img
     url: https://mullvad.net/en/account/
   - title: ZeroTier
     description: Secure networks between devices
-    icon: networking/zeroteir
+    icon: networking/zeroteir.png
-    iconType: img
     url: https://my.zerotier.com/
   - title: HealthChecks
     description: Cron Job Monitoring
-    icon: networking/healthchecks
+    icon: networking/healthchecks.png
-    iconType: img
     url: https://healthchecks.io/checks/
   - title: ISP - Vodafone
     description: Broadband internet provider
-    icon: networking/vodafone
+    icon: networking/vodafone.png
-    iconType: img
     url: https://myaccount.vodafone.co.uk/
 - name: External Utilities
   displayData:
@@ -171,20 +145,16 @@ sections:
   - title: Public IP
     description: Check public IP and associated data
     icon: ''
-    iconType: img
     url: https://www.whatismyip.com/
   - title: Who Is Lookup
     description: Check ICAN info for a given IP address or domain
     icon: ''
-    iconType: img
     url: https://whois.domaintools.com/
   - title: Speed Test
     description: Upload + download speeds and latency
     icon: ''
-    iconType: img
     url: https://speed.cloudflare.com/
   - title: Mullvad Check
     description: Confirms a secure connection to Mullvad's WireGuard servers
     icon: ''
-    iconType: img
     url: https://mullvad.net/check