mirror of
https://git.meshkee.com/cssd/cssd-back.git
synced 2026-10-13 17:01:07 +03:30
init project
This commit is contained in:
saeid
@@ -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>
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<v-container fluid>
|
||||
<material-card class=""
|
||||
color="black"
|
||||
title="All Test Resualt"
|
||||
text=""
|
||||
>
|
||||
<v-layout align-center wrap class="my-3">
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Name"
|
||||
color="black"
|
||||
>
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Date"
|
||||
color="black"
|
||||
>
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Hospital"
|
||||
color="black"
|
||||
>
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex class="" xs12 md2 sm2>
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
|
||||
<span class="white--text">Filter</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-divider></v-divider>
|
||||
<v-layout align-center wrap class="my-3">
|
||||
<v-flex xs1>
|
||||
<v-card-title>
|
||||
<div>
|
||||
<div>
|
||||
222
|
||||
</div>
|
||||
<div>
|
||||
Test
|
||||
</div>
|
||||
<div class="">
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
</v-card-title>
|
||||
</v-flex>
|
||||
<v-flex xs6>
|
||||
<v-card-text>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
</p>
|
||||
</v-card-text>
|
||||
</v-flex>
|
||||
<v-flex xs4>
|
||||
<v-card-text>
|
||||
<v-btn color="black" class="mr-2">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-folder</v-icon>
|
||||
<span>Archive</span>
|
||||
</v-btn>
|
||||
<v-btn color="cyan" class="mr-2">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
|
||||
<span>Edit</span>
|
||||
</v-btn>
|
||||
<v-btn color="orange darken-1">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
|
||||
<span>Generate Barcode</span>
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-divider></v-divider>
|
||||
<v-layout row wrap align-center justify-center class="mt-3">
|
||||
<router-link to="/dashboard">
|
||||
<v-btn
|
||||
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
|
||||
<span class="black--text">Back</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<material-card class=""
|
||||
color="black"
|
||||
title="Material Dashboard Heading"
|
||||
text=""
|
||||
>
|
||||
<v-layout row wrap>
|
||||
<v-flex v-for="(Card, Key ) in Cards" :class="[Card.column , 'pa-2']" :key="Key">
|
||||
<router-link :to="Card.route">
|
||||
<material-cards
|
||||
:title="Card.title"
|
||||
:icon="Card.icon"
|
||||
:color="Card.color"
|
||||
:text="Card.text"
|
||||
:aligntext="Card.aligntext"
|
||||
:alignimg="Card.alignimg"
|
||||
/>
|
||||
</router-link>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
Cards :[
|
||||
{title:'My Info', text:'You can easily edit your registration information',icon:'/img/Static/Dashboard/darkmug.png',color:'WM-OrangeGradient-BG',route:'/my-info',aligntext:'text-md-left',alignimg:'text-md-right', column:'xs12 md6 sm6'},
|
||||
{title:'All Test Result', text:'You can see all user tests and own tests',icon:'/img/Static/Dashboard/pad.png',color:'WM-GreenGradient-BG',route:'/all-resualttest',aligntext:'text-md-left',alignimg:'text-md-right',column:'xs12 md6 sm6'},
|
||||
{title:'Manage Users', text:'You can edit the medical center information',icon:'/img/Static/Dashboard/ipad.png',color:'WM-YellowPinkGradient-BG',route:'/manage-users',aligntext:'text-md-center',alignimg:'text-md-left',column:'xs12 md12 sm12'},
|
||||
{title:'Manage Medical Center', text:'Managing users very fast by ...',icon:'/img/Static/Dashboard/Macbook.png',color:'WM-MuskGradient-BG',route:'/manage-medical-center',aligntext:'text-md-left',alignimg:'text-md-right',column:'xs12 md7 sm7'},
|
||||
{title:'Add a Test Type', text:'You can simply add your own test type',icon:'/img/Static/Dashboard/Book-and-Pen.png',color:'WM-GreyGradient-BG',route:'/test-creator',aligntext:'text-md-left',alignimg:'text-md-right',column:'xs12 md5 sm5'},
|
||||
{title:'Test to Verify', text:'You can simply add your own test type in this section of website',icon:'/img/Static/Dashboard/notepad-colorful.png',color:'WM-PinkGradient-BG',route:'/submit-test-result',aligntext:'text-md-center',alignimg:'text-md-left',column:'xs12 md12 sm12'},
|
||||
{title:'Add a Test Result', text:'You can edit the medical center information',icon:'/img/Static/Dashboard/ipad.png',color:'WM-YellowPinkGradient-BG',route:'/manage-medical-center',aligntext:'text-md-center',alignimg:'text-md-left',column:'xs12 md12 sm12'},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<v-container
|
||||
fill-height
|
||||
fluid
|
||||
style="flex-wrap: wrap;"
|
||||
>
|
||||
<material-card color="green">
|
||||
<div
|
||||
slot="header"
|
||||
>
|
||||
<div class="title font-weight-light mb-2">Material Design Icons</div>
|
||||
<div class="category font-weight-thin">
|
||||
See all available
|
||||
<a
|
||||
class="white--text"
|
||||
href="https://materialdesignicons.com/"
|
||||
target="_blank"
|
||||
>
|
||||
Icons
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-layout
|
||||
align-center
|
||||
justify-center
|
||||
wrap
|
||||
>
|
||||
<v-flex
|
||||
v-for="icon in icons"
|
||||
:key="icon"
|
||||
ma-2
|
||||
>
|
||||
<v-tooltip
|
||||
top
|
||||
content-class="top">
|
||||
<v-icon slot="activator">
|
||||
{{ icon }}
|
||||
</v-icon>
|
||||
<span>{{ icon }}</span>
|
||||
</v-tooltip>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
|
||||
<div class="mx-auto">
|
||||
<v-btn
|
||||
large
|
||||
class="mx-0 font-weight-light"
|
||||
color="success"
|
||||
href="https://materialdesignicons.com/"
|
||||
target="_blank"
|
||||
round
|
||||
>
|
||||
<v-icon left>mdi-material-design</v-icon>
|
||||
<span>See all icons</span>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
icons: [
|
||||
'mdi-access-point',
|
||||
'mdi-access-point-network',
|
||||
'mdi-account',
|
||||
'mdi-account-alert',
|
||||
'mdi-account-box',
|
||||
'mdi-account-box-multiple',
|
||||
'mdi-account-box-outline',
|
||||
'mdi-account-card-details',
|
||||
'mdi-account-check',
|
||||
'mdi-account-circle',
|
||||
'mdi-account-convert',
|
||||
'mdi-account-edit',
|
||||
'mdi-account-group',
|
||||
'mdi-account-heart',
|
||||
'mdi-account-key',
|
||||
'mdi-account-location',
|
||||
'mdi-account-minus',
|
||||
'mdi-account-multiple',
|
||||
'mdi-account-multiple-check',
|
||||
'mdi-account-multiple-minus',
|
||||
'mdi-account-multiple-outline',
|
||||
'mdi-account-multiple-plus',
|
||||
'mdi-account-multiple-plus-outline',
|
||||
'mdi-account-network',
|
||||
'mdi-account-off',
|
||||
'mdi-account-outline',
|
||||
'mdi-account-plus',
|
||||
'mdi-account-plus-outline',
|
||||
'mdi-account-remove',
|
||||
'mdi-account-search',
|
||||
'mdi-account-search-outline',
|
||||
'mdi-account-settings',
|
||||
'mdi-account-settings-variant',
|
||||
'mdi-account-star',
|
||||
'mdi-account-switch',
|
||||
'mdi-accusoft',
|
||||
'mdi-adjust',
|
||||
'mdi-adobe',
|
||||
'mdi-air-conditioner',
|
||||
'mdi-airballoon',
|
||||
'mdi-airplane',
|
||||
'mdi-airplane-landing',
|
||||
'mdi-airplane-off',
|
||||
'mdi-airplane-takeoff',
|
||||
'mdi-airplay',
|
||||
'mdi-airport',
|
||||
'mdi-alarm',
|
||||
'mdi-alarm-bell',
|
||||
'mdi-alarm-check',
|
||||
'mdi-alarm-light',
|
||||
'mdi-alarm-multiple',
|
||||
'mdi-alarm-off',
|
||||
'mdi-alarm-plus',
|
||||
'mdi-alarm-snooze',
|
||||
'mdi-album',
|
||||
'mdi-alert',
|
||||
'mdi-alert-box',
|
||||
'mdi-alert-circle',
|
||||
'mdi-alert-circle-outline',
|
||||
'mdi-alert-decagram',
|
||||
'mdi-alert-octagon',
|
||||
'mdi-alert-octagram',
|
||||
'mdi-alert-outline',
|
||||
'mdi-alien',
|
||||
'mdi-all-inclusive',
|
||||
'mdi-alpha',
|
||||
'mdi-alphabetical',
|
||||
'mdi-altimeter',
|
||||
'mdi-amazon',
|
||||
'mdi-amazon-alexa',
|
||||
'mdi-amazon-drive',
|
||||
'mdi-ambulance',
|
||||
'mdi-amplifier',
|
||||
'mdi-anchor',
|
||||
'mdi-android',
|
||||
'mdi-android-debug-bridge',
|
||||
'mdi-android-head',
|
||||
'mdi-android-studio',
|
||||
'mdi-angle-acute',
|
||||
'mdi-angle-obtuse',
|
||||
'mdi-angle-right',
|
||||
'mdi-angular',
|
||||
'mdi-angularjs',
|
||||
'mdi-animation',
|
||||
'mdi-animation-play',
|
||||
'mdi-anvil',
|
||||
'mdi-apple',
|
||||
'mdi-apple-finder',
|
||||
'mdi-apple-icloud',
|
||||
'mdi-apple-ios',
|
||||
'mdi-apple-keyboard-caps',
|
||||
'mdi-apple-keyboard-command',
|
||||
'mdi-apple-keyboard-control',
|
||||
'mdi-apple-keyboard-option',
|
||||
'mdi-apple-keyboard-shift',
|
||||
'mdi-apple-safari',
|
||||
'mdi-application',
|
||||
'mdi-approval',
|
||||
'mdi-apps',
|
||||
'mdi-arch',
|
||||
'mdi-archive',
|
||||
'mdi-arrange-bring-forward',
|
||||
'mdi-arrange-bring-to-front',
|
||||
'mdi-arrange-send-backward',
|
||||
'mdi-arrange-send-to-back',
|
||||
'mdi-arrow-all',
|
||||
'mdi-arrow-bottom-left',
|
||||
'mdi-arrow-bottom-left-bold-outline',
|
||||
'mdi-arrow-bottom-left-thick',
|
||||
'mdi-arrow-bottom-right',
|
||||
'mdi-arrow-bottom-right-bold-outline',
|
||||
'mdi-arrow-bottom-right-thick',
|
||||
'mdi-arrow-collapse',
|
||||
'mdi-arrow-collapse-all',
|
||||
'mdi-arrow-collapse-down',
|
||||
'mdi-arrow-collapse-horizontal',
|
||||
'mdi-arrow-collapse-left',
|
||||
'mdi-arrow-collapse-right',
|
||||
'mdi-arrow-collapse-up',
|
||||
'mdi-arrow-collapse-vertical',
|
||||
'mdi-arrow-decision',
|
||||
'mdi-arrow-decision-auto',
|
||||
'mdi-arrow-decision-auto-outline',
|
||||
'mdi-arrow-decision-outline',
|
||||
'mdi-arrow-down',
|
||||
'mdi-arrow-down-bold',
|
||||
'mdi-arrow-down-bold-box',
|
||||
'mdi-arrow-down-bold-box-outline',
|
||||
'mdi-arrow-down-bold-circle',
|
||||
'mdi-arrow-down-bold-circle-outline',
|
||||
'mdi-arrow-down-bold-hexagon-outline',
|
||||
'mdi-arrow-down-bold-outline',
|
||||
'mdi-arrow-down-box',
|
||||
'mdi-arrow-down-drop-circle',
|
||||
'mdi-arrow-down-drop-circle-outline',
|
||||
'mdi-arrow-down-thick',
|
||||
'mdi-arrow-expand',
|
||||
'mdi-arrow-expand-all',
|
||||
'mdi-arrow-expand-down',
|
||||
'mdi-arrow-expand-horizontal',
|
||||
'mdi-arrow-expand-left',
|
||||
'mdi-arrow-expand-right',
|
||||
'mdi-arrow-expand-up',
|
||||
'mdi-arrow-expand-vertical',
|
||||
'mdi-arrow-left',
|
||||
'mdi-arrow-left-bold',
|
||||
'mdi-arrow-left-bold-box',
|
||||
'mdi-arrow-left-bold-box-outline',
|
||||
'mdi-arrow-left-bold-circle',
|
||||
'mdi-arrow-left-bold-circle-outline',
|
||||
'mdi-arrow-left-bold-hexagon-outline',
|
||||
'mdi-arrow-left-bold-outline',
|
||||
'mdi-arrow-left-box',
|
||||
'mdi-arrow-left-drop-circle',
|
||||
'mdi-arrow-left-drop-circle-outline',
|
||||
'mdi-arrow-left-right-bold-outline',
|
||||
'mdi-arrow-left-thick',
|
||||
'mdi-arrow-right',
|
||||
'mdi-arrow-right-bold',
|
||||
'mdi-arrow-right-bold-box',
|
||||
'mdi-arrow-right-bold-box-outline',
|
||||
'mdi-arrow-right-bold-circle',
|
||||
'mdi-arrow-right-bold-circle-outline',
|
||||
'mdi-arrow-right-bold-hexagon-outline',
|
||||
'mdi-arrow-right-bold-outline',
|
||||
'mdi-arrow-right-box',
|
||||
'mdi-arrow-right-drop-circle',
|
||||
'mdi-arrow-right-drop-circle-outline',
|
||||
'mdi-arrow-right-thick',
|
||||
'mdi-arrow-split-horizontal',
|
||||
'mdi-arrow-split-vertical',
|
||||
'mdi-arrow-top-left',
|
||||
'mdi-arrow-top-left-bold-outline',
|
||||
'mdi-arrow-top-left-thick',
|
||||
'mdi-arrow-top-right',
|
||||
'mdi-arrow-top-right-bold-outline',
|
||||
'mdi-arrow-top-right-thick',
|
||||
'mdi-arrow-up',
|
||||
'mdi-arrow-up-bold',
|
||||
'mdi-arrow-up-bold-box',
|
||||
'mdi-arrow-up-bold-box-outline',
|
||||
'mdi-arrow-up-bold-circle',
|
||||
'mdi-arrow-up-bold-circle-outline',
|
||||
'mdi-arrow-up-bold-hexagon-outline',
|
||||
'mdi-arrow-up-bold-outline',
|
||||
'mdi-arrow-up-box',
|
||||
'mdi-arrow-up-down-bold-outline',
|
||||
'mdi-arrow-up-drop-circle',
|
||||
'mdi-arrow-up-drop-circle-outline',
|
||||
'mdi-arrow-up-thick',
|
||||
'mdi-artist',
|
||||
'mdi-assistant',
|
||||
'mdi-asterisk',
|
||||
'mdi-at',
|
||||
'mdi-atlassian',
|
||||
'mdi-atom',
|
||||
'mdi-attachment',
|
||||
'mdi-audio-video',
|
||||
'mdi-audiobook',
|
||||
'mdi-augmented-reality',
|
||||
'mdi-auto-fix',
|
||||
'mdi-auto-upload',
|
||||
'mdi-autorenew',
|
||||
'mdi-av-timer',
|
||||
'mdi-axe',
|
||||
'mdi-azure',
|
||||
'mdi-baby',
|
||||
'mdi-baby-buggy',
|
||||
'mdi-backburger',
|
||||
'mdi-backspace',
|
||||
'mdi-backup-restore',
|
||||
'mdi-badminton'
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<v-form >
|
||||
<v-container grid-list-xs>
|
||||
<v-layout row wrap class="justify-center">
|
||||
<v-flex xs12 md3 sm3 class="WM-WidthScreen-SM WM-WidthScreen-XS">
|
||||
<material-card
|
||||
color="black"
|
||||
title="Login Page">
|
||||
<v-layout row wrap class="px-3">
|
||||
<v-flex xs12 md12 sm12>
|
||||
<v-text-field
|
||||
v-model="cell_number"
|
||||
name="cellnumber"
|
||||
label="Cell Number"
|
||||
id="id1"
|
||||
color="black"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap class="px-3">
|
||||
<v-flex xs12 md12 sm12>
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
name="password"
|
||||
label="Password"
|
||||
id="id2"
|
||||
color="black"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap class="px-3">
|
||||
<v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="handleSubmit">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-sign-in-alt</v-icon>
|
||||
<span class="white--text">Login</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12 md6 sm6 class="text-md-right text-sm-center text-xs-center">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="black--text">Register</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap class="text-md-left text-sm-center text-xs-center">
|
||||
<v-flex xs12 md6 sm6 class="px-4 py-3">
|
||||
<router-link to="/submittestresualt">
|
||||
<span class="black--text" style="border-bottom:1px solid #000;">Forgot Password ?</span>
|
||||
</router-link>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters, mapActions } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cell_number: "",
|
||||
password: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('auth', [
|
||||
'authenticating',
|
||||
'authenticationError',
|
||||
'authenticationErrorCode'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
...mapActions('auth', [
|
||||
'login'
|
||||
]),
|
||||
handleSubmit() {
|
||||
// Perform a simple validation that cell_number and password have been typed in
|
||||
if (this.cell_number != '' && this.password != '') {
|
||||
|
||||
this.login({cell_number: this.cell_number, password: this.password});
|
||||
this.password = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<material-card class=""
|
||||
color="black"
|
||||
title="Medical Centers List"
|
||||
text=""
|
||||
>
|
||||
<v-layout wrap class="px-5 mb-3">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
label="Name"
|
||||
color="black">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<!-- <v-spacer></v-spacer> -->
|
||||
<v-flex xs12 md2 sm2 class="text-xs-right">
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
|
||||
<span class="white--text">Filter</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout class="px-4 my-3">
|
||||
<v-divider></v-divider>
|
||||
</v-layout>
|
||||
<v-layout align-center justify-center wrap class="px-5 mt-3">
|
||||
<v-flex
|
||||
md12
|
||||
>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="items"
|
||||
hide-actions
|
||||
>
|
||||
<template
|
||||
slot="headerCell"
|
||||
slot-scope="{ header }"
|
||||
>
|
||||
<span
|
||||
class="subheading font-weight-light text-white text--darken-3"
|
||||
v-text="header.text"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
slot="items"
|
||||
slot-scope="{ item }"
|
||||
>
|
||||
<td class="headline font-weight-light">{{ item.name }}</td>
|
||||
<td class="title font-weight-light">{{ item.date }}</td>
|
||||
<td class="title font-weight-light">{{ item.operator }}</td>
|
||||
<td class="text-xs-right">
|
||||
<v-btn color="cyan" class="mr-2 WM-ActionButton">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
|
||||
<span>Edit</span>
|
||||
</v-btn>
|
||||
<v-btn color="orange darken-1" class="mr-2 WM-ActionButton">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-user</v-icon>
|
||||
<span>Operator</span>
|
||||
</v-btn>
|
||||
<v-btn color="pink" class=" WM-ActionButton">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
|
||||
<span>Remove</span>
|
||||
</v-btn>
|
||||
</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-divider></v-divider>
|
||||
<v-layout row wrap align-center justify-center class="mt-3">
|
||||
<router-link to="/dashboard">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
|
||||
<span class="black--text">Back</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
headers: [
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Hospital Name',
|
||||
value: 'name'
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Date',
|
||||
value: 'date'
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Operator',
|
||||
value: 'operator'
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Action',
|
||||
value: 'action',
|
||||
align: 'right'
|
||||
}
|
||||
],
|
||||
items: [
|
||||
{
|
||||
name: 'Shahid Beheshti',
|
||||
date: '12/05/1397',
|
||||
operator: '3 Operator',
|
||||
action: ''
|
||||
},
|
||||
{
|
||||
name: 'Emam Reza',
|
||||
date: '12/05/1397',
|
||||
operator: '5 Operator',
|
||||
action: ''
|
||||
},
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.WM-ActionButton {
|
||||
padding : 8px 22px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<v-container grid-list-xs>
|
||||
<material-card
|
||||
color="black"
|
||||
title="Member List">
|
||||
<v-layout align-center justify-center wrap class="px-5 mb-3">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
color="black"
|
||||
name="name"
|
||||
label="Name"
|
||||
id="id1"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
color="black"
|
||||
name="date"
|
||||
label="Date"
|
||||
id="id2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
color="black"
|
||||
name="hospital"
|
||||
label="Hospital"
|
||||
id="id3"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
|
||||
<span class="white--text">Filter</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout class="px-4 my-3">
|
||||
<v-divider></v-divider>
|
||||
</v-layout>
|
||||
<v-layout align-center justify-center wrap class="px-5 my-2">
|
||||
<v-flex xs12 md12 sm12>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="items"
|
||||
hide-actions
|
||||
>
|
||||
<template
|
||||
slot="headerCell"
|
||||
slot-scope="{ header }">
|
||||
<span
|
||||
class="subheading font-weight-light text-white text--darken-3"
|
||||
v-text="header.text"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
slot="items"
|
||||
slot-scope="{ item }">
|
||||
<td class="headline font-weight-light">{{item.name}}</td>
|
||||
<td class="title font-weight-light">{{item.date}}</td>
|
||||
<td class="title font-weight-light">{{item.operator}}</td>
|
||||
<td class="text-xs-right">
|
||||
<v-btn color="purple" class="mr-2 WM-ActionButton">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-envelope</v-icon>
|
||||
<span>SMS</span>
|
||||
</v-btn>
|
||||
<v-btn color="cyan" class="mr-2 WM-ActionButton">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
|
||||
<span>Edit</span>
|
||||
</v-btn>
|
||||
<v-btn color="orange darken-1" class="mr-2 WM-ActionButton">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-user</v-icon>
|
||||
<span>Operator</span>
|
||||
</v-btn>
|
||||
<v-btn color="pink" class=" WM-ActionButton">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-times</v-icon>
|
||||
<span>Remove</span>
|
||||
</v-btn>
|
||||
</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout class="px-4 my-3">
|
||||
<v-divider></v-divider>
|
||||
</v-layout>
|
||||
<v-layout row wrap align-center justify-center class="mt-3">
|
||||
<router-link to="/dashboard">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
|
||||
<span class="black--text">Back</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
headers : [
|
||||
{
|
||||
sortable : true,
|
||||
text: 'Operator',
|
||||
value: 'operator'
|
||||
},
|
||||
{
|
||||
sortable : true,
|
||||
text: 'Date',
|
||||
value: 'date'
|
||||
},
|
||||
{
|
||||
sortable : true,
|
||||
text: 'Hospital',
|
||||
value: 'hospital'
|
||||
},
|
||||
{
|
||||
sortable : true,
|
||||
text: 'Action',
|
||||
value: 'action',
|
||||
align: 'right'
|
||||
},
|
||||
],
|
||||
items: [
|
||||
{
|
||||
name: 'Fatemeh Shokouhi',
|
||||
date: '12/05/1397',
|
||||
operator: 'Shahid Beheshti',
|
||||
action: ''
|
||||
},
|
||||
{
|
||||
name: 'Fatemeh Fayyazi',
|
||||
date: '12/05/1397',
|
||||
operator: 'Emam Reza',
|
||||
action: ''
|
||||
},
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="mapouter">
|
||||
<div class="gmap_canvas">
|
||||
<iframe
|
||||
id="gmap_canvas"
|
||||
width="100%"
|
||||
height="100%"
|
||||
src="https://maps.google.com/maps?q=google&t=&z=13&ie=UTF8&iwloc=&output=embed"
|
||||
frameborder="0"
|
||||
scrolling="no"
|
||||
marginheight="0"
|
||||
marginwidth="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.mapouter {
|
||||
text-align:right;
|
||||
height:100%;
|
||||
width:100%;
|
||||
position: absolute;
|
||||
}
|
||||
.gmap_canvas {
|
||||
overflow:hidden;
|
||||
background:none!important;
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<v-form>
|
||||
<v-container grid-list-xs fluid>
|
||||
<material-card
|
||||
color="black"
|
||||
title="My Info">
|
||||
<v-layout align-center justify-center wrap class="px-5 my-3">
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-text-field
|
||||
name="username"
|
||||
label="User Name"
|
||||
color="black"
|
||||
v-model="username"
|
||||
id="id1"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-select
|
||||
:items="items"
|
||||
label="Gender"
|
||||
name="gender"
|
||||
v-model="gender"
|
||||
single-line
|
||||
id="id3"
|
||||
class="pa-2"
|
||||
color="black">
|
||||
</v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-text-field
|
||||
name="cellnumber"
|
||||
label="Cell Number"
|
||||
v-model="cellnumber"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
id="id2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout align-center justify-center wrap class="px-5 mb-3">
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-text-field
|
||||
name="emailaddress"
|
||||
label="Email Address"
|
||||
v-model="emailaddress"
|
||||
id="id4"
|
||||
class="px-2"
|
||||
color="black"
|
||||
style="padding-top:75px"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm8 md8>
|
||||
<v-textarea
|
||||
color="black"
|
||||
v-model="address"
|
||||
class="pa-2"
|
||||
name="address">
|
||||
<template v-slot:label>
|
||||
<div>
|
||||
Address
|
||||
</div>
|
||||
</template>
|
||||
</v-textarea>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap justify-center align-center>
|
||||
<v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
|
||||
<span class="white--text">SAVE</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
|
||||
<router-link to="/">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
|
||||
<v-icon class="black--text">keyboard_arrow_left</v-icon>
|
||||
<span class="black--text">Back</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username:'',
|
||||
gender:'',
|
||||
cellnumber:'',
|
||||
emailaddress:'',
|
||||
address:'',
|
||||
|
||||
items: [
|
||||
'Item 1',
|
||||
'Item 2',
|
||||
'Item 3',
|
||||
'Item 4'
|
||||
],
|
||||
}
|
||||
// const Info = Object.freeze({
|
||||
// username:'',
|
||||
// cellnumber:'',
|
||||
// emailaddress:'',
|
||||
// address:''
|
||||
// gender:0
|
||||
// })
|
||||
// return {
|
||||
// InfoForm : Object.assign({} ,Info),
|
||||
// Info
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<v-container
|
||||
fluid
|
||||
grid-list-xl
|
||||
fill-height>
|
||||
<v-layout
|
||||
justify-center
|
||||
align-center
|
||||
>
|
||||
<v-flex xs12>
|
||||
<material-card
|
||||
color="green">
|
||||
<div
|
||||
slot="header"
|
||||
>
|
||||
<div class="title font-weight-light mb-2">Notifications</div>
|
||||
<div class="category">
|
||||
Handcrafted by us with
|
||||
<v-icon
|
||||
size="17"
|
||||
>
|
||||
mdi-heart
|
||||
</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-card-text>
|
||||
<v-layout
|
||||
row
|
||||
wrap>
|
||||
<v-flex
|
||||
md6
|
||||
sm12>
|
||||
<h2 class="title font-weight-light mb-3">Notifications Style</h2>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="info"
|
||||
>
|
||||
This is a plain notification
|
||||
</material-notification>
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="info"
|
||||
dismissible
|
||||
>
|
||||
This is a notification with close button.
|
||||
</material-notification>
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="info"
|
||||
dismissible
|
||||
icon="mdi-bell-plus"
|
||||
>
|
||||
|
||||
This is a notification with close button and icon.
|
||||
</material-notification>
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="info"
|
||||
dismissible
|
||||
icon="mdi-bell-plus"
|
||||
>
|
||||
|
||||
This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.
|
||||
</material-notification>
|
||||
</v-flex>
|
||||
|
||||
<v-flex
|
||||
md6
|
||||
sm12>
|
||||
<h2 class="title font-weight-light">Notifcation States</h2>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="info"
|
||||
dismissible
|
||||
>
|
||||
<strong>INFO</strong> - This is a regular notification made with `color="info"`
|
||||
</material-notification>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="success"
|
||||
dismissible
|
||||
>
|
||||
<strong>SUCCESS</strong> - This is a regular notification made with `color="success"`
|
||||
</material-notification>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="warning"
|
||||
dismissible
|
||||
>
|
||||
<strong>WARNING</strong> - This is a regular notification made with `color="warning"`
|
||||
</material-notification>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="error"
|
||||
dismissible
|
||||
>
|
||||
<strong>DANGER</strong> - This is a regular notification made with `color="error"`
|
||||
</material-notification>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="purple"
|
||||
dismissible
|
||||
>
|
||||
<strong>PRIMARY</strong> - This is a regular notification made with `color="purple"`
|
||||
</material-notification>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<div class="text-xs-center">
|
||||
<h2 class="title font-weight-light mb-2">Notification Places</h2>
|
||||
<span class=" subheading font-weight-light grey--text">Click to view notifications</span>
|
||||
</div>
|
||||
|
||||
<v-container grid-list-lg>
|
||||
<v-layout
|
||||
justify-center
|
||||
row
|
||||
wrap>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('top', 'left')"
|
||||
>
|
||||
Top Left
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('top')"
|
||||
>
|
||||
Top Center
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout
|
||||
justify-center
|
||||
row
|
||||
wrap>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('top', 'right')"
|
||||
>
|
||||
Top Right
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('bottom', 'left')"
|
||||
>
|
||||
Bottom Left
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout
|
||||
justify-center
|
||||
row
|
||||
wrap>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('bottom')"
|
||||
>
|
||||
Bottom Center
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('bottom', 'right')"
|
||||
>
|
||||
Bottom Right
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
|
||||
<v-snackbar
|
||||
:color="color"
|
||||
:bottom="bottom"
|
||||
:top="top"
|
||||
:left="left"
|
||||
:right="right"
|
||||
v-model="snackbar"
|
||||
dark
|
||||
>
|
||||
<v-icon
|
||||
color="white"
|
||||
class="mr-3"
|
||||
>
|
||||
mdi-bell-plus
|
||||
</v-icon>
|
||||
<div>Welcome to <b>Vue Material Dashboard</b> - a beautiful freebie for every web developer.</div>
|
||||
<v-icon
|
||||
size="16"
|
||||
@click="snackbar = false"
|
||||
>
|
||||
mdi-close-circle
|
||||
</v-icon>
|
||||
</v-snackbar>
|
||||
</v-card-text>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
color: null,
|
||||
colors: [
|
||||
'purple',
|
||||
'info',
|
||||
'success',
|
||||
'warning',
|
||||
'error'
|
||||
],
|
||||
top: true,
|
||||
bottom: false,
|
||||
left: false,
|
||||
right: false,
|
||||
snackbar: false
|
||||
}),
|
||||
|
||||
methods: {
|
||||
snack (...args) {
|
||||
this.top = false
|
||||
this.bottom = false
|
||||
this.left = false
|
||||
this.right = false
|
||||
|
||||
for (const loc of args) {
|
||||
this[loc] = true
|
||||
}
|
||||
|
||||
this.color = this.colors[Math.floor(Math.random() * this.colors.length)]
|
||||
|
||||
this.snackbar = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<v-form v-model="valid">
|
||||
<v-container grid-list-xs>
|
||||
<v-layout row wrap class="justify-center">
|
||||
<v-flex xs12 md3 sm6 class="WM-WidthScreen-SM WM-WidthScreen-XS">
|
||||
<material-card color="black" title="Register Page">
|
||||
<v-layout column>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-text-field
|
||||
name="cellnumber"
|
||||
label="Cell Number"
|
||||
v-model="form.cellnumber"
|
||||
id="id1"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-text-field
|
||||
name="password"
|
||||
label="Password"
|
||||
v-model="form.password"
|
||||
:type="show1 ? 'text' : 'password'"
|
||||
:append-icon="show1 ? 'visibility' : 'visibility_off'"
|
||||
@click:append="show1 = !show1"
|
||||
id="id2"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-text-field
|
||||
name="name"
|
||||
label="Name"
|
||||
v-model="form.name"
|
||||
id="id3"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-select
|
||||
class="pa-2"
|
||||
v-model="form.select"
|
||||
:items="items"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Type"
|
||||
return-object
|
||||
single-line
|
||||
color="black"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
|
||||
<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">Register</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12 md6 sm6 class="text-md-right text-sm-center text-xs-center">
|
||||
<router-link to="/login">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-sign-in-alt</v-icon>
|
||||
<span class="black--text">Login</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "",
|
||||
data () {
|
||||
const defaultForm = Object.freeze({
|
||||
cellnumber: '',
|
||||
password: '',
|
||||
name: '',
|
||||
select: '',
|
||||
})
|
||||
return {
|
||||
form: Object.assign({}, defaultForm),
|
||||
valid : false,
|
||||
show1 : false,
|
||||
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' }
|
||||
],
|
||||
defaultForm
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<v-form>
|
||||
<v-container grid-list-xs>
|
||||
<material-card
|
||||
color="black"
|
||||
title="Submit Test Result">
|
||||
<v-layout align-center justify-center wrap class="px-5 my-3">
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-select
|
||||
:items="items"
|
||||
label="Choose Test Type"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm3 md3>
|
||||
<v-text-field
|
||||
name="testcode"
|
||||
label="Or Enter Test Code"
|
||||
id="id"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2 class="text-xs-center text-sm-center text-md-center">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" style="padding:10px 60px;">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-chevron-right</v-icon>
|
||||
<span class="black--text">GO</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap class="px-5 my-3">
|
||||
<v-divider></v-divider>
|
||||
</v-layout>
|
||||
<v-layout align-center justify-center wrap class="px-5 my-3">
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-text-field
|
||||
name="cssd"
|
||||
label="ID CSSD"
|
||||
color="black"
|
||||
id="id"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-text-field
|
||||
name="autoclave"
|
||||
label="ID AutoClave"
|
||||
color="black"
|
||||
id="id"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-select
|
||||
:items="items"
|
||||
label="Resualt"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap class="px-5 my-3">
|
||||
<v-divider></v-divider>
|
||||
</v-layout>
|
||||
<v-layout align-center justify-center wrap class="px-5 mt-2">
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
|
||||
<span class="white--text">SAVE</span>
|
||||
</v-btn>
|
||||
<router-link to="/dashboard">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
|
||||
<span class="black--text">Back</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "",
|
||||
data: () => ({
|
||||
items: [
|
||||
'Item 1',
|
||||
'Item 2',
|
||||
'Item 3',
|
||||
'Item 4'
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<v-form>
|
||||
<v-container grid-list-xs>
|
||||
<v-layout row wrap>
|
||||
<material-card color="black" title="User Info">
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-text-field
|
||||
name="name"
|
||||
label="label"
|
||||
id="id"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</material-card>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "",
|
||||
data: () => ({
|
||||
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
Nutrition
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="search"
|
||||
label="Search"
|
||||
single-line
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</v-card-title>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
:search="search"
|
||||
>
|
||||
<template v-slot:items="props">
|
||||
<td>{{ props.item.name }}</td>
|
||||
<td class="text-xs-right">{{ props.item.calories }}</td>
|
||||
<td class="text-xs-right">{{ props.item.fat }}</td>
|
||||
<td class="text-xs-right">{{ props.item.carbs }}</td>
|
||||
<td class="text-xs-right">{{ props.item.protein }}</td>
|
||||
<td class="text-xs-right">{{ props.item.iron }}</td>
|
||||
</template>
|
||||
<v-alert v-slot:no-results :value="true" color="error" icon="warning">
|
||||
Your search for "{{ search }}" found no results.
|
||||
</v-alert>
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
search: '',
|
||||
headers: [
|
||||
{
|
||||
text: 'Dessert (100g serving)',
|
||||
align: 'left',
|
||||
sortable: false,
|
||||
value: 'name'
|
||||
},
|
||||
{ text: 'Calories', value: 'calories' },
|
||||
{ text: 'Fat (g)', value: 'fat' },
|
||||
{ text: 'Carbs (g)', value: 'carbs' },
|
||||
{ text: 'Protein (g)', value: 'protein' },
|
||||
{ text: 'Iron (%)', value: 'iron' }
|
||||
],
|
||||
desserts: [
|
||||
{
|
||||
name: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6.0,
|
||||
carbs: 24,
|
||||
protein: 4.0,
|
||||
iron: '1%'
|
||||
},
|
||||
{
|
||||
name: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 9.0,
|
||||
carbs: 37,
|
||||
protein: 4.3,
|
||||
iron: '1%'
|
||||
},
|
||||
{
|
||||
name: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 16.0,
|
||||
carbs: 23,
|
||||
protein: 6.0,
|
||||
iron: '7%'
|
||||
},
|
||||
{
|
||||
name: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 3.7,
|
||||
carbs: 67,
|
||||
protein: 4.3,
|
||||
iron: '8%'
|
||||
},
|
||||
{
|
||||
name: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 16.0,
|
||||
carbs: 49,
|
||||
protein: 3.9,
|
||||
iron: '16%'
|
||||
},
|
||||
{
|
||||
name: 'Jelly bean',
|
||||
calories: 375,
|
||||
fat: 0.0,
|
||||
carbs: 94,
|
||||
protein: 0.0,
|
||||
iron: '0%'
|
||||
},
|
||||
{
|
||||
name: 'Lollipop',
|
||||
calories: 392,
|
||||
fat: 0.2,
|
||||
carbs: 98,
|
||||
protein: 0,
|
||||
iron: '2%'
|
||||
},
|
||||
{
|
||||
name: 'Honeycomb',
|
||||
calories: 408,
|
||||
fat: 3.2,
|
||||
carbs: 87,
|
||||
protein: 6.5,
|
||||
iron: '45%'
|
||||
},
|
||||
{
|
||||
name: 'Donut',
|
||||
calories: 452,
|
||||
fat: 25.0,
|
||||
carbs: 51,
|
||||
protein: 4.9,
|
||||
iron: '22%'
|
||||
},
|
||||
{
|
||||
name: 'KitKat',
|
||||
calories: 518,
|
||||
fat: 26.0,
|
||||
carbs: 65,
|
||||
protein: 7,
|
||||
iron: '6%'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<v-container
|
||||
fill-height
|
||||
fluid
|
||||
grid-list-xl
|
||||
>
|
||||
<v-layout
|
||||
justify-center
|
||||
wrap
|
||||
>
|
||||
<v-flex
|
||||
md12
|
||||
>
|
||||
<material-card
|
||||
color="green"
|
||||
title="Simple Table"
|
||||
text="Here is a subtitle for this table"
|
||||
>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="items"
|
||||
hide-actions
|
||||
>
|
||||
<template
|
||||
slot="headerCell"
|
||||
slot-scope="{ header }"
|
||||
>
|
||||
<span
|
||||
class="subheading font-weight-light text-success text--darken-3"
|
||||
v-text="header.text"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
slot="items"
|
||||
slot-scope="{ item }"
|
||||
>
|
||||
<td>{{ item.name }}</td>
|
||||
<td>{{ item.country }}</td>
|
||||
<td>{{ item.city }}</td>
|
||||
<td class="text-xs-right">{{ item.salary }}</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
md12
|
||||
>
|
||||
<material-card
|
||||
color="green"
|
||||
flat
|
||||
full-width
|
||||
title="Table on Plain Background"
|
||||
text="Here is a subtitle for this table"
|
||||
>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="items.slice(0, 7)"
|
||||
hide-actions
|
||||
>
|
||||
<template
|
||||
slot="headerCell"
|
||||
slot-scope="{ header }"
|
||||
>
|
||||
<span
|
||||
class="subheading font-weight-light text--darken-3"
|
||||
v-text="header.text"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
slot="items"
|
||||
slot-scope="{ item }"
|
||||
>
|
||||
<td>{{ item.name }}</td>
|
||||
<td>{{ item.country }}</td>
|
||||
<td>{{ item.city }}</td>
|
||||
<td class="text-xs-right">{{ item.salary }}</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
headers: [
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Name',
|
||||
value: 'name'
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Country',
|
||||
value: 'country'
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'City',
|
||||
value: 'city'
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Salary',
|
||||
value: 'salary',
|
||||
align: 'right'
|
||||
}
|
||||
],
|
||||
items: [
|
||||
{
|
||||
name: 'Dakota Rice',
|
||||
country: 'Niger',
|
||||
city: 'Oud-Tunrhout',
|
||||
salary: '$35,738'
|
||||
},
|
||||
{
|
||||
name: 'Minerva Hooper',
|
||||
country: 'Curaçao',
|
||||
city: 'Sinaai-Waas',
|
||||
salary: '$23,738'
|
||||
}, {
|
||||
name: 'Sage Rodriguez',
|
||||
country: 'Netherlands',
|
||||
city: 'Overland Park',
|
||||
salary: '$56,142'
|
||||
}, {
|
||||
name: 'Philip Chanley',
|
||||
country: 'Korea, South',
|
||||
city: 'Gloucester',
|
||||
salary: '$38,735'
|
||||
}, {
|
||||
name: 'Doris Greene',
|
||||
country: 'Malawi',
|
||||
city: 'Feldkirchen in Kārnten',
|
||||
salary: '$63,542'
|
||||
}, {
|
||||
name: 'Mason Porter',
|
||||
country: 'Chile',
|
||||
city: 'Gloucester',
|
||||
salary: '$78,615'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,392 @@
|
||||
<template>
|
||||
<v-form id="ParentForm">
|
||||
<v-container grid-list-xs>
|
||||
<material-card
|
||||
color="black"
|
||||
title="Add a New Test"
|
||||
class="">
|
||||
<v-layout row wrap class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Relative">
|
||||
<v-layout row wrap id="Form" class="ma-2">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
name="name"
|
||||
label="Name"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
id="name"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-select
|
||||
:items="Items[0]"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Type"
|
||||
v-model="SelectedType[0]"
|
||||
single-line
|
||||
color="black"
|
||||
class="pa-2"
|
||||
@change="DefaultValue(0, SelectedType[0])"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<!-- Text Input Section -->
|
||||
<v-flex xs12 md3 sm3 v-if="SelectedType[0] === 'text'">
|
||||
<v-text-field
|
||||
name="size"
|
||||
label="Size"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
id="InputSize"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<!-- SelectBox Section -->
|
||||
<v-layout class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full" row wrap v-if="SelectedType[0] === 'select'">
|
||||
<v-layout row wrap class="WM-Relative WM-Width-Full">
|
||||
<v-flex xs12 md3 sm3 v-for="(SelectBox , Key) in ArraySelectBox[0]" :key="Key" class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative">
|
||||
<v-text-field
|
||||
name="title"
|
||||
label="Title"
|
||||
color="black"
|
||||
class="pa-2 Input"
|
||||
v-model="SelectBox.value"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
color="pink"
|
||||
v-if="Key >= 1"
|
||||
@click="RemoveInput('ArraySelectBox', 0, Key)"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
|
||||
REMOVE</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
right
|
||||
bottom
|
||||
small
|
||||
@click="InputDuplicate('ArraySelectBox', 0)"
|
||||
color="black"
|
||||
class="mb-2">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<!-- Checkbox Section -->
|
||||
<v-layout row wrap class="pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full" v-if="SelectedType[0] === 'checkbox'">
|
||||
<v-layout row wrap class="WM-Width-Full WM-Relative">
|
||||
<v-flex xs12 sm3 md3 v-for="(Checkbox , Key) in ArrayCheckBox[0]" :key="Key" class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative">
|
||||
<v-text-field
|
||||
name="title"
|
||||
label="Title"
|
||||
color="black"
|
||||
class="pa-2 Input"
|
||||
v-model="Checkbox.value"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
@click="RemoveInput('ArrayCheckBox', 0, Key)"
|
||||
v-if="Key >= 1"
|
||||
color="pink">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
|
||||
<span class="white--text">REMOVE</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
@click="InputDuplicate('ArrayCheckBox', 0)"
|
||||
class="mb-2"
|
||||
color="black">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<!-- Form Section -->
|
||||
<v-layout row wrap v-if="SelectedType[0] === 'form'" class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative">
|
||||
<v-layout row wrap v-for="(Div , ArrayDivKey) in ArrayDiv" :key="ArrayDivKey" class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Color-LightGrey WM-Width-Full WM-Relative Form">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
name="name"
|
||||
label="Name"
|
||||
id=""
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-select
|
||||
:items="Items[1]"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Type"
|
||||
v-model="SelectedType[1][ArrayDivKey]"
|
||||
single-line
|
||||
color="black"
|
||||
class="pa-2"
|
||||
@change="DefaultValue(ArrayDivKey, SelectedType[1][ArrayDivKey])"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3 v-if="SelectedType[1][ArrayDivKey] === 'text'">
|
||||
<v-text-field
|
||||
name="size"
|
||||
label="Size"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
id="InputSize"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<!-- Inner Form Selectbox Section -->
|
||||
<v-layout row wrap class="pa-3 mb-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full" v-if="SelectedType[1][ArrayDivKey] === 'select'" >
|
||||
<v-layout row wrap class="WM-Relative WM-Width-Full">
|
||||
<v-flex xs12 md3 sm3 v-for="(SelectBox , Key) in ArraySelectBox[ArrayDivKey]" :key="Key" class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative">
|
||||
<v-text-field
|
||||
name="title"
|
||||
label="Title"
|
||||
color="black"
|
||||
class="pa-2 Input"
|
||||
v-model="SelectBox.value"
|
||||
id="value"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
color="pink"
|
||||
@click="RemoveInput('ArraySelectBox', ArrayDivKey, Key)"
|
||||
v-if="Key >= 1"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
|
||||
REMOVE</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
right
|
||||
bottom
|
||||
small
|
||||
@click="InputDuplicate('ArraySelectBox', ArrayDivKey)"
|
||||
color="black">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<!-- Inner Form Checkbox Section -->
|
||||
<v-layout row wrap class="pa-3 mb-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full" v-if="SelectedType[1][ArrayDivKey] === 'checkbox'" >
|
||||
<v-layout row wrap class="WM-Relative WM-Width-Full">
|
||||
<v-flex xs12 md3 sm3 v-if="Key >= 0" v-for="(CheckBox , Key) in ArrayCheckBox[ArrayDivKey]" :key="Key" class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative">
|
||||
<v-text-field
|
||||
name="title"
|
||||
label="Title"
|
||||
color="black"
|
||||
class="pa-2 Input"
|
||||
v-model="CheckBox.value"
|
||||
id="value"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
color="pink"
|
||||
@click="RemoveInput('ArrayCheckBox', ArrayDivKey, Key)"
|
||||
v-if="Key >= 1"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
|
||||
REMOVE</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
right
|
||||
bottom
|
||||
small
|
||||
@click="InputDuplicate('ArrayCheckBox', ArrayDivKey)"
|
||||
color="black">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
top
|
||||
color="pink"
|
||||
@click="Remove(ArrayDivKey)"
|
||||
id="RemoveFormDuplicator"
|
||||
>
|
||||
<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="FormDuplicator"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
ADD</v-btn>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
right
|
||||
bottom
|
||||
small
|
||||
@click="InputDuplicate('ArrayForm', 0)"
|
||||
color="pink"
|
||||
class="mb-2">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<v-layout row wrap align-center justify-center class="mt-4">
|
||||
<v-btn class="WM-CyanBlueGradient-BG" v-if="Hidden" style="padding:10px 60px">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
|
||||
<span class="white--text">Generate Form</span>
|
||||
</v-btn>
|
||||
<router-link to="/dashboard">
|
||||
<v-btn
|
||||
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
|
||||
<span class="black--text">Back</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "",
|
||||
data () {
|
||||
return {
|
||||
SelectedType : {0 : 0, 1 : {}},
|
||||
InputDuplicator : {0:0},
|
||||
ArrayInput : [{value:''}],
|
||||
ArraySelectBox : [],
|
||||
ArrayCheckBox : [],
|
||||
ArrayForm : [],
|
||||
SelectBox : {},
|
||||
CheckBox : {},
|
||||
ArrayDiv : [0],
|
||||
Hidden : false,
|
||||
select: { state: 'Text', abbr: 'text' },
|
||||
Items: [
|
||||
[
|
||||
{ state: 'Text', abbr: 'text' },
|
||||
{ state: 'Checkbox', abbr: 'checkbox' },
|
||||
{ state: 'Select', abbr: 'select' },
|
||||
{ state: 'Form', abbr: 'form' },
|
||||
],
|
||||
[
|
||||
{ state: 'Text', abbr: 'text' },
|
||||
{ state: 'Checkbox', abbr: 'checkbox' },
|
||||
{ state: 'Select', abbr: 'select' },
|
||||
]
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
Duplicator() {
|
||||
this.ArrayDiv.push(this.ArrayDiv.length);
|
||||
},
|
||||
Remove (index) {
|
||||
this.ArrayDiv.splice(index, 1);
|
||||
},
|
||||
RemoveInput (Type, ArrayDivindex, index) {
|
||||
if (Type === 'ArraySelectBox') {
|
||||
this.ArraySelectBox[ArrayDivindex].splice(index, 1);
|
||||
this.CreateAgainArray(this.ArraySelectBox, 'ArraySelectBox');
|
||||
}
|
||||
else {
|
||||
this.ArrayCheckBox[ArrayDivindex].splice(index, 1);
|
||||
this.CreateAgainArray(this.ArrayCheckBox, 'ArrayCheckBox');
|
||||
}
|
||||
},
|
||||
InputDuplicate (Type, ArrayDivindex) {
|
||||
if (Type === 'ArraySelectBox') {
|
||||
if (this.ArraySelectBox[ArrayDivindex] == undefined) {
|
||||
this.ArraySelectBox[ArrayDivindex] = [];
|
||||
}
|
||||
this.ArraySelectBox[ArrayDivindex].push({value : ''});
|
||||
this.CreateAgainArray(this.ArraySelectBox, 'ArraySelectBox');
|
||||
}
|
||||
else if(Type === 'ArrayCheckBox'){
|
||||
if (this.ArrayCheckBox[ArrayDivindex] == undefined) {
|
||||
this.ArrayCheckBox[ArrayDivindex] = [];
|
||||
}
|
||||
this.ArrayCheckBox[ArrayDivindex].push({value : ''});
|
||||
this.CreateAgainArray(this.ArrayCheckBox, 'ArrayCheckBox');
|
||||
}
|
||||
else {
|
||||
if (this.ArrayForm[ArrayDivindex] == undefined) {
|
||||
this.ArrayForm[ArrayDivindex] = [];
|
||||
}
|
||||
else {
|
||||
this.ArrayForm[ArrayDivindex].push({value : ''});
|
||||
this.CreateAgainArray(this.ArrayForm, 'ArrayForm');
|
||||
}
|
||||
}
|
||||
},
|
||||
CreateAgainArray(arrayDiv, Type) {
|
||||
let array = arrayDiv;
|
||||
if (Type === 'ArraySelectBox') {
|
||||
this.ArraySelectBox = [];
|
||||
this.ArraySelectBox = array;
|
||||
}
|
||||
else if(Type === 'ArrayCheckBox'){
|
||||
this.ArrayCheckBox = [];
|
||||
this.ArrayCheckBox = array;
|
||||
}
|
||||
else {
|
||||
this.ArrayForm = [];
|
||||
this.ArrayForm = array;
|
||||
}
|
||||
},
|
||||
DefaultValue(ArrayDivindex, SelectedType) {
|
||||
this.Hidden = true;
|
||||
if (SelectedType == 'select') {
|
||||
if (this.ArraySelectBox[ArrayDivindex] == undefined) {
|
||||
this.ArraySelectBox[ArrayDivindex] = [];
|
||||
this.ArraySelectBox[ArrayDivindex].push({value : ''});
|
||||
}
|
||||
} else if(SelectedType == 'checkbox') {
|
||||
if (this.ArrayCheckBox[ArrayDivindex] == undefined) {
|
||||
this.ArrayCheckBox[ArrayDivindex] = [];
|
||||
this.ArrayCheckBox[ArrayDivindex].push({value : ''});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.WM-Border-Gray {
|
||||
border-color: #aaa !important;
|
||||
}
|
||||
.WM-Color-LightGrey {
|
||||
background-color : #F5F5F5;
|
||||
}
|
||||
.v-btn--top.v-btn--absolute.v-btn--small {
|
||||
top: -25px !important;
|
||||
}
|
||||
.v-btn--bottom.v-btn--absolute.v-btn--small {
|
||||
bottom: -24px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<v-container
|
||||
fill-height
|
||||
fluid
|
||||
>
|
||||
<v-layout
|
||||
justify-center
|
||||
align-center
|
||||
>
|
||||
<v-flex xs12>
|
||||
<material-card
|
||||
color="green"
|
||||
title="Material Dashboard Heading"
|
||||
text="Created using Roboto Font Family"
|
||||
>
|
||||
<v-card-text>
|
||||
<h2 class="font-weight-light mb-4">Typography</h2>
|
||||
|
||||
<v-container
|
||||
class="pa-0"
|
||||
grid-list-xl
|
||||
fluid
|
||||
>
|
||||
<v-layout
|
||||
v-for="(t, i) in typography"
|
||||
:key="i"
|
||||
align-end
|
||||
wrap
|
||||
>
|
||||
<v-flex
|
||||
xs1
|
||||
md3>
|
||||
<span
|
||||
class="tim-note"
|
||||
v-text="t[0]"
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex xs8>
|
||||
<component
|
||||
:is="t[2]"
|
||||
:class="i"
|
||||
>
|
||||
<template v-if="i !== 'quote'">
|
||||
{{ t[1] }}
|
||||
</template>
|
||||
|
||||
<p v-if="i === 'quote'">{{ t[1] }}</p>
|
||||
<small v-if="i === 'quote'">Kanye West, Musician</small>
|
||||
|
||||
<template v-if="i === 'small'">
|
||||
<br>
|
||||
<small>Use 'small' tag for the headers</small>
|
||||
</template>
|
||||
</component>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const leader = 'I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.'
|
||||
const leaderShort = leader.slice(0, 105) + '...'
|
||||
const material = 'The Life of Material Dashboard'
|
||||
const small = 'Header with small subtitle'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
typography: {
|
||||
'heading-1': ['Header 1', material, 'h1'],
|
||||
'heading-2': ['Header 2', material, 'h2'],
|
||||
'heading-3': ['Header 3', material, 'h3'],
|
||||
'heading-4': ['Header 4', material, 'h4'],
|
||||
'heading-5': ['Header 5', material, 'h5'],
|
||||
'heading-6 text-uppercase': ['Header 6', material, 'h6'],
|
||||
'': ['Paragraph', leader, 'p'],
|
||||
'quote': ['Quote', leader, 'blockquote'],
|
||||
'text--disabled': ['Muted Text', leaderShort, 'p'],
|
||||
'text-primary': ['Primary Text', leaderShort, 'p'],
|
||||
'text-info': ['Info Text', leaderShort, 'p'],
|
||||
'text-success': ['Success Text', leaderShort, 'p'],
|
||||
'text-warning': ['Warning Text', leaderShort, 'p'],
|
||||
'text-danger': ['Danger Text', leaderShort, 'p'],
|
||||
'small': ['Small Tag', small, 'h2']
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.tim-note {
|
||||
bottom: 10px;
|
||||
color: #c0c1c2;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
left: 0;
|
||||
margin-left: 20px;
|
||||
width: 260px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-layout justify-center>
|
||||
<v-flex
|
||||
xs12
|
||||
sm10
|
||||
md8
|
||||
>
|
||||
<material-card
|
||||
color="primary"
|
||||
title="Vue Material Dashboard PRO"
|
||||
text="Are you looking for more components? Please check our Premium Version of Vue Material Dashboard."
|
||||
>
|
||||
<table class="v-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th/>
|
||||
<th class="subheading font-weight-light">Free</th>
|
||||
<th class="subheading font-weight-light">PRO</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-xs-center">
|
||||
<tr>
|
||||
<th class="text-xs-left font-weight-light subheading">Components</th>
|
||||
<td>60</td>
|
||||
<td>200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-xs-left font-weight-light subheading">Plugins</th>
|
||||
<td>2</td>
|
||||
<td>15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-xs-left font-weight-light subheading">Example Pages</th>
|
||||
<td>3</td>
|
||||
<td>27</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-xs-left font-weight-light subheading">Login, Register, Pricing, Lock Pages</th>
|
||||
<td>
|
||||
<v-icon color="error">mdi-close</v-icon>
|
||||
</td>
|
||||
<td>
|
||||
<v-icon color="success">mdi-check</v-icon>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-xs-left font-weight-light subheading">Premium Support</th>
|
||||
<td>
|
||||
<v-icon color="error">mdi-close</v-icon>
|
||||
</td>
|
||||
<td>
|
||||
<v-icon color="success">mdi-check</v-icon>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th/>
|
||||
<td>Free</td>
|
||||
<td>Just $59</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th/>
|
||||
<td>
|
||||
<v-btn
|
||||
class="subheading white--text font-weight-light"
|
||||
round
|
||||
large
|
||||
color="grey"
|
||||
disabled
|
||||
>Current Version</v-btn>
|
||||
</td>
|
||||
<td>
|
||||
<v-btn
|
||||
class="subheading white--text font-weight-light"
|
||||
round
|
||||
large
|
||||
color="cyan"
|
||||
>Upgrade to Pro</v-btn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<v-container
|
||||
fill-height
|
||||
fluid
|
||||
grid-list-xl>
|
||||
<v-layout
|
||||
justify-center
|
||||
wrap
|
||||
>
|
||||
<v-flex
|
||||
xs12
|
||||
md8
|
||||
>
|
||||
<material-card
|
||||
color="green"
|
||||
title="Edit Profile"
|
||||
text="Complete your profile"
|
||||
>
|
||||
<v-form>
|
||||
<v-container py-0>
|
||||
<v-layout wrap>
|
||||
<v-flex
|
||||
xs12
|
||||
md4
|
||||
>
|
||||
<v-text-field
|
||||
label="Company (disabled)"
|
||||
disabled/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md4
|
||||
>
|
||||
<v-text-field
|
||||
class="purple-input"
|
||||
label="User Name"
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md4
|
||||
>
|
||||
<v-text-field
|
||||
label="Email Address"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md6
|
||||
>
|
||||
<v-text-field
|
||||
label="First Name"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md6
|
||||
>
|
||||
<v-text-field
|
||||
label="Last Name"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md12
|
||||
>
|
||||
<v-text-field
|
||||
label="Adress"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md4>
|
||||
<v-text-field
|
||||
label="City"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md4>
|
||||
<v-text-field
|
||||
label="Country"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md4>
|
||||
<v-text-field
|
||||
class="purple-input"
|
||||
label="Postal Code"
|
||||
type="number"/>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-textarea
|
||||
class="purple-input"
|
||||
label="About Me"
|
||||
value="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
text-xs-right
|
||||
>
|
||||
<v-btn
|
||||
class="mx-0 font-weight-light"
|
||||
color="success"
|
||||
>
|
||||
Update Profile
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
<v-flex xs12 md4>
|
||||
<material-card class="v-card-profile">
|
||||
<v-avatar slot="offset" class="mx-auto d-block" size="130" >
|
||||
<img src="/img/" >
|
||||
</v-avatar>
|
||||
<v-card-text class="text-xs-center">
|
||||
<h6 class="category text-gray font-weight-thin mb-3">CEO / CO-FOUNDER</h6>
|
||||
<h4 class="card-title font-weight-light">Alec Thompson</h4>
|
||||
<p class="card-description font-weight-light">Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...</p>
|
||||
<v-btn
|
||||
color="success"
|
||||
round
|
||||
class="font-weight-light"
|
||||
>Follow</v-btn>
|
||||
</v-card-text>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
//
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user