videon/videon-frontend
videon/videon-frontend
3
0
Fork 0
Code Pull Requests Releases Activity

Rewritten stuff

Browse Source
This commit is contained in:
Pünkösd Marcell 2020-11-25 01:45:05 +01:00
parent 0e9c16dfea
commit 3bf484890a
10 changed files with 212 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
package-lock.json generated
View File

@ -1105,61 +1105,6 @@
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==", "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
"dev": true "dev": true
}, },
"@nuxt/opencollective": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/@nuxt/opencollective/-/opencollective-0.3.2.tgz",
"integrity": "sha512-XG7rUdXG9fcafu9KTDIYjJSkRO38EwjlKYIb5TQ/0WDbiTUTtUtgncMscKOYzfsY86kGs05pAuMOR+3Fi0aN3A==",
"requires": {
"chalk": "^4.1.0",
"consola": "^2.15.0",
"node-fetch": "^2.6.1"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"@soda/friendly-errors-webpack-plugin": { "@soda/friendly-errors-webpack-plugin": {
"version": "1.7.1", "version": "1.7.1",
"resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz", "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz",
@ -1818,33 +1763,13 @@
"@syncfusion/ej2-base": "~18.3.49" "@syncfusion/ej2-base": "~18.3.49"
} }
}, },
"@syncfusion/ej2-vue-buttons": { "@syncfusion/ej2-vue-diagrams": {
"version": "18.3.47",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-vue-buttons/-/ej2-vue-buttons-18.3.47.tgz",
"integrity": "sha512-uQC7maeHzxf3FRvAnnWjMb8PJPK8htAliVSv/AOobYYDmicKQVA0VD1C4ekyGaX+Zaw4JY1GHXl1L3EEwys0Tw==",
"requires": {
"@syncfusion/ej2-base": "~18.3.47",
"@syncfusion/ej2-buttons": "18.3.47",
"@syncfusion/ej2-vue-base": "~18.3.47"
}
},
"@syncfusion/ej2-vue-inputs": {
"version": "18.3.51", "version": "18.3.51",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-vue-inputs/-/ej2-vue-inputs-18.3.51.tgz", "resolved": "https://registry.npmjs.org/@syncfusion/ej2-vue-diagrams/-/ej2-vue-diagrams-18.3.51.tgz",
"integrity": "sha512-7acqFcRBgZaUDidkpFu9dXxJWZjmucc9toYEqShqwqUGc/zgjDtxLdftbUxwGq2FiDeFN5FR+8+QxmSLYDRqtw==", "integrity": "sha512-SrG4kN6ygEPn3y8sAB+PG/ohyWKNYzemR6e6AktL58A5Ikol46OyuB/hcXk397xgAEFOhpFlxNzDIa0hplX0qQ==",
"requires": { "requires": {
"@syncfusion/ej2-base": "~18.3.51", "@syncfusion/ej2-base": "~18.3.51",
"@syncfusion/ej2-inputs": "18.3.51", "@syncfusion/ej2-diagrams": "18.3.51",
"@syncfusion/ej2-vue-base": "~18.3.50"
}
},
"@syncfusion/ej2-vue-navigations": {
"version": "18.3.51",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-vue-navigations/-/ej2-vue-navigations-18.3.51.tgz",
"integrity": "sha512-RRGILsZnpB/FuTNhHz8vPFpbmZE4R0Kuex4OfGlIdAUQ4FVTOmZs+s7DnhShJLzxLZZeIbAwBpnwag7C1Ch3dQ==",
"requires": {
"@syncfusion/ej2-base": "~18.3.51",
"@syncfusion/ej2-navigations": "18.3.51",
"@syncfusion/ej2-vue-base": "~18.3.50" "@syncfusion/ej2-vue-base": "~18.3.50"
} }
}, },
@ -3351,23 +3276,6 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
"dev": true "dev": true
}, },
"bootstrap": {
"version": "4.5.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.3.tgz",
"integrity": "sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ=="
},
"bootstrap-vue": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.19.0.tgz",
"integrity": "sha512-IjAXUSrRU5Qu9x3uwUcoj6LtysKbCVeWoJOsODyI/WokStUr95M+tTIajXUjIrB/Nsk0fS+RNvZnm2sWeNFrhg==",
"requires": {
"@nuxt/opencollective": "^0.3.2",
"bootstrap": ">=4.5.3 <5.0.0",
"popper.js": "^1.16.1",
"portal-vue": "^2.1.7",
"vue-functional-data-merge": "^3.1.0"
}
},
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -4215,11 +4123,6 @@
"integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==", "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
"dev": true "dev": true
}, },
"consola": {
"version": "2.15.0",
"resolved": "https://registry.npmjs.org/consola/-/consola-2.15.0.tgz",
"integrity": "sha512-vlcSGgdYS26mPf7qNi+dCisbhiyDnrN1zaRbw3CSuc2wGOMEGGPsp46PdRG5gqXwgtJfjxDkxRNAgRPr1B77vQ=="
},
"console-browserify": { "console-browserify": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz", "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
@ -6135,6 +6038,11 @@
"mime-types": "^2.1.12" "mime-types": "^2.1.12"
} }
}, },
"format-thousands": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/format-thousands/-/format-thousands-1.1.1.tgz",
"integrity": "sha1-eXW+4wM42QBjkNpYMdsLQcMj+/o="
},
"forwarded": { "forwarded": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@ -6269,6 +6177,11 @@
"assert-plus": "^1.0.0" "assert-plus": "^1.0.0"
} }
}, },
"github-buttons": {
"version": "2.14.0",
"resolved": "https://registry.npmjs.org/github-buttons/-/github-buttons-2.14.0.tgz",
"integrity": "sha512-rAwKwFOiWoyhb3g5ZyXjI3XXprAa36jCd0tm467aEUYtiDZkqEXkepuzNg9LryLbnuLRQmcifIPTxLUBnuYpXQ=="
},
"glob": { "glob": {
"version": "7.1.6", "version": "7.1.6",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@ -8445,6 +8358,11 @@
"is-wsl": "^1.1.0" "is-wsl": "^1.1.0"
} }
}, },
"opencollective-postinstall": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
"integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q=="
},
"opener": { "opener": {
"version": "1.5.2", "version": "1.5.2",
"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz", "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
@ -8798,16 +8716,6 @@
"ts-pnp": "^1.1.6" "ts-pnp": "^1.1.6"
} }
}, },
"popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
},
"portal-vue": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
"integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g=="
},
"portfinder": { "portfinder": {
"version": "1.0.28", "version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@ -11582,10 +11490,23 @@
} }
} }
}, },
"vue-functional-data-merge": { "vue-github-button": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/vue-github-button/-/vue-github-button-1.3.0.tgz",
"integrity": "sha512-Cc92t+GBLwBPhwtHSvKXjbx07U3+6xdi+eR+s9c734tHbndipCLenJjLVkgErNhKZ0EvDjRyuu8Hu69gg9/TxQ==",
"requires": {
"github-buttons": "^2.8.0"
}
},
"vue-github-buttons": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz", "resolved": "https://registry.npmjs.org/vue-github-buttons/-/vue-github-buttons-3.1.0.tgz",
"integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA==" "integrity": "sha512-x0b9bdhP5xZOD5kQ9+nnCzvKqVyHb4moqN2l06mjYB/k2WRdW5jiAWlneUgoPFwPvcqM40vrTDXVvBrS0MMlEQ==",
"requires": {
"format-thousands": "^1.1.1",
"node-fetch": "^2.3.0",
"tslib": "^1.9.3"
}
}, },
"vue-hot-reload-api": { "vue-hot-reload-api": {
"version": "2.3.4", "version": "2.3.4",
@ -11695,6 +11616,17 @@
} }
} }
}, },
"vue-material": {
"version": "1.0.0-beta-15",
"resolved": "https://registry.npmjs.org/vue-material/-/vue-material-1.0.0-beta-15.tgz",
"integrity": "sha512-nNC1mF1BQNKsyEjRXPYxweYlIOcVE9rK4LeeyppOU6h4vgQnZuNmlGIRnl6fUe8dj+x7c5x5/qydLhJRabPMng==",
"requires": {
"opencollective-postinstall": "^2.0.2",
"vue-github-button": "^1.2.0",
"vue-github-buttons": "^3.1.0",
"vue-toc": "0.0.1"
}
},
"vue-router": { "vue-router": {
"version": "3.4.9", "version": "3.4.9",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.9.tgz", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.9.tgz",
@ -11734,6 +11666,14 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true "dev": true
}, },
"vue-toc": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/vue-toc/-/vue-toc-0.0.1.tgz",
"integrity": "sha512-RZfVgLzk/kpEmk05ptvU/+x3TVo4Ai4BBARvV4iCurR9bJsAqnnrqwjEBKnEG+s6NT0yQ6EY0JMGViyOUGysDw==",
"requires": {
"vue": "^2.6.10"
}
},
"vuex": { "vuex": {
"version": "3.5.1", "version": "3.5.1",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz", "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",

7
package.json
View File

@ -10,13 +10,10 @@
"dependencies": { "dependencies": {
"@syncfusion/ej2": "^18.3.51", "@syncfusion/ej2": "^18.3.51",
"@syncfusion/ej2-base": "^18.3.51", "@syncfusion/ej2-base": "^18.3.51",
"@syncfusion/ej2-vue-buttons": "^18.3.47", "@syncfusion/ej2-vue-diagrams": "^18.3.51",
"@syncfusion/ej2-vue-inputs": "^18.3.51",
"@syncfusion/ej2-vue-navigations": "^18.3.51",
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.19.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"vue": "^2.6.12", "vue": "^2.6.12",
"vue-material": "^1.0.0-beta-15",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vuex": "^3.4.0" "vuex": "^3.4.0"
}, },

22
public/index.html
View File

@ -1,17 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
</noscript> Please enable it to continue.</strong>
<div id="app"></div> </noscript>
<!-- built files will be auto injected --> <div id="app"></div>
</body> <!-- built files will be auto injected -->
</body>
</html> </html>

6
src/App.vue
View File

@ -11,11 +11,7 @@
<style> <style>
@import "../node_modules/@syncfusion/ej2/material.css"; @import "../node_modules/@syncfusion/ej2/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/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-diagrams/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";
#app { #app {
height: 100vh; height: 100vh;

36
src/components/Login.vue
View File

@ -1,16 +1,25 @@
<template> <template>
<div> <div>
<b-overlay :show="processing"> <form novalidate @submit.prevent="performLogin">
<b-form class="my-4"> <md-card-content>
<div> <md-field>
<ejs-textbox id='username' floatLabelType="Auto" placeholder="Username" autocomplete="off"/> <label>Username</label>
<ejs-textbox id='password' floatLabelType="Auto" placeholder="Password" autocomplete="off" type="password"/> <md-input :disabled="processing"></md-input>
</div> </md-field>
<div class="mt-4 text-center">
<ejs-button cssClass='e-primary'>Login</ejs-button> <md-field>
</div> <label>Password</label>
</b-form> <md-input :disabled="processing" type="password"></md-input>
</b-overlay> </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> </div>
</template> </template>
@ -21,6 +30,11 @@ export default {
return { return {
processing: false processing: false
} }
},
methods: {
performLogin() {
this.processing = true;
}
} }
} }
</script> </script>

25
src/components/LoginBoxContent.vue
View File

@ -1,25 +1,20 @@
<template> <template>
<div> <div>
<ejs-tab id='element'> <md-tabs>
<div class="e-tab-header"> <md-tab id="tab-login" md-label="Login" exact>
<div>Login</div> <login/>
<div>Register</div> </md-tab>
</div>
<div class="e-content"> <md-tab id="tab-register" md-label="Register">
<div> <register/>
<login/> </md-tab>
</div> </md-tabs>
<div>
<register/>
</div>
</div>
</ejs-tab>
</div> </div>
</template> </template>
<script> <script>
import Register from "@/components/Register";
import Login from "@/components/Login"; import Login from "@/components/Login";
import Register from "@/components/Register";
export default { export default {
name: "LoginBoxContent", name: "LoginBoxContent",

43
src/components/Register.vue
View File

@ -1,19 +1,31 @@
<template> <template>
<div> <div>
<b-overlay :show="processing"> <form novalidate @submit.prevent="performRegister">
<md-card-content>
<b-form class="my-4"> <md-field>
<div> <label>Username</label>
<ejs-textbox id='username' floatLabelType="Auto" placeholder="Username" autocomplete="off"/> <md-input :disabled="processing"></md-input>
<ejs-textbox id='password' floatLabelType="Auto" placeholder="Password" autocomplete="off" type="password"/> </md-field>
<ejs-textbox id='password-confirm' floatLabelType="Auto" placeholder="Confirm password" autocomplete="off"
type="password"/> <md-field :md-toggle-password="false">
</div> <label>Password</label>
<div class="mt-4 text-center"> <md-input type="password" :disabled="processing"></md-input>
<ejs-button cssClass='e-primary'>Register</ejs-button> </md-field>
</div>
</b-form> <md-field :md-toggle-password="false">
</b-overlay> <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> </div>
</template> </template>
@ -24,6 +36,11 @@ export default {
return { return {
processing: false processing: false
} }
},
methods: {
performRegister() {
this.processing = true;
}
} }
} }
</script> </script>

38
src/main.js
View File

@ -2,30 +2,32 @@ import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
// Used only for grid stuff: import {MdButton, MdContent, MdTabs, MdCard, MdField, MdElevation, MdProgress, MdToolbar, MdDrawer, MdList, MdAvatar} from 'vue-material/dist/components'
import { BootstrapVue } from 'bootstrap-vue'
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 {DiagramPlugin} from '@syncfusion/ej2-vue-diagrams';
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(TabPlugin); Vue.use(MdButton);
Vue.use(ButtonPlugin); Vue.use(MdContent);
Vue.use(RadioButtonPlugin); Vue.use(MdTabs);
Vue.use(BootstrapVue); Vue.use(MdCard);
Vue.use(TextBoxPlugin); Vue.use(MdField);
Vue.use(SidebarPlugin); Vue.use(MdElevation);
Vue.use(MdProgress);
Vue.use(MdToolbar);
Vue.use(MdDrawer);
Vue.use(MdList);
Vue.use(MdAvatar);
Vue.use(DiagramPlugin);
new Vue({ new Vue({
router, router,
store, store,
render: h => h(App) render: h => h(App)
}).$mount('#app') }).$mount('#app')

111
src/views/Dashboard.vue
View File

@ -1,106 +1,57 @@
<template> <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"> <md-button class="md-icon-button" @click="showNavigation = true">
<ejs-button id="toggle" ref="togglebtn" class="e-btn e-info text-white" cssClass="e-flat" <md-icon>menu</md-icon>
isToggle="true" v-on:click.native="openSidebar"><i class="e-icons e-menu"></i> Menu </md-button>
</ejs-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" <md-list>
enablePersistence="true"> <md-list-item>
<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> <md-avatar class="md-avatar-icon">J</md-avatar>
<div id="sidebar-content" class="m-3 text-white"> <span class="md-list-item-text">Joska</span>
Welcome {{ username }}! </md-list-item>
<ejs-button cssClass='e-block e-danger my-2'>Logout</ejs-button>
</div>
</ejs-sidebar>
<md-list-item>
<md-button class="md-raised md-accent">Logout</md-button>
</md-list-item>
<div id="maincontent" class="content"> </md-list>
<div>
<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> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'Dashboard', name: 'Dashboard',
components: {}, components: {},
data() { data: () => ({
return { showNavigation: false
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';
}
}
} }
</script> </script>
<style scoped> <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 { #dashboard-container {
height: 100%; height: 100%;
} }
.e-menu:before{ #diagram-container {
content:'\e99a'; height: calc(100% - 64px);
font-size: 1.2em;
} }
.e-close:before{
content:'\eb36';
font-size: 1.2em;
}
#sidebar-content {
font-size: 1rem;
}
</style> </style>

43
src/views/Welcome.vue
View File

@ -1,20 +1,20 @@
<template> <template>
<div id="welcome"> <div id="welcome">
<b-container> <div class="md-layout md-alignment-center-center">
<b-row align-h="center"> <div class="md-layout-item" id="welcome-banner">
<b-col md="6" lg="4" cols="12"> <span class="md-display-3">VideON</span>
<b-card class="my-5"> </div>
<div class="text-center"> </div>
<h1>VideON</h1> <div class="md-layout md-alignment-center-center">
</div> <md-card class="md-layout-item md-size-25 md-medium-size-50 md-small-size-100 md-elevation-5">
<login-box-content/> <login-box-content/>
</b-card> </md-card>
<div class="text-center text-muted"> </div>
Copyright 2020 by VideON Team <div class="md-layout md-alignment-center-center">
</div> <div class="md-layout-item" id="welcome-footer">
</b-col> <span class="md-caption">Copyright 2020 by <b>VideON Team</b></span>
</b-row> </div>
</b-container> </div>
</div> </div>
</template> </template>
@ -23,12 +23,23 @@ import LoginBoxContent from "@/components/LoginBoxContent";
export default { export default {
name: "Welcome", name: "Welcome",
components: {LoginBoxContent} components: {
LoginBoxContent
}
} }
</script> </script>
<style scoped> <style scoped>
#welcome { #welcome {
}
#welcome-banner {
padding: 3rem 0 5rem 0;
text-align: center;
}
#welcome-footer {
padding: 3rem 0 0 0;
text-align: center;
} }
</style> </style>