feat(lesy-pilot-ui): support to change console position

lokesh-coder · Sep 23, 2020 · 8be7b36 · 8be7b36
1 parent a0fe70d
commit 8be7b36
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 10 deletions.
diff --git a/packages/misc/pilot-ui/package-lock.json b/packages/misc/pilot-ui/package-lock.json
diff --git a/packages/misc/pilot-ui/package.json b/packages/misc/pilot-ui/package.json
@@ -22,6 +22,7 @@
     "@angular/platform-browser-dynamic": "~10.0.11",
     "@angular/router": "~10.0.11",
     "@ngxs/devtools-plugin": "^3.6.2",
+    "@ngxs/storage-plugin": "^3.7.0",
     "@ngxs/store": "^3.6.2",
     "angular-split": "^4.0.0",
     "autoprefixer": "^9.8.6",

diff --git a/packages/misc/pilot-ui/src/app/components/footer/footer.component.ts b/packages/misc/pilot-ui/src/app/components/footer/footer.component.ts
@@ -3,6 +3,7 @@ import { Store, Select } from "@ngxs/store";
 import {
   ToggleConsolePanel,
   SetConsolePanelFullScreen,
+  ToggleConsolePosition,
 } from "../../store/actions/common.actions";
 import { Observable } from "rxjs";
 import { ClearLogs, ReverseLogs } from "../../store/actions/logs.actions";
@@ -24,6 +25,13 @@ export class FooterComponent {
   })
   consoleStatus$: Observable<"CLOSED" | "OPEN" | "FULLSCREEN">;
 
+  @Select((state) => {
+    const position = state.common.consolePosition;
+    if (position === "vertical") return "ri-layout-bottom-line";
+    else return "ri-layout-right-line";
+  })
+  consolePositionClassName$: Observable<any>;
+
   constructor(private store: Store, private hotkeys: Hotkeys) {}
 
   toggleConsole() {
@@ -33,6 +41,11 @@ export class FooterComponent {
   setConsoleFullScreen() {
     this.store.dispatch(new SetConsolePanelFullScreen());
   }
+
+  toggleConsolePosition() {
+    this.store.dispatch(new ToggleConsolePosition());
+  }
+
   clearLogs() {
     this.store.dispatch(new ClearLogs());
   }

diff --git a/packages/misc/pilot-ui/src/app/components/footer/footer.template.html b/packages/misc/pilot-ui/src/app/components/footer/footer.template.html
@@ -44,6 +44,14 @@
     >
       <i class="ri-fullscreen-fill leading-none text-xl"></i>
     </li>
+    <li
+      *ngIf="consolePositionClassName$ | async as consolePosClassName"
+      (click)="toggleConsolePosition()"
+      tooltip="Toggle position"
+      class="flex items-center p-3 cursor-pointer text-gray-600 hover:text-vio-500"
+    >
+      <i class="{{consolePosClassName}} leading-none text-xl"></i>
+    </li>
   </ng-container>
   <li class="flex items-center ml-auto">
     <a

diff --git a/packages/misc/pilot-ui/src/app/pilot.main.ts b/packages/misc/pilot-ui/src/app/pilot.main.ts
@@ -33,6 +33,9 @@ export class PilotMain implements OnInit {
   @Select(CommonState.consolePanelsHeight())
   panelHeights$: Observable<number[]>;
 
+  @Select((state) => state.common.consolePosition)
+  consolePosition$: Observable<string>;
+
   @Select((state) => state.notification)
   notification$: Observable<NotificationModel>;
 

diff --git a/packages/misc/pilot-ui/src/app/pilot.models.ts b/packages/misc/pilot-ui/src/app/pilot.models.ts
@@ -44,6 +44,7 @@ export interface NotificationModel {
 
 export interface CommonModel {
   consoleHeight: number;
+  consolePosition: "vertical" | "horizontal";
   config: { [key: string]: any };
 }
 

diff --git a/packages/misc/pilot-ui/src/app/pilot.module.ts b/packages/misc/pilot-ui/src/app/pilot.module.ts
@@ -3,6 +3,7 @@ import { BrowserModule } from "@angular/platform-browser";
 import { ToppyModule } from "toppy";
 import { NgxsModule } from "@ngxs/store";
 import { NgxsReduxDevtoolsPluginModule } from "@ngxs/devtools-plugin";
+import { NgxsStoragePluginModule } from "@ngxs/storage-plugin";
 import { AngularSplitModule } from "angular-split";
 
 /* Components */
@@ -93,6 +94,7 @@ import { environment } from "../environments/environment.prod";
     NgxsReduxDevtoolsPluginModule.forRoot({
       disabled: !environment.production,
     }),
+    NgxsStoragePluginModule.forRoot(),
     AngularSplitModule.forRoot(),
   ],
   bootstrap: [PilotMain],

diff --git a/packages/misc/pilot-ui/src/app/pilot.template.html b/packages/misc/pilot-ui/src/app/pilot.template.html
@@ -1,6 +1,6 @@
-<div style="height: 100vh;padding-bottom:42px">
+<div style="height: 100vh; padding-bottom: 42px;">
   <as-split
-    direction="vertical"
+    [direction]="consolePosition$ | async"
     *ngIf="panelHeights$ | async as heights"
     (dragEnd)="onDragEnd($event)"
   >

diff --git a/packages/misc/pilot-ui/src/app/store/actions/common.actions.ts b/packages/misc/pilot-ui/src/app/store/actions/common.actions.ts
@@ -7,6 +7,10 @@ export class SetConsolePanelFullScreen {
   static readonly type = "[Console Panel] full screen";
 }
 
+export class ToggleConsolePosition {
+  static readonly type = "[Console Panel] toggle position";
+}
+
 export class ToggleConsolePanel {
   static readonly type = "[Console Panel] toggle panel";
 }

diff --git a/packages/misc/pilot-ui/src/app/store/states/common.state.ts b/packages/misc/pilot-ui/src/app/store/states/common.state.ts
@@ -9,6 +9,7 @@ import {
   SetConfig,
   LoadConfig,
   SetConsolePanelFullScreen,
+  ToggleConsolePosition,
 } from "../actions/common.actions";
 import { CommonService } from "../../services/common.service";
 import { mergeMap } from "rxjs/operators";
@@ -17,6 +18,7 @@ import { mergeMap } from "rxjs/operators";
   name: "common",
   defaults: {
     consoleHeight: 0,
+    consolePosition: "vertical",
     config: {},
   },
 })
@@ -53,6 +55,14 @@ export class CommonState {
     ctx.setState({ ...state, consoleHeight });
   }
 
+  @Action(ToggleConsolePosition)
+  toggleConsolePosition(ctx: StateContext<CommonModel>) {
+    const state = ctx.getState();
+    const consolePosition =
+      state.consolePosition === "vertical" ? "horizontal" : "vertical";
+    ctx.setState({ ...state, consolePosition });
+  }
+
   @Action(LoadConfig)
   loadConfig(ctx: StateContext<CommonModel>) {
     this.commonService.requestConfig();