multidevices

ui/src/app/app.component.html

@@ -12,6 +12,16 @@
     <div style="width: 100px">
       <p class="routeUrl" *ngFor="let u of routes" [routerLink]="u.url" (click)="goTo(u.url)">{{u.name}}</p>
     </div>
+    <hr>
+    <mat-form-field appearance="fill">
+      <mat-label>Устройство</mat-label>
+      <mat-select [formControl]="selected_devices" multiple>
+        <mat-option *ngFor="let device of devices" [value]="device">
+          {{device.name}} {{device.default?'(!)':''}}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <p style="width: 100px">Обновите после изменения устройства</p>
   </mat-drawer>
 
   <div class="sidenav-content">

ui/src/app/app.component.ts

@@ -4,6 +4,14 @@ import {NodeDTO} from "./entities/NodeDTO";
 import {HttpClient} from "@angular/common/http";
 import {map, Observable} from "rxjs";
 import {BreakpointObserver, Breakpoints} from "@angular/cdk/layout";
+import {FormControl} from "@angular/forms";
+import {MatSnackBar} from "@angular/material/snack-bar";
+
+export interface Device {
+  name: string,
+  hash: string,
+  default: boolean
+}
 
 @Component({
   selector: 'app-root',
@@ -13,9 +21,12 @@ import {BreakpointObserver, Breakpoints} from "@angular/cdk/layout";
 export class AppComponent implements OnInit {
   constructor(private route: Router,
               private http: HttpClient,
-              private breakpointObserver: BreakpointObserver) {
+              private breakpointObserver: BreakpointObserver,
+              private snack: MatSnackBar) {
   }
 
+  devices: Device[] = [];
+  selected_devices = new FormControl();
 
   isHandset: Observable<boolean> = this.breakpointObserver
     .observe([Breakpoints.Handset])
@@ -25,6 +36,31 @@ export class AppComponent implements OnInit {
     this.http.get(`api/auth/me`).subscribe(
       (res) => this.userNode = res as NodeDTO
     )
+    this.selected_devices.valueChanges.subscribe(
+      (res) => {
+        sessionStorage.setItem("devices", JSON.stringify((res as unknown as Device[]).map((device) => device.hash)));
+      }
+    )
+    this.getDevices()
+  }
+
+  getDevices() {
+    this.http.get(`api/devices`).subscribe(
+      (obj) => {
+        this.devices = obj as Device[];
+
+        if (sessionStorage.getItem("devices") != null) {
+          // @ts-ignore
+          const ss_device: string[] = JSON.parse(sessionStorage.getItem("devices"));
+          if (ss_device)
+            this.selected_devices.setValue(this.devices.filter((device) => ss_device.indexOf(device.hash) != -1))
+        } else
+          this.devices.forEach(device => {
+            if (device.default)
+              sessionStorage.setItem("devices", JSON.stringify([device.hash]))
+          })
+      }
+    )
   }
 
   userNode!: NodeDTO

ui/src/app/components/messages/MessageHistory.component.ts

@@ -4,7 +4,7 @@ import {MessageDTO} from "../../entities/MessageDTO";
 import {NodeDTO} from "../../entities/NodeDTO";
 import {KeyValueMap} from "../../entities/KeyValueMap";
 import {Subscription} from "rxjs";
-import {numToColor} from "../../utils/Utils";
+import {devicesToRequest, numToColor} from "../../utils/Utils";
 
 @Component({
   selector: "app-message-history",
@@ -50,7 +50,7 @@ export class MessageHistoryComponent implements OnInit, OnDestroy {
     let notKnownNodes = nums.filter(num => Object.keys(this.knownNodes).indexOf(`${num}`) == -1)
     if (notKnownNodes.length == 0) return Subscription.EMPTY;
     let params = notKnownNodes.length > 1 ? "&nums=" + notKnownNodes.join("&nums=") : `?nums=${notKnownNodes.pop()}`;
-    return this.http.get(`api/nodes?s=1${params}`).subscribe(
+    return this.http.get(`api/nodes?s=1${params}${devicesToRequest()}`).subscribe(
       (res) => {
         (res as NodeDTO[]).forEach(
           (node) => this.knownNodes[`${node.num}`] = node
@@ -61,7 +61,7 @@ export class MessageHistoryComponent implements OnInit, OnDestroy {
 
   getMessages() {
     this.loading = true;
-    this.http.get(`api/messages?limit=${this.limit}&before=${this.olderMsgTs}`)
+    this.http.get(`api/messages?limit=${this.limit}&before=${this.olderMsgTs}${devicesToRequest()}`)
       .subscribe((res) => {
         let new_msgs = res as MessageDTO[]
         this.tryKnownNodes(new_msgs.map(msg => msg.from)).add(
@@ -88,7 +88,7 @@ export class MessageHistoryComponent implements OnInit, OnDestroy {
 
   //ЭХ ВОТ БЫ ВЕБСОКЕТ НО МНЕ ЛЕНЬ
   newMessagePooler() {
-    this.http.get(`api/messages?limit=10&after=${this.lastMsgTs}&before=2147483647`)//todo 37 year moment
+    this.http.get(`api/messages?limit=10&after=${this.lastMsgTs}&before=2147483647${devicesToRequest()}`)//todo 37 year moment
       .subscribe((res) => {
         let new_msgs = res as MessageDTO[]
         this.tryKnownNodes(new_msgs.map(msg => msg.from)).add(

ui/src/app/components/nodes/nodes-list.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
 import {NodeDTO} from "../../entities/NodeDTO";
-import {numToColor} from "../../utils/Utils";
+import {devicesToRequest, numToColor} from "../../utils/Utils";
 
 //todo abs this
 @Component({

ui/src/app/components/nodes/nodes-map.component.ts

@@ -4,7 +4,7 @@ import {HttpClient} from "@angular/common/http";
 import {NodeDTO} from "../../entities/NodeDTO";
 import {Subscription} from "rxjs";
 import {DatePipe} from "@angular/common";
-import {numToColor} from "../../utils/Utils";
+import {devicesToRequest, numToColor} from "../../utils/Utils";
 
 @Component({
   selector: "app-nodes-map",
@@ -34,7 +34,7 @@ export class NodesMapComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.http.get(`api/nodes/list?p=true`).subscribe(
+    this.http.get(`api/nodes/list?p=true${devicesToRequest()}`).subscribe(
       (obj) => {
         this.nodes = (obj as NodeDTO[])
       }

ui/src/app/components/packet/NetworkStatus.component.ts

@@ -2,7 +2,7 @@ import {Component, OnInit} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
 import {PacketGroup} from "../../entities/PacketGroup";
 import {Chart} from "chart.js/auto";
-import {numToColor} from "../../utils/Utils";
+import {devicesToRequest, numToColor} from "../../utils/Utils";
 import {KeyValueMap} from "../../entities/KeyValueMap";
 import {NodeDTO} from "../../entities/NodeDTO";
 import {ActivatedRoute} from "@angular/router";
@@ -192,7 +192,7 @@ export class NetworkStatusComponent implements OnInit {
         switch (num) {
           case 0: {
             this.MODE = "ALL";
-            this.http.get(`api/nodes/list`).subscribe(
+            this.http.get(`api/nodes/list?q=${devicesToRequest()}`).subscribe(
               (obj) => {
                 (obj as NodeDTO[]).forEach(
                   (node) => {
@@ -211,7 +211,7 @@ export class NetworkStatusComponent implements OnInit {
           default: {
             this.MODE = "NODE";
             this.NUM = num;
-            this.http.get(`api/nodes/${num}`).subscribe(
+            this.http.get(`api/nodes/${num}?q=${devicesToRequest()}`).subscribe(
               (obj) => {
                 const node: NodeDTO = obj as NodeDTO
                 if (node)
@@ -247,7 +247,7 @@ export class NetworkStatusComponent implements OnInit {
         break;
       }
     }
-    this.http.get(`api/packet/signal?before=${before}&after=${after}&nums=${this.NUM}`).subscribe(
+    this.http.get(`api/packet/signal?before=${before}&after=${after}&nums=${this.NUM}${devicesToRequest()}`).subscribe(
       (obj) => {
         this.signalChart.config.data = {labels: [], datasets:[{label: "snr",data:[]},{label: "rssi",data:[]}]};
         (obj as PacketSignalDTO[]).forEach(
@@ -271,7 +271,7 @@ export class NetworkStatusComponent implements OnInit {
       (graph) => {
         graph.cards.forEach((settings:any) => {
           if (this.MODE != graph.requestMode) return;
-          this.http.get(`${graph.endpoint}${settings.params}&before=${settings.before}&after=${settings.after}&${this.NUM == 0?'':('&nums='+this.NUM)}`)
+          this.http.get(`${graph.endpoint}${settings.params}&before=${settings.before}&after=${settings.after}&${this.NUM == 0?'':('&nums='+this.NUM)}${devicesToRequest()}`)
             .subscribe((data) => {
               settings.config.data = {
                 labels: [],

ui/src/app/utils/Utils.ts

@@ -18,3 +18,11 @@ export function numToColor(num:number, alpha = 0.2) {
   else
     return `rgba(${r}, ${g}, ${b}, ${alpha})`
 }
+
+export function devicesToRequest(): string {
+  if (sessionStorage.getItem("devices") != null) {
+    // @ts-ignore
+    return "&devices=" + JSON.parse(sessionStorage.getItem("devices")).join("&devices=");
+  }
+  return ""
+}

webExtensions/publicEndpoints.py

@@ -83,7 +83,7 @@ class WebExtension:
                 obj = {
                     "hash": hash, 
                     "default": hash == self.core.defaultDeviceUUIDHash,
-                    "name": f"Устройство {count}"
+                    "name": "amongus" if count == 1 else "atlanta"#todo
                     }
                 response.append(obj)
                 count += 1