From ecd3b6772c2ca2d2e61a67ee916222b5f575b231 Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Thu, 1 Nov 2018 10:08:41 +0000
Subject: [PATCH] Changed formatting of persons list, added data loss warning.

---
 frontend/src/views/Observation.vue | 14 ++++++--------
 frontend/src/views/StartNew.vue    |  2 +-
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/Observation.vue b/frontend/src/views/Observation.vue
index 994d222..e92d351 100644
--- a/frontend/src/views/Observation.vue
+++ b/frontend/src/views/Observation.vue
@@ -64,13 +64,9 @@
                     <b-button variant="outline-secondary" v-on:click="addPerson()">+</b-button>
                 </b-col>
             </b-row>
-            <b-row>
-                <b-col>
-                    <b-list-group>
-                        <b-list-group-item v-if="persons === [] || persons == null">Enter your name(s)!</b-list-group-item>
-                        <b-list-group-item v-bind:key="index" v-for="(item, index) in persons">{{ item }}&nbsp;<a v-on:click="deletePerson(index)"><v-icon name="times-circle"/></a></b-list-group-item>
-                    </b-list-group>
-                </b-col>
+            <b-row align-v="center">
+                <b-col class="mt-1" v-if="persons == null || persons.length === 0">Enter your name(s) one at a time!</b-col>
+                <b-col class="mt-1" cols="2" v-bind:key="index" v-for="(item, index) in persons">{{ item }}&nbsp;<a v-on:click="deletePerson(index)"><v-icon name="times-circle"/></a></b-col>
             </b-row>
             <br />
             <b-form @submit="onSubmit" id="submission-form" novalidate>
@@ -135,13 +131,14 @@
                      title="Enter password to confirm submission"
                      @ok="handleOk"
                      @shown="clearPassword">
-                <b-alert v-if="persons.length === 0" variant="warning" show>No individual names assigned to this observation.</b-alert>
+                <b-alert v-if="persons == null || persons.length === 0" variant="warning" show><v-icon name="exclamation-circle" scale="1.5" />&nbsp;No individual names assigned to this observation.</b-alert>
                 <form @submit.stop.prevent="handleSubmit">
                     <b-form-input type="password"
                                   placeholder="Enter password"
                                   v-model="submitPassword"></b-form-input>
                 </form>
             </b-modal>
+            <p class="mt-3"><v-icon name="exclamation-circle" scale="1.5" color="gold"/>&nbsp;<i>Leaving this page before submitting will delete all entered data.</i></p>
         </b-container>
         <b-container v-else>
             <b-row>
@@ -163,6 +160,7 @@ import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap-vue/dist/bootstrap-vue.css";
 import "vue-awesome/icons/tag";
 import "vue-awesome/icons/times-circle";
+import "vue-awesome/icons/exclamation-circle";
 import { mapState } from "vuex";
 import Vue from "vue";
 
diff --git a/frontend/src/views/StartNew.vue b/frontend/src/views/StartNew.vue
index 54a1378..17487ee 100644
--- a/frontend/src/views/StartNew.vue
+++ b/frontend/src/views/StartNew.vue
@@ -34,7 +34,7 @@
                 <b-row align-h="center">
                     <b-col>
                         <b-form-group label="Who">
-                            <b-form-input :value="whom" @input="setWhom" type="text"
+                            <b-form-input :value="whom" @input="setWhom" type="text" placeholder="i.e. shift name, individual names will be entered later"
                                           style="text-align:center;" required></b-form-input>
                         </b-form-group>
                     </b-col>