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

Prettier formatting.

Browse Source
This commit is contained in:
neviyn 2018-10-10 10:24:02 +01:00
parent 9925a900c6
commit 586fa70104
9 changed files with 426 additions and 419 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/App.vue
View File

@ -27,17 +27,18 @@
<!--suppress CssUnusedSymbol --> <!--suppress CssUnusedSymbol -->
<style> <style>
#app { #app {
font-family: "Avenir", Helvetica, Arial, sans-serif; font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
} }
.fade-enter-active, .fade-leave-active { .fade-enter-active,
transition: opacity .5s; .fade-leave-active {
} transition: opacity 0.5s;
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { }
opacity: 0; .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
} opacity: 0;
}
</style> </style>

94
frontend/src/router.js
View File

@ -13,51 +13,51 @@ const DBError = () => import("./views/DatabaseUnavailable.vue");
Vue.use(Router); Vue.use(Router);
export default new Router({ export default new Router({
routes: [ routes: [
{ {
path: "/", path: "/",
name: "home", name: "home",
component: Home component: Home
}, },
{ {
path: "/new", path: "/new",
name: "startnew", name: "startnew",
component: StartNew component: StartNew
}, },
{ {
path: "/observation", path: "/observation",
name: "observation", name: "observation",
component: Observation component: Observation
}, },
{ {
path: "/stats", path: "/stats",
name: "stats", name: "stats",
component: Stats component: Stats
}, },
{ {
path: "/newsite", path: "/newsite",
name: "newSite", name: "newSite",
component: NewSite component: NewSite
}, },
{ {
path: "/newtutor", path: "/newtutor",
name: "newTutor", name: "newTutor",
component: NewTutor component: NewTutor
}, },
{ {
path: "/observations", path: "/observations",
name: "observations", name: "observations",
component: ViewObservations component: ViewObservations
}, },
{ {
path: "/complete", path: "/complete",
name: "complete", name: "complete",
component: ObservationComplete component: ObservationComplete
}, },
{ {
path: "/dberror", path: "/dberror",
name: "dberror", name: "dberror",
component: DBError component: DBError
} }
] ]
}); });

11
frontend/src/views/DatabaseUnavailable.vue
View File

@ -23,13 +23,12 @@
</template> </template>
<script> <script>
import 'vue-awesome/icons/database' import "vue-awesome/icons/database";
import 'vue-awesome/icons/ban' import "vue-awesome/icons/ban";
export default { export default {
name: "DatabaseUnavailable" name: "DatabaseUnavailable"
} };
</script> </script>
<style scoped> <style scoped>
</style> </style>

7
frontend/src/views/Home.vue
View File

@ -24,11 +24,10 @@
</template> </template>
<script> <script>
export default { export default {
name: "Home" name: "Home"
} };
</script> </script>
<style scoped> <style scoped>
</style> </style>

121
frontend/src/views/NewSite.vue
View File

@ -19,67 +19,66 @@
</template> </template>
<script> <script>
import Vue from "vue"; import Vue from "vue";
export default { export default {
name: "newSite", name: "newSite",
data: function () { data: function() {
return { return {
siteName: null, siteName: null,
dismissSecs: 5, dismissSecs: 5,
dismissCountDown: 0, dismissCountDown: 0,
alertVariant: "info", alertVariant: "info",
alertText: "", alertText: "",
submissionPassword: "" submissionPassword: ""
};
},
mounted() {
Vue.axios
.get("/site")
.then(response => {
})
.catch(error => {
if(error.response.status === 404){
this.$router.push("/dberror");
return;
}
this.alertText = error.response.data;
this.alertVariant = "danger";
});
},
methods: {
countDownChanged: function (dismissCountDown) {
this.dismissCountDown = dismissCountDown;
},
showAlert: function () {
this.dismissCountDown = this.dismissSecs;
},
onSubmit: function (e) {
e.preventDefault();
e.stopPropagation();
var form = document.getElementById("submission-form");
let axiosConfig = {
auth: {
username: "admin",
password: this.submissionPassword
}
};
if (form.checkValidity()) {
Vue.axios
.post("/site", {'name': this.siteName}, axiosConfig)
.then(response => {
this.alertVariant = "success";
this.alertText = "Successfully added " + response.data.text;
this.showAlert();
})
.catch(error => {
this.alertVariant = "danger";
this.alertText = "Failed to add Site";
this.showAlert();
console.log(error);
});
}
}
}
}; };
},
mounted() {
Vue.axios
.get("/site")
.then(response => {})
.catch(error => {
if (error.response.status === 404) {
this.$router.push("/dberror");
return;
}
this.alertText = error.response.data;
this.alertVariant = "danger";
});
},
methods: {
countDownChanged: function(dismissCountDown) {
this.dismissCountDown = dismissCountDown;
},
showAlert: function() {
this.dismissCountDown = this.dismissSecs;
},
onSubmit: function(e) {
e.preventDefault();
e.stopPropagation();
var form = document.getElementById("submission-form");
let axiosConfig = {
auth: {
username: "admin",
password: this.submissionPassword
}
};
if (form.checkValidity()) {
Vue.axios
.post("/site", { name: this.siteName }, axiosConfig)
.then(response => {
this.alertVariant = "success";
this.alertText = "Successfully added " + response.data.text;
this.showAlert();
})
.catch(error => {
this.alertVariant = "danger";
this.alertText = "Failed to add Site";
this.showAlert();
console.log(error);
});
}
}
}
};
</script> </script>

20
frontend/src/views/NewTutor.vue
View File

@ -43,10 +43,10 @@ export default {
this.siteOptions = response.data; this.siteOptions = response.data;
}) })
.catch(error => { .catch(error => {
if(error.response.status === 404){ if (error.response.status === 404) {
this.$router.push("/dberror"); this.$router.push("/dberror");
return; return;
} }
this.alertText = error.response.data; this.alertText = error.response.data;
this.alertVariant = "danger"; this.alertVariant = "danger";
}); });
@ -70,10 +70,14 @@ export default {
}; };
if (form.checkValidity()) { if (form.checkValidity()) {
Vue.axios Vue.axios
.post("/tutor", { .post(
'siteId': this.siteSelection, "/tutor",
'name': this.tutorName {
}, axiosConfig) siteId: this.siteSelection,
name: this.tutorName
},
axiosConfig
)
.then(response => { .then(response => {
this.alertVariant = "success"; this.alertVariant = "success";
this.alertText = "Successfully added " + response.data.text; this.alertText = "Successfully added " + response.data.text;

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

@ -105,204 +105,208 @@
</template> </template>
<script> <script>
import "bootstrap/dist/css/bootstrap.css"; import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css"; import "bootstrap-vue/dist/bootstrap-vue.css";
import "vue-awesome/icons/tag"; import "vue-awesome/icons/tag";
import {mapState} from "vuex"; import { mapState } from "vuex";
import Vue from "vue"; import Vue from "vue";
export default { export default {
name: "observation", name: "observation",
data: function () { data: function() {
return { return {
observations: [ observations: [
{ {
type: null, type: null,
rating: null, rating: null,
strengths: null, strengths: null,
improvements: null improvements: null
}
],
totals: [0, 0, 0, 0, 0],
submitPassword: null
};
},
computed: {
...mapState(["description", "type", "whom", "site", "tutors"])
},
methods: {
addAnotherObservation: function () {
this.observations.push({
type: null,
rating: null,
strengths: null,
improvements: null
});
Vue.nextTick(function () {
window.scrollTo(
0,
document.body.scrollHeight || document.documentElement.scrollHeight
);
});
},
deleteObservation: function (index) {
this.observations.splice(index, 1);
if (this.observations.length === 0) {
this.addAnotherObservation();
}
this.updateTotals();
},
changeType: function (index, ev) {
this.observations[index].type = ev;
this.updateTotals();
},
changeRating: function (index, ev) {
this.observations[index].rating = parseInt(ev);
this.updateTotals();
},
updateTotals: function () {
var iTotals = [0, 0, 0, 0, 0];
var counts = [0, 0, 0, 0, 0];
this.observations.forEach(function (element) {
if (element.rating > 0) {
switch (element.type) {
case "MONITORING":
iTotals[0] += element.rating;
counts[0] += 1;
break;
case "CONTROL":
iTotals[1] += element.rating;
counts[1] += 1;
break;
case "CONSERVATISM":
iTotals[2] += element.rating;
counts[2] += 1;
break;
case "TEAMWORK":
iTotals[3] += element.rating;
counts[3] += 1;
break;
case "KNOWLEDGE":
iTotals[4] += element.rating;
counts[4] += 1;
break;
}
}
});
for (var i = 0; i < iTotals.length; i++) {
if (counts[i] !== 0) {
this.totals[i] = (iTotals[i] / counts[i]).toFixed(1);
} else {
this.totals[i] = 0;
}
}
},
onSubmit: function (e) {
e.preventDefault();
e.stopPropagation();
var form = document.getElementById("submission-form");
if (form.checkValidity()) {
this.showModal();
}
form.classList.add("was-validated");
},
showModal() {
this.$refs.submissionModal.show();
},
clearPassword() {
this.submitPassword = null
},
handleOk(evt) {
// Prevent modal from closing
evt.preventDefault();
if (this.submitPassword !== null) {
this.handleSubmit()
}
},
handleSubmit() {
var form = document.getElementById("submission-form");
if (form.checkValidity()) {
let axiosConfig = {
auth: {
username: "admin",
password: this.submitPassword
}
};
var self = this;
Vue.axios
.post("/observation", {
site: this.site,
tutors: this.tutors,
observed: this.description,
whom: this.whom,
type: this.type,
entries: JSON.parse(JSON.stringify(this.observations))
}, axiosConfig)
.then(function (response) {
self.$router.push("/complete");
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
this.clearPassword();
form.classList.add("was-validated");
}
} }
],
totals: [0, 0, 0, 0, 0],
submitPassword: null
}; };
},
computed: {
...mapState(["description", "type", "whom", "site", "tutors"])
},
methods: {
addAnotherObservation: function() {
this.observations.push({
type: null,
rating: null,
strengths: null,
improvements: null
});
Vue.nextTick(function() {
window.scrollTo(
0,
document.body.scrollHeight || document.documentElement.scrollHeight
);
});
},
deleteObservation: function(index) {
this.observations.splice(index, 1);
if (this.observations.length === 0) {
this.addAnotherObservation();
}
this.updateTotals();
},
changeType: function(index, ev) {
this.observations[index].type = ev;
this.updateTotals();
},
changeRating: function(index, ev) {
this.observations[index].rating = parseInt(ev);
this.updateTotals();
},
updateTotals: function() {
var iTotals = [0, 0, 0, 0, 0];
var counts = [0, 0, 0, 0, 0];
this.observations.forEach(function(element) {
if (element.rating > 0) {
switch (element.type) {
case "MONITORING":
iTotals[0] += element.rating;
counts[0] += 1;
break;
case "CONTROL":
iTotals[1] += element.rating;
counts[1] += 1;
break;
case "CONSERVATISM":
iTotals[2] += element.rating;
counts[2] += 1;
break;
case "TEAMWORK":
iTotals[3] += element.rating;
counts[3] += 1;
break;
case "KNOWLEDGE":
iTotals[4] += element.rating;
counts[4] += 1;
break;
}
}
});
for (var i = 0; i < iTotals.length; i++) {
if (counts[i] !== 0) {
this.totals[i] = (iTotals[i] / counts[i]).toFixed(1);
} else {
this.totals[i] = 0;
}
}
},
onSubmit: function(e) {
e.preventDefault();
e.stopPropagation();
var form = document.getElementById("submission-form");
if (form.checkValidity()) {
this.showModal();
}
form.classList.add("was-validated");
},
showModal() {
this.$refs.submissionModal.show();
},
clearPassword() {
this.submitPassword = null;
},
handleOk(evt) {
// Prevent modal from closing
evt.preventDefault();
if (this.submitPassword !== null) {
this.handleSubmit();
}
},
handleSubmit() {
var form = document.getElementById("submission-form");
if (form.checkValidity()) {
let axiosConfig = {
auth: {
username: "admin",
password: this.submitPassword
}
};
var self = this;
Vue.axios
.post(
"/observation",
{
site: this.site,
tutors: this.tutors,
observed: this.description,
whom: this.whom,
type: this.type,
entries: JSON.parse(JSON.stringify(this.observations))
},
axiosConfig
)
.then(function(response) {
self.$router.push("/complete");
console.log(response);
})
.catch(function(error) {
console.log(error);
});
}
this.clearPassword();
form.classList.add("was-validated");
}
}
};
</script> </script>
<style> <style>
.top-buffer { .top-buffer {
margin-top: 10px; margin-top: 10px;
} }
.bottom-buffer { .bottom-buffer {
margin-bottom: 10px; margin-bottom: 10px;
} }
.image-centered-text { .image-centered-text {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 50px; font-size: 50px;
color: white; color: white;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
} }
.image-opacity { .image-opacity {
opacity: 0.5; opacity: 0.5;
} }
.centered-image { .centered-image {
position: relative; position: relative;
text-align: center; text-align: center;
} }
.sidebar { .sidebar {
width: 160px; /* Set the width of the sidebar */ width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */ position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */ z-index: 1; /* Stay on top */
top: 20%; /* Stay at the top */ top: 20%; /* Stay at the top */
left: 0; left: 0;
overflow-x: hidden; /* Disable horizontal scroll */ overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px; padding-top: 20px;
} }
.sidebar-vert-padding { .sidebar-vert-padding {
margin-bottom: 25%; margin-bottom: 25%;
} }
@media screen and (max-height: 500px) { @media screen and (max-height: 500px) {
.sidebar { .sidebar {
top: 0; /* Stay at the top */ top: 0; /* Stay at the top */
} }
} }
img { img {
height: 80px; height: 80px;
object-fit: contain; object-fit: contain;
} }
</style> </style>

15
frontend/src/views/ObservationComplete.vue
View File

@ -9,15 +9,14 @@
</template> </template>
<script> <script>
import {mapState} from "vuex"; import { mapState } from "vuex";
export default { export default {
name: "ObservationComplete", name: "ObservationComplete",
computed: { computed: {
...mapState(["description", "type", "whom", "site", "tutors"]) ...mapState(["description", "type", "whom", "site", "tutors"])
} }
} };
</script> </script>
<style scoped> <style scoped>
</style> </style>

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

@ -80,89 +80,91 @@
</template> </template>
<script> <script>
import Vue from "vue"; import Vue from "vue";
import "vue-awesome/icons/spinner"; import "vue-awesome/icons/spinner";
import "vue-awesome/icons/exclamation-circle"; import "vue-awesome/icons/exclamation-circle";
import {mapState, mapMutations} from "vuex"; import { mapState, mapMutations } from "vuex";
export default { export default {
name: "startnew", name: "startnew",
data() { data() {
return { return {
siteOptions: [], siteOptions: [],
tutorOptions: [], tutorOptions: [],
loadingTutors: false, loadingTutors: false,
loaded: false, loaded: false,
errorMessage: null, errorMessage: null,
errorStatus: null errorStatus: null
};
},
mounted() {
this.resetStore();
Vue.axios
.get("/site")
.then(response => {
this.siteOptions = response.data;
this.loaded = true;
})
.catch(error => {
if(error.response.status === 404){
this.$router.push("/dberror");
return;
}
this.errorStatus = error.response.status;
this.errorMessage = error.response.data;
this.$refs.errorModal.show();
});
},
computed: {
...mapState(["site", "description", "type", "tutors", "whom"])
},
watch: {
site: function () {
this.loadingTutors = true;
this.tutorOptions = [];
this.tutors = [];
this.getTutors();
}
},
methods: {
...mapMutations([
"setSite",
"setDescription",
"setType",
"setTutors",
"setWhom",
"resetStore"
]),
getTutors: function () {
if (this.site != null) {
Vue.axios.get("/site/" + this.site + "/tutors").then(response => {
this.tutorOptions = response.data;
this.loadingTutors = false;
}).catch(error => {
if(error.response.status === 404){
this.$router.push("/dberror");
return;
}
this.errorStatus = error.response.status;
this.errorMessage = error.response.data;
this.$refs.errorModal.show();
});
}
},
onSubmit: function (e) {
console.log("submit");
e.preventDefault();
e.stopPropagation();
var form = document.getElementById("submission-form");
if (form.checkValidity() && this.tutors.length > 0) {
console.log("valid");
this.$router.push("/observation");
}
form.classList.add("was-validated");
}
}
}; };
},
mounted() {
this.resetStore();
Vue.axios
.get("/site")
.then(response => {
this.siteOptions = response.data;
this.loaded = true;
})
.catch(error => {
if (error.response.status === 404) {
this.$router.push("/dberror");
return;
}
this.errorStatus = error.response.status;
this.errorMessage = error.response.data;
this.$refs.errorModal.show();
});
},
computed: {
...mapState(["site", "description", "type", "tutors", "whom"])
},
watch: {
site: function() {
this.loadingTutors = true;
this.tutorOptions = [];
this.tutors = [];
this.getTutors();
}
},
methods: {
...mapMutations([
"setSite",
"setDescription",
"setType",
"setTutors",
"setWhom",
"resetStore"
]),
getTutors: function() {
if (this.site != null) {
Vue.axios
.get("/site/" + this.site + "/tutors")
.then(response => {
this.tutorOptions = response.data;
this.loadingTutors = false;
})
.catch(error => {
if (error.response.status === 404) {
this.$router.push("/dberror");
return;
}
this.errorStatus = error.response.status;
this.errorMessage = error.response.data;
this.$refs.errorModal.show();
});
}
},
onSubmit: function(e) {
console.log("submit");
e.preventDefault();
e.stopPropagation();
var form = document.getElementById("submission-form");
if (form.checkValidity() && this.tutors.length > 0) {
console.log("valid");
this.$router.push("/observation");
}
form.classList.add("was-validated");
}
}
};
</script> </script>