Update module - Make locations standalone

mainio · Nov 24, 2023 · d06d4cf · d06d4cf
1 parent 8da08c6
commit d06d4cf
Show file tree

Hide file tree

Showing 9 changed files with 612 additions and 127 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -85,9 +85,9 @@ GEM
       descendants_tracker (~> 0.0.4)
       ice_nine (~> 0.11.0)
       thread_safe (~> 0.3, >= 0.3.1)
-    base64 (0.1.1)
+    base64 (0.2.0)
     batch-loader (1.5.0)
-    bcrypt (3.1.19)
+    bcrypt (3.1.20)
     better_html (1.0.16)
       actionview (>= 4.0)
       activesupport (>= 4.0)
@@ -150,7 +150,7 @@ GEM
     crass (1.0.6)
     css_parser (1.16.0)
       addressable
-    date (3.3.3)
+    date (3.3.4)
     date_validator (0.12.0)
       activemodel (>= 3)
       activesupport (>= 3)
@@ -346,7 +346,7 @@ GEM
       nokogiri (>= 1.13.2, < 1.15.0)
       rubyzip (~> 2.3.0)
     docile (1.4.0)
-    doorkeeper (5.6.6)
+    doorkeeper (5.6.7)
       railties (>= 5)
     doorkeeper-i18n (4.0.1)
     dumb_delegator (1.0.0)
@@ -373,7 +373,7 @@ GEM
       railties (>= 3.0.0)
     faker (2.23.0)
       i18n (>= 1.8.11, < 2)
-    faraday (2.7.11)
+    faraday (2.7.12)
       base64
       faraday-net_http (>= 2.0, < 3.1)
       ruby2_keywords (>= 0.0.4)
@@ -499,16 +499,16 @@ GEM
     msgpack (1.7.2)
     multi_xml (0.6.0)
     mustache (1.1.1)
-    net-imap (0.4.3)
+    net-imap (0.4.6)
       date
       net-protocol
     net-pop (0.1.2)
       net-protocol
-    net-protocol (0.2.1)
+    net-protocol (0.2.2)
       timeout
     net-smtp (0.4.0)
       net-protocol
-    nio4r (2.5.9)
+    nio4r (2.6.1)
     nokogiri (1.14.5-x86_64-linux)
       racc (~> 1.4)
     oauth (1.1.0)
@@ -569,10 +569,10 @@ GEM
       actionmailer (>= 3)
       net-smtp
       premailer (~> 1.7, >= 1.7.9)
-    public_suffix (5.0.3)
+    public_suffix (5.0.4)
     puma (5.6.7)
       nio4r (~> 2.0)
-    racc (1.7.2)
+    racc (1.7.3)
     rack (2.2.8)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
@@ -742,7 +742,7 @@ GEM
     thor (1.3.0)
     thread_safe (0.3.6)
     tilt (2.3.0)
-    timeout (0.4.0)
+    timeout (0.4.1)
     tomlrb (2.0.3)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)

diff --git a/app/cells/decidim/locations/locations/show.erb b/app/cells/decidim/locations/locations/show.erb
@@ -11,21 +11,6 @@
   <% end %>
 
   <div class="picker-wrapper hide">
-    <ul class="tabs mb-s expanded" data-map-container="#pick_model_locations_map">
-      <li class="tabs-title text-center" data-action="add-markers"><a href="#pick_loc" role="button"><%= t("pick_locations") %></a></li>
-      <li class="tabs-title text-center" data-action="type-loc"><a href="#type_loc" role="button"><%= t("type_locations") %></a></li>
-      <li class="tabs-title text-center" data-action="more">
-        <ul class="dropdown menu" data-dropdown-menu data-autoclose="false" data-disable-hover="true" data-click-open="true" data-close-on-click="true" role="menubar">
-          <li class="tabs-title" role="none">
-            <a id="model_locations_tabs_more<%= random_id %>" href="#" aria-haspopup="true" role="menuitem"><%= icon "ellipses", role: "img", aria_label: "More options" %></a>
-            <ul data-more-tabs class="menu" role="menu" aria-labelledby="model_locations_tabs_more">
-              <li role="none" data-action="clear-markers"><a href="#" role="menuitem"><%= t("clear_markers") %></a></li>
-            </ul>
-          </li>
-        </ul>
-      </li>
-    </ul>
-
     <div data-marker-field>
       <% existent_locations.each do |loc| %>
         <% new_id = randomize_loc %>
@@ -51,7 +36,7 @@
       <% end %>
     </template>
 
-    <div class="type-locations-wrapper hide">
+    <div class="type-locations-wrapper">
       <label><%= t("address") %></label>
       <div class="input-group">
         <span class="input-group-label">
@@ -65,6 +50,19 @@
       <span class="hint form-input-extra-before hide" aria-hidden="true"><%= t("hint") %></span>
     </div>
 
+    <ul class="tabs mb-s expanded" data-map-container="#pick_model_locations_map">
+      <li class="tabs-title text-center" data-action="more">
+        <ul class="dropdown menu" data-dropdown-menu data-autoclose="false" data-disable-hover="true" data-click-open="true" data-close-on-click="true" role="menubar">
+          <li class="tabs-title" role="none">
+            <a id="model_locations_tabs_more<%= random_id %>" href="#" aria-haspopup="true" role="menuitem"><%= icon "ellipses", role: "img", aria_label: "More options" %></a>
+            <ul data-more-tabs class="menu" role="menu" aria-labelledby="model_locations_tabs_more">
+              <li role="none" data-action="clear-markers"><a href="#" role="menuitem"><%= t("clear_markers") %></a></li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+    </ul>
+
     <div id="model_locations_reveal<%= random_id %>" class="reveal" data-reveal>
       <div class="reveal__header">
         <h3 id="budget-modal-info-label<%= random_id %>" class="reveal__title"><%= t("edit_location") %></h3>

diff --git a/app/packs/entrypoints/decidim_locations_edit_map.js b/app/packs/entrypoints/decidim_locations_edit_map.js
@@ -1,2 +1,3 @@
 import "src/decidim/locations/map";
 import "src/decidim/revgeocoding/provider/here";
+import "@geoman-io/leaflet-geoman-free";
diff --git a/app/packs/src/decidim/locations/map/controller/location.js b/app/packs/src/decidim/locations/map/controller/location.js
@@ -1,15 +1,22 @@
-import MapController from "src/decidim/map/controller"
+import MapController from "src/decidim/map/controller";
 
 export default class ModelLocMapController extends MapController {
   start() {
     this.initializeMap();
-    this.addListeners();
     this.placeMarkers = false;
     this.markers = {};
   }
 
   initializeMap() {
-    const mapEl = this.map._container
+    delete L.Icon.Default.prototype._getIconUrl;
+
+    L.Icon.Default.mergeOptions({
+      iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+      iconUrl: require('leaflet/dist/images/marker-icon.png'),
+      shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+    });
+
+    const mapEl = this.map._container;
     // Position the center of the map
     const lat = mapEl.dataset.lat;
     const lng = mapEl.dataset.lng;
@@ -25,17 +32,26 @@ export default class ModelLocMapController extends MapController {
     }
 
     this.map.setView([defaultLat, defaultLng], zoom);
-  }
 
-  addListeners() {
-    // Add listener for the map
-    this.map.on("click", (ev) => {
-      if (!this.placeMarkers) {
-        return;
+    L.PM.reInitLayer(this.map)
+
+    this.map.pm.addControls({
+      position: "topleft",
+      drawCircleMarker: false,
+      drawRectangle: false,
+      drawCircle: false,
+      drawText: false,
+      cutPolygon: false,
+      rotateMode: false
+    });
+    console.log(this.map)
+
+    this.map.pm.setPathOptions(
+      { color: "orange" },
+      {
+        ignoreShapes: ["Polyline", "Rectangle"]
       }
-
-      this.addMarker(ev, "clickEv");
-    })
+    );
   }
 
   clearMarkers() {
@@ -75,13 +91,11 @@ export default class ModelLocMapController extends MapController {
     let marker = null;
     if (typeof data === "object" && data !== null && !Array.isArray(data)) {
       marker = L.marker(data.latlng, {
-        icon: this.createIcon(),
         draggable: true,
         id: markerId
       })
     } else {
       marker = L.marker(data, {
-        icon: this.createIcon(),
         draggable: true,
         id: markerId
       })

diff --git a/app/packs/src/decidim/locations/map/integration/forms.js b/app/packs/src/decidim/locations/map/integration/forms.js
@@ -1,6 +1,6 @@
 import getDistanceBetweenPoints from "./avg_coordinates.js";
 import addMarkerField from "./add_marker_field.js";
-import initializeTabs from "./initialize_tabs.js";
+import ModelLocMapController from "../controller/location.js";
 
 export default () => {
   const addInputGroup = (markerFieldContainer, addressData, wrapperEl) => {
@@ -173,11 +173,24 @@ export default () => {
       };
       $(editModalEl).foundation("close");
     });
+
+    ctrl.map.on("pm:create", (event) => {
+      const markerId = Math.random().toString(36).slice(2, 9);
+      console.log(event.layer._latlng)
+      if (mapConfig && mapConfig === "single") {
+        const oldMarker = markerFieldContainer.querySelector(".marker-field");
+        if (oldMarker) {
+          ctrl.deleteMarker(oldMarker.dataset.markerId);
+          markerFieldContainer.querySelector(`[data-marker-id="${oldMarker.dataset.markerId}"]`).remove();
+        };
+      }
+    })
+
     ctrl.setEventHandler("markeradd", (marker, ev) => {
       const markerId = marker.options.id;
 
       if (ev !== "editEv") {
-        if (mapConfig && mapConfig === "single" && (ev === "typeEv" || ev === "clickEv")) {
+        if (mapConfig && mapConfig === "single" && (ev === "typeEv")) {
           const oldMarker = markerFieldContainer.querySelector(".marker-field");
           if (oldMarker) {
             ctrl.deleteMarker(oldMarker.dataset.markerId);
@@ -221,6 +234,7 @@ export default () => {
         ctrl.disablePlaceMarkers();
       })
     });
+
     if (containerMarkerField.length > 0) {
       const bounds = [];
       containerMarkerField.forEach(
@@ -234,6 +248,5 @@ export default () => {
       const area = new L.LatLngBounds(bounds)
       ctrl.map.fitBounds(area);
     }
-    initializeTabs(wrapperEl);
   });
 };
diff --git a/app/packs/src/decidim/locations/map/integration/initialize_tabs.js b/app/packs/src/decidim/locations/map/integration/initialize_tabs.js
diff --git a/app/packs/stylesheets/decidim/locations/locations.scss b/app/packs/stylesheets/decidim/locations/locations.scss
@@ -1,3 +1,5 @@
+@import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
+
 .tabs.expanded{
   @extend .menu;
 
@@ -72,3 +74,25 @@ $autocomplete-multiselect-search-prompt-color: $dark-gray !default;
     line-height: $autocomplete-input-height;
   }
 }
+
+.locations-type-container{
+  width: 34px;
+}
+
+.locations-type{
+  width: 30px;
+  height: 30px;
+  background-color: #fff;
+  position: relative;
+  border-radius: 0;
+
+  &.type-top{
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+
+  &.type-bottom{
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+}