From 2b1966e5057bb384bc032c731073318c7019a936 Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Thu, 11 Oct 2018 08:53:39 +0100
Subject: [PATCH] Added overall scores to the top of each viewed observation.

---
 frontend/src/views/Observation.vue      |  2 +-
 frontend/src/views/ViewObservations.vue | 41 +++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/Observation.vue b/frontend/src/views/Observation.vue
index 6e3b881..afec97a 100644
--- a/frontend/src/views/Observation.vue
+++ b/frontend/src/views/Observation.vue
@@ -257,7 +257,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .top-buffer {
   margin-top: 10px;
 }
diff --git a/frontend/src/views/ViewObservations.vue b/frontend/src/views/ViewObservations.vue
index 62a89fb..7595c01 100644
--- a/frontend/src/views/ViewObservations.vue
+++ b/frontend/src/views/ViewObservations.vue
@@ -52,6 +52,28 @@
                 <b-tabs pills card vertical>
                     <b-tab v-for="(observation, index) in observationData" v-bind:key="index">
                         <p slot="title">{{ observation.date }}<br/>{{ observation.whom }} {{ observation.type }}<br/>{{ observation.observed }}</p>
+                        <b-row>
+                            <b-col class="centered-image">
+                                <img src="../assets/Monitoring.svg" class="image-opacity"/>
+                                <div class="image-centered-text">{{ observation.monitoring }}</div>
+                            </b-col>
+                            <b-col class="centered-image">
+                                <img src="../assets/Control.svg" class="image-opacity"/>
+                                <div class="image-centered-text">{{ observation.control }}</div>
+                            </b-col>
+                            <b-col class="centered-image">
+                                <img src="../assets/Conservatism.svg" class="image-opacity"/>
+                                <div class="image-centered-text">{{ observation.conservatism }}</div>
+                            </b-col>
+                            <b-col class="centered-image">
+                                <img src="../assets/Teamwork.svg" class="image-opacity"/>
+                                <div class="image-centered-text">{{ observation.teamwork }}</div>
+                            </b-col>
+                            <b-col class="centered-image">
+                                <img src="../assets/Knowledge.svg" class="image-opacity"/>
+                                <div class="image-centered-text">{{ observation.knowledge }}</div>
+                            </b-col>
+                        </b-row>
                         <div v-for="(entry, index2) in observation.entries" v-bind:key="index2">
                             <p>{{ entry.type }} - {{ entry.rating }}</p>
                             <b-form-group label="Strengths">
@@ -161,3 +183,22 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.image-opacity {
+    opacity: 0.5;
+}
+.centered-image {
+    position: relative;
+    text-align: center;
+}
+.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;
+}
+</style>