--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/admin/Logs.vue	Thu Nov 22 07:40:23 2018 +0100
@@ -0,0 +1,158 @@
+<template>
+    <div class="main d-flex flex-column">
+        <div class="d-flex flex-row">
+            <div :class="spacer"></div>
+            <div class="logoutput text-left bg-white shadow mt-3 mx-3">
+                <pre id="code" v-highlightjs="logs"><code class="bash hljs hljs-string"></code></pre>
+            </div>
+        </div>
+        <div class="d-flex flex-row logmenu">
+            <div class="d-flex align-self-center">
+                <ul class="nav nav-pills">
+                    <li class="nav-item">
+                        <a
+                            @click="fetch('system/log/apache2/access.log', 'accesslog')"
+                            :class="accesslogStyle"
+                            href="#"
+                        >Accesslog</a>
+                    </li>
+                    <li class="nav-item">
+                        <a
+                            @click="fetch('system/log/apache2/error.log', 'errorlog')"
+                            :class="errorlogStyle"
+                            href="#"
+                        >Errorlog</a>
+                    </li>
+                </ul>
+            </div>
+            <div class="statuscontainer d-flex flex-row">
+                <div class="statusline ml-3 mt-1 align-self-center">
+                    <h3>Last refresh: {{refreshed}}</h3>
+                </div>
+                <div class="refresh">
+                    <button class="btn btn-dark" @click="fetch(currentFile, currentLog)">Refresh</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="sass" scoped>
+.statuscontainer
+  width: 87%
+  position: relative
+  
+.logmenu
+  margin-left: 5rem
+  min-width: 60vw
+  
+#code
+  overflow: auto
+  
+.refresh
+  position: absolute
+  right: 0
+  
+.logoutput
+  width: 95%
+  height: 85vh
+  overflow: auto
+  transition: $transition-fast
+
+.spacer
+  height: 90vh
+
+.spacer-collapsed
+  min-width: $icon-width + $offset
+  transition: $transition-fast
+
+.spacer-expanded
+  min-width: $sidebar-width + $offset
+
+.statusline
+  position: absolute
+  right: 0
+  margin-right: 7rem
+</style>
+
+<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>
+ */
+import { mapState } from "vuex";
+import { HTTP } from "../../lib/http.js";
+import "../../../node_modules/highlight.js/styles/paraiso-dark.css";
+import Vue from "vue";
+import VueHighlightJS from "vue-highlightjs";
+Vue.use(VueHighlightJS);
+
+const ACCESSLOG = "accesslog";
+const ERRORLOG = "errorlog";
+
+export default {
+  name: "logs",
+  mounted() {
+    this.fetch("system/log/apache2/access.log", ACCESSLOG);
+  },
+  data() {
+    return {
+      logs: null,
+      currentLog: null,
+      currentFile: null,
+      refreshed: null
+    };
+  },
+  methods: {
+    fetch(file, type) {
+      HTTP.get(file, {
+        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+      })
+        .then(response => {
+          this.logs = response.data.content;
+          this.currentLog = type;
+          this.refreshed = new Date().toLocaleString();
+          this.currentFile = file;
+        })
+        .catch();
+    },
+    disallow(e) {
+      e.target.blur();
+    }
+  },
+  computed: {
+    ...mapState("application", ["showSidebar"]),
+    accesslogStyle() {
+      return {
+        active: this.currentLog == ACCESSLOG,
+        "nav-link": true
+      };
+    },
+    errorlogStyle() {
+      return {
+        active: this.currentLog == ERRORLOG,
+        "nav-link": true
+      };
+    },
+    spacer() {
+      return [
+        "spacer ml-3",
+        {
+          "spacer-expanded": this.showSidebar,
+          "spacer-collapsed": !this.showSidebar
+        }
+      ];
+    }
+  }
+};
+</script>