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

Improved version of OSM notes shown as chat messages.

This commit is contained in:
Eric van der Vlist 2022-10-10 22:08:50 +02:00
parent 6c0d3bfb11
commit 5a7402313e
2 changed files with 115 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/map/LocationInfo.tsx
View File

@ -79,7 +79,7 @@ const LocationInfo: React.FC<{}> = () => {
setNotes(undefined); setNotes(undefined);
const metresPerDegree = const metresPerDegree =
111111 * Math.cos((scope.center.lat * Math.PI) / 180); 111111 * Math.cos((scope.center.lat * Math.PI) / 180);
const deltaDegrees = 1000 / metresPerDegree; const deltaDegrees = 2000 / metresPerDegree;
const response = await fetch( const response = await fetch(
`https://api.openstreetmap.org/api/0.6/notes.json?bbox=${ `https://api.openstreetmap.org/api/0.6/notes.json?bbox=${
scope.center.lon - deltaDegrees scope.center.lon - deltaDegrees
@ -122,6 +122,31 @@ const LocationInfo: React.FC<{}> = () => {
setNoteIndex(index); setNoteIndex(index);
}; };
const AvatarForFeature: React.FC<{ feature: any; as: any }> = (props: {
feature: any;
as: any;
}) => {
const distance = roughDistance(scope.center, {
lon: props.feature.geometry.coordinates[0],
lat: props.feature.geometry.coordinates[1],
});
const distDark = (255 * distance) / 3000;
const distLight = 1 - distDark;
return (
<Avatar
src={AvatarInitial.initialAvatar({
size: 100,
initials: Math.round(distance),
initial_fg: `rgb(${distLight},0,${distLight}`,
initial_bg: `rgb(0,${distDark}, 0`,
initial_size: 33, // Defaults to height / 2
initial_weight: 1000,
initial_font_family: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
})}
/>
);
};
return ( return (
<IonModal <IonModal
trigger='information-request' trigger='information-request'
@ -178,9 +203,10 @@ const LocationInfo: React.FC<{}> = () => {
{notes === undefined && <IonSpinner name='lines' />} {notes === undefined && <IonSpinner name='lines' />}
</IonLabel> </IonLabel>
</IonListHeader> </IonListHeader>
{notes !== undefined && ( {notes !== undefined && notes.features.length > 0 && (
<MainContainer> <div style={{ position: 'relative' }}>
<Sidebar position='left'> <MainContainer responsive>
<Sidebar position='left' id='chat-sidebar'>
<ConversationList> <ConversationList>
{notes.features!.map((feature: any, index: number) => ( {notes.features!.map((feature: any, index: number) => (
<Conversation <Conversation
@ -194,23 +220,7 @@ const LocationInfo: React.FC<{}> = () => {
)} )}
info={feature.properties.status} info={feature.properties.status}
> >
<Avatar <AvatarForFeature feature={feature} as={Avatar} />
src={AvatarInitial.initialAvatar({
size: 100,
initials: Math.round(
roughDistance(scope.center, {
lon: feature.geometry.coordinates[0],
lat: feature.geometry.coordinates[1],
})
),
initial_fg: '#888888',
initial_bg: '#f4f6f7',
initial_size: 25, // Defaults to height / 2
initial_weight: 500,
initial_font_family:
"'Lato', 'Lato-Regular', 'Helvetica Neue'",
})}
/>
</Conversation> </Conversation>
))} ))}
</ConversationList> </ConversationList>
@ -220,7 +230,6 @@ const LocationInfo: React.FC<{}> = () => {
<ConversationHeader.Content> <ConversationHeader.Content>
<span <span
style={{ style={{
color: '#ec1212',
alignSelf: 'flex-center', alignSelf: 'flex-center',
}} }}
> >
@ -234,30 +243,9 @@ const LocationInfo: React.FC<{}> = () => {
)} )}
</span> </span>
</ConversationHeader.Content> </ConversationHeader.Content>
<Avatar <AvatarForFeature
src={AvatarInitial.initialAvatar({ feature={notes.features[noteIndex]}
size: 100, as={Avatar}
initials: Math.round(
roughDistance(scope.center, {
lon: notes.features[noteIndex].geometry
.coordinates[0],
lat: notes.features[noteIndex].geometry
.coordinates[1],
})
),
initial_fg: '#888888',
initial_bg: '#f4f6f7',
initial_size: 25, // Defaults to height / 2
initial_weight: 500,
initial_font_family:
"'Lato', 'Lato-Regular', 'Helvetica Neue'",
})}
name={i18n.locationInfo!.at!(
roughDistance(scope.center, {
lon: notes.features[noteIndex].geometry.coordinates[0],
lat: notes.features[noteIndex].geometry.coordinates[1],
})
)}
/> />
</ConversationHeader> </ConversationHeader>
<MessageList> <MessageList>
@ -277,14 +265,17 @@ const LocationInfo: React.FC<{}> = () => {
sender={comment.user} sender={comment.user}
sentTime={comment.date} sentTime={comment.date}
/> />
<Message.Footer sentTime={comment.action} />
<Avatar <Avatar
src={AvatarInitial.initialAvatar({ src={AvatarInitial.initialAvatar({
size: 100, size: 100,
initials: comment.user ? comment.user : '??', initials: comment.user ? comment.user : '??',
initial_fg: '#888888', initial_fg: comment.user
initial_bg: '#f4f6f7', ? 'darkblue'
: 'lightgrey',
initial_bg: comment.user ? 'ivory' : 'darkred',
initial_size: 0, // Defaults to height / 2 initial_size: 0, // Defaults to height / 2
initial_weight: 500, initial_weight: 1000,
initial_font_family: initial_font_family:
"'Lato', 'Lato-Regular', 'Helvetica Neue'", "'Lato', 'Lato-Regular', 'Helvetica Neue'",
})} })}
@ -296,6 +287,7 @@ const LocationInfo: React.FC<{}> = () => {
</MessageList> </MessageList>
</ChatContainer> </ChatContainer>
</MainContainer> </MainContainer>
</div>
)} )}
</IonList> </IonList>
</IonContent> </IonContent>

6
src/theme/map.css
View File

@ -91,3 +91,9 @@ ion-modal ion-content {
.hidden { .hidden {
display: none; display: none;
} }
@media (max-width: 576px) {
#chat-sidebar {
display: block;
}
}