Navbar.vue 5.84 KB
Newer Older
1
<template>
gj4210's avatar
gj4210 committed
2
    <b-navbar toggleable="lg" fixed="top" :type="$sysinfo.host_oper_mode.is_prod?'light':'dark'"
janis.streib's avatar
janis.streib committed
3
4
              :variant="$sysinfo.host_oper_mode.is_prod?'light':'dark'"
              :class="`bg-${$sysinfo.host_oper_mode.mode}` + ' shadow'">
5
6
7
8
9
10
        <!-- Brand and toggle get grouped for better mobile display -->
        <b-navbar-brand to="/">
            <img class="d-inline-block align-top scc-img" alt="SCC" src="@/assets/img/scc_logo_small.png"/>
            <span v-if="!$sysinfo.host_oper_mode.is_prod"> Instanz: {{$sysinfo.host_oper_mode.mode}}</span>
        </b-navbar-brand>
        <b-navbar-toggle target="navbarNavDropdown">
gj4210's avatar
gj4210 committed
11
            <font-awesome-icon icon="bars"/>
12
13
        </b-navbar-toggle>
        <!-- Collect the nav links, forms, and other content for toggling -->
gj4210's avatar
gj4210 committed
14
        <b-collapse is-nav id="navbarNavDropdown" ref="navdropdown">
15
            <b-navbar-nav>
gj4210's avatar
gj4210 committed
16
17
18
19
20
21
22
23
24
25
26
27
                <b-nav-item v-if="$sysinfo_mods_by_name['dnsvs']" to="/dnsvs/"
                            :active="$route.path.startsWith('/dnsvs/')">DNSVS
                </b-nav-item>
                <b-nav-item v-if="$sysinfo_mods_by_name['dhcp_leases']" to="/dhcp-leases/"
                            :active="$route.path.startsWith('/dhcp-leases/')">DHCP-Leases
                </b-nav-item>
                <b-nav-item href="https://www-net.scc.kit.edu/~netadmin/natvs/user/wrapper.cgi/" target="_blank">
                    NATVS+
                </b-nav-item>
                <b-nav-item href="https://www-net.scc.kit.edu/~netadmin/netdoc/user/wrapper.cgi/" target="_blank">
                    NETDOC
                </b-nav-item>
28
29
            </b-navbar-nav>
            <b-navbar-nav class="ml-auto">
gj4210's avatar
gj4210 committed
30
31
32
33
34
35
36
37
38
39
40
41
                <b-form inline @submit="searchAction" class="mr-2">
                    <transition name="slide">
                        <b-form-input v-if="show_search || ($refs.navdropdown && $refs.navdropdown.show)" ref="search"
                                      size="sm" placeholder="Suche"
                                      v-model="search_input" class="mr-2 search"/>
                    </transition>
                    <b-button class="search-button" size="sm" @click="searchAction"
                              :variant="search_input === '' ? 'secondary' : 'success'">
                        <font-awesome-icon :icon="['fas','search']"/>
                    </b-button>
                    <div class="search-cover-wrapper">
                        <div class="search-cover"/>
42
                    </div>
gj4210's avatar
gj4210 committed
43
                </b-form>
janis.streib's avatar
janis.streib committed
44
45
                <b-nav-item :active="$store.state.show_sidebar"
                            @click="$store.commit('showSidebar', !$store.state.show_sidebar)">
gj4210's avatar
gj4210 committed
46
47
                    <font-awesome-icon :icon="['fas', 'tasks']"/>
                    Geplante Aktionen
48
                    <b-badge variant="primary">{{$store.state.ta_list ? $store.state.ta_list.length : 0}}</b-badge>
49
                </b-nav-item>
gj4210's avatar
gj4210 committed
50
51
                <b-nav-item-dropdown v-if="$store.state.user" right
                                     :toggle-class="$route.path.startsWith('/user/')?'active':''">
52
                    <template slot="button-content">
gj4210's avatar
gj4210 committed
53
                        <font-awesome-icon :icon="['far', 'user']"/>
54
55
56
                        <span v-if="$store.state.user"> {{$store.state.user.login_name}}</span>
                    </template>
                    <template v-if="$store.state.user">
gj4210's avatar
gj4210 committed
57
                        <b-dropdown-item to="/user/tokens" :active="$route.path === '/user/tokens'">
gj4210's avatar
gj4210 committed
58
                            <font-awesome-icon :icon="['fas', 'code']"/>
gj4210's avatar
gj4210 committed
59
60
                            API-Tokens
                        </b-dropdown-item>
gj4210's avatar
gj4210 committed
61
62
63
64
65
                        <b-dropdown-divider/>
                        <b-dropdown-item @click="logout">
                            <font-awesome-icon :icon="['fas', 'sign-out-alt']"/>
                            Abmelden
                        </b-dropdown-item>
66
67
                    </template>
                </b-nav-item-dropdown>
janis.streib's avatar
janis.streib committed
68
                <b-nav-item v-else to="/login">
gj4210's avatar
gj4210 committed
69
70
                    <font-awesome-icon :icon="['fas', 'sign-in-alt']"/>
                    <span>Anmelden</span>
71
72
73
74
75
76
77
                </b-nav-item>
            </b-navbar-nav>
        </b-collapse><!-- /.navbar-collapse -->
    </b-navbar>
</template>

<script>
janis.streib's avatar
janis.streib committed
78
79
    import LoginService from '@/api-services/login.service'

80
    export default {
janis.streib's avatar
janis.streib committed
81
        name: "Navbar",
gj4210's avatar
gj4210 committed
82
83
84
85
86
87
        data() {
            return {
                show_search: false,
                search_input: ''
            }
        },
janis.streib's avatar
janis.streib committed
88
89
90
91
92
        methods: {
            async logout() {
                await LoginService.logout(this.$store.state.token.pk)
                this.$store.commit('logout')
                await this.$router.push('/login')
gj4210's avatar
gj4210 committed
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
            },
            searchAction(e) {
                e.preventDefault()
                if (this.search_input === '') {
                    this.show_search = !this.show_search
                    if (this.show_search) {
                        this.$nextTick(() => {
                            this.$refs.search.focus()
                        })
                    }
                } else {
                    // TODO: actually search stuff
                    window.console.log('Search: ' + this.search_input)
                    this.search_input = ''
                }
janis.streib's avatar
janis.streib committed
108
109
            }
        }
110
111
112
113
    }
</script>

<style scoped>
gj4210's avatar
gj4210 committed
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
    .slide-enter-active,
    .slide-leave-active {
        transition: transform 250ms;
        z-index: -10;
    }

    .slide-enter,
    .slide-leave-to {
        transform: translateX(120%);
    }

    .search-cover-wrapper {
        position: relative;
        width: 0;
        height: 0;
    }
130

gj4210's avatar
gj4210 committed
131
132
133
134
135
136
137
138
139
140
141
142
143
144
    .search-cover {
        z-index: -1;
        position: absolute;
        left: -30px;
        top: -25px;
        width: 200px;
        height: 50px;
        background: #343A40;
    }

    .search-button {
        z-index: 1;
    }
</style>