Added download button to history page

src/services/helper.service.js

@@ -108,6 +108,22 @@ export const helperService = {
     );
   },
 
+  dateAsFilenameString(date) {
+    return (
+      date.getFullYear() +
+      "-" +
+      (date.getMonth() + 1) +
+      "-" +
+      date.getDate() +
+      "_" +
+      date.getHours() +
+      "-" +
+      date.getMinutes() +
+      "-" +
+      date.getSeconds()
+    );
+  },
+
   getDurationTimestamp(totalSeconds) {
     totalSeconds = Math.ceil(totalSeconds);
     var days = Math.floor(totalSeconds / 86400);

src/views/History.vue

@@ -1,10 +1,13 @@
 <template>
   <LayoutNavbarPrivate title="History">
-    <section>
+    <div class="center" v-if="working">
-      <div class="center" v-if="working">
+      <b-spinner></b-spinner>
-        <b-spinner></b-spinner>
+    </div>
+    <section v-if="!working">
+      <div class="controls">
+        <b-button :download="downloadFilename" :href="'data:text/plain;charset=utf-8,' + encodeURIComponent(fileOutput)" variant="outline-secondary">Download data</b-button>
       </div>
-      <JugglRecordsList :records="finishedRecords" v-if="!working" />
+      <JugglRecordsList :records="finishedRecords" />
     </section>
   </LayoutNavbarPrivate>
 </template>
@@ -12,6 +15,7 @@
 <script>
 import LayoutNavbarPrivate from "@/components/layout/LayoutNavbarPrivate";
 import JugglRecordsList from "@/components/juggl/JugglRecordsList";
+import { helperService } from "@/services/helper.service.js";
 import store from "@/store";
 
 export default {
@@ -28,9 +32,23 @@ export default {
   computed: {
     finishedRecords: () => {
       return store.getters.finishedRecords;
+    },
+    downloadFilename: function() {
+      return "juggl_data_" + helperService.dateAsFilenameString(new Date()) + ".json";
+    },
+    fileOutput: function() {
+      var content = {
+        user: store.getters.user,
+        tags: store.getters.tags,
+        projects: store.getters.projects,
+        records: store.getters.records
+      };
+
+      return JSON.stringify(content);
     }
   },
   created: function() {
+    store.dispatch("loadTags");
     store.dispatch("loadProjects");
     store
       .dispatch("loadRecords", { limit: 0, finished: true })
@@ -51,6 +69,10 @@ export default {
 .center
   text-align: center
 
+.controls
+  margin-bottom: 1rem
+  text-align: right
+
 section
   margin-bottom: 4rem
 </style>