<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-xs 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="#"
            >
              <translate>Accesslog</translate>
            </a>
          </li>
          <li class="nav-item">
            <a
              @click="fetch('system/log/apache2/error.log', 'errorlog')"
              :class="errorlogStyle"
              href="#"
            >
              <translate>Errorlog</translate>
            </a>
          </li>
        </ul>
      </div>
      <div class="statuscontainer d-flex flex-row">
        <div class="statusline ml-3 mt-1 align-self-center">
          <h3>
            <translate>Last refresh:</translate>
            {{refreshed}}
          </h3>
        </div>
        <div class="refresh">
          <button class="btn btn-dark" @click="fetch(currentFile, currentLog)">
            <translate>Refresh</translate>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" 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>