diff --git a/packages/geoview-core/public/locales/en/translation.json b/packages/geoview-core/public/locales/en/translation.json index 0929c57a601..c565fa354b7 100644 --- a/packages/geoview-core/public/locales/en/translation.json +++ b/packages/geoview-core/public/locales/en/translation.json @@ -62,11 +62,9 @@ "zoom_to": "Zoom to feature", "select": "Highlight feature on map", "external_link": "External Link", - "mainDescription": "In order to start, select any visible layer on the map, if you do not see any layers on the map, please ensure to select them in the legend section", "detailsView": "Details View", "selectVisbleLayer": "Select any visible layer on the map to get started", "availableLayers": "Available Layers", - "selectedFeature": "Selected Feature", "feature": "feature", "clickOnMap": "Click on map", "nextFeatureBtn": "Next feature", diff --git a/packages/geoview-core/public/locales/fr/translation.json b/packages/geoview-core/public/locales/fr/translation.json index 2ed8b3e9f2f..5b6b30d1397 100644 --- a/packages/geoview-core/public/locales/fr/translation.json +++ b/packages/geoview-core/public/locales/fr/translation.json @@ -62,11 +62,9 @@ "zoom_to": "Zoom à l'élément", "select": "Sélectionner l'élément sur la carte", "external_link": "Lien externe", - "mainDescription": "Pour commencer, sélectionnez n'importe quelle couche visible sur la carte. Si vous ne voyez aucune couche sur la carte, assurez-vous de les sélectionner dans la section Légende.", "detailsView": "Vue détaillée", "selectVisbleLayer": "Sélectionnez n'importe quelle couche visible sur la carte pour commencer", "availableLayers": "Couche disponibles", - "selectedFeature": "Fonctionnalité Item", "feature": "item", "clickOnMap": "Cliquer sur la carte", "nextFeatureBtn": "Item suivant", diff --git a/packages/geoview-core/public/templates/raw-feature-info-1.html b/packages/geoview-core/public/templates/raw-feature-info-1.html index db967157fb9..21fe6a0d573 100644 --- a/packages/geoview-core/public/templates/raw-feature-info-1.html +++ b/packages/geoview-core/public/templates/raw-feature-info-1.html @@ -104,10 +104,46 @@

1. Basic Map

Top 'layerId': '0' } ] + }, + { + 'geoviewLayerId': 'geojsonLYR1', + 'geoviewLayerName': { 'en': 'GeoJSON Sample' }, + 'metadataAccessPath': { 'en': './geojson/metadata.json' }, + 'geoviewLayerType': 'GeoJSON', + 'listOfLayerEntryConfig': [ + { + 'layerId': 'polygons.json', + 'layerName': { 'en': 'Polygons' }, + 'layerFilter': 'creationDate >= date \'2020/02/15\'' + }, + { + 'layerId': 'lines.json', + 'layerName': { 'en': 'Lines' }, + 'layerFilter': 'creationDate >= date \'2020-05-28T12:00:00-05:00\'' + }, + { + 'entryType': 'group', + 'layerId': 'point-feature-group', + 'layerName': { 'en': 'point-feature-group' }, + 'listOfLayerEntryConfig': [ + { + 'layerId': 'icon_points.json', + 'layerName': { 'en': 'Icons' }, + 'initialSettings': { 'visible': 'yes' }, + 'layerFilter': 'creationDate >= date \'2020-01-14T12:00:01-05:00\'' + }, + { + 'layerId': 'points.json', + 'layerName': { 'en': 'Points' }, + 'layerFilter': 'creationDate >= date \'2019-02-15T22:00:00Z\'' + } + ] + } + ] } ] }, - 'theme': 'light', + 'theme': 'royal', 'navBar': ['zoom', 'fullscreen', 'home', 'location', 'export'], 'components': ['north-arrow', 'overview-map'], 'corePackages': ['footer-panel'], @@ -116,102 +152,7 @@

1. Basic Map

Top }">
-
- -
1. Basic MapTop 'theme': 'royal', 'suportedLanguages': ['en'] }" - >
+ > -->
Click on a layer on the map
@@ -319,31 +260,32 @@

1. Basic Map

Top console.log('api is ready'); // import react and api from the core - const { createRoot, api } = cgpv; + + // const { createRoot, api } = cgpv; - cgpv.api.event.on( - cgpv.api.eventNames.GET_FEATURE_INFO.ALL_QUERIES_DONE, - (payload) => { - const { resultSets } = payload; - const newDetails = []; + // cgpv.api.event.on( + // cgpv.api.eventNames.GET_FEATURE_INFO.ALL_QUERIES_DONE, + // (payload) => { + // const { resultSets } = payload; + // const newDetails = []; - Object.keys(resultSets).forEach((layerPath) => { - const layerName = cgpv.api.utilities.getLocalizedValue(api.maps['LYR2'].layer.registeredLayers[layerPath].layerName, 'LYR2'); - const features = resultSets[layerPath]?.data; - if (features?.length && features?.length > 0) { - newDetails.push({ layerPath, layerName, features }); - } - }); + // Object.keys(resultSets).forEach((layerPath) => { + // const layerName = cgpv.api.utilities.getLocalizedValue(api.maps['LYR2'].layer.registeredLayers[layerPath].layerName, 'LYR2'); + // const features = resultSets[layerPath]?.data; + // if (features?.length && features?.length > 0) { + // newDetails.push({ layerPath, layerName, features }); + // } + // }); - // detailsResult has React Element type - const detailsResult = api.maps['LYR2'].detailsFooter.createDetailsFooter('LYR2', newDetails); + // // detailsResult has React Element type + // const detailsResult = api.maps['LYR2'].detailsFooter.createDetailsFooter('LYR2', newDetails); - const root = createRoot(document.getElementById("resultMap")); - root.render(detailsResult); + // const root = createRoot(document.getElementById("resultMap")); + // root.render(detailsResult); - }, - 'LYR2/$FeatureInfoLayerSet$' - ); + // }, + // 'LYR2/$FeatureInfoLayerSet$' + // ); //create snippets createConfigSnippet(); diff --git a/packages/geoview-core/src/core/components/details-1/details-1.styles.ts b/packages/geoview-core/src/core/components/details-1/details-1.styles.ts new file mode 100644 index 00000000000..ddb67dd8916 --- /dev/null +++ b/packages/geoview-core/src/core/components/details-1/details-1.styles.ts @@ -0,0 +1,85 @@ +import { Theme } from '@mui/material/styles'; + +export const getSxClasses = (theme: Theme) => ({ + detailsContainer: { + background: theme.footerPanel.contentBg, + boxShadow: theme.footerPanel.contentShadow, + padding: '20px', + display: 'flex', + flexDirection: 'column', + }, + footerTopPanleSecondary: { + font: theme.footerPanel.chooseLayerFont, + }, + panelHeaders: { + font: theme.footerPanel.titleFont, + marginBottom: '20px', + }, + layerListPaper: { + marginBottom: '1rem', + cursor: 'pointer', + textOverflow: 'ellipsis', + }, + listItemIcon: { + color: theme.palette.primary.main, + background: theme.footerPanel.contentBg, + }, + layerNamePrimary: { + font: theme.footerPanel.titleFont, + marginLeft: '10px', + }, + list: { + color: 'text.primary', + marginLeft: '1rem', + width: '100%', + paddingRight: '2rem', + }, + rightPanleContainer: { + border: `2px solid ${theme.palette.primary.main}`, + borderRadius: '5px', + marginRight: '20px', + backgroundColor: theme.palette.common.white, + }, + rightPanelBtnHolder: { + marginTop: '20px', + marginBottom: '9px', + boxShadow: '0px 12px 9px -13px #E0E0E0', + }, + itemText: { + fontSize: 14, + noWrap: true, + '& .MuiListItemText-primary': { + font: theme.footerPanel.titleFont, + }, + '& .MuiListItemText-secondary': { + font: theme.footerPanel.layerSecondaryTitleFont, + color: theme.palette.common.black, + }, + }, + featureInfoListContainer: { + paddingLeft: '25px', + paddingRight: '25px', + paddingBottom: '25px', + height: '410px', + overflow: 'scroll', + }, + featureInfoSingleImage: { + width: '35px', + height: '35px', + marginRight: '10px', + }, + selectFeatureCheckbox: { + color: theme.palette.primary.main, + '&.Mui-checked': { + color: theme.palette.primary.main, + }, + }, + featureInfoItemValue: { + fontSize: '16px', + marginRight: 0, + marginTop: '5px', + wordBreak: 'break-word', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, +}); diff --git a/packages/geoview-core/src/core/components/details-1/feature-info-new.tsx b/packages/geoview-core/src/core/components/details-1/feature-info-new.tsx index 67f2609c6cd..da5001bf6df 100644 --- a/packages/geoview-core/src/core/components/details-1/feature-info-new.tsx +++ b/packages/geoview-core/src/core/components/details-1/feature-info-new.tsx @@ -1,5 +1,6 @@ /* eslint-disable react/require-default-props */ import React, { MutableRefObject, useEffect, useState } from 'react'; +import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'react-i18next'; import { getUid } from 'ol/util'; import { List, ListItem, ListItemText, ZoomInSearchIcon, Tooltip, IconButton, Checkbox, Paper } from '@/ui'; @@ -14,20 +15,7 @@ import { } from '@/api/events/payloads'; import { EVENT_NAMES } from '@/api/events/event-types'; import { FeatureInfoTable } from './feature-info-table'; - -const sxClasses = { - itemText: { - fontSize: 14, - noWrap: true, - '& .MuiListItemText-primary': { - font: 'normal normal 600 20px/27px Roboto, Helvetica, Arial, sans-serif', - }, - '& .MuiListItemText-secondary': { - font: 'normal normal 16px/22px Roboto, Helvetica, Arial, sans-serif', - color: '#000000', - }, - }, -}; +import { getSxClasses } from './details-1.styles'; export interface TypeFeatureInfoProps { mapId: string; @@ -57,6 +45,7 @@ export function FeatureInfo({ clearAllCheckboxes, }: TypeFeatureInfoProps): JSX.Element { const { t } = useTranslation(); + const theme = useTheme(); const [checked, setChecked] = useState(false); const [checkedFeatures, setCheckedFeatures] = useState([]); const feature = features[currentFeatureIndex]; @@ -64,6 +53,8 @@ export function FeatureInfo({ const featureIconSrc = feature.featureIcon.toDataURL(); const nameFieldValue = feature.fieldInfo[feature.nameField!]!.value as string; + const sxClasses = getSxClasses(theme); + const featureInfoList: TypeFieldEntry[] = Object.keys(feature.fieldInfo).map((fieldName) => { return { fieldKey: feature.fieldInfo[fieldName]!.fieldKey, @@ -145,14 +136,15 @@ export function FeatureInfo({ return ( - + <> {t('details.keepFeatureSelected')} - handleSelect(e)} checked={checked} /> + handleSelect(e)} checked={checked} sx={sxClasses.selectFeatureCheckbox} /> handleZoomIn(e)}> @@ -163,12 +155,12 @@ export function FeatureInfo({ } > - {nameFieldValue} + {nameFieldValue} - + diff --git a/packages/geoview-core/src/core/components/details-1/feature-info-table.tsx b/packages/geoview-core/src/core/components/details-1/feature-info-table.tsx index 19be2e141ea..82dc79bc5ee 100644 --- a/packages/geoview-core/src/core/components/details-1/feature-info-table.tsx +++ b/packages/geoview-core/src/core/components/details-1/feature-info-table.tsx @@ -1,35 +1,19 @@ import React, { useState } from 'react'; +import { useTheme } from '@mui/material/styles'; import linkifyHtml from 'linkify-html'; import { useTranslation } from 'react-i18next'; import { Table, TableBody, TableCell, TableContainer, TableRow } from '@mui/material'; import { TypeFieldEntry } from '@/api/events/payloads'; import { LightboxImg, LightBoxSlides } from '../lightbox/lightbox'; import { CardMedia, Box } from '@/ui'; - import { isImage, stringify, generateId, sanitizeHtmlContent } from '../../utils/utilities'; import { HtmlToReact } from '../../containers/html-to-react'; +import { getSxClasses } from './details-1.styles'; interface FeatureInfoTableProps { featureInfoList: TypeFieldEntry[]; } -const getSxClasses = (isOdd = true, isFeatureImage = false) => { - return { - featureInfoItemValue: { - fontSize: '0.85em', - marginRight: 0, - marginTop: '5px', - wordBreak: 'break-word', - overflow: 'hidden', - textOverflow: 'ellipsis', - ...(isFeatureImage && { cursor: 'pointer' }), - }, - featureTableRow: { - ...(isOdd && { backgroundColor: '#F1F2F5' }), - }, - }; -}; - /** * Feature info table that creates a table keys/values of the given feature info * @@ -38,10 +22,13 @@ const getSxClasses = (isOdd = true, isFeatureImage = false) => { */ export function FeatureInfoTable({ featureInfoList }: FeatureInfoTableProps): JSX.Element { const { t } = useTranslation(); + const theme = useTheme(); const [isLightBoxOpen, setIsLightBoxOpen] = useState(false); const [slides, setSlides] = useState([]); const [slidesIndex, setSlidesIndex] = useState(0); + const sxClasses = getSxClasses(theme); + // linkify options const linkifyOptions = { attributes: { @@ -69,7 +56,7 @@ export function FeatureInfoTable({ featureInfoList }: FeatureInfoTableProps): JS element = ( + ); @@ -108,7 +95,7 @@ export function FeatureInfoTable({ featureInfoList }: FeatureInfoTableProps): JS } return ( - + {isLightBoxOpen && ( - + {featureInfoList.map((featureInfoItem, index) => ( // eslint-disable-next-line react/no-array-index-key - 0).featureTableRow}> + 0 ? '#F1F2F5' : '' }}> {featureInfoItem.alias} @@ -146,6 +134,7 @@ export function FeatureInfoTable({ featureInfoList }: FeatureInfoTableProps): JS sx={{ p: '5px', textAlign: 'start', + fontSize: '16px', }} > {setFeatureItem(featureInfoItem)} diff --git a/packages/geoview-core/src/core/components/details-1/layers-list-footer.tsx b/packages/geoview-core/src/core/components/details-1/layers-list-footer.tsx index 10ddc6491bc..9d94e27ae6d 100644 --- a/packages/geoview-core/src/core/components/details-1/layers-list-footer.tsx +++ b/packages/geoview-core/src/core/components/details-1/layers-list-footer.tsx @@ -1,20 +1,23 @@ /* eslint-disable react/require-default-props */ -import React, { useEffect, useState, useRef } from 'react'; +import React, { useEffect, useState, useRef, useCallback } from 'react'; +import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'react-i18next'; import { getUid } from 'ol/util'; import { ListItemText, ListItem, + ListItemButton, List, Tooltip, IconButton, Grid, Paper, Typography, - KeyboardArrowRightIcon, ArrowForwardIosOutlinedIcon, ArrowBackIosOutlinedIcon, LayersClearOutlinedIcon, + ChevronRightIcon, + Box, } from '@/ui'; import { TypeArrayOfLayerData, TypeLayerData } from './details'; import { FeatureInfo } from './feature-info-new'; @@ -29,26 +32,8 @@ import { TypeArrayOfFeatureInfoEntries, TypeGeometry, } from '@/api/events/payloads'; +import { getSxClasses } from './details-1.styles'; -const getSxClasses = (isPanelHeaders = false) => { - return { - footerTopPanleSecondary: { - font: 'normal normal normal 16px/24px Roboto, Helvetica, Arial, sans-serif', - }, - panelHeaders: { - font: 'normal normal normal 600 22px/30px Roboto, Helvetica, Arial, sans-serif', - marginBottom: '20px', - ...(isPanelHeaders && { paddingLeft: '20px' }), - }, - panelHeaderSelectedFeature: { - font: 'normal normal normal 600 22px/30px Roboto, Helvetica, Arial, sans-serif', - marginBottom: '20px', - }, - layerNamePrimary: { - font: 'normal normal normal 600 20px/27px Roboto, Helvetica, Arial, sans-serif', - }, - }; -}; interface TypeLayersListProps { arrayOfLayerData: TypeArrayOfLayerData; mapId: string; @@ -62,13 +47,16 @@ interface TypeLayersListProps { */ export function LayersListFooter(props: TypeLayersListProps): JSX.Element { const { arrayOfLayerData, mapId } = props; - const selectedFeatures = useRef([]); const { t } = useTranslation(); + const theme = useTheme(); + const selectedFeatures = useRef([]); const [layerDataInfo, setLayerDataInfo] = useState(null); const [currentFeatureIndex, setCurrentFeatureIndex] = useState(0); const [isClearAllCheckboxes, setIsClearAllCheckboxes] = useState(false); const [disableClearAllBtn, setDisableClearAllBtn] = useState(false); + const sxClasses = getSxClasses(theme); + const highlightCallbackFunction = (payload: PayloadBaseClass) => { if (payloadIsAFeatureHighlight(payload)) { selectedFeatures.current.push(getUid(payload.feature.geometry)); @@ -143,76 +131,76 @@ export function LayersListFooter(props: TypeLayersListProps): JSX.Element { } }, [arrayOfLayerData]); - return ( - -
- {layerDataInfo === null ? ( - - {t('details.selectVisbleLayer')} - - ) : ( - - {t('details.mainDescription')} - - )} -
- {layerDataInfo !== null && ( - - {/* ================= LEFT PANEL ================= */} + const renderLayerList = useCallback(() => { + return ( + + {arrayOfLayerData.map((layerData) => { + const isSelectedBorder = layerData.layerPath === layerDataInfo?.layerPath; + const numOfFeatures = layerData.features.length; + + return ( + + + + + } + > + { + setLayerDataInfo(layerData); + setCurrentFeatureIndex(0); + }} + sx={{ height: '67px' }} + > + + 1 ? 's' : ''}`} + /> + + + + + ); + })} + + ); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [layerDataInfo]); - - - {t('details.availableLayers')} + return ( + + +
+ {layerDataInfo === null && ( + + {t('details.selectVisbleLayer')} - - - {arrayOfLayerData.map((layerData) => { - const isSelectedBorder = layerData.layerPath === layerDataInfo?.layerPath; - const numOfFeatures = layerData.features.length; + )} +
+ {layerDataInfo !== null && ( + + {/* ================= LEFT PANEL ================= */} - return ( - { - setLayerDataInfo(layerData); - setCurrentFeatureIndex(0); - }} - key={layerData.layerPath} - sx={{ - padding: '8px 40px 8px 16px', - border: isSelectedBorder ? '2px solid #515BA5' : 'none', - borderRadius: isSelectedBorder ? '5px' : 'none', - cursor: 'pointer', - height: '50px', - }} - secondaryAction={ - - - - } - > - - 1 ? 's' : ''}`} - /> - - - ); - })} - - - - {/* ================= RIGHT PANEL ================= */} - - <> - - {t('details.selectedFeature')} + + + {t('details.availableLayers')} -
- + {renderLayerList()} + + {/* ================= RIGHT PANEL ================= */} + +
+ -
+
Feature {currentFeatureIndex + 1} of {layerDataInfo?.features.length}
- + - - )} - + )} + + ); } diff --git a/packages/geoview-core/src/core/types/material-ui.d.ts b/packages/geoview-core/src/core/types/material-ui.d.ts index 84f9e9f37c5..de20c4b351a 100644 --- a/packages/geoview-core/src/core/types/material-ui.d.ts +++ b/packages/geoview-core/src/core/types/material-ui.d.ts @@ -76,7 +76,12 @@ declare module '@mui/material/styles' { contentShadow: string; titleFont: string; layerTitleFont: string; + layerSecondaryTitleFont: string; highlightColor: string; + featureNumbersFont: string; + featureKeyFont: string; + featureValueFont: string; + chooseLayerFont: string; }; } interface Theme { @@ -132,7 +137,12 @@ declare module '@mui/material/styles' { contentShadow: string; titleFont: string; layerTitleFont: string; + layerSecondaryTitleFont: string; highlightColor: string; + featureNumbersFont: string; + featureKeyFont: string; + featureValueFont: string; + chooseLayerFont: string; }; } } diff --git a/packages/geoview-core/src/ui/style/default.ts b/packages/geoview-core/src/ui/style/default.ts index 7dcbe21ab19..2c5a5742d7e 100644 --- a/packages/geoview-core/src/ui/style/default.ts +++ b/packages/geoview-core/src/ui/style/default.ts @@ -200,8 +200,13 @@ export const defaultThemeOptions: ThemeOptions = { footerPanel: { contentBg: '#F1F2F5 0% 0% no-repeat padding-box', contentShadow: 'inset 0px 3px 6px #00000029', - titleFont: 'normal normal 600 20px/27px Open Sans', - layerTitleFont: 'normal normal 600 18px/24px Open Sans', + titleFont: `normal normal 600 20px/27px ${font}`, + layerTitleFont: `normal normal 600 18px/24px ${font}`, + layerSecondaryTitleFont: `normal normal normal 16px/22px ${font}`, highlightColor: '#515BA5', + featureNumbersFont: `normal normal normal 16px/22px ${font}`, + featureKeyFont: `normal normal medium 16px/19px ${font}`, + featureValueFont: `normal normal normal 16px/19px ${font}`, + chooseLayerFont: `normal normal 600 16px/24px ${font}`, }, };