cms_thermo_active/Step/wwwroot/src/App.ts

import Vue from "vue";
import { Hub } from "./services/hub";
import { Header, Footer } from "./app.modules";
import { Login } from "src/app_modules/machine";
import { alarmList } from "src/app_modules/alarms";
import { LoginService } from "src/services/loginService";
import { DataService } from "src/services/dataService";
import { Factory, MessageService } from "./_base";
import { ModalContainer, ModalNcContainer } from "./modules/base-components";
import { ModalHelper } from "src/components/modals"
import { appModelActions } from "src/store";
import { underTheHood } from "src/app_modules/under-the-hood";

import * as iziToast from "izitoast";
import moment from "moment";
import Component from "vue-class-component";
import { Watch } from "vue-property-decorator";

declare var cmsClient;

@Component({
  name: "app",
  components: {
    appHeader: Header,
    appFooter: Footer,
    modalContainer: ModalContainer,
    modalNcContainer: ModalNcContainer,
    alarmList,
    underTheHood
  }
})
export default class app extends Vue {

  $route: any;

  state = this.$store.state;
  applyBlur = false;
  showHeaderOnBlur = false;
  applyBlurNc= false;
  applyBlurInternal = false;
  showHMIinProduction = false;
  showPRODinProduction = false;
  loadingOperations = 0;
  HMIsrc = null;
  hub: Hub = null;

  beforeMount() {
    moment.locale((window.navigator as any).userLanguage || window.navigator.language);
  }
  mounted() {
    let ms = Factory.Get(MessageService);

    // if cms is connected
    if (typeof cmsClient != "undefined")
      this.HMIsrc = cmsClient.getScreenBase64();

    ms.subscribeToChannel("show-modal", args => {
      this.applyBlur = true;
    });

    ms.subscribeToChannel("hide-modal", args => {
      this.applyBlur = false;
    });

    ms.subscribeToChannel("show-modal-nc-called", args => {
      this.applyBlurNc = true;
    });

    ms.subscribeToChannel("hide-modal-nc-called", args => {
      this.applyBlurNc = false;
    });

    ms.subscribeToChannel("show-modal-internal", args => {
      this.applyBlurInternal = true;
    });

    ms.subscribeToChannel("hide-modal-internal", args => {
      this.applyBlurInternal = false;
    });

    ms.subscribeToChannel("show-loading", args => {
      this.loadingOperations++;
    });
    ms.subscribeToChannel("hide-loading", args => {
      this.loadingOperations--;
    });
    ms.subscribeToChannel("force-ui-update", args => {
      this.$forceUpdate();
    });
    ms.subscribeToChannel("HMI-production-show-state", args => {
      this.showHMIinProduction = true;
    });
    ms.subscribeToChannel("HMI-production-hide-state", args => {
      this.showHMIinProduction = false;
    });
    ms.subscribeToChannel("PROD-production-show-state", args => {
      this.showPRODinProduction = true;
    });
    ms.subscribeToChannel("PROD-production-hide-state", args => {
      this.showPRODinProduction = false;
    });

    let $this = this;
    Factory.Get(LoginService)
      .getUserInfo()
      .then(() => {
        if (!$this.isAuthenticated)
          $this.$nextTick(() => ModalHelper.ShowModal(Login));
      });

    this.$store.watch(
      s => s.currentUser,
      (n, o) => {
        if (!n) {
          this.$nextTick(() => ModalHelper.ShowModal(Login));
        } else
          new DataService().SetCurrentNcLanguage(
            this.$store.state.currentUser.language
          );
      }
    );

    this.hub = new Hub();

    window.addEventListener("keyup", function (event) {
      // If down arrow was pressed...
      if (event.keyCode == 27) {
        Factory.Get(MessageService).publishToChannel("esc_pressed");
      }
    });
  }
  get isAuthenticated() {
    return this.$store.state.currentUser != null;
  }
  get debugStore() {
    return this.$store.state;
  }
  get isMainViewLiftedUp() {
    return this.$store.state.isMainViewLiftedUp;
  }

  @Watch("isMainViewLiftedUp")
  isMainViewLiftedUpChanged() {
    if (this.state.isMainViewLiftedUp) {
      //Setup the Position of the View
      this.applyViewPosition(-window.innerHeight + 84);

      //Hide the HMI if is showed (in production)
      Factory.Get(MessageService).publishToChannel("HMI-production-hide");
      Factory.Get(MessageService).publishToChannel("PROD-production-hide");
      //Show the HMI with delay (For the animation)
      Factory.Get(MessageService).publishToChannel("HMI-show", 500);
    } else {
      //Setup the Position of the View
      this.applyViewPosition(0);

      //Hide the HMI
      Factory.Get(MessageService).publishToChannel("HMI-hide");
      //Launche the show in delay if we are in production
      if (this.showHMIinProduction && this.$route.path.includes("production"))
        Factory.Get(MessageService).publishToChannel(
          "HMI-production-show",
          700
        );
      if (this.showPRODinProduction && this.$route.path.includes("production"))
      Factory.Get(MessageService).publishToChannel(
        "PROD-production-show",
        700
      );
        

    }
  }
  @Watch("loadingOperations")
  loadingOperationsChanged(n, o) {
    if (o == 0 && n > 0) {
      (iziToast as any).show({
        id: "loader",
        class: "t-loading",
        theme: "dark",
        icon: "fa fa-refresh fa-spin fa-2x fa-fw",
        position: "bottomLeft",
        animateInside: false,
        timeout: false,
        transitionIn: "fadeIn",
        transitionOut: "fadeOut",
        toastOnce: true
      });
    }

    if (n == 0 || n < 0) {
      this.loadingOperations = 0;
      let element = document.querySelector(".t-loading");
      if (element) (iziToast as any).hide(element, { transitionOut: "fadeOut" });
    }
  }

  callHub() {
    this.hub.Hello();
  }
  onstartdrag() {
    Factory.Get(MessageService).publishToChannel("HMI-start-drag");
  }
  onstopdrag() {
    Factory.Get(MessageService).publishToChannel("HMI-stop-drag", 600);
  }
  toggleMainView(direction) {
    if (!direction || direction == "down" || direction == "none")
      appModelActions.MainViewToggle(this.$store);
    else {
      this.applyViewPosition(-window.innerHeight + 84);
    }
  }
  sendMessage(name) {
    Factory.Get(MessageService).publishToChannel(name);
  }
  movepanel(e) {
    if (e && e.touches && e.touches[0]) {
      this.applyViewPosition(
        -window.innerHeight + 84 + e.touches[0].screenY,
        true
      );
    }
  }
  applyViewPosition(position, removetransition?) {
    (this.$refs["main-view"] as any).style = (this.$refs["main-view-handler"] as any).style =
      "transform:translateY(" +
      position +
      "px);" +
      (removetransition ? "transition:unset;" : "");
  }
};