Improved version of OSM notes shown as chat messages.
This commit is contained in:
parent
6c0d3bfb11
commit
5a7402313e
|
|
@ -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,124 +203,91 @@ const LocationInfo: React.FC<{}> = () => {
|
|||
{notes === undefined && <IonSpinner name='lines' />}
|
||||
</IonLabel>
|
||||
</IonListHeader>
|
||||
{notes !== undefined && (
|
||||
<MainContainer>
|
||||
<Sidebar position='left'>
|
||||
<ConversationList>
|
||||
{notes.features!.map((feature: any, index: number) => (
|
||||
<Conversation
|
||||
onClick={conversationClickHandlerFactory(index)}
|
||||
key={feature.properties.id}
|
||||
name={i18n.locationInfo!.at!(
|
||||
roughDistance(scope.center, {
|
||||
lon: feature.geometry.coordinates[0],
|
||||
lat: feature.geometry.coordinates[1],
|
||||
})
|
||||
)}
|
||||
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'",
|
||||
})}
|
||||
/>
|
||||
</Conversation>
|
||||
))}
|
||||
</ConversationList>
|
||||
</Sidebar>
|
||||
<ChatContainer>
|
||||
<ConversationHeader>
|
||||
<ConversationHeader.Content>
|
||||
<span
|
||||
style={{
|
||||
color: '#ec1212',
|
||||
alignSelf: 'flex-center',
|
||||
}}
|
||||
>
|
||||
{i18n.locationInfo!.at!(
|
||||
roughDistance(scope.center, {
|
||||
lon: notes.features[noteIndex].geometry
|
||||
.coordinates[0],
|
||||
lat: notes.features[noteIndex].geometry
|
||||
.coordinates[1],
|
||||
})
|
||||
)}
|
||||
</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],
|
||||
})
|
||||
)}
|
||||
/>
|
||||
</ConversationHeader>
|
||||
<MessageList>
|
||||
{notes.features[noteIndex].properties.comments.map(
|
||||
(comment: any, index: number) => (
|
||||
<Message
|
||||
key={`${notes.features[noteIndex].properties.id}/${index}`}
|
||||
model={{
|
||||
direction: 'incoming',
|
||||
position: 'single',
|
||||
sender: comment.user,
|
||||
sentTime: comment.date,
|
||||
payload: comment.html,
|
||||
{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
|
||||
onClick={conversationClickHandlerFactory(index)}
|
||||
key={feature.properties.id}
|
||||
name={i18n.locationInfo!.at!(
|
||||
roughDistance(scope.center, {
|
||||
lon: feature.geometry.coordinates[0],
|
||||
lat: feature.geometry.coordinates[1],
|
||||
})
|
||||
)}
|
||||
info={feature.properties.status}
|
||||
>
|
||||
<AvatarForFeature feature={feature} as={Avatar} />
|
||||
</Conversation>
|
||||
))}
|
||||
</ConversationList>
|
||||
</Sidebar>
|
||||
<ChatContainer>
|
||||
<ConversationHeader>
|
||||
<ConversationHeader.Content>
|
||||
<span
|
||||
style={{
|
||||
alignSelf: 'flex-center',
|
||||
}}
|
||||
>
|
||||
<Message.Header
|
||||
sender={comment.user}
|
||||
sentTime={comment.date}
|
||||
/>
|
||||
<Avatar
|
||||
src={AvatarInitial.initialAvatar({
|
||||
size: 100,
|
||||
initials: comment.user ? comment.user : '??',
|
||||
initial_fg: '#888888',
|
||||
initial_bg: '#f4f6f7',
|
||||
initial_size: 0, // Defaults to height / 2
|
||||
initial_weight: 500,
|
||||
initial_font_family:
|
||||
"'Lato', 'Lato-Regular', 'Helvetica Neue'",
|
||||
})}
|
||||
name={comment.user ? comment.user : 'anonymous'}
|
||||
/>
|
||||
</Message>
|
||||
)
|
||||
)}
|
||||
</MessageList>
|
||||
</ChatContainer>
|
||||
</MainContainer>
|
||||
{i18n.locationInfo!.at!(
|
||||
roughDistance(scope.center, {
|
||||
lon: notes.features[noteIndex].geometry
|
||||
.coordinates[0],
|
||||
lat: notes.features[noteIndex].geometry
|
||||
.coordinates[1],
|
||||
})
|
||||
)}
|
||||
</span>
|
||||
</ConversationHeader.Content>
|
||||
<AvatarForFeature
|
||||
feature={notes.features[noteIndex]}
|
||||
as={Avatar}
|
||||
/>
|
||||
</ConversationHeader>
|
||||
<MessageList>
|
||||
{notes.features[noteIndex].properties.comments.map(
|
||||
(comment: any, index: number) => (
|
||||
<Message
|
||||
key={`${notes.features[noteIndex].properties.id}/${index}`}
|
||||
model={{
|
||||
direction: 'incoming',
|
||||
position: 'single',
|
||||
sender: comment.user,
|
||||
sentTime: comment.date,
|
||||
payload: comment.html,
|
||||
}}
|
||||
>
|
||||
<Message.Header
|
||||
sender={comment.user}
|
||||
sentTime={comment.date}
|
||||
/>
|
||||
<Message.Footer sentTime={comment.action} />
|
||||
<Avatar
|
||||
src={AvatarInitial.initialAvatar({
|
||||
size: 100,
|
||||
initials: comment.user ? comment.user : '??',
|
||||
initial_fg: comment.user
|
||||
? 'darkblue'
|
||||
: 'lightgrey',
|
||||
initial_bg: comment.user ? 'ivory' : 'darkred',
|
||||
initial_size: 0, // Defaults to height / 2
|
||||
initial_weight: 1000,
|
||||
initial_font_family:
|
||||
"'Lato', 'Lato-Regular', 'Helvetica Neue'",
|
||||
})}
|
||||
name={comment.user ? comment.user : 'anonymous'}
|
||||
/>
|
||||
</Message>
|
||||
)
|
||||
)}
|
||||
</MessageList>
|
||||
</ChatContainer>
|
||||
</MainContainer>
|
||||
</div>
|
||||
)}
|
||||
</IonList>
|
||||
</IonContent>
|
||||
|
|
|
|||
|
|
@ -91,3 +91,9 @@ ion-modal ion-content {
|
|||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
#chat-sidebar {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue