frontend/src/components/ScoreSelector.vue

@@ -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>

frontend/src/views/Observation.vue

@@ -1,125 +1,122 @@
 <template>
   <b-container fluid>
-    <b-container
+    <!--  v-if="type != null && whom != null && site != null && tutors != null" -->
-      v-if="type != null && whom != null && site != null && tutors != null"
+    <b-container v-if="true" fluid style="padding-left: 130px;">
-      fluid
-      style="padding-left: 130px;"
-    >
       <h3>
         <v-icon name="tag" scale="1.5" />
         {{ type }}&nbsp;/&nbsp;{{ whom }}
       </h3>
       <b-container class="sidebar">
-        <b-row
+        <b-row align-v="center" class="sidebar-vert-padding">
-          align-v="center"
-          class="sidebar-vert-padding"
-          v-if="totals[0] > 0"
-        >
           <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
+        <b-row align-v="center" class="sidebar-vert-padding">
-          align-v="center"
-          class="sidebar-vert-padding"
-          v-if="totals[1] > 0"
-        >
           <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
+        <b-row align-v="center" class="sidebar-vert-padding">
-          align-v="center"
-          class="sidebar-vert-padding"
-          v-if="totals[2] > 0"
-        >
           <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
+        <b-row align-v="center" class="sidebar-vert-padding">
-          align-v="center"
-          class="sidebar-vert-padding"
-          v-if="totals[3] > 0"
-        >
           <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
+        <b-row align-v="center" class="sidebar-vert-padding">
-          align-v="center"
-          class="sidebar-vert-padding"
-          v-if="totals[4] > 0"
-        >
           <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
+        <b-row align-v="center" class="sidebar-vert-padding">
-          align-v="center"
-          class="sidebar-vert-padding"
-          v-if="totals[5] > 0"
-        >
           <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
+        <b-row align-v="center" class="sidebar-vert-padding">
-          align-v="center"
-          class="sidebar-vert-padding"
-          v-if="totals[6] > 0"
-        >
           <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
+        <b-row align-v="center" class="sidebar-vert-padding">
-          align-v="center"
-          class="sidebar-vert-padding"
-          v-if="totals[7] > 0"
-        >
           <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,14 +159,22 @@
                       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
-                    <score-selector
+                        class="mr-2"
-                      :score-value="entry.rating"
+                        variant="outline-danger"
-                      v-on:newselection="
+                        size="sm"
-                        entry.rating = $event;
+                        v-on:click="deleteEntry(index, entryIndex)"
-                        updateTotals();
+                        v-b-tooltip.hover
-                      "
+                        title="Delete this entry"
-                    ></score-selector>
+                        >X</b-button
+                      >
+                      <score-selector
+                        :score-value="entry.rating"
+                        v-on:newselection="
+                          entry.rating = $event;
+                          updateTotals();
+                        "
+                      ></score-selector>
                     </div>
                   </b-col>
                   <b-col cols="8">
@@ -336,7 +343,7 @@ export default {
     },
     deleteEntry: function(scenarioIndex, entryIndex) {
       this.$delete(this.scenarios[scenarioIndex].entries, entryIndex);
-      if(this.scenarios[scenarioIndex].entries.length === 0) {
+      if (this.scenarios[scenarioIndex].entries.length === 0) {
         this.addAnotherEntry(this.scenarios[scenarioIndex]);
       }
       this.updateTotals();
@@ -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 */