mirror of
https://github.com/janishutz/libreevent.git
synced 2025-11-25 13:24:24 +00:00
Admin panel progress
This commit is contained in:
@@ -1,63 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank"
|
||||
rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank"
|
||||
rel="noopener">router</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a>
|
||||
</li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #42b983;
|
||||
}</style>
|
||||
@@ -15,8 +15,10 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
formData: Object
|
||||
data() {
|
||||
return {
|
||||
formData: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setup () {
|
||||
|
||||
@@ -38,6 +38,15 @@ const routes = [
|
||||
title: 'Login :: Admin - myevent'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/setup',
|
||||
name: 'setup',
|
||||
component: () => import( '../views/SetupView.vue' ),
|
||||
meta: {
|
||||
title: 'Login :: Admin - myevent',
|
||||
requiresSetupKey: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
name: 'admin',
|
||||
@@ -59,16 +68,17 @@ const routes = [
|
||||
{
|
||||
path: 'admin-accounts',
|
||||
name: 'adminAccounts',
|
||||
component: () => import( '../views/AdminLoginView.vue' ),
|
||||
component: () => import( '../views/admin/AccountView.vue' ),
|
||||
meta: {
|
||||
title: 'Accounts :: Admin - myevent',
|
||||
adminAuthRequired: true,
|
||||
permissions: 'root'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'pages',
|
||||
name: 'adminPages',
|
||||
component: () => import( '../views/AdminLoginView.vue' ),
|
||||
component: () => import( '../views/admin/PagesView.vue' ),
|
||||
meta: {
|
||||
title: 'Pages :: Admin - myevent',
|
||||
adminAuthRequired: true,
|
||||
@@ -77,7 +87,7 @@ const routes = [
|
||||
{
|
||||
path: 'events',
|
||||
name: 'adminEvents',
|
||||
component: () => import( '../views/AdminLoginView.vue' ),
|
||||
component: () => import( '../views/admin/EventsView.vue' ),
|
||||
meta: {
|
||||
title: 'Events :: Admin - myevent',
|
||||
adminAuthRequired: true,
|
||||
@@ -86,7 +96,7 @@ const routes = [
|
||||
{
|
||||
path: 'plugins',
|
||||
name: 'adminPlugins',
|
||||
component: () => import( '../views/AdminLoginView.vue' ),
|
||||
component: () => import( '../views/admin/PluginsView.vue' ),
|
||||
meta: {
|
||||
title: 'Plugins :: Admin - myevent',
|
||||
adminAuthRequired: true,
|
||||
@@ -95,7 +105,7 @@ const routes = [
|
||||
{
|
||||
path: 'settings',
|
||||
name: 'adminSettings',
|
||||
component: () => import( '../views/AdminLoginView.vue' ),
|
||||
component: () => import( '../views/admin/SettingsView.vue' ),
|
||||
meta: {
|
||||
title: 'Admin - myevent',
|
||||
adminAuthRequired: true,
|
||||
@@ -176,6 +186,8 @@ router.beforeEach( ( to, from ) => {
|
||||
|
||||
if ( to.meta.adminAuthRequired && !isAdminAuthenticated ) {
|
||||
return { name: 'adminLogin' };
|
||||
} else if ( to.name === 'adminLogin' && isAdminAuthenticated ) {
|
||||
return { name: 'admin' };
|
||||
} else if ( UserAccountPages.includes( to.name ) && !isUserAuthenticated ) {
|
||||
return { name: 'login' };
|
||||
} else if ( !isUserAuthenticated && to.name === 'purchase' && authRequired ) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const useUserStore = defineStore ( 'user', {
|
||||
state: () => ( { 'isUserAuth': false, 'isAdminAuth': false } ),
|
||||
state: () => ( { 'isUserAuth': false, 'isAdminAuth': true, 'userPermissions': {} } ),
|
||||
getters: {
|
||||
getUserAuthenticated: ( state ) => state.isUserAuth,
|
||||
getAdminAuthenticated: ( state ) => state.isAdminAuth,
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
},
|
||||
methods: {
|
||||
login () {
|
||||
|
||||
this.$router.push( '/admin' );
|
||||
}
|
||||
},
|
||||
}
|
||||
@@ -56,4 +56,10 @@
|
||||
padding: 5px 10px;
|
||||
margin-top: 2%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<initial :formData="formData"></initial>
|
||||
<initial></initial>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
27
src/webapp/src/views/SetupView.vue
Normal file
27
src/webapp/src/views/SetupView.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Setup</h1>
|
||||
<div class="main-view">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<transition :name="route.meta.transition || 'scale'" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setup () {
|
||||
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
22
src/webapp/src/views/admin/AccountView.vue
Normal file
22
src/webapp/src/views/admin/AccountView.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>Admin Accounts</h2>
|
||||
<p>Here you can change everything regarding admin accounts. You may create, modify or delete admin accounts.</p>
|
||||
<div class="bigButtons"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setup () {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -10,6 +10,7 @@
|
||||
<router-link to="/admin/events" class="admin-menu">Events</router-link>
|
||||
<router-link to="/admin/plugins" class="admin-menu">Plugins</router-link>
|
||||
<router-link to="/admin/settings" class="admin-menu">Settings</router-link>
|
||||
<router-link to="/admin/login" class="admin-menu" @click="logout()">Logout</router-link>
|
||||
</nav>
|
||||
<div class="main-view">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
@@ -49,6 +50,7 @@
|
||||
grid-area: main;
|
||||
height: 100%;
|
||||
min-height: 80vh;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.side-nav {
|
||||
@@ -60,6 +62,7 @@
|
||||
margin: 0;
|
||||
background-color: var( --accent-background );
|
||||
justify-content: center;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.admin-menu {
|
||||
@@ -82,16 +85,28 @@
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { useUserStore } from '@/stores/userStore';
|
||||
import { mapStores } from 'pinia';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapStores( useUserStore )
|
||||
},
|
||||
methods: {
|
||||
setup () {
|
||||
|
||||
logout () {
|
||||
this.userStore.setAdminAuth( false );
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
22
src/webapp/src/views/admin/EventsView.vue
Normal file
22
src/webapp/src/views/admin/EventsView.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>Events</h2>
|
||||
<p>Welcome to the admin panel!</p>
|
||||
<div class="bigButtons"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setup () {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,18 +1,43 @@
|
||||
<template>
|
||||
<h2>Home</h2>
|
||||
<div>
|
||||
<h2>Home</h2>
|
||||
<p>Welcome to the admin panel!</p>
|
||||
<div class="bigButton-container">
|
||||
<router-link to="/admin/admin-accounts" class="bigButton">Admin-accounts</router-link>
|
||||
<router-link to="/admin/pages" class="bigButton">Pages</router-link>
|
||||
<router-link to="/admin/events" class="bigButton">Events</router-link>
|
||||
<router-link to="/admin/events" class="bigButton">Plugins</router-link>
|
||||
<router-link to="/admin/events" class="bigButton">Settings</router-link>
|
||||
<a href="https://myevent.janishutz.com/docs" class="bigButton" target="_blank">Documentation</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setup () {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.bigButton-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bigButton {
|
||||
background-color: var( --accent-background );
|
||||
width: 40%;
|
||||
height: 30vh;
|
||||
border-color: black;
|
||||
margin: 0.02%;
|
||||
border-style: inset;
|
||||
color: var( --secondary-color );
|
||||
text-decoration: none;
|
||||
border-width: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bigButton:hover {
|
||||
background-color: var( --accent-background-hover );
|
||||
}
|
||||
</style>
|
||||
|
||||
22
src/webapp/src/views/admin/PagesView.vue
Normal file
22
src/webapp/src/views/admin/PagesView.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>Pages</h2>
|
||||
<p>Welcome to the admin panel!</p>
|
||||
<div class="bigButtons"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setup () {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
22
src/webapp/src/views/admin/PluginsView.vue
Normal file
22
src/webapp/src/views/admin/PluginsView.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>Plugins</h2>
|
||||
<p>Welcome to the admin panel!</p>
|
||||
<div class="bigButtons"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setup () {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
22
src/webapp/src/views/admin/SettingsView.vue
Normal file
22
src/webapp/src/views/admin/SettingsView.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>Settings</h2>
|
||||
<p>Welcome to the admin panel!</p>
|
||||
<div class="bigButtons"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setup () {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user