create admin panel views
This commit is contained in:
parent
48b2752a1e
commit
8c85aa4fe4
8 changed files with 363 additions and 41 deletions
45
web/src/components/Matrix2D.vue
Normal file
45
web/src/components/Matrix2D.vue
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
<template>
|
||||||
|
<table class="table table-striped table-dark" style="table-layout: fixed">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col" v-for="(column, index) in columns" :key="index">
|
||||||
|
{{ column }}
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(row, i) in rows" :key="i">
|
||||||
|
<td>{{ row }}</td>
|
||||||
|
<td v-for="(column, j) in columns" :key="j">
|
||||||
|
<font-awesome-icon v-if="items[j][i]" icon="check" class="text-success"/>
|
||||||
|
<font-awesome-icon v-else icon="times" class="text-danger"/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Matrix2D',
|
||||||
|
props: {
|
||||||
|
items: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
columns: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
rows: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
61
web/src/components/Matrix3D.vue
Normal file
61
web/src/components/Matrix3D.vue
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
<template>
|
||||||
|
<table class="table table-striped table-dark" style="table-layout: fixed">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col" v-for="(column, index) in columns" :key="index">
|
||||||
|
{{ column }}
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(row, i) in rows" :key="i">
|
||||||
|
<td>{{ row }}</td>
|
||||||
|
<td v-for="(column, j) in columns" :key="j">
|
||||||
|
<font-awesome-icon v-if="triState(items[j][i]) === 'on'" icon="check" class="text-success"/>
|
||||||
|
<font-awesome-icon v-else-if="triState(items[j][i]) === 'off'" icon="times" class="text-danger"/>
|
||||||
|
<font-awesome-icon v-else icon="minus" class="text-warning"/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Matrix3D',
|
||||||
|
props: {
|
||||||
|
items: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
columns: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
rows: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
foldedDimension: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
triState(list) {
|
||||||
|
if(list.every(e => e === true)) {
|
||||||
|
return 'on';
|
||||||
|
} else if(list.every(e => e === false)) {
|
||||||
|
return 'off';
|
||||||
|
} else {
|
||||||
|
return 'partial';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="container-fluid px-xl-5 mt-3">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xl-8 offset-xl-2">
|
|
||||||
<Table
|
|
||||||
:columns="['slug', 'name']"
|
|
||||||
:items="events"
|
|
||||||
:keyName="'slug'"
|
|
||||||
v-slot="{ item }"
|
|
||||||
>
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn btn-secondary" @click.stop="changeEvent(item)">
|
|
||||||
<font-awesome-icon icon="archive"/>
|
|
||||||
use
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-danger" @click.stop="">
|
|
||||||
<font-awesome-icon icon="trash"/>
|
|
||||||
delete
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {mapActions, mapState} from 'vuex';
|
|
||||||
import Table from '@/components/Table';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'Events',
|
|
||||||
components: {Table},
|
|
||||||
computed: mapState(['events']),
|
|
||||||
methods: mapActions(['changeEvent']),
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
68
web/src/views/admin/AccessControl.vue
Normal file
68
web/src/views/admin/AccessControl.vue
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-center">Users</h3>
|
||||||
|
<Table :items="users" :columns="['username']" :key-name="'id'">
|
||||||
|
<template v-slot:default="{item}">
|
||||||
|
<span>
|
||||||
|
{{item.groups.join(', ')}}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</Table>
|
||||||
|
<h3 class="text-center">Groups</h3>
|
||||||
|
<Table :items="groups" :columns="['name']" :key-name="'id'">
|
||||||
|
<template v-slot:default="{item}">
|
||||||
|
<span>
|
||||||
|
{{item.members.join(', ')}}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</Table>
|
||||||
|
<Matrix2D :items="groupPermissions" :columns="groupNames" :rows="permissionNames"/>
|
||||||
|
<h3 class="text-center">Permissions</h3>
|
||||||
|
<Matrix3D :items="userPermissions" :columns="userNames" :rows="permissionNames"
|
||||||
|
:folded-dimension="eventsNames"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapActions, mapState} from 'vuex';
|
||||||
|
import Table from "@/components/Table.vue";
|
||||||
|
import Matrix3D from "@/components/Matrix3D.vue";
|
||||||
|
import Matrix2D from "@/components/Matrix2D.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AccessControl',
|
||||||
|
components: {Matrix3D, Matrix2D, Table},
|
||||||
|
computed: {
|
||||||
|
...mapState(['users', 'groups', 'events']),
|
||||||
|
permissionNames() {
|
||||||
|
return this.groups.map(g => g.permissions).flat().map(p => p.split(":")[1])
|
||||||
|
},
|
||||||
|
groupNames() {
|
||||||
|
return this.groups.map(g => g.name)
|
||||||
|
},
|
||||||
|
eventsNames() {
|
||||||
|
return this.events.map(e => e.slug)
|
||||||
|
},
|
||||||
|
userNames() {
|
||||||
|
return this.users.map(u => u.username)
|
||||||
|
},
|
||||||
|
groupPermissions() {
|
||||||
|
return this.groups.map(g => this.permissionNames.map(p => g.permissions.includes("*:" + p)))
|
||||||
|
},
|
||||||
|
userPermissions() {
|
||||||
|
return this.users.map(u => this.permissionNames.map(p => this.events.map(e =>
|
||||||
|
u.permissions.includes("*:" + p) || u.permissions.includes(e.slug + ":" + p)
|
||||||
|
)))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: mapActions(['loadUsers', 'loadGroups']),
|
||||||
|
mounted() {
|
||||||
|
this.loadUsers();
|
||||||
|
this.loadGroups();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
43
web/src/views/admin/Admin.vue
Normal file
43
web/src/views/admin/Admin.vue
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
<template>
|
||||||
|
<div class="container-fluid px-xl-5 mt-3">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-8 offset-xl-2">
|
||||||
|
<div class="card bg-dark text-light mb-2" id="filters">
|
||||||
|
<div class="card-header">
|
||||||
|
<ul class="nav nav-tabs card-header-tabs">
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link class="nav-link" :to="{name: 'admin'}" active-class="active" exact>Dashboard</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link class="nav-link" :to="{name: 'events'}" active-class="active">Events</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link class="nav-link" :to="{name: 'users'}" active-class="active">Access Control</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapGetters} from 'vuex';
|
||||||
|
import Cards from "@/components/Cards.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Admin',
|
||||||
|
components: {Cards},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['getEventSlug']),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
33
web/src/views/admin/Boxes.vue
Normal file
33
web/src/views/admin/Boxes.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<Table
|
||||||
|
:columns="['cid', 'name','itemCount']"
|
||||||
|
:items="loadedBoxes"
|
||||||
|
:keyName="'cid'"
|
||||||
|
v-slot="{ item }"
|
||||||
|
>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn btn-secondary" @click.stop="showBoxContent(item.name)">
|
||||||
|
<!--font-awesome-icon icon="archive"/--> content
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-danger" @click.stop="" title="delete">
|
||||||
|
<font-awesome-icon icon="trash"/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</Table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapActions, mapState} from 'vuex';
|
||||||
|
import Table from '@/components/Table';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Boxes',
|
||||||
|
components: {Table},
|
||||||
|
computed: mapState(['loadedBoxes', 'layout']),
|
||||||
|
methods: mapActions(['showBoxContent']),
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
78
web/src/views/admin/Debug.vue
Normal file
78
web/src/views/admin/Debug.vue
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!--qr-code :text="qr_url" color="#000" bg-color="#fff" error-level="H" class="qr-code"></qr-code-->
|
||||||
|
<h3 class="text-center">Events</h3>
|
||||||
|
<!--p>{{ events }}</p-->
|
||||||
|
<ul>
|
||||||
|
<li v-for="event in events" :key="event.id">
|
||||||
|
{{ event.slug }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h3 class="text-center">Items</h3>
|
||||||
|
<!--p>{{ loadedItems }}</p-->
|
||||||
|
<ul>
|
||||||
|
<li v-for="item in loadedItems" :key="item.id">
|
||||||
|
{{ item.description }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h3 class="text-center">Boxes</h3>
|
||||||
|
<!--p>{{ loadedBoxes }}</p-->
|
||||||
|
<ul>
|
||||||
|
<li v-for="box in loadedBoxes" :key="box.id">
|
||||||
|
{{ box.name }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h3 class="text-center">Mails</h3>
|
||||||
|
<!--p>{{ mails }}</p-->
|
||||||
|
<ul>
|
||||||
|
<li v-for="mail in mails" :key="mail.id">
|
||||||
|
{{ mail.id }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h3 class="text-center">Issues</h3>
|
||||||
|
<!--p>{{ issues }}</p-->
|
||||||
|
<ul>
|
||||||
|
<li v-for="issue in issues" :key="issue.id">
|
||||||
|
{{ issue.id }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h3 class="text-center">System Events</h3>
|
||||||
|
<!--p>{{ systemEvents }}</p-->
|
||||||
|
<ul>
|
||||||
|
<li v-for="systemEvent in systemEvents" :key="systemEvent.id">
|
||||||
|
{{ systemEvent.id }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapActions, mapState} from 'vuex';
|
||||||
|
import Table from '@/components/Table';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Debug',
|
||||||
|
components: {Table},
|
||||||
|
computed: {
|
||||||
|
...mapState(['events', 'loadedItems', 'loadedBoxes', 'mails', 'issues', 'systemEvents']),
|
||||||
|
qr_url() {
|
||||||
|
return window.location.href;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(['changeEvent', 'loadMails', 'loadIssues', 'loadSystemEvents']),
|
||||||
|
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.loadMails();
|
||||||
|
this.loadIssues();
|
||||||
|
this.loadSystemEvents();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.qr-code img {
|
||||||
|
border: #fff solid 7px
|
||||||
|
}
|
||||||
|
</style>
|
||||||
35
web/src/views/admin/Events.vue
Normal file
35
web/src/views/admin/Events.vue
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
<template>
|
||||||
|
<Table
|
||||||
|
:columns="['slug', 'name']"
|
||||||
|
:items="events"
|
||||||
|
:keyName="'slug'"
|
||||||
|
v-slot="{ item }"
|
||||||
|
>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn btn-secondary" @click.stop="changeEvent(item)">
|
||||||
|
<font-awesome-icon icon="archive"/>
|
||||||
|
use
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-danger" @click.stop="">
|
||||||
|
<font-awesome-icon icon="trash"/>
|
||||||
|
delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</Table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapActions, mapState} from 'vuex';
|
||||||
|
import Table from '@/components/Table';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Events',
|
||||||
|
components: {Table},
|
||||||
|
computed: mapState(['events']),
|
||||||
|
methods: mapActions(['changeEvent']),
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in a new issue