mirror of
https://git.meshkee.com/cssd/cssd-back.git
synced 2026-10-13 09:51:06 +03:30
init project
This commit is contained in:
saeid
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<v-navigation-drawer
|
||||
id="app-drawer"
|
||||
v-model="inputValue"
|
||||
app
|
||||
dark
|
||||
floating
|
||||
persistent
|
||||
mobile-break-point="991"
|
||||
width="260"
|
||||
>
|
||||
<v-img
|
||||
:src="image"
|
||||
height="100%"
|
||||
>
|
||||
<v-layout
|
||||
class="fill-height"
|
||||
tag="v-list"
|
||||
column
|
||||
>
|
||||
<v-list-tile avatar>
|
||||
<v-list-tile-avatar
|
||||
color="white"
|
||||
>
|
||||
<!-- <v-img
|
||||
:src="logo"
|
||||
height="34"
|
||||
contain
|
||||
/> -->
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-title class="title">
|
||||
CSSD-DOC
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-divider/>
|
||||
<v-list-tile
|
||||
v-if="responsive"
|
||||
>
|
||||
<v-text-field
|
||||
class="purple-input search-input"
|
||||
label="Search..."
|
||||
color="purple"
|
||||
/>
|
||||
</v-list-tile>
|
||||
<v-list-tile
|
||||
v-for="(link, i) in links"
|
||||
:key="i"
|
||||
:to="link.to"
|
||||
:active-class="color"
|
||||
avatar
|
||||
class="v-list-item"
|
||||
>
|
||||
<v-list-tile-action>
|
||||
<v-icon>{{ link.icon }}</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title
|
||||
v-text="link.text"
|
||||
/>
|
||||
</v-list-tile>
|
||||
<!-- <v-list-tile
|
||||
disabled
|
||||
active-class="primary"
|
||||
class="v-list-item v-list__tile--buy"
|
||||
to="/upgrade"
|
||||
>
|
||||
<v-list-tile-action>
|
||||
<v-icon>mdi-package-up</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title class="font-weight-light">
|
||||
Upgrade To PRO
|
||||
</v-list-tile-title>
|
||||
</v-list-tile> -->
|
||||
</v-layout>
|
||||
</v-img>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
import {
|
||||
mapMutations,
|
||||
mapState
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
logo: './img/vuetifylogo.png',
|
||||
links: [
|
||||
{
|
||||
to: '/dashboard',
|
||||
icon: 'mdi-view-dashboard',
|
||||
text: 'Dashboard'
|
||||
},
|
||||
{
|
||||
to: '/my-info',
|
||||
icon: 'mdi-account',
|
||||
text: 'My Info'
|
||||
},
|
||||
{
|
||||
to: '/all-resualttest',
|
||||
icon: 'description',
|
||||
text: 'All Test Result'
|
||||
},
|
||||
{
|
||||
to: '/manage-users',
|
||||
icon: 'far fa-address-book',
|
||||
text: 'Manage Users'
|
||||
},
|
||||
{
|
||||
to: '/test-creator',
|
||||
icon: 'fas fa-vial',
|
||||
text: 'Add a Test Type'
|
||||
},
|
||||
{
|
||||
to: '/submit-test-result',
|
||||
icon: 'done',
|
||||
text: 'Submit Test Result'
|
||||
},
|
||||
{
|
||||
to: '/login',
|
||||
icon: 'input',
|
||||
text: 'Login'
|
||||
},
|
||||
{
|
||||
to: '/register',
|
||||
icon: 'fas fa-plus',
|
||||
text: 'Register'
|
||||
},
|
||||
],
|
||||
responsive: false
|
||||
}),
|
||||
computed: {
|
||||
...mapState('app', ['image', 'color']),
|
||||
inputValue: {
|
||||
get () {
|
||||
return this.$store.state.app.drawer
|
||||
},
|
||||
set (val) {
|
||||
this.setDrawer(val)
|
||||
}
|
||||
},
|
||||
items () {
|
||||
return this.$t('Layout.View.items')
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.onResponsiveInverted()
|
||||
window.addEventListener('resize', this.onResponsiveInverted)
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('resize', this.onResponsiveInverted)
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('app', ['setDrawer', 'toggleDrawer']),
|
||||
onResponsiveInverted () {
|
||||
if (window.innerWidth < 991) {
|
||||
this.responsive = true
|
||||
} else {
|
||||
this.responsive = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app-drawer {
|
||||
.v-list__tile {
|
||||
border-radius: 4px;
|
||||
|
||||
&--buy {
|
||||
margin-top: auto;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.v-image__image--contain {
|
||||
top: 9px;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
margin-bottom: 30px !important;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<v-menu
|
||||
:close-on-content-click="false"
|
||||
bottom
|
||||
left
|
||||
min-width="300"
|
||||
max-width="300"
|
||||
nudge-left="12"
|
||||
offset-x
|
||||
transition="slide-y-transition"
|
||||
>
|
||||
<v-btn
|
||||
slot="activator"
|
||||
class="elevation-0"
|
||||
color="grey"
|
||||
dark
|
||||
fab
|
||||
fixed
|
||||
style="top: 96px;"
|
||||
top
|
||||
>
|
||||
<v-icon>mdi-settings</v-icon>
|
||||
</v-btn>
|
||||
<v-card>
|
||||
<v-container grid-list-xl>
|
||||
<v-layout wrap>
|
||||
<v-flex xs12>
|
||||
<div class="text-xs-center body-2 text-uppercase sidebar-filter">Sidebar Filters</div>
|
||||
|
||||
<v-layout justify-center>
|
||||
<v-avatar
|
||||
v-for="c in colors"
|
||||
:key="c"
|
||||
:class="[c === color ? 'color-active color-' + c: 'color-' + c]"
|
||||
size="23"
|
||||
|
||||
@click="setColor(c)"
|
||||
/>
|
||||
</v-layout>
|
||||
<v-divider class="mt-3"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
>
|
||||
<div class="text-xs-center body-2 text-uppercase sidebar-filter">Images</div>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
v-for="img in images"
|
||||
:key="img"
|
||||
xs3
|
||||
>
|
||||
<v-img
|
||||
:class="[image === img ? 'image-active' : '']"
|
||||
:src="img"
|
||||
height="120"
|
||||
@click.native="setImage(img)"
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-btn
|
||||
href="https://www.creative-tim.com/product/vuetify-material-dashboard"
|
||||
target="_blank"
|
||||
color="success"
|
||||
block
|
||||
>
|
||||
Free Download
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-btn
|
||||
href="https://demos.creative-tim.com/vuetify-material-dashboard/documentation"
|
||||
target="_blank"
|
||||
class="white--text"
|
||||
color="primary"
|
||||
block
|
||||
>
|
||||
Documentation
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<div class="text-xs-center body-2 text-uppercase">
|
||||
<div class=" sidebar-filter">
|
||||
Thank You for Sharing!
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<v-btn
|
||||
color="indigo"
|
||||
class="mr-2 v-btn-facebook"
|
||||
fab
|
||||
icon
|
||||
small
|
||||
round
|
||||
>
|
||||
<v-icon>mdi-facebook</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="cyan"
|
||||
class="v-btn-twitter"
|
||||
fab
|
||||
icon
|
||||
small
|
||||
round
|
||||
>
|
||||
<v-icon>mdi-twitter</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
import {
|
||||
mapMutations,
|
||||
mapState
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
colors: [
|
||||
'primary',
|
||||
'info',
|
||||
'success',
|
||||
'warning',
|
||||
'danger'
|
||||
],
|
||||
images: [
|
||||
'https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-1.23832d31.jpg',
|
||||
'https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-2.32103624.jpg',
|
||||
'https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-3.3a54f533.jpg',
|
||||
'https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-4.3b7e38ed.jpg'
|
||||
]
|
||||
}),
|
||||
|
||||
computed: {
|
||||
...mapState('app', ['image', 'color']),
|
||||
color () {
|
||||
return this.$store.state.app.color
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations('app', ['setImage']),
|
||||
setColor (color) {
|
||||
this.$store.state.app.color = color
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.v-avatar,
|
||||
.v-responsive {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<v-footer
|
||||
id="core-footer"
|
||||
absolute
|
||||
height="82"
|
||||
>
|
||||
<div class="footer-items">
|
||||
<span
|
||||
v-for="link in links"
|
||||
:key="link.name"
|
||||
>
|
||||
<a
|
||||
:href="link.Link"
|
||||
class="tertiary--text footer-links">{{ link.name }}</a>
|
||||
</span>
|
||||
</div>
|
||||
<v-spacer/>
|
||||
<!-- <span class="font-weight-light copyright">
|
||||
©
|
||||
{{ (new Date()).getFullYear() }}
|
||||
<a
|
||||
href="https://www.creative-tim.com/"
|
||||
target="_blank">Creative Tim</a>, made with
|
||||
<v-icon
|
||||
color="tertiary"
|
||||
size="17">mdi-heart</v-icon>
|
||||
for a better web
|
||||
</span> -->
|
||||
</v-footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
links: [
|
||||
{ name: 'Home', Link: '/dashboard' },
|
||||
// { name: 'Creative Tim', Link: 'https://www.creative-tim.com' },
|
||||
{ name: 'About Us', Link: 'https://creative-tim.com/presentation' },
|
||||
// { name: 'Blog', Link: 'https://blog.creative-tim.com' }
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#core-footer {
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<v-toolbar
|
||||
id="core-toolbar"
|
||||
|
||||
flat
|
||||
prominent
|
||||
style="background: #eee;"
|
||||
>
|
||||
<div class="v-toolbar-title">
|
||||
<v-toolbar-title
|
||||
class="tertiary--text font-weight-light"
|
||||
>
|
||||
<v-btn
|
||||
v-if="responsive"
|
||||
class="default v-btn--simple"
|
||||
dark
|
||||
icon
|
||||
@click.stop="onClickBtn"
|
||||
>
|
||||
<v-icon>mdi-view-list</v-icon>
|
||||
</v-btn>
|
||||
{{ title }}
|
||||
</v-toolbar-title>
|
||||
</div>
|
||||
|
||||
<v-spacer />
|
||||
<v-toolbar-items>
|
||||
<v-flex
|
||||
align-center
|
||||
layout
|
||||
py-2
|
||||
>
|
||||
<v-text-field
|
||||
v-if="responsiveInput"
|
||||
class="mr-4 mt-2 purple-input"
|
||||
label="Search..."
|
||||
hide-details
|
||||
color="purple"
|
||||
/>
|
||||
<router-link
|
||||
v-ripple
|
||||
class="toolbar-items"
|
||||
to="/"
|
||||
>
|
||||
<v-icon color="tertiary">mdi-view-dashboard</v-icon>
|
||||
</router-link>
|
||||
<v-menu
|
||||
bottom
|
||||
left
|
||||
content-class="dropdown-menu"
|
||||
offset-y
|
||||
transition="slide-y-transition">
|
||||
<router-link
|
||||
v-ripple
|
||||
slot="activator"
|
||||
class="toolbar-items"
|
||||
to="/notifications"
|
||||
>
|
||||
<v-badge
|
||||
color="error"
|
||||
overlap
|
||||
>
|
||||
<template slot="badge">
|
||||
{{ notifications.length }}
|
||||
</template>
|
||||
<v-icon color="tertiary">mdi-bell</v-icon>
|
||||
</v-badge>
|
||||
</router-link>
|
||||
<v-card>
|
||||
<v-list dense>
|
||||
<v-list-tile
|
||||
v-for="notification in notifications"
|
||||
:key="notification"
|
||||
@click="onClick"
|
||||
>
|
||||
<v-list-tile-title
|
||||
v-text="notification"
|
||||
/>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
<router-link
|
||||
v-ripple
|
||||
class="toolbar-items"
|
||||
to="/user-profile"
|
||||
>
|
||||
<v-icon color="tertiary">mdi-account</v-icon>
|
||||
</router-link>
|
||||
</v-flex>
|
||||
</v-toolbar-items>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
notifications: [
|
||||
'Mike, John responded to your email',
|
||||
'You have 5 new tasks',
|
||||
'You\'re now a friend with Andrew',
|
||||
'Another Notification',
|
||||
'Another One'
|
||||
],
|
||||
title: null,
|
||||
responsive: false,
|
||||
responsiveInput: false
|
||||
}),
|
||||
|
||||
watch: {
|
||||
'$route' (val) {
|
||||
this.title = val.name
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.onResponsiveInverted()
|
||||
window.addEventListener('resize', this.onResponsiveInverted)
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('resize', this.onResponsiveInverted)
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations('app', ['setDrawer', 'toggleDrawer']),
|
||||
onClickBtn () {
|
||||
this.setDrawer(!this.$store.state.app.drawer)
|
||||
},
|
||||
onClick () {
|
||||
//
|
||||
},
|
||||
onResponsiveInverted () {
|
||||
if (window.innerWidth < 991) {
|
||||
this.responsive = true
|
||||
this.responsiveInput = false
|
||||
} else {
|
||||
this.responsive = false
|
||||
this.responsiveInput = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#core-toolbar a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<v-content>
|
||||
<div id="core-view">
|
||||
<v-fade-transition mode="out-in">
|
||||
<router-view />
|
||||
</v-fade-transition>
|
||||
</div>
|
||||
<core-footer v-if="$route.name !== 'Maps'" />
|
||||
</v-content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
metaInfo () {
|
||||
return {
|
||||
title: 'Vuetify Material Dashboard by CreativeTim'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#core-view {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user