App.vue

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <table>
      <tr>
        <td>
          <div>
            <p><label>Имя</label><input type="text" v-model="data.name" required/></p>
            <p><label>Валютная пара</label><input type="text" v-model="data.symbol1" required/><input type="text"
                                                                                                      v-model="data.symbol2"
                                                                                                      required/></p>
            <p><label>api1Private</label><input type="text" v-model="data.api1Private" required/></p>
            <p><label>api1Public</label><input type="text" v-model="data.api1Public" required/></p>
            <p><label>api2Private</label><input type="text" v-model="data.api2Private" required/></p>
            <p><label>api2Public</label><input type="text" v-model="data.api2Public" required/></p>
            <p><label>Объем дневных торгов</label><input type="number" v-model="data.dailyVolume" required/></p>
            <p><label>Объем одного ордера</label> от <input type="number" v-model="data.orderVolume.min" required/> до
              <input
                type="number" v-model="data.orderVolume.max" required/></p>
            <p><label>Интервал между торгами, в секундах</label> от <input type="number"
                                                                           v-model="data.tradeInterval.min"
                                                                           required/> до <input type="number"
                                                                                                v-model="data.tradeInterval.max"
                                                                                                required/>
            </p>
            <p><label>Драйвер:</label><select v-model="data.driver">
              <option v-for="driver in drivers" selected>{{ driver }}</option>
            </select></p>
            <button @click="startbot">Запуск</button>
          </div>
        </td>
        <td>

          <div>
            <h3>Список пресетов</h3>
            <div>
              <ol>
                <li v-for="preset in presets">
                  1 {{ preset }}
                </li>
              </ol>
            </div>
          </div>

        </td>
      </tr>
    </table>
    <div><h2>Список ботов</h2>
      <ul>
        <li v-for="bot in botsStats">
          {{ bot.name }}
          <button @click="stopbot(bot.name)">X</button>
          <!--[{{bot.dailyVolume}} / {{bot.dailyVolumeMax}}][main:{{ bot.balanceOne }} + second:{{ bot.balanceTwo }}]-->
          <p>Daily Volume: [{{bot.dailyVolume}} / {{bot.dailyVolumeMax}}]
            <br>main:
            <br>{{ bot.balanceFull.main[0].currency || "" }}: {{ bot.balanceFull.main[0].value || "" }}
            <br>{{ bot.balanceFull.main[1].currency || ""}}: {{ bot.balanceFull.main[1].value || ""}}
            <br>second:
            <br>{{ bot.balanceFull.second[0].currency || "" }}: {{ bot.balanceFull.second[0].value || "" }}
            <br>{{ bot.balanceFull.second[1].currency || "" }}: {{ bot.balanceFull.second[1].value || "" }}
          </p>

          <p>{{ bot.ordersArr }}</p>
        </li>
      </ul>
    </div>

    <div><label>Error:</label><label v-model="error"></label></div>
    <div><label>Logs:</label>
      <p v-for="log in logs" :class="log.status">
        [{{ log.date }}][{{log.status}}][{{ log.name }}][{{ log.data }}]
      </p>
    </div>


  </div>
</template>

<script>
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  import config from '../conf'

  export default {
    name: 'app',
    data() {
      return {
        msg: config.name || 'реторговец',
        bots: [],
        botsStats: {},
        botsOldStats: {},
        data: {
          name: "retrade",
          symbol1: 'IMP',
          symbol2: 'ETH',
          dailyVolume: 0.1,
          orderVolume: {
            min: 0.01,
            max: 0.02
          },
          tradeInterval: {
            min: 10,
            max: 20
          },

          api1Public: "",
          api1Private: "",
          api2Public: "",
          api2Private: "",

          presets: [],
          driver: "livecoin"
        },

        drivers: [],
        error: "",
        logs: []
      }
    },
    created: function () {
      // getBots(this);
      getDrivers(this);
      getPresets(this);
    },
    mounted: function () {
      // getBots(this);
      // getDrivers(this);
      getPresets(this);
    },
    methods: {

      startbot: function () {
        console.warn('пробую бота запустить');
        let url = `http://${config.baseUrl}/bot`;
        console.log(this.data);
        if (this.data.name === "") this.data.name = new Date();
        this.$socket.emit('add', this.data.name);
        fetch(url, {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.data)
        }).then(d => {
          console.log(d);
          // getBots(this);
          console.warn('Бот запущен')
        })
          .catch(e => console.error(e));

      },

      stopbot: function (e) {
        // console.log('stop', e, this);
        console.warn('bot:', this.botsStats[e]);
        if (this.botsStats.hasOwnProperty(e)) {
          console.warn('delete bot from list');
          delete this.botsStats[e]
        }
        let url = `http://${config.baseUrl}/bot/` + e;
        this.$socket.emit('left', e);
        fetch(url, {
          method: 'DELETE',
        }).then(d => {
          console.log(d);
        })
          .catch(x => {
            if (this.botsStats.hasOwnProperty(e)) {
              Vue.delete(this.botsStats[e]);
              // this.botsStats[e] = null;
              // delete this.botsStats[e]
            }
            console.error(e, x);

          });
      }

    },
    sockets: {
      connect: function () {
        console.log('socket connected');
        this.logs.unshift({date: new Date(), status: 'info', name: 'system', data: 'socket connected'});
        getPresets(sss)
      },
      disconnect: function () {
        console.log('socket disconnected');
        this.logs.unshift({date: new Date(), status: 'fatal', name: 'system', data: 'socket disconnected'});
      },
      log: function (val) {
        console.log(val);
        this.logs.unshift(val);

        // this.botsOldStats[val.name] = this.botsStats[val.name];
        // console.log(this.botsOldStats[val.name]);
        this.botsStats[val.name] = val;
        // console.log(this.botsOldStats[val.name]);
        if (this.logs.length > 200) this.logs.length = 200;
        if (val.status === "error") this.error = val;
      },
      delete: function (e) {
        if (this.botsStats.hasOwnProperty(e)) {
          delete this.botsStats[e]
        }
      }

    },
  }

  function getBots(sss) {
    let url = `http://${config.baseUrl}/bot`;
    console.log('try to get bots');
    fetch(url).then(d => d.json()).then(d => {
      console.log(d);
      sss.bots = d
    }).catch(e => console.error(e));
  }

  function getDrivers(sss) {
    let url = `http://${config.baseUrl}/driver`;
    console.log('try to get drivers');
    fetch(url).then(d => d.json()).then(d => {
      console.log(d);
      sss.drivers = d
    }).catch(e => console.error(e));
  }

  function getPresets(ddd) {
    let url = `http://${config.baseUrl}/preset`;
    console.log('try to get presets');
    fetch(url).then(d => d.json()).then(d => {
      console.log(d);
      ddd.presets = d
    }).catch(e => console.error(e));
  }
</script>

<style>
  p {
    font-size: 1em;
    text-align: left;
  }

  .debug {
    color: #cce8d1;
  }

  .info {
    color: #11b9bf;
  }

  .warn {
    color: #a84336;
  }

  .error {
    color: #e50e15;
  }

  .fatal {
    color: #a6000b;
  }
</style>