wip: initial widget

src/components/Widgets/UptimeKuma.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="example-wrapper">
+    <template v-if="monitors">
+    <div v-for="(monitor, index) in monitors" :key="index" class="">
+      <p>{{monitor.name}}</p>
+      <p>{{monitor.status }}</p>
+      <p>{{monitor.responseTime }}</p>
+
+    </div>
+    </template>
+  </div>
+</template>
+
+<script>
+/**
+ * A simple example which you can use as a template for creating your own widget.
+ * Takes two optional parameters (`text` and `count`), and fetches a list of images
+ * from dummyapis.com, then renders the results to the UI.
+ */
+import axios from "axios";
+import WidgetMixin from "@/mixins/WidgetMixin";
+
+export default {
+  mixins: [WidgetMixin],
+  components: {},
+  data() {
+    return {
+      monitors: null, // Will store our results from the API
+    };
+  },
+  mounted() {
+    this.fetchData();
+  },
+  computed: {
+    /* Get the users chosen number of results, from this.options.count
+     * If not present, or not a number, then return the default (5)
+     */
+    apiKey() {
+      const apiKey = this.options.apiKey;
+
+      if (!apiKey) throw "No API key set";
+
+      return apiKey;
+    },
+    /* Get users desired image text, or return `Dashy` */
+    url() {
+      const apiUrl = this.options.url;
+
+      if (!apiUrl) throw "No URL set";
+
+      return apiUrl;
+    },
+    authHeaders() {
+      if (!this.options.apiKey) {
+        return {};
+      }
+      const encoded = window.btoa(`:${this.options.apiKey}`);
+        return { Authorization: `Basic ${encoded}` };
+    },
+  },
+  methods: {
+    /* The update() method extends mixin, used to update the data.
+     * It's called by parent component, when the user presses update
+     */
+    update() {
+      this.startLoading();
+      this.fetchData();
+    },
+    /* Make the data request to the computed API endpoint */
+    fetchData() {
+      this.makeRequest(this.url, this.authHeaders)
+        .then(this.processData);
+    },
+    /* Convert API response data into a format to be consumed by the UI */
+    processData(response) {
+      const rows = response.split('\n').filter(row => row.startsWith("monitor_"));
+
+      const monitors = new Map();
+
+      const regex = /monitor_name="([^"]+)"/;
+
+      const getValue = (row) => row.match(/\b\d+\b$/);
+
+      for (const row of rows) {
+        const key = row.match(/^(.*?)\{/);
+        const monitorName = row.match(regex);
+
+        if (!monitors.has(monitorName)) {
+          monitors.set(monitorName, {name: monitorName});
+        }
+
+        const existingMonitor = monitors.get(monitorName);
+
+        const value = getValue(row);
+        switch (key) {
+          case "monitor_cert_days_remaining": {
+            existingMonitor.certDaysRemaining = value;
+            break;
+          }
+          case "monitor_cert_is_valid": {
+            existingMonitor.certValid = value;
+            break;
+          }
+          case "monitor_response_time": {
+            existingMonitor.responseTime = value;
+            break;
+          }
+          case "monitor_status": {
+            existingMonitor.status= value;
+            break;
+          }
+          default:
+            console.log("not matched", key);
+            break;
+        }
+
+      }
+
+      console.log(monitors);
+      this.monitors = Array.from(monitors.values());
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.example-wrapper {
+  .image-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    p.picture-title {
+      font-size: 1.2rem;
+      color: var(--widget-text-color);
+    }
+    img.picture-result {
+      width: 4rem;
+      margin: 0.5rem 0;
+      border-radius: var(--curve-factor);
+    }
+    &:not(:last-child) {
+      border-bottom: 1px dashed var(--widget-text-color);
+    }
+  }
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -1,11 +1,18 @@
 <template>
-  <div :class="`widget-base ${ loading ? 'is-loading' : '' }`">
+  <div :class="`widget-base ${loading ? 'is-loading' : ''}`">
     <!-- Update and Full-Page Action Buttons  -->
-    <Button :click="update" class="action-btn update-btn" v-if="!hideControls && !loading">
+    <Button
+      :click="update"
+      class="action-btn update-btn"
+      v-if="!hideControls && !loading"
+    >
       <UpdateIcon />
     </Button>
-    <Button :click="fullScreenWidget"
+    <Button
-      class="action-btn open-btn" v-if="!hideControls && !error && !loading">
+      :click="fullScreenWidget"
+      class="action-btn open-btn"
+      v-if="!hideControls && !error && !loading"
+    >
       <OpenIcon />
     </Button>
     <!-- Loading Spinner -->
@@ -19,9 +26,11 @@
       <p class="retry-link" @click="update">Retry</p>
     </div>
     <!-- Widget Label -->
-    <div class="widget-label" v-if="widgetOptions.label">{{ widgetOptions.label }}</div>
+    <div class="widget-label" v-if="widgetOptions.label">
+      {{ widgetOptions.label }}
+    </div>
     <!-- Widget -->
-    <div :class="`widget-wrap ${ error ? 'has-error' : '' }`">
+    <div :class="`widget-wrap ${error ? 'has-error' : ''}`">
       <component
         v-bind:is="component"
         :options="widgetOptions"
@@ -115,6 +124,7 @@ const COMPAT = {
   'synology-download': 'SynologyDownload',
   'system-info': 'SystemInfo',
   'tfl-status': 'TflStatus',
+  'uptime-kuma':'UptimeKuma',
   'wallet-balance': 'WalletBalance',
   weather: 'Weather',
   'weather-forecast': 'WeatherForecast',
@@ -205,14 +215,14 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/media-queries.scss';
+@import "@/styles/media-queries.scss";
 .widget-base {
   position: relative;
   padding: 0.75rem 0.5rem 0.5rem 0.5rem;
   background: var(--widget-base-background);
   box-shadow: var(--widget-base-shadow, none);
   // Refresh and full-page action buttons
-  button.action-btn  {
+  button.action-btn {
     height: 1rem;
     min-width: auto;
     width: 1.75rem;
@@ -245,7 +255,9 @@ export default {
       opacity: 0.5;
       border-radius: var(--curve-factor);
       background: #ffff0040;
-      &:hover { background: none; }
+      &:hover {
+        background: none;
+      }
     }
   }
   // Error message output
@@ -285,5 +297,4 @@ export default {
     }
   }
 }
-
 </style>