This commit is contained in:
f.shokouhi
2019-09-19 14:35:52 +04:30
parent b2b252752a
commit 8e4b78d23d
18 changed files with 543 additions and 365 deletions
+305 -202
View File
@@ -3,23 +3,25 @@
<v-container grid-list-xs>
<material-card color="black" title="Submit Test Result">
<v-layout wrap class="px-5 my-3" v-if="!$route.params.testResult">
<v-flex xs12 sm4 md4>
<v-flex xs12 md2 sm3 class="WM-FlexCenter">
<v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete
:search-input.sync="searchInput"
:items="testTypeNames"
v-model="filter.name"
label="Choose Test Type"
color="black"
class="pa-2"
class="py-3 pr-3"
></v-autocomplete>
</v-flex>
<v-flex xs12 sm3 md3 class="mr-5">
<v-flex xs12 md2 sm3 class="WM-FlexCenter ml-3">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
<v-text-field
name="testcode"
v-model="filter.unique_code"
label="Or Enter Test Unique Code"
color="black"
class="pa-2"
class="py-3 pr-3"
></v-text-field>
</v-flex>
<!-- <v-spacer></v-spacer> -->
@@ -37,9 +39,9 @@
<v-layout row wrap class="px-5 my-3" v-if="!$route.params.testResult && form.length">
<v-divider></v-divider>
</v-layout>
<v-layout align-center justify-center wrap class="px-5 my-3" v-if="form.length">
<v-layout wrap class="px-5 my-3" v-if="form.length">
<v-flex xs12 sm12 md12>
<h3>{{testTypeNameSelected}}</h3>
<h3 class="WM-BorderLeftTitle">{{testTypeNameSelected}}</h3>
</v-flex>
<v-flex xs12 sm3 md3>
<v-text-field
@@ -60,7 +62,7 @@
class="pa-2"
>
<v-text-field style="padding-top:0 !important"
prepend-inner-icon="far fa-clock"
prepend-inner-icon="far fa-calendar-alt"
required
slot="activator"
label="Date"
@@ -87,174 +89,238 @@
</label>
</div>
</v-flex>
<v-flex xs12 sm12 md12>
<v-layout class="mt-4">
<v-flex v-for="(img, key) in images" :key="key" xs12 sm6 md1>
<img :src="img" style="width:100%;" />
<!-- <v-btn fab class="black" @click.native.stop="removeImage(key)"></v-btn> -->
<v-btn class="mx-2" fab dark small color="primary">
<v-icon dark>mdi-minus</v-icon>
</v-layout>
<v-layout wrap class="mt-4 px-5">
<v-flex v-for="(img, key) in images" :key="key" xs12 sm6 md1 class="WM-Border WM-Border-LightGray WM-Padding-10 WM-Align-C WM-Relative" style="margin:15px">
<img :src="img" width="120px" height="auto"/>
<v-btn class="mx-2" absolute right top fab dark small color="pink" style="top:-28px;right:-28px" @click.native.stop="removeImage(key)">
<v-icon>close</v-icon>
</v-btn>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
<!--______________________ DynamicComponent :: Began _______________________-->
<!-- start dynamic component -->
<v-layout align-center justify-center wrap class="px-5 my-3">
<v-layout wrap class="px-5 my-3">
<v-flex :class="['pa-2', item.size]" v-for="(item, key) in form" :key="key">
<v-container fluid v-if="item.type == 'Temperature'">
<p>{{ item.name }}</p>
<v-flex xs12>
<v-slider
step="0.1"
prepend-icon="fas fa-temperature-high"
v-model="formData[item.name+'_'+item.id]"
min="0"
max="200"
thumb-label="always"
></v-slider>
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Temperature'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<v-flex xs12>
<v-slider
step="0.1"
prepend-icon="fas fa-temperature-high"
v-model="formData[item.name+'_'+item.id]"
min="0"
max="200"
thumb-label="always"
></v-slider>
</v-flex>
</v-container>
</v-layout>
</v-container>
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Text'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<v-text-field
v-model="formData[item.name+'_'+item.id]"
:label="item.name"
color="black"
prepend-inner-icon="fa fa-align-left"
></v-text-field>
</v-container>
</v-layout>
</v-container>
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Pressure'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<v-flex xs12>
<v-slider
prepend-icon="fa fa-flask"
step="0.01"
v-model="formData[item.name+'_'+item.id]"
min="-1"
max="3"
thumb-label="always"
></v-slider>
</v-flex>
</v-container>
</v-layout>
</v-container>
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Select'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<v-flex xs12>
<v-select
multiple
prepend-inner-icon="fa fa-check"
:items="item.options"
v-model="formData[item.name+'_'+item.id]"
:label="item.name"
color="black"
item-text="title"
item-value="id"
></v-select>
</v-flex>
</v-container>
</v-layout>
</v-container>
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Checkbox'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<v-flex xs12 class="WM-FlexWrap mr-3">
<v-checkbox
v-for="(optionValue, keyOption) in item.options"
:key="keyOption"
:label="optionValue.title"
v-model="formData[item.name+'_'+item.id]"
:value="optionValue.id"
></v-checkbox>
</v-flex>
</v-container>
<v-text-field
v-if="item.type == 'Text'"
v-model="formData[item.name+'_'+item.id]"
:label="item.name"
color="black"
></v-text-field>
<!-- <v-container fluid v-if="item.type == 'Temperature'">
<p>{{ item.name }}</p>
<v-flex xs12>
<v-slider
step="0.1"
prepend-icon="fas fa-temperature-high"
v-model="formData[item.name+'_'+item.id]"
min="0"
max="200"
thumb-label="always"
></v-slider>
</v-flex>
</v-container> -->
<v-container fluid v-if="item.type == 'Pressure'">
<p>{{ item.name }}</p>
<v-flex xs12>
<v-slider
prepend-icon="fa fa-flask"
step="0.01"
v-model="formData[item.name+'_'+item.id]"
min="-1"
max="3"
thumb-label="always"
></v-slider>
</v-flex>
</v-container>
<v-select
multiple
v-if="item.type == 'Select'"
:items="item.options"
v-model="formData[item.name+'_'+item.id]"
:label="item.name"
color="black"
item-text="title"
item-value="id"
></v-select>
<v-container fluid v-if="item.type == 'Checkbox'">
<p>{{ item.name }}</p>
<v-checkbox
v-for="(optionValue, keyOption) in item.options"
:key="keyOption"
:label="optionValue.title"
v-model="formData[item.name+'_'+item.id]"
:value="optionValue.id"
></v-checkbox>
</v-container>
<v-container fluid v-if="item.type == 'Radiobutton'">
<p>{{ item.name }}</p>
<v-radio-group v-model="formData[item.name+'_'+item.id]">
<v-radio
v-for="(optionValue, keyOption) in item.options"
:key="keyOption"
:label="optionValue.title"
:value="optionValue.id"
></v-radio>
</v-radio-group>
</v-container>
<v-container fluid v-if="item.type == 'Switch'">
</v-layout>
</v-container>
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Radiobutton'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<v-flex xs12 class="WM-FlexWrap">
<v-radio-group v-model="formData[item.name+'_'+item.id]">
<v-radio
v-for="(optionValue, keyOption) in item.options"
:key="keyOption"
:label="optionValue.title"
:value="optionValue.id"
></v-radio>
</v-radio-group>
</v-flex>
</v-container>
</v-layout>
</v-container>
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Switch'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<v-flex xs12>
<v-switch
color="green"
v-model="formData[item.name+'_'+item.id]"
:label="item.name + ': ' + formData[item.name+'_'+item.id].toString()"
></v-switch>
</v-container>
<v-container fluid v-if="item.type == 'Range'">
<p>{{ item.name }}</p>
<v-flex xs12>
<v-slider
v-model="formData[item.name+'_'+item.id]"
:min="item.options[0].title"
:max="item.options[1].title"
thumb-label="always"
></v-slider>
</v-flex>
</v-container>
<v-container fluid v-if="item.type == 'Time'">
<v-flex xs12>
<v-text-field
v-model="formData[item.name+'_'+item.id]"
:label="item.name"
class="WM-Font-30"
mask="##:##"
></v-text-field>
</v-flex>
</v-container>
<template v-if="item.type == 'Form'">
<v-container row md-12 sm-12 xs-12>
<v-layout row wrap>
<h3>{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-flex
:class="['pa-2', children.size]"
v-for="(children, keyChildren) in item.children"
:key="keyChildren"
>
</v-layout>
</v-container>
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Range'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<v-flex xs12>
<v-slider
v-model="formData[item.name+'_'+item.id]"
:min="item.options[0].title"
:max="item.options[1].title"
thumb-label="always"
color="black"
></v-slider>
</v-flex>
</v-container>
</v-layout>
</v-container>
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Time'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<v-flex xs12>
<v-text-field
v-model="formData[item.name+'_'+item.id]"
:label="item.name"
class="WM-Font-30"
mask="##:##"
color="black"
></v-text-field>
</v-flex>
</v-container>
</v-layout>
</v-container>
<!-- <v-layout row wrap>
<template v-if="item.type == 'Form'"> -->
<v-container row md-12 sm-12 xs-12 class="WM-Border WM-Border-LightGray WM-Padding-10 WM-BorderRadius-5" v-if="item.type == 'Form'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-flex
:class="['pa-2', children.size]"
v-for="(children, keyChildren) in item.children"
:key="keyChildren"
>
<v-container fluid v-if="children.type == 'Text'" class="WM-Padding-LR-0">
<p>{{ children.name }}</p>
<v-flex xs12>
<v-text-field
v-if="children.type == 'Text'"
prepend-inner-icon="fa fa-align-left"
v-model="formData[children.name+'_'+children.id]"
:label="children.name"
color="black"
></v-text-field>
<v-container fluid v-if="children.type == 'Temperature'">
<p>{{ children.name }}</p>
<v-flex xs12>
<v-slider
prepend-icon="fas fa-temperature-high"
step="0.1"
v-model="formData[children.name+'_'+children.id]"
min="0"
max="200"
thumb-label="always"
></v-slider>
</v-flex>
</v-container>
<v-container fluid v-if="children.type == 'Pressure'">
<p>{{ children.name }}</p>
<v-flex xs12>
<v-slider
v-model="formData[children.name+'_'+children.id]"
min="-1"
step="0.01"
max="3"
prepend-icon="fa fa-flask"
thumb-label="always"
></v-slider>
</v-flex>
</v-container>
</v-flex>
</v-container>
<v-container fluid v-if="children.type == 'Temperature'" class="WM-Padding-LR-0">
<p>{{ children.name }}</p>
<v-flex xs12>
<v-slider
prepend-icon="fas fa-temperature-high"
step="0.1"
v-model="formData[children.name+'_'+children.id]"
min="0"
max="200"
thumb-label="always"
></v-slider>
</v-flex>
</v-container>
<v-container fluid v-if="children.type == 'Pressure'" class="WM-Padding-LR-0">
<p>{{ children.name }}</p>
<v-flex xs12>
<v-slider
prepend-icon="fa fa-flask"
v-model="formData[children.name+'_'+children.id]"
min="-1"
step="0.01"
max="3"
thumb-label="always"
></v-slider>
</v-flex>
</v-container>
<v-container fluid v-if="children.type == 'Select'" class="WM-Padding-LR-0">
<p>{{ children.name }}</p>
<v-flex xs12>
<v-select
multiple
v-if="children.type == 'Select'"
prepend-inner-icon="fa fa-check"
:items="children.options"
v-model="formData[children.name+'_'+children.id]"
:label="children.name"
@@ -262,59 +328,70 @@
item-text="title"
item-value="id"
></v-select>
<v-container fluid v-if="children.type == 'Checkbox'">
<p>{{ children.name }}</p>
<v-checkbox
</v-flex>
</v-container>
<v-container fluid v-if="children.type == 'Checkbox'" class="WM-Padding-LR-0">
<p>{{ children.name }}</p>
<v-flex xs12 class="WM-FlexWrap mr-3">
<v-checkbox
v-for="(optionValue, keyOption) in children.options"
:key="keyOption"
:label="optionValue.title"
v-model="formData[children.name+'_'+children.id]"
:value="optionValue.id"
></v-checkbox>
</v-flex>
</v-container>
<v-container fluid v-if="children.type == 'Radiobutton'" class="WM-Padding-LR-0">
<p>{{ children.name }}</p>
<v-flex xs12 class="WM-FlexWrap">
<v-radio-group v-model="formData[children.name+'_'+children.id]">
<v-radio
v-for="(optionValue, keyOption) in children.options"
:key="keyOption"
:label="optionValue.title"
v-model="formData[children.name+'_'+children.id]"
:value="optionValue.id"
></v-checkbox>
</v-container>
<v-container fluid v-if="children.type == 'Radiobutton'">
<p>{{ children.name }}</p>
<v-radio-group v-model="formData[children.name+'_'+children.id]">
<v-radio
v-for="(optionValue, keyOption) in children.options"
:key="keyOption"
:label="optionValue.title"
:value="optionValue.id"
></v-radio>
</v-radio-group>
</v-container>
<v-container fluid v-if="children.type == 'Switch'">
<v-switch
color="green"
v-model="formData[children.name+'_'+children.id]"
:label="children.name + ': ' + formData[children.name+'_'+children.id].toString()"
></v-switch>
</v-container>
<v-container fluid v-if="children.type == 'Range'">
<p>{{ item.name }}</p>
<v-flex xs12>
<v-slider
v-model="formData[children.name+'_'+children.id]"
:min="children.options[0].title"
:max="children.options[1].title"
thumb-label="always"
></v-slider>
</v-flex>
</v-container>
<v-container fluid v-if="children.type == 'Time'">
<v-flex xs12>
<v-text-field
v-model="formData[children.name+'_'+children.id]"
:label="children.name"
class="WM-Font-30"
mask="##:##"
></v-text-field>
</v-flex>
</v-container>
></v-radio>
</v-radio-group>
</v-flex>
</v-layout>
</v-container>
</template>
<v-container fluid v-if="children.type == 'Switch'" class="WM-Padding-LR-0">
<p>{{ children.name }}</p>
<v-flex xs12>
<v-switch
color="green"
v-model="formData[children.name+'_'+children.id]"
:label="children.name + ': ' + formData[children.name+'_'+children.id].toString()"
></v-switch>
</v-flex>
</v-container>
<v-container fluid v-if="children.type == 'Range'" class="WM-Padding-LR-0">
<p>{{ item.name }}</p>
<v-flex xs12>
<v-slider
v-model="formData[children.name+'_'+children.id]"
:min="children.options[0].title"
:max="children.options[1].title"
thumb-label="always"
></v-slider>
</v-flex>
</v-container>
<v-container fluid v-if="children.type == 'Time'" class="WM-Padding-LR-0">
<p>{{ children.name }}</p>
<v-flex xs12>
<v-text-field
v-model="formData[children.name+'_'+children.id]"
:label="children.name"
class="WM-Font-30"
mask="##:##"
></v-text-field>
</v-flex>
</v-container>
</v-flex>
</v-layout>
</v-container>
<!-- </template>
</v-layout> -->
</v-flex>
</v-layout>
<v-layout row wrap class="px-5 my-3">
@@ -537,11 +614,11 @@ export default {
}
.v-input--switch__track:not(.green--text) {
color: red !important;
color: #E91E63 !important;
}
.v-input--switch__thumb:not(.green--text) {
background-color: red !important;
background-color: #E91E63 !important;
}
.v-btn--floating {
padding: 0 !important;
@@ -553,4 +630,30 @@ export default {
.v-btn--icon:before {
border-radius: 50% !important;
}
.v-input--selection-controls__input {
margin-right :0;
}
.v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) {
margin-bottom : 0;
}
.v-input--radio-group--column .v-input--radio-group__input {
flex-direction: row;
}
.v-input--selection-controls .v-input__control {
margin-right: 12px;
}
.v-input--selection-controls__input {
margin-right: 7px;
}
.accent--text {
color: #E91E63 !important;
caret-color: #E91E63 !important;
}
.WM-Padding-LR-0 {
padding:24px 0;
}
.WM-BorderLeftTitle {
border-left: 1px solid;
padding-left: 5px;
}
</style>