Added name field & submission confirmation
This commit is contained in:
parent
2676307170
commit
4bcfb84433
@ -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>
|
||||
|
||||
|
||||
|
@ -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() {
|
||||
@ -307,16 +339,17 @@ export default {
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user