Mercurial > gemma
view client/src/components/Sidebar.vue @ 2068:5a898da60b87
dma added
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 30 Jan 2019 15:43:08 +0100 |
parents | 8b5cc2dffbde |
children | 5f3110aa1ad1 |
line wrap: on
line source
<template> <div :class="sidebarStyle"> <div @click="$store.commit('application/showSidebar', !showSidebar)" class="menubutton ui-element d-print-none p-2 bg-white rounded position-absolute d-flex justify-content-center" > <font-awesome-icon class="fa-fw" icon="bars"></font-awesome-icon> </div> <div class="menu text-nowrap text-left"> <router-link to="/"> <font-awesome-icon class="fa-fw mr-2" fixed-width icon="map-marked-alt" ></font-awesome-icon> <span class="fix-trans-space" v-translate>Map</span> </router-link> <a :class="['secondary', { active: isActive('bottlenecks') }]" @click="toggleContextBox('bottlenecks')" href="#" > <font-awesome-icon class="fa-fw mr-2" fixed-width icon="ship" ></font-awesome-icon> <span class="fix-trans-space" v-translate>Bottlenecks</span> </a> <div v-if="isWaterwayAdmin"> <a :class="['secondary', { active: isActive('staging') }]" @click="toggleContextBox('staging')" href="#" > <font-awesome-icon class="fa-fw mr-2" fixed-width icon="clipboard-check" ></font-awesome-icon> <span class="fix-trans-space" v-translate>Staging area</span> </a> </div> <div v-if="isSysAdmin"> <a :class="['secondary', { active: isActive('stretches') }]" @click="toggleContextBox('stretches')" href="#" > <font-awesome-icon class="fa-fw mr-2" fixed-width icon="road" ></font-awesome-icon> <span class="fix-trans-space" v-translate>Define stretches</span> </a> </div> <div v-if="isWaterwayAdmin"> <small class="text-muted pl-3"> <translate>Import</translate> </small> <hr class="m-0" /> <router-link to="/importsoundingresults"> <font-awesome-icon class="fa-fw mr-2" fixed-width icon="upload" ></font-awesome-icon> <span class="fix-trans-space" v-translate >Import soundingresults</span > </router-link> <router-link to="/importapprovedgaugemeasurement"> <font-awesome-icon class="fa-fw mr-2" fixed-width icon="upload" ></font-awesome-icon> <span class="fix-trans-space" v-translate >Import approved gaugemeasurements</span > </router-link> <router-link to="/importwaterwayprofiles"> <font-awesome-icon class="fa-fw mr-2" fixed-width icon="upload" ></font-awesome-icon> <span class="fix-trans-space" v-translate >Import waterway profiles</span > </router-link> <router-link to="importschedule"> <font-awesome-icon class="fa-fw mr-2" fixed-width icon="clock" ></font-awesome-icon> <translate class="fix-trans-space">Imports</translate> </router-link> <small class="text-muted pl-3"> <translate>Systemadministration</translate> </small> <hr class="m-0" /> </div> <div v-if="isSysAdmin"> <router-link to="usermanagement"> <font-awesome-icon class="fa-fw mr-2" fixed-width icon="users-cog" ></font-awesome-icon> <span class="fix-trans-space" v-translate>Users</span> </router-link> <router-link to="systemconfiguration"> <font-awesome-icon class="fa-fw mr-2" fixed-width icon="wrench" ></font-awesome-icon> <span class="fix-trans-space" v-translate>Configuration</span> </router-link> <router-link to="logs"> <font-awesome-icon class="fa-fw mr-2" fixed-width icon="book" ></font-awesome-icon> <span class="fix-trans-space" v-translate>Logs</span> </router-link> </div> <div v-if="isWaterwayAdmin"> <router-link to="importqueue"> <font-awesome-icon class="fa-fw mr-2" fixed-width icon="tasks" ></font-awesome-icon> <span class="fix-trans-space" v-translate>Importqueue</span> </router-link> </div> <hr class="m-0" /> <a @click="logoff" href="#" class="logout"> <font-awesome-icon class="fa-fw mr-2" fixed-width icon="power-off" ></font-awesome-icon> <span class="fix-trans-space" v-translate>Logout</span> {{ user }} </a> </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"; import { logOff } from "@/lib/session.js"; export default { name: "sidebar", props: ["routeName"], watch: { $route() { const { review, importlog } = this.$route.query; if (review) { this.toggleContextBox("staging"); this.$store.commit("imports/setImportToReview", review); } else { this.$store.commit("imports/setImportToReview", -99); } if (importlog) { this.$router.push("/importqueue/" + importlog); } } }, computed: { ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]), ...mapState("user", ["user"]), ...mapState("application", [ "showSidebar", "showSearchbarLastState", "contextBoxContent", "showContextBox" ]), sidebarStyle() { return [ "ui-element position-relative sidebar rounded shadow-xs d-print-none mb-auto", { sidebarcollapsed: !this.showSidebar, sidebarextended: this.showSidebar } ]; } }, methods: { logoff() { logOff(); }, toggleContextBox(context) { if (this.$route.path !== "/") this.$router.push("/"); this.$store.commit("application/showContextBox", true); this.$store.commit("application/contextBoxContent", context); this.$store.commit("application/showSearchbar", true); }, isActive(item) { return ( this.showContextBox && this.contextBoxContent === item && this.routeName == "mainview" ); } } }; </script> <style lang="scss" scoped> .menubutton { height: 2rem; width: 2rem; top: 0; left: 0; color: #666; } .menu a { display: block; text-align: left; padding: 0.5rem 1rem; color: #333; text-decoration: none; } .menu a svg path { fill: #666; } .menu a:hover { background-color: #f8f8f8; } .menu a.router-link-exact-active { background-color: #17a2b8; color: #fff; } .menu a.router-link-exact-active svg path { fill: #fff; } .menu a.secondary.active { background: #ebfafd; color: #0f6674; } .menu a.secondary.active svg path { fill: #0f6674; } .sidebar { background-color: #ffffff; padding-top: $large-offset; opacity: $slight-transparent; transition: $transition-fast; overflow: hidden; } .sidebarcollapsed { max-height: $icon-height; max-width: $icon-width; } .sidebarextended { max-width: $sidebar-width; min-width: $sidebar-width; } </style>