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

newUI #1

Merged
neviyn merged 7 commits from newUI into master 2020-09-18 09:49:05 +01:00
Conversation 0 Commits 7 Files Changed 13 +143 -84
2 changed files with 143 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 09d868b1a7 - Show all commits

59
frontend/src/components/ScoreSelector.vue
View File

@ -3,11 +3,12 @@
<b-form-radio-group
buttons
button-variant="outline-info"
size="lg"
size="custom"
v-model="propModel"
invalid-feedback="Please select a score."
required
>
<b-form-radio button-variant="0" value=null>&nbsp;</b-form-radio>
<b-form-radio button-variant="1" value="1">1</b-form-radio>
<b-form-radio button-variant="2" value="2">2</b-form-radio>
<b-form-radio button-variant="3" value="3">3</b-form-radio>
@ -27,13 +28,16 @@ export default {
},
set(value) {
this.$emit("newselection", value);
}
}
}
},
},
},
};
</script>
<style>
b-form-radio-group {
font-family: monospace;
}
.btn-1 {
color: #ffffff;
background-color: #cc3232;
@ -243,4 +247,51 @@ fieldset[disabled] .btn-5.active {
color: #2dc937;
background-color: #ffffff;
}
.btn-0 {
color: #ffffff;
background-color: #6c757d;
border-color: #000000;
}
.btn-0:hover,
.btn-0:focus,
.btn-0:active,
.btn-0.active,
.open .dropdown-toggle.btn-0 {
color: #ffffff;
background-color: #4285f4;
border-color: #000000;
}
.btn-0:active,
.btn-0.active,
.open .dropdown-toggle.btn-0 {
background-image: none;
}
.btn-0.disabled,
.btn-0[disabled],
fieldset[disabled] .btn-0,
.btn-0.disabled:hover,
.btn-0[disabled]:hover,
fieldset[disabled] .btn-0:hover,
.btn-0.disabled:focus,
.btn-0[disabled]:focus,
fieldset[disabled] .btn-0:focus,
.btn-0.disabled:active,
.btn-0[disabled]:active,
fieldset[disabled] .btn-0:active,
.btn-0.disabled.active,
.btn-0[disabled].active,
fieldset[disabled] .btn-0.active {
background-color: #6c757d;
border-color: #4285f4;
}
.btn-0 .badge {
color: #6c757d;
background-color: #ffffff;
}
.btn-custom {
padding: 10px 13px;
font-size: 20px;
border-radius: 10px;
}
</style>

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

@ -1,125 +1,122 @@
<template>
<b-container fluid>
<b-container
v-if="type != null && whom != null && site != null && tutors != null"
fluid
style="padding-left: 130px;"
>
<!-- v-if="type != null && whom != null && site != null && tutors != null" -->
<b-container v-if="true" fluid style="padding-left: 130px;">
<h3>
<v-icon name="tag" scale="1.5" />
{{ type }}&nbsp;/&nbsp;{{ whom }}
</h3>
<b-container class="sidebar">
<b-row
align-v="center"
class="sidebar-vert-padding"
v-if="totals[0] > 0"
>
<b-row align-v="center" class="sidebar-vert-padding">
<b-col class="centered-image">
<img
src="../assets/Monitoring.svg"
class="image-opacity"
v-bind:class="{ scorewarning: totals[0] < warningBound }"
v-bind:class="{
scorewarning: totals[0] < warningBound && totals[0] > 0,
}"
/>
<div class="image-centered-text">{{ totals[0] }}</div>
<div class="image-centered-text" v-if="totals[0] > 0">
{{ totals[0] }}
</div>
</b-col>
</b-row>
<b-row
align-v="center"
class="sidebar-vert-padding"
v-if="totals[1] > 0"
>
<b-row align-v="center" class="sidebar-vert-padding">
<b-col class="centered-image">
<img
src="../assets/Control.svg"
class="image-opacity"
v-bind:class="{ scorewarning: totals[1] < warningBound }"
v-bind:class="{
scorewarning: totals[1] < warningBound && totals[1] > 0,
}"
/>
<div class="image-centered-text">{{ totals[1] }}</div>
<div class="image-centered-text" v-if="totals[1] > 0">
{{ totals[1] }}
</div>
</b-col>
</b-row>
<b-row
align-v="center"
class="sidebar-vert-padding"
v-if="totals[2] > 0"
>
<b-row align-v="center" class="sidebar-vert-padding">
<b-col class="centered-image">
<img
src="../assets/Control.svg"
class="image-opacity"
v-bind:class="{ scorewarning: totals[2] < warningBound }"
v-bind:class="{
scorewarning: totals[2] < warningBound && totals[2] > 0,
}"
/>
<div class="image-centered-text">{{ totals[2] }}</div>
<div class="image-centered-text" v-if="totals[2] > 0">
{{ totals[2] }}
</div>
</b-col>
</b-row>
<b-row
align-v="center"
class="sidebar-vert-padding"
v-if="totals[3] > 0"
>
<b-row align-v="center" class="sidebar-vert-padding">
<b-col class="centered-image">
<img
src="../assets/Conservatism.svg"
class="image-opacity"
v-bind:class="{ scorewarning: totals[3] < warningBound }"
v-bind:class="{
scorewarning: totals[3] < warningBound && totals[3] > 0,
}"
/>
<div class="image-centered-text">{{ totals[3] }}</div>
<div class="image-centered-text" v-if="totals[3] > 0">
{{ totals[3] }}
</div>
</b-col>
</b-row>
<b-row
align-v="center"
class="sidebar-vert-padding"
v-if="totals[4] > 0"
>
<b-row align-v="center" class="sidebar-vert-padding">
<b-col class="centered-image">
<img
src="../assets/Teamwork.svg"
class="image-opacity"
v-bind:class="{ scorewarning: totals[4] < warningBound }"
v-bind:class="{
scorewarning: totals[4] < warningBound && totals[4] > 0,
}"
/>
<div class="image-centered-text">{{ totals[4] }}</div>
<div class="image-centered-text" v-if="totals[4] > 0">
{{ totals[4] }}
</div>
</b-col>
</b-row>
<b-row
align-v="center"
class="sidebar-vert-padding"
v-if="totals[5] > 0"
>
<b-row align-v="center" class="sidebar-vert-padding">
<b-col class="centered-image">
<img
src="../assets/Teamwork.svg"
class="image-opacity"
v-bind:class="{ scorewarning: totals[5] < warningBound }"
v-bind:class="{
scorewarning: totals[5] < warningBound && totals[5] > 0,
}"
/>
<div class="image-centered-text">{{ totals[5] }}</div>
<div class="image-centered-text" v-if="totals[5] > 0">
{{ totals[5] }}
</div>
</b-col>
</b-row>
<b-row
align-v="center"
class="sidebar-vert-padding"
v-if="totals[6] > 0"
>
<b-row align-v="center" class="sidebar-vert-padding">
<b-col class="centered-image">
<img
src="../assets/Teamwork.svg"
class="image-opacity"
v-bind:class="{ scorewarning: totals[6] < warningBound }"
v-bind:class="{
scorewarning: totals[6] < warningBound && totals[6] > 0,
}"
/>
<div class="image-centered-text">{{ totals[6] }}</div>
<div class="image-centered-text" v-if="totals[6] > 0">
{{ totals[6] }}
</div>
</b-col>
</b-row>
<b-row
align-v="center"
class="sidebar-vert-padding"
v-if="totals[7] > 0"
>
<b-row align-v="center" class="sidebar-vert-padding">
<b-col class="centered-image">
<img
src="../assets/Knowledge.svg"
class="image-opacity"
v-bind:class="{ scorewarning: totals[7] < warningBound }"
v-bind:class="{
scorewarning: totals[7] < warningBound && totals[7] != 0,
}"
/>
<div class="image-centered-text">{{ totals[7] }}</div>
<div class="image-centered-text" v-if="totals[7] > 0">
{{ totals[7] }}
</div>
</b-col>
</b-row>
</b-container>
@ -140,7 +137,9 @@
></b-form-input>
</b-col>
<b-col cols="1">
<b-button v-on:click="deleteObservation(index)" variant="outline-danger"
<b-button
v-on:click="deleteObservation(index)"
variant="outline-danger"
><b>Delete</b></b-button
>
</b-col>
@ -160,7 +159,15 @@
class="my-3"
></b-form-select>
<div class="d-flex">
<b-button class="mr-3" variant="outline-danger" size="sm" v-on:click="deleteEntry(index, entryIndex)" v-b-tooltip.hover title="Delete this entry">X</b-button>
<b-button
class="mr-2"
variant="outline-danger"
size="sm"
v-on:click="deleteEntry(index, entryIndex)"
v-b-tooltip.hover
title="Delete this entry"
>X</b-button
>
<score-selector
:score-value="entry.rating"
v-on:newselection="
@ -394,6 +401,7 @@ export default {
},
handleSubmit() {
var form = document.getElementById("submission-form");
var notObservedValue = 0
if (form.checkValidity()) {
let axiosConfig = {
auth: {
@ -437,7 +445,7 @@ export default {
(a, b) => parseInt(a.rating) + parseInt(b.rating)
) / monitoring.length
: monitoring[0].rating
: 0,
: notObservedValue,
monitoringStrengths: monitoring
.map((entry) => entry.strengths)
.join("; "),
@ -451,7 +459,7 @@ export default {
(a, b) => parseInt(a.rating) + parseInt(b.rating)
) / controlProcedural.length
: controlProcedural[0].rating
: 0,
: notObservedValue,
controlProceduralStrengths: controlProcedural
.map((entry) => entry.strengths)
.join("; "),
@ -465,7 +473,7 @@ export default {
(a, b) => parseInt(a.rating) + parseInt(b.rating)
) / control.length
: control[0].rating
: 0,
: notObservedValue,
controlStrengths: control
.map((entry) => entry.strengths)
.join("; "),
@ -477,7 +485,7 @@ export default {
(a, b) => parseInt(a.rating) + parseInt(b.rating)
) / conservatism.length
: conservatism[0].rating
: 0,
: notObservedValue,
conservatismStrengths: conservatism
.map((entry) => entry.strengths)
.join(";"),
@ -491,7 +499,7 @@ export default {
(a, b) => parseInt(a.rating) + parseInt(b.rating)
) / teamworkCommunications.length
: teamworkCommunications[0].rating
: 0,
: notObservedValue,
teamworkCommunicationsStrengths: teamworkCommunications
.map((entry) => entry.strengths)
.join(";"),
@ -505,7 +513,7 @@ export default {
(a, b) => parseInt(a.rating) + parseInt(b.rating)
) / teamworkLeadership.length
: teamworkLeadership[0].rating
: 0,
: notObservedValue,
teamworkLeadershipStrengths: teamworkLeadership
.map((entry) => entry.strengths)
.join(";"),
@ -519,7 +527,7 @@ export default {
(a, b) => parseInt(a.rating) + parseInt(b.rating)
) / teamworkWorkload.length
: teamworkWorkload[0].rating
: 0,
: notObservedValue,
teamworkWorkloadStrengths: teamworkWorkload
.map((entry) => entry.strengths)
.join(";"),
@ -533,7 +541,7 @@ export default {
(a, b) => parseInt(a.rating) + parseInt(b.rating)
) / knowledge.length
: knowledge[0].rating
: 0,
: notObservedValue,
knowledgeStrengths: knowledge
.map((entry) => entry.strengths)
.join(";"),
@ -607,7 +615,7 @@ export default {
}
.sidebar {
width: 160px; /* Set the width of the sidebar */
width: 8%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 10%; /* Stay at the top */