Rewritten stuff
This commit is contained in:
@ -11,11 +11,7 @@
|
||||
<style>
|
||||
@import "../node_modules/@syncfusion/ej2/material.css";
|
||||
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
|
||||
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
|
||||
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
|
||||
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
|
||||
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
|
||||
|
||||
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
|
||||
|
||||
#app {
|
||||
height: 100vh;
|
||||
|
||||
@ -1,16 +1,25 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-overlay :show="processing">
|
||||
<b-form class="my-4">
|
||||
<div>
|
||||
<ejs-textbox id='username' floatLabelType="Auto" placeholder="Username" autocomplete="off"/>
|
||||
<ejs-textbox id='password' floatLabelType="Auto" placeholder="Password" autocomplete="off" type="password"/>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<ejs-button cssClass='e-primary'>Login</ejs-button>
|
||||
</div>
|
||||
</b-form>
|
||||
</b-overlay>
|
||||
<form novalidate @submit.prevent="performLogin">
|
||||
<md-card-content>
|
||||
<md-field>
|
||||
<label>Username</label>
|
||||
<md-input :disabled="processing"></md-input>
|
||||
</md-field>
|
||||
|
||||
<md-field>
|
||||
<label>Password</label>
|
||||
<md-input :disabled="processing" type="password"></md-input>
|
||||
</md-field>
|
||||
|
||||
</md-card-content>
|
||||
|
||||
<md-card-actions>
|
||||
<md-progress-spinner :md-diameter="30" :md-stroke="3" md-mode="indeterminate" v-if="processing"
|
||||
class="md-accent"></md-progress-spinner>
|
||||
<md-button type="submit" class="md-primary" :disabled="processing">Login</md-button>
|
||||
</md-card-actions>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -21,6 +30,11 @@ export default {
|
||||
return {
|
||||
processing: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
performLogin() {
|
||||
this.processing = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,25 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
<ejs-tab id='element'>
|
||||
<div class="e-tab-header">
|
||||
<div>Login</div>
|
||||
<div>Register</div>
|
||||
</div>
|
||||
<div class="e-content">
|
||||
<div>
|
||||
<login/>
|
||||
</div>
|
||||
<div>
|
||||
<register/>
|
||||
</div>
|
||||
</div>
|
||||
</ejs-tab>
|
||||
<md-tabs>
|
||||
<md-tab id="tab-login" md-label="Login" exact>
|
||||
<login/>
|
||||
</md-tab>
|
||||
|
||||
<md-tab id="tab-register" md-label="Register">
|
||||
<register/>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Register from "@/components/Register";
|
||||
import Login from "@/components/Login";
|
||||
import Register from "@/components/Register";
|
||||
|
||||
export default {
|
||||
name: "LoginBoxContent",
|
||||
|
||||
@ -1,19 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-overlay :show="processing">
|
||||
<form novalidate @submit.prevent="performRegister">
|
||||
<md-card-content>
|
||||
|
||||
<b-form class="my-4">
|
||||
<div>
|
||||
<ejs-textbox id='username' floatLabelType="Auto" placeholder="Username" autocomplete="off"/>
|
||||
<ejs-textbox id='password' floatLabelType="Auto" placeholder="Password" autocomplete="off" type="password"/>
|
||||
<ejs-textbox id='password-confirm' floatLabelType="Auto" placeholder="Confirm password" autocomplete="off"
|
||||
type="password"/>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<ejs-button cssClass='e-primary'>Register</ejs-button>
|
||||
</div>
|
||||
</b-form>
|
||||
</b-overlay>
|
||||
<md-field>
|
||||
<label>Username</label>
|
||||
<md-input :disabled="processing"></md-input>
|
||||
</md-field>
|
||||
|
||||
<md-field :md-toggle-password="false">
|
||||
<label>Password</label>
|
||||
<md-input type="password" :disabled="processing"></md-input>
|
||||
</md-field>
|
||||
|
||||
<md-field :md-toggle-password="false">
|
||||
<label>Confirm password</label>
|
||||
<md-input :disabled="processing" type="password"></md-input>
|
||||
</md-field>
|
||||
|
||||
</md-card-content>
|
||||
|
||||
<md-card-actions>
|
||||
<md-progress-spinner :md-diameter="30" :md-stroke="3" md-mode="indeterminate" v-if="processing"
|
||||
class="md-accent"></md-progress-spinner>
|
||||
<md-button type="submit" class="md-primary" :disabled="processing">Register</md-button>
|
||||
</md-card-actions>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -24,6 +36,11 @@ export default {
|
||||
return {
|
||||
processing: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
performRegister() {
|
||||
this.processing = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
38
src/main.js
38
src/main.js
@ -2,30 +2,32 @@ import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
// Used only for grid stuff:
|
||||
import { BootstrapVue } from 'bootstrap-vue'
|
||||
import {MdButton, MdContent, MdTabs, MdCard, MdField, MdElevation, MdProgress, MdToolbar, MdDrawer, MdList, MdAvatar} from 'vue-material/dist/components'
|
||||
|
||||
import { TabPlugin } from '@syncfusion/ej2-vue-navigations';
|
||||
import { ButtonPlugin, RadioButtonPlugin } from '@syncfusion/ej2-vue-buttons';
|
||||
import { TextBoxPlugin } from '@syncfusion/ej2-vue-inputs';
|
||||
import { SidebarPlugin } from '@syncfusion/ej2-vue-navigations';
|
||||
|
||||
import 'bootstrap/dist/css/bootstrap.css'
|
||||
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||
import {DiagramPlugin} from '@syncfusion/ej2-vue-diagrams';
|
||||
|
||||
import 'vue-material/dist/vue-material.min.css'
|
||||
import 'vue-material/dist/theme/default.css'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.use(TabPlugin);
|
||||
Vue.use(ButtonPlugin);
|
||||
Vue.use(RadioButtonPlugin);
|
||||
Vue.use(BootstrapVue);
|
||||
Vue.use(TextBoxPlugin);
|
||||
Vue.use(SidebarPlugin);
|
||||
|
||||
Vue.use(MdButton);
|
||||
Vue.use(MdContent);
|
||||
Vue.use(MdTabs);
|
||||
Vue.use(MdCard);
|
||||
Vue.use(MdField);
|
||||
Vue.use(MdElevation);
|
||||
Vue.use(MdProgress);
|
||||
Vue.use(MdToolbar);
|
||||
Vue.use(MdDrawer);
|
||||
Vue.use(MdList);
|
||||
Vue.use(MdAvatar);
|
||||
Vue.use(DiagramPlugin);
|
||||
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
||||
@ -1,106 +1,57 @@
|
||||
<template>
|
||||
<div id="dashboard-container">
|
||||
<div class="page-container md-layout-column" id="dashboard-container">
|
||||
<md-toolbar class="md-primary">
|
||||
|
||||
<div id="head" class="text-right">
|
||||
<ejs-button id="toggle" ref="togglebtn" class="e-btn e-info text-white" cssClass="e-flat"
|
||||
isToggle="true" v-on:click.native="openSidebar"><i class="e-icons e-menu"></i> Menu
|
||||
</ejs-button>
|
||||
<md-button class="md-icon-button" @click="showNavigation = true">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
<span class="md-title">VideON</span>
|
||||
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<md-drawer :md-active.sync="showNavigation" md-swipeable>
|
||||
<md-toolbar class="md-transparent" md-elevation="0">
|
||||
<span class="md-title">VideON</span>
|
||||
</md-toolbar>
|
||||
|
||||
<ejs-sidebar id="sidebar" ref="sidebar" type="Push" target="#maincontent" position="Right"
|
||||
enablePersistence="true">
|
||||
<div id="close-holder" class="text-right m-2"><a @click.prevent="closeClick" class="text-white"><i class="e-icons e-close"></i></a></div>
|
||||
<div id="sidebar-content" class="m-3 text-white">
|
||||
Welcome {{ username }}!
|
||||
<ejs-button cssClass='e-block e-danger my-2'>Logout</ejs-button>
|
||||
</div>
|
||||
</ejs-sidebar>
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<md-avatar class="md-avatar-icon">J</md-avatar>
|
||||
<span class="md-list-item-text">Joska</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-button class="md-raised md-accent">Logout</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<div id="maincontent" class="content">
|
||||
<div>
|
||||
</md-list>
|
||||
|
||||
<div>Main content</div>
|
||||
</md-drawer>
|
||||
|
||||
<md-content id="diagram-container">
|
||||
<ejs-diagram id="diagram" width='100%' height='100%'></ejs-diagram>
|
||||
</md-content>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
username: "Test"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openSidebar: function () {
|
||||
if (this.$refs.togglebtn.$el.classList.contains('e-active')) {
|
||||
this.$refs.togglebtn.Content = 'Open';
|
||||
this.$refs.sidebar.hide();
|
||||
} else {
|
||||
this.$refs.togglebtn.Content = 'Close';
|
||||
this.$refs.sidebar.show();
|
||||
}
|
||||
},
|
||||
closeClick: function () {
|
||||
this.$refs.sidebar.hide();
|
||||
this.$refs.togglebtn.$el.classList.remove('e-active');
|
||||
this.$refs.togglebtn.Content = 'Open';
|
||||
}
|
||||
}
|
||||
data: () => ({
|
||||
showNavigation: false
|
||||
})
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#head {
|
||||
background: #00897B;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#toggle, #container .e-btn.e-info:hover, #toggle:focus { /* csslint allow: adjoining-classes*/
|
||||
background: #00695C;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
height: 39px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
background-color: #26A69A;
|
||||
}
|
||||
|
||||
#toggle {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: calc(100% - 39px);
|
||||
}
|
||||
|
||||
#dashboard-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.e-menu:before{
|
||||
content:'\e99a';
|
||||
font-size: 1.2em;
|
||||
#diagram-container {
|
||||
height: calc(100% - 64px);
|
||||
}
|
||||
|
||||
.e-close:before{
|
||||
content:'\eb36';
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
#sidebar-content {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<div id="welcome">
|
||||
<b-container>
|
||||
<b-row align-h="center">
|
||||
<b-col md="6" lg="4" cols="12">
|
||||
<b-card class="my-5">
|
||||
<div class="text-center">
|
||||
<h1>VideON</h1>
|
||||
</div>
|
||||
<login-box-content/>
|
||||
</b-card>
|
||||
<div class="text-center text-muted">
|
||||
Copyright 2020 by VideON Team
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<div class="md-layout md-alignment-center-center">
|
||||
<div class="md-layout-item" id="welcome-banner">
|
||||
<span class="md-display-3">VideON</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-layout md-alignment-center-center">
|
||||
<md-card class="md-layout-item md-size-25 md-medium-size-50 md-small-size-100 md-elevation-5">
|
||||
<login-box-content/>
|
||||
</md-card>
|
||||
</div>
|
||||
<div class="md-layout md-alignment-center-center">
|
||||
<div class="md-layout-item" id="welcome-footer">
|
||||
<span class="md-caption">Copyright 2020 by <b>VideON Team</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -23,12 +23,23 @@ import LoginBoxContent from "@/components/LoginBoxContent";
|
||||
|
||||
export default {
|
||||
name: "Welcome",
|
||||
components: {LoginBoxContent}
|
||||
components: {
|
||||
LoginBoxContent
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#welcome {
|
||||
}
|
||||
|
||||
#welcome-banner {
|
||||
padding: 3rem 0 5rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#welcome-footer {
|
||||
padding: 3rem 0 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user