Added name field & submission confirmation

This commit is contained in:
neviyn 2019-02-21 15:38:33 +00:00
parent 2676307170
commit 4bcfb84433
2 changed files with 331 additions and 335 deletions

View File

@ -1,9 +1,11 @@
<template>
<div>
<b-form-radio-group
buttons
button-variant="outline-info"
size="lg"
v-model="propModel"
invalid-feedback="Please select a score."
required
>
<b-form-radio button-variant="1" value="1">1</b-form-radio>
@ -12,6 +14,7 @@
<b-form-radio button-variant="4" value="4">4</b-form-radio>
<b-form-radio button-variant="5" value="5">5</b-form-radio>
</b-form-radio-group>
</div>
</template>
<script>
@ -19,11 +22,15 @@ export default {
props: ["scoreValue"],
computed: {
propModel: {
get () { return this.scoreValue },
set (value) { this.$emit('newselection', value) },
get() {
return this.scoreValue;
},
set(value) {
this.$emit("newselection", value);
}
}
}
}
};
</script>

View File

@ -1,17 +1,38 @@
<template>
<b-container fluid>
<b-container v-if="!valid">
<b-container v-if="error !== null">
<p>An error has occurred.</p>
<p>{{ error.status }}</p>
<p>{{ error.data }}</p>
</b-container>
<b-container v-else-if="complete">
<h2>Submission Complete</h2>
<p>Thank you. Your observation data has been submitted.</p>
<p>Your observation summary will shortly appear on the session display.</p>
</b-container>
<b-container v-else-if="!valid">
<p>Getting session data from server</p>
</b-container>
<b-container v-else-if="scenarios.length === 0">
<p>No scenarios defined for this session, please setup a new group session</p>
</b-container>
<b-container v-else
v-for="(item, index) in scenarios"
v-bind:key="index"
class="border bottom-buffer"
fluid
>
<b-container v-else fluid>
<b-form @submit="onSubmit" id="submission-form" novalidate>
<b-row align-h="center">
<b-col>
<b-form-group label="Participant">
<b-form-input
v-model="participant"
type="text"
style="text-align:center;"
placeholder="Enter your name (Initial and Surname)"
required
></b-form-input>
</b-form-group>
</b-col>
</b-row>
<b-row v-for="(item, index) in scenarios" v-bind:key="index" class="border bottom-buffer">
<b-col>
<b-row>
<b-col>
<b-form-input
@ -278,7 +299,18 @@
</b-row>
</b-col>
</b-row>
</b-col>
</b-row>
<br>
<b-button type="submit" variant="primary" v-on:click="onSubmit()">Submit</b-button>
</b-form>
</b-container>
<b-modal id="submissionModal" ref="submissionModal" title="Confirm Submission" @ok="handleOk">
<form @submit.stop.prevent="handleSubmit">
<p>Once submitted, data cannot be changed.</p>
<p>Are you sure you wish to submit?</p>
</form>
</b-modal>
</b-container>
</template>
<script>
@ -292,10 +324,10 @@ export default {
data: function() {
return {
scenarios: [],
totals: [0, 0, 0, 0, 0, 0, 0, 0],
warningBound: 2.5,
submitPassword: null,
valid: false
participant: null,
valid: false,
complete: false,
error: null
};
},
mounted() {
@ -303,20 +335,21 @@ export default {
if (this.id != null) {
Vue.axios
.get(`/grpob/valid/${this.id}`)
.then(function (response) {
if(response.data.titles != null) {
.then(function(response) {
if (response.data.titles != null) {
response.data.titles.forEach(function(x) {
self.addAnotherObservation(x);
})
self.valid = true
};
});
self.valid = true;
}
})
.catch(function(error) {
if (error.response.status === 404) {
self.$router.push("/dberror");
return;
}
console.log(error)
self.error = error.response;
console.log(error);
});
}
},
@ -366,51 +399,6 @@ export default {
}
});
},
updateTotals: function() {
var iTotals = [0, 0, 0, 0, 0, 0, 0, 0];
var counts = [0, 0, 0, 0, 0, 0, 0, 0];
this.scenarios.forEach(function(element) {
if (element.monitoring.rating) {
iTotals[0] += parseInt(element.monitoring.rating);
counts[0] += 1;
}
if (element.controlProcedural.rating) {
iTotals[1] += parseInt(element.controlProcedural.rating);
counts[1] += 1;
}
if (element.control.rating) {
iTotals[2] += parseInt(element.control.rating);
counts[2] += 1;
}
if (element.conservatism.rating) {
iTotals[3] += parseInt(element.conservatism.rating);
counts[3] += 1;
}
if (element.teamworkCommunications.rating) {
iTotals[4] += parseInt(element.teamworkCommunications.rating);
counts[4] += 1;
}
if (element.teamworkLeadership.rating) {
iTotals[5] += parseInt(element.teamworkLeadership.rating);
counts[5] += 1;
}
if (element.teamworkWorkload.rating) {
iTotals[6] += parseInt(element.teamworkWorkload.rating);
counts[6] += 1;
}
if (element.knowledge.rating) {
iTotals[7] += parseInt(element.knowledge.rating);
counts[7] += 1;
}
});
for (var i = 0; i < iTotals.length; i++) {
if (counts[i] !== 0) {
Vue.set(this.totals, i, (iTotals[i] / counts[i]).toFixed(1));
} else {
Vue.set(this.totals, i, 0);
}
}
},
onSubmit: function(e) {
e.preventDefault();
e.stopPropagation();
@ -428,15 +416,16 @@ export default {
if (form.checkValidity()) {
var self = this;
Vue.axios
.post("/observation", {
person: this.whom,
scenarios: JSON.parse(JSON.stringify(this.scenarios))
.post("/grpob/submit", {
person: self.participant,
scenarios: JSON.parse(JSON.stringify(self.scenarios))
})
.then(function(response) {
self.$router.push("/complete");
self.complete = true;
console.log(response);
})
.catch(function(error) {
self.error = error;
console.log(error);
});
}