Export to csv from tabs by days

Author: Stigmatoz

src/assets/css/general.css

@@ -44,4 +44,31 @@ select{
 }
 .w-80{
     width: 80%;
+}
+input[type="button"]{
+  background: #428bff;
+  color: #fff;
+  border-radius: 3px;
+  height: 35px;
+  line-height: 35px;
+  padding: 0 20px;
+  border: 0;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  min-width: 80px;
+  text-align: center;
+  width: 200px;
+}
+
+input[type="button"]:hover {
+  background: #5c9dfe;
+  text-decoration: none;
+}
+
+
+input[type="button"][disabled]{
+  border: 1px solid #999999;
+  background-color: #cccccc;
+  color: #666666;
 }

src/assets/css/settings.css

@@ -185,34 +185,6 @@ label{
     z-index: 0
 }
 
-input[type="button"]{
-    background: #428bff;
-    color: #fff;
-    border-radius: 3px;
-    height: 35px;
-    line-height: 35px;
-    padding: 0 20px;
-    border: 0;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    min-width: 80px;
-    text-align: center;
-    width: 200px;
-}
-
-input[type="button"]:hover {
-    background: #5c9dfe;
-    text-decoration: none;
-  }
-
-  
-  input[type="button"][disabled]{
-    border: 1px solid #999999;
-    background-color: #cccccc;
-    color: #666666;
-  }
-
   .hidden{
       display: none !important;
   }

src/components/ByDays.vue

@@ -37,6 +37,7 @@
             <span @click="presetDateRange(range)">{{ label }}</span>
           </template></VueDatePicker
         >
+        <input type="button" value="Export to CSV" @click="exportToCsv()" />
       </div>
       <div class="stats-block block">
         <div class="header">Average time on selected days</div>
@@ -77,6 +78,8 @@ import { TabListByDays } from '../dto/tabListSummary';
 import { useTabListByDays } from '../compositions/tab-list-by-days';
 import { convertSummaryTimeToString } from '../utils/converter';
 import { ranges, ThisWeekRange } from '../utils/date';
+import { useImportToCsvWithData } from '../compositions/toCsv';
+import { useFile, FileType } from '../compositions/loadFile';
 
 const tabsByDays = ref<TabListByDays>();
 const isLoading = ref<boolean>();
@@ -113,6 +116,17 @@ onMounted(async () => {
   const dateTo = selectedDate.value?.[1] as Date;
   await loadList(dateFrom, dateTo);
 });
+
+async function exportToCsv() {
+  const dateFrom = selectedDate.value?.[0] as Date;
+  const dateTo = selectedDate.value?.[1] as Date;
+  const csv = await useImportToCsvWithData(tabsByDays.value?.days);
+  useFile(
+    csv,
+    FileType.CSV,
+    `websites_${dateFrom.toLocaleDateString()}-${dateTo.toLocaleDateString()}.csv`,
+  );
+}
 </script>
 
 <style scoped>
@@ -139,7 +153,9 @@ onMounted(async () => {
   color: rgb(59, 59, 59);
 }
 .date-block {
-  margin: 0 20px 0 20px;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 25px;
 }
 .date-block .date-picker {
   width: 250px;

src/compositions/loadFile.ts

@@ -0,0 +1,14 @@
+export enum FileType {
+  CSV = 'text/csv',
+}
+
+export function useFile(data: string, type: FileType, fileName: string) {
+  const file = new Blob([data], { type: type });
+  let downloadLink;
+  downloadLink = document.createElement('a');
+  downloadLink.download = fileName;
+  downloadLink.href = window.URL.createObjectURL(file);
+  downloadLink.style.display = 'none';
+  document.body.appendChild(downloadLink);
+  downloadLink.click();
+}

src/compositions/toCsv.ts

@@ -0,0 +1,35 @@
+import { DayTabs } from '../dto/tabListSummary';
+import { useTabListByDays } from './tab-list-by-days';
+
+const CSV_HEADER = 'date,website,time(sec),sessions\r\n';
+
+export async function useImportToCsvWithData(days: DayTabs[] | undefined): Promise<string> {
+  return getCsv(days);
+}
+
+export async function useImportToCsv(dateFrom: Date, dateTo: Date): Promise<string> {
+  const summary = await useTabListByDays(dateFrom, dateTo);
+  if (summary == null) return CSV_HEADER;
+
+  return getCsv(summary.days);
+}
+
+function getCsv(days: DayTabs[] | undefined) {
+  let str = CSV_HEADER;
+
+  if (days != undefined && days.length > 0) {
+    days.forEach(day => {
+      let newLine = '';
+      day.tabs.forEach(tab => {
+        newLine += day.day + ',';
+        newLine += tab.url + ',';
+        newLine += tab.summaryTime + ',';
+        newLine += tab.sessions;
+        newLine += '\r\n';
+      });
+      str += newLine + '\r\n';
+    });
+  }
+
+  return str;
+}