<template>
  <div class="active-dispatches">
    <h4>Expedieri active ({{ dispatchUuidList.length }})</h4>
    <div class="q-pa-md row items-start q-gutter-md">
      <dispatch-controller :dispatch-uuid="uuid" :stomp-client="stompClient" :connected="connected" v-for="uuid in dispatchUuidList">
      </dispatch-controller>
    </div>
  </div>
</template>


<script>
module.exports = {
  name: "ActiveDispatches",
  data() {
    return {
      stompClient: new ReconnectingStompClient("/wsms", {
        onConnect: () => this.connected = true,
        onDisconnect: () => this.connected = false
      }),
      connected: false,
      dispatchUuidMap: {},
      dispatchUuidList: []
    };
  },
  props: {
  },
  computed: {
  },
  watch: {
  },
  methods: {
  },
  created() {
    axios
        .get("/api/v1/sms/active-dispatches")
        .then(response => {
          response.data.forEach(uuid => {
            if (!this.dispatchUuidMap[uuid]) {
              this.dispatchUuidMap[uuid] = uuid;
              this.dispatchUuidList.unshift(uuid);
            }
          });
        });
    this.stompClient.subscribe(
        "/user/topic/dispatch/new",
        message => {
          var uuid = message.data;
          if (!this.dispatchUuidMap[uuid]) {
            this.dispatchUuidMap[uuid] = uuid;
            this.dispatchUuidList.unshift(uuid);
          }
        }
    )
  },
  beforeDestroy() {
    this.stompClient.disconnect();
  }
}

</script>

<style scoped>
</style>

<style>
  .row {
    margin: 0;
  }
</style>