decidim-decidim_awesome 0.8.0 → 0.12.0

data/app/packs/src/decidim/decidim_awesome/admin/verification_selects.js

@@ -0,0 +1,21 @@
+/* eslint-disable no-new */
+
+import TomSelect from "tom-select/dist/cjs/tom-select.popular";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const selectContainer = document.getElementById("config_force_authorization_after_login");
+
+  if (!selectContainer) {
+    return;
+  }
+
+  new TomSelect(selectContainer, {
+    plugins: ["remove_button", "dropdown_input"],
+    create: false,
+    render: {
+      option: function (data, escape) {
+        return `<div>${escape(data.text)}</div>`;
+      }
+    }
+  });
+});

data/app/packs/src/decidim/decidim_awesome/admin/verifications.js

@@ -0,0 +1,43 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const dialog = document.getElementById("awesome-verification-modal");
+  if (!dialog) {
+    return;
+  }
+  const container = dialog.querySelector("[data-dialog-container]");
+  
+  dialog.addEventListener("open.dialog", async (el) => {
+    const modal = window.Decidim.currentDialogs[el.target.id];
+    const button = modal.openingTrigger;
+    const url = button.dataset.verificationUrl;
+    container.innerHTML = '<br><br><span class="loading-spinner"></span>';
+    // console.log("open.dialog", el, "container", container, "button", button, "url", url);
+    fetch(url).then((res) => res.text()).then((html) => {
+      container.innerHTML = html;
+    });
+  });
+  
+  
+  document.body.addEventListener("ajax:complete", (responseText) => {
+    const response = JSON.parse(responseText.detail[0].response)
+    const button = document.querySelector(`[data-verification-handler="${response.handler}"][data-verification-user-id="${response.userId}"]`);
+    // console.log("ajax:complete", responseText, "response", response, "button", button);
+    container.innerHTML = response.message;
+
+    if (response.granted) {
+      button.classList.add("granted");
+    } else {
+      button.classList.remove("granted");
+      const forceVerificationCheck = container.querySelector("#force_verification_check");
+      const forceVerification = container.querySelector("#force_verification");
+    
+      if (forceVerificationCheck) {
+        forceVerificationCheck.addEventListener("change", function() {
+          forceVerification.disabled = !forceVerification.disabled;
+          if (forceVerificationCheck.checked) {
+            forceVerification.focus()
+          }
+        });
+      }
+    }
+  });
+});

data/app/packs/src/decidim/decidim_awesome/amendments/show_modal_on_limits.js

@@ -0,0 +1,28 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const modalId = "LimitAmendmentsModal";
+  const modalEl = document.getElementById(modalId);
+  const amendButton = document.getElementById("amend-button");
+  const limitAmendments = modalEl && JSON.parse(modalEl.dataset.limitAmendments);
+
+  if (!amendButton || !limitAmendments || document.querySelector('a[href^="/users/sign_in"]')) {
+    return;
+  }
+
+  modalEl.querySelectorAll("a").forEach((aEl) => {
+    aEl.addEventListener("click", () => {
+      window.Decidim.currentDialogs[modalId].close();
+    });
+  });
+
+  /**
+   * Determines if the modal should be displayed based on its current state and data attributes.
+   */
+  amendButton.addEventListener("click", (event) => {
+    const modal = window.Decidim.currentDialogs[modalId];
+    if (modal) {
+      event.preventDefault();
+      event.stopPropagation();
+      modal.open();
+    }
+  });
+});

data/app/packs/src/decidim/decidim_awesome/awesome_admin.js

@@ -1,23 +1,14 @@
-// Webpack seems to "forgget" about certain libraries already being loaded 
-// if javascript_pack_tag is called two times, let's include the whole Decidim admin here instead
-import "entrypoints/decidim_admin"
 // Custom scripts for awesome
-import "src/decidim/decidim_awesome/admin/constraints"
+import "src/decidim/decidim_awesome/admin/constraint_form_events"
 import "src/decidim/decidim_awesome/admin/auto_edit"
 import "src/decidim/decidim_awesome/admin/user_picker"
-import "src/decidim/decidim_awesome/editors/tabs_focus"
+import "src/decidim/decidim_awesome/admin/proposal_sortings"
 import "src/decidim/decidim_awesome/admin/codemirror"
 import "src/decidim/decidim_awesome/admin/check_redirections"
+import "src/decidim/decidim_awesome/admin/form_exit_warn"
 
-import {destroyQuillEditor, createQuillEditor, createMarkdownEditor} from "src/decidim/decidim_awesome/editors/editor"
+import "src/decidim/decidim_awesome/proposals/custom_fields"
+import "src/decidim/decidim_awesome/admin/custom_fields_builder"
+import "src/decidim/decidim_awesome/admin/verification_selects"
 
-$(() => {
-  $(".editor-container").each((_idx, container) => {
-    destroyQuillEditor(container);
-    if (window.DecidimAwesome.use_markdown_editor) {
-      createMarkdownEditor(container);
-    } else {
-      createQuillEditor(container);
-    }
-  });
-});
+window.DecidimAwesome = window.DecidimAwesome || {};

data/app/packs/src/decidim/decidim_awesome/awesome_admin_global.js

@@ -0,0 +1,2 @@
+import "src/decidim/decidim_awesome/admin/tabs_change"
+import "src/decidim/decidim_awesome/admin/verifications"

data/app/packs/src/decidim/decidim_awesome/awesome_application.js

@@ -1,17 +1,4 @@
 import "src/decidim/decidim_awesome/proposals/images"
 import "src/decidim/decidim_awesome/forms/autosave"
-import {destroyQuillEditor, createQuillEditor, createMarkdownEditor} from "src/decidim/decidim_awesome/editors/editor"
-
-$(() => {
-  // rebuild editors
-  if (window.DecidimAwesome.allow_images_in_full_editor || window.DecidimAwesome.allow_images_in_small_editor || window.DecidimAwesome.use_markdown_editor) {
-    $(".editor-container").each((_idx, container) => {
-      destroyQuillEditor(container);
-      if (window.DecidimAwesome.use_markdown_editor) {
-        createMarkdownEditor(container);
-      } else {
-        createQuillEditor(container);
-      }
-    });
-  }
-});
+import "src/decidim/decidim_awesome/voting/voting_cards"
+import "src/decidim/decidim_awesome/amendments/show_modal_on_limits"

data/app/packs/src/decidim/decidim_awesome/awesome_map/api/fetcher.js

@@ -8,6 +8,7 @@ export default class Fetcher {
     };
     this.onFinished = () => {};
     this.onNode = () => {};
+    this.onCollection = () => {};
     this.hashtags = [];
 
     this.collection = this.controller.component.type;
@@ -29,7 +30,7 @@ export default class Fetcher {
     api.fetchAll((result) => {
       if (result) {
         const collection = result.component[this.collection];
-        // console.log("collection",collection)
+        // console.log("collection", collection)
         
         collection.edges.forEach((element) => {
           let node = element.node;
@@ -43,6 +44,8 @@ export default class Fetcher {
           }
         });
 
+        this.onCollection(collection);
+
         if (collection.pageInfo.hasNextPage) {
           this.fetch(collection.pageInfo.endCursor);
         } else {
@@ -53,24 +56,25 @@ export default class Fetcher {
   }
 
   decorateNode(node) {
-    const body = this.findTranslation(node.body.translations);
+    const body = this.findTranslation(node.body.translations)
     const title = this.findTranslation(node.title.translations);
     node.hashtags = this.collectHashtags(title);
     node.hashtags = node.hashtags.concat(this.collectHashtags(body));
     // hashtags in the title look ugly, lets replace the gid:... structure with the tag #name
     node.title.translation = this.replaceHashtags(title, node.hashtags);
-    node.body.translation = this.appendHtmlHashtags(this.truncate(this.removeHashtags(body)).replace(/\n/g, "<br>"), node.hashtags);
-    node.link = `${this.controller.component.url}/${this.collection}/${node.id}`;
+    node.body.translation = this.appendHtmlHashtags(this.truncate(this.removeHashtags(body)), node.hashtags);
+    // console.log("decorateNode", node.title.translation, "BODY", body, "translation", node.body.translation, node.hashtags)
+    node.link = `${this.controller.component.url}/${node.id}`;
   }
 
   findTranslation(translations) {
-    let text, 
-        lang = document.querySelector("html").getAttribute("lang");
+    let lang = document.querySelector("html").getAttribute("lang"),
+        text = "";
     
-    translations.forEach((t) => {
-      if (t.text) {
-        if (!text || t.locale == lang) {
-          text = t.text
+    translations.forEach((txt) => {
+      if (txt.text) {
+        if (!text || txt.locale === lang) {
+          text = txt.text
         }
       }
     });
@@ -80,14 +84,12 @@ export default class Fetcher {
   collectHashtags(text) {
     let tags = [];
     if (text) {
-      const gids = text.match(/gid:\/\/[^\s<]+/g)
+      const gids = text.match(/gid:\/\/[^\s<&,;]+/g)
       if (gids) {
-        tags = gids.filter((gid) => gid.indexOf("/Decidim::Hashtag/") != -1).map((gid) => {
+        tags = gids.filter((gid) => gid.indexOf("/Decidim::Hashtag/") !== -1).map((gid) => {
           const parts = gid.split("/");
-          const fromSelector = parts[5].charAt(0) == "_";
-          const tag = fromSelector
-            ? parts[5].substr(1)
-            : parts[5];
+          const fromSelector = parts[5].charAt(0) === "_";
+          const tag = fromSelector ? parts[5].substr(1) : parts[5]; // eslint-disable-line no-ternary, multiline-ternary
           const name = `#${tag}`;
           const html = `<a href="/search?term=${name}">${name}</a>`;
           const hashtag = {
@@ -107,7 +109,8 @@ export default class Fetcher {
     return tags;
   }
 
-  replaceHashtags(text, hashtags) {
+  replaceHashtags(txt, hashtags) {
+    let text = txt;
     hashtags.forEach((tag) => {
       text = text.replace(tag.gid, tag.name)
     });
@@ -115,17 +118,39 @@ export default class Fetcher {
   }
 
   removeHashtags(text) {
-    return text.replace(/gid:\/\/[^\s<]+/g, "");
+    return text.replace(/gid:\/\/[^\s<&,;]+/g, "");
   }
 
-  appendHtmlHashtags(text, tags) {
-    tags.forEach((tag) => {
-      text += ` ${tag.html}`;
-    });
-    return text;
+  appendHtmlHashtags(txt, tags) {
+    let string = tags.reduce((accumulator, tag) => (accumulator
+      ? `${accumulator} ${tag.html}`
+      : tag.html), "");
+    if (string) {
+      return `${txt}<p>${string}</p>`;
+    } 
+    return txt;
+    
   }
 
   truncate(html) {
     return $.truncate(html, this.config);
   }
+
+  formatDateRange(startDate, endDate) {
+    // Check if either startDate or endDate is blank
+    if (!startDate || !endDate) {
+      return "";
+    }
+
+    // Convert startDate and endDate to JavaScript Date objects
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+
+    const date = Intl.DateTimeFormat(window.DecidimAwesome.currentLocale, { // eslint-disable-line new-cap
+      year: "numeric",
+      month: "short",
+      day: "numeric"
+    });
+    return date.formatRange(start, end);
+  }
 }

data/app/packs/src/decidim/decidim_awesome/awesome_map/api/meetings_fetcher.js

@@ -29,23 +29,13 @@ export default class MeetingsFetcher extends Fetcher {
                   }
                 }
                 startTime
-                location {
-                  translations {
-                    text
-                    locale
-                  }
-                }
+                endTime
                 address
-                locationHints {
-                  translations {
-                    text
-                    locale
-                  }
-                }
                 coordinates {
                   latitude
                   longitude
                 }
+                typeOfMeeting
                 category {
                   id
                 }
@@ -56,4 +46,11 @@ export default class MeetingsFetcher extends Fetcher {
       }
     }`;
   }
+
+  decorateNode(node) {
+    super.decorateNode(node);
+    node.icon = window.AwesomeMapMeetingTypes[node.typeOfMeeting];
+    node.meetingType = window.AwesomeMapMeetingTexts[node.typeOfMeeting];
+    node.dateRange = this.formatDateRange(node.startTime, node.endTime);
+  }
 }

data/app/packs/src/decidim/decidim_awesome/awesome_map/api/proposals_fetcher.js

@@ -23,12 +23,18 @@ export default class ProposalsFetcher extends Fetcher {
                       locale
                     }
                   }
+                  author {
+                    id
+                    name
+                  }
                   body {
                     translations {
                       text
                       locale
                     }
                   }
+                  totalCommentsCount
+                  endorsementsCount
                   address
                   coordinates {
                     latitude
@@ -49,4 +55,26 @@ export default class ProposalsFetcher extends Fetcher {
         }
       }`;
   }
+
+  decorateNode(node) {
+    super.decorateNode(node);
+    node.authorName = node.author && node.author.name || window.DecidimAwesome.texts.officialAuthor;
+    node.humanState = window.AwesomeMapProposalTexts[node.state];
+    switch (node.state) {
+    case "accepted":
+      node.stateClass = "success";
+      break;
+    case "rejected":
+    case "withdrawn":
+      node.stateClass = "alert";
+      break;
+    case "evaluating":
+      node.stateClass = "warning";
+      break;
+    default:
+      node.stateClass = "muted";
+    }
+
+    node.isAmendment = () => (Boolean(this.controller.amendments[node.id]));
+  }
 }

data/app/packs/src/decidim/decidim_awesome/awesome_map/awesome_map.js

@@ -1,8 +1,10 @@
 import * as L from "leaflet";
-import "src/decidim/map/icon.js" // comes with Decidim
-import "src/decidim/vendor/leaflet-tilelayer-here"
-import "leaflet.markercluster"; // Comes with Decidim
-import "leaflet.featuregroup.subgroup" // included in this package.json
+// comes with Decidim
+import "leaflet-tilelayer-here"
+// Comes with Decidim
+import "leaflet.markercluster";
+// included in this package.json
+import "leaflet.featuregroup.subgroup"
 import "src/vendor/jquery.truncate"
 import "jsrender"
 
@@ -40,7 +42,6 @@ export default class AwesomeMap {
     this.cluster = new L.MarkerClusterGroup();
     this.map.addLayer(this.cluster);
     this.controls = new ControlsUI(this);
-    this.allMarkers = [];
     this.onFinished = () => {};
     this.controllers = {};
     this.loading = [];
@@ -61,8 +62,8 @@ export default class AwesomeMap {
           this.loading.pop();
           this.autoResize();
 
-          if (this.loading.length == 0) {
-            this.controls.$loading.hide();
+          if (this.loading.length === 0) {
+            this.controls.loading.style.display = "none";
             // call trigger as all loads are finished
             this.onFinished();
           }
@@ -91,13 +92,11 @@ export default class AwesomeMap {
     };
 
     if (category) {
-      let id = category.id
-        ? parseInt(category.id, 10)
-        : parseInt(category, 10);
-      let cat = this.categories.find((c) => c.id == id);
+      let id = category.id ? parseInt(category.id, 10) : parseInt(category, 10); // eslint-disable-line no-ternary, multiline-ternary
+      let cat = this.categories.find((ct) => ct.id === id);
       if (cat) {
         cat.children = () => {
-          return this.categories.filter((c) => c.parent === cat.id);
+          return this.categories.filter((ct) => ct.parent === cat.id);
         }
         return cat;
       }
@@ -106,12 +105,12 @@ export default class AwesomeMap {
   }
 
   _getController(component) {
-    let controller;
+    let controller = null;
 
-    if (component.type == "proposals") {
+    if (component.type === "proposals") {
       controller = new ProposalsController(this, component);
     }
-    if (component.type == "meetings" && this.config.menu.meetings) {
+    if (component.type === "meetings" && this.config.menu.meetings) {
       controller = new MeetingsController(this, component);
     }
 
@@ -126,5 +125,6 @@ export default class AwesomeMap {
       this.controllers[component.type] = controller;
       return this.controllers[component.type]
     }
+    return null;
   }
 }

data/app/packs/src/decidim/decidim_awesome/awesome_map/controllers/controller.js

@@ -10,28 +10,57 @@ export default class Controller {
       group: new L.FeatureGroup.SubGroup(this.awesomeMap.cluster)
     };
     this.onFinished = () => {};
-    this.allMarkers = [];
-
+    this.allNodes = [];
   }
 
   getLabel() {
-    let text = this.awesomeMap.config.menu.mergeComponents || !this.component.name 
-      ? window.DecidimAwesome.texts[this.component.type]
-      : this.component.name;
+    let text = this.component.name;
+    if (!text || this.awesomeMap.config.menu.mergeComponents) {
+      text = window.DecidimAwesome.texts[this.component.type];
+    }
     return `<span class="awesome_map-component" id="awesome_map-component_${this.component.id}" title="0" data-layer="${this.component.type}">${text}</span>`
   }
 
   setFetcher(Fetcher) {
+    let checkProposalState = function (node, map) {
+      const showConfig = map.config.show;
+      return showConfig[node.state || "notAnswered"];
+    }
+
     this.fetcher = new Fetcher(this);
     this.fetcher.onFinished = () => {
       // console.log(`all ${this.component.type} loaded`, this)
       this._onFinished();
     };
+    this.fetcher.onCollection = (collection) =>  {
+      if (collection && collection.edges)  {
+        // Add markers to the main cluster group
+        let collectionEdges = [];
+        if (this.fetcher.collection === "meetings") {
+          collectionEdges = collection.edges.filter((item) => item.node.coordinates && item.node.coordinates.latitude && item.node.coordinates.longitude);
+        } else {
+          collectionEdges = collection.edges.filter((item) => item.node.coordinates && item.node.coordinates.latitude && item.node.coordinates.longitude && checkProposalState(item.node, this.awesomeMap));
+        }
+
+        try {
+          this.awesomeMap.cluster.addLayers(collectionEdges.map((item) => item.node.marker));
+        } catch (evt) {
+          console.error("Failed marker collection assignation", collectionEdges, "error", evt);
+        }
+        // subgroups don't have th addLayers utility
+        collectionEdges.forEach((item) => {
+          this.awesomeMap.layers[this.component.type].group.addLayer(item.node.marker);
+          this.addMarkerCategory(item.node.marker, item.node.category);
+          this.addMarkerHashtags(item.node.marker, item.node.hashtags);
+        });
+      }
+    };
   }
 
   addControls() {
     this.awesomeMap.controls.main.addOverlay(this.controls.group, this.controls.label);
-    this.awesomeMap.map.addLayer(this.controls.group);
+    this.controls.group.addTo(this.awesomeMap.map);
+    this.awesomeMap.layers[this.component.type] = this.controls;
   }
 
   loadNodes() {
@@ -40,16 +69,20 @@ export default class Controller {
 
   addMarker(marker, node) {
 
-    /* theorically, this should be enough to create popups on markers but looks that there is som bug in leaflet that sometimes prevents this to work
-    let node = document.createElement("div");
-    // console.log("addMarker", marker, "node", node)
-    node.innerHTML = $.templates(`#${this.templateId}`).render(node);
-    marker.bindPopup(node, {
+    /*
+    theorically, this should be enough to create popups on markers but it looks that
+    there is some bug in leaflet that sometimes prevents this to work
+    */
+    /*
+    let dom = document.createElement("div");
+    // console.log("addMarker", marker, "dom", dom)
+    dom.innerHTML = $.templates(`#${this.templateId}`).render(node);
+    marker.bindPopup(dom, {
       maxwidth: 640,
       minWidth: 500,
       keepInView: true,
       className: "map-info"
-    }); */
+    }); //*/
 
     marker.on("click", () => {
       let dom = document.createElement("div");
@@ -62,51 +95,51 @@ export default class Controller {
         className: "map-info"
 
       }).setLatLng(marker.getLatLng()).setContent(dom);
-      this.awesomeMap.map.addlayer(pop);
+      this.awesomeMap.map.addLayer(pop);
+      // console.log("marker click", node, "pop", pop, "marker", marker, "dom", dom, "templateId", this.templateId)
     });
-
-    this.controls.group.addLayer(marker);
-
-    this.allMarkers.push({
-      marker: marker,
-      component: this.component,
-      node: node
-    });
-
-    this.addMarkerCategory(marker, node.category);
-    this.addMarkerHashtags(marker, node.hashtags);
+    node.marker = marker;
+    node.component = this.component;
+    this.allNodes.push(node);
   }
 
   addMarkerCategory(marker, category) {
     // Add to category layer
     const cat = this.awesomeMap.getCategory(category);
     if (this.awesomeMap.layers[cat.id]) {
-      marker.addTo(this.awesomeMap.layers[cat.id].group);
-      this.awesomeMap.controls.showCategory(cat);
-    }   
+      try {
+        this.awesomeMap.layers[cat.id].group.addLayer(marker);
+        this.awesomeMap.controls.showCategory(cat);
+      } catch (evt) {
+        console.error("Failed category marker assignation. category:", category, "marker:", marker, evt.message);
+      }
+    }
   }
 
   addMarkerHashtags(marker, hashtags) {
     // Add hashtag layer
     if (this.awesomeMap.config.menu.hashtags) {
-      this.awesomeMap.controls.addHashtagsControls(hashtags, marker);
+      try {
+        this.awesomeMap.controls.addHashtagsControls(hashtags, marker);
+      } catch (evt) {
+        console.error("Failed hashtags marker assignation. hashtags:", hashtags, "marker:", marker, evt.message);
+      }
     }
   }
 
   // Override if needed (call this.onFinished() at the end!)
   _onFinished() {
-    this.awesomeMap.controls.updateStats(`component_${this.component.id}`, this.allMarkers.length);
+    this.awesomeMap.controls.updateStats(`component_${this.component.id}`, this.allNodes.length);
     this.onFinished();
   }
 
-  createIcon(Builder, color) {
-    return new Builder({
-      color: "#000000",
-      fillColor: color,
-      circleFillColor: color,
-      weight: 1,
-      stroke: color,
-      fillOpacity: 0.9
+  createIcon(color) {
+    const size = 36;
+    return L.divIcon({
+      html: `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${size}px" height="${size}px" class="text-secondary" style="color: ${color}"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M18.364 17.364L12 23.728l-6.364-6.364a9 9 0 1 1 12.728 0zM12 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>`,
+      iconAnchor: [0.5 * size, size],
+      popupAnchor: [0, -0.5 * size]
     });
   }
 }

data/app/packs/src/decidim/decidim_awesome/awesome_map/controllers/meetings_controller.js

@@ -2,12 +2,6 @@ import * as L from "leaflet";
 import Controller from "src/decidim/decidim_awesome/awesome_map/controllers/controller";
 import MeetingsFetcher from "src/decidim/decidim_awesome/awesome_map/api/meetings_fetcher";
 
-const MeetingIcon = L.DivIcon.SVGIcon.DecidimIcon.extend({
-  _createPathDescription: function() {
-    return "M 15.991543,4 C 7.3956015,4 2.9250351,10.5 3.000951,16.999999 3.1063486,26.460968 12.747693,30.000004 15.991543,43 19.242091,30.000004 29,26.255134 29,16.999999 29,10.5 23.951131,4 15.996007,4 m -0.153508,2.6000001 a 2.1720294,2.1076698 0 0 1 2.330514,2.1124998 2.177008,2.1125006 0 0 1 -4.354016,0 2.1720294,2.1076698 0 0 1 2.023502,-2.1124998 m -2.651707,4.8056679 h 5.610202 l 3.935584,7.569899 -1.926038,0.934266 -2.009546,-3.859265 v 14.557403 h -2.484243 v -9.126003 h -0.642162 v 9.126003 H 13.190347 V 16.050568 l -2.009545,3.859265 -1.926036,-0.934266 3.935581,-7.569899";
-  }
-});
-
 export default class MeetingsController extends Controller {
   constructor(awesomeMap, component) {
     super(awesomeMap, component)
@@ -19,7 +13,7 @@ export default class MeetingsController extends Controller {
     // for each meeting, create a marker with an associated popup
     this.fetcher.onNode = (meeting) => {
       let marker = new L.Marker([meeting.coordinates.latitude, meeting.coordinates.longitude], {
-        icon: this.createIcon(MeetingIcon, this.awesomeMap.getCategory(meeting.category).color),
+        icon: this.createIcon(this.awesomeMap.getCategory(meeting.category).color),
         title: meeting.title.translation
       });
       // console.log("new meeting", meeting, marker)
@@ -28,4 +22,14 @@ export default class MeetingsController extends Controller {
 
     this.fetcher.fetch();
   }
+
+  createIcon(color) {
+    const size = 36;
+    return L.divIcon({
+      html: `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="${size}px" height="${size}px" class="text-primary" style="color: ${color}"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M 15.991543,4 C 7.3956015,4 2.9250351,10.5 3.000951,16.999999 3.1063486,26.460968 12.747693,30.000004 15.991543,43 19.242091,30.000004 29,26.255134 29,16.999999 29,10.5 23.951131,4 15.996007,4 m -0.153508,2.6000001 a 2.1720294,2.1076698 0 0 1 2.330514,2.1124998 2.177008,2.1125006 0 0 1 -4.354016,0 2.1720294,2.1076698 0 0 1 2.023502,-2.1124998 m -2.651707,4.8056679 h 5.610202 l 3.935584,7.569899 -1.926038,0.934266 -2.009546,-3.859265 v 14.557403 h -2.484243 v -9.126003 h -0.642162 v 9.126003 H 13.190347 V 16.050568 l -2.009545,3.859265 -1.926036,-0.934266 3.935581,-7.569899"/></svg>`,
+      iconAnchor: [0.5 * size, size],
+      popupAnchor: [0, -0.5 * size]
+    });
+  }
 }