From 0e8c64c64ccf9c718a934e12cdb420475768a639 Mon Sep 17 00:00:00 2001
From: jx163 <jx163@students.waikato.ac.nz>
Date: Thu, 28 Aug 2025 19:12:34 +1200
Subject: [PATCH 1/4] Add support for glances uptime

---
 src/components/Widgets/GlancesUptime.vue | 62 ++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/components/Widgets/GlancesUptime.vue

diff --git a/src/components/Widgets/GlancesUptime.vue b/src/components/Widgets/GlancesUptime.vue
new file mode 100644
index 0000000000..be99edf7f7
--- /dev/null
+++ b/src/components/Widgets/GlancesUptime.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="glances-uptime-wrapper" v-if="uptime">
+    <div class="uptime-row">
+      <span class="lbl">Uptime</span>
+      <span class="val">{{ uptime }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import GlancesMixin from '@/mixins/GlancesMixin';
+
+export default {
+  name: 'GlancesUptime',
+  mixins: [WidgetMixin, GlancesMixin],
+  data() {
+    return {
+      uptime: null,
+    };
+  },
+  computed: {
+    endpoint() {
+      return this.makeGlancesUrl('uptime');
+    },
+  },
+  methods: {
+    processData(resp) {
+      if (!resp) {
+        this.error('This uptime plugin is not available.');
+        return;
+      }
+
+      if (typeof resp === 'string') {
+        this.uptime = resp;
+      } else if (typeof resp === 'object') {
+        this.uptime = resp.uptime || resp.uptime_string || JSON.stringify(resp);
+      } else {
+        this.uptime = String(resp);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.glances-uptime-wrapper {
+  .uptime-row {
+    display: flex;
+    padding: 0.25rem 0.2rem;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--widget-text-color);
+    span.lbl {
+      font-weight: bold;
+    }
+    span.val {
+      font-family: var(--font-monospace);
+    }
+  }
+}
+</style>

From 3b55d8bc9d1cbb028b6ee7f05fc5dc2a8b4e6550 Mon Sep 17 00:00:00 2001
From: jx163 <jx163@students.waikato.ac.nz>
Date: Fri, 29 Aug 2025 11:30:41 +1200
Subject: [PATCH 2/4] Add glances uptime in WidgetBase.vue

---
 src/components/Widgets/WidgetBase.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index f67c72aa61..9222d9a665 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -123,6 +123,7 @@ const COMPAT = {
   weather: 'Weather',
   'weather-forecast': 'WeatherForecast',
   'xkcd-comic': 'XkcdComic',
+  'glances-uptime': 'GlancesUptime',
 };
 
 export default {

From 2c2fd5430c6058c747b43ad07c460871e299f714 Mon Sep 17 00:00:00 2001
From: jx163 <jx163@students.waikato.ac.nz>
Date: Sat, 13 Sep 2025 10:50:20 +1200
Subject: [PATCH 3/4] Show uptime and start time

---
 src/components/Widgets/GlancesUptime.vue | 109 ++++++++++++++++++++---
 1 file changed, 97 insertions(+), 12 deletions(-)

diff --git a/src/components/Widgets/GlancesUptime.vue b/src/components/Widgets/GlancesUptime.vue
index be99edf7f7..83e7017fdf 100644
--- a/src/components/Widgets/GlancesUptime.vue
+++ b/src/components/Widgets/GlancesUptime.vue
@@ -1,45 +1,130 @@
 <template>
-  <div class="glances-uptime-wrapper" v-if="uptime">
+  <div class="glances-uptime-wrapper" v-if="secondsSinceBoot">
     <div class="uptime-row">
       <span class="lbl">Uptime</span>
-      <span class="val">{{ uptime }}</span>
+      <span class="val">{{ formattedUptime }}</span>
+    </div>
+    <div class="uptime-row">
+      <span class="lbl">Started Time</span>
+      <span class="val">{{ formatStartTime(startTime) }}</span>
     </div>
   </div>
 </template>
 
 <script>
+import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import GlancesMixin from '@/mixins/GlancesMixin';
 
+const UptimeUtils = {
+  format(seconds) {
+    if (!seconds) return '';
+    const days = Math.floor(seconds / 86400);
+    const hours = Math.floor((seconds % 86400) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = seconds % 60;
+
+    const hh = String(hours).padStart(2, '0');
+    const mm = String(minutes).padStart(2, '0');
+    const ss = String(secs).padStart(2, '0');
+
+    return days > 0 ? `${days} days, ${hh}:${mm}:${ss}` : `${hh}:${mm}:${ss}`;
+  },
+
+  parse(str) {
+    const regex = /(?:(\d+)\s+days?,\s*)?(\d+):(\d+):(\d+)/;
+    const match = str.match(regex);
+    if (!match) return null;
+    const [, d, h, m, s] = match;
+    return (parseInt(d || 0, 10) * 86400)
+        + (parseInt(h, 10) * 3600)
+        + (parseInt(m, 10) * 60)
+        + parseInt(s, 10);
+  },
+};
+
 export default {
   name: 'GlancesUptime',
   mixins: [WidgetMixin, GlancesMixin],
   data() {
     return {
-      uptime: null,
+      secondsSinceBoot: 0,
+      startTime: null,
+      refreshTimer: null,
+      realtimeTimer: null,
     };
   },
   computed: {
     endpoint() {
       return this.makeGlancesUrl('uptime');
     },
+    formattedUptime() {
+      return UptimeUtils.format(this.secondsSinceBoot);
+    },
   },
   methods: {
+    async fetchUptime() {
+      try {
+        const resp = await axios.get(this.endpoint);
+        this.processData(resp.data);
+      } catch {
+        this.error('Failed to fetch uptime');
+      }
+    },
+
     processData(resp) {
-      if (!resp) {
-        this.error('This uptime plugin is not available.');
-        return;
+      let seconds = 0;
+
+      if (typeof resp === 'number') {
+        seconds = resp;
+      } else if (typeof resp === 'string') {
+        seconds = UptimeUtils.parse(resp) || 0;
+      } else if (resp && typeof resp === 'object') {
+        if (typeof resp.uptime === 'number') {
+          seconds = resp.uptime;
+        } else if (resp.uptime_string) {
+          seconds = UptimeUtils.parse(resp.uptime_string) || 0;
+        }
+      }
+
+      this.secondsSinceBoot = seconds;
+      if (!this.startTime) {
+        this.startTime = Math.floor(Date.now() / 1000) - seconds;
       }
 
-      if (typeof resp === 'string') {
-        this.uptime = resp;
-      } else if (typeof resp === 'object') {
-        this.uptime = resp.uptime || resp.uptime_string || JSON.stringify(resp);
-      } else {
-        this.uptime = String(resp);
+      if (seconds) this.startRealtimeCounter();
+    },
+
+    formatStartTime(ts) {
+      if (!ts) return 'N/A';
+      return new Date(ts * 1000).toLocaleString();
+    },
+
+    startRealtimeCounter() {
+      this.clearTimer('realtime');
+      this.realtimeTimer = setInterval(() => {
+        this.secondsSinceBoot += 1;
+      }, 1000);
+    },
+
+    clearTimer(type = 'all') {
+      if (type === 'all' || type === 'refresh') {
+        if (this.refreshTimer) clearInterval(this.refreshTimer);
+        this.refreshTimer = null;
+      }
+      if (type === 'all' || type === 'realtime') {
+        if (this.realtimeTimer) clearInterval(this.realtimeTimer);
+        this.realtimeTimer = null;
       }
     },
   },
+  mounted() {
+    this.fetchUptime();
+    this.refreshTimer = setInterval(this.fetchUptime, 5000);
+  },
+  beforeUnmount() {
+    this.clearTimer('all');
+  },
 };
 </script>
 

From 21d5b421f9c1fa22f94e117c884059e07d49c408 Mon Sep 17 00:00:00 2001
From: jx163 <jx163@students.waikato.ac.nz>
Date: Wed, 17 Sep 2025 14:28:24 +1200
Subject: [PATCH 4/4] Make glances uptime more readable

---
 src/components/Widgets/GlancesUptime.vue | 352 +++++++++++++++++++++--
 1 file changed, 334 insertions(+), 18 deletions(-)

diff --git a/src/components/Widgets/GlancesUptime.vue b/src/components/Widgets/GlancesUptime.vue
index 83e7017fdf..054e518b08 100644
--- a/src/components/Widgets/GlancesUptime.vue
+++ b/src/components/Widgets/GlancesUptime.vue
@@ -1,5 +1,38 @@
 <template>
   <div class="glances-uptime-wrapper" v-if="secondsSinceBoot">
+    <div class="format-selector">
+      <label class="selector-label">Display Format:</label>
+      <select class="format-dropdown" v-model="selectedFormat">
+        <option value="auto">
+          Auto (Smart Format)
+        </option>
+        <option value="full">
+          Full (Days, Hours, Minutes, Seconds)
+        </option>
+        <option value="days">
+          Days Only
+        </option>
+        <option value="hours">
+          Hours Only
+        </option>
+        <option value="minutes">
+          Minutes Only
+        </option>
+        <option value="seconds">
+          Seconds Only
+        </option>
+        <option value="dhm">
+          Days, Hours, Minutes
+        </option>
+        <option value="hms">
+          Hours, Minutes, Seconds
+        </option>
+        <option value="compact">
+          Compact (D:H:M:S)
+        </option>
+      </select>
+    </div>
+
     <div class="uptime-row">
       <span class="lbl">Uptime</span>
       <span class="val">{{ formattedUptime }}</span>
@@ -8,6 +41,31 @@
       <span class="lbl">Started Time</span>
       <span class="val">{{ formatStartTime(startTime) }}</span>
     </div>
+
+    <div class="uptime-details" v-if="showDetails">
+      <div class="detail-row" v-if="cpuData">
+        <span class="lbl">CPU Usage</span>
+        <span class="val">{{ cpuData.total.toFixed(1) }}%</span>
+      </div>
+      <div class="detail-row" v-if="memData">
+        <span class="lbl">Memory</span>
+        <span class="val">
+      {{ ((memData.used / memData.total) * 100).toFixed(1) }}%
+    </span>
+      </div>
+      <div class="detail-row" v-if="fsData && fsData.length">
+        <span class="lbl">Storage</span>
+        <span class="val">
+      {{ ((fsData[0].used / fsData[0].size) * 100).toFixed(1) }}%
+    </span>
+      </div>
+    </div>
+
+    <div class="toggle-details">
+      <button class="details-btn" @click="showDetails = !showDetails">
+        {{ showDetails ? 'Hide Details' : 'Show Details' }}
+      </button>
+    </div>
   </div>
 </template>
 
@@ -17,18 +75,80 @@ import WidgetMixin from '@/mixins/WidgetMixin';
 import GlancesMixin from '@/mixins/GlancesMixin';
 
 const UptimeUtils = {
-  format(seconds) {
+  format(seconds, formatType = 'auto') {
     if (!seconds) return '';
+
     const days = Math.floor(seconds / 86400);
     const hours = Math.floor((seconds % 86400) / 3600);
     const minutes = Math.floor((seconds % 3600) / 60);
     const secs = seconds % 60;
 
-    const hh = String(hours).padStart(2, '0');
-    const mm = String(minutes).padStart(2, '0');
-    const ss = String(secs).padStart(2, '0');
+    switch (formatType) {
+      case 'days':
+        return `${Math.floor(seconds / 86400)} days`;
 
-    return days > 0 ? `${days} days, ${hh}:${mm}:${ss}` : `${hh}:${mm}:${ss}`;
+      case 'hours':
+        return `${Math.floor(seconds / 3600)} hours`;
+
+      case 'minutes':
+        return `${Math.floor(seconds / 60)} minutes`;
+
+      case 'seconds':
+        return `${seconds} seconds`;
+
+      case 'dhm':
+        if (days > 0) {
+          return `${days} days, ${hours} hours, ${minutes} minutes`;
+        } else if (hours > 0) {
+          return `${hours} hours, ${minutes} minutes`;
+        } else {
+          return `${minutes} minutes`;
+        }
+
+      case 'hms': {
+        const totalHours = Math.floor(seconds / 3600);
+        const mm = String(minutes).padStart(2, '0');
+        const ss = String(secs).padStart(2, '0');
+        return totalHours > 0 ? `${totalHours}:${mm}:${ss}` : `${mm}:${ss}`;
+      }
+
+      case 'compact':
+        if (days > 0) {
+          return `${days}d ${String(hours).padStart(2, '0')}h ${String(minutes).padStart(2, '0')}m ${String(secs).padStart(2, '0')}s`;
+        } else {
+          return `${String(hours).padStart(2, '0')}h ${String(minutes).padStart(2, '0')}m ${String(secs).padStart(2, '0')}s`;
+        }
+
+      case 'full': {
+        const hhFull = String(hours).padStart(2, '0');
+        const mmFull = String(minutes).padStart(2, '0');
+        const ssFull = String(secs).padStart(2, '0');
+        return days > 0
+          ? `${days} days, ${hhFull}:${mmFull}:${ssFull}`
+          : `${hhFull}:${mmFull}:${ssFull}`;
+      }
+
+      case 'auto':
+      default:
+        if (days >= 30) {
+          return `${days} days (${Math.floor(days / 30)} months)`;
+        } else if (days >= 7) {
+          return `${days} days (${Math.floor(days / 7)} weeks)`;
+        } else if (days > 0) {
+          const hhAuto = String(hours).padStart(2, '0');
+          const mmAuto = String(minutes).padStart(2, '0');
+          const ssAuto = String(secs).padStart(2, '0');
+          return `${days} days, ${hhAuto}:${mmAuto}:${ssAuto}`;
+        } else if (hours > 0) {
+          const mmAuto = String(minutes).padStart(2, '0');
+          const ssAuto = String(secs).padStart(2, '0');
+          return `${hours}:${mmAuto}:${ssAuto}`;
+        } else if (minutes > 0) {
+          return `${minutes}:${String(secs).padStart(2, '0')}`;
+        } else {
+          return `${secs} seconds`;
+        }
+    }
   },
 
   parse(str) {
@@ -37,9 +157,9 @@ const UptimeUtils = {
     if (!match) return null;
     const [, d, h, m, s] = match;
     return (parseInt(d || 0, 10) * 86400)
-        + (parseInt(h, 10) * 3600)
-        + (parseInt(m, 10) * 60)
-        + parseInt(s, 10);
+      + (parseInt(h, 10) * 3600)
+      + (parseInt(m, 10) * 60)
+      + parseInt(s, 10);
   },
 };
 
@@ -52,6 +172,11 @@ export default {
       startTime: null,
       refreshTimer: null,
       realtimeTimer: null,
+      selectedFormat: 'auto',
+      showDetails: false,
+      cpuData: null,
+      memData: null,
+      fsData: null,
     };
   },
   computed: {
@@ -59,9 +184,38 @@ export default {
       return this.makeGlancesUrl('uptime');
     },
     formattedUptime() {
-      return UptimeUtils.format(this.secondsSinceBoot);
+      return UptimeUtils.format(this.secondsSinceBoot, this.selectedFormat);
+    },
+  },
+  watch: {
+    selectedFormat(newFormat) {
+      try {
+        localStorage.setItem('glances-uptime-format', newFormat);
+      } catch (e) {
+        console.warn('Failed to save uptime format preference:', e);
+      }
     },
   },
+  mounted() {
+    try {
+      const savedFormat = localStorage.getItem('glances-uptime-format');
+      if (savedFormat) {
+        this.selectedFormat = savedFormat;
+      }
+    } catch (e) {
+      console.warn('Failed to load uptime format preference:', e);
+    }
+
+    this.fetchUptime();
+    this.fetchDetails();
+    this.refreshTimer = setInterval(() => {
+      this.fetchUptime();
+      this.fetchDetails();
+    }, 5000);
+  },
+  beforeUnmount() {
+    this.clearTimer('all');
+  },
   methods: {
     async fetchUptime() {
       try {
@@ -72,6 +226,22 @@ export default {
       }
     },
 
+    async fetchDetails() {
+      try {
+        const [cpuResp, memResp, fsResp] = await Promise.all([
+          axios.get(this.makeGlancesUrl('cpu')),
+          axios.get(this.makeGlancesUrl('mem')),
+          axios.get(this.makeGlancesUrl('fs')),
+        ]);
+
+        this.cpuData = cpuResp.data;
+        this.memData = memResp.data;
+        this.fsData = fsResp.data;
+      } catch (e) {
+        console.warn('Failed to fetch details:', e);
+      }
+    },
+
     processData(resp) {
       let seconds = 0;
 
@@ -118,29 +288,175 @@ export default {
       }
     },
   },
-  mounted() {
-    this.fetchUptime();
-    this.refreshTimer = setInterval(this.fetchUptime, 5000);
-  },
-  beforeUnmount() {
-    this.clearTimer('all');
-  },
 };
 </script>
 
 <style scoped lang="scss">
 .glances-uptime-wrapper {
+  .format-selector {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    padding: 0.5rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 4px;
+
+    .selector-label {
+      font-size: 0.9rem;
+      font-weight: 600;
+      color: var(--widget-text-color);
+      white-space: nowrap;
+    }
+
+    .format-dropdown {
+      flex: 1;
+      padding: 0.25rem 0.5rem;
+      background: var(--widget-accent-color, #2a2a2a);
+      color: var(--widget-text-color);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 4px;
+      font-size: 0.85rem;
+      cursor: pointer;
+
+      &:focus {
+        outline: none;
+        border-color: var(--primary-color, #007bff);
+        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+      }
+
+      option {
+        background: var(--widget-accent-color, #2a2a2a);
+        color: var(--widget-text-color);
+      }
+    }
+  }
+
   .uptime-row {
     display: flex;
     padding: 0.25rem 0.2rem;
     align-items: center;
     justify-content: space-between;
     color: var(--widget-text-color);
-    span.lbl {
+
+    .lbl {
       font-weight: bold;
     }
-    span.val {
+
+    .val {
       font-family: var(--font-monospace);
+      background: rgba(255, 255, 255, 0.1);
+      padding: 0.2rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.9rem;
+    }
+  }
+
+  .uptime-details {
+    margin-top: 0.5rem;
+    padding: 0.5rem;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 4px;
+    border-left: 3px solid var(--primary-color, #007bff);
+
+    .detail-row {
+      display: flex;
+      justify-content: space-between;
+      padding: 0.15rem 0;
+      font-size: 0.85rem;
+      color: var(--widget-text-color);
+      opacity: 0.8;
+
+      .lbl {
+        font-weight: 500;
+      }
+
+      .val {
+        font-family: var(--font-monospace);
+        color: var(--primary-color, #007bff);
+      }
+    }
+  }
+
+  .toggle-details {
+    display: flex;
+    justify-content: center;
+    margin-top: 0.5rem;
+
+    .details-btn {
+      padding: 0.3rem 0.8rem;
+      background: rgba(255, 255, 255, 0.1);
+      color: var(--widget-text-color);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 4px;
+      font-size: 0.8rem;
+      cursor: pointer;
+      transition: all 0.2s ease;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.2);
+        transform: translateY(-1px);
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+
+      &:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .glances-uptime-wrapper {
+    .format-selector {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0.3rem;
+
+      .selector-label {
+        text-align: center;
+      }
+    }
+
+    .uptime-row {
+      flex-direction: column;
+      gap: 0.2rem;
+      text-align: center;
+
+      .val {
+        width: 100%;
+        text-align: center;
+      }
+    }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .glances-uptime-wrapper {
+    .format-selector {
+      background: rgba(0, 0, 0, 0.3);
+
+      .format-dropdown {
+        background: #1a1a1a;
+        border-color: rgba(255, 255, 255, 0.1);
+      }
+    }
+
+    .uptime-details {
+      background: rgba(0, 0, 0, 0.2);
+    }
+
+    .details-btn {
+      background: rgba(0, 0, 0, 0.3);
+      border-color: rgba(255, 255, 255, 0.1);
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.5);
+      }
     }
   }
 }