create admin panel views

web/src/components/Matrix2D.vue

@@ -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>

web/src/components/Matrix3D.vue

@@ -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>

web/src/views/Events.vue

@@ -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>

web/src/views/admin/AccessControl.vue

@@ -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>

web/src/views/admin/Admin.vue

@@ -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>

web/src/views/admin/Boxes.vue

@@ -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>

web/src/views/admin/Debug.vue

@@ -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>

web/src/views/admin/Events.vue

@@ -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>