diff --git a/frontend/src/assets/Conservatism.svg b/frontend/src/assets/Conservatism.svg
new file mode 100644
index 0000000..23bee17
--- /dev/null
+++ b/frontend/src/assets/Conservatism.svg
@@ -0,0 +1,53 @@
+
+
diff --git a/frontend/src/assets/Control.svg b/frontend/src/assets/Control.svg
new file mode 100644
index 0000000..3552f3e
--- /dev/null
+++ b/frontend/src/assets/Control.svg
@@ -0,0 +1,53 @@
+
+
diff --git a/frontend/src/assets/Knowledge.svg b/frontend/src/assets/Knowledge.svg
new file mode 100644
index 0000000..c9484f3
--- /dev/null
+++ b/frontend/src/assets/Knowledge.svg
@@ -0,0 +1,53 @@
+
+
diff --git a/frontend/src/assets/Monitoring.svg b/frontend/src/assets/Monitoring.svg
new file mode 100644
index 0000000..80c7a3f
--- /dev/null
+++ b/frontend/src/assets/Monitoring.svg
@@ -0,0 +1,53 @@
+
+
diff --git a/frontend/src/assets/Teamwork.svg b/frontend/src/assets/Teamwork.svg
new file mode 100644
index 0000000..1b7c39c
--- /dev/null
+++ b/frontend/src/assets/Teamwork.svg
@@ -0,0 +1,53 @@
+
+
diff --git a/frontend/src/views/Observation.vue b/frontend/src/views/Observation.vue
index 43ecd7a..08ba892 100644
--- a/frontend/src/views/Observation.vue
+++ b/frontend/src/views/Observation.vue
@@ -1,11 +1,43 @@
+
-
+
@@ -15,22 +47,22 @@
-
- 1
- 2
- 3
- 4
- 5
+
+ 1
+ 2
+ 3
+ 4
+ 5
-
+
-
+
@@ -63,7 +95,8 @@ export default {
strengths: null,
improvements: null
}
- ]
+ ],
+ totals: [0, 0, 0, 0, 0]
};
},
computed: {
@@ -89,12 +122,57 @@ export default {
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");
- console.log(form.checkValidity());
if (form.checkValidity()) {
Vue.axios
.post("/api/observation", {
@@ -129,4 +207,40 @@ export default {
.bottom-buffer {
margin-bottom: 10px;
}
+.image-centered-text {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 50px;
+ color: white;
+ text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+}
+.image-opacity {
+ opacity: 0.5;
+}
+.centered-image {
+ position: relative;
+ text-align: center;
+}
+.sidebar {
+ width: 160px; /* Set the width of the sidebar */
+ position: fixed; /* Fixed Sidebar (stay in place on scroll) */
+ z-index: 1; /* Stay on top */
+ top: 20%; /* Stay at the top */
+ left: 0;
+ overflow-x: hidden; /* Disable horizontal scroll */
+ padding-top: 20px;
+}
+.sidebar-vert-padding {
+ margin-bottom: 25%;
+}
+@media screen and (max-height: 500px) {
+ .sidebar {
+ top: 0; /* Stay at the top */
+ }
+}
+img {
+ height: 80px;
+}
+ 
+ 
+ 
+ 
+