<template>
  <div>
    <h3>{{ $t('system.firmwareTitle') }}</h3>

    <div v-if="system === null" class="loading">
      <LoadingIndicator></LoadingIndicator>
    </div>

    <div v-else>
      <form @submit.prevent="uploadFirmware">
        <input type="file" id="firmwareFile">

        <div class="buttons">
          <input type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
        </div>

        <div v-if="uploadProgress !== false">
          {{ uploadProgress }}%
        </div>
      </form>

      <form @submit.prevent="applySystem">
        <h3>{{ $t('system.pinsTitle') }}</h3>

        <div class="horizontal">
          <label for="pinLEDAP">{{ $t('system.pinLEDAP') }}</label>
          <input type="number" id="pinLEDAP" v-model.number="system.pins.ledAP">
        </div>

        <div class="horizontal">
          <label for="pinLEDSTA">{{ $t('system.pinLEDSTA') }}</label>
          <input type="number" id="pinLEDSTA" v-model.number="system.pins.ledSTA">
        </div>

        <div class="horizontal">
          <label for="pinAPButton">{{ $t('system.pinAPButton') }}</label>
          <input type="number" id="pinAPButton" v-model.number="system.pins.apButton">
        </div>

        <h3>{{ $t('system.ledStripTitle') }}</h3>

        <div class="horizontal">
          <label for="ledCount">{{ $t('system.ledCount') }}</label>
          <input type="number" id="ledCount" v-model.number="system.ledCount">
        </div>

        <div class="buttons">
          <input type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import LoadingIndicator from '@/components/loadingIndicator.vue';
import BaseVM from '@/BaseVM';

export default {
  mixins: [BaseVM],

  components: {
    LoadingIndicator
  },

  data()
  {
    return {
      system: null,
      uploadProgress: false
    }
  },


  mounted()
  {
    this.load();
  },


  methods: {
    load()
    {
      const self = this;

      return axios.get('/api/system', { retry: 10, retryDelay: 1000 })
        .then(response =>
        {
          if (typeof response.data == 'object')
            self.system = response.data;
        })
        .catch(e => self.handleAPIError('error.loadSystem', e));
    },


    save()
    {
      const self = this;
      if (self.saving)
        return;

      self.setSaving(true);

      axios.post('/api/system', self.system, { retry: 10, retryDelay: 1000, headers: { 'Content-Type': 'application/json' } })
        .then(response =>
        {
          self.showNotification(i18n.t('rebootPending'));
        })
        .catch(e => self.handleAPIError('error.applySystem', e))
        .then(() =>
        {
          self.setSaving(false);
        });
    },


    uploadFirmware()
    {
      const self = this;
      if (self.saving) return;

      const fileElement = document.getElementById('firmwareFile');
      if (fileElement.files.length == 0)
      {
        self.showNotification(self.$i18n.t('system.noFileSelected'), true);
        return;
      }

      self.saving = true;
      self.uploadProgress = 0;

      const data = new FormData();

      data.append('file', fileElement.files[0]);

      var config = {
        timeout: 360000,
        onUploadProgress: progressEvent =>
        {
          self.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        }
      };

      axios.post('/api/firmware', data, config)
        .then(response =>
        {
          self.showNotification(self.$i18n.t('rebootPending'));
        })
        .catch(e => self.handleAPIError('error.uploadFirmware', e))
        .then(() =>
        {
          self.uploadProgress = false;
          self.saving = false;

          document.getElementById('firmware').reset();
        });
    }
  }
}
</script>