ca-components 2.1.152 → 2.1.161

package/lib/components/ca-map/utils/helpers/map.helper.ts

@@ -1,192 +0,0 @@
-import { IMapMarkers, IRoutePath } from '../../models';
-
-export class MapHelper {
-    static getIconForUnitViewStops = (color: string, id: number | string) => {
-        const svgTemplate = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="31" height="34" viewBox="0 0 44 48.364">
-                              <defs>
-                                  <filter  id="Path_41824"  x="0"  y="0"  width="44"  height="48.364" filterUnits="userSpaceOnUse">
-                                      <feOffset input="SourceAlpha" />
-                                      <feGaussianBlur  stdDeviation="2"  result="blur"/>
-                                      <feFlood flood-opacity="0.149" />
-                                      <feComposite  operator="in"  in2="blur"/>
-                                      <feComposite in="SourceGraphic" />
-                                  </filter>
-                              </defs>
-                              <g  id="Group_103737"  data-name="Group 103737" transform="translate(-1095 -945)">
-                                  <circle id="Ellipse_9165"  data-name="Ellipse 9165"  cx="4"  cy="4"  r="6"  transform="translate(1113 983)" fill="${color}"/>
-                                  <circle  id="Ellipse_9166"  data-name="Ellipse 9166" cx="2"  cy="2"  r="2"
-                                      transform="translate(1115 985.5)"  fill="#fff" />
-                              </g>
-                              <g  transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Path_41824)">
-                                  <path id="Path_41824-2" data-name="Path 41824" d="M32,15.962A15.956,15.956,0,0,1,24.942,29.2c-.035.026-.551.345-.755.479-4.9,3.113-6.863,5.215-7.654,6.394a.641.641,0,0,1-.886.18.665.665,0,0,1-.18-.18c-.791-1.18-2.762-3.281-7.654-6.394-.223-.138-.719-.452-.755-.479A15.975,15.975,0,1,1,32,15.962"
-                                  transform="translate(6 6)" fill="#fff"/>
-                              </g>
-                              <circle id="Ellipse_9255" data-name="Ellipse 9255" cx="13" cy="13" r="13" transform="translate(9 9.001)" fill= "${color}"/>
-                                  <text dominant-baseline="middle" text-anchor="middle" id="_1" data-name="1" transform="translate(22 27.001)" fill="#fff" font-size="14"
-                                    font-family="Montserrat-Bold, Montserrat" font-weight="700"><tspan y="-3">${id}</tspan>
-                                    </text>
-                            </svg>`;
-        const url =
-            'data:image/svg+xml;charset=UTF-8,' +
-            encodeURIComponent(svgTemplate);
-        return url;
-    };
-
-    static getIconForDriveMiles = (color: string, id: number | string) => {
-        const svgTemplate = `<svg width="18" height="25" viewBox="0 0 18 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="9" cy="22" r="3" fill="${color}"/>
-        <circle cx="9" cy="22" r="1.5" fill="white"/>
-        <path d="M18 9.09915C18 11.3366 17.166 13.4937 15.66 15.1491L9.39649 21.8286C9.18153 22.0572 8.81849 22.0572 8.60352 21.8286L2.33997 15.1491C-1.85302 10.5362 -0.359978 2.75614 6.409 0.414645C7.55604 0.0176113 8.79346 -0.0978672 9.99354 0.0836513C14.9535 0.833651 18.0015 4.81961 18 9.09915Z" fill="${color}"/>
-        <circle cx="9" cy="9" r="7" fill="white"/>
-        <text x="9" y="9"  text-anchor="middle" fill="${color}" font-size="8" font-family="Montserrat-Bold, Montserrat" font-weight="600" dy=".3em">${id}</text>
-      </svg>`;
-        const url =
-            'data:image/svg+xml;charset=UTF-8,' +
-            encodeURIComponent(svgTemplate);
-        return url;
-    };
-
-    static getLocationIcon(color: string) {
-        let svgTemplate = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13"><g transform="translate(-181 -295)"><rect width="13" height="13" rx="6.5" transform="translate(181 295)" fill="${color}"/><rect width="5" height="5" rx="2.5" transform="translate(185 299)" fill="#fff"/></g></svg>`;
-        const url =
-            'data:image/svg+xml;charset=UTF-8,' +
-            encodeURIComponent(svgTemplate);
-        return url;
-    }
-
-    static getFillColorForState(
-        stateDensity: number,
-        View: string
-    ): { fillColor: string; fillOpacity: number } {
-        let fillColor = '#EEEEEE';
-        let fillOpacity = 1;
-
-        const getFleetViewColor = (density: number) => {
-            if (density < 50) return { fillColor: '#EF5350', fillOpacity: 0.8 };
-            else if (density < 100)
-                return { fillColor: '#EF5350', fillOpacity: 1 };
-            else if (density < 500)
-                return { fillColor: '#00967E', fillOpacity: 0.8 };
-            else if (density < 1000)
-                return { fillColor: '#00967E', fillOpacity: 1 };
-            return { fillColor: '#EEEEEE', fillOpacity: 1 };
-        };
-
-        const getUnitViewColor = (density: number) => {
-            if (density < 50) return { fillColor: '#FFA726', fillOpacity: 0.3 };
-            else if (density < 100)
-                return { fillColor: '#FFA726', fillOpacity: 0.6 };
-            else if (density < 500)
-                return { fillColor: '#FFA726', fillOpacity: 0.9 };
-            else if (density < 1000)
-                return { fillColor: '#FFA726', fillOpacity: 1 };
-            return { fillColor: '#EEEEEE', fillOpacity: 1 };
-        };
-
-        switch (View) {
-            case 'fleetView':
-                ({ fillColor, fillOpacity } = getFleetViewColor(stateDensity));
-                break;
-            case 'unitView':
-                ({ fillColor, fillOpacity } = getUnitViewColor(stateDensity));
-                break;
-            default:
-                break;
-        }
-        return {
-            fillColor: fillColor,
-            fillOpacity: fillOpacity,
-        };
-    }
-
-    static getMapCenterAndZoom(markers: IMapMarkers[]): {
-        mapCenter: IRoutePath;
-        bounds?: google.maps.LatLngBounds | null;
-        mapZoom?: number | null;
-    } {
-        // Calculate center
-        const coordinates: { lat: number[]; lng: number[] } = {
-            lat: [],
-            lng: [],
-        };
-
-        // Calculate zoom
-        const bounds: google.maps.LatLngBounds | null =
-            markers?.length > 1 ? new google.maps.LatLngBounds() : null;
-
-        if (markers?.length > 1) {
-            markers.forEach((marker) => {
-                coordinates.lat.push(Number(marker.position.lat));
-                coordinates.lng.push(Number(marker.position.lng));
-
-                bounds?.extend({
-                    lat: Number(marker.position.lat),
-                    lng: Number(marker.position.lng),
-                });
-            });
-        }
-
-        const averageLng =
-            markers?.length > 1
-                ? (Math.max(...coordinates.lng) +
-                      Math.min(...coordinates.lng)) /
-                  2
-                : markers[0].position.lng;
-        const averageLat =
-            markers?.length > 1
-                ? (Math.max(...coordinates.lat) +
-                      Math.min(...coordinates.lat)) /
-                  2
-                : markers[0].position.lat;
-
-        const mapCenter = { lat: averageLat, lng: averageLng };
-
-        const mapZoom = markers.length === 1 ? 8 : null;
-
-        return { mapCenter, bounds, mapZoom };
-    }
-
-    static getMapScaleDistance(map: google.maps.Map): {
-        roundedMiles: number;
-        pixelLength: number;
-    } {
-        const center = map.getCenter();
-        const zoom = map.getZoom();
-
-        if (!center || zoom == null) return { roundedMiles: 0, pixelLength: 0 };
-
-        const lat = center.lat();
-        const metersPerPixel =
-            (156543.03392 * Math.cos((lat * Math.PI) / 180)) /
-            Math.pow(2, zoom);
-
-        const maxBarPx = 100;
-        const rawMeters = metersPerPixel * maxBarPx;
-
-        const rawMiles = rawMeters / 1609.34;
-        const roundedMiles = this.getRoundedMiles(rawMiles);
-
-        const roundedMeters = roundedMiles * 1609.34;
-        const pixelLength = roundedMeters / metersPerPixel;
-
-        return {
-            roundedMiles,
-            pixelLength,
-        };
-    }
-
-    static getRoundedMiles(miles: number): number {
-        if (miles <= 0) return 0;
-
-        const exponent = Math.floor(Math.log10(miles));
-        const fraction = miles / Math.pow(10, exponent);
-        let roundedFraction: number;
-
-        if (fraction < 1.5) roundedFraction = 1;
-        else if (fraction < 3) roundedFraction = 2;
-        else if (fraction < 7) roundedFraction = 5;
-        else roundedFraction = 10;
-
-        return roundedFraction * Math.pow(10, exponent);
-    }
-}

package/lib/components/ca-map/utils/services/index.ts

@@ -1 +0,0 @@
-export * from './map-marker-icon.service';

package/lib/components/ca-map/utils/services/map-marker-icon.service.ts

@@ -1,312 +0,0 @@
-import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
-
-// Helpers
-import { MapMarkerIconHelper } from '../helpers';
-
-// Constants
-import { MapMarkerIconsConstants } from '../constants';
-
-// Models
-import { IMapMarkers } from '../../models';
-
-// Enums
-import { eGpsMotionStatus } from '../../../../enums';
-
-@Injectable({
-    providedIn: 'root',
-})
-export class MapMarkerIconService {
-    private renderer: Renderer2;
-    private clusterMarkerIds = new BehaviorSubject<IMapMarkers[]>([]);
-    public clusterMarkerIds$: Observable<IMapMarkers[]> =
-        this.clusterMarkerIds.asObservable();
-    private routingMarkerIds = new BehaviorSubject<IMapMarkers[]>([]);
-    public routingMarkerIds$: Observable<IMapMarkers[]> =
-        this.routingMarkerIds.asObservable();
-    private markerElements = new BehaviorSubject<HTMLElement[]>([]);
-    private clusterElements = new BehaviorSubject<HTMLElement[]>([]);
-    private routingElements = new BehaviorSubject<HTMLElement[]>([]);
-
-    constructor(rendererFactory: RendererFactory2) {
-        this.renderer = rendererFactory.createRenderer(null, null);
-    }
-
-    public getMarkerIcon(
-        markerId: number,
-        labelName?: string,
-        isClosed?: boolean,
-        isFavorite?: boolean,
-        isAlwaysSelected?: boolean,
-        fuelMarkerClass?: string,
-        secondLabelName?: string,
-        isCreateNewMarker?: boolean
-    ): HTMLElement {
-        const markerElements = this.markerElements.getValue();
-
-        const previousMarkerIcon = markerElements.find(
-            (icon) => icon.id === 'marker-' + markerId
-        );
-
-        if (previousMarkerIcon && !isCreateNewMarker) return previousMarkerIcon;
-        else {
-            const markerElement = this.renderer.createElement('div');
-            this.renderer.setAttribute(
-                markerElement,
-                'id',
-                'marker-' + markerId
-            );
-            this.renderer.addClass(markerElement, 'marker-icon');
-
-            const markerSvg = isClosed
-                ? MapMarkerIconsConstants.closedMarker
-                : isFavorite
-                  ? MapMarkerIconsConstants.favoriteMarker
-                  : MapMarkerIconsConstants.defaultMarker;
-
-            this.renderer.setProperty(markerElement, 'innerHTML', markerSvg);
-
-            if (labelName) {
-                const markerLabelElement = this.renderer.createElement('div');
-                this.renderer.addClass(markerLabelElement, 'marker-label');
-
-                const markerLabelText = this.renderer.createElement('div');
-                this.renderer.addClass(markerLabelText, 'marker-label-text');
-
-                const labelText = isAlwaysSelected
-                    ? labelName
-                    : labelName.toUpperCase();
-
-                this.renderer.setProperty(
-                    markerLabelText,
-                    'innerHTML',
-                    labelText
-                );
-
-                this.renderer.appendChild(markerLabelElement, markerLabelText);
-
-                if (secondLabelName) {
-                    const secondLabelElement =
-                        this.renderer.createElement('div');
-                    this.renderer.addClass(
-                        secondLabelElement,
-                        'marker-label-second-text'
-                    );
-                    this.renderer.addClass(secondLabelElement, 'ca-font-bold');
-                    this.renderer.addClass(secondLabelElement, 'line-clamp-1');
-
-                    this.renderer.setProperty(
-                        secondLabelElement,
-                        'innerHTML',
-                        secondLabelName.toUpperCase()
-                    );
-
-                    this.renderer.appendChild(
-                        markerLabelElement,
-                        secondLabelElement
-                    );
-
-                    this.renderer.addClass(markerLabelText, 'line-clamp-1');
-                }
-
-                this.renderer.appendChild(markerElement, markerLabelElement);
-            }
-
-            if (isAlwaysSelected)
-                this.renderer.addClass(markerElement, 'selected-permanently');
-
-            if (fuelMarkerClass && !isClosed) {
-                this.renderer.addClass(markerElement, 'fuel-icon');
-                this.renderer.addClass(markerElement, fuelMarkerClass);
-            }
-
-            markerElements.push(markerElement);
-
-            this.markerElements.next(markerElements);
-
-            return markerElement;
-        }
-    }
-
-    public getClusterMarkerIcon(
-        markerData: IMapMarkers,
-        isFuelMarker?: boolean
-    ): HTMLElement {
-        const clusterElements = this.clusterElements.getValue();
-
-        const clusterId = this.createClusterId(markerData);
-
-        const previousClusterIcon = clusterElements.find(
-            (icon) => icon.id === 'cluster-' + clusterId
-        );
-
-        if (previousClusterIcon) return previousClusterIcon;
-        else {
-            const markerElement = this.renderer.createElement('div');
-            this.renderer.setAttribute(
-                markerElement,
-                'id',
-                'cluster-' + clusterId
-            );
-            this.renderer.addClass(markerElement, 'cluster-icon');
-
-            if (isFuelMarker)
-                this.renderer.addClass(markerElement, 'fuel-icon');
-
-            const markerSvg = MapMarkerIconHelper.getClusterMarker(
-                markerData.data.count,
-                false,
-                isFuelMarker
-            );
-            this.renderer.setProperty(markerElement, 'innerHTML', markerSvg);
-            clusterElements.push(markerElement);
-
-            this.clusterElements.next(clusterElements);
-
-            return markerElement;
-        }
-    }
-
-    public getRoutingMarkerIcon(
-        markerData: IMapMarkers,
-        stopNumber: number,
-        stopType: string,
-        isStopChecked?: boolean,
-        isLightMode?: boolean,
-        labelName?: string
-    ): HTMLElement {
-        const routingElements = this.routingElements.getValue();
-
-        const routingId = markerData.id ?? this.createRoutingId(markerData);
-
-        const previousClusterIcon = routingElements.find(
-            (icon) => icon.id === 'routingMarker-' + routingId
-        );
-
-        if (previousClusterIcon) return previousClusterIcon;
-        else {
-            const markerElement = this.renderer.createElement('div');
-            this.renderer.setAttribute(
-                markerElement,
-                'id',
-                'routingMarker-' + routingId
-            );
-            this.renderer.addClass(markerElement, 'routing-icon');
-
-            const markerSvg = MapMarkerIconHelper.getRoutingMarkerIcon(
-                stopNumber,
-                stopType,
-                isStopChecked,
-                isLightMode
-            );
-            this.renderer.setProperty(markerElement, 'innerHTML', markerSvg);
-
-            if (labelName) {
-                const markerLabelElement = this.renderer.createElement('div');
-                this.renderer.addClass(markerLabelElement, 'marker-label');
-                this.renderer.setProperty(
-                    markerLabelElement,
-                    'innerHTML',
-                    labelName.toUpperCase()
-                );
-                this.renderer.appendChild(markerElement, markerLabelElement);
-            }
-
-            routingElements.push(markerElement);
-
-            this.routingElements.next(routingElements);
-
-            return markerElement;
-        }
-    }
-
-    public getCurrentLocationMarkerIcon(
-        markerData: IMapMarkers,
-        motionStatus: eGpsMotionStatus
-    ): HTMLElement {
-        const routingElements = this.routingElements.getValue();
-
-        const routingId = markerData.id ?? this.createRoutingId(markerData);
-
-        const previousClusterIcon = routingElements.find(
-            (icon) => icon.id === 'routingMarker-' + routingId
-        );
-
-        if (previousClusterIcon) return previousClusterIcon;
-        else {
-            const markerElement = this.renderer.createElement('div');
-            this.renderer.setAttribute(
-                markerElement,
-                'id',
-                'routingMarker-' + routingId
-            );
-            this.renderer.addClass(markerElement, 'routing-icon');
-            this.renderer.addClass(markerElement, 'd-flex');
-
-            const markerSvg =
-                MapMarkerIconHelper.getCurrentLocationMarkerSvg(motionStatus);
-            this.renderer.setProperty(markerElement, 'innerHTML', markerSvg);
-
-            routingElements.push(markerElement);
-
-            this.routingElements.next(routingElements);
-
-            return markerElement;
-        }
-    }
-
-    public createClusterId(clusterData: IMapMarkers): number {
-        const clusterMarkers = this.clusterMarkerIds.getValue();
-
-        const clusterId = clusterMarkers.find(
-            (item) => clusterData?.id === item?.id
-        )?.id;
-
-        if (clusterId) return clusterId;
-        else {
-            const newId = crypto.getRandomValues(new Uint32Array(1))[0];
-
-            const newData = {
-                ...clusterData,
-                id: newId,
-            };
-
-            clusterMarkers.push(newData);
-            this.clusterMarkerIds.next(clusterMarkers);
-
-            return newId;
-        }
-    }
-
-    public createRoutingId(markerData: IMapMarkers): number {
-        const routingMarkers = this.routingMarkerIds.getValue();
-
-        const routingId = routingMarkers.find(
-            (item) => markerData?.id === item?.id
-        )?.id;
-
-        if (routingId) return routingId;
-        else {
-            const newId =
-                markerData?.id ?? crypto.getRandomValues(new Uint32Array(1))[0];
-
-            const newData = {
-                ...markerData,
-                id: newId,
-            };
-
-            routingMarkers.push(newData);
-            this.routingMarkerIds.next(routingMarkers);
-
-            return newId;
-        }
-    }
-
-    public resetMarkersData(): void {
-        this.clusterMarkerIds.next([]);
-        this.routingMarkerIds.next([]);
-        this.markerElements.next([]);
-        this.clusterElements.next([]);
-        this.routingElements.next([]);
-    }
-}

package/lib/components/ca-map/utils/svg-routes/index.ts

@@ -1 +0,0 @@
-export * from './map-svg-routes';

package/lib/components/ca-map/utils/svg-routes/map-svg-routes.ts

@@ -1,19 +0,0 @@
-export class MapSvgRoutes {
-  static markerSvgRoute: string =
-    'assets/ca-components/svg/map/routing_marker.svg';
-  static phone: string = 'assets/ca-components/svg/map/phone.svg';
-
-  // Routing markers
-  static routingCheckedPickupMarker: string =
-    'assets/ca-components/svg/map/progress-marker-pickup.svg';
-  static routingCheckedDeliveryMarker: string =
-    'assets/ca-components/svg/map/progress-marker-checked.svg';
-  static routingCheckedDeadheadMarker: string =
-    'assets/ca-components/svg/map/progress_marker_reached.svg';
-
-  // Regular markers
-  static defaultMarkerIcon = 'assets/ca-components/svg/map/ic_marker.svg';
-  static favoriteMarkerIcon =
-    'assets/ca-components/svg/map/ic_marker_favorite.svg';
-  static closedMarkerIcon = 'assets/ca-components/svg/map/ic_marker_closed.svg';
-}