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);
|
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,124 +203,91 @@ 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>
|
||||||
<ConversationList>
|
<Sidebar position='left' id='chat-sidebar'>
|
||||||
{notes.features!.map((feature: any, index: number) => (
|
<ConversationList>
|
||||||
<Conversation
|
{notes.features!.map((feature: any, index: number) => (
|
||||||
onClick={conversationClickHandlerFactory(index)}
|
<Conversation
|
||||||
key={feature.properties.id}
|
onClick={conversationClickHandlerFactory(index)}
|
||||||
name={i18n.locationInfo!.at!(
|
key={feature.properties.id}
|
||||||
roughDistance(scope.center, {
|
name={i18n.locationInfo!.at!(
|
||||||
lon: feature.geometry.coordinates[0],
|
roughDistance(scope.center, {
|
||||||
lat: feature.geometry.coordinates[1],
|
lon: feature.geometry.coordinates[0],
|
||||||
})
|
lat: feature.geometry.coordinates[1],
|
||||||
)}
|
})
|
||||||
info={feature.properties.status}
|
)}
|
||||||
>
|
info={feature.properties.status}
|
||||||
<Avatar
|
>
|
||||||
src={AvatarInitial.initialAvatar({
|
<AvatarForFeature feature={feature} as={Avatar} />
|
||||||
size: 100,
|
</Conversation>
|
||||||
initials: Math.round(
|
))}
|
||||||
roughDistance(scope.center, {
|
</ConversationList>
|
||||||
lon: feature.geometry.coordinates[0],
|
</Sidebar>
|
||||||
lat: feature.geometry.coordinates[1],
|
<ChatContainer>
|
||||||
})
|
<ConversationHeader>
|
||||||
),
|
<ConversationHeader.Content>
|
||||||
initial_fg: '#888888',
|
<span
|
||||||
initial_bg: '#f4f6f7',
|
style={{
|
||||||
initial_size: 25, // Defaults to height / 2
|
alignSelf: 'flex-center',
|
||||||
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,
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Message.Header
|
{i18n.locationInfo!.at!(
|
||||||
sender={comment.user}
|
roughDistance(scope.center, {
|
||||||
sentTime={comment.date}
|
lon: notes.features[noteIndex].geometry
|
||||||
/>
|
.coordinates[0],
|
||||||
<Avatar
|
lat: notes.features[noteIndex].geometry
|
||||||
src={AvatarInitial.initialAvatar({
|
.coordinates[1],
|
||||||
size: 100,
|
})
|
||||||
initials: comment.user ? comment.user : '??',
|
)}
|
||||||
initial_fg: '#888888',
|
</span>
|
||||||
initial_bg: '#f4f6f7',
|
</ConversationHeader.Content>
|
||||||
initial_size: 0, // Defaults to height / 2
|
<AvatarForFeature
|
||||||
initial_weight: 500,
|
feature={notes.features[noteIndex]}
|
||||||
initial_font_family:
|
as={Avatar}
|
||||||
"'Lato', 'Lato-Regular', 'Helvetica Neue'",
|
/>
|
||||||
})}
|
</ConversationHeader>
|
||||||
name={comment.user ? comment.user : 'anonymous'}
|
<MessageList>
|
||||||
/>
|
{notes.features[noteIndex].properties.comments.map(
|
||||||
</Message>
|
(comment: any, index: number) => (
|
||||||
)
|
<Message
|
||||||
)}
|
key={`${notes.features[noteIndex].properties.id}/${index}`}
|
||||||
</MessageList>
|
model={{
|
||||||
</ChatContainer>
|
direction: 'incoming',
|
||||||
</MainContainer>
|
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>
|
</IonList>
|
||||||
</IonContent>
|
</IonContent>
|
||||||
|
|
|
||||||
|
|
@ -91,3 +91,9 @@ ion-modal ion-content {
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
#chat-sidebar {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue