From 45b0abbaf2aae9dfd9af4134cb5f30f86d858a3f Mon Sep 17 00:00:00 2001
From: GisellePerez <giselleperez91@gmail.com>
Date: Sun, 1 Jan 2023 09:06:26 -0300
Subject: [PATCH 1/5] fetching data from form

---
 package-lock.json                     |   1 +
 src/App.vue                           |  58 +++++++++++-
 src/components/Form.vue               | 124 ++++++++++++++++++++++++++
 src/components/Map.vue                |  12 ++-
 src/components/SideBar.vue            |  34 +++++++
 src/components/ui/DatepickerField.vue |  35 ++++++++
 6 files changed, 261 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Form.vue
 create mode 100644 src/components/ui/DatepickerField.vue

diff --git a/package-lock.json b/package-lock.json
index a58c9de..d217a8f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "frontend-screening",
       "version": "0.1.0",
       "dependencies": {
         "@mapbox/mapbox-gl-geocoder": "^4.7.1",
diff --git a/src/App.vue b/src/App.vue
index 069f0d1..cef9795 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,15 @@
 <template>
   <v-app>
-    <side-bar />
+    <side-bar
+      @fetch-data="(value) => doSomething(value)"
+      @send-form-data="
+        (starttime, endtime, minmagnitude) =>
+          fetchData(starttime, endtime, minmagnitude)
+      "
+    />
     <v-main>
       <v-container fluid fill-height d-flex pa-0>
-        <main-map class="flex-grow-1 fill-height" />
+        <main-map class="flex-grow-1 fill-height" :dataUrl="this.dataUrl" />
       </v-container>
     </v-main>
   </v-app>
@@ -20,5 +26,53 @@ export default {
     SideBar,
     MainMap,
   },
+
+  data() {
+    return {
+      requestedData: null,
+      dataUrl: ''
+    };
+  },
+
+  methods: {
+    doSomething(value) {
+      console.log("hola", value);
+    },
+    increaseCount(n) {
+      console.log("App", n);
+    },
+    formatData(rawData) {
+      return rawData.map((item) => {
+        const id = item.id;
+        const { mag, place, time } = item.properties;
+
+        return {
+          id,
+          properties: {
+            mag,
+            place,
+            time,
+          }
+        };
+      });
+    },
+    fetchData(starttime, endtime, minmagnitude) {
+      console.log(`https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=${starttime}&endtime=${endtime}&minmagnitude=${minmagnitude}`)
+      return this.dataUrl = `https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=${starttime}&endtime=${endtime}&minmagnitude=${minmagnitude}`
+      // fetch(
+      //   `https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=${starttime}&endtime=${endtime}&minmagnitude=${minmagnitude}`
+      // )
+      //   .then((response) => {
+      //     response
+      //       .json()
+      //       .then((res) => console.log("App", res))
+      //       // TODO: formatData & then pass it to map component
+      //       .then((res) => (this.requestedData = res.features));
+      //   })
+      //   .catch((err) => {
+      //     console.error(err);
+      //   });
+    },
+  },
 };
 </script>
diff --git a/src/components/Form.vue b/src/components/Form.vue
new file mode 100644
index 0000000..ef20b20
--- /dev/null
+++ b/src/components/Form.vue
@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <form action="">
+      <!-- Start Time -->
+      <v-menu offset-y>
+        <template v-slot:activator="{ on, attrs }">
+          <v-text-field
+            readonly
+            label="Start Date"
+            v-model="formattedStartDate"
+            color="primary"
+            dark
+            v-bind="attrs"
+            v-on="on"
+            prepend-inner-icon="mdi-calendar"
+          >
+          </v-text-field>
+        </template>
+        <v-date-picker
+          v-model="formData.starttime"
+          color="green lighten-1"
+          no-title
+        ></v-date-picker>
+      </v-menu>
+
+      <!-- End Time -->
+      <v-menu offset-y>
+        <template v-slot:activator="{ on, attrs }">
+          <v-text-field
+            readonly
+            label="End Date"
+            v-model="formattedEndDate"
+            color="primary"
+            dark
+            v-bind="attrs"
+            v-on="on"
+            prepend-inner-icon="mdi-calendar"
+          >
+          </v-text-field>
+        </template>
+        <v-date-picker
+          v-model="formData.endtime"
+          color="green lighten-1"
+          no-title
+        ></v-date-picker>
+      </v-menu>
+
+      <!-- Magnitude -->
+      <v-text-field
+        label="Magnitude"
+        v-model="formData.minmagnitude"
+      ></v-text-field>
+
+      <!-- @click="fetchData" -->
+      <v-btn
+        @click="submit"
+        elevation="2"
+        primary
+        :disabled="
+          !this.formData.starttime ||
+          !this.formData.endtime ||
+          !this.formData.minmagnitude
+        "
+        >Search</v-btn
+      >
+
+      <v-btn @click="cosa"> Increase by 1 </v-btn>
+    </form>
+  </div>
+</template>
+
+<script>
+// Query: features -> item -> properties -> mag, place, time
+// https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2014-01-01&endtime=2014-01-02&minmagnitude=1
+
+export default {
+  data() {
+    return {
+      formData: {
+        starttime: "",
+        endtime: "",
+        minmagnitude: "",
+      },
+      fetchedData: null,
+    };
+  },
+  computed: {
+    formattedStartDate() {
+      return this.formData.starttime;
+    },
+    formattedEndDate() {
+      return this.formData.endtime;
+    },
+  },
+  methods: {
+    submit() {
+      this.$emit(
+        "send-form-data",
+        this.formData.starttime,
+        this.formData.endtime,
+        this.formData.minmagnitude
+      );
+    },
+    fetchData() {
+      fetch(
+        `https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=${this.formData.starttime}&endtime=${this.formData.endtime}&minmagnitude=${this.formData.minmagnitude}`
+      )
+        .then((response) => {
+          response
+            .json()
+            .then((res) => console.log(res))
+            .then((res) => (this.fetchedData = res))
+            .then(() => this.$emit("fetchData", this.fetchedData));
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    cosa() {
+      this.$emit("increase-by", 1);
+    },
+  },
+};
+</script>
diff --git a/src/components/Map.vue b/src/components/Map.vue
index 4030388..7f27944 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -6,7 +6,7 @@
     :zoom="2"
     @mb-created="(mapInstance) => (map = mapInstance)"
   >
-    <mapbox-source id="usgs" :options="sourceOptions" />
+    <mapbox-source id="usgs" :options="dynamicSourceOptions" />
     <mapbox-layer id="earthquakes" :options="layerOptions" />
   </mapbox-map>
 </template>
@@ -15,6 +15,8 @@
 export default {
   name: "Map",
 
+  props: ["dataUrl"],
+
   data() {
     return {
       map: null,
@@ -34,5 +36,13 @@ export default {
       },
     };
   },
+  computed: {
+    dynamicSourceOptions() {
+      let localOptions = Object.assign({}, this.sourceOptions); // Updating data.sourceOptions.data with the url received as prop
+      localOptions.data = this.dataUrl
+
+      return localOptions
+    } 
+  }
 };
 </script>
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 11b1143..87ea23e 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -4,11 +4,45 @@
       <v-toolbar-title>Earthquakes Map</v-toolbar-title>
     </v-app-bar>
     <div class="ma-4 grey--text">The form goes here...</div>
+
+    <Form
+      @fetch-data="(value) => doSomethind(value)"
+      @increase-by="increaseCount"
+      @send-form-data="
+        (starttime, endtime, minmagnitude) =>
+          $emit('send-form-data', starttime, endtime, minmagnitude)
+      "
+    ></Form>
   </v-navigation-drawer>
 </template>
 
 <script>
+import Form from "./Form.vue";
+
 export default {
   name: "SideBar",
+
+  props: [""],
+
+  data() {
+    return {
+      aver: 0,
+    };
+  },
+
+  components: {
+    Form,
+  },
+
+  methods: {
+    doSomething(value) {
+      console.log(value);
+      this.$emit("fetchData", value);
+    },
+    increaseCount(n) {
+      console.log("hola", n);
+      this.$emit("increase-by", n);
+    },
+  },
 };
 </script>
diff --git a/src/components/ui/DatepickerField.vue b/src/components/ui/DatepickerField.vue
new file mode 100644
index 0000000..84618ee
--- /dev/null
+++ b/src/components/ui/DatepickerField.vue
@@ -0,0 +1,35 @@
+<template>
+  <v-menu offset-y>
+    <template v-slot:activator="{ on, attrs }">
+      <v-text-field
+        readonly
+        :label="label"
+        v-model="textFieldValue"
+        color="primary"
+        dark
+        v-bind="attrs"
+        v-on="on"
+        prepend-inner-icon="mdi-calendar"
+      >
+      </v-text-field>
+    </template>
+    <v-date-picker
+      v-bind:datepickerValue.sync="datepickerValue"
+      color="green lighten-1"
+      no-title
+    ></v-date-picker>
+  </v-menu>
+</template>
+
+<script>
+export default {
+  props: ["label", "datepickerValue", "textFieldValue"],
+  data() {
+    return {
+      dateValue: null
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

From 45a121abfb8691695e56cb96399039ccbcc0464a Mon Sep 17 00:00:00 2001
From: GisellePerez <giselleperez91@gmail.com>
Date: Sun, 1 Jan 2023 11:03:22 -0300
Subject: [PATCH 2/5] feat: dynamic marker first attempt

---
 src/components/Map.vue | 50 ++++++++++++++++++++++++++++++++++++++----
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/src/components/Map.vue b/src/components/Map.vue
index 7f27944..0d24749 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -6,6 +6,28 @@
     :zoom="2"
     @mb-created="(mapInstance) => (map = mapInstance)"
   >
+    <MapboxMarker :lng-lat="[0, 0]" popup>
+      <template v-slot:popup>
+        <p>Hello world!</p>
+      </template>
+    </MapboxMarker>
+
+    <MapboxMarker
+      v-for="marker in this.dummyData.markers"
+      :key="marker.text"
+      :lng-lat="[marker.lng, marker.lat]"
+      popup
+      color="red"
+      :scale="marker.scale"
+      
+    >
+      <v-icon slot="marker">mdi-calendar</v-icon>
+      
+      <template v-slot:popup>
+        <p>{{ marker.text }}</p>
+      </template>
+    </MapboxMarker>
+
     <mapbox-source id="usgs" :options="dynamicSourceOptions" />
     <mapbox-layer id="earthquakes" :options="layerOptions" />
   </mapbox-map>
@@ -19,6 +41,15 @@ export default {
 
   data() {
     return {
+      dummyData: {
+        markers: [
+          { lng: 1, lat: 1, text: "a", scale: 1 },
+          { lng: 20, lat: 20, text: "b", scale: 2 },
+          { lng: 30, lat: 30, text: "c", scale: 4 },
+          { lng: 60, lat: 60, text: "ddd", scale: 2 },
+        ],
+      },
+
       map: null,
       sourceOptions: {
         type: "geojson",
@@ -39,10 +70,21 @@ export default {
   computed: {
     dynamicSourceOptions() {
       let localOptions = Object.assign({}, this.sourceOptions); // Updating data.sourceOptions.data with the url received as prop
-      localOptions.data = this.dataUrl
+      localOptions.data = this.dataUrl;
 
-      return localOptions
-    } 
-  }
+      return localOptions;
+    },
+  },
 };
 </script>
+
+<style lang="scss" scoped>
+.my-icon {
+  border-radius: 100%;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  line-height: 20px;
+  color: white;
+}
+</style>

From 19eb4009e4180d89e4235f64aa752416ee8b48c8 Mon Sep 17 00:00:00 2001
From: GisellePerez <giselleperez91@gmail.com>
Date: Sun, 1 Jan 2023 19:10:02 -0300
Subject: [PATCH 3/5] feat: working markers and fetched data

---
 src/App.vue                    |  70 ++++++++++++--------
 src/components/Form.vue        |  33 ++--------
 src/components/Map.vue         | 117 +++++++++++++++++----------------
 src/components/SideBar.vue     |  23 +------
 src/components/ui/InfoItem.vue |  25 +++++++
 5 files changed, 135 insertions(+), 133 deletions(-)
 create mode 100644 src/components/ui/InfoItem.vue

diff --git a/src/App.vue b/src/App.vue
index cef9795..58d92a4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,6 @@
 <template>
   <v-app>
     <side-bar
-      @fetch-data="(value) => doSomething(value)"
       @send-form-data="
         (starttime, endtime, minmagnitude) =>
           fetchData(starttime, endtime, minmagnitude)
@@ -9,7 +8,10 @@
     />
     <v-main>
       <v-container fluid fill-height d-flex pa-0>
-        <main-map class="flex-grow-1 fill-height" :dataUrl="this.dataUrl" />
+        <main-map
+          class="flex-grow-1 fill-height"
+          :requestedData="this.requestedData"
+        />
       </v-container>
     </v-main>
   </v-app>
@@ -30,48 +32,62 @@ export default {
   data() {
     return {
       requestedData: null,
-      dataUrl: ''
+      dataUrl: "",
+      cosa: 0,
     };
   },
 
   methods: {
-    doSomething(value) {
-      console.log("hola", value);
-    },
-    increaseCount(n) {
-      console.log("App", n);
-    },
     formatData(rawData) {
+      // eslint-disable-next-line no-debugger
+      debugger;
+      console.log({ rawData });
       return rawData.map((item) => {
+        // eslint-disable-next-line no-debugger
+        debugger;
+
+        console.log({ item });
         const id = item.id;
         const { mag, place, time } = item.properties;
 
-        return {
+        const formattedItem = {
           id,
+          coordinates: {
+            longitude: item.geometry.coordinates[0], // 0
+            latitude: item.geometry.coordinates[1], // 1
+          },
           properties: {
             mag,
             place,
             time,
-          }
+          },
         };
+
+        console.log({ formattedItem });
+        return formattedItem;
       });
     },
-    fetchData(starttime, endtime, minmagnitude) {
-      console.log(`https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=${starttime}&endtime=${endtime}&minmagnitude=${minmagnitude}`)
-      return this.dataUrl = `https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=${starttime}&endtime=${endtime}&minmagnitude=${minmagnitude}`
-      // fetch(
-      //   `https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=${starttime}&endtime=${endtime}&minmagnitude=${minmagnitude}`
-      // )
-      //   .then((response) => {
-      //     response
-      //       .json()
-      //       .then((res) => console.log("App", res))
-      //       // TODO: formatData & then pass it to map component
-      //       .then((res) => (this.requestedData = res.features));
-      //   })
-      //   .catch((err) => {
-      //     console.error(err);
-      //   });
+    async fetchData(starttime, endtime, minmagnitude) {
+      console.log(
+        `https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=${starttime}&endtime=${endtime}&minmagnitude=${minmagnitude}`
+      );
+      // return (this.dataUrl = `https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=${starttime}&endtime=${endtime}&minmagnitude=${minmagnitude}`);
+
+      fetch(
+        `https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=${starttime}&endtime=${endtime}&minmagnitude=${minmagnitude}`
+      )
+        .then((response) => {
+          response
+            .json()
+            .then((res) => {
+              console.log("App", res);
+              return res;
+            })
+            .then((res) => (this.requestedData = res.features));
+        })
+        .catch((err) => {
+          console.error(err);
+        });
     },
   },
 };
diff --git a/src/components/Form.vue b/src/components/Form.vue
index ef20b20..6e0343a 100644
--- a/src/components/Form.vue
+++ b/src/components/Form.vue
@@ -51,28 +51,24 @@
         v-model="formData.minmagnitude"
       ></v-text-field>
 
-      <!-- @click="fetchData" -->
       <v-btn
         @click="submit"
         elevation="2"
         primary
         :disabled="
-          !this.formData.starttime ||
-          !this.formData.endtime ||
-          !this.formData.minmagnitude
+          !(
+            this.formData.starttime ||
+            this.formData.endtime ||
+            this.formData.minmagnitude
+          )
         "
         >Search</v-btn
       >
-
-      <v-btn @click="cosa"> Increase by 1 </v-btn>
     </form>
   </div>
 </template>
 
 <script>
-// Query: features -> item -> properties -> mag, place, time
-// https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2014-01-01&endtime=2014-01-02&minmagnitude=1
-
 export default {
   data() {
     return {
@@ -81,7 +77,6 @@ export default {
         endtime: "",
         minmagnitude: "",
       },
-      fetchedData: null,
     };
   },
   computed: {
@@ -101,24 +96,6 @@ export default {
         this.formData.minmagnitude
       );
     },
-    fetchData() {
-      fetch(
-        `https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=${this.formData.starttime}&endtime=${this.formData.endtime}&minmagnitude=${this.formData.minmagnitude}`
-      )
-        .then((response) => {
-          response
-            .json()
-            .then((res) => console.log(res))
-            .then((res) => (this.fetchedData = res))
-            .then(() => this.$emit("fetchData", this.fetchedData));
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    },
-    cosa() {
-      this.$emit("increase-by", 1);
-    },
   },
 };
 </script>
diff --git a/src/components/Map.vue b/src/components/Map.vue
index 0d24749..7c151d1 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -1,90 +1,95 @@
 <template>
   <mapbox-map
+    ref="mapboxMap"
     access-token="pk.eyJ1IjoibWF1cmltaXJhbmRhIiwiYSI6ImNqc3FsZ2JpaDE5OWI0NHA2dDI5aG5vdTcifQ.dQsXVmW2MgVsj0FhDrSeQA"
     map-style="mapbox://styles/mapbox/light-v10"
     :center="[0, 0]"
     :zoom="2"
     @mb-created="(mapInstance) => (map = mapInstance)"
   >
-    <MapboxMarker :lng-lat="[0, 0]" popup>
-      <template v-slot:popup>
-        <p>Hello world!</p>
-      </template>
-    </MapboxMarker>
-
     <MapboxMarker
-      v-for="marker in this.dummyData.markers"
-      :key="marker.text"
-      :lng-lat="[marker.lng, marker.lat]"
+      v-for="marker in requestedData"
+      :key="marker.id"
+      :lng-lat="[
+        marker.geometry.coordinates[0],
+        marker.geometry.coordinates[1],
+      ]"
       popup
-      color="red"
-      :scale="marker.scale"
-      
     >
-      <v-icon slot="marker">mdi-calendar</v-icon>
-      
+      <!-- Custom Marker Circle -->
+      <div
+        class="red-circle"
+        :style="`width: ${marker.properties.mag * 5}px; height: ${
+          marker.properties.mag * 5
+        }px;`"
+      ></div>
+
+      <!-- Popup data -->
       <template v-slot:popup>
-        <p>{{ marker.text }}</p>
+        <div style="padding: 8px 10px 2px">
+          <info-item
+            label="Place"
+            :value="marker.properties.place"
+            :withMarginBottom="true"
+          />
+          <info-item
+            label="Time"
+            :value="marker.properties.time"
+            :withMarginBottom="true"
+          />
+          <info-item label="Min Magnitude" :value="marker.properties.mag" />
+        </div>
       </template>
     </MapboxMarker>
-
-    <mapbox-source id="usgs" :options="dynamicSourceOptions" />
-    <mapbox-layer id="earthquakes" :options="layerOptions" />
   </mapbox-map>
 </template>
 
 <script>
+// import mapboxgl from "mapbox-gl";
+
+import InfoItem from "./ui/InfoItem.vue";
+
 export default {
   name: "Map",
 
-  props: ["dataUrl"],
+  props: ["requestedData"],
+
+  components: { InfoItem },
 
   data() {
     return {
-      dummyData: {
-        markers: [
-          { lng: 1, lat: 1, text: "a", scale: 1 },
-          { lng: 20, lat: 20, text: "b", scale: 2 },
-          { lng: 30, lat: 30, text: "c", scale: 4 },
-          { lng: 60, lat: 60, text: "ddd", scale: 2 },
-        ],
-      },
-
       map: null,
-      sourceOptions: {
-        type: "geojson",
-        data: "https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson",
-      },
-      layerOptions: {
-        type: "circle",
-        source: "usgs",
-        paint: {
-          "circle-radius": 8,
-          "circle-stroke-width": 1,
-          "circle-color": "red",
-          "circle-stroke-color": "white",
-        },
-      },
     };
   },
-  computed: {
-    dynamicSourceOptions() {
-      let localOptions = Object.assign({}, this.sourceOptions); // Updating data.sourceOptions.data with the url received as prop
-      localOptions.data = this.dataUrl;
 
-      return localOptions;
-    },
-  },
+  // methods: {
+  //   createMapMarkers(mapData, map) {
+  //     mapData.map((m) => {
+  //       // Create marker element and add styles styles
+  //       const el = document.createElement("div");
+  //       el.style.width = `${m.scale}px`;
+  //       el.style.height = `${m.scale}px`;
+  //       el.style.backgroundColor = "red";
+  //       el.style.borderRadius = "50%";
+
+  //       new mapboxgl.Marker(el)
+  //         .setLngLat([m.lng, m.lat]) // add coordenates
+  //         .setPopup(
+  //           new mapboxgl.Popup({ offset: 25 }) // add popup
+  //             .setHTML(`<h3>Title</h3><p>Description</p>`)
+  //         )
+  //         .addTo(map); // add marker to map
+  //     });
+  //   },
+  // },
 };
 </script>
 
 <style lang="scss" scoped>
-.my-icon {
-  border-radius: 100%;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  line-height: 20px;
-  color: white;
+.red-circle {
+  background-color: red;
+  border-radius: 50%;
+  border: 4px solid #ffdfdf;
+  box-sizing: content-box;
 }
 </style>
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 87ea23e..794c4a5 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -3,11 +3,9 @@
     <v-app-bar dark>
       <v-toolbar-title>Earthquakes Map</v-toolbar-title>
     </v-app-bar>
-    <div class="ma-4 grey--text">The form goes here...</div>
+    <div class="ma-4 grey--text">What data would you like to check?</div>
 
     <Form
-      @fetch-data="(value) => doSomethind(value)"
-      @increase-by="increaseCount"
       @send-form-data="
         (starttime, endtime, minmagnitude) =>
           $emit('send-form-data', starttime, endtime, minmagnitude)
@@ -22,27 +20,8 @@ import Form from "./Form.vue";
 export default {
   name: "SideBar",
 
-  props: [""],
-
-  data() {
-    return {
-      aver: 0,
-    };
-  },
-
   components: {
     Form,
   },
-
-  methods: {
-    doSomething(value) {
-      console.log(value);
-      this.$emit("fetchData", value);
-    },
-    increaseCount(n) {
-      console.log("hola", n);
-      this.$emit("increase-by", n);
-    },
-  },
 };
 </script>
diff --git a/src/components/ui/InfoItem.vue b/src/components/ui/InfoItem.vue
new file mode 100644
index 0000000..b6e1d1d
--- /dev/null
+++ b/src/components/ui/InfoItem.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <p :class="this.withMarginBottom ? 'with-margin-bottom' : 'no-margin'">
+      <b>{{ this.label }}:</b> {{ this.value }}
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "InfoItem",
+
+  props: ["label", "value", "withMarginBottom"],
+};
+</script>
+
+<style lang="scss" scoped>
+.with-margin-bottom {
+  margin-bottom: 4px;
+}
+
+.no-margin {
+  margin: 0;
+}
+</style>

From 5120d49dcaeb069a7b2b280860a5cc1243726cb4 Mon Sep 17 00:00:00 2001
From: GisellePerez <giselleperez91@gmail.com>
Date: Sun, 1 Jan 2023 20:56:36 -0300
Subject: [PATCH 4/5] feat: set max and min values for datepickers

---
 src/components/Form.vue        | 149 +++++++++++++++++++--------------
 src/components/Map.vue         |  25 +-----
 src/components/ui/InfoItem.vue |  10 ++-
 3 files changed, 94 insertions(+), 90 deletions(-)

diff --git a/src/components/Form.vue b/src/components/Form.vue
index 6e0343a..4e76e60 100644
--- a/src/components/Form.vue
+++ b/src/components/Form.vue
@@ -1,77 +1,80 @@
 <template>
-  <div>
-    <form action="">
-      <!-- Start Time -->
-      <v-menu offset-y>
-        <template v-slot:activator="{ on, attrs }">
-          <v-text-field
-            readonly
-            label="Start Date"
-            v-model="formattedStartDate"
-            color="primary"
-            dark
-            v-bind="attrs"
-            v-on="on"
-            prepend-inner-icon="mdi-calendar"
-          >
-          </v-text-field>
-        </template>
-        <v-date-picker
-          v-model="formData.starttime"
-          color="green lighten-1"
-          no-title
-        ></v-date-picker>
-      </v-menu>
+  <form class="px-4" action="">
+    <!-- Start Time -->
+    <v-menu offset-y>
+      <template v-slot:activator="{ on }">
+        <v-text-field
+          readonly
+          label="Start Date"
+          v-model="formattedStartDate"
+          v-on="on"
+          prepend-inner-icon="mdi-calendar"
+          :max="maxDate"
+        >
+        </v-text-field>
+      </template>
+      <v-date-picker
+        v-model="formData.starttime"
+        color="green lighten-1"
+        no-title
+        :max="maxDate"
+      ></v-date-picker>
+    </v-menu>
 
-      <!-- End Time -->
-      <v-menu offset-y>
-        <template v-slot:activator="{ on, attrs }">
-          <v-text-field
-            readonly
-            label="End Date"
-            v-model="formattedEndDate"
-            color="primary"
-            dark
-            v-bind="attrs"
-            v-on="on"
-            prepend-inner-icon="mdi-calendar"
-          >
-          </v-text-field>
-        </template>
-        <v-date-picker
-          v-model="formData.endtime"
-          color="green lighten-1"
-          no-title
-        ></v-date-picker>
-      </v-menu>
+    <!-- End Time -->
+    <v-menu offset-y>
+      <template v-slot:activator="{ on, attrs }">
+        <v-text-field
+          readonly
+          label="End Date"
+          v-model="formattedEndDate"
+          color="primary"
+          dark
+          v-bind="attrs"
+          v-on="on"
+          prepend-inner-icon="mdi-calendar"
+        >
+        </v-text-field>
+      </template>
+      <v-date-picker
+        v-model="formData.endtime"
+        color="green lighten-1"
+        no-title
+        :min="this.formData.starttime"
+        :max="maxDate"
+      ></v-date-picker>
+    </v-menu>
 
-      <!-- Magnitude -->
-      <v-text-field
-        label="Magnitude"
-        v-model="formData.minmagnitude"
-      ></v-text-field>
+    <!-- Magnitude -->
+    <v-text-field
+      label="Min Magnitude"
+      v-model="formData.minmagnitude"
+    ></v-text-field>
 
-      <v-btn
-        @click="submit"
-        elevation="2"
-        primary
-        :disabled="
-          !(
-            this.formData.starttime ||
-            this.formData.endtime ||
-            this.formData.minmagnitude
-          )
-        "
-        >Search</v-btn
-      >
-    </form>
-  </div>
+    <v-btn
+      @click="submit"
+      elevation="2"
+      primary
+      block
+      :disabled="
+        !(
+          this.formData.starttime ||
+          this.formData.endtime ||
+          this.formData.minmagnitude
+        )
+      "
+      >Search</v-btn
+    >
+  </form>
 </template>
 
 <script>
 export default {
+  name: "Form",
+
   data() {
     return {
+      maxDate: null,
       formData: {
         starttime: "",
         endtime: "",
@@ -79,14 +82,18 @@ export default {
       },
     };
   },
+
   computed: {
     formattedStartDate() {
+      // This could be used to format the value shown in the input
       return this.formData.starttime;
     },
     formattedEndDate() {
+      // This could be used to format the value shown in the input
       return this.formData.endtime;
     },
   },
+
   methods: {
     submit() {
       this.$emit(
@@ -96,6 +103,20 @@ export default {
         this.formData.minmagnitude
       );
     },
+    formatMaxDate(date) {
+      /**
+       * Format js Date() into YYYY-MM-DD format
+       * @param date Date() Sun Jan 01 2023 20:38:20 GMT-0300
+       * @returns 2023-01-01
+       */
+      return date.toISOString().split("T")[0];
+    },
+  },
+
+  mounted() {
+    // Set maximum available date for datepickers (today) when component mounts
+    const today = new Date();
+    this.maxDate = this.formatMaxDate(today);
   },
 };
 </script>
diff --git a/src/components/Map.vue b/src/components/Map.vue
index 7c151d1..c1ee827 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -37,7 +37,7 @@
             :value="marker.properties.time"
             :withMarginBottom="true"
           />
-          <info-item label="Min Magnitude" :value="marker.properties.mag" />
+          <info-item label="Magnitude" :value="marker.properties.mag" />
         </div>
       </template>
     </MapboxMarker>
@@ -45,8 +45,6 @@
 </template>
 
 <script>
-// import mapboxgl from "mapbox-gl";
-
 import InfoItem from "./ui/InfoItem.vue";
 
 export default {
@@ -61,27 +59,6 @@ export default {
       map: null,
     };
   },
-
-  // methods: {
-  //   createMapMarkers(mapData, map) {
-  //     mapData.map((m) => {
-  //       // Create marker element and add styles styles
-  //       const el = document.createElement("div");
-  //       el.style.width = `${m.scale}px`;
-  //       el.style.height = `${m.scale}px`;
-  //       el.style.backgroundColor = "red";
-  //       el.style.borderRadius = "50%";
-
-  //       new mapboxgl.Marker(el)
-  //         .setLngLat([m.lng, m.lat]) // add coordenates
-  //         .setPopup(
-  //           new mapboxgl.Popup({ offset: 25 }) // add popup
-  //             .setHTML(`<h3>Title</h3><p>Description</p>`)
-  //         )
-  //         .addTo(map); // add marker to map
-  //     });
-  //   },
-  // },
 };
 </script>
 
diff --git a/src/components/ui/InfoItem.vue b/src/components/ui/InfoItem.vue
index b6e1d1d..06748d4 100644
--- a/src/components/ui/InfoItem.vue
+++ b/src/components/ui/InfoItem.vue
@@ -1,7 +1,13 @@
 <template>
   <div>
-    <p :class="this.withMarginBottom ? 'with-margin-bottom' : 'no-margin'">
-      <b>{{ this.label }}:</b> {{ this.value }}
+    <p
+      :class="
+        this.withMarginBottom
+          ? 'text-body-2 with-margin-bottom'
+          : ' text-body-2 no-margin'
+      "
+    >
+      <b class="font-weight-bold">{{ this.label }}:</b> {{ this.value || '-' }}
     </p>
   </div>
 </template>

From 35c41e8501fac877b581c19acd9c5690038c2210 Mon Sep 17 00:00:00 2001
From: GisellePerez <giselleperez91@gmail.com>
Date: Sun, 1 Jan 2023 22:16:10 -0300
Subject: [PATCH 5/5] feat: final corrections

---
 src/App.vue                           | 42 +--------------------------
 src/components/Form.vue               |  7 +----
 src/components/ui/DatepickerField.vue | 35 ----------------------
 3 files changed, 2 insertions(+), 82 deletions(-)
 delete mode 100644 src/components/ui/DatepickerField.vue

diff --git a/src/App.vue b/src/App.vue
index 58d92a4..aacaf02 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -38,52 +38,12 @@ export default {
   },
 
   methods: {
-    formatData(rawData) {
-      // eslint-disable-next-line no-debugger
-      debugger;
-      console.log({ rawData });
-      return rawData.map((item) => {
-        // eslint-disable-next-line no-debugger
-        debugger;
-
-        console.log({ item });
-        const id = item.id;
-        const { mag, place, time } = item.properties;
-
-        const formattedItem = {
-          id,
-          coordinates: {
-            longitude: item.geometry.coordinates[0], // 0
-            latitude: item.geometry.coordinates[1], // 1
-          },
-          properties: {
-            mag,
-            place,
-            time,
-          },
-        };
-
-        console.log({ formattedItem });
-        return formattedItem;
-      });
-    },
     async fetchData(starttime, endtime, minmagnitude) {
-      console.log(
-        `https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=${starttime}&endtime=${endtime}&minmagnitude=${minmagnitude}`
-      );
-      // return (this.dataUrl = `https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=${starttime}&endtime=${endtime}&minmagnitude=${minmagnitude}`);
-
       fetch(
         `https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=${starttime}&endtime=${endtime}&minmagnitude=${minmagnitude}`
       )
         .then((response) => {
-          response
-            .json()
-            .then((res) => {
-              console.log("App", res);
-              return res;
-            })
-            .then((res) => (this.requestedData = res.features));
+          response.json().then((res) => (this.requestedData = res.features));
         })
         .catch((err) => {
           console.error(err);
diff --git a/src/components/Form.vue b/src/components/Form.vue
index 4e76e60..a1cc968 100644
--- a/src/components/Form.vue
+++ b/src/components/Form.vue
@@ -15,7 +15,6 @@
       </template>
       <v-date-picker
         v-model="formData.starttime"
-        color="green lighten-1"
         no-title
         :max="maxDate"
       ></v-date-picker>
@@ -23,14 +22,11 @@
 
     <!-- End Time -->
     <v-menu offset-y>
-      <template v-slot:activator="{ on, attrs }">
+      <template v-slot:activator="{ on }">
         <v-text-field
           readonly
           label="End Date"
           v-model="formattedEndDate"
-          color="primary"
-          dark
-          v-bind="attrs"
           v-on="on"
           prepend-inner-icon="mdi-calendar"
         >
@@ -38,7 +34,6 @@
       </template>
       <v-date-picker
         v-model="formData.endtime"
-        color="green lighten-1"
         no-title
         :min="this.formData.starttime"
         :max="maxDate"
diff --git a/src/components/ui/DatepickerField.vue b/src/components/ui/DatepickerField.vue
deleted file mode 100644
index 84618ee..0000000
--- a/src/components/ui/DatepickerField.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <v-menu offset-y>
-    <template v-slot:activator="{ on, attrs }">
-      <v-text-field
-        readonly
-        :label="label"
-        v-model="textFieldValue"
-        color="primary"
-        dark
-        v-bind="attrs"
-        v-on="on"
-        prepend-inner-icon="mdi-calendar"
-      >
-      </v-text-field>
-    </template>
-    <v-date-picker
-      v-bind:datepickerValue.sync="datepickerValue"
-      color="green lighten-1"
-      no-title
-    ></v-date-picker>
-  </v-menu>
-</template>
-
-<script>
-export default {
-  props: ["label", "datepickerValue", "textFieldValue"],
-  data() {
-    return {
-      dateValue: null
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped></style>