cms_thermo_active/Step/wwwroot/src/App.vue

<template>
  <div class="container">
    <div id="app">
      <app-header :class="{'blur':applyBlur}"></app-header>
      <alarm-list :applyBlur="applyBlur"></alarm-list>

      <under-the-hood :class="{'blur':(applyBlur || applyBlurNc)}"></under-the-hood>
      <div id="main-view" ref="main-view" :class="{liftedUp : isMainViewLiftedUp,'blur':(applyBlur || applyBlurNc)}" >
        <router-view  :class="{'blur':applyBlurInternal}" />
        <modal-container name="modal" container-name="modal-internal" :inform-hmi="false" ></modal-container>
      </div>
      <div id="main-view-handler" ref="main-view-handler" @click="toggleMainView()"  :class="{liftedUp : isMainViewLiftedUp,'blur':(applyBlur || applyBlurNc)}">

      <vue-gesture :type="'swipedown'" :call="toggleMainView" :onmove="movepanel" :onstart="onstartdrag" :onstop="onstopdrag">
        <div class="handle" :title="'header_tooltip_close_uth' | localize('Close under-the-hood area')" >
            <i class="fa fa-angle-double-down"></i>
        </div>
      </vue-gesture>
      </div>
      <app-footer :class="{'blur':(applyBlur || applyBlurNc)}"></app-footer>

    </div>
    <modal-nc-container name="modal-nc" :class="{'blur':applyBlur}"></modal-nc-container>
    <modal-container name="modal" ></modal-container>
    <div class="window-buttons">
      <button class="gray square close" @click="sendMessage('hide')" :title="'header_tooltip_btn_minimize' | localize('Minimize the application')">-</button>
      <button class="gray square close" @click="sendMessage('close')" :title="'header_tooltip_btn_close' | localize('Close the application')">&times;</button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Hub } from "./services/hub";
import { Header, Footer, Login } from "./app.modules";
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, ModalHelper } from "./modules/base-components";
import { appModelActions } from "src/store";
import underTheHood from "src/components/under-the-hood.vue";

import * as iziToast from "izitoast";
import moment from "moment";

export default {
  name: "app",
  components: {
    appHeader: Header,
    appFooter: Footer,
    modalContainer: ModalContainer,
    modalNcContainer: ModalNcContainer,
    alarmList,
    underTheHood
  },
  beforeMount: function() {
    moment.locale(window.navigator.userLanguage || window.navigator.language);
  },
  mounted: function() {
    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;
    });

    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");
      }
    });
  },
  computed: {
    isAuthenticated: function() {
      return this.$store.state.currentUser != null;
    },
    debugStore: function() {
      return this.$store.state;
    },
    isMainViewLiftedUp: function() {
      return this.$store.state.isMainViewLiftedUp;
    }
  },
  watch: {
    isMainViewLiftedUp: function() {
      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");
        //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
          );
      }
    },
    loadingOperations: function(n, o) {
      if (o == 0 && n > 0) {
        iziToast.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.hide(element, { transitionOut: "fadeOut" });
      }
    }
  },
  methods: {
    callHub: function() {
      this.hub.Hello();
    },
    onstartdrag: function() {
      Factory.Get(MessageService).publishToChannel("HMI-start-drag");
    },
    onstopdrag: function() {
      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"].style = this.$refs["main-view-handler"].style =
        "transform:translateY(" +
        position +
        "px);" +
        (removetransition ? "transition:unset;" : "");
    }
  },
  data: function() {
    return {
      state: this.$store.state,
      applyBlur: false,
      applyBlurNc: false,
      applyBlurInternal: false,
      showHMIinProduction: false,
      loadingOperations: 0
    };
  }
};
</script>