App.vue

<template>
    <div id="app">
        <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>
                        <template slot="button-content">
                            <font-awesome-icon :icon="['far', 'user']"></font-awesome-icon>
                            <span v-if="session"> {{session.user.login_name}}</span>
                            <span v-if="!session"> Anmelden</span>
                        </template>
                            <b-dropdown-item to="/logout">Abmelden</b-dropdown-item>
                    </b-nav-item-dropdown>

                </b-navbar-nav>
            </b-collapse><!-- /.navbar-collapse -->
        </b-navbar>
        <div id="wrapper">
            <div id="page-content-wrapper">
                <div class="container">
                    <b-breadcrumb :items="breadcrumbs"/>
                    <router-view/>
                    <footer>
                        <hr>
                        <p class="pull-right d-print-none">
                            <a target="_blank" href="https://www-net-doku.scc.kit.edu/webapi/release/dnscfg-perms/"><font-awesome-icon :icon="['far', 'life-ring']"></font-awesome-icon> Hilfe/Dokumentation</a> |
                            <a target="_blank" href="https://www-net-devel-doku.scc.kit.edu/webapi/release/intro/"><font-awesome-icon icon="code"></font-awesome-icon> API</a> |
                            <a target="_blank" href="https://git.scc.kit.edu/scc-net/net-suite/net-suite/issues"><font-awesome-icon icon="bug"></font-awesome-icon> Fehler melden</a> |
                            Kontakt: <a href="mailto:dns-betrieb@scc.kit.edu">dns-betrieb∂scc.kit.edu</a>
                        </p>
                        <p class="pull-left">Instanz: {{$sysinfo.host_oper_mode.mode}} | <b-link v-b-modal.net-suite-version>Version</b-link></p>
                            <b-modal class="text-center" id="net-suite-version" hide-footer hide-header>
                                <img alt="SCC" src="@/assets/img/scc_logo_small.png"/>
                                <h3>NET-Suite</h3>
                                <p>
                                Version <a :href="`https://git.scc.kit.edu/scc-net/net-suite/net-suite/commit/${$sysinfo.version}`" target="_blank">{{$sysinfo.version}}</a>
                                </p>
                                Module:
                                <ul>
                                    <li v-for="m in $sysinfo.mods" :key="m.mod_path">MOD_{{m.mod_path}}:
                                        <a target="_blank" :href="`${m.gitlab_url}/commit/${m.version}`">{{m.version}}</a></li>
                                </ul>
                            </b-modal>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
    @import '../node_modules/bootstrap/scss/bootstrap.scss';
    @import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css';
    @import 'assets/css/net-suite.css';
    @import 'assets/css/net-suite-devel.css';
    @import 'assets/css/net-suite-test.css';
</style>

<script>
    import SessionService from '@/api-services/session.service'

    export default {
        data() {
            return {
                breadcrumbs: [],
                session: null,
            }
        },
        watch: {
            $route() {
                var m = this.$router.currentRoute.matched
                m = m[m.length - 1]
                this.breadcrumbs = this.gen_bread(m)
            }
        },
        methods: {
            gen_bread(m) {
                var res = [{text: m.meta.resolveName(this.$route.params), path: m.path}]
                while ((m.meta && m.meta.resolveParents) || m.parent) {
                    if (m.meta && m.meta.resolveParents) {
                        let parents = m.meta.resolveParents(this.$route.params)
                        for(let i=0;i<parents.length;i++) {
                            if(typeof parents[i] === 'object' && 'text' in parents[i] && 'to' in parents[i]) {
                                res.unshift(parents[i])
                                continue
                            }
                            m = this.$router.resolve(parents[i]).resolved.matched
                            window.console.debug(m)
                            m = m[m.length - 1]
                            res.unshift({text: m.meta.resolveName(this.$route.params), to: parents[i]})
                        }
                    } else {
                        m = m.parent
                        res.unshift({text: m.meta.resolveName(this.$route.params), to: m.path})
                    }
                }
                return res

            },
            upd_bread() {
                var m = this.$router.currentRoute.matched
                var res = []
                for (var i = 0; i < m.length; i++) {
                    res.push({text: m.name, to: m.path})
                }
                this.breadcrumbs = res
            }
        },
        created() {
            SessionService.get().then((res) =>{
                this.session = res.data
            })
        }
    }
</script>