Fixup time related info in system view to only use momentjs

dashboard/src/views/SystemView.vue

@@ -2,7 +2,8 @@
 
 import { ref, onMounted } from 'vue';
 import { Button } from 'pankow';
-import { prettyDate, prettyDecimalSize } from 'pankow/utils';
+import moment from 'moment';
+import { prettyDecimalSize } from 'pankow/utils';
 import Section from '../components/Section.vue';
 import SystemModel from '../models/SystemModel.js';
 import DashboardModel from '../models/DashboardModel.js';
@@ -14,6 +15,8 @@ const config = ref({});
 const info = ref({});
 const memory = ref({});
 const cpus = ref({});
+const uptime = ref('');
+const activeSince = ref('');
 
 function onReboot() {
   systemModel.reboot();
@@ -32,9 +35,13 @@ onMounted(async () => {
   if (error) return console.error(error);
   info.value = result;
 
+  uptime.value = moment.duration(info.value.uptimeSecs, 'seconds').locale(navigator.language).humanize();
+  activeSince.value = info.value.activationTime ? moment(info.value.activationTime).fromNow() : 'unknown';
+
   [error, result] = await dashboardModel.getConfig();
   if (error) return console.error(error);
   config.value = result;
+
 });
 
 </script>
@@ -69,11 +76,11 @@ onMounted(async () => {
       </div>
       <div class="info-row">
         <div class="info-label">{{ $t('system.info.uptime') }}</div>
-        <div class="info-value">{{ info.uptimeSecs }}</div>
+        <div class="info-value">{{ uptime }}</div>
       </div>
       <div class="info-row" ng-show="info.activationTime">
         <div class="info-label">{{ $t('system.info.activationTime') }}</div>
-        <div class="info-value">{{ prettyDate(info.activationTime) }}</div>
+        <div class="info-value">{{ activeSince }}</div>
       </div>
 
     </Section>