Navbar.vue 6.11 KB
Newer Older
1
<template>
Robert's avatar
Robert committed
2
3
4
5
6
  <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}` + ' shadow'">
    <!-- Brand and toggle get grouped for better mobile display -->
    <b-navbar-brand to="/">
Janis Streib's avatar
Janis Streib committed
7
8
      <img v-if="$store.state.spec_ready" class="d-inline-block align-top scc-img" alt="SCC" src="@/assets/img/scc_logo_small.png"/>
      <img v-else class="d-inline-block align-top scc-img" alt="NETTVS" src="@/assets/img/netvs_logo.png"/>
Robert's avatar
Robert committed
9
10
11
12
13
14
15
16
      <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"/>
    </b-navbar-toggle>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <b-collapse is-nav id="navbarNavDropdown" ref="navdropdown">
      <b-navbar-nav>
Janis Streib's avatar
Nettvs    
Janis Streib committed
17
        <NavbarContent></NavbarContent>
Robert's avatar
Robert committed
18
19
      </b-navbar-nav>
      <b-navbar-nav class="ml-auto">
20
        <GlobalSearch v-if="$store.state.user"/>
Janis Streib's avatar
Janis Streib committed
21
        <b-nav-item :active="$store.state.show_sidebar" v-if="$store.state.token"
Robert's avatar
Robert committed
22
23
24
25
26
                    @click.stop="$store.commit('showSidebar', !$store.state.show_sidebar)">
          <font-awesome-icon :icon="['fas', 'tasks']"/>
          Geplante Aktionen
          <b-badge variant="primary">{{ $store.state.ta_list ? $store.state.ta_list.length : 0 }}</b-badge>
        </b-nav-item>
Janis Streib's avatar
Janis Streib committed
27
        <b-nav-item-dropdown right
Janis Streib's avatar
Janis Streib committed
28
29
30
31
32
                             :toggle-class="$route.path.startsWith('/tools/')?'active':''">
          <template slot="button-content">
            <font-awesome-icon icon="tools"/>
            Werkzeuge
          </template>
Janis Streib's avatar
Janis Streib committed
33
          <b-dropdown-item to="/tools/macfinder" v-if="$store.state.token" :active="$route.path === '/tools/macfinder'">
Janis Streib's avatar
Janis Streib committed
34
35
36
            <font-awesome-icon fixed-width icon="ethernet"/>
            Macfinder
          </b-dropdown-item>
Janis Streib's avatar
Janis Streib committed
37
38
39
40
          <b-dropdown-item to="/tools/oui_lookup" :active="$route.path === '/tools/oui_lookup'">
            <font-awesome-icon fixed-width icon="question"/>
            MAC-Vendor-Suche
          </b-dropdown-item>
Janis Streib's avatar
FIXUP    
Janis Streib committed
41
          <b-dropdown-item to="/tools/ap_list" v-if="$sysinfo_js_mods.includes('ap_list') && $store.state.token" :active="$route.path === '/tools/ap_list'">
Janis Streib's avatar
Janis Streib committed
42
43
44
            <font-awesome-icon fixed-width icon="broadcast-tower"/>
            AP-Liste
          </b-dropdown-item>
Janis Streib's avatar
Janis Streib committed
45
        </b-nav-item-dropdown>
Janis Streib's avatar
Janis Streib committed
46
        <b-nav-item-dropdown v-if="$store.state.token" right
Janis Streib's avatar
Janis Streib committed
47
48
                             :toggle-class="$route.path.startsWith('/cntl/')?'active':''">
          <template slot="button-content">
Janis Streib's avatar
FMT    
Janis Streib committed
49
50
            <font-awesome-icon :icon="['fas', 'users-cog']"></font-awesome-icon>
            Organisation
Janis Streib's avatar
Janis Streib committed
51
52
53
54
55
56
57
58
59
60
          </template>
          <b-dropdown-item to="/cntl/ou" :active="$route.path === '/cntl/ou'">
            <font-awesome-icon fixed-width :icon="['fas', 'building']"/>
            Organisationseinheiten
          </b-dropdown-item>
          <b-dropdown-item to="/cntl/groups" :active="$route.path === '/cntl/groups'">
            <font-awesome-icon fixed-width :icon="['fas', 'users']"/>
            Gruppen
          </b-dropdown-item>
        </b-nav-item-dropdown>
Robert's avatar
Robert committed
61
62
63
        <b-nav-item-dropdown v-if="$store.state.user" right
                             :toggle-class="$route.path.startsWith('/user/')?'active':''">
          <template slot="button-content">
Janis Streib's avatar
FMT    
Janis Streib committed
64
            <font-awesome-icon :icon="['fas', usr_ico]"/>
Robert's avatar
Robert committed
65
66
67
            <span v-if="$store.state.user"> {{ $store.state.user.login_name }}</span>
          </template>
          <template v-if="$store.state.user">
Janis Streib's avatar
Janis Streib committed
68
            <b-dropdown-item v-if="$store.state.token" to="/user/tokens" :active="$route.path === '/user/tokens'">
Janis Streib's avatar
Janis Streib committed
69
              <font-awesome-icon dixed-width :icon="['fas', 'code']"/>
Janis Streib's avatar
Janis Streib committed
70
              Unterkonten & API-Tokens
Robert's avatar
Robert committed
71
            </b-dropdown-item>
Janis Streib's avatar
Janis Streib committed
72
            <b-dropdown-divider v-if="$store.state.token" />
Robert's avatar
Robert committed
73
            <b-dropdown-item @click="logout">
Janis Streib's avatar
Janis Streib committed
74
              <font-awesome-icon fixed-width :icon="['fas', 'sign-out-alt']"/>
Robert's avatar
Robert committed
75
76
77
78
79
80
              Abmelden
            </b-dropdown-item>
          </template>
        </b-nav-item-dropdown>
        <b-nav-item v-else to="/login">
          <font-awesome-icon :icon="['fas', 'sign-in-alt']"/>
Janis Streib's avatar
Janis Streib committed
81
          <span> Anmelden</span>
Robert's avatar
Robert committed
82
        </b-nav-item>
83
84
85
86
87
88
89
90
        <b-nav-item-dropdown right title="Lokale Anwendungseinstellungen">
          <template slot="button-content">
            <font-awesome-icon icon="cog"/>
          </template>
          <b-dropdown-item @click="$store.commit('toggle_expert')">
            <b-checkbox :checked="$store.state.expert">Expertenmodus</b-checkbox>
          </b-dropdown-item>
        </b-nav-item-dropdown>
Robert's avatar
Robert committed
91
92
93
      </b-navbar-nav>
    </b-collapse><!-- /.navbar-collapse -->
  </b-navbar>
94
95
96
</template>

<script>
Robert's avatar
Robert committed
97
import LoginService from '@/api-services/login.service'
Janis Streib's avatar
Janis Streib committed
98
import GlobalSearch from '@/components/GlobalSearch'
Janis Streib's avatar
Nettvs    
Janis Streib committed
99
import NavbarContent from '@/components/NavbarContent'
Janis Streib's avatar
Janis Streib committed
100

Robert's avatar
Robert committed
101
export default {
Janis Streib's avatar
Janis Streib committed
102
  name: 'Navbar',
Janis Streib's avatar
Nettvs    
Janis Streib committed
103
  components: {NavbarContent, GlobalSearch},
Janis Streib's avatar
FMT    
Janis Streib committed
104
105
106
107
108
109
110
  data() {
    return {
      usr_ico: 'user',
      ms: 0,
      pev: null,
      cuv: null
    }
Robert's avatar
Robert committed
111
112
  },
  methods: {
Janis Streib's avatar
FMT    
Janis Streib committed
113
    async logout() {
Robert's avatar
Robert committed
114
115
116
117
118
119
120
      if (this.$store.token == null) {
        await LoginService.logout(null)
      } else {
        await LoginService.logout(this.$store.state.token.pk || null)
      }
      this.$store.commit('logout')
      await this.$router.push('/login')
121
    }
Janis Streib's avatar
FMT    
Janis Streib committed
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
  },
  mounted() {
    const self = this
    document.documentElement.onmousemove = function (event) {
      self.cuv = event
    }
    const intv = setInterval(function () {
      if (self.pev && self.cuv) {
        const movementX = Math.abs(self.cuv.screenX - self.pev.screenX)
        const movementY = Math.abs(self.cuv.screenY - self.pev.screenY)
        const movement = Math.sqrt(movementX * movementX + movementY * movementY)
        const speed = 10 * movement
        if (speed > self.ms) {
          self.ms = speed
        }
      }
      self.pev = self.cuv
Janis Streib's avatar
Janis Streib committed
139
      if (self.ms > 10000) {
Janis Streib's avatar
FMT    
Janis Streib committed
140
141
142
143
        self.usr_ico = 'user-ninja'
        clearInterval(intv)
      }
    }, 100)
Robert's avatar
Robert committed
144
145
  }
}
146
</script>