Better presentation of OSM notes.
This commit is contained in:
vdv committed
1 parent
bdc527ae05
commit
6c0d3bfb11
4 files changed
+292
-29
No files matched your search
@@ -14,6 +14,20 @@ import {
|
||||
IonAccordion,
|
||||
} from '@ionic/react';
|
||||
import React, { Fragment, useRef, useState } from 'react';
|
||||
import {
|
||||
MainContainer,
|
||||
Sidebar,
|
||||
ConversationList,
|
||||
Conversation,
|
||||
ConversationHeader,
|
||||
ChatContainer,
|
||||
MessageList,
|
||||
Message,
|
||||
Avatar,
|
||||
} from '@chatscope/chat-ui-kit-react';
|
||||
import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
|
||||
import AvatarInitial from 'avatar-initials';
|
||||
|
||||
import { useSelector } from 'react-redux';
|
||||
import i18n from '../../i18n';
|
||||
import { geoPoint } from '../../lib/geo';
|
||||
@@ -103,6 +117,11 @@ const LocationInfo: React.FC<{}> = () => {
|
||||
return format.format(date);
|
||||
};
|
||||
|
||||
const [noteIndex, setNoteIndex] = useState(0);
|
||||
const conversationClickHandlerFactory = (index: number) => (event: any) => {
|
||||
setNoteIndex(index);
|
||||
};
|
||||
|
||||
return (
|
||||
<IonModal
|
||||
trigger='information-request'
|
||||
@@ -160,40 +179,123 @@ const LocationInfo: React.FC<{}> = () => {
|
||||
</IonLabel>
|
||||
</IonListHeader>
|
||||
{notes !== undefined && (
|
||||
<IonAccordionGroup>
|
||||
{notes.features.map((feature: any) => (
|
||||
<IonAccordion key={feature.properties.id}>
|
||||
<IonItem slot='header'>
|
||||
<IonLabel>
|
||||
{i18n.locationInfo!.at!(
|
||||
<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],
|
||||
})
|
||||
)}
|
||||
</IonLabel>
|
||||
</IonItem>
|
||||
<div className='ion-padding' slot='content'>
|
||||
<IonList lines='full' class='ion-no-margin'>
|
||||
<IonListHeader lines='full'>
|
||||
<IonLabel>
|
||||
{i18n.locationInfo!.created}
|
||||
{localDate(feature.properties.date_created)}
|
||||
{', '}
|
||||
{feature.properties.status === 'open'
|
||||
? i18n.locationInfo.status?.opened
|
||||
: i18n.locationInfo.status?.closed}
|
||||
{'.'}
|
||||
</IonLabel>
|
||||
</IonListHeader>
|
||||
{feature.properties.comments.map((comment: any) => (
|
||||
<IonItem>{comment.html}</IonItem>
|
||||
))}
|
||||
</IonList>
|
||||
</div>
|
||||
</IonAccordion>
|
||||
))}
|
||||
</IonAccordionGroup>
|
||||
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,
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
</IonList>
|
||||
</IonContent>
|
||||
|
||||
+1
@@ -0,0 +1 @@
|
||||
declare module 'avatar-initials';
|
||||
Reference in new issue
Block a user