Added quick interval to observations view
This commit is contained in:
parent
f93607cb08
commit
c2ffa88912
@ -12,6 +12,29 @@
|
||||
</button>
|
||||
</div>
|
||||
</b-modal>
|
||||
<b-row class="pb-2">
|
||||
<b-col>
|
||||
<b-button-group size="sm">
|
||||
<b-button variant="dark">Quick Interval:</b-button>
|
||||
<b-button
|
||||
variant="outline-primary"
|
||||
v-on:click="setInterval(1, 'w'); getFiltered()"
|
||||
>1 Week</b-button>
|
||||
<b-button
|
||||
variant="outline-primary"
|
||||
v-on:click="setInterval(1, 'M'); getFiltered()"
|
||||
>1 Month</b-button>
|
||||
<b-button
|
||||
variant="outline-primary"
|
||||
v-on:click="setInterval(3, 'M'); getFiltered()"
|
||||
>3 Months</b-button>
|
||||
<b-button
|
||||
variant="outline-primary"
|
||||
v-on:click="setInterval(1, 'y'); getFiltered()"
|
||||
>1 Year</b-button>
|
||||
</b-button-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<observation-search-bar v-on:refresh="getFiltered()"></observation-search-bar>
|
||||
<b-container v-if="observationData != null && observationData.length > 0" fluid>
|
||||
<b-card no-body>
|
||||
@ -30,7 +53,8 @@
|
||||
{{ observation.type }} / {{ observation.observed }}
|
||||
</h2>
|
||||
<b-row align-h="center">
|
||||
<h4>Observed by:
|
||||
<h4>
|
||||
Observed by:
|
||||
<span v-bind:key="index" v-for="(tutor, index) in observation.tutors">
|
||||
<i>
|
||||
{{ tutor.name }}
|
||||
@ -45,80 +69,112 @@
|
||||
<br>
|
||||
<b-row class="mb-2">
|
||||
<b-col class="centered-image" v-if="observation.monitoring">
|
||||
<img src="../assets/Monitoring.svg" class="image-opacity" v-bind:class="{ scorewarning: observation.monitoring < 2.5 }">
|
||||
<img
|
||||
src="../assets/Monitoring.svg"
|
||||
class="image-opacity"
|
||||
v-bind:class="{ scorewarning: observation.monitoring < 2.5 }"
|
||||
>
|
||||
<div class="image-centered-text">{{ observation.monitoring.toFixed(1) }}</div>
|
||||
</b-col>
|
||||
<b-col class="centered-image" v-if="observation.controlProcedural">
|
||||
<img src="../assets/Control.svg" class="image-opacity" v-bind:class="{ scorewarning: observation.controlProcedural < 2.5 }">
|
||||
<img
|
||||
src="../assets/Control.svg"
|
||||
class="image-opacity"
|
||||
v-bind:class="{ scorewarning: observation.controlProcedural < 2.5 }"
|
||||
>
|
||||
<div class="image-centered-text">{{ observation.controlProcedural.toFixed(1) }}</div>
|
||||
</b-col>
|
||||
<b-col class="centered-image" v-if="observation.control">
|
||||
<img src="../assets/Control.svg" class="image-opacity" v-bind:class="{ scorewarning: observation.control < 2.5 }">
|
||||
<img
|
||||
src="../assets/Control.svg"
|
||||
class="image-opacity"
|
||||
v-bind:class="{ scorewarning: observation.control < 2.5 }"
|
||||
>
|
||||
<div class="image-centered-text">{{ observation.control.toFixed(1) }}</div>
|
||||
</b-col>
|
||||
<b-col class="centered-image" v-if="observation.conservatism">
|
||||
<img src="../assets/Conservatism.svg" class="image-opacity" v-bind:class="{ scorewarning: observation.conservatism < 2.5 }">
|
||||
<img
|
||||
src="../assets/Conservatism.svg"
|
||||
class="image-opacity"
|
||||
v-bind:class="{ scorewarning: observation.conservatism < 2.5 }"
|
||||
>
|
||||
<div class="image-centered-text">{{ observation.conservatism.toFixed(1) }}</div>
|
||||
</b-col>
|
||||
<b-col class="centered-image" v-if="observation.teamworkCommunications">
|
||||
<img src="../assets/Teamwork.svg" class="image-opacity" v-bind:class="{ scorewarning: observation.teamworkCommunications < 2.5 }">
|
||||
<img
|
||||
src="../assets/Teamwork.svg"
|
||||
class="image-opacity"
|
||||
v-bind:class="{ scorewarning: observation.teamworkCommunications < 2.5 }"
|
||||
>
|
||||
<div class="image-centered-text">{{ observation.teamworkCommunications.toFixed(1) }}</div>
|
||||
</b-col>
|
||||
<b-col class="centered-image" v-if="observation.teamworkLeadership">
|
||||
<img src="../assets/Teamwork.svg" class="image-opacity" v-bind:class="{ scorewarning: observation.teamworkLeadership < 2.5 }">
|
||||
<img
|
||||
src="../assets/Teamwork.svg"
|
||||
class="image-opacity"
|
||||
v-bind:class="{ scorewarning: observation.teamworkLeadership < 2.5 }"
|
||||
>
|
||||
<div class="image-centered-text">{{ observation.teamworkLeadership.toFixed(1) }}</div>
|
||||
</b-col>
|
||||
<b-col class="centered-image" v-if="observation.teamworkWorkload">
|
||||
<img src="../assets/Teamwork.svg" class="image-opacity" v-bind:class="{ scorewarning: observation.teamworkWorkload < 2.5 }">
|
||||
<img
|
||||
src="../assets/Teamwork.svg"
|
||||
class="image-opacity"
|
||||
v-bind:class="{ scorewarning: observation.teamworkWorkload < 2.5 }"
|
||||
>
|
||||
<div class="image-centered-text">{{ observation.teamworkWorkload.toFixed(1) }}</div>
|
||||
</b-col>
|
||||
<b-col class="centered-image" v-if="observation.knowledge">
|
||||
<img src="../assets/Knowledge.svg" class="image-opacity" v-bind:class="{ scorewarning: observation.knowledge < 2.5 }">
|
||||
<img
|
||||
src="../assets/Knowledge.svg"
|
||||
class="image-opacity"
|
||||
v-bind:class="{ scorewarning: observation.knowledge < 2.5 }"
|
||||
>
|
||||
<div class="image-centered-text">{{ observation.knowledge.toFixed(1) }}</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row v-for="(entry, index2) in observation.scenarios" v-bind:key="index2">
|
||||
<b-col class="border">
|
||||
<b-row align-h="center">
|
||||
<h3>{{ entry.title }}</h3>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<observation-entry
|
||||
:scenariofundamental="entry.monitoring"
|
||||
:description="'Monitoring'"
|
||||
></observation-entry>
|
||||
<observation-entry
|
||||
:scenariofundamental="entry.controlProcedural"
|
||||
:description="'Control Procedural'"
|
||||
></observation-entry>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<observation-entry :scenariofundamental="entry.control" :description="'Control'"></observation-entry>
|
||||
<observation-entry
|
||||
:scenariofundamental="entry.conservatism"
|
||||
:description="'Conservatism'"
|
||||
></observation-entry>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<observation-entry
|
||||
:scenariofundamental="entry.teamworkCommunications"
|
||||
:description="'Teamwork Communications'"
|
||||
></observation-entry>
|
||||
<observation-entry
|
||||
:scenariofundamental="entry.teamworkLeadership"
|
||||
:description="'Teamwork Leadership'"
|
||||
></observation-entry>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<observation-entry
|
||||
:scenariofundamental="entry.teamworkWorkload"
|
||||
:description="'Teamwork Workload'"
|
||||
></observation-entry>
|
||||
<observation-entry
|
||||
:scenariofundamental="entry.knowledge"
|
||||
:description="'Knowledge'"
|
||||
></observation-entry>
|
||||
</b-row>
|
||||
<b-row align-h="center">
|
||||
<h3>{{ entry.title }}</h3>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<observation-entry
|
||||
:scenariofundamental="entry.monitoring"
|
||||
:description="'Monitoring'"
|
||||
></observation-entry>
|
||||
<observation-entry
|
||||
:scenariofundamental="entry.controlProcedural"
|
||||
:description="'Control Procedural'"
|
||||
></observation-entry>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<observation-entry :scenariofundamental="entry.control" :description="'Control'"></observation-entry>
|
||||
<observation-entry
|
||||
:scenariofundamental="entry.conservatism"
|
||||
:description="'Conservatism'"
|
||||
></observation-entry>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<observation-entry
|
||||
:scenariofundamental="entry.teamworkCommunications"
|
||||
:description="'Teamwork Communications'"
|
||||
></observation-entry>
|
||||
<observation-entry
|
||||
:scenariofundamental="entry.teamworkLeadership"
|
||||
:description="'Teamwork Leadership'"
|
||||
></observation-entry>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<observation-entry
|
||||
:scenariofundamental="entry.teamworkWorkload"
|
||||
:description="'Teamwork Workload'"
|
||||
></observation-entry>
|
||||
<observation-entry
|
||||
:scenariofundamental="entry.knowledge"
|
||||
:description="'Knowledge'"
|
||||
></observation-entry>
|
||||
</b-row>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-tab>
|
||||
@ -126,9 +182,7 @@
|
||||
</b-card>
|
||||
<b-button class="mt-2" variant="success" @click="getCSV()">CSV Dump</b-button>
|
||||
</b-container>
|
||||
<b-container v-else-if="loading">
|
||||
Loading...
|
||||
</b-container>
|
||||
<b-container v-else-if="loading">Loading...</b-container>
|
||||
<b-container v-else>
|
||||
<b-row>
|
||||
<b-col>
|
||||
@ -144,7 +198,7 @@
|
||||
import Vue from "vue";
|
||||
import "vue-awesome/icons/search";
|
||||
import ObservationEntry from "../components/ObservationEntry.vue";
|
||||
import ObservationSearchBar from "../components/ObservationSearchBar"
|
||||
import ObservationSearchBar from "../components/ObservationSearchBar";
|
||||
|
||||
var moment = require("moment");
|
||||
export default {
|
||||
@ -179,7 +233,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getFiltered: function() {
|
||||
this.loading = true
|
||||
this.loading = true;
|
||||
Vue.axios
|
||||
.post("/observations", {
|
||||
site: this.$store.state.search.site,
|
||||
@ -191,13 +245,13 @@ export default {
|
||||
})
|
||||
.then(response => {
|
||||
this.observationData = response.data;
|
||||
this.loading = false
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(error => {
|
||||
this.errorStatus = error.response.status;
|
||||
this.errorMessage = error.response.data;
|
||||
this.$refs.errorModal.show();
|
||||
this.loading = false
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getCSV: function() {
|
||||
@ -231,6 +285,10 @@ export default {
|
||||
} else {
|
||||
return data.substr(0, 20) + "...";
|
||||
}
|
||||
},
|
||||
setInterval: function(amount, timeType) {
|
||||
this.endDate = moment();
|
||||
this.startDate = moment().subtract(amount, timeType);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -245,7 +303,7 @@ export default {
|
||||
text-align: center;
|
||||
}
|
||||
.scorewarning {
|
||||
background-color: red;
|
||||
background-color: red;
|
||||
}
|
||||
.image-centered-text {
|
||||
position: absolute;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user