Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Simplification of <Infos>

This commit is contained in:
Eric van der Vlist 2023-02-03 18:07:18 +01:00
parent 3daa2d11f9
commit 8e519dd862
1 changed files with 33 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/infos/Infos.tsx
View File

@ -1,7 +1,7 @@
import { Button, IconButton } from '@suid/material'; import { Button, IconButton } from '@suid/material';
import { Feature } from 'ol'; import { Feature } from 'ol';
import { Geometry } from 'ol/geom'; import { Geometry } from 'ol/geom';
import { Component, createSignal, For, Show } from 'solid-js'; import { Component, createSignal, For, Match, Show, Switch } from 'solid-js';
import { useI18n } from '@solid-primitives/i18n'; import { useI18n } from '@solid-primitives/i18n';
import TravelExploreIcon from '@suid/icons-material/TravelExplore'; import TravelExploreIcon from '@suid/icons-material/TravelExplore';
import AddLocationAltIcon from '@suid/icons-material/AddLocationAlt'; import AddLocationAltIcon from '@suid/icons-material/AddLocationAlt';
@ -192,9 +192,7 @@ const Infos: Component<{}> = (props) => {
<Tree <Tree
title={ title={
<> <>
<div> <div>{feature.get('name') || ''}</div>
${feature.get('name') || ''}`}
</div>
<div> <div>
<IconButton> <IconButton>
<AddLocationAltIcon /> <AddLocationAltIcon />
@ -203,7 +201,7 @@ const Infos: Component<{}> = (props) => {
onClick={async () => { onClick={async () => {
await Browser.open({ await Browser.open({
url: `https://www.qwant.com/?q=${encodeURIComponent( url: `https://www.qwant.com/?q=${encodeURIComponent(
feature.get('name') || '' feature.get('name') || ''
)}&t=web`, )}&t=web`,
}); });
}} }}
@ -229,40 +227,37 @@ const Infos: Component<{}> = (props) => {
<For each={Object.keys(feature.getProperties())}> <For each={Object.keys(feature.getProperties())}>
{(key: string) => ( {(key: string) => (
<div> <div>
<Show <Switch
when={key === 'website'} fallback={`${key}: ${
fallback={ feature.getProperties()[key]
<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 <Match when={key === 'website'}>
size='small' <Button
startIcon={<OpenInNewIcon />} size='small'
onClick={async () => { startIcon={<OpenInNewIcon />}
await Browser.open({ onClick={async () => {
url: feature.getProperties()[key], await Browser.open({
}); url: feature.getProperties()[key],
}} });
> }}
{feature.getProperties()[key]} >
</Button> {feature.getProperties()[key]}
</Show> </Button>
</Match>
<Match when={key === 'phone'}>
<Button
size='small'
startIcon={<CallIcon />}
href={
'tel:' +
feature.getProperties()[key]
}
>
{feature.getProperties()[key]}
</Button>
</Match>
</Switch>
</div> </div>
)} )}
</For> </For>