dyomedea/src/components/infos/Infos.tsx

import { Button, 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 TravelExploreIcon from '@suid/icons-material/TravelExplore';
import AddLocationAltIcon from '@suid/icons-material/AddLocationAlt';
import OpenInNewIcon from '@suid/icons-material/OpenInNew';
import CallIcon from '@suid/icons-material/Call';
import { Paper, Stack } from '@suid/material';
import styled from '@suid/material/styles/styled';
import Dialog from '../dialog';
import Tree from '../tree';
import { GpxViewer } from '../gpx';
import { Browser } from '@capacitor/browser';

const Item = styled(Paper)(({ theme }) => ({
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary,
}));

const [open, setOpen] = createSignal(false);

let selectedFeatures: Feature[] = [];
let vectorLayerFeatures: Feature[] = [];
let hierarchy: any = {};

const level2Key = (feature: Feature) =>
  feature.get('context').wptId ||
  feature.get('context').rteId ||
  feature.get('context').trkId;

export const clickHandler = (event: any) => {
  hierarchy = {};
  const pixel = [event.originalEvent.x, event.originalEvent.y];
  const features = event.map.getFeaturesAtPixel(pixel, { hitTolerance: 30 });
  console.log({ caller: 'Infos.tsx / clickHandler', features, event });
  selectedFeatures.map((feature) => {
    if (feature.set) {
      feature.set('isSelected', false);
    }
  });
  selectedFeatures = features.filter((feature: any) => feature.get('context'));
  vectorLayerFeatures = features.filter(
    (feature: any) => !feature.get('context')
  );

  selectedFeatures.sort((f1: Feature, f2: Feature) => {
    const ctx1 = f1.get('context');
    const ctx2 = f2.get('context');
    if (ctx1.gpxId < ctx2.gpxId) {
      return 1;
    } else if (ctx1.gpxId > ctx2.gpxId) {
      return -1;
    }
    const level2Key1 = level2Key(f1);
    const level2Key2 = level2Key(f2);
    if (level2Key1 < level2Key2) {
      return -1;
    }
    if (level2Key1 > level2Key2) {
      return 1;
    }
    if (ctx1.trksegId < ctx2.trksegId) {
      return -1;
    }
    if (ctx1.trksegId > ctx2.trksegId) {
      return 1;
    }
    return 0;
  });
  selectedFeatures.map((feature: Feature<Geometry>) => {
    const gpxId = feature.get('context').gpxId;
    if (!hierarchy.hasOwnProperty(gpxId)) {
      hierarchy[gpxId] = { type: 'gpx' };
    }
    const l2key = level2Key(feature);
    if (!hierarchy[gpxId].hasOwnProperty(l2key)) {
      hierarchy[gpxId][l2key] = {};
      if (feature.get('type') === 'trkseg') {
        hierarchy[gpxId][l2key].type = 'trk';
      } else {
        hierarchy[gpxId][l2key].type = feature.get('type');
        hierarchy[gpxId][l2key].feature = feature;
      }
    }
    if (feature.get('type') === 'trkseg') {
      const trksegId = feature.get('context').trksegId;
      if (!hierarchy[gpxId][l2key].hasOwnProperty(trksegId)) {
        hierarchy[gpxId][l2key][trksegId] = {
          type: 'trkseg',
          feature,
        };
      }
    }
  });
  console.log({
    caller: '<Infos/> / clickHandler',
    event,
    features,
    hierarchy,
    vectorLayerFeatures,
  });
  selectedFeatures.map((feature: Feature<Geometry>) => {
    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',
      event,
      feature,
      id,
      //      geometry,
      //      length,
    });
  });
  if (selectedFeatures.length > 0 || vectorLayerFeatures.length > 0) {
    setOpen(true);
  }
};

const FeaturesTree: Component<{ featuresHierarchy: any }> = ({
  featuresHierarchy,
}) => {
  return (
    <Tree
      title={featuresHierarchy.type || 'voyages'}
      content={undefined}
      subTree={Object.keys(featuresHierarchy)
        .filter((key: string) => key.startsWith('gpx/'))
        .map((key: string) => (
          <GpxViewer gpxId={key} restrictToHierarchy={featuresHierarchy[key]} />
        ))}
    />
  );
};

const Infos: Component<{}> = (props) => {
  const [t, { add, locale, dict }] = useI18n();
  const handleClick = () => {
    setOpen(false);
  };

  return (
    <Dialog closeHandler={handleClick} open={open()} title={t('nearby')}>
      <Stack
        spacing={1}
        direction='column'
        alignItems='center'
        sx={{ width: 'calc(100% - 5px)' }}
      >
        <Tree
          title='everything'
          content={undefined}
          subTree={
            <>
              <Tree
                title='osm'
                content={undefined}
                subTree={
                  <>
                    <For each={vectorLayerFeatures}>
                      {(feature) => (
                        <Tree
                          title={
                            <>
                              <div>
                                {`${feature.get('class')} 
                                ${feature.get('name') || ''}`}
                              </div>
                              <div>
                                <IconButton>
                                  <AddLocationAltIcon />
                                </IconButton>
                                <IconButton
                                  onClick={async () => {
                                    await Browser.open({
                                      url: `https://www.qwant.com/?q=${encodeURIComponent(
                                        feature.get('class') +
                                          ' ' +
                                          feature.get('name') || ''
                                      )}&t=web`,
                                    });
                                  }}
                                >
                                  <TravelExploreIcon />
                                </IconButton>
                              </div>
                            </>
                          }
                          content={
                            <>
                              <>
                                {console.log({
                                  caller: 'Infos / vector layer feature',
                                  properties: feature.getProperties(),
                                })}
                              </>
                              <For each={Object.keys(feature.getProperties())}>
                                {(key: string) => (
                                  <div>
                                    <Show
                                      when={key === 'website'}
                                      fallback={
                                        <Show
                                          when={key === 'phone'}
                                          fallback={`${key}: ${
                                            feature.getProperties()[key]
                                          }`}
                                        >
                                          <Button
                                            size='small'
                                            startIcon={<CallIcon />}
                                            href={
                                              'tel:' +
                                              feature.getProperties()[key]
                                            }
                                          >
                                            {feature.getProperties()[key]}
                                          </Button>
                                        </Show>
                                      }
                                    >
                                      <Button
                                        size='small'
                                        startIcon={<OpenInNewIcon />}
                                        onClick={async () => {
                                          await Browser.open({
                                            url: feature.getProperties()[key],
                                          });
                                        }}
                                      >
                                        {feature.getProperties()[key]}
                                      </Button>
                                    </Show>
                                  </div>
                                )}
                              </For>
                            </>
                          }
                          subTree={undefined}
                        />
                      )}
                    </For>
                  </>
                }
              />
              <FeaturesTree featuresHierarchy={hierarchy} />
            </>
          }
        />
      </Stack>
    </Dialog>
  );
};

export default Infos;