cms_thermo_active/Step/wwwroot/src/App.vue

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

      <under-the-hood></under-the-hood>
      <div id="main-view" ref="main-view" :class="{liftedUp : isMainViewLiftedUp}">
        <router-view/>
      </div>
      <div id="main-view-handler" ref="main-view-handler" @click="toggleMainView()"  :class="{liftedUp : isMainViewLiftedUp}">

      <vue-gesture :type="'swipedown'" :call="toggleMainView" :onmove="movepanel" :onstart="onstartdrag" :onstop="onstopdrag">
        <div class="handle">
            <i class="fa fa-angle-double-down"></i>
        </div>
      </vue-gesture>
      </div>
      <app-footer></app-footer>

    </div>
    <modal-container name="modal" ></modal-container>
        <div class="window-buttons">
        <button class="gray square close" @click="sendMessage('hide')">-</button>
        <button class="gray square close" @click="sendMessage('close')">&times;</button>
      </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Hub } from "./services/hub";
import { Header, Footer, Login, alarmList } from "./app.modules";
import { LoginService } from "src/services/loginService";
import { Factory, MessageService } from "./_base";
import { ModalContainer, ModalHelper } from "./modules/base-components";
import { appModelActions } from "src/store";
import underTheHood from "src/components/under-the-hood.vue";
import "./app.business-logic";
import * as iziToast from "izitoast";

export default {
  name: "app",
  components: {
    appHeader: Header,
    appFooter: Footer,
    modalContainer: ModalContainer,
    alarmList, underTheHood
  },
  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-loading", args => {
      this.loadingOperations++;
    });
    ms.subscribeToChannel("hide-loading", args => {
      this.loadingOperations--;
    });
    ms.subscribeToChannel("force-ui-update", args => {
      this.$forceUpdate();
    });

    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));
      }
    );

    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);

        //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");
      }
    },
    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,
      loadingOperations: 0
    };
  }
};
</script>