Indentation ?

src/components/infos/Infos.tsx

@@ -1,17 +1,18 @@
-import { Grid, IconButton } from '@suid/material';
-import { Feature } from 'ol';
-import { Geometry } from 'ol/geom';
-import { Component, createSignal, For, Show } from 'solid-js';
-import { useI18n } from '@solid-primitives/i18n';
-import EditIcon from '@suid/icons-material/Edit';
-import { Paper, Stack } from '@suid/material';
-import styled from '@suid/material/styles/styled';
-import Dialog from '../dialog';
+import { Grid, IconButton } from "@suid/material";
+import { Feature } from "ol";
+import { Geometry } from "ol/geom";
+import { getLength } from "ol/sphere";
+import { Component, createSignal, For, Show } from "solid-js";
+import { useI18n } from "@solid-primitives/i18n";
+import EditIcon from "@suid/icons-material/Edit";
+import { Paper, Stack } from "@suid/material";
+import styled from "@suid/material/styles/styled";
+import Dialog from "../dialog";
 
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   padding: theme.spacing(1),
-  textAlign: 'center',
+  textAlign: "center",
   color: theme.palette.text.secondary,
 }));
 
@@ -23,20 +24,24 @@ export const clickHandler = (event: any) => {
   const pixel = [event.originalEvent.x, event.originalEvent.y];
   const features = event.map.getFeaturesAtPixel(pixel, { hitTolerance: 30 });
   console.log({
-    caller: '<Infos/> / clickHandler',
+    caller: "<Infos/> / clickHandler",
     event,
     features,
   });
-  selectedFeatures.map((feature) => feature.set('isSelected', false));
+  selectedFeatures.map((feature) => feature.set("isSelected", false));
   selectedFeatures = features;
   features.map((feature: Feature<Geometry>) => {
-    const id = feature.get('id');
-    feature.set('isSelected', true);
+    const id = feature.get("id");
+    feature.set("isSelected", true);
+    //    const geometry = feature.getGeometry();
+    //    const length = getLength(geometry, { projection: "EPSG:4326" });
     console.log({
-      caller: '<Infos/> / clickHandler / feature',
+      caller: "<Infos/> / clickHandler / feature",
       event,
       feature,
       id,
+      //      geometry,
+      //      length,
     });
   });
   if (features.length > 0) {
@@ -50,33 +55,54 @@ const Infos: Component<{}> = (props) => {
     setOpen(false);
   };
 
+  const formatLength = (length: number) => {
+    if (length > 1000) {
+      const l = length / 1000;
+      return ` ${l.toLocaleString(undefined, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      })} km`;
+    }
+    return ` ${length.toLocaleString(undefined, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    })} m`;
+  };
+
   return (
-    <Dialog closeHandler={handleClick} open={open()} title={t('nearby')}>
+    <Dialog closeHandler={handleClick} open={open()} title={t("nearby")}>
       <Stack
         spacing={1}
-        direction='column'
-        alignItems='center'
-        sx={{ width: 'calc(100% - 5px)' }}
+        direction="column"
+        alignItems="center"
+        sx={{ width: "calc(100% - 5px)" }}
       >
         <For each={selectedFeatures}>
-          {(feature) => (
-            <Item sx={{ width: 'calc(100% - 1px)' }}>
-              <Grid container spacing={2} alignItems='center'>
-                <Grid item xs={11}>
-                  {feature.get('getTitle')
-                    ? feature.get('getTitle')()
-                    : t(feature.get('type'))}
+          {(feature) => {
+            const geometry = feature.getGeometry();
+            const length = geometry
+              ? getLength(geometry, { projection: "EPSG:4326" })
+              : undefined;
+            return (
+              <Item sx={{ width: "calc(100% - 1px)" }}>
+                <Grid container spacing={2} alignItems="center">
+                  <Grid item xs={11}>
+                    {feature.get("getTitle")
+                      ? feature.get("getTitle")()
+                      : t(feature.get("type"))}
+                    {length ? formatLength(length) : ""}
+                  </Grid>
+                  <Grid item xs={1} sx={{ paddingLeft: "0px" }}>
+                    <Show when={feature.get("edit")}>
+                      <IconButton onClick={feature.get("edit")}>
+                        <EditIcon />
+                      </IconButton>
+                    </Show>
+                  </Grid>
                 </Grid>
-                <Grid item xs={1} sx={{ paddingLeft: '0px' }}>
-                  <Show when={feature.get('edit')}>
-                    <IconButton onClick={feature.get('edit')}>
-                      <EditIcon />
-                    </IconButton>
-                  </Show>
-                </Grid>
-              </Grid>
-            </Item>
-          )}
+              </Item>
+            );
+          }}
         </For>
       </Stack>
     </Dialog>