cssd-doc/cssd-back
1
0
Fork 0
mirror of https://git.meshkee.com/cssd/cssd-back.git synced 2026-10-13 01:31:07 +03:30
Code Issues Packages Projects Releases Wiki Activity

Product

Browse Source
This commit is contained in:
saeid
2019-04-29 19:24:18 +04:30
parent 9c28dc5538
commit a8a6780c17
49 changed files with 76186 additions and 1157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/vue/views/NotWorking/AddNewTest.vue
+198
View File
@@ -0,0 +1,198 @@
<template>
<v-container fluid>
<material-card class=""
color="black"
title="Add a New Test"
>
<v-layout wrap class="ma-2">
<v-flex xs12 md3 sm3>
<v-text-field
class="pa-2"
label="Test Name"
color="black">
</v-text-field>
</v-flex>
<v-flex xs12 md3 sm3>
<v-text-field
class="pa-2"
label="Unique ID"
color="black">
</v-text-field>
</v-flex>
</v-layout>
<v-layout wrap class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative">
<v-layout wrap class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Relative WM-Color-LightGrey">
<v-flex xs12 md3 sm3>
<v-text-field
class="pa-2"
label="Input Name"
color="black">
</v-text-field>
</v-flex>
<v-flex xs12 md2 sm2>
<v-select
class="pa-2"
v-model="select"
:hint="`${select.state}, ${select.abbr}`"
:items="items"
item-text="state"
item-value="abbr"
label="Type"
return-object
single-line
color="black"
></v-select>
</v-flex>
<v-flex xs12 md2 sm2>
<v-select
class="pa-2"
v-model="select"
:hint="`${select.state}, ${select.abbr}`"
:items="items"
item-text="state"
item-value="abbr"
label="Size"
return-object
single-line
color="black"
></v-select>
</v-flex>
<v-flex xs12 md5 sm5>
<v-text-field
class="pa-2"
label="Value"
color="black">
</v-text-field>
</v-flex>
</v-layout>
<v-layout v-for="(Div, Key) in ArrayDiv" wrap :key="Key" class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Relative WM-Color-LightGrey Form">
<v-flex xs12 md3 sm3>
<v-text-field
class="pa-2"
label="Input Name"
color="black">
</v-text-field>
</v-flex>
<v-flex xs12 md2 sm2>
<v-select
class="pa-2"
v-model="select"
:hint="`${select.state}, ${select.abbr}`"
:items="items"
item-text="state"
item-value="abbr"
label="Type"
return-object
single-line
color="black"
></v-select>
</v-flex>
<v-flex xs12 md2 sm2>
<v-select
class="pa-2"
v-model="select"
:hint="`${select.state}, ${select.abbr}`"
:items="items"
item-text="state"
item-value="abbr"
label="Size"
return-object
single-line
color="black"
></v-select>
</v-flex>
<v-flex xs12 md5 sm5>
<v-text-field
class="pa-2"
label="Value"
color="black">
</v-text-field>
</v-flex>
<v-btn
absolute
small
right
top
color="pink"
@click="Remove()"
id="RemoveFormBuilder"
>
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
REMOVE</v-btn>
</v-layout>
<v-btn
absolute
small
right
bottom
color="cyan"
@click="Duplicator"
id="FormBuilder"
>
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
ADD</v-btn>
</v-layout>
<div id="WM-FormBuilder"></div>
<v-flex class="text-xs-center" xs12 md12 sm12 >
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
<span class="white--text">Add</span>
</v-btn>
</v-flex>
</material-card>
</v-container>
</template>
<script>
export default {
data () {
return {
ArrayDiv : [],
select: { state: 'Florida', abbr: 'FL' },
items: [
{ state: 'Florida', abbr: 'FL' },
{ state: 'Georgia', abbr: 'GA' },
{ state: 'Nebraska', abbr: 'NE' },
{ state: 'California', abbr: 'CA' },
{ state: 'New York', abbr: 'NY' }
]
}
},
methods : {
Duplicator () {
var Forms = document.getElementsByClassName('Form');
var ArrayForm = [];
for(var i=0; i<Forms.length; i++) {
ArrayForm.push(Forms[i]);
}
this.ArrayDiv.push(ArrayForm);
},
Remove () {
var ID = document.getElementById('RemoveFormBuilder');
var Element = ID.parentNode;
Element.remove();
}
}
}
</script>
<style lang="css" scoped>
.WM-Border {
border: 1px solid;
}
.WM-Border-Black {
border-color: #2f353b !important;
}
.WM-Border-Gray {
border-color: #aaa !important;
}
.WM-Color-LightGrey {
background-color : #F5F5F5;
}
.WM-Relative {
position: relative;
}
.v-btn--top.v-btn--absolute.v-btn--small {
top: -25px !important;
}
</style>