Commit c3eae7b0 authored by gj4210's avatar gj4210 👽
Browse files

UPD: Refactored navbar into it's own component

parent 1d0011ff
<template> <template>
<div id="app"> <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}`"> <Navbar/>
<!-- 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>
<div id="wrapper"> <div id="wrapper">
<div id="page-content-wrapper"> <div id="page-content-wrapper">
<div class="container"> <div class="container">
...@@ -100,8 +44,10 @@ ...@@ -100,8 +44,10 @@
<script> <script>
import LoginService from '@/api-services/login.service' import LoginService from '@/api-services/login.service'
import Navbar from "./components/Navbar";
export default { export default {
components: {Navbar},
data() { data() {
return { return {
breadcrumbs: [], breadcrumbs: [],
......
<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>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment