From 80e83e0ff9b4787a7525f45e244095de992d1c51 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 31 Jan 2025 19:32:18 +0200
Subject: [PATCH] UI: Maps top toolbar.

---
 .../widget/lib/maps/leaflet/leaflet-tb.ts     | 76 ++++++++++++++++---
 .../home/components/widget/lib/maps/map.scss  |  2 +-
 .../home/components/widget/lib/maps/map.ts    | 22 +++++-
 ui-ngx/src/typings/leaflet-extend-tb.d.ts     | 30 +++++++-
 4 files changed, 113 insertions(+), 17 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet/leaflet-tb.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet/leaflet-tb.ts
index 9418d3fcba..5994d25fca 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet/leaflet-tb.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet/leaflet-tb.ts
@@ -276,16 +276,49 @@ class GroupsControl extends SidebarPaneControl<TB.GroupsControlOptions> {
   }
 }
 
-class ToolbarButton extends L.Control<TB.ToolbarButtonOptions> {
+class TopToolbarButton {
+  private readonly button: JQuery<HTMLElement>;
+  private _onClick: (e: MouseEvent) => void;
+
+  constructor(private readonly options: TB.TopToolbarButtonOptions) {
+    const iconElement = $('<div class="tb-control-button-icon"></div>');
+    this.button = $("<a>")
+    .attr('class', 'tb-control-button tb-control-text-button')
+    .attr('href', '#')
+    .attr('role', 'button');
+    this.button.append(iconElement);
+    this.button.append(`<div class="tb-control-text">${this.options.title}</div>`);
+    this.loadIcon(iconElement);
+    this.button.on('click', (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (this._onClick) {
+        this._onClick(e.originalEvent);
+      }
+    });
+  }
+
+  onClick(onClick: (e: MouseEvent) => void): void {
+   this._onClick = onClick;
+  }
+
+  private loadIcon(iconElement: JQuery<HTMLElement>) {
+    // this.options.icon
+  }
+
+  getButtonElement(): JQuery<HTMLElement> {
+    return this.button;
+  }
+}
+
+class ToolbarButton {
   private readonly id: string;
   private readonly button: JQuery<HTMLElement>;
   private active = false;
   private disabled = false;
 
-  constructor(options: TB.ToolbarButtonOptions) {
-    super(options);
+  constructor(private readonly options: TB.ToolbarButtonOptions) {
     this.id = options.id;
-
     const buttonText = this.options.showText ? this.options.title : null;
     this.button = $("<a>")
     .attr('class', 'tb-control-button')
@@ -346,6 +379,25 @@ class ToolbarButton extends L.Control<TB.ToolbarButtonOptions> {
   }
 }
 
+class TopToolbarControl {
+
+  private readonly toolbarElement: JQuery<HTMLElement>;
+
+  constructor(private readonly options: TB.TopToolbarControlOptions) {
+    const controlContainer = $('.leaflet-control-container', options.mapElement);
+    this.toolbarElement = $('<div class="tb-map-top-toolbar leaflet-top"></div>');
+    this.toolbarElement.appendTo(controlContainer);
+  }
+
+  toolbarButton(options: TB.TopToolbarButtonOptions): TopToolbarButton {
+    const button = new TopToolbarButton(options);
+    const buttonContainer = $('<div class="leaflet-bar leaflet-control"></div>');
+    button.getButtonElement().appendTo(buttonContainer);
+    buttonContainer.appendTo(this.toolbarElement);
+    return button;
+  }
+}
+
 class ToolbarControl extends L.Control<L.ControlOptions> {
 
   private buttonContainer: JQuery<HTMLElement>;
@@ -372,15 +424,14 @@ class ToolbarControl extends L.Control<L.ControlOptions> {
 
 }
 
-class BottomToolbarControl extends L.Control<TB.BottomToolbarControlOptions> {
+class BottomToolbarControl {
 
   private readonly buttonContainer: JQuery<HTMLElement>;
   private toolbarButtons: ToolbarButton[] = [];
 
   container: HTMLElement;
 
-  constructor(options: TB.BottomToolbarControlOptions) {
-    super(options);
+  constructor(private readonly options: TB.BottomToolbarControlOptions) {
     const controlContainer = $('.leaflet-control-container', options.mapElement);
     const toolbar = $('<div class="tb-map-bottom-toolbar leaflet-bottom"></div>');
     toolbar.appendTo(controlContainer);
@@ -389,10 +440,6 @@ class BottomToolbarControl extends L.Control<TB.BottomToolbarControlOptions> {
     this.container = this.buttonContainer[0];
   }
 
-  addTo(map: L.Map): this {
-    return this;
-  }
-
   getButton(id: string): ToolbarButton {
     return this.toolbarButtons.find(b => b.getId() === id);
   }
@@ -452,6 +499,10 @@ const groups = (options: TB.GroupsControlOptions): GroupsControl => {
   return new GroupsControl(options);
 }
 
+const topToolbar = (options: TB.TopToolbarControlOptions): TopToolbarControl => {
+  return new TopToolbarControl(options);
+}
+
 const toolbar = (options: L.ControlOptions): ToolbarControl => {
   return new ToolbarControl(options);
 }
@@ -515,6 +566,8 @@ L.TB = L.TB || {
   SidebarPaneControl,
   LayersControl,
   GroupsControl,
+  TopToolbarButton,
+  TopToolbarControl,
   ToolbarButton,
   ToolbarControl,
   BottomToolbarControl,
@@ -522,6 +575,7 @@ L.TB = L.TB || {
   sidebarPane,
   layers,
   groups,
+  topToolbar,
   toolbar,
   bottomToolbar,
   TileLayer: {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.scss b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.scss
index 270732d25b..3cb3c2cb35 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.scss
@@ -141,7 +141,7 @@
           }
         }
       }
-      .tb-map-bottom-toolbar {
+      .tb-map-bottom-toolbar, .tb-map-top-toolbar {
         left: 0;
         right: 0;
         display: flex;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts
index 1e7165a85f..21518a699e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts
@@ -85,6 +85,7 @@ export abstract class TbMap<S extends BaseMapSettings> {
 
   protected sidebar: L.TB.SidebarControl;
 
+  protected customActionsToolbar: L.TB.TopToolbarControl;
   protected editToolbar: L.TB.BottomToolbarControl;
 
   protected addMarkerButton: L.TB.ToolbarButton;
@@ -166,6 +167,7 @@ export abstract class TbMap<S extends BaseMapSettings> {
     }
     this.setupDataLayers();
     this.setupEditMode();
+    this.setupCustomActions();
     this.createdControlButtonTooltip(this.mapElement, ['topleft', 'bottomleft'].includes(this.settings.controlsPosition) ? 'right' : 'left');
   }
 
@@ -270,7 +272,7 @@ export abstract class TbMap<S extends BaseMapSettings> {
        onClose: () => {
          return this.deselectItem(true);
        }
-     }).addTo(this.map);
+     });
 
      this.map.on('click', () => {
        this.deselectItem();
@@ -349,6 +351,24 @@ export abstract class TbMap<S extends BaseMapSettings> {
      }
   }
 
+  private setupCustomActions() {
+    this.customActionsToolbar = L.TB.topToolbar({
+      mapElement: $(this.mapElement)
+    });
+
+    /*const customButton = this.customActionsToolbar.toolbarButton({
+      title: 'Super button',
+      icon: 'add'
+    });
+    this.customActionsToolbar.toolbarButton({
+      title: 'Super button 2',
+      icon: 'add'
+    });
+    customButton.onClick(e => {
+      console.log("Called!");
+    });*/
+  }
+
   private placeMarker(e: MouseEvent, button: L.TB.ToolbarButton): void {
     this.placeItem(e, button, this.addMarkerDataLayers,
       (entity) => {
diff --git a/ui-ngx/src/typings/leaflet-extend-tb.d.ts b/ui-ngx/src/typings/leaflet-extend-tb.d.ts
index e24c632a3b..26084fabb5 100644
--- a/ui-ngx/src/typings/leaflet-extend-tb.d.ts
+++ b/ui-ngx/src/typings/leaflet-extend-tb.d.ts
@@ -89,7 +89,27 @@ declare module 'leaflet' {
       constructor(options: GroupsControlOptions);
     }
 
-    interface ToolbarButtonOptions extends ControlOptions {
+    interface TopToolbarButtonOptions {
+      icon: string;
+      iconColor?: string;
+      title: string;
+    }
+
+    class TopToolbarButton {
+      constructor(options: TopToolbarButtonOptions);
+      onClick(onClick: (e: MouseEvent) => void): void;
+    }
+
+    interface TopToolbarControlOptions {
+      mapElement: JQuery<HTMLElement>;
+    }
+
+    class TopToolbarControl {
+      constructor(options: TopToolbarControlOptions);
+      toolbarButton(options: TopToolbarButtonOptions): TopToolbarButton;
+    }
+
+    interface ToolbarButtonOptions {
       id: string;
       title: string;
       click: (e: MouseEvent, button: ToolbarButton) => void;
@@ -97,7 +117,7 @@ declare module 'leaflet' {
       showText?: boolean;
     }
 
-    class ToolbarButton extends Control<ToolbarButtonOptions>{
+    class ToolbarButton {
       constructor(options: ToolbarButtonOptions);
       setActive(active: boolean): void;
       isActive(): boolean;
@@ -110,13 +130,13 @@ declare module 'leaflet' {
       toolbarButton(options: ToolbarButtonOptions): ToolbarButton;
     }
 
-    interface BottomToolbarControlOptions extends ControlOptions {
+    interface BottomToolbarControlOptions {
       mapElement: JQuery<HTMLElement>;
       closeTitle: string;
       onClose: () => boolean;
     }
 
-    class BottomToolbarControl extends Control<BottomToolbarControlOptions> {
+    class BottomToolbarControl {
       constructor(options: BottomToolbarControlOptions);
       getButton(id: string): ToolbarButton | undefined;
       open(buttons: ToolbarButtonOptions[], showCloseButton?: boolean): void;
@@ -132,6 +152,8 @@ declare module 'leaflet' {
 
     function groups(options: GroupsControlOptions): GroupsControl;
 
+    function topToolbar(options: TopToolbarControlOptions): TopToolbarControl;
+
     function toolbar(options: ControlOptions): ToolbarControl;
 
     function bottomToolbar(options: BottomToolbarControlOptions): BottomToolbarControl;