Added update available client operation

2sky · Feb 28, 2017 · 9e4f570 · 9e4f570
1 parent fcc5fd3
commit 9e4f570
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 3 deletions.
diff --git a/src/Libs/Vidyano/ClientOperations/refresh-for-update.ts b/src/Libs/Vidyano/ClientOperations/refresh-for-update.ts
@@ -0,0 +1,9 @@
+namespace Vidyano {
+    "use strict";
+
+    export namespace ClientOperations {
+        export function refreshForUpdate(hooks: ServiceHooks, path: string, replaceCurrent?: boolean): void {
+            hooks.onUpdateAvailable();
+        }
+    }
+}
diff --git a/src/Libs/Vidyano/service-hooks.ts b/src/Libs/Vidyano/service-hooks.ts
@@ -141,6 +141,10 @@
             // Noop
         }
 
+        onUpdateAvailable() {
+            // Noop
+        }
+
         async onRetryAction(retry: IRetryAction): Promise<string> {
             if (!retry.persistentObject)
                 return retry.options[await this.onMessageDialog(retry.title, retry.message, false, ...retry.options)];

diff --git a/src/Libs/Vidyano/vidyano.d.ts b/src/Libs/Vidyano/vidyano.d.ts
@@ -845,6 +845,7 @@ declare namespace Vidyano {
         onClientOperation(operation: ClientOperations.IClientOperation): void;
         onSelectedItemsActions(query: Query, selectedItems: QueryResultItem[], action: ISelectedItemsActionArgs): void;
         onRefreshFromResult(po: PersistentObject): void;
+        onUpdateAvailable(): void;
         onRetryAction(retry: IRetryAction): Promise<string>;
     }
 }
@@ -1239,3 +1240,8 @@ declare namespace Vidyano {
         }
     }
 }
+declare namespace Vidyano {
+    namespace ClientOperations {
+        function refreshForUpdate(hooks: ServiceHooks, path: string, replaceCurrent?: boolean): void;
+    }
+}
diff --git a/src/WebComponents/App/app.html b/src/WebComponents/App/app.html
@@ -108,6 +108,15 @@
         <template is="dom-if" if="[[service.application.hasManagement]]">
             <vi-popup-menu id="viConfigure" ctrl-key context-menu-only></vi-popup-menu>
         </template>
+        <template is="dom-if" if="[[updateAvailable]]">
+            <div id="update">
+                <div class="overlay" on-tap="_refreshForUpdateDismiss"></div>
+                <div class="message" on-tap="_refreshForUpdate">
+                    <span>[[translations.ApplicationOutdated]]</span>
+                    <span class="highlight">[[translations.ApplicationOutdatedRefresh]]</span>
+                </div>
+            </div>
+        </template>
     </template>
 </dom-module>
 

diff --git a/src/WebComponents/App/app.scss b/src/WebComponents/App/app.scss
@@ -165,4 +165,52 @@
             }
         }
     }
-}
+
+    #update {
+        position: relative;
+        z-index: 100000;
+
+        .overlay {
+            position: fixed;
+            content: "";
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            background-color: black;
+            opacity: 0;
+            transition: all 500ms ease-out;
+            will-change: opacity;
+        }
+
+        .message {
+            position: fixed;
+            top: calc(var(--theme-h1) + var(--theme-h5));
+            left: 50%;
+            transform: translate(-50%, calc((var(--theme-h1) + var(--theme-h5)) * -2));
+            background-color: var(--theme-foreground);
+            color: white;
+            padding: var(--theme-h4) var(--theme-h3);
+            cursor: pointer;
+            box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.5);
+            transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
+            will-change: transform;
+
+            > .highlight {
+                margin-left: var(--theme-h4);
+                color: var(--colors-yellow);
+                font-weight: bold;
+            }
+        }
+
+        &.show {
+            .overlay {
+                opacity: 0.25;
+            }
+
+            .message {
+                transform: translate(-50%, 0px);
+            }
+        }
+    }
+}
diff --git a/src/WebComponents/App/app.ts b/src/WebComponents/App/app.ts
@@ -222,7 +222,12 @@ namespace Vidyano.WebComponents {
                 reflectToAttribute: true,
                 value: "#009688"
             },
-            configs: String
+            configs: String,
+            updateAvailable: {
+                type: Boolean,
+                readOnly: true,
+                value: false
+            }
         },
         observers: [
             "_updateInitialize(serviceInitializer, appRoutesInitializer)",
@@ -239,7 +244,8 @@ namespace Vidyano.WebComponents {
         },
         listeners: {
             "contextmenu": "_configureContextmenu",
-            "click": "_anchorClickHandler"
+            "click": "_anchorClickHandler",
+            "app-update-available": "_updateAvailable"
         },
         forwardObservers: [
             "service.isSignedIn",
@@ -259,11 +265,13 @@ namespace Vidyano.WebComponents {
         private _keybindingRegistrations: { [key: string]: Keyboard.IKeybindingRegistration[]; } = {};
         private _beforeUnloadEventHandler: EventListener;
         private _activeDialogs: Dialog[] = [];
+        private _updateAvailableSnoozeTimer: number;
         readonly initializing: boolean; private _setInitializing: (init: boolean) => void;
         readonly keys: string; private _setKeys: (keys: string) => void;
         readonly currentRoute: AppRoute; private _setCurrentRoute: (route: AppRoute) => void;
         readonly barebone: boolean; private _setBarebone: (barebone: boolean) => void;
         readonly profilerLoaded: boolean; private _setProfilerLoaded: (val: boolean) => void;
+        readonly updateAvailable: boolean; private _setUpdateAvailable: (updateAvailable: boolean) => void;
         service: Vidyano.Service;
         programUnit: ProgramUnit;
         uri: string;
@@ -916,6 +924,33 @@ namespace Vidyano.WebComponents {
             this.updateStyles();
         }
 
+        private _updateAvailable() {
+            if (this._updateAvailableSnoozeTimer)
+                return;
+
+            this._setUpdateAvailable(true);
+
+            Polymer.dom(this).flush();
+            this.async(() => this.$$("#update").classList.add("show"), 100);
+        }
+
+        private _refreshForUpdate() {
+            document.location.reload(true);
+        }
+
+        private _refreshForUpdateDismiss() {
+            if (this._updateAvailableSnoozeTimer)
+                clearTimeout(this._updateAvailableSnoozeTimer);
+
+            this._updateAvailableSnoozeTimer = setTimeout(() => {
+                this._updateAvailableSnoozeTimer = null;
+                this._updateAvailable();
+            }, 300000);
+
+            this.$$("#update").classList.remove("show");
+            this.async(() => this._setUpdateAvailable(false), 500);
+        }
+
         static removeRootPath(path: string = ""): string {
             if (path.startsWith(Path.routes.rootPath))
                 return path.substr(Path.routes.rootPath.length);
@@ -1199,6 +1234,10 @@ namespace Vidyano.WebComponents {
             return true;
         }
 
+        onUpdateAvailable() {
+            this.app.fire("app-update-available", null);
+        }
+
         onNavigate(path: string, replaceCurrent: boolean = false) {
             this.app.changePath(Vidyano.WebComponents.App.removeRootPath(path), replaceCurrent);
         }