Navbar.vue 3.75 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
<template>
    <b-navbar toggleable="lg" fixed="top" :type="$sysinfo.host_oper_mode.is_prod?'light':'dark'" :variant="$sysinfo.host_oper_mode.is_prod?'light':'dark'" :class="`bg-${$sysinfo.host_oper_mode.mode}`">
        <!-- 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>
                <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>
            </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>
                <b-nav-item>
                    <i class="fas fa-tasks" aria-hidden="true"></i> Transaktion <span
                        class="badge badge-pill badge-success"
                        id="trans_count">0</span>
                </b-nav-item>
                <b-nav-item-dropdown v-if="$store.state.user" right :toggle-class="$route.path.startsWith('/user/')?'active':''">
                    <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">
                        <b-dropdown-item to="/user/tokens" :active="$route.path === '/user/tokens'"><font-awesome-icon icon="code"></font-awesome-icon> API-Tokens</b-dropdown-item>
                        <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>