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>
      <div id="back-view">
        <router-view name="backview"></router-view>
      </div>

      <div id="main-view" ref="main-view">
        <router-view/>
      </div>
      <div id="main-view-handler" ref="main-view-handler" @click="toggleMainView()">
          <vue-gesture :type="'swipedown'" :call="toggleMainView" :onmove="movepanel">
            <div class="handle">
                <i class="fa fa-angle-double-down"></i>
            </div>
          </vue-gesture>
      </div>
      <app-footer></app-footer>

      <!--
:class="{'turn-up':state.isMainViewLiftedUp}"
      -->

      <!-- Modali sempre disponibili -->
      <!-- <login></login> -->
      <!-- <user-info></user-info>
      <machine-info></machine-info> -->

    </div>
    <modal-container name="modal" ></modal-container>
  </div>
</template>

<script>
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 "./app.business-logic";
import * as iziToast from "izitoast";

export default {
  name: "app",
  components: {
    appHeader: Header,
    appFooter: Footer,
    modalContainer: ModalContainer,
    alarmList
  },
  mounted: function() {
    let ms = Factory.Get(MessageService);
    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--;
    });

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

    // SHOW Toasts notifications
        //     iziToast.show({
        //   theme:"dark",
        //   message: "test",
        //   icon: "fa fa-refresh fa-spin fa-2x fa-fw",
        //   position: "bottomLeft", animateInside: false, timeout: false,
        //   transitionIn: 'fadeInRight',
        //   transitionOut: 'fadeOut',
        // })

    this.hub = new Hub();
  },
  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)
        this.applyViewPosition(-window.innerHeight + 84);
      else this.applyViewPosition(0);
    },
    loadingOperations: function(n, o) {

      if(o == 0 && n >0){
        iziToast.show({
          class: "t-loading",
          theme:"dark",
          message: "loading ...",
          icon: "fa fa-refresh fa-spin fa-2x fa-fw",
          position: "bottomLeft", animateInside: false, timeout: false,
          transitionIn: 'fadeInRight',
          transitionOut: 'fadeOut',
        })
      }

      if(n == 0 || n<0){
        this.loadingOperations = 0;
        iziToast.hide(document.querySelector('.t-loading'));
      }

    }
  },
  methods: {
    callHub: function() {
      this.hub.Hello();
    },
    toggleMainView(direction) {

      if(!direction || direction == 'down')
        appModelActions.MainViewToggle(this.$store);
      else
      {
        this.applyViewPosition(-window.innerHeight + 84);
      }
    },
    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>