Merge pull request #33 from InspectorIncognito/dev

Dev
InspectorIncognito · Oct 3, 2024 · 215b645 · 215b645
2 parents c15c693 + da4d79e
commit 215b645
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 35 deletions.
diff --git a/src/components/api/SpeedAPI.ts b/src/components/api/SpeedAPI.ts
@@ -1,6 +1,15 @@
 import APIService from "@/components/api/APIService";
 import { parseDateObject } from "@/utils/date_utils";
 
+interface DownloadArgs {
+  month?: number;
+  startTime?: string;
+  endTime?: string;
+  temporalSegment: number;
+  dayType: string | boolean;
+  endpoint: string;
+}
+
 class SpeedAPI {
   public static getListByMonth(
     month: number,
@@ -45,19 +54,49 @@ class SpeedAPI {
     return this.getListByMonth(month, dayType, temporalSegment, page, "geo/historicSpeeds");
   }
 
-  public static downloadCSV(month: number, dayType: string | boolean, temporalSegment: number, endpoint: string) {
-    let slug = `?month=${month}`;
-    if (dayType !== false) slug += `&dayType=${dayType}`;
-    if (temporalSegment !== -1) slug += `&temporalSegment=${temporalSegment}`;
+  public static downloadCSV(args: DownloadArgs) {
+    const month = args.month;
+    const startTime = args.startTime;
+    const endTime = args.endTime;
+    const temporalSegment = args.temporalSegment;
+    const dayType = args.dayType;
+    const endpoint = args.endpoint;
+    let slug = "?";
+    const query_params = [];
+    if (month) {
+      query_params.push(`month=${month}`);
+    }
+    if (startTime && endTime) {
+      query_params.push(`startTime=${startTime}`);
+      query_params.push(`endTime=${endTime}`);
+    }
+    if (dayType !== false) query_params.push(`dayType=${dayType}`);
+    if (temporalSegment !== -1) query_params.push(`&temporalSegment=${temporalSegment}`);
+    slug += query_params.join("&");
     return APIService.get(endpoint, slug);
   }
 
   public static downloadHistoricSpeeds(month: number, dayType: string | boolean, temporalSegment: number) {
-    return this.downloadCSV(month, dayType, temporalSegment, "geo/historicSpeeds/to_csv");
+    const args: DownloadArgs = {
+      month: month,
+      dayType: dayType,
+      temporalSegment: temporalSegment,
+      endpoint: "geo/historicSpeeds/to_csv",
+    };
+    return this.downloadCSV(args);
   }
 
-  public static downloadSpeeds(month: number, dayType: string | boolean, temporalSegment: number) {
-    return this.downloadCSV(month, dayType, temporalSegment, "geo/speeds/to_csv");
+  public static downloadSpeeds(startTime: Date, endTime: Date, dayType: string | boolean, temporalSegment: number) {
+    const parsedStartTime = parseDateObject(startTime);
+    const parsedEndTime = parseDateObject(endTime);
+    const args: DownloadArgs = {
+      startTime: parsedStartTime,
+      endTime: parsedEndTime,
+      dayType: dayType,
+      temporalSegment: temporalSegment,
+      endpoint: "geo/speeds/to_csv",
+    };
+    return this.downloadCSV(args);
   }
 }
 

diff --git a/src/views/HistoricSpeedView.vue b/src/views/HistoricSpeedView.vue
@@ -93,16 +93,6 @@ function pageDown() {
   currentPage.value--;
   updateHistoricSpeedData(monthValue.value, dayTypeValue.value, selectedTemporalSegment.value);
 }
-
-function test(month: number, dayType: string | boolean) {
-  console.log("passed month:", month);
-  console.log("passed daytype", dayType);
-  console.log(" ");
-  console.log("last month:", lastMonth.value);
-  console.log("last daytype:", lastDayType.value);
-  lastMonth.value = month;
-  lastDayType.value = dayType;
-}
 </script>
 
 <template>

diff --git a/src/views/SpeedView.vue b/src/views/SpeedView.vue
@@ -12,6 +12,7 @@ interface Speed {
   timeSecs: number;
   timestamp: number;
 }
+
 const today = new Date();
 const dateTimeValue = ref([
   new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0),
@@ -22,7 +23,6 @@ const currentDate = new Date();
 const currentMonth = currentDate.getMonth() + 1;
 const monthString = currentDate.toLocaleString("default", { month: "long" });
 
-const monthValue = ref(monthOptions[currentMonth - 1].value);
 const dayTypeValue = ref(dayTypeOptions[dayTypeOptions.length - 1].value);
 
 const temporalSegmentOptions: Array<{ label: string; value: number }> = Array.from(
@@ -32,7 +32,6 @@ const temporalSegmentOptions: Array<{ label: string; value: number }> = Array.fr
 temporalSegmentOptions.unshift({ label: "Todos", value: -1 });
 const selectedTemporalSegment = ref(-1);
 
-const lastMonth = ref();
 const lastDayType = ref();
 const loading = ref(false);
 
@@ -41,8 +40,10 @@ const totalCount = ref<number>(0);
 const currentPage = ref<number>(1);
 const totalPages = ref<number>(1);
 
-function downloadSpeeds(month: number, dayType: string | boolean, temporalSegment: number) {
-  SpeedAPI.downloadSpeeds(month, dayType, temporalSegment).then((response) => {
+function downloadSpeeds(dayType: string | boolean, temporalSegment: number) {
+  const startTime = new Date(dateTimeValue.value[0]);
+  const endTime = new Date(dateTimeValue.value[1]);
+  SpeedAPI.downloadSpeeds(startTime, endTime, dayType, temporalSegment).then((response) => {
     const url = window.URL.createObjectURL(new Blob([response.data]));
     const link = document.createElement("a");
     link.href = url;
@@ -54,14 +55,13 @@ function downloadSpeeds(month: number, dayType: string | boolean, temporalSegmen
   });
 }
 
-function updateSpeedData(month: number, dayType: string | boolean, temporalSegment = -1, usePage = true) {
+function updateSpeedData(dayType: string | boolean, temporalSegment = -1, usePage = true) {
   loading.value = true;
   if (!usePage) {
     currentPage.value = 1;
   }
   const startTime = new Date(dateTimeValue.value[0]);
   const endTime = new Date(dateTimeValue.value[1]);
-  console.log(startTime, endTime);
   const page = currentPage.value;
   SpeedAPI.getSpeeds(startTime, endTime, dayType, temporalSegment, page)
     .then((response) => {
@@ -81,28 +81,24 @@ function updateSpeedData(month: number, dayType: string | boolean, temporalSegme
     .finally(() => {
       loading.value = false;
     });
-  lastMonth.value = month;
   lastDayType.value = dayType;
 }
 
 function pageUp() {
   if (currentPage.value == totalPages.value) return;
   currentPage.value++;
-  updateSpeedData(monthValue.value, dayTypeValue.value, selectedTemporalSegment.value);
+  updateSpeedData(dayTypeValue.value, selectedTemporalSegment.value);
 }
+
 function pageDown() {
   if (currentPage.value == 1) return;
   currentPage.value--;
-  updateSpeedData(monthValue.value, dayTypeValue.value, selectedTemporalSegment.value);
+  updateSpeedData(dayTypeValue.value, selectedTemporalSegment.value);
 }
 
 onMounted(() => {
-  updateSpeedData(currentMonth, false);
+  updateSpeedData(false);
 });
-
-function test() {
-  console.log(dateTimeValue.value);
-}
 </script>
 
 <template>
@@ -142,9 +138,7 @@ function test() {
           </div>
         </div>
 
-        <el-button @click="updateSpeedData(monthValue, dayTypeValue, selectedTemporalSegment, false)"
-          >Aplicar filtros</el-button
-        >
+        <el-button @click="updateSpeedData(dayTypeValue, selectedTemporalSegment, false)">Aplicar filtros</el-button>
       </div>
       <el-table
         v-loading="loading"
@@ -176,7 +170,7 @@ function test() {
       </div>
     </div>
     <div class="download-container">
-      <div class="download-button" @click="downloadSpeeds(monthValue, dayTypeValue, selectedTemporalSegment)">
+      <div class="download-button" @click="downloadSpeeds(dayTypeValue, selectedTemporalSegment)">
         <div class="download-label">Descargar</div>
         <span class="material-icons">download</span>
       </div>
@@ -190,11 +184,13 @@ function test() {
   flex-direction: row;
   gap: 8px;
 }
+
 .option-container {
   display: flex;
   flex-direction: column;
   justify-content: left;
 }
+
 .table-buttons-container {
   display: flex;
   flex-direction: row;