diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue index 6f5204c..5b20300 100644 --- a/src/components/Calendar.vue +++ b/src/components/Calendar.vue @@ -34,6 +34,8 @@ import DayElement from '@/components/calendar/DayElement' import MonthSummary from '@/components/calendar/MonthSummary' import moment from 'moment' +import { adventureList } from '@/utils/leifsbackend-api' + export default { components: { DayElement, MonthSummary }, props: { @@ -95,8 +97,7 @@ export default { .then(events => this.populateCalendar(events)) }, getEvents() { - return fetch('http://localhost:5000/api/adventure') - .then(resp => resp.json()) + return adventureList() .then(events => { console.log('events', events) this.eventsFound = events; diff --git a/src/components/EditEvent.vue b/src/components/EditEvent.vue index 86b476d..28e5fd5 100644 --- a/src/components/EditEvent.vue +++ b/src/components/EditEvent.vue @@ -54,6 +54,8 @@ import VueGridLayout from 'vue-grid-layout'; import ClickOutside from 'vue-click-outside' import EventForm from './EventForm' +import { adventureById, createAdventure } from '@/utils/leifsbackend-api' + export default { components: { GridLayout: VueGridLayout.GridLayout, @@ -147,12 +149,11 @@ export default { }, methods: { fetchById(id) { - fetch('http://localhost:5000/api/adventure/' + id) - .then(resp => resp.json()) - .then(data => { - this.formData = data; - console.log('data', data) - }) + adventureById(id) + .then(data => { + this.formData = data; + console.log('data', data) + }) }, processForm: function() { @@ -166,19 +167,7 @@ export default { mapboxData: this.selectedPlace } - fetch('http://localhost:5000/api/adventure', { - method: 'POST', - headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json' - }, - body: JSON.stringify(data) - }) - // axios.post('localhost:5000/api/adventure', { - // body: JSON.stringify(data) - // }) - .then((resp) => console.log('response from posting to server:', resp)) - .catch((error) => console.error('error from post request:', error)) + createAdventure(data) }, processFile(event) { this.files = event.target.files; diff --git a/src/components/EventForm.vue b/src/components/EventForm.vue index 8197d02..46da3e0 100644 --- a/src/components/EventForm.vue +++ b/src/components/EventForm.vue @@ -60,6 +60,8 @@ import FormElementLocation from './form/FormElementLocation' import FormElementUpload from './form/FormElementUpload' import { dateToDayMonthYearDashed } from '@/utils/dates' +import { createAdventure } from '@/utils/leifsbackend-api' + export default { components: { FormElementLocation, @@ -118,20 +120,7 @@ export default { console.log('Processing form to post to backend with data', data) - fetch('http://localhost:5000/api/adventure', { - method: 'POST', - headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json' - }, - body: JSON.stringify(data) - }) - - // axios.post('localhost:5000/api/adventure', { - // body: JSON.stringify(data) - // }) - .then((resp) => console.log('response from posting to server:', resp)) - .catch((error) => console.error('error from post request:', error)) + createAdventure(data) }, } } diff --git a/src/components/EventPage.vue b/src/components/EventPage.vue index 6ca68c1..54d0638 100644 --- a/src/components/EventPage.vue +++ b/src/components/EventPage.vue @@ -39,6 +39,8 @@ import Gallery from '@/components/Gallery' import MapView from '@/components/MapView' import moment from 'moment' +import { locationByName } from '@/utils/leifsbackend-api' + export default { components: { Gallery, MapView @@ -74,12 +76,8 @@ export default { const id = this.$route.params.id; console.log('id found', id) if (id) { - fetch('http://localhost:5000/api/adventure/' + id) - .then(resp => { - console.log('resp', resp) - resp.json() - }) - .then(data => this.eventData = data) + adventureById(id) + .then(data => this.eventData = data) } }, methods: { @@ -93,16 +91,12 @@ export default { return } - var url = new URL('http://localhost:5000/api/location') - url.search = new URLSearchParams({ name: this.eventData.locationName }) - - fetch(url) - .then(resp => resp.json()) - .then(data => { - this.mapboxData = data.mapboxData; - this.showMap = true; - }) - .catch((err) => console.log('error fetching locations by name from server. Error:', err)) + locationByName(this.eventData.locationName) + .then(data => { + this.mapboxData = data.mapboxData; + this.showMap = true; + }) + .catch((err) => console.log('error fetching locations by name from server. Error:', err)) } } } diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue index 750d3c4..430e52f 100644 --- a/src/components/Gallery.vue +++ b/src/components/Gallery.vue @@ -21,6 +21,9 @@ import GalleryText from '@/components/GalleryText' import { mapGetters } from 'vuex' import store from '@/store' +import { imagesByAdventureId } from '@/utils/leifsbackend-api' + + export default { name: 'Gallery-Item', components: { GalleryImage, GalleryText }, @@ -49,8 +52,7 @@ export default { } }, created() { - fetch('http://localhost:5000/api/images/' + this.id) - .then(resp => resp.json()) + imagesByAdventureId(this.id) .then(images => { console.log('events', images) images.forEach(image => { diff --git a/src/components/Home.vue b/src/components/Home.vue index 996244e..d05e3f1 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -26,6 +26,8 @@ import EventPage from '@/components/EventPage' import Calendar from '@/components/Calendar' import Footer from '@/components/Footer' +import { adventureList } from '@/utils/leifsbackend-api' + export default { components: { Header, EventPage, Calendar, Footer }, data() { @@ -41,13 +43,12 @@ export default { methods: { fetchEvents() { - fetch('http://localhost:5000/api/adventure') - .then(resp => resp.json()) - .then((data) => { - console.log('response from fetch events', data) - this.events = data; - }) - .catch((error) => console.log('unable to fetch events from api; error message:', error)) + adventureList() + .then((data) => { + console.log('response from fetch events', data) + this.events = data; + }) + .catch((error) => console.log('unable to fetch events from api; error message:', error)) }, navigate: function() { console.log(this.$router) diff --git a/src/components/form/FormElementUpload.vue b/src/components/form/FormElementUpload.vue index 581fb3d..2f18427 100644 --- a/src/components/form/FormElementUpload.vue +++ b/src/components/form/FormElementUpload.vue @@ -17,6 +17,8 @@ import axios from 'axios' import store from '@/store' +import { createImages } from '@/utils/leifsbackend-api' + export default { data() { return { @@ -43,9 +45,11 @@ export default { } console.log('formdata', formData) - axios.post('http://localhost:5000/api/upload/' + 1, formData, { onUploadProgress: progressEvent => console.log(100 * (progressEvent.loaded / progressEvent.totalSize))} ) - .then((resp) => console.log('response from posting to server:', resp)) - .catch((error) => console.error('error from post request:', error)) + createImages(formData, 1, this.progressEvent) // passes formData (fileList of images) and adventureId + }, + + progressEvent(event) { + console.log(100 * (event.loaded / event.totalSize)) }, processFiles(event) { diff --git a/src/utils/leifsbackend-api.js b/src/utils/leifsbackend-api.js new file mode 100644 index 0000000..8454325 --- /dev/null +++ b/src/utils/leifsbackend-api.js @@ -0,0 +1,68 @@ +import axios from 'axios' + +const BASE_URL = 'http://localhost:5000/api/' + +function adventureList() { + const url = BASE_URL + 'adventure'; + + return fetch(url) + .then(resp => resp.json()) + .catch(err => console.log('unable to fetch adventure.')) +} + +function adventureById(id) { + const url = BASE_URL + 'adventure/' + id; + + return fetch(url) + .then(resp => resp.json()) + .catch(err => console.log('unable to fetch adventure.')) +} + +function createAdventure(data) { + const url = BASE_URL + 'adventure'; + const jsonBody = JSON.stringify(data); + const headers = { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }; + + return fetch(url, { method: 'POST', headers: headers, body: jsonBody }) + .then((resp) => console.log('response from posting to server:', resp)) + .catch((error) => console.error('error from post request:', error)) +} + + +function locationByName(locationName) { + let url = new URL(BASE_URL + 'location') + url.search = new URLSearchParams({ name: locationName }) + + return fetch(url) + .then(resp => resp.json()) + .catch(err => console.log('unable to fetch location.')) +} + +function imagesByAdventureId(adventureId) { + const url = BASE_URL + 'images/' + adventureId; + + return fetch(url) + .then(resp => resp.json()) + .catch(err => console.log('unable to fetch images.')) +} + +function createImages(FileFormData, adventureId, progressEvent=undefined) { + const url = BASE_URL + 'upload/' + adventureId; + + axios.post(url, FileFormData, { onUploadProgress: progressEvent } ) + .then((resp) => console.log('response from posting to server:', resp)) + .catch((error) => console.error('error from post request:', error)) +} + + +export { + adventureList, + adventureById, + createAdventure, + locationByName, + imagesByAdventureId, + createImages +} \ No newline at end of file