Assessment commit

.dockerignore

@@ -0,0 +1,5 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md

Dockerfile

@@ -0,0 +1,8 @@
+FROM node:14-alpine
+
+WORKDIR /app
+COPY package.json .
+RUN npm install
+COPY . .
+
+CMD ["npm", "run", "serve"]

package.json

@@ -10,14 +10,17 @@
   "dependencies": {
     "@mapbox/mapbox-gl-geocoder": "^4.7.1",
     "@studiometa/vue-mapbox-gl": "^1.4.7",
+    "axios": "^1.2.1",
     "core-js": "^3.6.5",
     "mapbox-gl": "^1.13.1",
     "vue": "^2.6.11",
-    "vuetify": "^2.4.0"
+    "vuetify": "^2.4.0",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",

src/components/AlertError.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-row v-if="isError" class="mt-4">
+    <v-col cols="12">
+      <v-alert color="red" outlined type="error">
+        There was an error, please try again with different values
+      </v-alert>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "AlertError",
+  computed: {
+    ...mapState(["isError"]),
+  },
+};
+</script>
+
+<style>
+</style>

src/components/FormEarthquake.vue

@@ -0,0 +1,127 @@
+<template>
+  <form @submit.prevent="submit">
+    <v-row>
+      <v-col cols="12">
+        <v-menu
+          ref="menu1"
+          v-model="menu1"
+          :close-on-content-click="false"
+          transition="scale-transition"
+          offset-y
+          max-width="290px"
+          min-width="auto"
+        >
+          <template v-slot:activator="{ on, attrs }">
+            <v-text-field
+              v-model="startDate"
+              label="Start Date"
+              prepend-icon="mdi-calendar"
+              v-bind="attrs"
+              @blur="date1 = parseDate(startDate)"
+              v-on="on"
+            ></v-text-field>
+          </template>
+          <v-date-picker
+            v-model="date1"
+            no-title
+            @input="menu1 = false"
+          ></v-date-picker>
+        </v-menu>
+      </v-col>
+      <v-col cols="12">
+        <v-menu
+          ref="menu2"
+          v-model="menu2"
+          :close-on-content-click="false"
+          transition="scale-transition"
+          offset-y
+          max-width="290px"
+          min-width="auto"
+        >
+          <template v-slot:activator="{ on, attrs }">
+            <v-text-field
+              v-model="endDate"
+              label="End Date"
+              prepend-icon="mdi-calendar"
+              v-bind="attrs"
+              @blur="date2 = parseDate(endDate)"
+              v-on="on"
+            ></v-text-field>
+          </template>
+          <v-date-picker
+            v-model="date2"
+            no-title
+            @input="menu2 = false"
+          ></v-date-picker>
+        </v-menu>
+      </v-col>
+      <v-col cols="12">
+        <v-text-field
+          v-model="minMagnitude"
+          label="Min Magnitude"
+          type="number"
+        />
+      </v-col>
+      <v-col cols="12" class="text-right">
+        <v-btn :disabled="searching" type="submit">{{
+          searching ? "Searching..." : "Search"
+        }}</v-btn>
+      </v-col>
+    </v-row>
+  </form>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+export default {
+  name: "FormEarthquake",
+  data() {
+    return {
+      date1: null,
+      date2: null,
+      startDate: null,
+      endDate: null,
+      menu1: false,
+      menu2: false,
+      minMagnitude: "",
+    };
+  },
+  watch: {
+    date1() {
+      this.startDate = this.formatDate(this.date1);
+    },
+    date2() {
+      this.endDate = this.formatDate(this.date2);
+    },
+  },
+  computed: {
+    ...mapState(["searching"]),
+  },
+  methods: {
+    ...mapActions(["getDataApi"]),
+    formatDate(date) {
+      if (!date) return null;
+
+      const [year, month, day] = date.split("-");
+      return `${month}/${day}/${year}`;
+    },
+    parseDate(date) {
+      if (!date) return null;
+
+      const [month, day, year] = date.split("/");
+      return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+    },
+    submit() {
+      let search = {
+        starttime: this.date1 || "",
+        endtime: this.date2 || "",
+        minmagnitude: this.minMagnitude || "",
+      };
+      this.getDataApi(search);
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/components/Map.vue

@@ -6,33 +6,72 @@
     :zoom="2"
     @mb-created="(mapInstance) => (map = mapInstance)"
   >
-    <mapbox-source id="usgs" :options="sourceOptions" />
-    <mapbox-layer id="earthquakes" :options="layerOptions" />
+    <mapbox-source
+      v-if="sourceOptions.data !== ''"
+      id="usgs"
+      :options="sourceOptions"
+    />
+    <mapbox-layer
+      v-if="sourceOptions.data !== ''"
+      @click="(e) => geoJsonClick(e)"
+      id="earthquakes"
+      :options="layerOptions"
+    />
   </mapbox-map>
 </template>
 
 <script>
+import { mapState } from "vuex";
+import Mapbox from "mapbox-gl";
 export default {
   name: "Map",
-
   data() {
     return {
       map: null,
       sourceOptions: {
         type: "geojson",
-        data: "https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson",
+        data: "",
       },
       layerOptions: {
         type: "circle",
         source: "usgs",
         paint: {
-          "circle-radius": 8,
+          "circle-radius": ["get", "mag"],
           "circle-stroke-width": 1,
           "circle-color": "red",
           "circle-stroke-color": "white",
         },
       },
     };
   },
+  computed: {
+    ...mapState(["data"]),
+  },
+  watch: {
+    data(next) {
+      this.sourceOptions.data = next;
+    },
+  },
+  methods: {
+    geoJsonClick(e) {
+      const features = this.map.queryRenderedFeatures(e.point);
+      const place = features[0].properties.title;
+      const magnitude = features[0].properties.mag;
+      const time = new Date(features[0].properties.time)
+        .toISOString()
+        .slice(0, 10);
+      const popup = new Mapbox.Popup({ offset: [0, -15] })
+        .setLngLat(e.lngLat)
+        .setHTML(
+          `<div>
+              <p>Place: ${place}<p>
+              <p>Magnitude: ${magnitude}</p>
+              <p>Date: ${time}</p>
+          </div>`
+        );
+
+      popup.addTo(this.map);
+    },
+  },
 };
 </script>

src/components/SideBar.vue

@@ -3,12 +3,23 @@
     <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">
+      <v-container>
+        <form-earthquake />
+        <alert-error />
+      </v-container>
+    </div>
   </v-navigation-drawer>
 </template>
 
 <script>
+import FormEarthquake from "./FormEarthquake.vue";
+import AlertError from "./AlertError.vue";
 export default {
   name: "SideBar",
+  components: {
+    FormEarthquake,
+    AlertError,
+  },
 };
 </script>

src/main.js

@@ -3,12 +3,14 @@ import App from "./App.vue";
 import vuetify from "./plugins/vuetify";
 import VueMapbox from "@studiometa/vue-mapbox-gl";
 import "mapbox-gl/dist/mapbox-gl.css";
+import store from "./store";
 
 Vue.use(VueMapbox);
 
 Vue.config.productionTip = false;
 
 new Vue({
   vuetify,
+  store,
   render: (h) => h(App),
 }).$mount("#app");

src/store/index.js

@@ -0,0 +1,45 @@
+import Vue from "vue";
+import Vuex from "vuex";
+import axios from 'axios'
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    data: '',
+    searching: false,
+    isError: false
+  },
+  getters: {
+  },
+  mutations: {
+    setData(state, payload) {
+      state.data = payload
+    },
+    setSearching(state, payload){
+      state.searching = payload
+    },
+    setIsError(state, payload){
+      state.isError = payload
+    }
+  },
+  actions: {
+    async getDataApi({ commit }, search) {
+      commit('setIsError', false)
+      commit('setSearching', true)
+      const { starttime, endtime, minmagnitude } = search
+      try {
+        const res = await axios.get('https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson', {
+          params: {
+            starttime, endtime, minmagnitude 
+          }
+        })
+        commit('setData', res.data)
+      } catch (error) {
+        commit('setIsError', true)
+      }
+      commit('setSearching', false)
+    },
+  },
+  modules: {},
+});