delivery_orchestration_controller.js.js

import ActionCableController from 'controllers/action_cable_controller';

console.log("loading delivery orchestration controller.js");

const statusToListTargetMap = {
  pending: 'pendingList',
  customer_arrived: 'pendingList',
  collecting: 'collectingList',
  out_for_delivery: 'finishedList',
  delivered: 'finishedList',
  completed: 'finishedList',
};

const statusToCountTargetMap = {
  pending: 'pendingCount',
  customer_arrived: 'pendingCount',
  collecting: 'collectingCount',
  out_for_delivery: 'finishedCount',
  delivered: 'finishedCount',
  completed: 'finishedCount',
};

export default class DeliveryOrchestrationController extends ActionCableController {
  static targets = ['pendingList'];

  connect() {
    console.log("Connect!!!!");
    super.connect();

    this.boundClearAnimations = this.clearAnimations.bind(this);
    document.addEventListener(
      'turbolinks:before-visit',
      this.boundClearAnimations
    );
  }

  disconnect() {
    console.log("disConnect!!!!");
    super.disconnect();
    document.removeEventListener(
      'turbolinks:before-visit',
      this.boundClearAnimations
    );
  }

  subscriptionArguments() {
    return {
      branch_id: this.data.get('branchId'),
    };
  }

  handleMessage({ oldStatus, newStatus, deliveryMethodArrived, albaikIdentifier, htmlSummary }) {
    console.log("handleMessage deliveryMethodArrived: " + deliveryMethodArrived);
    this.removeDelivery(oldStatus, albaikIdentifier);
    this.updateCount(oldStatus, -1);
    this.appendDelivery(newStatus, htmlSummary, deliveryMethodArrived);
    this.updateCount(newStatus, +1);
  }

  handleNotificationEvent({ detail }) {
    console.log("handleNotificationEvent");
    console.log(detail);
    this.handleMessage(detail);
  }

  appendDelivery(status, htmlSummary, deliveryMethodArrived) {
    console.log("deliveryMethodArrived: " + deliveryMethodArrived);
    let listTarget = this.targets.find(statusToListTargetMap[status]);

    if (deliveryMethodArrived === true) {
      listTarget += "AtRestaurant";
    } else if (deliveryMethodArrived === false) {
      listTarget += "NotAtRestaurant";
    }

    if (listTarget) {
      listTarget.insertAdjacentHTML('beforeend', htmlSummary);
    }
  }

  removeDelivery(status, albaikIdentifier) {
    const listTarget = this.targets.find(statusToListTargetMap[status]);
    if (listTarget) {
      const selectors = `[data-albaik-identifier="${albaikIdentifier}"]`;
      const deliveries = listTarget.querySelectorAll(selectors);

      deliveries.forEach((delivery) => delivery.remove());
    }
  }

  updateCount(status, delta) {
    const countTarget = this.targets.find(statusToCountTargetMap[status]);
    if (countTarget) {
      const count = parseInt(countTarget.innerText, 10);
      countTarget.innerText = count + delta;
    }
  }

  clearAnimations() {
    this.pendingListTarget
      .querySelectorAll('[data-albaik-identifier].highlight')
      .forEach((element) => element.classList.remove('highlight'));
  }
}