From 5089e36faf4f6e21c6e60c8ff1bc9de297f0c402 Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Thu, 11 Oct 2018 13:55:45 +0100
Subject: [PATCH] Observation entry now only possible if store values have been
 setup.

---
 frontend/src/views/Observation.vue | 202 +++++++++++++++--------------
 1 file changed, 108 insertions(+), 94 deletions(-)

diff --git a/frontend/src/views/Observation.vue b/frontend/src/views/Observation.vue
index afec97a..31de5e7 100644
--- a/frontend/src/views/Observation.vue
+++ b/frontend/src/views/Observation.vue
@@ -1,106 +1,120 @@
 <template>
     <b-container>
-        <h3>
-            <v-icon name="tag" scale="1.5"/>
-            {{type}}/{{description}}
-        </h3>
-        <b-container class="sidebar">
-            <b-row align-v="center" class="sidebar-vert-padding">
-                <b-col class="centered-image">
-                    <img src="../assets/Monitoring.svg" class="image-opacity"/>
-                    <div class="image-centered-text">{{ totals[0] }}</div>
-                </b-col>
-            </b-row>
-            <b-row align-v="center" class="sidebar-vert-padding">
-                <b-col class="centered-image">
-                    <img src="../assets/Control.svg" class="image-opacity"/>
-                    <div class="image-centered-text">{{ totals[1] }}</div>
-                </b-col>
-            </b-row>
-            <b-row align-v="center" class="sidebar-vert-padding">
-                <b-col class="centered-image">
-                    <img src="../assets/Conservatism.svg" class="image-opacity"/>
-                    <div class="image-centered-text">{{ totals[2] }}</div>
-                </b-col>
-            </b-row>
-            <b-row align-v="center" class="sidebar-vert-padding">
-                <b-col class="centered-image">
-                    <img src="../assets/Teamwork.svg" class="image-opacity"/>
-                    <div class="image-centered-text">{{ totals[3] }}</div>
-                </b-col>
-            </b-row>
-            <b-row align-v="center">
-                <b-col class="centered-image">
-                    <img src="../assets/Knowledge.svg" class="image-opacity"/>
-                    <div class="image-centered-text">{{ totals[4] }}</div>
-                </b-col>
-            </b-row>
-        </b-container>
-        <b-form @submit="onSubmit" id="submission-form" novalidate>
-            <b-container v-for="(item, index) in observations" v-bind:key="index" class="border bottom-buffer">
-                <b-row class="top-buffer">
-                    <b-col cols="3">
-                        <b-form-group label="Type">
-                            <b-form-select v-bind:value="item.type" @change="changeType(index, $event)" required>
-                                <option :value=null>Please select an option</option>
-                                <option value="MONITORING">Monitoring</option>
-                                <option value="CONTROL">Control</option>
-                                <option value="CONSERVATISM">Conservatism</option>
-                                <option value="TEAMWORK">Teamwork</option>
-                                <option value="KNOWLEDGE">Knowledge</option>
-                            </b-form-select>
-                        </b-form-group>
-                        <b-form-group label="Rating">
-                            <b-form-radio-group buttons button-variant="outline-info" size="lg"
-                                                v-bind:value="item.rating" @change="changeRating(index, $event)"
-                                                required>
-                                <b-form-radio value=1>1</b-form-radio>
-                                <b-form-radio value=2>2</b-form-radio>
-                                <b-form-radio value=3>3</b-form-radio>
-                                <b-form-radio value=4>4</b-form-radio>
-                                <b-form-radio value=5>5</b-form-radio>
-                            </b-form-radio-group>
-                        </b-form-group>
-                    </b-col>
-                    <b-col>
-                        <b-form-group label="Strengths">
-                            <b-form-textarea v-model="item.strengths" placeholder="Enter Strengths" :rows="3"
-                                             :max-rows="6" required no-resize>
-                            </b-form-textarea>
-                        </b-form-group>
-                        <b-form-group label="Areas of Improvement">
-                            <b-form-textarea v-model="item.improvements" placeholder="Enter Areas of Improvement"
-                                             :rows="3" :max-rows="6" required no-resize>
-                            </b-form-textarea>
-                        </b-form-group>
+        <b-container v-if="description != null && type != null && whom != null && site != null && tutors != null">
+            <h3>
+                <v-icon name="tag" scale="1.5"/>
+                {{type}}/{{description}}
+            </h3>
+            <b-container class="sidebar">
+                <b-row align-v="center" class="sidebar-vert-padding">
+                    <b-col class="centered-image">
+                        <img src="../assets/Monitoring.svg" class="image-opacity"/>
+                        <div class="image-centered-text">{{ totals[0] }}</div>
                     </b-col>
                 </b-row>
-                <b-row class="bottom-buffer">
-                    <b-col>
-                        <b-button v-on:click="deleteObservation(index)">Delete</b-button>
+                <b-row align-v="center" class="sidebar-vert-padding">
+                    <b-col class="centered-image">
+                        <img src="../assets/Control.svg" class="image-opacity"/>
+                        <div class="image-centered-text">{{ totals[1] }}</div>
+                    </b-col>
+                </b-row>
+                <b-row align-v="center" class="sidebar-vert-padding">
+                    <b-col class="centered-image">
+                        <img src="../assets/Conservatism.svg" class="image-opacity"/>
+                        <div class="image-centered-text">{{ totals[2] }}</div>
+                    </b-col>
+                </b-row>
+                <b-row align-v="center" class="sidebar-vert-padding">
+                    <b-col class="centered-image">
+                        <img src="../assets/Teamwork.svg" class="image-opacity"/>
+                        <div class="image-centered-text">{{ totals[3] }}</div>
+                    </b-col>
+                </b-row>
+                <b-row align-v="center">
+                    <b-col class="centered-image">
+                        <img src="../assets/Knowledge.svg" class="image-opacity"/>
+                        <div class="image-centered-text">{{ totals[4] }}</div>
                     </b-col>
                 </b-row>
             </b-container>
-            <b-row align-h="center">
-                <b-col cols="1">
-                    <b-button type="submit" variant="primary">Submit</b-button>
-                </b-col>
-                <b-col offset="1" cols="1">
-                    <b-button v-on:click="this.addAnotherObservation">Add Entry</b-button>
+            <b-form @submit="onSubmit" id="submission-form" novalidate>
+                <b-container v-for="(item, index) in observations" v-bind:key="index" class="border bottom-buffer">
+                    <b-row class="top-buffer">
+                        <b-col cols="3">
+                            <b-form-group label="Type">
+                                <b-form-select v-bind:value="item.type" @change="changeType(index, $event)" required>
+                                    <option :value=null>Please select an option</option>
+                                    <option value="MONITORING">Monitoring</option>
+                                    <option value="CONTROL">Control</option>
+                                    <option value="CONSERVATISM">Conservatism</option>
+                                    <option value="TEAMWORK">Teamwork</option>
+                                    <option value="KNOWLEDGE">Knowledge</option>
+                                </b-form-select>
+                            </b-form-group>
+                            <b-form-group label="Rating">
+                                <b-form-radio-group buttons button-variant="outline-info" size="lg"
+                                                    v-bind:value="item.rating" @change="changeRating(index, $event)"
+                                                    required>
+                                    <b-form-radio value=1>1</b-form-radio>
+                                    <b-form-radio value=2>2</b-form-radio>
+                                    <b-form-radio value=3>3</b-form-radio>
+                                    <b-form-radio value=4>4</b-form-radio>
+                                    <b-form-radio value=5>5</b-form-radio>
+                                </b-form-radio-group>
+                            </b-form-group>
+                        </b-col>
+                        <b-col>
+                            <b-form-group label="Strengths">
+                                <b-form-textarea v-model="item.strengths" placeholder="Enter Strengths" :rows="3"
+                                                 :max-rows="6" required no-resize>
+                                </b-form-textarea>
+                            </b-form-group>
+                            <b-form-group label="Areas of Improvement">
+                                <b-form-textarea v-model="item.improvements" placeholder="Enter Areas of Improvement"
+                                                 :rows="3" :max-rows="6" required no-resize>
+                                </b-form-textarea>
+                            </b-form-group>
+                        </b-col>
+                    </b-row>
+                    <b-row class="bottom-buffer">
+                        <b-col>
+                            <b-button v-on:click="deleteObservation(index)">Delete</b-button>
+                        </b-col>
+                    </b-row>
+                </b-container>
+                <b-row align-h="center">
+                    <b-col cols="1">
+                        <b-button type="submit" variant="primary">Submit</b-button>
+                    </b-col>
+                    <b-col offset="1" cols="1">
+                        <b-button v-on:click="this.addAnotherObservation">Add Entry</b-button>
+                    </b-col>
+                </b-row>
+            </b-form>
+            <b-modal id="submissionModal"
+                     ref="submissionModal"
+                     title="Enter password to confirm submission"
+                     @ok="handleOk"
+                     @shown="clearPassword">
+                <form @submit.stop.prevent="handleSubmit">
+                    <b-form-input type="password"
+                                  placeholder="Enter password"
+                                  v-model="submitPassword"></b-form-input>
+                </form>
+            </b-modal>
+        </b-container>
+        <b-container v-else>
+            <b-row>
+                <b-col>
+                    <h2>Error</h2>
                 </b-col>
             </b-row>
-        </b-form>
-        <b-modal id="submissionModal"
-                 ref="submissionModal"
-                 title="Enter password to confirm submission"
-                 @ok="handleOk"
-                 @shown="clearPassword">
-            <form @submit.stop.prevent="handleSubmit">
-                <b-form-input type="password"
-                              placeholder="Enter password"
-                              v-model="submitPassword"></b-form-input>
-            </form>
-        </b-modal>
+            <b-row>
+                <b-col>
+                    <p>An Observation session has not been correctly setup, please try again.</p>
+                </b-col>
+            </b-row>
+        </b-container>
     </b-container>
 </template>