<template>
  <div class="main d-flex flex-column">
    <div class="d-flex flex-row">
      <Spacer></Spacer>
      <div class="card logs shadow-xs mt-3 mr-3">
        <UIBoxHeader icon="book" title="Logs" />
        <div class="logoutput text-left bg-white">
          <pre id="code" v-highlightjs="logs">
          <code class="bash hljs hljs-string"></code>
          </pre>
        </div>
        <div class="logmenu">
          <div class="d-flex align-self-center">
            <ul class="nav nav-pills">
              <li class="nav-item">
                <a
                  :class="accesslogStyle"
                  @click="fetch('system/log/apache2/access.log', 'accesslog')"
                  href="#"
                >
                  <translate>Accesslog</translate>
                </a>
              </li>
              <li class="nav-item">
                <a
                  :class="errorlogStyle"
                  @click="fetch('system/log/apache2/error.log', 'errorlog')"
                  href="#"
                >
                  <translate>Errorlog</translate>
                </a>
              </li>
            </ul>
          </div>
          <div class="statuscontainer d-flex flex-row mb-3">
            <div class="statusline align-self-center">
              <h3><translate>Last refresh:</translate> {{ refreshed }}</h3>
            </div>
            <div class="refresh">
              <button
                @click="fetch(currentFile, currentLog)"
                class="btn btn-dark"
              >
                <translate>Refresh</translate>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.statuscontainer {
  width: 87%;
  position: relative;
}

.logmenu {
  position: relative;
  margin-left: $offset;
  margin-top: $offset;
}

.logs {
  height: 85vh;
}

#code {
  overflow: auto;
}

.refresh {
  position: absolute;
  right: $offset;
  bottom: 0;
}

.logoutput {
  margin-left: $offset;
  margin-right: $offset;
  margin-top: $offset;
  height: 90%;
  overflow: auto;
  transition: $transition-fast;
}

.statusline {
  position: absolute;
  right: 0;
  margin-right: 9rem;
  bottom: -0.5rem;
}

.statuscontainer {
  width: 100%;
}
</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",
  components: {
    Spacer: () => import("./Spacer")
  },
  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
      };
    }
  }
};
</script>