neviyn/ObservationDatabase
1
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

Added confirmation before submission.

Browse Source
This commit is contained in:
neviyn 2018-09-20 16:27:40 +01:00
parent 0deffdff9e
commit 0b2bbb1dbe
1 changed files with 34 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/views/Observation.vue
View File

@ -1,5 +1,15 @@
<template> <template>
<b-container> <b-container>
<div>
<b-modal ref="submissionModal" hide-footer title="Confirm Submission" @hidden="hideModal">
<div class="d-block text-center">
<p>Enter confirmation code in order to submit.</p>
<b-form-input type="password" v-model="submitPassword" style="text-align:center;" />
</div>
<b-btn class="mt-3" variant="outline-success" block @click="reallySubmit">Submit</b-btn>
<b-btn class="mt-3" variant="outline-danger" block @click="hideModal">Close</b-btn>
</b-modal>
</div>
<b-container class="sidebar"> <b-container class="sidebar">
<b-row align-v="center" class="sidebar-vert-padding"> <b-row align-v="center" class="sidebar-vert-padding">
<b-col class="centered-image"> <b-col class="centered-image">
@ -73,8 +83,14 @@
</b-col> </b-col>
</b-row> </b-row>
</b-container> </b-container>
<b-button type="submit" variant="primary">Submit</b-button> <b-row align-h="center">
<b-button v-on:click="this.addAnotherObservation">Add Entry</b-button> <b-col cols="1">
<b-button type="submit" variant="primary">Submit</b-button>
</b-col>
<b-col offset="1" cols="1">
<b-button v-on:click="this.addAnotherObservation ">Add Entry</b-button>
</b-col>
</b-row>
</b-form> </b-form>
</b-container> </b-container>
</template> </template>
@ -96,7 +112,8 @@ export default {
improvements: null improvements: null
} }
], ],
totals: [0, 0, 0, 0, 0] totals: [0, 0, 0, 0, 0],
submitPassword: null
}; };
}, },
computed: { computed: {
@ -172,6 +189,20 @@ export default {
onSubmit: function(e) { onSubmit: function(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
var form = document.getElementById("submission-form");
if (form.checkValidity()) {
this.showModal();
}
form.classList.add("was-validated");
},
showModal() {
this.$refs.submissionModal.show();
},
hideModal() {
this.$refs.submissionModal.hide();
this.submitPassword = null;
},
reallySubmit() {
var form = document.getElementById("submission-form"); var form = document.getElementById("submission-form");
if (form.checkValidity()) { if (form.checkValidity()) {
Vue.axios Vue.axios
@ -194,7 +225,6 @@ export default {
console.log(error); console.log(error);
}); });
} }
form.classList.add("was-validated");
} }
} }
}; };