Mercurial > gemma
view client/src/application/Sidebar.vue @ 1142:dc3f0277628a
feat: Importqueue listing (Proof of concept)
This is only a prototypical overview of importqueue data from backend.
Uses GET to retrieve an overview of imports.
Shows in separate tables. Further concept needs to be developed to progress..
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 12 Nov 2018 15:00:04 +0100 |
parents | d9e6a1f6f394 |
children | 846e336d8ee5 |
line wrap: on
line source
<template> <div :class="sidebarStyle"> <div :class="menuStyle"> <div class="menupoints" v-if="this.showSidebar"> <router-link to="/" class="text-body d-flex flex-row nav-link"> <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology </router-link> <a v-if="routeName == 'mainview'" href="#" class="text-body d-flex flex-row nav-link" @click="$store.commit('application/showBottlenecks', !showBottlenecks);" >Bottlenecks</a> <div v-if="isSysAdmin"> <hr> <div class="nav-link d-flex menupadding text-muted">Administration</div> <router-link class="text-body d-flex flex-row nav-link" to="usermanagement"> <i class="fa fa-address-card-o align-self-center navicon"></i>Users </router-link> <router-link class="text-body d-flex flex-row nav-link" to="imports"> <i class="fa fa-exchange align-self-center navicon"></i>Imports </router-link> <router-link class="text-body d-flex flex-row nav-link" to="systemconfiguration" > <i class="fa fa-wrench align-self-center navicon"></i>Systemconfiguration </router-link> <router-link class="text-body d-flex flex-row nav-link" to="logs"> <i class="fa fa-book align-self-center navicon"></i>Systeminformation </router-link> </div> </div> </div> </div> </template> <script> /* * This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Thomas Junk <thomas.junk@intevation.de> * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapGetters, mapState } from "vuex"; export default { name: "sidebar", props: ["routeName"], computed: { ...mapGetters("user", ["isSysAdmin"]), ...mapState("application", ["showSidebar", "showBottlenecks"]), menuStyle() { return { menu: true, nav: true, "flex-column": true }; }, sidebarStyle() { return { "ui-element": true, sidebar: true, overlay: true, sidebarcollapsed: !this.showSidebar, sidebarextended: this.showSidebar, shadow: true, "d-print-none": true }; } } }; </script> <style lang="scss"> .menupoints { text-align: left; } .router-link-exact-active { background-color: #f2f2f2; } .navicon { margin-right: $small-offset; } .menu { padding-top: $small-offset; } .sidebar { top: $offset; left: $offset; background-color: #ffffff; padding-top: $large-offset; opacity: $slight-transparent; border-radius: $border-radius; } .overlay { position: absolute; z-index: -1; } .sidebarcollapsed { height: 30px; width: 30px; transition: $transition-fast; } .sidebarextended { min-height: $sidebar-height; width: $sidebar-width; } </style>