Backup/restore data

Author: Stigmatoz

src/_locales/de/messages.json

@@ -248,5 +248,15 @@
   },
   "cancel": {
     "message": "Abbrechen"
+  },
+  "backupAndRestore": {
+    "message": "Sicherung und Wiederherstellen",
+    "description": "Sie können eine Sicherungskopie aller Daten für alle besuchten Websites herunterladen"
+  },
+  "backup": {
+    "message": "Sicherung"
+  },
+  "restore": {
+    "message": "Wiederherstellen"
   }
 }

src/_locales/en/messages.json

@@ -248,5 +248,15 @@
   },
   "cancel": {
     "message": "Cancel"
+  },
+  "backupAndRestore": {
+    "message": "Backup and restore",
+    "description": "You can download a backup copy of all data for all visited sites"
+  },
+  "backup": {
+    "message": "Backup"
+  },
+  "restore": {
+    "message": "Restore"
   }
 }

src/_locales/ru/messages.json

@@ -248,5 +248,15 @@
   },
   "cancel": {
     "message": "Отмена"
+  },
+  "backupAndRestore": {
+    "message": "Резервное копирование и восстановление",
+    "description": "Вы можете скачать резервную копию всех данных по всем посещенным сайтам"
+  },
+  "backup": {
+    "message": "Скачать резервную копию"
+  },
+  "restore": {
+    "message": "Восстановить из резервной копиии"
   }
 }

src/components/GeneralSettings.vue

@@ -86,6 +86,19 @@
     <p class="description">{{ t('removeAllData.description') }}</p>
     <input type="button" :value="t('remove.message')" @click="removeAll()" />
   </div>
+  <div class="settings-item">
+    <label class="setting-header d-inline-block">{{ t('backupAndRestore.message') }}</label>
+    <p class="description">{{ t('backupAndRestore.description') }}</p>
+    <input type="button" :value="t('backup.message')" @click="backup()" />
+    <input
+      type="file"
+      ref="restoreFile"
+      style="display: none"
+      @change="restoreFileUpload()"
+      accept="application/json"
+    />
+    <input type="button" class="ml-10" :value="t('restore.message')" @click="restore()" />
+  </div>
   <div id="removeAllConfirmModal" class="modal" v-if="needToConfirmDeleteAllData">
     <div class="modal-content">
       <p class="text-center">{{ t('removeAllDataConfirm.message') }}</p>
@@ -121,10 +134,12 @@ import {
   VIEW_TIME_IN_BADGE_DEFAULT,
   InactivityInterval,
 } from '../storage/storage-params';
-import { ranges, ThisWeekRange } from '../utils/date';
+import { ranges, ThisWeekRange, todayLocalDate } from '../utils/date';
 import { useImportToCsv } from '../compositions/toCsv';
 import { FileType, useFile } from '../compositions/loadFile';
 import { removeAllData } from '../compositions/remove-all-data';
+import { injectTabsRepository } from '../repository/inject-tabs-repository';
+import { restoreData } from '../compositions/restoreData';
 
 const { t } = useI18n();
 
@@ -141,6 +156,8 @@ const presetRanges = ranges();
 
 const needToConfirmDeleteAllData = ref<boolean>();
 
+const restoreFile = ref<any>();
+
 onMounted(async () => {
   viewTimeInBadge.value = await settingsStorage.getValue(
     StorageParams.VIEW_TIME_IN_BADGE,
@@ -204,6 +221,45 @@ async function removeAllConfirm() {
 function cancel() {
   needToConfirmDeleteAllData.value = false;
 }
+
+async function backup() {
+  const repo = await injectTabsRepository();
+  const tabs = repo.getTabs();
+  const json = JSON.stringify(tabs);
+  useFile(json, FileType.JSON, `backup-${todayLocalDate()}.json`);
+}
+
+function restore() {
+  restoreFile.value.click();
+}
+
+function restoreFileUpload() {
+  try {
+    const file = restoreFile.value.files[0];
+    if (file != null && file.type === FileType.JSON) {
+      var reader = new FileReader();
+      reader.readAsText(file, 'UTF-8');
+      reader.onload = async readerEvent => {
+        if (readerEvent != null) {
+          let content = readerEvent.target?.result;
+          if (content != null) {
+            await restoreData(content as string);
+          }
+        }
+      };
+    } else {
+      notification.notify({
+        title: 'Wrong restore file format',
+        type: 'warn',
+      });
+    }
+  } catch {
+    notification.notify({
+      title: 'Wrong restore file format',
+      type: 'warn',
+    });
+  }
+}
 </script>
 
 <style scoped>

src/components/TimeIntervalChart.vue

@@ -92,7 +92,6 @@ function convertTimIntervalToObject(
     });
     return arr;
   }
-  return null;
 }
 
 function fillData(timeIntervalList: TimeInterval[]) {

src/compositions/loadFile.ts

@@ -1,5 +1,6 @@
 export enum FileType {
   CSV = 'text/csv',
+  JSON = 'application/json',
 }
 
 export function useFile(data: string, type: FileType, fileName: string) {

src/compositions/restoreData.ts

@@ -0,0 +1,12 @@
+import Browser from 'webextension-polyfill';
+import { Messages } from '../utils/messages';
+
+export async function restoreData(json: string) {
+  if (json != null && json != undefined && json != '') {
+    const data = JSON.parse(json);
+    await Browser.runtime.sendMessage({
+      message: Messages.Restore,
+      data: data,
+    });
+  }
+}

src/repository/tabs-repository-interface.ts

@@ -1,6 +1,7 @@
 import { Tab } from '../entity/tab';
 
 export interface ITabsRepository {
+  initAsync(): void;
   getTabs(): Tab[];
   removeAllTabs(): void;
   getTodayTabs(): Tab[];

src/tracker.ts

@@ -169,4 +169,10 @@ Browser.runtime.onMessage.addListener(async message => {
     repo.removeAllTabs();
     await storage.saveTabs([]);
   }
+  if (message.message == Messages.Restore) {
+    const storage = injecStorage();
+    await storage.saveTabs(message.data);
+    const repo = await injectTabsRepositorySingleton();
+    repo.initAsync();
+  }
 });

src/utils/messages.ts

@@ -1,4 +1,5 @@
 export enum Messages {
   RescheduleJobs = 'reschedule-jobs',
   ClearAllData = 'clear-data',
+  Restore = 'restore-data',
 }