App.vue 4.29 KB
Newer Older
1
<template>
2
3
4
5
6
    <div
        id="app"
        :key="localeKey"
        class="tw-flex tw-flex-col tw-min-h-screen"
    >
7
8
9
10
11
        <app-header
                :modules="modules"
                :user="user"
        />

12
13
14
15
        <div
            v-if="user.steeringUser !== null"
            class="tw-flex-1 tw-flex tw-my-8"
        >
16
17
18
19
            <router-view
                :modules="modules"
                :user="user"
            />
20
        </div>
21

22
23
24
25
26
27
28
29
30
31
        <div
            v-else
            class="tw-flex-1 tw-flex tw-my-8"
        >
            <home
                    :modules="modules"
                    :user="user"
            />
        </div>

32
        <app-footer :modules="modules" />
33
    </div>
34
35
36
</template>

<script>
37

38
39
40
41
42
43
44
    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'
45
    import Home from "./Pages/Home";
46
47
48
49

    export default {
        name: 'App',
        components: {
50
            Home,
51
52
53
54
55
56
57
58
59
60
61
62
63
            '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
64
                let modules = {}
65
66
67
68
69
70
71
72
73
74

                // 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: [
                                {
75
                                    icon: '/assets/shows.svg',
76
77
78
79
                                    slug: 'shows',
                                    title: this.$t('navigation.shows')
                                },
                                {
80
                                    icon: '/assets/files.svg',
81
82
83
84
                                    slug: 'files',
                                    title: this.$t('navigation.filesPlaylists')
                                },
                                {
85
                                    icon: '/assets/calendar.svg',
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
                                    slug: 'calendar',
                                    title: this.$t('navigation.calendar')
                                },
                            ],

                            footer: [
                                {
                                    slug: 'settings',
                                    title: this.$t('navigation.settings'),
                                },
                            ]
                        }
                        // Regular user
                        : {
                            main: [
                                {
102
                                    icon: '/assets/shows.svg',
103
104
105
106
                                    slug: 'shows',
                                    title: this.$t('navigation.shows')
                                },
                                {
107
                                    icon: '/assets/files.svg',
108
109
110
111
112
                                    slug: 'files',
                                    title: this.$t('navigation.filesPlaylists')
                                },
                            ],

Richard Blechinger's avatar
Richard Blechinger committed
113
                            footer: []
114
115
116
117
118
119
120
121
122
                        }
                }

                return modules
            },
        },
        created() {
            this.$store.dispatch('auth/oidcInit')
        },
123

124
125
126
127
128
129
130
131
132
        methods: {
            signIn() {
                this.$store.dispatch('auth/signinRedirect')
            },
            signOut() {
                this.$store.dispatch('auth/signoutRedirect')
            },
        }
    }
133
134
135
</script>

<style>
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
    html, body {
        min-height: 100vh;
    }

    #app {
        color: #2e3436;
    }

    /*
    #app .content-width {
      margin: auto;
      width: 920px;
      max-width: 920px;
    }
    */
151
</style>