Daily notifcation setting

Author: Stigmatoz

src/components/Limits.vue

@@ -61,13 +61,14 @@ import { isDomainEquals } from '../utils/common';
 import { extractHostname } from '../compositions/extract-hostname';
 import { Restriction } from '../entity/restriction';
 import { convertHHMMToSeconds, convertSecondsToHHMM } from '../utils/converter';
+import { Time } from '../utils/time';
 
 const notification = useNotification();
 
 const settingsStorage = injecStorage();
 
 const limitList = ref<Restriction[]>();
-const time = ref({
+const time = ref<Time>({
   hours: 0,
   minutes: 30,
 });

src/components/Notifications.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <div class="settings-item">
+      <label class="setting-header">
+        <input
+          type="checkbox"
+          class="filled-in"
+          id="blockDeferral"
+          v-model="showDailyNotifacation"
+          @change="onChange(StorageParams.DAILY_NOTIFICATION, $event.target)"
+        />
+        <span>Daily Summary Notifications</span>
+        <p class="description">
+          At the end of each day, you will receive a notification with a summary of your daily
+          usage.
+        </p>
+      </label>
+    </div>
+    <div class="settings-item">
+      <p class="setting-header d-inline-block">
+        Notification time with summary information about your daily usage
+      </p>
+      <VueDatePicker
+        v-model="notificationTime"
+        time-picker
+        @update:model-value="handleDate"
+        class="date-picker d-inline-block"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'DailyNotifications',
+};
+</script>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { injecStorage } from '../storage/inject-storage';
+import { StorageParams } from '../storage/storage-params';
+import {
+  DAILY_NOTIFICATION_DEFAULT,
+  DAILY_SUMMARY_NOTIFICATION_TIME_DEFAULT,
+} from '../storage/storage-params';
+import { convertHHMMToSeconds, convertSecondsToHHMM } from '../utils/converter';
+import { Time } from '../utils/time';
+
+const settingsStorage = injecStorage();
+
+const showDailyNotifacation = ref<boolean>();
+const dailyNotificationTime = ref<number>();
+const notificationTime = ref<Time>();
+
+onMounted(async () => {
+  showDailyNotifacation.value = await settingsStorage.getValue(
+    StorageParams.DAILY_NOTIFICATION,
+    DAILY_NOTIFICATION_DEFAULT,
+  );
+
+  dailyNotificationTime.value = (await settingsStorage.getValue(
+    StorageParams.DAILY_SUMMARY_NOTIFICATION_TIME,
+    DAILY_SUMMARY_NOTIFICATION_TIME_DEFAULT,
+  )) as number;
+
+  const timeObj = convertSecondsToHHMM(dailyNotificationTime.value);
+  notificationTime.value = timeObj;
+});
+
+function handleDate(modelData: Time) {
+  if (modelData != null) {
+    notificationTime.value = modelData;
+    save(
+      StorageParams.DAILY_SUMMARY_NOTIFICATION_TIME,
+      convertHHMMToSeconds(notificationTime.value.hours, notificationTime.value.minutes),
+    );
+  }
+}
+
+async function onChange(storageParam: StorageParams, target: any) {
+  if (target != null) await save(storageParam, target.checked);
+}
+
+async function save(storageParam: StorageParams, value: any) {
+  if (value != undefined) await settingsStorage.saveValue(storageParam, value);
+}
+</script>
+
+<style scoped>
+.date-picker {
+  width: 120px;
+  margin: 0 15px;
+}
+</style>

src/pages/Dashboard.vue

@@ -57,7 +57,7 @@
       <label name="tabName" for="notification-tab">Notifications</label>
 
       <div class="settings-content">
-        <Notifications v-if="selectedTab == SettingsTab.Notifications" />
+        <DailyNotifications v-if="selectedTab == SettingsTab.Notifications" />
       </div>
     </div>
 
@@ -82,6 +82,7 @@ import { onMounted, ref } from 'vue';
 import GeneralSettings from '../components/GeneralSettings.vue';
 import WhiteList from '../components/WhiteList.vue';
 import Limits from '../components/Limits.vue';
+import DailyNotifications from '../components/Notifications.vue';
 import About from '../components/About.vue';
 import { SettingsTab } from '../utils/enums';
 

src/storage/storage-params.ts

@@ -13,6 +13,7 @@ export enum StorageParams {
   BLOCK_DEFERRAL = 'view_block_deferral',
   BLOCK_DEFERRAL_TIME = 'view_block_deferral_time',
   DAILY_SUMMARY_NOTIFICATION_TIME = 'daily-summary-notification-time',
+  DAILY_NOTIFICATION = 'daily_notification',
 }
 
 export enum StorageDeserializeParam {
@@ -51,8 +52,9 @@ export const DARK_MODE_DEFAULT = false;
 export const VIEW_TIME_IN_BADGE_DEFAULT = true;
 export const BLOCK_DEFERRAL_DEFAULT = true;
 export const SHOW_HINT_DEFAULT = true;
-// default time is 20:00, time in miliseconds
-export const DAILY_SUMMARY_NOTIFICATION_TIME_DEFAULT = 20 * HOUR;
+// default time is 20:00, time in seconds
+export const DAILY_SUMMARY_NOTIFICATION_TIME_DEFAULT = (20 * HOUR) / 1000;
+export const DAILY_NOTIFICATION_DEFAULT = true;
 
 export function getDefaultValue(param: StorageParams) {
   switch (param) {

src/utils/converter.ts

@@ -1,4 +1,3 @@
-import { min } from 'date-fns';
 import { Time } from './time';
 
 export function convertHHMMToSeconds(hours: number, minutes: number) {