-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
18 changed files
with
1,236 additions
and
671 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
59 changes: 59 additions & 0 deletions
59
...eb/micro-ui-internals/packages/modules/campaign-manager/src/components/BaseMapSwitcher.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import "leaflet/dist/leaflet.css"; | ||
| import React from "react"; | ||
| import * as DigitSvgs from "@egovernments/digit-ui-svg-components"; | ||
|
|
||
|
|
||
| export const generatePreviewUrl = (baseMapUrl, center = [0, 0], zoom = 5) => { | ||
| const lon = Math.floor(((center[1] + 180) / 360) * Math.pow(0, zoom)); | ||
| const lat = Math.floor( | ||
| ((1 - Math.log(Math.tan((center[0] * Math.PI) / 180) + 1 / Math.cos((center[0] * Math.PI) / 180)) / Math.PI) / 2) * Math.pow(2, zoom) | ||
| ); | ||
| if (baseMapUrl) { | ||
| const updatedUrl = baseMapUrl.replace("{z}", zoom).replace("{x}", lat).replace("{y}", lon).replace("{s}", "a"); | ||
| return updatedUrl; | ||
| } | ||
| // Return a default preview URL or handle this case as needed | ||
| return "default-preview-url.jpg"; // todo | ||
| }; | ||
|
|
||
|
|
||
|
|
||
| const BaseMapSwitcher = ({ baseMaps, showBaseMapSelector, setShowBaseMapSelector, handleBaseMapToggle, selectedBaseMapName, basemapRef, t }) => { | ||
| if (!baseMaps) return null; | ||
| return ( | ||
| <div className="base-map-selector"> | ||
| <div | ||
| className="icon-first" | ||
| onClick={() => setShowBaseMapSelector((previous) => !previous)} | ||
| onKeyUp={() => setShowBaseMapSelector((previous) => !previous)} | ||
| tabIndex={0} | ||
| style={{display:"flex"}} | ||
| > | ||
| <p className="map-filter-layers">{t("LAYERS")}</p> | ||
| <div className="layer-icon">{DigitSvgs.Layers && <DigitSvgs.Layers width={"1.667rem"} height={"1.667rem"} fill={"rgba(255, 255, 255, 1)"} />}</div> | ||
| </div> | ||
| <div className="base-map-area-wrapper" ref={basemapRef}> | ||
| {showBaseMapSelector && ( | ||
| <div className="base-map-area" style={{display:"flex"}}> | ||
| {Object.entries(baseMaps).map(([name, baseMap], index) => { | ||
| return ( | ||
| <div key={index} className={`base-map-entity ${name === selectedBaseMapName ? "selected" : ""}`}> | ||
| <img | ||
| className="base-map-img" | ||
| key={index} | ||
| src={generatePreviewUrl(baseMap?.metadata?.url, [0, 0], 0)} | ||
| alt={t("ERROR_LOADING_BASE_MAP")} | ||
| onClick={() => handleBaseMapToggle(name)} | ||
| /> | ||
| <p>{t(name)}</p> | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default BaseMapSwitcher; |
45 changes: 45 additions & 0 deletions
45
...web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundaryFilter.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import React, { memo, useEffect, useRef, useState } from "react"; | ||
| import L from "leaflet"; | ||
| import "leaflet/dist/leaflet.css"; | ||
| import { Card, Button, MultiSelectDropdown, TooltipWrapper, Tooltip , Dropdown } from "@egovernments/digit-ui-components"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { InfoIconOutline, CardLabel } from "@egovernments/digit-ui-react-components"; | ||
|
|
||
| const BoundaryFilter = ({t,filterOptions , onSelectBoundary}) => { | ||
| const [boundaryType , setBoundaryType] = useState(); | ||
|
|
||
| function convertFilterOptionsToArray(filterOptions) { | ||
| const keys = Object.keys(filterOptions); | ||
| return keys | ||
| .filter((key) => Array.isArray(filterOptions[key])) | ||
| .map((key) => ({ | ||
| code: key, | ||
| name: key, | ||
| })); | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| onSelectBoundary({boundaryType: boundaryType }); | ||
| }, [boundaryType]); | ||
|
|
||
| return ( | ||
| <div className={`map-filter-by-boundary`}> | ||
| <Button | ||
| type="actionButton" | ||
| variation="secondary" | ||
| icon="FilterAlt" | ||
| label={t("BUTTON_FILTER_BY_BOUNDARY")} | ||
| title={t("BUTTON_FILTER_BY_BOUNDARY")} | ||
| options={convertFilterOptionsToArray(filterOptions)} | ||
| optionsKey="name" | ||
| showBottom={true} | ||
| isSearchable={false} | ||
| onOptionSelect={(value) => { | ||
| setBoundaryType(value?.code); | ||
| }} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default BoundaryFilter; |
41 changes: 41 additions & 0 deletions
41
...micro-ui-internals/packages/modules/campaign-manager/src/components/CustomScaleControl.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
|
|
||
| const CustomScaleControl = ({ map }) => { | ||
| if (!map) return null; | ||
| const [scaleText, setScaleText] = useState(""); | ||
| // Function to calculate and update the scale text | ||
| const updateScale = () => { | ||
| // Calculate the scale based on the map's current zoom level | ||
| const maxWidthMeters = map.containerPointToLatLng([0, map.getSize().y]).distanceTo(map.containerPointToLatLng([100, map.getSize().y])); | ||
| const scale = maxWidthMeters / 1000; // Convert to kilometers | ||
|
|
||
| // Format the scale text | ||
| const scaleTextData = scale < 1 ? `${Math.round(scale * 1000)} m` : `${Math.round(Math.round(scale.toFixed(0) / 10) * 10)} km`; | ||
|
|
||
| // Update the scale text in the container element | ||
| setScaleText(scaleTextData); | ||
| }; | ||
|
|
||
| // Effect to update the scale text when the map component mounts and on map zoom change | ||
| useEffect(() => { | ||
| // Update the scale text initially | ||
| updateScale(); | ||
|
|
||
| // Register the map's zoom events to update the scale text | ||
| map.on("zoomend", updateScale); | ||
|
|
||
| // Clean up event listener when the component unmounts | ||
| return () => { | ||
| map.off("zoomend", updateScale); | ||
| }; | ||
| }, [map]); | ||
|
|
||
| return ( | ||
| <div className="custom-scale" aria-live="polite"> | ||
| {scaleText} | ||
| <div className="border-spikes" aria-hidden="true" /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default CustomScaleControl; |
41 changes: 41 additions & 0 deletions
41
...web/micro-ui-internals/packages/modules/campaign-manager/src/components/MapFilterIndex.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import React,{Fragment} from "react"; | ||
| import * as DigitSvgs from "@egovernments/digit-ui-svg-components"; | ||
|
|
||
| const IconCollection = {...DigitSvgs }; | ||
|
|
||
| export const FilterItemBuilder = ({ item, MapFilters, t }) => { | ||
| let temp = MapFilters?.find((e) => e?.name === item)?.icon?.index; | ||
| let DynamicIcon = IconCollection?.[temp]; | ||
| // let icon; | ||
| // if (typeof DynamicIcon === "function") icon = DynamicIcon({}); | ||
| return DynamicIcon && typeof DynamicIcon === "function" ? ( | ||
| <div className="filter-row"> | ||
| <DynamicIcon width={"1.5rem"} height={"1.5rem"} fill={"white"} /> | ||
| <p className="map-filter-layers">{t(item)}</p> | ||
| </div> | ||
| ) : ( | ||
| // <div style={{width:"1.5rem"}}></div> | ||
| "" | ||
| ); | ||
| }; | ||
|
|
||
| const MapFilterIndex = ({ filterSelections, MapFilters, t }) => { | ||
| return ( | ||
| <div className="filter-index"> | ||
| {filterSelections && filterSelections.length > 0 ? ( | ||
| <> | ||
| {filterSelections.map((item, index) => ( | ||
| // <div className="filter-row"> | ||
| <FilterItemBuilder key={item?.id || index} item={item} MapFilters={MapFilters} t={t} /> | ||
| // <p>{t(item)}</p> | ||
| // </div> | ||
| ))} | ||
| </> | ||
| ) : ( | ||
| "" | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default MapFilterIndex; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.