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

Frontend can now submit and view persons.

Browse Source
This commit is contained in:
neviyn 2018-10-19 14:31:26 +01:00
parent fe92ec7749
commit ceb6d08c4a
3 changed files with 50 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@
<v-icon name="tag" scale="1.5"/>
{{type}}&nbsp;/&nbsp;{{description}}
</h3>
<br />
<b-container class="sidebar">
<b-row align-v="center" class="sidebar-vert-padding" v-if="totals[0] > 0">
<b-col class="centered-image">
@ -55,6 +56,23 @@
</b-col>
</b-row>
</b-container>
<b-row>
<b-col>
<b-form-input v-model="personInput" v-on:keyup.enter.native="addPerson()" placeholder="Enter a name."></b-form-input>
</b-col>
<b-col cols="1">
<b-button variant="outline-secondary" v-on:click="addPerson()">+</b-button>
</b-col>
</b-row>
<b-row>
<b-col>
<b-list-group>
<b-list-group-item v-if="persons === [] || persons == null">Enter your name(s)!</b-list-group-item>
<b-list-group-item v-for="(item, index) in persons">{{ item }}&nbsp;<a v-on:click="deletePerson(index)"><v-icon name="times-circle"/></a></b-list-group-item>
</b-list-group>
</b-col>
</b-row>
<br />
<b-form @submit="onSubmit" id="submission-form" novalidate>
<b-container v-for="(item, index) in observations" v-bind:key="index" class="border bottom-buffer">
<b-row class="top-buffer">
@ -143,6 +161,7 @@
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import "vue-awesome/icons/tag";
import "vue-awesome/icons/times-circle"
import { mapState } from "vuex";
import Vue from "vue";
@ -160,7 +179,9 @@ export default {
}
],
totals: [0, 0, 0, 0, 0, 0, 0, 0],
submitPassword: null
submitPassword: null,
persons: [],
personInput: null
};
},
computed: {
@ -286,6 +307,7 @@ export default {
observed: this.description,
whom: this.whom,
type: this.type,
persons: this.persons,
entries: JSON.parse(JSON.stringify(this.observations))
},
axiosConfig
@ -300,7 +322,14 @@ export default {
}
this.clearPassword();
form.classList.add("was-validated");
}
},
addPerson() {
this.persons.push(this.personInput);
this.personInput = null;
},
deletePerson: function(index) {
this.persons.splice(index, 1);
},
}
};
</script>

3
frontend/src/views/StartNew.vue
View File

@ -114,6 +114,9 @@ export default {
this.errorMessage = error.response.data;
this.$refs.errorModal.show();
});
if(this.site != null){
this.getTutors();
}
},
computed: {
...mapState(["site", "description", "type", "tutors", "whom"])

17
frontend/src/views/ViewObservations.vue
View File

@ -53,11 +53,18 @@
<b-tab v-for="(observation, index) in observationData" v-bind:key="index">
<p slot="title">{{ observation.date }}<br/>{{ observation.whom }} {{ observation.type }}<br/>{{ observation.observed }}</p>
<h2>{{ observation.date }}, {{ observation.whom }}<br/>{{ observation.type }}, {{ observation.observed }}</h2>
<ul>
<li v-for="person in observation.persons">{{ person.name }}</li>
</ul>
<b-row>
<b-col class="centered-image">
<img src="../assets/Monitoring.svg" class="image-opacity"/>
<div class="image-centered-text">{{ observation.monitoring }}</div>
</b-col>
<b-col class="centered-image">
<img src="../assets/Control.svg" class="image-opacity"/>
<div class="image-centered-text">{{ observation.controlProcedural }}</div>
</b-col>
<b-col class="centered-image">
<img src="../assets/Control.svg" class="image-opacity"/>
<div class="image-centered-text">{{ observation.control }}</div>
@ -68,7 +75,15 @@
</b-col>
<b-col class="centered-image">
<img src="../assets/Teamwork.svg" class="image-opacity"/>
<div class="image-centered-text">{{ observation.teamwork }}</div>
<div class="image-centered-text">{{ observation.teamworkCommunications }}</div>
</b-col>
<b-col class="centered-image">
<img src="../assets/Teamwork.svg" class="image-opacity"/>
<div class="image-centered-text">{{ observation.teamworkLeadership }}</div>
</b-col>
<b-col class="centered-image">
<img src="../assets/Teamwork.svg" class="image-opacity"/>
<div class="image-centered-text">{{ observation.teamworkWorkload }}</div>
</b-col>
<b-col class="centered-image">
<img src="../assets/Knowledge.svg" class="image-opacity"/>