Changed formatting of persons list, added data loss warning.

This commit is contained in:
neviyn 2018-11-01 10:08:41 +00:00
parent 2981d9aa3a
commit ecd3b6772c
2 changed files with 7 additions and 9 deletions

View File

@ -64,13 +64,9 @@
<b-button variant="outline-secondary" v-on:click="addPerson()">+</b-button> <b-button variant="outline-secondary" v-on:click="addPerson()">+</b-button>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row align-v="center">
<b-col> <b-col class="mt-1" v-if="persons == null || persons.length === 0">Enter your name(s) one at a time!</b-col>
<b-list-group> <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-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> </b-row>
<br /> <br />
<b-form @submit="onSubmit" id="submission-form" novalidate> <b-form @submit="onSubmit" id="submission-form" novalidate>
@ -135,13 +131,14 @@
title="Enter password to confirm submission" title="Enter password to confirm submission"
@ok="handleOk" @ok="handleOk"
@shown="clearPassword"> @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"> <form @submit.stop.prevent="handleSubmit">
<b-form-input type="password" <b-form-input type="password"
placeholder="Enter password" placeholder="Enter password"
v-model="submitPassword"></b-form-input> v-model="submitPassword"></b-form-input>
</form> </form>
</b-modal> </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>
<b-container v-else> <b-container v-else>
<b-row> <b-row>
@ -163,6 +160,7 @@ import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css"; import "bootstrap-vue/dist/bootstrap-vue.css";
import "vue-awesome/icons/tag"; import "vue-awesome/icons/tag";
import "vue-awesome/icons/times-circle"; import "vue-awesome/icons/times-circle";
import "vue-awesome/icons/exclamation-circle";
import { mapState } from "vuex"; import { mapState } from "vuex";
import Vue from "vue"; import Vue from "vue";

View File

@ -34,7 +34,7 @@
<b-row align-h="center"> <b-row align-h="center">
<b-col> <b-col>
<b-form-group label="Who"> <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> style="text-align:center;" required></b-form-input>
</b-form-group> </b-form-group>
</b-col> </b-col>