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

Author: lokesh-coder

packages/misc/pilot-ui/package-lock.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",

packages/misc/pilot-ui/package.json

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

packages/misc/pilot-ui/src/app/components/footer/footer.component.ts

@@ -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

packages/misc/pilot-ui/src/app/components/footer/footer.template.html

@@ -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>;
 

packages/misc/pilot-ui/src/app/pilot.main.ts

@@ -44,6 +44,7 @@ export interface NotificationModel {
 
 export interface CommonModel {
  consoleHeight: number;
+ consolePosition: "vertical" | "horizontal";
  config: { [key: string]: any };
 }
 

packages/misc/pilot-ui/src/app/pilot.models.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],

packages/misc/pilot-ui/src/app/pilot.module.ts

@@ -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)"
  >

packages/misc/pilot-ui/src/app/pilot.template.html

@@ -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";
 }

packages/misc/pilot-ui/src/app/store/actions/common.actions.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();