# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1562761943 -7200
# Node ID 589f308d5802c800eb8a6d202bf3428ee6d71a02
# Parent  851c0ccba59b103f467413f6bb83be7a1ef53623# Parent  77db3d8487c1f720d79eda85b9564188f79e3a02
merge with improve-fwa-diagrams

diff -r 77db3d8487c1 -r 589f308d5802 client/src/components/systemconfiguration/ColorSettings.vue
--- a/client/src/components/systemconfiguration/ColorSettings.vue	Wed Jul 10 14:32:06 2019 +0200
+++ b/client/src/components/systemconfiguration/ColorSettings.vue	Wed Jul 10 14:32:23 2019 +0200
@@ -1,6 +1,5 @@
 <template>
-  <div class="d-flex flex-column pb-4 border-bottom">
-    <h5 class="py-2 px-3 mb-2 m-0"><translate>Color Settings</translate></h5>
+  <div class="d-flex flex-column py-4">
     <div class="px-3 container-fluid">
       <div class="row">
         <div class="col-sm-2">
diff -r 77db3d8487c1 -r 589f308d5802 client/src/components/systemconfiguration/DataAccuracy.vue
--- a/client/src/components/systemconfiguration/DataAccuracy.vue	Wed Jul 10 14:32:06 2019 +0200
+++ b/client/src/components/systemconfiguration/DataAccuracy.vue	Wed Jul 10 14:32:23 2019 +0200
@@ -1,8 +1,5 @@
 <template>
-  <div class="d-flex flex-column pb-4 border-bottom">
-    <h5 class="py-2 px-3 mb-2 m-0">
-      <translate>Data Availability/Accuracy</translate>
-    </h5>
+  <div class="d-flex flex-column py-4">
     <div class="px-3 container-fluid">
       <div class="row">
         <div class="col-sm-6 d-flex flex-column">
diff -r 77db3d8487c1 -r 589f308d5802 client/src/components/systemconfiguration/MapLayers.vue
--- a/client/src/components/systemconfiguration/MapLayers.vue	Wed Jul 10 14:32:06 2019 +0200
+++ b/client/src/components/systemconfiguration/MapLayers.vue	Wed Jul 10 14:32:23 2019 +0200
@@ -1,6 +1,5 @@
 <template>
-  <div class="d-flex flex-column pb-4 border-bottom">
-    <h5 class="py-2 px-3 mb-2 m-0"><translate>Map Layers</translate></h5>
+  <div class="d-flex flex-column py-4">
     <div class="px-3 container-fluid">
       <div class="row">
         <div class="col-sm-6">
diff -r 77db3d8487c1 -r 589f308d5802 client/src/components/systemconfiguration/MorphologyClassbreaks.vue
--- a/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Wed Jul 10 14:32:06 2019 +0200
+++ b/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Wed Jul 10 14:32:23 2019 +0200
@@ -1,8 +1,5 @@
 <template>
-  <div class="d-flex flex-column pb-4 border-bottom">
-    <h5 class="py-2 px-3 mb-2 m-0">
-      <translate>Bottleneck Morphology Classbreaks</translate>
-    </h5>
+  <div class="d-flex flex-column py-4">
     <div class="px-3">
       <h6 class="font-weight-bold"><translate>Sounding Result</translate></h6>
       <div class="d-flex flex-wrap">
diff -r 77db3d8487c1 -r 589f308d5802 client/src/components/systemconfiguration/PDFTemplates.vue
--- a/client/src/components/systemconfiguration/PDFTemplates.vue	Wed Jul 10 14:32:06 2019 +0200
+++ b/client/src/components/systemconfiguration/PDFTemplates.vue	Wed Jul 10 14:32:23 2019 +0200
@@ -1,6 +1,5 @@
 <template>
-  <div class="d-flex flex-column pb-4 border-bottom">
-    <h5 class="py-2 px-3 m-0"><translate>PDF-Templates</translate></h5>
+  <div class="d-flex flex-column pb-4">
     <input
       @change="uploadTemplate"
       id="uploadTemplate"
@@ -39,7 +38,7 @@
         </div>
       </template>
     </UITableBody>
-    <div class="px-3 mt-2">
+    <div class="p-3 border-top">
       <button
         class="btn btn-info btn-sm mr-2"
         @click="
diff -r 77db3d8487c1 -r 589f308d5802 client/src/components/systemconfiguration/Systemconfiguration.vue
--- a/client/src/components/systemconfiguration/Systemconfiguration.vue	Wed Jul 10 14:32:06 2019 +0200
+++ b/client/src/components/systemconfiguration/Systemconfiguration.vue	Wed Jul 10 14:32:23 2019 +0200
@@ -4,17 +4,79 @@
     <div class="card my-2 mr-2 flex-fill shadow-xs">
       <UIBoxHeader icon="wrench" :title="systemconfigurationLabel" />
       <div class="text-left flex-fill" style="overflow: auto">
-        <PDFTemplates />
-        <ColorSettings v-if="isSysAdmin" />
-        <MapLayers v-if="isSysAdmin" />
-        <DataAccuracy v-if="isSysAdmin" />
-        <MorphologyClassbreaks v-if="isSysAdmin" />
+        <ul class="nav nav-pills nav-fill border-bottom">
+          <li class="nav-item">
+            <a
+              :class="['nav-link', { active: activeTab === 'pdf-templates' }]"
+              href="#"
+              @click.prevent="activeTab = 'pdf-templates'"
+            >
+              <translate>PDF-Templates</translate>
+            </a>
+          </li>
+          <li class="nav-item" v-if="isSysAdmin">
+            <a
+              :class="['nav-link', { active: activeTab === 'color-settings' }]"
+              href="#"
+              @click.prevent="activeTab = 'color-settings'"
+            >
+              <translate>Color Settings</translate>
+            </a>
+          </li>
+          <li class="nav-item" v-if="isSysAdmin">
+            <a
+              :class="['nav-link', { active: activeTab === 'map-layers' }]"
+              href="#"
+              @click.prevent="activeTab = 'map-layers'"
+            >
+              <translate>Map Layers</translate>
+            </a>
+          </li>
+          <li class="nav-item" v-if="isSysAdmin">
+            <a
+              :class="['nav-link', { active: activeTab === 'data-accuracy' }]"
+              href="#"
+              @click.prevent="activeTab = 'data-accuracy'"
+            >
+              <translate>Data Availability/Accuracy</translate>
+            </a>
+          </li>
+          <li class="nav-item" v-if="isSysAdmin">
+            <a
+              :class="[
+                'nav-link',
+                { active: activeTab === 'morphology-classbreaks' }
+              ]"
+              href="#"
+              @click.prevent="activeTab = 'morphology-classbreaks'"
+            >
+              <translate>Bottleneck Morphology Classbreaks</translate>
+            </a>
+          </li>
+        </ul>
+        <keep-alive>
+          <PDFTemplates v-if="activeTab === 'pdf-templates'" />
+          <ColorSettings v-if="isSysAdmin && activeTab === 'color-settings'" />
+          <MapLayers v-if="isSysAdmin && activeTab === 'map-layers'" />
+          <DataAccuracy v-if="isSysAdmin && activeTab === 'data-accuracy'" />
+          <MorphologyClassbreaks
+            v-if="isSysAdmin && activeTab === 'morphology-classbreaks'"
+          />
+        </keep-alive>
       </div>
       <!-- card-body -->
     </div>
   </div>
 </template>
 
+<style lang="sass">
+.nav-pills
+  .nav-link
+    border-radius: 0
+    &.active
+      background: $color-info
+</style>
+
 <script>
 /* This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.
@@ -34,7 +96,11 @@
 import { mapGetters } from "vuex";
 
 export default {
-  name: "systemconfiguration",
+  data() {
+    return {
+      activeTab: "pdf-templates"
+    };
+  },
   components: {
     Spacer: () => import("../Spacer"),
     PDFTemplates: () => import("./PDFTemplates"),