update props

mappable-world · Aug 2, 2024 · badd052 · badd052
1 parent 590ed75
commit badd052
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 9 deletions.
diff --git a/src/controls/MMapRouteControl/MMapWaypointInput/index.ts b/src/controls/MMapRouteControl/MMapWaypointInput/index.ts
@@ -155,7 +155,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
         }
     }
 
-    protected _onUpdate(): void {
+    protected _onUpdate(diffProps: Partial<MMapWaypointInputProps>): void {
         if (this._props.waypoint !== undefined) {
             if (this._props.waypoint === null) {
                 this._props.waypoint = undefined;
@@ -164,6 +164,10 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
                 this._search({text: this._props.waypoint.toString()}, this._props.waypoint);
             }
         }
+
+        if (diffProps.inputPlaceholder !== undefined) {
+            this._inputEl.placeholder = diffProps.inputPlaceholder;
+        }
     }
 
     protected _onDetach(): void {

diff --git a/src/controls/MMapRouteControl/helpers.ts b/src/controls/MMapRouteControl/helpers.ts
@@ -14,6 +14,8 @@ const svgIcons: Record<AvailableTypes, string> = {
     transit: transitSVG
 };
 
+const AVAILABLE_TYPES: AvailableTypes[] = ['driving', 'truck', 'walking', 'transit'];
+
 export function createSegmentedControl(availableTypes: AvailableTypes[]): HTMLElement {
     const element = document.createElement('mappable');
     element.classList.add('mappable--route-control_modes');
@@ -22,14 +24,13 @@ export function createSegmentedControl(availableTypes: AvailableTypes[]): HTMLEl
     container.classList.add('mappable--route-control_modes__container');
     element.appendChild(container);
 
-    // TODO: Do it normally
     if (availableTypes.length < 1) {
         throw new Error('The route must contain at least one type of route.');
     }
 
     const options: {option: HTMLInputElement; label: HTMLLabelElement}[] = [];
-    (['driving', 'truck', 'walking', 'transit'] as AvailableTypes[]).forEach((routeType) => {
-        if (!availableTypes.includes(routeType)) {
+    availableTypes.forEach((routeType) => {
+        if (!AVAILABLE_TYPES.includes(routeType)) {
             return;
         }
         const option = document.createElement('input');

diff --git a/src/controls/MMapRouteControl/index.ts b/src/controls/MMapRouteControl/index.ts
@@ -124,6 +124,8 @@ class MMapCommonRouteControl extends mappable.MMapComplexEntity<MMapRouteControl
     private _waypointInputFromElement: MMapWaypointInput;
     private _waypointInputToElement: MMapWaypointInput;
     private _actionsContainerElement: HTMLElement;
+    private _changeOrderButton: HTMLButtonElement;
+    private _clearFieldsButton: HTMLButtonElement;
 
     private _waypoints: WaypointsArray = [null, null];
 
@@ -158,8 +160,10 @@ class MMapCommonRouteControl extends mappable.MMapComplexEntity<MMapRouteControl
             clearFieldsText: this._props.clearFieldsText,
             changeOrderText: this._props.changeOrderText
         });
-        changeOrderButton.addEventListener('click', this._changeOrder);
-        clearFieldsButton.addEventListener('click', this._clearAll);
+        this._changeOrderButton = changeOrderButton;
+        this._changeOrderButton.addEventListener('click', this._changeOrder);
+        this._clearFieldsButton = clearFieldsButton;
+        this._clearFieldsButton.addEventListener('click', this._clearAll);
         this._actionsContainerElement = container;
         this._routeParametersElement.appendChild(this._actionsContainerElement);
 
@@ -188,10 +192,28 @@ class MMapCommonRouteControl extends mappable.MMapComplexEntity<MMapRouteControl
     }
 
     protected _onUpdate(diffProps: Partial<MMapRouteControlProps>): void {
-        if (diffProps.waypoints) {
+        if (diffProps.waypoints !== undefined) {
             this._waypointInputFromElement.update({waypoint: diffProps.waypoints[0]});
             this._waypointInputToElement.update({waypoint: diffProps.waypoints[1]});
         }
+        if (diffProps.geolocationTextInput !== undefined) {
+            this._waypointInputFromElement.update({geolocationTextInput: diffProps.geolocationTextInput});
+            this._waypointInputToElement.update({geolocationTextInput: diffProps.geolocationTextInput});
+        }
+        if (diffProps.waypointsPlaceholders !== undefined) {
+            this._waypointInputFromElement.update({inputPlaceholder: diffProps.waypointsPlaceholders[0]});
+            this._waypointInputToElement.update({inputPlaceholder: diffProps.waypointsPlaceholders[1]});
+        }
+        if (diffProps.clearFieldsText !== undefined) {
+            this._clearFieldsButton.textContent = diffProps.clearFieldsText;
+        }
+        if (diffProps.changeOrderText !== undefined) {
+            this._changeOrderButton.textContent = diffProps.changeOrderText;
+        }
+        if (diffProps.availableTypes !== undefined) {
+            this._routeModesElement.replaceChildren(...createSegmentedControl(diffProps.availableTypes).children);
+            this._setRouteMode(diffProps.availableTypes[0]);
+        }
     }
 
     protected _onDetach(): void {
@@ -267,10 +289,14 @@ class MMapCommonRouteControl extends mappable.MMapComplexEntity<MMapRouteControl
 
     private _onUpdateRouteMode = (e: Event) => {
         const target = e.target as HTMLInputElement;
-        this._routeMode = target.value as RouteOptions['type'];
-        this._route();
+        this._setRouteMode(target.value as RouteOptions['type']);
     };
 
+    private _setRouteMode(mode: AvailableTypes): void {
+        this._routeMode = mode;
+        this._route();
+    }
+
     private _route = debounce(async () => {
         if (!this._waypoints.every((point) => point !== null)) {
             return;