Newer
Older
<div id="app" class="tw-flex tw-flex-col tw-min-h-screen" :key="localeKey">
<app-header
:modules="modules"
:user="user"
/>
<div class="tw-flex-1 tw-flex tw-my-8">
<router-view :modules="modules" :user="user"/>
</div>
<app-footer :modules="modules"/>
</div>
</template>
<script>
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import {translationVm} from '@/plugins/translation'
import header from './components/Header.vue'
import footer from './components/Footer.vue'
export default {
name: 'App',
components: {
'app-header': header,
'app-footer': footer
},
computed: {
userOIDC() {
return this.$store.state.auth.userOIDC
},
user() {
return this.$store.state.auth.user
},
localeKey: () => translationVm.activeLocale,
modules: function () {
// Logged out
let modules = []
// All icons used are taken from the Tango Project, which put them into public domain:
// http://tango.freedesktop.org
if (this.user.logged_in === true) {
modules = (this.user.steeringUser && this.user.steeringUser.is_superuser)
// Super user
? {
main: [
{
icon: '/assets/applications-multimedia.png',
slug: 'shows',
title: this.$t('navigation.shows')
},
{
icon: '/assets/audio-x-generic.png',
slug: 'files',
title: this.$t('navigation.filesPlaylists')
},
{
icon: '/assets/x-office-calendar.png',
slug: 'calendar',
title: this.$t('navigation.calendar')
},
],
footer: [
{
slug: 'settings',
title: this.$t('navigation.settings'),
},
{
slug: 'help',
title: this.$t('navigation.help'),
}
]
}
// Regular user
: {
main: [
{
icon: '/assets/applications-multimedia.png',
slug: 'shows',
title: this.$t('navigation.shows')
},
{
icon: '/assets/audio-x-generic.png',
slug: 'files',
title: this.$t('navigation.filesPlaylists')
},
],
footer: [
{
slug: 'help',
title: this.$t('navigation.help'),
}
]
}
}
return modules
},
},
created() {
this.$store.dispatch('auth/oidcInit')
},
methods: {
signIn() {
this.$store.dispatch('auth/signinRedirect')
},
signOut() {
this.$store.dispatch('auth/signoutRedirect')
},
}
}
</script>
<style>
html, body {
min-height: 100vh;
}
#app {
color: #2e3436;
}
/*
#app .content-width {
margin: auto;
width: 920px;
max-width: 920px;
}
*/