From 198acd52da5962420b76ff95e5f2d0596ee889f0 Mon Sep 17 00:00:00 2001
From: daniilium <73600007+daniilium@users.noreply.github.com>
Date: Fri, 20 Sep 2024 20:00:02 +0300
Subject: [PATCH] feat: add total time for daily tab

---
 src/components/ByDays.vue | 54 ++++++++++++++++++++++++++++++++-------
 1 file changed, 45 insertions(+), 9 deletions(-)

diff --git a/src/components/ByDays.vue b/src/components/ByDays.vue
index c59d6f4..b77c210 100644
--- a/src/components/ByDays.vue
+++ b/src/components/ByDays.vue
@@ -2,8 +2,10 @@
   <div class="no-data" v-if="isLoading">
     <img height="55" src="../assets/icons/preloader.gif" />
   </div>
+
   <div v-else>
     <no-data-by-days v-if="countOfDays == undefined || (countOfDays == 0 && !noData)" />
+
     <div v-else-if="noData">
       <div class="no-data">
         {{ t('noDataForPeriod.message') }}
@@ -17,10 +19,11 @@
         >
           <template #yearly="{ label, range, presetDateRange }">
             <span @click="presetDateRange(range)">{{ label }}</span>
-          </template></VueDatePicker
-        >
+          </template>
+        </VueDatePicker>
       </div>
     </div>
+
     <div v-else>
       <div class="date-block">
         <VueDatePicker
@@ -33,29 +36,40 @@
         >
           <template #yearly="{ label, range, presetDateRange }">
             <span @click="presetDateRange(range)">{{ label }}</span>
-          </template></VueDatePicker
-        >
+          </template>
+        </VueDatePicker>
         <input type="button" :value="t('exportToCsv.message')" @click="exportToCsv()" />
       </div>
+
       <div class="stats-block block">
         <div class="header">{{ t('averageTimeByDays.message') }}</div>
         <p>{{ convertSummaryTimeToString(tabsByDays!.averageTime) }}</p>
       </div>
+
       <div class="ml-20 mr-20 by-days-chart">
         <ByDaysChart :data="tabsByDays!" />
       </div>
+
       <div>
+        <Expander day="Total" :time="tabsByDays?.summaryTime || 0">
+          <TabItem
+            v-for="(tab, i) of mergeAllDays(tabsByDays?.days)"
+            :item="tab"
+            :summaryTimeForWholeDay="tabsByDays?.summaryTime || 0"
+          />
+        </Expander>
+
         <Expander
           v-for="(tabDay, i) of tabsByDays?.days"
           :key="i"
           :day="tabDay.day"
           :time="tabDay.time"
         >
-          <TabItem
-            v-for="(tab, i) of tabDay.tabs"
-            :key="i"
-            :item="tab"
-            :summaryTimeForWholeDay="tabDay.time"
+        <TabItem
+          v-for="(tab, i) of tabDay.tabs"
+          :key="i"
+          :item="tab"
+          :summaryTimeForWholeDay="tabDay.time"
           />
         </Expander>
       </div>
@@ -77,6 +91,7 @@ import NoDataByDays from './NoDataByDays.vue';
 import ByDaysChart from '../components/ByDaysChart.vue';
 import Expander from '../components/Expander.vue';
 import { TabListByDays } from '../dto/tabListSummary';
+import { CurrentTabItem } from '../dto/currentTabItem';
 import { useTabListByDays } from '../functions/useTabListByDays';
 import { convertSummaryTimeToString } from '../utils/converter';
 import { ranges, ThisWeekRange } from '../utils/date';
@@ -131,6 +146,27 @@ async function exportToCsv() {
     `websites_${dateFrom.toLocaleDateString()}-${dateTo.toLocaleDateString()}.csv`,
   );
 }
+
+function mergeAllDays(days: TabListByDays['days'] | undefined): CurrentTabItem[] {
+  if (!days) return [];
+
+  const urlMap = new Map<string, CurrentTabItem>();
+
+  for (const day of days) {
+    for (const tab of day.tabs) {
+      if (!urlMap.has(tab.url)) {
+        urlMap.set(tab.url, { ...tab });
+        continue;
+      }
+
+      const existingTab = urlMap.get(tab.url)!;
+      existingTab.summaryTime += tab.summaryTime;
+      existingTab.sessions += tab.sessions;
+    }
+  }
+
+  return Array.from(urlMap.values()).sort((a, b) => b.summaryTime - a.summaryTime);
+}
 </script>
 
 <style scoped>