{city.country}
|
+
{city.latitude}, {city.longitude}
+
|
{city.population ? (
- {city.population}
+ {formatter.format(city.population)}
) : (
{t('modal.table.population.fallback')}
)}
diff --git a/src/components/Dashboard/Tiles/Widgets/Inputs/StaticDraggableList.tsx b/src/components/Dashboard/Tiles/Widgets/Inputs/StaticDraggableList.tsx
index 7e6600722..8df503e25 100644
--- a/src/components/Dashboard/Tiles/Widgets/Inputs/StaticDraggableList.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/Inputs/StaticDraggableList.tsx
@@ -1,8 +1,9 @@
-import { Collapse, createStyles, Flex, Stack, Text } from '@mantine/core';
+import { Collapse, Flex, Stack, Text, createStyles } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { IconChevronDown, IconGripVertical } from '@tabler/icons-react';
import { Reorder, useDragControls } from 'framer-motion';
import { FC, ReactNode, useEffect, useRef } from 'react';
+
import { IDraggableListInputValue } from '../../../../../widgets/widgets';
const useStyles = createStyles((theme) => ({
@@ -64,10 +65,10 @@ export const StaticDraggableList: FC = (props) => {
as="div"
>
{props.value.map((item) => (
-
- {props.children?.[item.key]}
-
- ))}
+
+ {props.children?.[item.key]}
+
+ ))}
);
diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
index ecc817d13..0d7cbcfb4 100644
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
@@ -18,10 +18,11 @@ import { ContextModalProps } from '@mantine/modals';
import { IconAlertTriangle, IconPlaylistX, IconPlus } from '@tabler/icons-react';
import { Trans, useTranslation } from 'next-i18next';
import { FC, useState } from 'react';
+
+import { InfoCard } from '../../../InfoCard/InfoCard';
import { useConfigContext } from '../../../../config/provider';
import { useConfigStore } from '../../../../config/store';
import { mapObject } from '../../../../tools/client/objects';
-import { useColorTheme } from '../../../../tools/color';
import Widgets from '../../../../widgets';
import type { IDraggableListInputValue, IWidgetOptionValue } from '../../../../widgets/widgets';
import { IWidget } from '../../../../widgets/widgets';
@@ -47,7 +48,7 @@ export const WidgetsEditModal = ({
const [moduleProperties, setModuleProperties] = useState(innerProps.options);
const items = Object.entries(innerProps.widgetOptions ?? {}) as [
string,
- IntegrationOptionsValueType
+ IntegrationOptionsValueType,
][];
// Find the Key in the "Widgets" Object that matches the widgetId
@@ -134,70 +135,99 @@ const WidgetOptionTypeSwitch: FC<{
handleChange: (key: string, value: IntegrationOptionsValueType) => void;
}> = ({ option, widgetId, propName: key, value, handleChange }) => {
const { t } = useTranslation([`modules/${widgetId}`, 'common']);
- const { primaryColor } = useColorTheme();
+ const info = option.info ?? false;
+ const link = option.infoLink ?? undefined;
switch (option.type) {
case 'switch':
return (
- handleChange(key, ev.currentTarget.checked)}
- />
+
+ handleChange(key, ev.currentTarget.checked)}
+ {...option.inputProps}
+ />
+ {info && }
+
);
case 'text':
return (
- handleChange(key, ev.currentTarget.value)}
- />
+
+
+ {t(`descriptor.settings.${key}.label`)}
+ {info && }
+
+ handleChange(key, ev.currentTarget.value)}
+ {...option.inputProps}
+ />
+
);
case 'multi-select':
return (
- handleChange(key, v)}
- />
+
+
+ {t(`descriptor.settings.${key}.label`)}
+ {info && }
+
+ handleChange(key, v)}
+ withinPortal
+ {...option.inputProps}
+ />
+
);
case 'select':
return (
- |