feat(build): remove simple-modal dep

simple-modal helped, during the development, to remove material dep. Now there is a simple custom modal implementation.
albertosantini · Mar 21, 2017 · 0724004 · 0724004
1 parent a0bd4b8
commit 0724004
Show file tree

Hide file tree

Showing 26 changed files with 345 additions and 453 deletions.
diff --git a/build/app.bundle.js b/build/app.bundle.js
diff --git a/build/simple-modal.js b/build/simple-modal.js
diff --git a/src/client/app/common/app.css b/src/client/app/common/app.css
@@ -13,6 +13,8 @@
 .min-w-75 { min-width: 75%; }
 .min-w-95 { min-width: 95%; }
 
+.absolute-center { top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); }
+
 @media screen and (max-width: 30em) {
     .dn-s { display: none; }
     .flex-wrap-s { flex-wrap: wrap; }

diff --git a/src/client/app/common/app.module.js b/src/client/app/common/app.module.js
@@ -4,9 +4,7 @@ import { appComponent } from "./app.component";
 import { appConfig } from "./app.config";
 
 export const app = angular
-    .module("common.app", [
-        "simple-modal"
-    ])
+    .module("common.app", [])
     .component("app", appComponent)
     .config(appConfig)
     .name;
diff --git a/src/client/app/components/charts/charts.controller.js b/src/client/app/components/charts/charts.controller.js
@@ -1,8 +1,7 @@
 export class ChartsController {
-    constructor(ToastsService, modalService, AccountsService,
-            ChartsService, QuotesService, TradesService) {
+    constructor(ToastsService, AccountsService, ChartsService,
+            QuotesService, TradesService) {
         this.ToastsService = ToastsService;
-        this.modalService = modalService;
         this.AccountsService = AccountsService;
         this.ChartsService = ChartsService;
         this.QuotesService = QuotesService;
@@ -45,6 +44,12 @@ export class ChartsController {
         this.trades = this.TradesService.getTrades();
 
         this.changeChart(this.selectedInstrument, this.selectedGranularity);
+
+        this.orderParams = {
+            side: "buy",
+            selectedInstrument: this.selectedInstrument,
+            instruments: this.account.streamingInstruments
+        };
     }
 
     changeChart(instrument, granularity) {
@@ -60,19 +65,16 @@ export class ChartsController {
 
 
     openOrderDialog(side) {
-        this.modalService.open({
-            template: "<order-dialog close-modal='closeModal()' params='params'></order-dialog>",
-            scope: {
-                params: {
-                    side,
-                    selectedInstrument: this.selectedInstrument,
-                    instruments: this.account.streamingInstruments
-                }
-            }
+        angular.extend(this.orderParams, {
+            side,
+            selectedInstrument: this.selectedInstrument,
+            instruments: this.account.streamingInstruments
         });
+
+        this.openOrderModal = true;
     }
 }
 ChartsController.$inject = [
-    "ToastsService", "modalService", "AccountsService",
-    "ChartsService", "QuotesService", "TradesService"
+    "ToastsService", "AccountsService", "ChartsService",
+    "QuotesService", "TradesService"
 ];
diff --git a/src/client/app/components/charts/charts.html b/src/client/app/components/charts/charts.html
@@ -28,3 +28,9 @@
         </a>
     </div>
 </div>
+
+<order-dialog ng-if="$ctrl.openOrderModal" open-modal="$ctrl.openOrderModal"
+    params="$ctrl.orderParams">
+</order-dialog>
+
+
diff --git a/src/client/app/components/components.module.js b/src/client/app/components/components.module.js
@@ -21,6 +21,7 @@ import { streaming } from "./streaming/streaming.module";
 import { toasts } from "./toasts/toasts.module";
 import { tokenDialog } from "./token-dialog/token-dialog.module";
 import { trades } from "./trades/trades.module";
+import { yesnoDialog } from "./yesno-dialog/yesno-dialog.module";
 
 export const components = angular
     .module("components", [
@@ -44,6 +45,7 @@ export const components = angular
         streaming,
         toasts,
         tokenDialog,
-        trades
+        trades,
+        yesnoDialog
     ])
     .name;
diff --git a/src/client/app/components/header/header.controller.js b/src/client/app/components/header/header.controller.js
@@ -1,12 +1,11 @@
 import angular from "angular";
 
 export class HeaderController {
-    constructor($window, $rootScope, modalService, ToastsService,
+    constructor($window, $rootScope, ToastsService,
             AccountsService, SessionService,
             QuotesService, StreamingService) {
         this.$window = $window;
         this.$rootScope = $rootScope;
-        this.modalService = modalService;
         this.ToastsService = ToastsService;
         this.AccountsService = AccountsService;
         this.SessionService = SessionService;
@@ -21,18 +20,18 @@ export class HeaderController {
     }
 
     openTokenDialog() {
-        this.modalService.open({
-            template: `<token-dialog
-                close-modal="closeModal(tokenInfo)"></token-dialog>`,
-            onClose: tokenInfo => {
-                if (tokenInfo) {
-                    this.token = tokenInfo.token;
-                    this.environment = tokenInfo.environment;
-                    this.accountId = tokenInfo.accountId;
-                    this.instrs = tokenInfo.instrs;
-                }
-            }
-        });
+        this.openTokenModal = true;
+    }
+
+    closeTokenDialog(tokenInfo) {
+        this.openTokenModal = false;
+
+        if (tokenInfo) {
+            this.token = tokenInfo.token;
+            this.environment = tokenInfo.environment;
+            this.accountId = tokenInfo.accountId;
+            this.instrs = tokenInfo.instrs;
+        }
     }
 
     openSettingsDialog() {
@@ -45,42 +44,40 @@ export class HeaderController {
                 }
             });
 
-            this.modalService.open({
-                template: `<settings-dialog
-                    close-modal="closeModal(settingsInfo)"
-                    instruments="instruments"></settings-dialog>`,
-                scope: {
-                    instruments: this.instrs
-                },
-                onClose: settingsInfo => {
-                    let instruments;
-
-                    if (settingsInfo) {
-                        this.$window.localStorage.setItem("argo.instruments",
-                            angular.toJson(settingsInfo));
-                        instruments = this.AccountsService
-                            .setStreamingInstruments(settingsInfo);
-
-                        this.QuotesService.reset();
-
-                        this.StreamingService.startStream({
-                            environment: credentials.environment,
-                            accessToken: credentials.token,
-                            accountId: credentials.accountId,
-                            instruments
-                        });
-                    }
-                }
-            });
+            this.credentials = credentials;
+            this.openSettingsModal = true;
         }).catch(err => {
             if (err) {
                 this.ToastsService.addToast(err);
             }
         });
     }
+
+    closeSettingsDialog(settingsInfo) {
+        let instruments;
+
+        this.openSettingsModal = false;
+
+        if (settingsInfo) {
+            this.$window.localStorage.setItem("argo.instruments",
+                angular.toJson(settingsInfo));
+            instruments = this.AccountsService
+                .setStreamingInstruments(settingsInfo);
+
+            this.QuotesService.reset();
+
+            this.StreamingService.startStream({
+                environment: this.credentials.environment,
+                accessToken: this.credentials.token,
+                accountId: this.credentials.accountId,
+                instruments
+            });
+        }
+    }
+
 }
 HeaderController.$inject = [
-    "$window", "$rootScope", "modalService", "ToastsService",
+    "$window", "$rootScope", "ToastsService",
     "AccountsService", "SessionService",
     "QuotesService", "StreamingService"
 ];
diff --git a/src/client/app/components/header/header.html b/src/client/app/components/header/header.html
@@ -35,3 +35,10 @@
     </div>
 
 </nav>
+
+<token-dialog open-modal="$ctrl.openTokenModal"
+    close-modal="$ctrl.closeTokenDialog(tokenInfo)">
+</token-dialog>
+<settings-dialog open-modal="$ctrl.openSettingsModal"
+    close-modal="$ctrl.closeSettingsDialog(settingsInfo)" instruments="$ctrl.instrs">
+</settings-dialog>
diff --git a/src/client/app/components/order-dialog/order-dialog.component.js b/src/client/app/components/order-dialog/order-dialog.component.js
@@ -4,7 +4,7 @@ export const orderDialogComponent = {
     templateUrl: "app/components/order-dialog/order-dialog.html",
     controller: OrderDialogController,
     bindings: {
-        closeModal: "&",
+        openModal: "=",
         params: "<"
     }
 };
diff --git a/src/client/app/components/order-dialog/order-dialog.controller.js b/src/client/app/components/order-dialog/order-dialog.controller.js
@@ -86,19 +86,19 @@ export class OrderDialogController {
 
     answer(action) {
         if (action === "close") {
-            this.closeModal();
+            this.openModal = false;
 
             return;
         }
 
         if (!this.pips) {
             this.ToastsService .addToast(`Pips info for ${this.selectedInstrument} not yet available. Retry.`);
-            this.closeModal();
+            this.openModal = false;
 
             return;
         }
 
-        this.closeModal();
+        this.openModal = false;
 
         const order = {},
             isBuy = this.side === "buy",