From 27b34e36e2a357c672aeca7813cef370e9362ca2 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Thu, 5 Nov 2020 03:55:44 +0100
Subject: [PATCH] Added filter to format Date to string inside of templates

---
 quasar.conf.js                                |  2 +-
 src/boot/filter.ts                            | 25 +++++++++++++++++++
 .../user/components/settings/Sessions.vue     |  4 ++-
 src/plugins/user/pages/User.vue               |  2 +-
 4 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 src/boot/filter.ts

diff --git a/quasar.conf.js b/quasar.conf.js
index e13865c..33eb5d4 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -24,7 +24,7 @@ module.exports = configure(function(ctx) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://quasar.dev/quasar-cli/boot-files
-    boot: ['composition-api', 'axios', 'login', 'plugins', 'loading'],
+    boot: ['composition-api', 'axios', 'filter', 'login', 'plugins', 'loading'],
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
     css: ['app.scss'],
diff --git a/src/boot/filter.ts b/src/boot/filter.ts
new file mode 100644
index 0000000..6ae748e
--- /dev/null
+++ b/src/boot/filter.ts
@@ -0,0 +1,25 @@
+import { boot } from 'quasar/wrappers';
+
+export default boot(({ Vue }) => {
+  function formatDate(date: Date) {
+    let d = date.getDate().toString();
+    if (d.length == 1) d = '0' + d;
+    let m = date.getMonth().toString();
+    if (m.length == 1) m = '0' + m;
+    return `${d}.${m}.${date.getFullYear().toString()}`;
+  }
+
+  Vue.filter('date', formatDate);
+
+  Vue.filter('dateTime', function(date: Date, seconds = false) {
+    let H = date.getHours().toString();
+    if (H.length == 1) H = `0${H}`;
+    let M = date.getMinutes().toString();
+    if (M.length == 1) M = `0${M}`;
+    let S = ''
+    if (seconds) {
+        S = ':' + (date.getSeconds() > 9 ? date.getSeconds().toString() : `0${date.getSeconds().toString()}`);
+    }
+    return `${H}:${M}${S} ${formatDate(date)}`;
+  });
+});
diff --git a/src/plugins/user/components/settings/Sessions.vue b/src/plugins/user/components/settings/Sessions.vue
index d06a53a..361bccf 100644
--- a/src/plugins/user/components/settings/Sessions.vue
+++ b/src/plugins/user/components/settings/Sessions.vue
@@ -21,7 +21,9 @@
           Lebenszeit:
           {{ session.lifetime }}
         </div>
-        <div class="col-xs-12 col-sm-6">Läuft aus: {{ session.expires }}</div>
+        <div class="col-xs-12 col-sm-6">
+          Läuft aus: {{ session.expires | dateTime(true) }}
+        </div>
       </div>
     </q-card-section>
     <q-card-actions align="right">
diff --git a/src/plugins/user/pages/User.vue b/src/plugins/user/pages/User.vue
index 1dde46e..fe57f56 100644
--- a/src/plugins/user/pages/User.vue
+++ b/src/plugins/user/pages/User.vue
@@ -10,7 +10,7 @@
             <li>{{ role }}</li>
           </ul>
           <br />
-          Token expires: {{ sessionObj.expires }}
+          Token expires: {{ sessionObj.expires | dateTime }}
         </q-card-section>
       </q-card>
     </q-page>