react/kiezradar: add kiezradar map

changelog/_8750.md

@@ -0,0 +1,4 @@
+### Added
+
+- Added map and radius slider when editing kiezradars.
+- Radius and point (latitude and longitude) now saved to kiezradar.

meinberlin/apps/kiezradar/serializers.py

@@ -14,7 +14,7 @@
 
 
 class KiezRadarSerializer(serializers.ModelSerializer):
-    point = serializers.JSONField(required=False, write_only=True, binary=True)
+    point = serializers.JSONField(required=False)
 
     class Meta:
         model = KiezRadar

meinberlin/apps/kiezradar/templates/meinberlin_kiezradar/kiezradar.html

@@ -4,15 +4,20 @@
 {% block title %}{% translate 'Kiez selection' %} - {{ block.super }}{% endblock title %}
 
 {% block extra_js %}
-    <script type="text/javascript" src="{% static 'react_kiezradar.js' %}"></script>
     {{ block.super }}
 {% endblock extra_js %}
 
-{% block breadcrumbs %}
-{% endblock breadcrumbs %}
+{% block extra_css %}
+    {{ block.super }}
+    <link rel="stylesheet" href="{% static 'react_kiezradar.css' %}" />
+{% endblock extra_css %}
 
 {% block content %}
 <div id="layout-grid__area--maincontent">
     {% react_kiezradar %}
 </div>
 {% endblock content %}
+
+{% block extra_js_deferred %}
+    <script src="{% static 'react_kiezradar.js' %}"></script>
+{% endblock extra_js_deferred %}

meinberlin/apps/kiezradar/templatetags/react_kiezradar.py

@@ -1,6 +1,7 @@
 import json
 
 from django import template
+from django.conf import settings
 from django.urls import reverse
 from django.utils.html import format_html
 
@@ -9,11 +10,29 @@
 
 @register.simple_tag()
 def react_kiezradar():
+    attribution = ""
+    mapbox_token = ""
+    omt_token = ""
+
+    if hasattr(settings, "A4_MAP_ATTRIBUTION"):
+        attribution = settings.A4_MAP_ATTRIBUTION
+
+    if hasattr(settings, "A4_MAPBOX_TOKEN"):
+        mapbox_token = settings.A4_MAPBOX_TOKEN
+
+    if hasattr(settings, "A4_OPENMAPTILES_TOKEN"):
+        omt_token = settings.A4_OPENMAPTILES_TOKEN
+
     attributes = {
         "apiUrl": reverse("kiezradar-list"),
         "planListUrl": reverse("meinberlin_plans:plan-list"),
         "kiezradarFiltersUrl": reverse("kiezradar_filters"),
         "kiezradarNewUrl": reverse("kiezradar_new"),
+        "attribution": attribution,
+        "bounds": json.dumps(settings.A4_MAP_BOUNDING_BOX),
+        "baseUrl": settings.A4_MAP_BASEURL,
+        "mapboxToken": mapbox_token,
+        "omtToken": omt_token,
     }
 
     return format_html(

meinberlin/assets/scss/components_user_facing/_kiezradar.scss

@@ -156,13 +156,38 @@
 }
 
 .kiezradar__map {
-  align-items: center;
-  display: flex;
-  background-color: $gray-lightest;
-  color: $gray-light;
-  height: 30vh;
-  justify-content: center;
-  margin-bottom: 2rem;
+  margin-bottom: 2.5rem;
+
+  @media screen and (min-width: $breakpoint-tablet) {
+    margin-bottom: 2rem;
+    position: relative;
+    align-items: start;
+  }
+
+  .leaflet-top.leaflet-right {
+    display: none;
+    width: 100%;
+
+    @media screen and (min-width: $breakpoint-tablet) {
+      display: block;
+      width: block;
+    }
+  }
+}
+
+.leaflet-top.leaflet-right .leaflet-control {
+  height: 77px;
+  margin: 0;
+  width: 100%;
+
+  @media screen and (min-width: $breakpoint-tablet) {
+    margin: 10px 10px 0 0;
+    width: auto;
+  }
+}
+
+.kiezradar__map-search.leaflet-control {
+  z-index: 1001;
 }
 
 .kiezradar__modal {
@@ -215,4 +240,76 @@
   border: 0;
   color: inherit;
   cursor: pointer;
-}
+}
+
+.kiezradar__controls--tablet {
+  display: none;
+
+  @media screen and (min-width: $breakpoint-tablet) {
+    display: block;
+  }
+}
+
+.kiezradar__controls--mobile {
+  display: block;
+  margin-bottom: 1rem;
+
+  @media screen and (min-width: $breakpoint-tablet) {
+    display: none;
+  }
+}
+
+.kiezradar__radius-controls {
+  background-color: $white;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
+  width: 100%;
+  padding: 1rem;
+
+  @media screen and (min-width: $breakpoint-tablet) {
+    width: 18.75rem;
+  }
+}
+
+.kiezradar__radius-info {
+  display: flex;
+  font-size: 1rem;
+  margin-bottom: 8px;
+  line-height: 1.2;
+}
+
+.kiezradar__radius-label {
+  margin-bottom: 0;
+}
+
+.kiezradar__radius-measurement {
+  margin-left: auto;
+}
+
+.kiezradar__range-slider {
+  appearance: none;
+  width: 100%;
+  height: 0.5rem;
+  border-radius: 2px;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+
+  &::-webkit-slider-thumb {
+    appearance: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: $primary;
+    cursor: pointer;
+    transition: background 0.15s ease-in-out;
+
+    &:hover {
+      transform: scale(0.97);
+    }
+
+    &:active {
+      transform: scale(0.92);
+    }
+  }
+}

meinberlin/react/kiezradar/Kiezradar.jsx

@@ -6,6 +6,7 @@ import { alert as Alert } from 'adhocracy4'
 
 const KiezradarMap = React.lazy(() => import('./KiezradarMap'))
 
+const loadingMapText = django.gettext('Loading map...')
 const nameYourKiezText = django.gettext('Name your Kiez selection')
 const saveText = django.gettext('Save Kiez selection')
 const savingText = django.gettext('Saving')
@@ -15,11 +16,30 @@ const errorLimitedExceededText = django.gettext(
 )
 const errorUpdateKiezText = django.gettext('Failed to update kiezradar filter')
 
-export default function Kiezradar ({ kiezradar, ...props }) {
+const CENTRAL_BERLIN = [13.4050, 52.5200]
+const MIN_RADIUS = 500
+const MAX_RADIUS = 3000
+
+const defaultPoint = {
+  type: 'Feature',
+  geometry: {
+    type: 'Point',
+    coordinates: CENTRAL_BERLIN
+  }
+}
+
+export default function Kiezradar ({ kiezradar, onKiezradarSave, ...props }) {
   const navigate = useNavigate()
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState(null)
   const [limitExceeded, setLimitExceeded] = useState(false)
+  const [point, setPoint] = useState(kiezradar?.point ?? defaultPoint)
+  const [radius, setRadius] = useState(kiezradar?.radius ?? MIN_RADIUS)
+
+  const handleLocationChange = ({ point, radius }) => {
+    setPoint(point)
+    setRadius(radius)
+  }
 
   const handleSubmit = async (e) => {
     e.preventDefault()
@@ -29,7 +49,8 @@ export default function Kiezradar ({ kiezradar, ...props }) {
     try {
       const payload = {
         name: e.target.elements.name.value,
-        radius: e.target.elements.radius.value
+        point,
+        radius
       }
       const url = props.apiUrl + (kiezradar ? kiezradar.id + '/' : '')
       const method = kiezradar ? 'PATCH' : 'POST'
@@ -46,6 +67,7 @@ export default function Kiezradar ({ kiezradar, ...props }) {
         throw new Error(errorUpdateKiezText)
       }
 
+      onKiezradarSave(data)
       navigate(props.kiezradarFiltersUrl)
     } catch (err) {
       setError(err.message)
@@ -54,6 +76,8 @@ export default function Kiezradar ({ kiezradar, ...props }) {
     }
   }
 
+  const markerPosition = [...point.geometry.coordinates].reverse()
+
   return (
     <>
       {(error) && (
@@ -64,11 +88,18 @@ export default function Kiezradar ({ kiezradar, ...props }) {
           />
         </div>
       )}
-      <Suspense fallback={<div>Loading map...</div>}>
-        <KiezradarMap />
+      <Suspense fallback={<div>{loadingMapText}</div>}>
+        <KiezradarMap
+          {...props}
+          center={kiezradar ? markerPosition : null}
+          position={markerPosition}
+          radius={radius}
+          minRadius={MIN_RADIUS}
+          maxRadius={MAX_RADIUS}
+          onChange={handleLocationChange}
+        />
       </Suspense>
       <form className="form--base" onSubmit={handleSubmit}>
-        <input name="radius" type="hidden" value={kiezradar?.radius ?? 500.0} />
         <div className="form-group form-group form-group--inline fullspace align-bottom">
           <div className="form-group">
             <label htmlFor="name">{nameYourKiezText}*</label>

meinberlin/react/kiezradar/KiezradarList.jsx

@@ -75,8 +75,7 @@ export default function KiezradarList ({
         prevKiezradars.filter((prevKiezradar) => prevKiezradar.id !== kiezradar.id)
       )
 
-      onKiezradarDelete()
-      window.scrollTo({ top: 0, behavior: 'smooth' })
+      onKiezradarDelete(kiezradar)
     } catch (err) {
       setError(err.message)
     } finally {