<template>
  <div>
    <b-card>
      <b-card-title>{{ $t("jobs") }}</b-card-title>
      <b-row>
        <b-col>
          <b-input id="new-job" v-model="newJobName" :placeholder="$t('newJobName')"></b-input>
          <b-popover
              :show.sync="showHelp"
              target="new-job"
              placement="top"
              triggers="manual"
              variant="primary"
              :content="$t('newJobHelp')"
          ></b-popover>
        </b-col>
        <b-col>
          <b-button variant="primary" @click="createJob()" :disabled="!jobNameValid(newJobName)">{{ $t("create") }}
          </b-button>
        </b-col>
      </b-row>

      <hr/>

      <b-progress v-if="jobsLoading" striped animated value="100"></b-progress>
      <b-list-group v-else>
        <JobListItem v-for="job in jobs" :key="job.name" :job="job"></JobListItem>
      </b-list-group>
    </b-card>

    <br/>

    <b-card>

      <b-card-title>{{ $t("frontends") }}</b-card-title>

      <b-row>
        <b-col>
          <b-input v-model="newFrontendName" :placeholder="$t('newFrontendName')"></b-input>
        </b-col>
        <b-col>
          <b-button variant="primary" @click="createFrontend()" :disabled="!frontendNameValid(newFrontendName)">
            {{ $t("create") }}
          </b-button>
        </b-col>
      </b-row>

      <hr/>

      <b-progress v-if="frontendsLoading" striped animated value="100"></b-progress>
      <b-list-group v-else>
        <FrontendListItem v-for="frontend in frontends"
                          :key="frontend.name" :frontend="frontend"></FrontendListItem>
      </b-list-group>

    </b-card>
  </div>
</template>

<script>
import JobListItem from "@/components/JobListItem";
import {formatBindAddress} from "@/util";
import Sist2AdminApi from "@/Sist2AdminApi";
import FrontendListItem from "@/components/FrontendListItem";

export default {
  name: "Jobs",
  components: {JobListItem, FrontendListItem},
  data() {
    return {
      jobsLoading: true,
      newJobName: "",
      jobs: [],

      frontendsLoading: true,
      frontends: [],
      formatBindAddress,
      newFrontendName: "",

      showHelp: false
    }
  },
  mounted() {
    this.loading = true;
    this.reload();
  },
  methods: {
    jobNameValid(name) {
      if (this.jobs.some(job => job.name === name)) {
        return false;
      }

      return /^[a-zA-Z0-9-_,.; ]+$/.test(name);
    },
    frontendNameValid(name) {
      if (this.frontends.some(job => job.name === name)) {
        return false;
      }

      return /^[a-zA-Z0-9-_,.; ]+$/.test(name);
    },
    reload() {
      Sist2AdminApi.getJobs().then(resp => {
        this.jobs = resp.data;
        this.jobsLoading = false;

        this.showHelp = this.jobs.length === 0;
      });
      Sist2AdminApi.getFrontends().then(resp => {
        this.frontends = resp.data;
        this.frontendsLoading = false;
      });
    },
    createJob() {
      Sist2AdminApi.createJob(this.newJobName).then(this.reload);
    },
    createFrontend() {
      Sist2AdminApi.createFrontend(this.newFrontendName).then(this.reload)
    }
  }
}
</script>
