<template>
    <div class="main d-flex flex-column">
        <div class="d-flex flex-row">
            <div :class="spacer"></div>
            <div class="logoutput shadow">
                <pre v-highlightjs="logs"><code class="bash"></code></pre>
            </div>
        </div>
        <div class="logmenu">
            <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>
</template>

<style scoped lang="scss">
.logmenu {
  margin-left: auto;
  margin-right: auto;
}
.logoutput {
  width: 95%;
  height: 85vh;
  margin-top: $offset;
  margin-right: $offset;
  margin-left: $offset;
  text-align: left;
  background-color: white;
  overflow: scroll;
  transition: $transition-fast;
}

.spacer {
  margin-left: $offset;
  height: 90vh;
}

.spacer-collapsed {
  min-width: $icon-width + $offset;
  transition: $transition-fast;
}

.spacer-expanded {
  min-width: $sidebar-width + $offset;
}
</style>

<script>
import { mapGetters } from "vuex";
import { HTTP } from "../application/lib/http.js";

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
    };
  },
  methods: {
    fetch(file, type) {
      HTTP.get(file, {
        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
      })
        .then(response => {
          this.logs = response.data.content;
          this.currentLog = type;
        })
        .catch(error => {
          console.log(error);
        });
    },
    disallow(e) {
      e.target.blur();
    }
  },
  computed: {
    ...mapGetters("application", ["sidebarCollapsed", "isUsermenuCollapsed"]),
    accesslogStyle() {
      return {
        active: this.currentLog == ACCESSLOG,
        "nav-link": true
      };
    },
    errorlogStyle() {
      return {
        active: this.currentLog == ERRORLOG,
        "nav-link": true
      };
    },
    spacer() {
      return {
        spacer: true,
        "spacer-expanded": !this.sidebarCollapsed,
        "spacer-collapsed": this.sidebarCollapsed
      };
    }
  }
};
</script>