Added filter to format Date to string inside of templates

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'],

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)}`;
+  });
+});

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">

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>