Changed observation entry to a more scenario based format.
This commit is contained in:
parent
2697926242
commit
cb58720c23
@ -1,117 +1,222 @@
|
|||||||
<template>
|
<template>
|
||||||
<b-container fluid>
|
<b-container fluid>
|
||||||
<b-container v-if="description != null && type != null && whom != null && site != null && tutors != null" fluid style="padding-left: 130px;">
|
<!-- <b-container v-if="description != null && type != null && whom != null && site != null && tutors != null" fluid style="padding-left: 130px;"> -->
|
||||||
|
<b-container fluid style="padding-left: 130px;">
|
||||||
<h3>
|
<h3>
|
||||||
<v-icon name="tag" scale="1.5"/>
|
<v-icon name="tag" scale="1.5"/>
|
||||||
{{type}} / {{description}}
|
{{type}} / {{whom}}
|
||||||
</h3>
|
</h3>
|
||||||
<br />
|
|
||||||
<b-container class="sidebar">
|
<b-container class="sidebar">
|
||||||
<b-row align-v="center" class="sidebar-vert-padding" v-if="totals[0] > 0">
|
<b-row align-v="center" class="sidebar-vert-padding" v-if="totals[0] > 0">
|
||||||
<b-col class="centered-image">
|
<b-col class="centered-image">
|
||||||
<img src="../assets/Monitoring.svg" class="image-opacity"/>
|
<img src="../assets/Monitoring.svg" class="image-opacity" v-bind:class="{ scorewarning: totals[0] < 2.5 }"/>
|
||||||
<div class="image-centered-text">{{ totals[0] }}</div>
|
<div class="image-centered-text">{{ totals[0] }}</div>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
<b-row align-v="center" class="sidebar-vert-padding" v-if="totals[1] > 0">
|
<b-row align-v="center" class="sidebar-vert-padding" v-if="totals[1] > 0">
|
||||||
<b-col class="centered-image">
|
<b-col class="centered-image">
|
||||||
<img src="../assets/Control.svg" class="image-opacity"/>
|
<img src="../assets/Control.svg" class="image-opacity" v-bind:class="{ scorewarning: totals[1] < 2.5 }"/>
|
||||||
<div class="image-centered-text">{{ totals[1] }}</div>
|
<div class="image-centered-text">{{ totals[1] }}</div>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
<b-row align-v="center" class="sidebar-vert-padding" v-if="totals[2] > 0">
|
<b-row align-v="center" class="sidebar-vert-padding" v-if="totals[2] > 0">
|
||||||
<b-col class="centered-image">
|
<b-col class="centered-image">
|
||||||
<img src="../assets/Control.svg" class="image-opacity"/>
|
<img src="../assets/Control.svg" class="image-opacity" v-bind:class="{ scorewarning: totals[2] < 2.5 }"/>
|
||||||
<div class="image-centered-text">{{ totals[2] }}</div>
|
<div class="image-centered-text">{{ totals[2] }}</div>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
<b-row align-v="center" class="sidebar-vert-padding" v-if="totals[3] > 0">
|
<b-row align-v="center" class="sidebar-vert-padding" v-if="totals[3] > 0">
|
||||||
<b-col class="centered-image">
|
<b-col class="centered-image">
|
||||||
<img src="../assets/Conservatism.svg" class="image-opacity"/>
|
<img src="../assets/Conservatism.svg" class="image-opacity" v-bind:class="{ scorewarning: totals[3] < 2.5 }"/>
|
||||||
<div class="image-centered-text">{{ totals[3] }}</div>
|
<div class="image-centered-text">{{ totals[3] }}</div>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
<b-row align-v="center" class="sidebar-vert-padding" v-if="totals[4] > 0">
|
<b-row align-v="center" class="sidebar-vert-padding" v-if="totals[4] > 0">
|
||||||
<b-col class="centered-image">
|
<b-col class="centered-image">
|
||||||
<img src="../assets/Teamwork.svg" class="image-opacity"/>
|
<img src="../assets/Teamwork.svg" class="image-opacity" v-bind:class="{ scorewarning: totals[4] < 2.5 }"/>
|
||||||
<div class="image-centered-text">{{ totals[4] }}</div>
|
<div class="image-centered-text">{{ totals[4] }}</div>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
<b-row align-v="center" class="sidebar-vert-padding" v-if="totals[5] > 0">
|
<b-row align-v="center" class="sidebar-vert-padding" v-if="totals[5] > 0">
|
||||||
<b-col class="centered-image">
|
<b-col class="centered-image">
|
||||||
<img src="../assets/Teamwork.svg" class="image-opacity"/>
|
<img src="../assets/Teamwork.svg" class="image-opacity" v-bind:class="{ scorewarning: totals[5] < 2.5 }"/>
|
||||||
<div class="image-centered-text">{{ totals[5] }}</div>
|
<div class="image-centered-text">{{ totals[5] }}</div>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
<b-row align-v="center" class="sidebar-vert-padding" v-if="totals[6] > 0">
|
<b-row align-v="center" class="sidebar-vert-padding" v-if="totals[6] > 0">
|
||||||
<b-col class="centered-image">
|
<b-col class="centered-image">
|
||||||
<img src="../assets/Teamwork.svg" class="image-opacity"/>
|
<img src="../assets/Teamwork.svg" class="image-opacity" v-bind:class="{ scorewarning: totals[6] < 2.5 }"/>
|
||||||
<div class="image-centered-text">{{ totals[6] }}</div>
|
<div class="image-centered-text">{{ totals[6] }}</div>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
<b-row align-v="center" class="sidebar-vert-padding" v-if="totals[7] > 0">
|
<b-row align-v="center" class="sidebar-vert-padding" v-if="totals[7] > 0">
|
||||||
<b-col class="centered-image">
|
<b-col class="centered-image">
|
||||||
<img src="../assets/Knowledge.svg" class="image-opacity"/>
|
<img src="../assets/Knowledge.svg" class="image-opacity" v-bind:class="{ scorewarning: totals[7] < 2.5 }"/>
|
||||||
<div class="image-centered-text">{{ totals[7] }}</div>
|
<div class="image-centered-text">{{ totals[7] }}</div>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
</b-container>
|
</b-container>
|
||||||
<b-row>
|
|
||||||
<b-col>
|
|
||||||
<b-form-input v-model="personInput" v-on:keyup.enter.native="addPerson()" placeholder="Enter a name."></b-form-input>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="1">
|
|
||||||
<b-button variant="outline-secondary" v-on:click="addPerson()">+</b-button>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<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 }} <a v-on:click="deletePerson(index)"><v-icon name="times-circle"/></a></b-col>
|
|
||||||
</b-row>
|
|
||||||
<br />
|
<br />
|
||||||
<b-form @submit="onSubmit" id="submission-form" novalidate>
|
<b-form @submit="onSubmit" id="submission-form" novalidate>
|
||||||
<b-container v-for="(item, index) in observations" v-bind:key="index" class="border bottom-buffer" fluid>
|
<b-container v-for="(item, index) in scenarios" v-bind:key="index" class="border bottom-buffer" fluid>
|
||||||
<b-row class="top-buffer">
|
<b-row>
|
||||||
<b-col cols="2">
|
<b-col>
|
||||||
<b-form-group label="Type">
|
<b-form-input v-model="item.title" type="text" placeholder="Enter scenario description."></b-form-input>
|
||||||
<b-form-select v-bind:value="item.type" @change="changeType(index, $event)" required>
|
</b-col>
|
||||||
<option :value=null>Please select an option</option>
|
<b-col cols="1">
|
||||||
<option value="MONITORING">Monitoring</option>
|
<b-button v-on:click="deleteObservation(index)" variant="danger"><b>Delete</b></b-button>
|
||||||
<option value="CONTROL_PROCEDURAL">Control Procedural</option>
|
</b-col>
|
||||||
<option value="CONTROL">Control</option>
|
</b-row>
|
||||||
<option value="CONSERVATISM">Conservatism</option>
|
<b-row>
|
||||||
<option value="TEAMWORK_COMMUNICATIONS">Teamwork Communications</option>
|
<b-col cols="6" class="border">
|
||||||
<option value="TEAMWORK_LEADERSHIP">Teamwork Leadership</option>
|
<b-row>
|
||||||
<option value="TEAMWORK_WORKLOAD">Teamwork Workload</option>
|
<b-col cols="4">
|
||||||
<option value="KNOWLEDGE">Knowledge</option>
|
<h5>Monitoring</h5>
|
||||||
</b-form-select>
|
<b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="item.monitoring.rating" @change="item.monitoring.rating = $event; updateTotals();" required>
|
||||||
</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 button-variant="1" value=1>1</b-form-radio>
|
<b-form-radio button-variant="1" value=1>1</b-form-radio>
|
||||||
<b-form-radio button-variant="2" value=2>2</b-form-radio>
|
<b-form-radio button-variant="2" value=2>2</b-form-radio>
|
||||||
<b-form-radio button-variant="3" value=3>3</b-form-radio>
|
<b-form-radio button-variant="3" value=3>3</b-form-radio>
|
||||||
<b-form-radio button-variant="4" value=4>4</b-form-radio>
|
<b-form-radio button-variant="4" value=4>4</b-form-radio>
|
||||||
<b-form-radio button-variant="5" value=5>5</b-form-radio>
|
<b-form-radio button-variant="5" value=5>5</b-form-radio>
|
||||||
</b-form-radio-group>
|
</b-form-radio-group>
|
||||||
</b-form-group>
|
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col>
|
<b-col cols="8">
|
||||||
<b-form-group label="Strengths">
|
<b-form-textarea v-model="item.monitoring.strengths" placeholder="Strengths" :rows="1" :max-rows="2" no-resize class="strength"></b-form-textarea>
|
||||||
<b-form-textarea v-model="item.strengths" placeholder="Enter Strengths" :rows="1"
|
<b-form-textarea v-model="item.monitoring.improvements" placeholder="AFIs" :rows="1" :max-rows="2" no-resize class="afi"></b-form-textarea>
|
||||||
:max-rows="2" 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="1" :max-rows="2" no-resize>
|
|
||||||
</b-form-textarea>
|
|
||||||
</b-form-group>
|
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="1" align-self="center">
|
</b-row>
|
||||||
<b-button v-on:click="deleteObservation(index)">Delete</b-button>
|
</b-col>
|
||||||
|
<b-col cols="6" class="border">
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="4">
|
||||||
|
<h5>Control Procedural</h5>
|
||||||
|
<b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="item.controlProcedural.rating" @change="item.controlProcedural.rating = $event; updateTotals();" required>
|
||||||
|
<b-form-radio button-variant="1" value=1>1</b-form-radio>
|
||||||
|
<b-form-radio button-variant="2" value=2>2</b-form-radio>
|
||||||
|
<b-form-radio button-variant="3" value=3>3</b-form-radio>
|
||||||
|
<b-form-radio button-variant="4" value=4>4</b-form-radio>
|
||||||
|
<b-form-radio button-variant="5" value=5>5</b-form-radio>
|
||||||
|
</b-form-radio-group>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="8">
|
||||||
|
<b-form-textarea v-model="item.controlProcedural.strengths" placeholder="Strengths" :rows="1" :max-rows="2" no-resize class="strength"></b-form-textarea>
|
||||||
|
<b-form-textarea v-model="item.controlProcedural.improvements" placeholder="AFIs" :rows="1" :max-rows="2" no-resize class="afi"></b-form-textarea>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="6" class="border">
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="4">
|
||||||
|
<h5>Control</h5>
|
||||||
|
<b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="item.control.rating" @change="item.control.rating = $event; updateTotals();" required>
|
||||||
|
<b-form-radio button-variant="1" value=1>1</b-form-radio>
|
||||||
|
<b-form-radio button-variant="2" value=2>2</b-form-radio>
|
||||||
|
<b-form-radio button-variant="3" value=3>3</b-form-radio>
|
||||||
|
<b-form-radio button-variant="4" value=4>4</b-form-radio>
|
||||||
|
<b-form-radio button-variant="5" value=5>5</b-form-radio>
|
||||||
|
</b-form-radio-group>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="8">
|
||||||
|
<b-form-textarea v-model="item.control.strengths" placeholder="Strengths" :rows="1" :max-rows="2" no-resize class="strength"></b-form-textarea>
|
||||||
|
<b-form-textarea v-model="item.control.improvements" placeholder="AFIs" :rows="1" :max-rows="2" no-resize class="afi"></b-form-textarea>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="6" class="border">
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="4">
|
||||||
|
<h5>Conservatism</h5>
|
||||||
|
<b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="item.conservatism.rating" @change="item.conservatism.rating = $event; updateTotals();" required>
|
||||||
|
<b-form-radio button-variant="1" value=1>1</b-form-radio>
|
||||||
|
<b-form-radio button-variant="2" value=2>2</b-form-radio>
|
||||||
|
<b-form-radio button-variant="3" value=3>3</b-form-radio>
|
||||||
|
<b-form-radio button-variant="4" value=4>4</b-form-radio>
|
||||||
|
<b-form-radio button-variant="5" value=5>5</b-form-radio>
|
||||||
|
</b-form-radio-group>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="8">
|
||||||
|
<b-form-textarea v-model="item.conservatism.strengths" placeholder="Strengths" :rows="1" :max-rows="2" no-resize class="strength"></b-form-textarea>
|
||||||
|
<b-form-textarea v-model="item.conservatism.improvements" placeholder="AFIs" :rows="1" :max-rows="2" no-resize class="afi"></b-form-textarea>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="6" class="border">
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="4">
|
||||||
|
<h5>Teamwork Communications</h5>
|
||||||
|
<b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="item.teamworkCommunications.rating" @change="item.teamworkCommunications.rating = $event; updateTotals();" required>
|
||||||
|
<b-form-radio button-variant="1" value=1>1</b-form-radio>
|
||||||
|
<b-form-radio button-variant="2" value=2>2</b-form-radio>
|
||||||
|
<b-form-radio button-variant="3" value=3>3</b-form-radio>
|
||||||
|
<b-form-radio button-variant="4" value=4>4</b-form-radio>
|
||||||
|
<b-form-radio button-variant="5" value=5>5</b-form-radio>
|
||||||
|
</b-form-radio-group>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="8">
|
||||||
|
<b-form-textarea v-model="item.teamworkCommunications.strengths" placeholder="Strengths" :rows="1" :max-rows="2" no-resize class="strength"></b-form-textarea>
|
||||||
|
<b-form-textarea v-model="item.teamworkCommunications.improvements" placeholder="AFIs" :rows="1" :max-rows="2" no-resize class="afi"></b-form-textarea>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="6" class="border">
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="4">
|
||||||
|
<h5>Teamwork Leadership</h5>
|
||||||
|
<b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="item.teamworkLeadership.rating" @change="item.teamworkLeadership.rating = $event; updateTotals();" required>
|
||||||
|
<b-form-radio button-variant="1" value=1>1</b-form-radio>
|
||||||
|
<b-form-radio button-variant="2" value=2>2</b-form-radio>
|
||||||
|
<b-form-radio button-variant="3" value=3>3</b-form-radio>
|
||||||
|
<b-form-radio button-variant="4" value=4>4</b-form-radio>
|
||||||
|
<b-form-radio button-variant="5" value=5>5</b-form-radio>
|
||||||
|
</b-form-radio-group>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="8">
|
||||||
|
<b-form-textarea v-model="item.teamworkLeadership.strengths" placeholder="Strengths" :rows="1" :max-rows="2" no-resize class="strength"></b-form-textarea>
|
||||||
|
<b-form-textarea v-model="item.teamworkLeadership.improvements" placeholder="AFIs" :rows="1" :max-rows="2" no-resize class="afi"></b-form-textarea>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="6" class="border">
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="4">
|
||||||
|
<h5>Teamwork Workload</h5>
|
||||||
|
<b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="item.teamworkWorkload.rating" @change="item.teamworkWorkload.rating = $event; updateTotals();" required>
|
||||||
|
<b-form-radio button-variant="1" value=1>1</b-form-radio>
|
||||||
|
<b-form-radio button-variant="2" value=2>2</b-form-radio>
|
||||||
|
<b-form-radio button-variant="3" value=3>3</b-form-radio>
|
||||||
|
<b-form-radio button-variant="4" value=4>4</b-form-radio>
|
||||||
|
<b-form-radio button-variant="5" value=5>5</b-form-radio>
|
||||||
|
</b-form-radio-group>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="8">
|
||||||
|
<b-form-textarea v-model="item.teamworkWorkload.strengths" placeholder="Strengths" :rows="1" :max-rows="2" no-resize class="strength"></b-form-textarea>
|
||||||
|
<b-form-textarea v-model="item.teamworkWorkload.improvements" placeholder="AFIs" :rows="1" :max-rows="2" no-resize class="afi"></b-form-textarea>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="6" class="border">
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="4">
|
||||||
|
<h5>Knowledge</h5>
|
||||||
|
<b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="item.knowledge.rating" @change="item.knowledge.rating = $event; updateTotals();" required>
|
||||||
|
<b-form-radio button-variant="1" value=1>1</b-form-radio>
|
||||||
|
<b-form-radio button-variant="2" value=2>2</b-form-radio>
|
||||||
|
<b-form-radio button-variant="3" value=3>3</b-form-radio>
|
||||||
|
<b-form-radio button-variant="4" value=4>4</b-form-radio>
|
||||||
|
<b-form-radio button-variant="5" value=5>5</b-form-radio>
|
||||||
|
</b-form-radio-group>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="8">
|
||||||
|
<b-form-textarea v-model="item.knowledge.strengths" placeholder="Strengths" :rows="1" :max-rows="2" no-resize class="strength"></b-form-textarea>
|
||||||
|
<b-form-textarea v-model="item.knowledge.improvements" placeholder="AFIs" :rows="1" :max-rows="2" no-resize class="afi"></b-form-textarea>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
</b-container>
|
</b-container>
|
||||||
@ -120,7 +225,7 @@
|
|||||||
<b-button type="submit" variant="primary">Submit</b-button>
|
<b-button type="submit" variant="primary">Submit</b-button>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col offset="1" cols="1">
|
<b-col offset="1" cols="1">
|
||||||
<b-button v-on:click="this.addAnotherObservation">Add Entry</b-button>
|
<b-button v-on:click="this.addAnotherObservation">Add Scenario</b-button>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
</b-form>
|
</b-form>
|
||||||
@ -138,6 +243,7 @@
|
|||||||
</b-modal>
|
</b-modal>
|
||||||
<p class="mt-3"><v-icon name="exclamation-circle" scale="1.5" color="gold"/> <i>Leaving this page before submitting will delete all entered data.</i></p>
|
<p class="mt-3"><v-icon name="exclamation-circle" scale="1.5" color="gold"/> <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>
|
||||||
<b-col>
|
<b-col>
|
||||||
@ -150,6 +256,7 @@
|
|||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
</b-container>
|
</b-container>
|
||||||
|
-->
|
||||||
</b-container>
|
</b-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -167,18 +274,53 @@ export default {
|
|||||||
title: "Observation",
|
title: "Observation",
|
||||||
data: function() {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
observations: [
|
scenarios: [
|
||||||
{
|
{
|
||||||
type: null,
|
title: "",
|
||||||
|
monitoring: {
|
||||||
|
rating: null,
|
||||||
|
strengths: "",
|
||||||
|
improvements: ""
|
||||||
|
},
|
||||||
|
controlProcedural: {
|
||||||
|
rating: null,
|
||||||
|
strengths: "",
|
||||||
|
improvements: ""
|
||||||
|
},
|
||||||
|
control: {
|
||||||
|
rating: null,
|
||||||
|
strengths: "",
|
||||||
|
improvements: ""
|
||||||
|
},
|
||||||
|
conservatism: {
|
||||||
|
rating: null,
|
||||||
|
strengths: "",
|
||||||
|
improvements: ""
|
||||||
|
},
|
||||||
|
teamworkCommunications: {
|
||||||
|
rating: null,
|
||||||
|
strengths: "",
|
||||||
|
improvements: ""
|
||||||
|
},
|
||||||
|
teamworkLeadership: {
|
||||||
|
rating: null,
|
||||||
|
strengths: "",
|
||||||
|
improvements: ""
|
||||||
|
},
|
||||||
|
teamworkWorkload: {
|
||||||
|
rating: null,
|
||||||
|
strengths: "",
|
||||||
|
improvements: ""
|
||||||
|
},
|
||||||
|
knowledge: {
|
||||||
rating: null,
|
rating: null,
|
||||||
strengths: "",
|
strengths: "",
|
||||||
improvements: ""
|
improvements: ""
|
||||||
}
|
}
|
||||||
|
}
|
||||||
],
|
],
|
||||||
totals: [0, 0, 0, 0, 0, 0, 0, 0],
|
totals: [0, 0, 0, 0, 0, 0, 0, 0],
|
||||||
submitPassword: null,
|
submitPassword: null
|
||||||
persons: [],
|
|
||||||
personInput: null
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -186,11 +328,48 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
addAnotherObservation: function() {
|
addAnotherObservation: function() {
|
||||||
this.observations.push({
|
this.scenarios.push({
|
||||||
type: null,
|
title: "",
|
||||||
|
monitoring: {
|
||||||
rating: null,
|
rating: null,
|
||||||
strengths: "",
|
strengths: "",
|
||||||
improvements: ""
|
improvements: ""
|
||||||
|
},
|
||||||
|
controlProcedural: {
|
||||||
|
rating: null,
|
||||||
|
strengths: "",
|
||||||
|
improvements: ""
|
||||||
|
},
|
||||||
|
control: {
|
||||||
|
rating: null,
|
||||||
|
strengths: "",
|
||||||
|
improvements: ""
|
||||||
|
},
|
||||||
|
conservatism: {
|
||||||
|
rating: null,
|
||||||
|
strengths: "",
|
||||||
|
improvements: ""
|
||||||
|
},
|
||||||
|
teamworkCommunications: {
|
||||||
|
rating: null,
|
||||||
|
strengths: "",
|
||||||
|
improvements: ""
|
||||||
|
},
|
||||||
|
teamworkLeadership: {
|
||||||
|
rating: null,
|
||||||
|
strengths: "",
|
||||||
|
improvements: ""
|
||||||
|
},
|
||||||
|
teamworkWorkload: {
|
||||||
|
rating: null,
|
||||||
|
strengths: "",
|
||||||
|
improvements: ""
|
||||||
|
},
|
||||||
|
knowledge: {
|
||||||
|
rating: null,
|
||||||
|
strengths: "",
|
||||||
|
improvements: ""
|
||||||
|
}
|
||||||
});
|
});
|
||||||
Vue.nextTick(function() {
|
Vue.nextTick(function() {
|
||||||
window.scrollTo(
|
window.scrollTo(
|
||||||
@ -200,66 +379,54 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
deleteObservation: function(index) {
|
deleteObservation: function(index) {
|
||||||
this.observations.splice(index, 1);
|
this.$delete(this.scenarios, index);
|
||||||
if (this.observations.length === 0) {
|
if (this.scenarios.length === 0) {
|
||||||
this.addAnotherObservation();
|
this.addAnotherObservation();
|
||||||
}
|
}
|
||||||
this.updateTotals();
|
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() {
|
updateTotals: function() {
|
||||||
var iTotals = [0, 0, 0, 0, 0, 0, 0, 0];
|
var iTotals = [0, 0, 0, 0, 0, 0, 0, 0];
|
||||||
var counts = [0, 0, 0, 0, 0, 0, 0, 0];
|
var counts = [0, 0, 0, 0, 0, 0, 0, 0];
|
||||||
this.observations.forEach(function(element) {
|
this.scenarios.forEach(function(element) {
|
||||||
if (element.rating > 0) {
|
if (element.monitoring.rating) {
|
||||||
switch (element.type) {
|
iTotals[0] += parseInt(element.monitoring.rating);
|
||||||
case "MONITORING":
|
|
||||||
iTotals[0] += element.rating;
|
|
||||||
counts[0] += 1;
|
counts[0] += 1;
|
||||||
break;
|
|
||||||
case "CONTROL_PROCEDURAL":
|
|
||||||
iTotals[1] += element.rating;
|
|
||||||
counts[1] += 1;
|
|
||||||
break;
|
|
||||||
case "CONTROL":
|
|
||||||
iTotals[2] += element.rating;
|
|
||||||
counts[2] += 1;
|
|
||||||
break;
|
|
||||||
case "CONSERVATISM":
|
|
||||||
iTotals[3] += element.rating;
|
|
||||||
counts[3] += 1;
|
|
||||||
break;
|
|
||||||
case "TEAMWORK_COMMUNICATIONS":
|
|
||||||
iTotals[4] += element.rating;
|
|
||||||
counts[4] += 1;
|
|
||||||
break;
|
|
||||||
case "TEAMWORK_LEADERSHIP":
|
|
||||||
iTotals[5] += element.rating;
|
|
||||||
counts[5] += 1;
|
|
||||||
break;
|
|
||||||
case "TEAMWORK_WORKLOAD":
|
|
||||||
iTotals[6] += element.rating;
|
|
||||||
counts[6] += 1;
|
|
||||||
break;
|
|
||||||
case "KNOWLEDGE":
|
|
||||||
iTotals[7] += element.rating;
|
|
||||||
counts[7] += 1;
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
if (element.controlProcedural.rating) {
|
||||||
|
iTotals[1] += parseInt(element.controlProcedural.rating);
|
||||||
|
counts[1] += 1;
|
||||||
|
}
|
||||||
|
if (element.control.rating) {
|
||||||
|
iTotals[2] += parseInt(element.control.rating);
|
||||||
|
counts[2] += 1;
|
||||||
|
}
|
||||||
|
if (element.conservatism.rating) {
|
||||||
|
iTotals[3] += parseInt(element.conservatism.rating);
|
||||||
|
counts[3] += 1;
|
||||||
|
}
|
||||||
|
if (element.teamworkCommunications.rating) {
|
||||||
|
iTotals[4] += parseInt(element.teamworkCommunications.rating);
|
||||||
|
counts[4] += 1;
|
||||||
|
}
|
||||||
|
if (element.teamworkLeadership.rating) {
|
||||||
|
iTotals[5] += parseInt(element.teamworkLeadership.rating);
|
||||||
|
counts[5] += 1;
|
||||||
|
}
|
||||||
|
if (element.teamworkWorkload.rating) {
|
||||||
|
iTotals[6] += parseInt(element.teamworkWorkload.rating);
|
||||||
|
counts[6] += 1;
|
||||||
|
}
|
||||||
|
if (element.knowledge.rating) {
|
||||||
|
iTotals[7] += parseInt(element.knowledge.rating);
|
||||||
|
counts[7] += 1;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
for (var i = 0; i < iTotals.length; i++) {
|
for (var i = 0; i < iTotals.length; i++) {
|
||||||
if (counts[i] !== 0) {
|
if (counts[i] !== 0) {
|
||||||
this.totals[i] = (iTotals[i] / counts[i]).toFixed(1);
|
Vue.set(this.totals, i, (iTotals[i] / counts[i]).toFixed(1));
|
||||||
} else {
|
} else {
|
||||||
this.totals[i] = 0;
|
Vue.set(this.totals, i, 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -301,11 +468,9 @@ export default {
|
|||||||
{
|
{
|
||||||
site: this.site,
|
site: this.site,
|
||||||
tutors: this.tutors,
|
tutors: this.tutors,
|
||||||
observed: this.description,
|
|
||||||
whom: this.whom,
|
whom: this.whom,
|
||||||
type: this.type,
|
type: this.type,
|
||||||
persons: this.persons,
|
scenarios: JSON.parse(JSON.stringify(this.scenarios))
|
||||||
entries: JSON.parse(JSON.stringify(this.observations))
|
|
||||||
},
|
},
|
||||||
axiosConfig
|
axiosConfig
|
||||||
)
|
)
|
||||||
@ -332,6 +497,16 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.strength {
|
||||||
|
background-color: honeydew;
|
||||||
|
}
|
||||||
|
.afi {
|
||||||
|
background-color: mistyrose;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scorewarning {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
.top-buffer {
|
.top-buffer {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
@ -363,7 +538,7 @@ export default {
|
|||||||
width: 160px; /* Set the width of the sidebar */
|
width: 160px; /* Set the width of the sidebar */
|
||||||
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
|
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
|
||||||
z-index: 1; /* Stay on top */
|
z-index: 1; /* Stay on top */
|
||||||
top: 20%; /* Stay at the top */
|
top: 10%; /* Stay at the top */
|
||||||
left: 0;
|
left: 0;
|
||||||
overflow-x: hidden; /* Disable horizontal scroll */
|
overflow-x: hidden; /* Disable horizontal scroll */
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
@ -385,9 +560,13 @@ img {
|
|||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
padding-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-1 {
|
.btn-1 {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #CC3232;
|
background-color: #cc3232;
|
||||||
border-color: #000000;
|
border-color: #000000;
|
||||||
}
|
}
|
||||||
.btn-1:hover,
|
.btn-1:hover,
|
||||||
@ -396,7 +575,7 @@ img {
|
|||||||
.btn-1.active,
|
.btn-1.active,
|
||||||
.open .dropdown-toggle.btn-1 {
|
.open .dropdown-toggle.btn-1 {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #4285F4;
|
background-color: #4285f4;
|
||||||
border-color: #000000;
|
border-color: #000000;
|
||||||
}
|
}
|
||||||
.btn-1:active,
|
.btn-1:active,
|
||||||
@ -419,17 +598,17 @@ fieldset[disabled] .btn-1:active,
|
|||||||
.btn-1.disabled.active,
|
.btn-1.disabled.active,
|
||||||
.btn-1[disabled].active,
|
.btn-1[disabled].active,
|
||||||
fieldset[disabled] .btn-1.active {
|
fieldset[disabled] .btn-1.active {
|
||||||
background-color: #CC3232;
|
background-color: #cc3232;
|
||||||
border-color: #4285F4;
|
border-color: #4285f4;
|
||||||
}
|
}
|
||||||
.btn-1 .badge {
|
.btn-1 .badge {
|
||||||
color: #CC3232;
|
color: #cc3232;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-2 {
|
.btn-2 {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #DB7B2B;
|
background-color: #db7b2b;
|
||||||
border-color: #000000;
|
border-color: #000000;
|
||||||
}
|
}
|
||||||
.btn-2:hover,
|
.btn-2:hover,
|
||||||
@ -438,7 +617,7 @@ fieldset[disabled] .btn-1.active {
|
|||||||
.btn-2.active,
|
.btn-2.active,
|
||||||
.open .dropdown-toggle.btn-2 {
|
.open .dropdown-toggle.btn-2 {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #4285F4;
|
background-color: #4285f4;
|
||||||
border-color: #000000;
|
border-color: #000000;
|
||||||
}
|
}
|
||||||
.btn-2:active,
|
.btn-2:active,
|
||||||
@ -461,17 +640,17 @@ fieldset[disabled] .btn-2:active,
|
|||||||
.btn-2.disabled.active,
|
.btn-2.disabled.active,
|
||||||
.btn-2[disabled].active,
|
.btn-2[disabled].active,
|
||||||
fieldset[disabled] .btn-2.active {
|
fieldset[disabled] .btn-2.active {
|
||||||
background-color: #DB7B2B;
|
background-color: #db7b2b;
|
||||||
border-color: #4285F4;
|
border-color: #4285f4;
|
||||||
}
|
}
|
||||||
.btn-2 .badge {
|
.btn-2 .badge {
|
||||||
color: #DB7B2B;
|
color: #db7b2b;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-3 {
|
.btn-3 {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #E7B416;
|
background-color: #e7b416;
|
||||||
border-color: #000000;
|
border-color: #000000;
|
||||||
}
|
}
|
||||||
.btn-3:hover,
|
.btn-3:hover,
|
||||||
@ -480,7 +659,7 @@ fieldset[disabled] .btn-2.active {
|
|||||||
.btn-3.active,
|
.btn-3.active,
|
||||||
.open .dropdown-toggle.btn-3 {
|
.open .dropdown-toggle.btn-3 {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #4285F4;
|
background-color: #4285f4;
|
||||||
border-color: #000000;
|
border-color: #000000;
|
||||||
}
|
}
|
||||||
.btn-3:active,
|
.btn-3:active,
|
||||||
@ -503,17 +682,17 @@ fieldset[disabled] .btn-3:active,
|
|||||||
.btn-3.disabled.active,
|
.btn-3.disabled.active,
|
||||||
.btn-3[disabled].active,
|
.btn-3[disabled].active,
|
||||||
fieldset[disabled] .btn-3.active {
|
fieldset[disabled] .btn-3.active {
|
||||||
background-color: #E7B416;
|
background-color: #e7b416;
|
||||||
border-color: #4285F4;
|
border-color: #4285f4;
|
||||||
}
|
}
|
||||||
.btn-3 .badge {
|
.btn-3 .badge {
|
||||||
color: #E7B416;
|
color: #e7b416;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-4 {
|
.btn-4 {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #99C140;
|
background-color: #99c140;
|
||||||
border-color: #000000;
|
border-color: #000000;
|
||||||
}
|
}
|
||||||
.btn-4:hover,
|
.btn-4:hover,
|
||||||
@ -522,7 +701,7 @@ fieldset[disabled] .btn-3.active {
|
|||||||
.btn-4.active,
|
.btn-4.active,
|
||||||
.open .dropdown-toggle.btn-4 {
|
.open .dropdown-toggle.btn-4 {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #4285F4;
|
background-color: #4285f4;
|
||||||
border-color: #000000;
|
border-color: #000000;
|
||||||
}
|
}
|
||||||
.btn-4:active,
|
.btn-4:active,
|
||||||
@ -545,17 +724,17 @@ fieldset[disabled] .btn-4:active,
|
|||||||
.btn-4.disabled.active,
|
.btn-4.disabled.active,
|
||||||
.btn-4[disabled].active,
|
.btn-4[disabled].active,
|
||||||
fieldset[disabled] .btn-4.active {
|
fieldset[disabled] .btn-4.active {
|
||||||
background-color: #99C140;
|
background-color: #99c140;
|
||||||
border-color: #4285F4;
|
border-color: #4285f4;
|
||||||
}
|
}
|
||||||
.btn-4 .badge {
|
.btn-4 .badge {
|
||||||
color: #99C140;
|
color: #99c140;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-5 {
|
.btn-5 {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #2DC937;
|
background-color: #2dc937;
|
||||||
border-color: #000000;
|
border-color: #000000;
|
||||||
}
|
}
|
||||||
.btn-5:hover,
|
.btn-5:hover,
|
||||||
@ -564,7 +743,7 @@ fieldset[disabled] .btn-4.active {
|
|||||||
.btn-5.active,
|
.btn-5.active,
|
||||||
.open .dropdown-toggle.btn-5 {
|
.open .dropdown-toggle.btn-5 {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #4285F4;
|
background-color: #4285f4;
|
||||||
border-color: #000000;
|
border-color: #000000;
|
||||||
}
|
}
|
||||||
.btn-5:active,
|
.btn-5:active,
|
||||||
@ -587,11 +766,11 @@ fieldset[disabled] .btn-5:active,
|
|||||||
.btn-5.disabled.active,
|
.btn-5.disabled.active,
|
||||||
.btn-5[disabled].active,
|
.btn-5[disabled].active,
|
||||||
fieldset[disabled] .btn-5.active {
|
fieldset[disabled] .btn-5.active {
|
||||||
background-color: #2DC937;
|
background-color: #2dc937;
|
||||||
border-color: #4285F4;
|
border-color: #4285f4;
|
||||||
}
|
}
|
||||||
.btn-5 .badge {
|
.btn-5 .badge {
|
||||||
color: #2DC937;
|
color: #2dc937;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -33,23 +33,8 @@
|
|||||||
</b-row>
|
</b-row>
|
||||||
<b-row align-h="center">
|
<b-row align-h="center">
|
||||||
<b-col>
|
<b-col>
|
||||||
<b-form-group label="Shift">
|
<b-form-group label="Participant">
|
||||||
<b-form-select v-bind:value="whom" @change="setWhom($event)" style="text-align:center;" required>
|
<b-form-input :value="whom" @change="setWhom($event)" type="text"
|
||||||
<option :value=null>Please select an option</option>
|
|
||||||
<option value="A">A</option>
|
|
||||||
<option value="B">B</option>
|
|
||||||
<option value="C">C</option>
|
|
||||||
<option value="D">D</option>
|
|
||||||
<option value="E">E</option>
|
|
||||||
<option value="DAY">Day</option>
|
|
||||||
</b-form-select>
|
|
||||||
</b-form-group>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<b-row align-h="center">
|
|
||||||
<b-col>
|
|
||||||
<b-form-group label="Description">
|
|
||||||
<b-form-input :value="description" @input="setDescription" type="text"
|
|
||||||
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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user