From 5a7402313e285cc0a5583b1061c63105bc397c5f Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Mon, 10 Oct 2022 22:08:50 +0200
Subject: [PATCH] Improved version of OSM notes shown as chat messages.

---
 src/components/map/LocationInfo.tsx | 226 ++++++++++++++--------------
 src/theme/map.css                   |   6 +
 2 files changed, 115 insertions(+), 117 deletions(-)

diff --git a/src/components/map/LocationInfo.tsx b/src/components/map/LocationInfo.tsx
index 8e64071..ec953a7 100644
--- a/src/components/map/LocationInfo.tsx
+++ b/src/components/map/LocationInfo.tsx
@@ -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>
diff --git a/src/theme/map.css b/src/theme/map.css
index e10fecc..65c8ebe 100644
--- a/src/theme/map.css
+++ b/src/theme/map.css
@@ -91,3 +91,9 @@ ion-modal ion-content {
 .hidden {
   display: none;
 }
+
+@media (max-width: 576px) {
+  #chat-sidebar {
+    display: block;
+  }
+}