Add components for today and all days data summary

Author: Stigmatoz

src/components/TabList.vue

@@ -26,7 +26,10 @@ import DonutChart from '../components/DonutChart.vue';
 import { injectTabsRepository } from '../repository/inject-tabs-repository';
 import { Tab } from '../entity/tab';
 import { todayLocalDate } from '../utils/today';
-import { TypeOfList } from '../utils/enums';
+import { SortingBy, TypeOfList } from '../utils/enums';
+import { useTodayTabListSummary } from '../compositions/today-tab-list-summary';
+import { TabListSummary } from '../utils/tabListSummary';
+import { useAllTabListSummary } from '../compositions/all-tab-list-summary';
 
 const props = defineProps<{
   type: TypeOfList;
@@ -45,30 +48,32 @@ const firstDay = computed(() => {
   if (props.type == TypeOfList.All) return;
 });
 
-onMounted(async () => {
+async function loadList(sortingBy: SortingBy) {
   const repo = await injectTabsRepository();
-  let unSortedTabs = repo.getTodayTabs();
-  tabs.value = unSortedTabs.sort(function (a: Tab, b: Tab) {
-    return (
-      b.days.find(s => s.date === todayLocalDate())!.summary -
-      a.days.find(s => s.date === todayLocalDate())!.summary
-    );
-  });
+  let tabSummary = null;
+  if (props.type == TypeOfList.Today) tabSummary = await useTodayTabListSummary();
+  if (props.type == TypeOfList.Today) tabSummary = await useAllTabListSummary();
 
-  const summaryTimeList = tabs.value?.map(function (tab) {
-    return tab.days.find(day => day.date === todayLocalDate())!.summary;
-  });
-  const siteList = tabs.value?.map(function (tab) {
-    return tab.url;
-  });
-  timeForChart.value = summaryTimeList?.slice(0, 10);
-  sitesForChart.value = siteList?.slice(0, 10);
+  if (tabSummary != null) {
+    tabs.value = tabSummary.tabs;
+    summaryTime.value = tabSummary.summaryTime;
+    timeForChart.value = tabSummary.chart.timeForChart;
+    sitesForChart.value = tabSummary.chart.sitesForChart;
+  }
+}
 
-  summaryTime.value =
-    summaryTimeList != undefined && summaryTimeList.length > 0
-      ? summaryTimeList.reduce(function (a, b) {
-          return a + b;
-        })
-      : 0;
+onMounted(async () => {
+  loadList(SortingBy.WebUsage);
 });
+
+function sortingBy(sortingBy: SortingBy) {
+  switch (sortingBy) {
+    case SortingBy.WebUsage:
+      loadList(SortingBy.WebUsage);
+      break;
+    case SortingBy.Sessions:
+      loadList(SortingBy.Sessions);
+      break;
+  }
+}
 </script>

src/compositions/all-tab-list-summary.ts

@@ -0,0 +1,37 @@
+import { Tab } from '../entity/tab';
+import { injectTabsRepository } from '../repository/inject-tabs-repository';
+import { TabListSummary } from '../utils/tabListSummary';
+
+export async function useAllTabListSummary(): Promise<TabListSummary> {
+  const repo = await injectTabsRepository();
+  const unSortedTabs = repo.getTodayTabs();
+  let tabs: Tab[] = [];
+
+  tabs = unSortedTabs.sort(function (a: Tab, b: Tab) {
+    return b.summaryTime - a.summaryTime;
+  });
+
+  const summaryTimeList = tabs?.map(function (tab) {
+    return tab.summaryTime;
+  });
+  const siteList = tabs?.map(function (tab) {
+    return tab.url;
+  });
+  const timeForChart = summaryTimeList?.slice(0, 10);
+  const sitesForChart = siteList?.slice(0, 10);
+
+  const summaryTime =
+    summaryTimeList != undefined && summaryTimeList.length > 0
+      ? summaryTimeList.reduce(function (a, b) {
+          return a + b;
+        })
+      : 0;
+  return {
+    tabs,
+    summaryTime,
+    chart: {
+      timeForChart,
+      sitesForChart,
+    },
+  };
+}

src/compositions/today-tab-list-summary.ts

@@ -0,0 +1,41 @@
+import { Tab } from '../entity/tab';
+import { injectTabsRepository } from '../repository/inject-tabs-repository';
+import { TabListSummary } from '../utils/tabListSummary';
+import { todayLocalDate } from '../utils/today';
+
+export async function useTodayTabListSummary(): Promise<TabListSummary> {
+  const repo = await injectTabsRepository();
+  const unSortedTabs = repo.getTodayTabs();
+  let tabs: Tab[] = [];
+
+  tabs = unSortedTabs.sort(function (a: Tab, b: Tab) {
+    return (
+      b.days.find(s => s.date === todayLocalDate())!.summary -
+      a.days.find(s => s.date === todayLocalDate())!.summary
+    );
+  });
+
+  const summaryTimeList = tabs?.map(function (tab) {
+    return tab.days.find(day => day.date === todayLocalDate())!.summary;
+  });
+  const siteList = tabs?.map(function (tab) {
+    return tab.url;
+  });
+  const timeForChart = summaryTimeList?.slice(0, 10);
+  const sitesForChart = siteList?.slice(0, 10);
+
+  const summaryTime =
+    summaryTimeList != undefined && summaryTimeList.length > 0
+      ? summaryTimeList.reduce(function (a, b) {
+          return a + b;
+        })
+      : 0;
+  return {
+    tabs,
+    summaryTime,
+    chart: {
+      timeForChart,
+      sitesForChart,
+    },
+  };
+}

src/pages/Popup.vue

@@ -34,7 +34,7 @@
         <TabList :type="TypeOfList.Today" />
       </section>
       <section>
-        <h2>Delivery Contents</h2>
+        <TabList :type="TypeOfList.All" />
       </section>
       <section>
         <h2>Shipping</h2>

src/utils/tabListSummary.ts

@@ -0,0 +1,12 @@
+import { Tab } from '../entity/tab';
+
+export interface TabListSummary {
+  tabs: Tab[];
+  summaryTime: number;
+  chart: DataForChart;
+}
+
+export interface DataForChart {
+  timeForChart: number[];
+  sitesForChart: string[];
+}