Merge pull request Stigmatoz#113 from Stigmatoz/remove-all-data

Remove all data

Author: Stigmatoz

src/_locales/de/messages.json

@@ -235,5 +235,18 @@
   "enjoyAndReview": {
     "message": "Genießen Sie die Erweiterung?",
     "description": "Bewerten Web Activity Time Tracker"
+  },
+  "removeAllData": {
+    "message": "Alle Daten entfernen",
+    "description": "Sie können alle Daten und Statistiken der besuchten Websites für immer löschen."
+  },
+  "remove": {
+    "message": "Entfernen"
+  },
+  "removeAllDataConfirm": {
+    "message": "Sind Sie sicher, dass Sie alle Daten löschen möchten?"
+  },
+  "cancel": {
+    "message": "Annullierung"
   }
 }

src/_locales/en/messages.json

@@ -235,5 +235,18 @@
   "enjoyAndReview": {
     "message": "Enjoying the extension?",
     "description": "Rate Web Activity Time Tracker"
+  },
+  "removeAllData": {
+    "message": "Remove all data",
+    "description": "You can delete all data and statistics of visited websites for all time"
+  },
+  "remove": {
+    "message": "Remove"
+  },
+  "removeAllDataConfirm": {
+    "message": "Are you sure you want to delete all data?"
+  },
+  "cancel": {
+    "message": "Cancel"
   }
 }

src/_locales/ru/messages.json

@@ -235,5 +235,18 @@
   "enjoyAndReview": {
     "message": "Вам нравится расширение?",
     "description": "Оцените Web Activity Time Tracker"
+  },
+  "removeAllData": {
+    "message": "Удалить все данные",
+    "description": "Вы можете удалить все данные и статистику посещенных сайтов за все время"
+  },
+  "remove": {
+    "message": "Удалить"
+  },
+  "removeAllDataConfirm": {
+    "message": "Вы уверены, что хотите удалить все данные, включая статистику посещенных сайтов?"
+  },
+  "cancel": {
+    "message": "Отмена"
   }
 }

src/assets/css/general.css

@@ -79,8 +79,58 @@ input[type='button']:hover {
   text-decoration: none;
 }
 
+input[type='button'].alert {
+  background: #fe5c5c !important;
+}
+
+input[type='button'].info {
+  background: #ffffff !important;
+  color: black;
+  border: 1px solid black;
+}
+
 input[type='button'][disabled] {
   border: 1px solid #999999;
   background-color: #cccccc;
   color: #666666;
 }
+.modal {
+  display: block; 
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4); 
+}
+
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto; 
+  padding: 20px;
+  border: 1px solid #888;
+  width: 40%; 
+  border-radius: 10px;
+}
+
+.modal-content p{
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}

src/assets/icons/dashboard.svg

@@ -81,6 +81,25 @@
       <input type="button" :value="t('exportToCsv.message')" @click="exportToCsv()" />
     </div>
   </div>
+  <div class="settings-item">
+    <label class="setting-header d-inline-block">{{ t('removeAllData.message') }}</label>
+    <p class="description">{{ t('removeAllData.description') }}</p>
+    <input type="button" :value="t('remove.message')" @click="removeAll()" />
+  </div>
+  <div id="removeAllConfirmModal" class="modal" v-if="needToConfirmDeleteAllData">
+    <div class="modal-content">
+      <p class="text-center">{{ t('removeAllDataConfirm.message') }}</p>
+      <div class="text-center">
+        <input
+          type="button"
+          class="alert"
+          :value="t('remove.message')"
+          @click="removeAllConfirm()"
+        />
+        <input type="button" class="info ml-10" :value="t('cancel.message')" @click="cancel()" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -105,6 +124,7 @@ import {
 import { ranges, ThisWeekRange } from '../utils/date';
 import { useImportToCsv } from '../compositions/toCsv';
 import { FileType, useFile } from '../compositions/loadFile';
+import { removeAllData } from '../compositions/remove-all-data';
 
 const { t } = useI18n();
 
@@ -119,6 +139,8 @@ const selectedDate = ref<Date[]>();
 
 const presetRanges = ranges();
 
+const needToConfirmDeleteAllData = ref<boolean>();
+
 onMounted(async () => {
   viewTimeInBadge.value = await settingsStorage.getValue(
     StorageParams.VIEW_TIME_IN_BADGE,
@@ -169,6 +191,19 @@ async function exportToCsv() {
     );
   }
 }
+
+async function removeAll() {
+  needToConfirmDeleteAllData.value = true;
+}
+
+async function removeAllConfirm() {
+  await removeAllData();
+  needToConfirmDeleteAllData.value = false;
+}
+
+function cancel() {
+  needToConfirmDeleteAllData.value = false;
+}
 </script>
 
 <style scoped>

src/assets/icons/settings.svg

@@ -0,0 +1,10 @@
+import Browser from 'webextension-polyfill';
+import { injecStorage } from '../storage/inject-storage';
+import { Messages } from '../utils/messages';
+
+export async function removeAllData() {
+  const storage = injecStorage();
+  await storage.saveIntervalList([]);
+
+  Browser.runtime.sendMessage(Messages.ClearAllData);
+}

src/components/GeneralSettings.vue

@@ -11,6 +11,7 @@
       <img class="favicon" height="35" :src="favicon" />
       <span>{{ webSite }}</span>
     </div>
+    <p class="source-url">{{ sourceUrl }}</p>
     <table>
       <tr>
         <td class="title">{{ t('limit.message') }}:</td>
@@ -145,4 +146,9 @@ table .value {
 .favicon {
   margin: 0 10px;
 }
+.source-url {
+  margin: 5px;
+  font-size: 14px !important;
+  color: grey;
+}
 </style>

src/compositions/remove-all-data.ts

@@ -2,6 +2,7 @@ import { Tab } from '../entity/tab';
 
 export interface ITabsRepository {
   getTabs(): Tab[];
+  removeAllTabs(): void;
   getTodayTabs(): Tab[];
   getTab(domain: string): Tab | undefined;
   addTab(domain: string, favicon: string | undefined): Promise<Tab | undefined>;