App.vue 5.64 KB
Newer Older
1
<template>
janis.streib's avatar
FMT    
janis.streib committed
2
  <div id="app">
janis.streib's avatar
Nettvs    
janis.streib committed
3
4
5
6
7
8
9
10
11
12
13
    <template v-if="$store.state.spec_ready || $route.path !== '/'">
      <Navbar/>
      <div id="wrapper" :class="$store.state.show_sidebar ? 'squished' : null">
        <div id="page-content-wrapper">
          <div class="container">
            <b-alert v-if="$sysinfo.host_oper_mode.is_devel" show variant="warning">
              <b-row>
                <b-col cols="1" style="margin-top: auto; margin-bottom: auto" class="vertical-center">
                  <font-awesome-icon :icon="['fas', 'dumpster-fire']" size="3x"></font-awesome-icon>
                </b-col>
                <b-col style="margin-top: auto; margin-bottom: auto">
janis.streib's avatar
janis.streib committed
14
15
                      <span><b> WIP!</b>
                        Diese Anwendung befindet sich in aktiver Entwicklung. Einige Features könnten eingeschränkt funktionieren oder unerwartete Ergebnisse liefern.</span>
janis.streib's avatar
Nettvs    
janis.streib committed
16
17
18
19
20
21
22
                </b-col>
              </b-row>
            </b-alert>
            <b-breadcrumb :items="breadcrumbs"/>
            <router-view v-bind:key="$store.state.reload_count"/>
            <Footer/>
          </div>
23
        </div>
janis.streib's avatar
Nettvs    
janis.streib committed
24
25
26
        <b-card id="sidebar-wrapper" no-body :class="$store.state.show_sidebar ? 'hide' : null">
          <Sidebar/>
        </b-card>
janis.streib's avatar
FMT    
janis.streib committed
27
      </div>
janis.streib's avatar
Nettvs    
janis.streib committed
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
      <b-modal content-class="text-center" centered id="net-suite-error" hide-footer hide-header size="lg">
        <h1>
          <font-awesome-icon icon="poo-storm" size="3x"></font-awesome-icon>
        </h1>
        <h3>Etwas ist schief gelaufen...</h3>
        <CopyField class="shadow" variant="danger"
                   :text="global_error"
                   multiline/>
        <hr/>
        <a target="_blank" href="https://git.scc.kit.edu/scc-net/netvs/netvs-core/issues">
          <font-awesome-icon icon="bug"/>
          Fehler melden</a> |
        Unterstützung für diese Anwendung und die API: <a href="mailto:netvs@scc.kit.edu">netvs∂scc.kit.edu</a>
      </b-modal>
    </template>
    <template v-else-if="ready && !$store.state.spec_ready">
      <Netflix/>
    </template>
janis.streib's avatar
FMT    
janis.streib committed
46
  </div>
47
48
49
</template>

<script>
janis.streib's avatar
janis.streib committed
50
import Navbar from './components/Navbar'
janis.streib's avatar
janis.streib committed
51
import CopyField from './components/CopyField'
janis.streib's avatar
janis.streib committed
52
53
import Footer from './components/Footer'
import Sidebar from './components/Sidebar'
janis.streib's avatar
janis.streib committed
54
import {EventBus} from '@/eventbus'
janis.streib's avatar
Nettvs    
janis.streib committed
55
import Netflix from '@/views/Netflix'
56

janis.streib's avatar
janis.streib committed
57
export default {
janis.streib's avatar
Nettvs    
janis.streib committed
58
  components: {Sidebar, Footer, Navbar, CopyField, Netflix},
janis.streib's avatar
FMT    
janis.streib committed
59
  data() {
janis.streib's avatar
janis.streib committed
60
    return {
janis.streib's avatar
janis.streib committed
61
      global_error: null,
janis.streib's avatar
Nettvs    
janis.streib committed
62
63
      breadcrumbs: [],
      ready: false
janis.streib's avatar
janis.streib committed
64
65
66
    }
  },
  watch: {
janis.streib's avatar
FMT    
janis.streib committed
67
    $route() {
janis.streib's avatar
janis.streib committed
68
69
70
71
72
73
      let m = this.$router.currentRoute.matched
      m = m[m.length - 1]
      this.breadcrumbs = this.getBreadcrumbs(m)
    }
  },
  methods: {
janis.streib's avatar
FMT    
janis.streib committed
74
75
    getBreadcrumbs(m) {
      const res = [{text: m.meta.resolveName(this.$route.params), path: m.path}]
janis.streib's avatar
janis.streib committed
76
77
78
79
80
81
82
      while ((m.meta && m.meta.resolveParents) || m.parent) {
        if (m.meta && m.meta.resolveParents) {
          const 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
83
            }
janis.streib's avatar
janis.streib committed
84
85
            m = this.$router.resolve(parents[i]).resolved.matched
            m = m[m.length - 1]
janis.streib's avatar
FMT    
janis.streib committed
86
            res.unshift({text: m.meta.resolveName(this.$route.params), to: parents[i]})
janis.streib's avatar
janis.streib committed
87
88
89
          }
        } else {
          m = m.parent
janis.streib's avatar
FMT    
janis.streib committed
90
          res.unshift({text: m.meta.resolveName(this.$route.params), to: m.path})
91
        }
janis.streib's avatar
janis.streib committed
92
93
      }
      return res
94
    }
janis.streib's avatar
janis.streib committed
95
  },
janis.streib's avatar
FMT    
janis.streib committed
96
  mounted() {
janis.streib's avatar
janis.streib committed
97
    window.console.log('%c ', `font-size:0px; padding: 200px; background:url(${window.location.protocol}//${window.location.hostname}:${window.location.port}/important.webp) no-repeat; background-position: center; background-size: contain;`)
janis.streib's avatar
janis.streib committed
98
99
100
101
    const self = this
    EventBus.$on('error', (payload) => {
      window.console.debug('evbus trigger')
      window.console.debug(payload)
janis.streib's avatar
janis.streib committed
102
      if ('response' in payload) {
janis.streib's avatar
janis.streib committed
103
104
105
        if (payload.response.status === 401) {
          return
        }
106
        self.global_error = {failed_response: payload.response.data}
janis.streib's avatar
janis.streib committed
107
108
109
      } else {
        self.global_error = payload
      }
110
      self.global_error.route_info = {path: this.$route.path, redir_from: this.$route.redirectedFrom}
janis.streib's avatar
janis.streib committed
111
      self.global_error = JSON.stringify(self.global_error, null, 4)
janis.streib's avatar
janis.streib committed
112
113
      this.$bvModal.show('net-suite-error')
    })
janis.streib's avatar
Nettvs    
janis.streib committed
114
115
    window.console.debug('Path' + window.location.pathname)
    this.ready = window.location.pathname === '/' || window.location.pathname.trim() === '' || this.$route.path === '/'
janis.streib's avatar
janis.streib committed
116
117
  }
}
118
</script>
gj4210's avatar
gj4210 committed
119
120

<style lang="scss">
janis.streib's avatar
FMT    
janis.streib committed
121
122
123
124
125
@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';
gj4210's avatar
gj4210 committed
126

janis.streib's avatar
FMT    
janis.streib committed
127
$sidebar-width: 380px;
gj4210's avatar
gj4210 committed
128

janis.streib's avatar
FMT    
janis.streib committed
129
130
131
132
@media screen and (min-width: 981px) {
  #wrapper {
    transition: padding-right .5s;
  }
gj4210's avatar
gj4210 committed
133

janis.streib's avatar
FMT    
janis.streib committed
134
135
136
  #wrapper.squished {
    padding-right: $sidebar-width;
  }
gj4210's avatar
gj4210 committed
137

janis.streib's avatar
FMT    
janis.streib committed
138
139
140
141
142
143
144
145
146
147
148
  #sidebar-wrapper {
    height: 100%;
    width: $sidebar-width;
    position: fixed;
    z-index: 1;
    top: 0;
    right: -$sidebar-width;
    transition: right .5s;
    padding-top: 50px;
    background: #F7F7F7;
  }
gj4210's avatar
gj4210 committed
149

janis.streib's avatar
FMT    
janis.streib committed
150
151
152
153
  #sidebar-wrapper.hide {
    right: 0px;
  }
}
gj4210's avatar
gj4210 committed
154

janis.streib's avatar
FMT    
janis.streib committed
155
156
157
158
159
160
161
162
163
164
165
@media screen and (max-width: 980px) {
  #sidebar-wrapper {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 999;
    top: -100%;
    transition: top .5s;
    padding-top: 50px;
    background: #F7F7F7;
  }
gj4210's avatar
gj4210 committed
166

janis.streib's avatar
FMT    
janis.streib committed
167
168
169
170
  #sidebar-wrapper.hide {
    top: 0;
  }
}
171
172
173
174
175
176
177
178
179

.collapse-icon {
  transition: transform;
  transition-duration: 250ms;
}

.not-collapsed > .collapse-icon {
  transform: rotate(-180deg);
}
janis.streib's avatar
janis.streib committed
180
</style>