Navbar.vue 4.09 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'"
3
              :variant="$sysinfo.host_oper_mode.is_prod?'light':'dark'" :class="`bg-${$sysinfo.host_oper_mode.mode}` + ' shadow'">
4
5
6
7
8
9
10
11
12
13
14
        <!-- 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">
            <font-awesome-icon icon="bars"></font-awesome-icon>
        </b-navbar-toggle>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <b-collapse is-nav id="navbarNavDropdown">
            <b-navbar-nav>
gj4210's avatar
gj4210 committed
15
16
17
18
19
20
21
22
23
24
25
26
                <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>
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
            </b-navbar-nav>
            <b-navbar-nav class="ml-auto">
                <b-nav-form>
                    <div class="input-group mr-sm-2">

                        <div id="scope_filter_display" class="input-group-prepend">
                            <span class="input-group-text">DNSVS</span>
                        </div>
                        <input class="form-control" type="search" id="nav-search" name="search"
                               placeholder="Suchbegriff"
                               aria-label="Search">
                        <div class="input-group-append">
                            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
                        </div>
                    </div>
                </b-nav-form>
                <b-nav-item><span class="d-none d-xl-inline">Erweiterte </span>Suche</b-nav-item>
gj4210's avatar
gj4210 committed
44
45
46
47
                <b-nav-item :active="$parent.show_sidebar" @click="$parent.toggleSidebar">
                    <font-awesome-icon :icon="['fas', 'tasks']"/>
                    Geplante Aktionen
                    <b-badge variant="primary">1337</b-badge>
48
                </b-nav-item>
gj4210's avatar
gj4210 committed
49
50
                <b-nav-item-dropdown v-if="$store.state.user" right
                                     :toggle-class="$route.path.startsWith('/user/')?'active':''">
51
52
53
54
55
                    <template slot="button-content">
                        <font-awesome-icon :icon="['far', 'user']"></font-awesome-icon>
                        <span v-if="$store.state.user"> {{$store.state.user.login_name}}</span>
                    </template>
                    <template v-if="$store.state.user">
gj4210's avatar
gj4210 committed
56
57
58
59
                        <b-dropdown-item to="/user/tokens" :active="$route.path === '/user/tokens'">
                            <font-awesome-icon icon="code"></font-awesome-icon>
                            API-Tokens
                        </b-dropdown-item>
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
                        <b-dropdown-divider></b-dropdown-divider>
                        <b-dropdown-item @click="logout()">Abmelden</b-dropdown-item>
                    </template>
                </b-nav-item-dropdown>
                <b-nav-item v-else>
                    <font-awesome-icon :icon="['far', 'user']"></font-awesome-icon>
                    <span> Anmelden</span>
                </b-nav-item>

            </b-navbar-nav>
        </b-collapse><!-- /.navbar-collapse -->
    </b-navbar>
</template>

<script>
    export default {
        name: "Navbar"
    }
</script>

<style scoped>

</style>