Gadgety_Euclidean_Sequencer_Web_Interface/pages/index.vue

<template>
  <div id="app">
  <h2 id="titolone" class="subtitle" style="background:beige;position:absolute;bottom:0">
    Second attempt at building a web interface for ESP8266
  </h2>
  <div style="margin-top:1em;margin-bottom:1em;display:flex;width:100%;height:3em;background:#3333333;align-items:center;justify-content:center">
    <div>
      <div class="icon-button" style="flex:1 1 auto" v-on:click="addLine()">
        <img style="margin:auto;" src="~/assets/img/add.png">
      </div>
    </div>
  </div>
  <div v-for="line in lines" :key='line.id'>
    <sequencer class="jsonSequencer" :id='line.id' :line='line'></sequencer>
  </div>
    <div class="icon-wrapper">
      <div class="icon-button">
        <img style="margin:auto;" src="~/assets/img/barrier.png">
      </div>
      <div class="icon-button">
        <img style="margin:auto;" src="~/assets/img/pixel.png">
      </div>
      <div class="icon-button">
        <img style="margin:auto;" src="~/assets/img/squares.png">
      </div>
      <div class="icon-button">
        <img style="margin:auto;" src="~/assets/img/bell.png">
      </div>
      <input type="submit" value="Send!" style="width:5em;height:2em;background:red;border:none;color:white;" v-on:click="getSequencerData()">
    </div>
  </div>
</template>

<script>
import sequencer from '~/components/sequencer.vue'
import sequencerDivided from '~/components/sequencerDivided.vue'
import beatMenu from '~/components/beatMenu.vue'
import moduleData from '~/assets/js/moduleData.json'

export default {
  data() {
    return {
      lines: []
      // https://stackoverflow.com/questions/44869287/set-object-in-data-from-a-method-in-vue-js#44869373
      // creata object in data vue
    }
  },
  components: {
    sequencer,
    sequencerDivided,
    beatMenu
  },
  methods:
  {
    addLine: function (){
      this.lines.push({
        id: this.lines.length,
        slotSlider: 16,
        pulseSlider: 3,
        euclideanList: [],
        controlIsDisplayed: false });
    },
    getSequencerData: function(){
      var modelEsp = {
        'millis_per_slot': 500, // bpm = 60000 / millis_per_slot
        'lines': this.lines.map(function(line) {
          return line.euclideanList.reduce(function(acc, x) { return acc + x.toString(); }, '');
        })
      };

      var xhr = new XMLHttpRequest();
      xhr.open('POST', '/play.ws');

      xhr.onreadystatechange = function () {
        if(xhr.readyState === 4 && xhr.status === 200) {
          //self.commits = JSON.parse(xhr.responseText);
          console.log("Recv", xhr.responseText);
        }
      };

      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.send(JSON.stringify(modelEsp));
    }
  }
}
</script>
<style>
.icon-button{
  display:flex;
  background-color:red;
  width:3em;
  height:3em;
  border-radius:3em;
  margin:0.2em;
}

.icon-wrapper{
  display:flex;
}
</style>