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..aacaf02 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,9 +1,17 @@ - + + fetchData(starttime, endtime, minmagnitude) + " + /> - + @@ -20,5 +28,27 @@ export default { SideBar, MainMap, }, + + data() { + return { + requestedData: null, + dataUrl: "", + cosa: 0, + }; + }, + + methods: { + async fetchData(starttime, endtime, minmagnitude) { + fetch( + `https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=${starttime}&endtime=${endtime}&minmagnitude=${minmagnitude}` + ) + .then((response) => { + 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 new file mode 100644 index 0000000..a1cc968 --- /dev/null +++ b/src/components/Form.vue @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + Search + + + + diff --git a/src/components/Map.vue b/src/components/Map.vue index 4030388..c1ee827 100644 --- a/src/components/Map.vue +++ b/src/components/Map.vue @@ -1,38 +1,72 @@ (map = mapInstance)" > - - + + + + + + + + + + + + + + + diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue index 11b1143..794c4a5 100644 --- a/src/components/SideBar.vue +++ b/src/components/SideBar.vue @@ -3,12 +3,25 @@ Earthquakes Map - The form goes here... + What data would you like to check? + + + $emit('send-form-data', starttime, endtime, minmagnitude) + " + > diff --git a/src/components/ui/InfoItem.vue b/src/components/ui/InfoItem.vue new file mode 100644 index 0000000..06748d4 --- /dev/null +++ b/src/components/ui/InfoItem.vue @@ -0,0 +1,31 @@ + + + + {{ this.label }}: {{ this.value || '-' }} + + + + + + +
+ {{ this.label }}: {{ this.value || '-' }} +