Sorting by sessions and web usage

Author: Stigmatoz

src/assets/css/main.css

@@ -1,7 +1,7 @@
 :root {
   --main-color: #6ebf5d;
   --popup-header: #f3f3f3;
-  --progress-bar: #6ebf5d;
+  --progress-bar: #428bff;
 }
 ::-webkit-scrollbar-track {
   border-radius: 10px;

src/assets/icons/24-hours.svg

@@ -1,9 +1,9 @@
 <template>
   <div class="tab-item">
-    <Favicon :favicon="tab.favicon" />
+    <Favicon :favicon="item.favicon" />
     <div class="ml-10 flex-grow-2">
       <div class="first-block">
-        <p class="url">{{ tab.url }}</p>
+        <p class="url">{{ item.url }}</p>
         <p class="text-right time">{{ summaryTimeForTab }}</p>
       </div>
       <div class="second-block">
@@ -26,29 +26,29 @@ export default {
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { Tab } from '../entity/tab';
-import { todayLocalDate } from '../utils/today';
 import Favicon from './Favicon.vue';
 import { convertSummaryTimeToString } from '../utils/converter';
 import { getPercentage } from '../utils/common';
+import { CurrentTabItem } from '../dto/currentTabItem';
 
 const props = defineProps<{
-  tab: Tab;
-  summaryTime: number;
+  item: CurrentTabItem;
 }>();
 
-const currentDayValue = props.tab.days.find(x => x.date == todayLocalDate())!;
-
 const sessions = computed(() => {
-  if (currentDayValue.counter == 0) return '0 visits';
-  if (currentDayValue.counter > 1) return `${currentDayValue.counter} visits`;
-  if (currentDayValue.counter == 1) return `${currentDayValue.counter} visit`;
+  if (props.item.sessions == 0) return '0 session';
+  if (props.item.sessions > 1) return `${props.item.sessions} sessions`;
+  if (props.item.sessions == 1) return `${props.item.sessions} session`;
 });
 
-const summaryTimeForTab = convertSummaryTimeToString(currentDayValue?.summary);
-const percent = getPercentage(currentDayValue?.summary, props.summaryTime);
+const summaryTimeForTab = computed(() =>
+  convertSummaryTimeToString(props.item.summaryTimeForCurrent),
+);
+const percent = computed(() =>
+  getPercentage(props.item.summaryTimeForCurrent, props.item.summaryTime),
+);
 
-const styleForProgressBar = computed(() => `width: ${percent}%`);
+const styleForProgressBar = computed(() => `width: ${percent.value}%`);
 </script>
 
 <style scoped>

src/assets/icons/pie-chart.svg

@@ -6,9 +6,9 @@
     </div>
     <div class="sorted-block">
       <span class="mr-5">Sorting by</span>
-      <select class="p-5" @change="sortingBy()">
-        <option>Usage Time</option>
-        <option>Sessions</option>
+      <select class="p-5" v-model="sortingBySelected" @change="sortingBy()">
+        <option :value="SortingBy.UsageTime">Usage Time</option>
+        <option :value="SortingBy.Sessions">Sessions</option>
       </select>
     </div>
   </div>
@@ -21,7 +21,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { convertSummaryTimeToString } from '../utils/converter';
 import { SortingBy, TypeOfList } from '../utils/enums';
 
@@ -32,6 +32,8 @@ const props = defineProps<{
   firstDay: Date;
 }>();
 
+const sortingBySelected = ref<SortingBy>();
+
 const emit = defineEmits<{
   (event: 'sortingBy', sortingBy: SortingBy): void;
 }>();
@@ -41,10 +43,14 @@ const title = computed(() => {
   if (props.listType == TypeOfList.All) return `Aggregate data since ${props.firstDay} `;
 });
 
+onMounted(async () => {
+  sortingBySelected.value = SortingBy.UsageTime;
+});
+
 const summaryTimeString = computed(() => convertSummaryTimeToString(props.summaryTime));
 
-function sortingBy(value) {
-  emit('sortingBy', value);
+function sortingBy() {
+  emit('sortingBy', sortingBySelected.value!);
 }
 </script>
 

src/assets/icons/stats.svg

@@ -9,7 +9,8 @@
       :firstDay="firstDay"
       @sortingBy="sorting"
     />
-    <TabItem v-for="(tab, i) of tabs" :key="i" :tab="tab" :summaryTime="summaryTime" />
+
+    <TabItem v-for="(tab, i) of tabs" :key="i" :item="getItem(tab)" />
   </div>
 </template>
 
@@ -29,6 +30,8 @@ import { Tab } from '../entity/tab';
 import { SortingBy, TypeOfList } from '../utils/enums';
 import { useTodayTabListSummary } from '../compositions/today-tab-list-summary';
 import { useAllTabListSummary } from '../compositions/all-tab-list-summary';
+import { CurrentTabItem } from '../dto/currentTabItem';
+import { todayLocalDate } from '../utils/today';
 
 const props = defineProps<{
   type: TypeOfList;
@@ -51,7 +54,7 @@ async function loadList(sortingBy: SortingBy) {
   const repo = await injectTabsRepository();
   let tabSummary = null;
   if (props.type == TypeOfList.Today) tabSummary = await useTodayTabListSummary(sortingBy);
-  if (props.type == TypeOfList.Today) tabSummary = await useAllTabListSummary(sortingBy);
+  if (props.type == TypeOfList.All) tabSummary = await useAllTabListSummary(sortingBy);
 
   if (tabSummary != null) {
     tabs.value = tabSummary.tabs;
@@ -61,18 +64,34 @@ async function loadList(sortingBy: SortingBy) {
   }
 }
 
-function sorting(sortingBy: SortingBy) {
+async function sorting(sortingBy: SortingBy) {
   switch (sortingBy) {
-    case SortingBy.WebUsage:
-      loadList(SortingBy.WebUsage);
+    case SortingBy.UsageTime:
+      await loadList(SortingBy.UsageTime);
       break;
     case SortingBy.Sessions:
-      loadList(SortingBy.Sessions);
+      await loadList(SortingBy.Sessions);
       break;
   }
 }
 
+function getItem(tab: Tab): CurrentTabItem {
+  return {
+    summaryTime: summaryTime.value!,
+    favicon: tab.favicon,
+    url: tab.url,
+    sessions:
+      props.type == TypeOfList.Today
+        ? tab.days.find(day => day.date === todayLocalDate())!.counter
+        : tab.counter,
+    summaryTimeForCurrent:
+      props.type == TypeOfList.Today
+        ? tab.days.find(day => day.date === todayLocalDate())!.summary
+        : tab.summaryTime,
+  };
+}
+
 onMounted(async () => {
-  loadList(SortingBy.WebUsage);
+  await loadList(SortingBy.UsageTime);
 });
 </script>

src/components/TabItem.vue

@@ -1,8 +1,9 @@
+import { TabListSummary } from '../dto/tabListSummary';
 import { Tab } from '../entity/tab';
 import { injectTabsRepository } from '../repository/inject-tabs-repository';
-import { TabListSummary } from '../utils/tabListSummary';
+import { SortingBy } from '../utils/enums';
 
-export async function useAllTabListSummary(): Promise<TabListSummary> {
+export async function useAllTabListSummary(sortingBy: SortingBy): Promise<TabListSummary> {
   const repo = await injectTabsRepository();
   const unSortedTabs = repo.getTodayTabs();
   let tabs: Tab[] = [];

src/components/TabItemHeader.vue

@@ -1,7 +1,7 @@
+import { TabListSummary } from '../dto/tabListSummary';
 import { Tab } from '../entity/tab';
 import { injectTabsRepository } from '../repository/inject-tabs-repository';
 import { SortingBy } from '../utils/enums';
-import { TabListSummary } from '../utils/tabListSummary';
 import { todayLocalDate } from '../utils/today';
 
 export async function useTodayTabListSummary(sortingBy: SortingBy): Promise<TabListSummary> {
@@ -18,13 +18,13 @@ export async function useTodayTabListSummary(sortingBy: SortingBy): Promise<TabL
   });
 
   const summaryTimeList = tabs?.map(function (tab) {
-    return sortingBy == SortingBy.UsageTime
-      ? tab.days.find(day => day.date === todayLocalDate())!.summary
-      : tab.days.find(day => day.date === todayLocalDate())!.counter;
+    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);
 

src/components/TabList.vue

@@ -0,0 +1,7 @@
+export interface CurrentTabItem {
+  url: string;
+  favicon: string | undefined;
+  summaryTimeForCurrent: number;
+  summaryTime: number;
+  sessions: number;
+}