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

Improving infos.tsx

This commit is contained in:
Eric van der Vlist 2023-01-16 18:25:38 +01:00
parent ee000862f8
commit 3153ee308d
1 changed files with 48 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { Grid, IconButton } from '@suid/material'; import { Button, Grid, IconButton } from '@suid/material';
import { Feature } from 'ol'; import { Feature } from 'ol';
import { Geometry } from 'ol/geom'; import { Geometry } from 'ol/geom';
import { getLength } from 'ol/sphere'; import { getLength } from 'ol/sphere';
@ -6,6 +6,9 @@ import { Component, createSignal, For, Show } from 'solid-js';
import { useI18n } from '@solid-primitives/i18n'; import { useI18n } from '@solid-primitives/i18n';
import EditIcon from '@suid/icons-material/Edit'; import EditIcon from '@suid/icons-material/Edit';
import TravelExploreIcon from '@suid/icons-material/TravelExplore'; 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 { Paper, Stack } from '@suid/material';
import styled from '@suid/material/styles/styled'; import styled from '@suid/material/styles/styled';
import Dialog from '../dialog'; import Dialog from '../dialog';
@ -171,13 +174,17 @@ const Infos: Component<{}> = (props) => {
${feature.get('name') || ''}`} ${feature.get('name') || ''}`}
</div> </div>
<div> <div>
<IconButton>
<AddLocationAltIcon />
</IconButton>
<IconButton <IconButton
onClick={async () => { onClick={async () => {
await Browser.open({ await Browser.open({
url: `https://www.qwant.com/?q=${encodeURIComponent(`${feature.get( url: `https://www.qwant.com/?q=${encodeURIComponent(
'class' feature.get('class') +
)} ' ' +
${feature.get('name') || ''}`)}&t=web`, feature.get('name') || ''
)}&t=web`,
}); });
}} }}
> >
@ -196,9 +203,42 @@ const Infos: Component<{}> = (props) => {
</> </>
<For each={Object.keys(feature.getProperties())}> <For each={Object.keys(feature.getProperties())}>
{(key: string) => ( {(key: string) => (
<div>{`${key}: ${ <div>
<Show
when={key === 'website'}
fallback={
<Show
when={key === 'phone'}
fallback={`${key}: ${
feature.getProperties()[key] feature.getProperties()[key]
}`}</div> }`}
>
<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> </For>
</> </>