mesh nodes list

pipboyUI/src/app/app-routing.module.ts

@@ -11,6 +11,9 @@ import {StatusLowerHeaderComponent} from "./components/LowerHeaders/Stats/status
 import {InventoryAppsComponent} from "./components/LowerHeaders/Inventory/inventory-apps.component";
 import {InventoryCustomComponent} from "./components/LowerHeaders/Inventory/inventory-custom.component";
 import {MeshtasticHeaderComponent} from "./components/UpperHeaders/meshtastic-header.component";
+import {MeshMyNodeComponent} from "./components/LowerHeaders/meshtastic/mesh-my-node.component";
+import {MeshListNodeComponent} from "./components/LowerHeaders/meshtastic/mesh-list-node.component";
+import {MeshChannelComponent} from "./components/LowerHeaders/meshtastic/mesh-channel.component";
 
 const routes: Routes = [
   {
@@ -52,7 +55,13 @@ const routes: Routes = [
       },
       {
         path: 'mesh',
-        component: MeshtasticHeaderComponent
+        component: MeshtasticHeaderComponent,
+        children: [
+          {path: '', redirectTo: 'my', pathMatch: 'full'},
+          {path: "my", component: MeshMyNodeComponent},
+          {path: "list", component: MeshListNodeComponent},
+          {path: "channel/:index", component: MeshChannelComponent}
+        ]
       }
     ]
   }

pipboyUI/src/app/app.module.ts

@@ -23,6 +23,9 @@ import {IframeAppComponent} from "./components/apps/iframe-app.component";
 import {RadioComponent} from "./components/LowerHeaders/Radio/radio.component";
 import {KeyboardAppComponent} from "./components/apps/keyboard-app.component";
 import {MeshtasticHeaderComponent} from "./components/UpperHeaders/meshtastic-header.component";
+import {MeshMyNodeComponent} from "./components/LowerHeaders/meshtastic/mesh-my-node.component";
+import {MeshListNodeComponent} from "./components/LowerHeaders/meshtastic/mesh-list-node.component";
+import {MeshChannelComponent} from "./components/LowerHeaders/meshtastic/mesh-channel.component";
 
 @NgModule({
   declarations: [
@@ -41,7 +44,10 @@ import {MeshtasticHeaderComponent} from "./components/UpperHeaders/meshtastic-he
     RadioComponent,
     KeyboardAppComponent,
     //
-    MeshtasticHeaderComponent
+    MeshtasticHeaderComponent,
+    MeshMyNodeComponent,
+    MeshListNodeComponent,
+    MeshChannelComponent
   ],
     imports: [
         BrowserModule,

pipboyUI/src/app/components/LowerHeaders/meshtastic/mesh-channel.component.ts

@@ -0,0 +1,12 @@
+import {Component} from "@angular/core";
+import {AbsListSelect} from "../../abstract/AbsListSelect";
+
+@Component({
+  selector: 'app-mesh-channel',
+  template: `
+  `
+})
+export class MeshChannelComponent extends AbsListSelect {
+
+
+}

pipboyUI/src/app/components/LowerHeaders/meshtastic/mesh-list-node.component.ts

@@ -0,0 +1,77 @@
+import {Component, ElementRef, OnInit, QueryList, ViewChildren} from "@angular/core";
+import {IOService} from "../../../services/IOService";
+import {MeshtasticService} from "../../../services/MeshtasticService";
+import {AbsListSelect} from "../../abstract/AbsListSelect";
+import {MatDialog} from "@angular/material/dialog";
+import {AppsService} from "../../../services/AppsService";
+import {RadioControl} from "../Radio/radio.component";
+
+@Component({
+  selector: 'app-mesh-list-node',
+  template: `
+    <div style="display: flex; flex-direction: row; justify-content: center; height: 84%">
+      <div style="width: 45%; overflow-y: hidden; height: 230px; scroll-behavior: smooth" id="nodes">
+        <div *ngFor="let el of elements" [class.menu-selected]="isSelected(el) && currentSide == 'LEFT'" #menuItem>
+          <p style="margin: 0 0">{{el.name}}</p>
+        </div>
+      </div>
+      <div style="width: 2.5%; display: flex; flex-direction: column"></div>
+      <div style="width: 45%; display: flex; flex-direction: column" id="info">
+        <div style="text-align: center; height: 125px; margin-bottom: 10px" class="secondary-color">
+          <p>{{selected?.name}}</p>
+        </div>
+        <div *ngFor="let el of elementsRight" [class.menu-selected]="el == selectedRight && currentSide == 'RIGHT'">
+          <p style="margin: 0 0">{{el.name}}</p>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class MeshListNodeComponent extends AbsListSelect implements OnInit {
+  constructor(public io: IOService,
+              public meshtastic: MeshtasticService,
+              protected dialog: MatDialog,
+              protected apps: AppsService) {
+    super();
+  }
+
+  override elementsRight:any[] = [
+    {name: "Написать", action: () => {this.apps.openKeyboard().subscribe((res) => {console.log(res); this.apps.inApp = false})}},
+    {name: "Сообщения", action: () => {}},
+    {name: "Трасировка*", action: () => {}}
+  ]
+
+  override selectedRight:any = this.elementsRight[0]
+
+  createSub() {
+    this.sub = this.io.keys.subscribe((code) => {
+      if (this.apps.inApp) return;
+      switch (code) {
+        case "KeyA": {
+          this.currentSide = "LEFT"
+          break
+        }
+        case "KeyD": {
+          this.currentSide = "RIGHT";
+          break
+        }
+        default: {
+          super.choiceItem(code)
+        }
+      }
+    });
+  }
+
+  override ngOnInit() {
+    this.createSub()
+    this.elements = this.meshtastic.nodes;
+    this.meshtastic.nodesChange.subscribe(
+      (listen:any) => {
+        this.elements = this.meshtastic.nodes;
+        if (this.selected == undefined) {
+          this.selected = this.elements[0];
+        }
+      }
+    )
+  }
+}

pipboyUI/src/app/components/LowerHeaders/meshtastic/mesh-my-node.component.ts

@@ -0,0 +1,10 @@
+import {Component} from "@angular/core";
+
+@Component({
+  selector: 'app-mesh-my-node',
+  template: `
+  `
+})
+export class MeshMyNodeComponent {
+
+}

pipboyUI/src/app/components/UpperHeaders/meshtastic-header.component.ts

@@ -1,4 +1,4 @@
-import {Component} from "@angular/core";
+import {Component, OnInit} from "@angular/core";
 import {
   AVAILABLE,
   ERR,
@@ -7,17 +7,23 @@ import {
   RECONNECT,
   WAIT_CONFIG, WS_ERR
 } from "../../services/MeshtasticService";
+import {AbsNavsHeaderComponent, UpHeader} from "../abstract/abs-navs-header.component";
+import {ActivatedRoute, Router} from "@angular/router";
+import {MeshMyNodeComponent} from "../LowerHeaders/meshtastic/mesh-my-node.component";
+import {MeshListNodeComponent} from "../LowerHeaders/meshtastic/mesh-list-node.component";
+import {IOService} from "../../services/IOService";
+import {MeshChannelComponent} from "../LowerHeaders/meshtastic/mesh-channel.component";
 
 @Component({
   selector: "app-meshtastic-header",
   template: `
     <div style="display: flex; align-items: center; justify-content: flex-start; padding-left: 45px">
-      <p>MY</p>
-      <p>NODES</p>
-      <p *ngFor="let c of meshtastic.channels">{{c.name}}</p>
+      <p *ngFor="let nav of navs" (click)="selectHeader(nav)" [class.inactiveHeader]="!isActiveHeader(nav)"
+         style="text-transform: uppercase;font-weight: bold; margin-bottom: 0; margin-top: 5px; padding-left: 5px"
+      >{{nav.name}}</p>
     </div>
     <div style="padding-top: 2.5%">
-      <!--<router-outlet></router-outlet>-->
+      <router-outlet></router-outlet>
     </div>
     <div class="footer">
       <div style="display: flex; justify-content: space-between; height: 100%">
@@ -33,8 +39,40 @@ import {
       </div>
     </div>`
 })
-export class MeshtasticHeaderComponent {
-  constructor(public meshtastic: MeshtasticService) {
+export class MeshtasticHeaderComponent extends AbsNavsHeaderComponent implements OnInit {
+  path = "mesh";
+  constructor(public meshtastic: MeshtasticService,
+              route: ActivatedRoute,
+              router: Router,
+              public io: IOService) {
+    super(route, router);
+    this.meshtastic.channelChange.subscribe(
+      (listen:any) => {
+        let base = [
+          {name: "my", path: "my", action: () => {}, component: MeshMyNodeComponent.name},
+          {name: "list", path: "list", action: () => {}, component: MeshListNodeComponent.name}
+        ]
+        base.push(...
+        this.meshtastic.channels.map((ch) => {
+          return {name: `${ch.name}`, path: `channel/${ch.index}`, action: () => {}, component: MeshChannelComponent.name}
+        }));
+        console.log(base);
+        super.navs = base;
+      }
+    )
+  }
+
+  override isActiveHeader(header: UpHeader): boolean {
+    let res = this.route.firstChild?.component?.name == header.component;
+    if (this.route.firstChild?.snapshot.params) {
+      const split = header.path.split("/")
+      if (split.length>1) {
+        res = res && this.route.firstChild?.snapshot.params["index"] == split[1];
+      }
+    }
+    if (res)
+      this.currentNav = header;
+    return res;
   }
 
   getMeshState(): string {
@@ -48,4 +86,15 @@ export class MeshtasticHeaderComponent {
       default: return "Хуй знает";
     }
   }
+
+  override selectHeader(header: UpHeader) {
+    super.selectHeader(header, [this.path]);
+  }
+
+  override ngOnInit(): void {
+    this.sub = this.io.keys.subscribe((code) => {
+      //if (this.apps.inApp) return;
+      super.choiceHeader(code);
+    })
+  }
 }

pipboyUI/src/app/components/abstract/AbsListSelect.ts

@@ -1,4 +1,4 @@
-import {Component, OnDestroy, OnInit} from "@angular/core";
+import {Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChildren} from "@angular/core";
 import {Subscription} from "rxjs";
 
 @Component({template:""})
@@ -13,6 +13,24 @@ export abstract class AbsListSelect implements OnInit, OnDestroy{
 
   sub?: Subscription;
 
+  @ViewChildren('menuItem') menuItems!: QueryList<ElementRef>;
+
+  isSelected(el:any):boolean {
+    const res = el == this.selected;
+    if (res && this.menuItems) {
+      const itemsArray = this.menuItems.toArray();
+      const selectedIndex = this.elements.indexOf(this.selected);
+      if (selectedIndex !== -1 && itemsArray[selectedIndex]) {
+        itemsArray[selectedIndex].nativeElement.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        });
+      }
+    }
+
+    return res;
+  }
+
   choiceItem(code: string) {
     switch (this.currentSide) {
       case "LEFT": return this.choiceLeft(code)

pipboyUI/src/app/components/abstract/abs-navs-header.component.ts

@@ -33,13 +33,17 @@ export abstract class AbsNavsHeaderComponent implements OnInit, OnDestroy {
 
   isActiveHeader(header: UpHeader) {
     const res = this.route.firstChild?.component?.name == header.component;
+    //this.route.params.subscribe(
+    //  (res) => console.log(res)
+    //)
+    //console.log()
     if (res)
       this.currentNav = header;
     return res;
   }
 
   selectHeader(header: UpHeader, parent: string[] = []) {
-    parent.push(header.path)
+    parent.push(...header.path.split("/"))
     this.router.navigate(parent)
   }
 
@@ -47,13 +51,13 @@ export abstract class AbsNavsHeaderComponent implements OnInit, OnDestroy {
     if (this.currentNav != undefined) {
       const curIdx = this.navs.indexOf(this.currentNav)
       switch (code) {
-        case "KeyA": {
+        case "KeyQ": {
           if (curIdx -1 < 0) {
             this.selectHeader(this.navs[this.navs.length-1])
           } else this.selectHeader(this.navs[curIdx -1])
           break;
         }
-        case "KeyD": {
+        case "KeyE": {
           if (curIdx + 1 >= this.navs.length)
             this.selectHeader(this.navs[0])
           else this.selectHeader(this.navs[curIdx+1])

pipboyUI/src/app/services/AppsService.ts

@@ -1,8 +1,23 @@
 import {Injectable} from "@angular/core";
+import {MatDialog} from "@angular/material/dialog";
+import {Observable} from "rxjs";
+import {KeyboardAppComponent} from "../components/apps/keyboard-app.component";
 
 @Injectable({
   providedIn: 'root'
 })
 export class AppsService {
   inApp: boolean = false;
+  constructor(private dialog: MatDialog) {
+  }
+
+  openApp(app: any, data: any = {}):Observable<any> {
+    this.inApp = true;
+    const ref = this.dialog.open(app, {width: '100%', height: '100%', disableClose: true, data: data});
+    return ref.afterClosed()
+  }
+
+  openKeyboard(): Observable<any> {
+    return this.openApp(KeyboardAppComponent);
+  }
 }

pipboyUI/src/app/services/MeshtasticService.ts

@@ -36,7 +36,9 @@ interface MeshChannel {
 export class MeshtasticService {
   private socket$?: any;
   public channels: MeshChannel[] = [];
+  public channelChange = new BehaviorSubject(0);
   public nodes: MeshNodeShort[] = [];
+  public nodesChange = new BehaviorSubject(0);
   public messages = new BehaviorSubject('{}')
   public state: number = NOT_CONNECTED;
   public meshId: number = 0;
@@ -80,6 +82,7 @@ export class MeshtasticService {
               let idx = this.nodes.indexOf(s_node[0])
               this.nodes[idx] = node
             }
+            this.nodesChange.next(new Date().getTime());
             break;
           }
 
@@ -97,6 +100,7 @@ export class MeshtasticService {
               let idx = this.channels.indexOf(s_channel[0]);
               this.channels[idx] = channel;
             }
+            this.channelChange.next(new Date().getTime());
             break;
           }
 

pipboyUI/src/styles.scss

@@ -69,6 +69,10 @@ body {
   background-color: $secondary-color;
 }
 
+.secondary-color {
+  background-color: $secondary-color;
+}
+
 .menu-selected {
   background-color: $primary-color;
   color: black;