KevinMidboe/leifsopplevelser
1
0
Fork 0
mirror of https://github.com/KevinMidboe/leifsopplevelser.git synced 2025-10-29 17:50:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Lots of changes. Added footer, calendar is more interactive and now we can route to specific adventures and fields become populated. Started upload progress of images and 404 page.

Browse Source
This commit is contained in:
Kevin
2019-02-23 22:38:32 +01:00
parent 82a53ed9aa
commit b84cd100a7
23 changed files with 1106 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/components/EventForm.vue
View File

@@ -1,53 +1,56 @@
<template>
<form class="form" @submit.prevent="">
<!-- <form class="form" @submit.prevent="processForm"> -->
<div class="form-item required">
<label class="title">tittel <span class="required">*</span></label>
<input class="field-element" v-model="title" type="text" :tabindex="1">
</div>
<fieldset class="form-item">
<div class="title">dato <span class="required">*</span></div>
<div class="field first-name">
<label class="caption">
<input v-model="dateStart" type="date" spellcheck="false" maxlength="30" :tabindex="2">
fra dato
</label>
<div>
<form class="form" @submit.prevent="">
<!-- <form class="form" @submit.prevent="processForm"> -->
<div class="form-item required">
<label class="title">tittel <span class="required">*</span></label>
<input class="field-element" v-model="title" type="text" :tabindex="1">
</div>
<div class="field last-name">
<label class="caption">
<input v-model="dateEnd" type="date" spellcheck="false" maxlength="30" :tabindex="3">
til dato
</label>
<fieldset class="form-item">
<div class="title">dato <span class="required">*</span></div>
<div class="field first-name">
<label class="caption">
<input v-model="dateStart" type="date" spellcheck="false" maxlength="30" :tabindex="2">
fra dato
</label>
</div>
<div class="field last-name">
<label class="caption">
<input v-model="dateEnd" type="date" spellcheck="false" maxlength="30" :tabindex="3">
til dato
</label>
</div>
</fieldset>
<form-element-location @newLocation="setLocation" :inputLocation="formData"></form-element-location>
<div class="form-item">
<label class="title">love letter <span class="required">*</span></label>
<textarea v-model="subtext"></textarea>
</div>
</fieldset>
<form-element-location @newLocation="setLocation"></form-element-location>
<div class="form-item">
<label class="title">love letter <span class="required">*</span></label>
<textarea v-model="subtext"></textarea>
</div>
<form-element-upload @newFiles="setFiles"></form-element-upload>
<form-element-upload @newFiles="setFiles"></form-element-upload>
<!-- <div class="form-button-wrapper form-button-wrapper--align-left">
<button class="button sqs-system-button sqs-editable-button" @click="gridSettings">Settings</button>
</div> -->
<div class="hidden form-submission-text">Thank you!</div>
<div class="hidden form-submission-html" data-submission-html=""></div>
</form>
<div>
<button class="button" type="submit">Legg til</button>
<button class="button" @click="processForm">Legg til</button>
</div>
<!-- <div class="form-button-wrapper form-button-wrapper--align-left">
<button class="button sqs-system-button sqs-editable-button" @click="gridSettings">Settings</button>
</div> -->
<div class="hidden form-submission-text">Thank you!</div>
<div class="hidden form-submission-html" data-submission-html=""></div>
</form>
</div>
</template>
<script>
@@ -55,20 +58,28 @@ import axios from 'axios'
import ClickOutside from 'vue-click-outside'
import FormElementLocation from './form/FormElementLocation'
import FormElementUpload from './form/FormElementUpload'
import { dateToDayMonthYearDashed } from '@/utils/dates'
export default {
components: {
FormElementLocation,
FormElementUpload
},
props: {
formData: {
type: Object,
required: false,
default: undefined
}
},
data() {
return {
title: '',
dateStart: '',
dateEnd: '',
title: undefined,
dateStart: undefined,
dateEnd: undefined,
chosenLocation: undefined,
chosenFiles: undefined,
subtext: '',
subtext: undefined,
}
},
computed: {
@@ -79,15 +90,21 @@ export default {
return this.chosenLocation ? this.chosenLocation.geometry.coordinates : undefined;
}
},
beforeMount() {
const formData = this.formData || this.$route.params.formData;
console.log('formData', formData)
if (formData) {
this.title = formData.title;
this.dateStart = dateToDayMonthYearDashed(formData.dateStart);
this.dateEnd = dateToDayMonthYearDashed(formData.dateEnd);
this.chosenLocation = formData.locationName;
this.subtext = formData.subtext;
}
},
methods: {
setLocation(location) {
console.log('detected location changed')
console.log('inputLocation', location)
this.chosenLocation = location;
},
setFiles(files) {
this.chosenFiles = files;
},
setLocation(location) { this.chosenLocation = location },
setFiles(files) { this.chosenFiles = files },
processForm: function() {
let data = {
title: this.title,
@@ -98,6 +115,8 @@ export default {
geoposition: this.LocationGeoposition,
mapboxData: this.chosenLocation
}
console.log('Processing form to post to backend with data', data)
fetch('http://localhost:5000/api/adventure', {
method: 'POST',
@@ -107,6 +126,7 @@ export default {
},
body: JSON.stringify(data)
})
// axios.post('localhost:5000/api/adventure', {
// body: JSON.stringify(data)
// })
@@ -136,7 +156,6 @@ export default {
height: 42px;
letter-spacing: 1px;
line-height: 14px;
margin-left: -10px;
padding: 0 1rem;
text-align: center;
text-decoration: none;