toast informativi base + toast errori

Step/wwwroot/assets/styles/style.css

@@ -1001,9 +1001,8 @@ body {
 .iziToast-wrapper-bottomLeft {
   bottom: 80px;
 }
-.iziToast-wrapper-topRight,
-.iziToast-wrapper-topLeft {
-  top: 80px;
+.iziToast-wrapper-bottomRight .iziToast {
+  bottom: 80px;
 }
 .iziToast {
   background-color: #f1f1f1;

Step/wwwroot/assets/styles/style.less

@@ -11,10 +11,14 @@ body{
   bottom: 80px;
 }
 
-.iziToast-wrapper-topRight,.iziToast-wrapper-topLeft{
-  top: 80px;
+.iziToast-wrapper-bottomRight .iziToast{
+  bottom: 80px;
 }
 
+// .iziToast-wrapper-topRight,.iziToast-wrapper-topLeft{
+//   // top: 80px;
+// }
+
 .iziToast{
   background-color: @color-white2;
   border-color: @color-white2;

Step/wwwroot/src/App.vue

@@ -52,14 +52,22 @@ export default {
     alarmList
   },
   mounted: function() {
-    Factory.Get(MessageService).subscribeToChannel("show-modal", args => {
+    let ms = Factory.Get(MessageService);
+    ms.subscribeToChannel("show-modal", args => {
       this.applyBlur = true;
     });
 
-    Factory.Get(MessageService).subscribeToChannel("hide-modal", args => {
+    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()
@@ -75,42 +83,8 @@ export default {
       }
     );
 
-
     // SHOW Toasts notifications
 
-    iziToast.show({
-      theme:'dark',
-      title: "Welcome to Step!",
-      message: "This is for main app notification when fallback is closed",
-      timeout: false
-    });
-
-    iziToast.show({
-      title: "Welcome to Step!",
-     message: "This is for main app notification when fallback is open",
-      timeout: false
-    });
-
-    iziToast.show({
-      theme:'dark',
-      title: "Hey",
-      message: "Autoclosing.... wait 10 sec.  ",
-      timeout: 10000
-    });
-
-    iziToast.error({
-      theme:'dark',
-      title: "ERROR",
-      message: "TEST ERROR",
-      timeout: false
-    });
-
-    iziToast.warning({
-      theme:'dark',
-      title: "Warning",
-      message: "TEST warning",
-      timeout: false
-    });
     this.hub = new Hub();
   },
   computed: {
@@ -129,6 +103,26 @@ export default {
       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: {
@@ -157,7 +151,8 @@ export default {
   data: function() {
     return {
       state: this.$store.state,
-      applyBlur: false
+      applyBlur: false,
+      loadingOperations: 0
     };
   }
 };

Step/wwwroot/src/_base/baseRestService.ts

@@ -1,5 +1,7 @@
 import Axios, { AxiosInstance, AxiosPromise, AxiosResponse, AxiosBasicCredentials, AxiosRequestConfig } from "axios";
 import Factory from "./factoryService";
+import * as iziToast from "izitoast";
+import { MessageService } from "./messageService";
 
 interface InterceptorRequestDelegate { (config: AxiosRequestConfig): AxiosRequestConfig; }
 interface InterceptorResponseDelegate { (config: AxiosResponse): AxiosResponse; }
@@ -38,6 +40,8 @@ export function to(promise) {
 
 export class baseRestService {
 
+  public errorsToShow: number[] = [404, 500];
+
   protected allwaysSendAuthenticationToken: boolean = false;
   protected saveToSessionStorage: boolean = false;
   private _interceptors: sharedInterceptors;
@@ -70,6 +74,24 @@ export class baseRestService {
 
     this._interceptors.onRequestInterceptorChanged = (i) => this.http.interceptors.request.use(i);
     this._interceptors.onResponseInterceptorChanged = (i) => this.http.interceptors.response.use(i);
+
+    // toast exception interceptors
+    this.http.interceptors.response.use(null, r => {
+      if(!r.status)
+        r = r.response;
+
+      if (r.status >= 500 || this.errorsToShow.indexOf(r.status)>=0) {
+        (iziToast as any).error({
+          title: r.config.url,
+          message: r.statusText,
+          theme:"dark",
+          timeout: false
+        })
+
+      }
+      console.log(r);
+      return r;
+    })
   }
 
   protected async get(uri: string, sendAuthenticationToken: boolean = false, params: object = {}): Promise<AxiosResponse> {
@@ -148,7 +170,7 @@ export class baseRestService {
       }
     }
     // if (json) headers.append('Content-Type', 'application/json');
-    if (json) headers['Content-Type'] =  'application/json';
+    if (json) headers['Content-Type'] = 'application/json';
 
 
     if (this.OnHeadersPreparing) this.OnHeadersPreparing(headers);

Step/wwwroot/src/modules/login.ts

@@ -14,10 +14,14 @@ export default class Login extends Vue {
 
   async doLogin() {
     var service = Factory.Get(LoginService);
-    if(await service.doLogin(this.user)){
+
+    Factory.Get(MessageService).publishToChannel("show-loading");
+
+    if (await service.doLogin(this.user)) {
       ModalHelper.HideModal();
     }
 
+    Factory.Get(MessageService).publishToChannel("hide-loading");
     this.hasError = !service.isAuthenticated;
   }
 }