Merge pull request #462 from technologiestiftung/staging

Staging to Master

.github/workflows/codeql-analysis.yml

@@ -12,7 +12,7 @@ jobs:
     if: "!contains(github.event.head_commit.message, 'skip ci')"
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v2
+      uses: actions/checkout@v3
       with:
         # We must fetch at least the immediate parents so that if this is
         # a pull request then we can checkout the head.

.github/workflows/demo-branch-sync.yml

@@ -10,9 +10,9 @@ jobs:
     name: Syncing branches
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 14.17.5
       - name: Opening pull request

.github/workflows/pumps.yml

@@ -15,7 +15,7 @@ jobs:
       # To use add these to the repo again
       # you must check out the repository
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Pumps data generate step
         id: pumps
         uses: technologiestiftung/giessdenkiez-de-osm-pumpen-harvester@v1.3.0
@@ -26,7 +26,7 @@ jobs:
         run: echo "The file was written to ${{ steps.pumps.outputs.file }}"
         # https://github.com/marketplace/actions/add-commit?version=v4.4.0
       - name: Add & Commit
-        uses: EndBug/add-and-commit@v7.5.0
+        uses: EndBug/add-and-commit@v9.0.0
         with:
           add: public/data
           author_name: tsboter

.github/workflows/test.yml

@@ -28,9 +28,9 @@ jobs:
         node-version: [14.17.5]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm ci

src/components/DataTable/index.tsx

@@ -1,8 +1,8 @@
-import React, { HTMLProps } from 'react';
+import React, { HTMLProps, ReactNode } from 'react';
 import styled from 'styled-components';
 
 export interface TableItemsType {
-  [key: string]: string;
+  [key: string]: string | ReactNode | null;
 }
 export interface DataTableType extends HTMLProps<HTMLDivElement> {
   title: string;

src/components/TreesMap/DeckGLMap.tsx

@@ -29,6 +29,7 @@ import {
 } from '../../utils/getWaterNeedByAge';
 
 import 'mapbox-gl/dist/mapbox-gl.css';
+
 interface StyledProps {
   isNavOpen?: boolean;
 }
@@ -89,6 +90,7 @@ interface ViewportType extends Partial<ViewportProps> {
 }
 
 interface PumpPropertiesType {
+  id?: number;
   address: string;
   status: string;
   check_date: string;
@@ -100,20 +102,69 @@ interface PumpTooltipType extends PumpPropertiesType {
   y: number;
 }
 
+interface PumpEventInfo {
+  x: number;
+  y: number;
+  object?: {
+    properties?:
+      | {
+          id: number;
+          'pump:status'?: string;
+          'addr:full'?: string;
+          'pump:style'?: string;
+          check_date?: string;
+        }
+      | undefined;
+  };
+}
+
 interface DeckGLStateType {
   hoveredPump: PumpTooltipType | null;
+  clickedPump: PumpTooltipType | null;
   cursor: 'grab' | 'pointer';
   geoLocationAvailable: boolean;
   isTreeMapLoading: boolean;
   viewport: ViewportType;
 }
 
+const StyledTextLink = styled.a`
+  color: black;
+`;
+
+const pumpEventInfoToState = (info: PumpEventInfo) => {
+  if (info && info.object && info.object.properties) {
+    return {
+      id: info.object.properties.id,
+      address: info.object.properties['addr:full'] || '',
+      check_date: info.object.properties['check_date'] || '',
+      status: info.object.properties['pump:status'] || '',
+      style: info.object.properties['pump:style'] || '',
+      x: info.x,
+      y: info.y,
+    };
+  }
+  return null;
+};
+
+const getOSMEditorURL = (nodeId: number) => {
+  const mapcompleteUrl = 'https://mapcomplete.osm.be/theme';
+  const params = new URLSearchParams();
+  params.set(
+    'userlayout',
+    'https://tordans.github.io/MapComplete-ThemeHelper/OSM-Berlin-Themes/man_made-walter_well-status-checker/theme.json'
+  );
+  params.set('language', 'de');
+  const selectedPump = `#node/${nodeId}`;
+  return `${mapcompleteUrl}?${params.toString()}${selectedPump}`;
+};
+
 class DeckGLMap extends React.Component<DeckGLPropType, DeckGLStateType> {
   constructor(props: DeckGLPropType) {
     super(props);
 
     this.state = {
       hoveredPump: null,
+      clickedPump: null,
       cursor: 'grab',
       geoLocationAvailable: false,
       isTreeMapLoading: true,
@@ -306,34 +357,15 @@ class DeckGLMap extends React.Component<DeckGLPropType, DeckGLStateType> {
         pickable: true,
         lineWidthScale: 3,
         lineWidthMinPixels: 1.5,
-        onHover: (info: {
-          x: number;
-          y: number;
-          object?: {
-            properties?:
-              | {
-                  'pump:status'?: string;
-                  'addr:full'?: string;
-                  'pump:style'?: string;
-                  check_date?: string;
-                }
-              | undefined;
-          };
-        }) => {
-          if (info && info.object && info.object.properties) {
-            this.setState({
-              hoveredPump: {
-                address: info.object.properties['addr:full'] || '',
-                check_date: info.object.properties['check_date'] || '',
-                status: info.object.properties['pump:status'] || '',
-                style: info.object.properties['pump:style'] || '',
-                x: info.x,
-                y: info.y,
-              },
-            });
-          } else {
-            this.setState({ hoveredPump: null });
-          }
+        onHover: (info: PumpEventInfo) => {
+          this.setState({
+            hoveredPump: pumpEventInfoToState(info),
+          });
+        },
+        onClick: (info: PumpEventInfo) => {
+          this.setState({
+            clickedPump: pumpEventInfoToState(info),
+          });
         },
       }),
     ];
@@ -615,6 +647,7 @@ class DeckGLMap extends React.Component<DeckGLPropType, DeckGLStateType> {
   }
 
   onViewStateChange(viewport: ViewportProps): void {
+    this.setState({ clickedPump: null, hoveredPump: null });
     this.setViewport({
       latitude: viewport.latitude,
       longitude: viewport.longitude,
@@ -628,7 +661,9 @@ class DeckGLMap extends React.Component<DeckGLPropType, DeckGLStateType> {
 
   render(): ReactNode {
     const { isNavOpen, showControls } = this.props;
-    const { viewport, hoveredPump } = this.state;
+    const { viewport, clickedPump, hoveredPump } = this.state;
+    const pumpInfo = clickedPump || hoveredPump;
+
     return (
       <>
         <DeckGL
@@ -666,6 +701,7 @@ class DeckGLMap extends React.Component<DeckGLPropType, DeckGLStateType> {
                         longitude: number;
                       };
                     };
+                    this.setState({ clickedPump: null, hoveredPump: null });
                     this.setViewport({
                       longitude,
                       latitude,
@@ -675,29 +711,46 @@ class DeckGLMap extends React.Component<DeckGLPropType, DeckGLStateType> {
                   }}
                 />
                 <NavigationControl
-                  onViewStateChange={e =>
+                  onViewStateChange={e => {
                     this.setViewport({
                       latitude: e.viewState.latitude,
                       longitude: e.viewState.longitude,
                       zoom: e.viewState.zoom,
                       transitionDuration: VIEWSTATE_TRANSITION_DURATION,
-                    })
-                  }
+                    });
+                    this.setState({ clickedPump: null, hoveredPump: null });
+                  }}
                 />
               </ControlWrapper>
             )}
           </StaticMap>
         </DeckGL>
-        {hoveredPump && hoveredPump.x && hoveredPump.y && (
+        {pumpInfo && pumpInfo.x && pumpInfo.y && (
           <MapTooltip
-            x={hoveredPump.x}
-            y={hoveredPump.y}
+            x={pumpInfo.x}
+            y={pumpInfo.y}
             title='Öffentliche Straßenpumpe'
-            subtitle={hoveredPump.address}
+            subtitle={pumpInfo.address}
+            onClickOutside={() => {
+              this.setState({ clickedPump: null });
+            }}
             infos={{
-              Status: hoveredPump.status,
-              'Letzter Check': hoveredPump.check_date,
-              Pumpenstil: hoveredPump.style,
+              Status: pumpInfo.status,
+              'Letzter Check': pumpInfo.check_date,
+              Pumpenstil: pumpInfo.style,
+              ...(pumpInfo.id
+                ? {
+                    '': (
+                      <StyledTextLink
+                        href={getOSMEditorURL(pumpInfo.id)}
+                        target='_blank'
+                        rel='noreferrer nofollow'
+                      >
+                        Status in OpenStreetMap aktualisieren
+                      </StyledTextLink>
+                    ),
+                  }
+                : {}),
             }}
           />
         )}

src/components/TreesMap/MapTooltip.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import styled from 'styled-components';
+import useClickOutside from '../../utils/hooks/useClickOutside';
 import { DataTable, TableItemsType } from '../DataTable';
 
 export const TOOLTIP_WIDTH = 260;
@@ -8,7 +9,6 @@ const StyledTooltipWrapper = styled.div`
   width: ${TOOLTIP_WIDTH}px;
   position: absolute;
   z-index: 3;
-  pointer-events: none;
   box-shadow: ${({ theme }) => theme.boxShadow};
   transform: translate(-50%, 10px);
 `;
@@ -19,16 +19,19 @@ export const MapTooltip: FC<{
   title: string;
   subtitle: string;
   infos: TableItemsType;
-}> = ({ x, y, title, subtitle, infos }) => {
+  onClickOutside?: () => void;
+}> = ({ x, y, title, subtitle, infos, onClickOutside = () => undefined }) => {
+  const ref = useClickOutside<HTMLDivElement>(onClickOutside);
   return (
     <StyledTooltipWrapper
+      ref={ref}
       style={{
         left: x,
         top: y,
       }}
       className='map-tooltip'
     >
-      <DataTable title={title} subtitle={subtitle} items={{ ...infos }} />
+      <DataTable title={title} subtitle={subtitle} items={infos} />
     </StyledTooltipWrapper>
   );
 };