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

View File

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

View File

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