Switch to using a simple modal dialog for name entry, so that we can expand it later

mapmakr/database.py

@@ -8,5 +8,6 @@ _engine = None
 def get_engine():
     global _engine
     if not _engine:
-        _engine = create_engine(settings.database_uri, echo=settings.database_echo)
+        _engine = create_engine(settings.database_uri, echo=settings.database_echo,
+                                connect_args=settings.database_options)
     return _engine

mapmakr/settings.py

@@ -4,6 +4,7 @@ from pydantic import BaseSettings
 class Settings(BaseSettings):
     database_uri: str = 'sqlite:///mapmakr.sqlite'
     database_echo: bool = False
+    database_options: dict = {'check_same_thread': False}
     site_title: str = 'mapmakr'
 
 

mapmakr/static/js/mapmakr.js

@@ -1,4 +1,4 @@
-let map, drawnItems, drawControl;
+let map, drawnItems, drawControl, currentLayer;
 
 
 function reload_map() {
@@ -53,9 +53,9 @@ function setup_map() {
   refreshButton.button.style.fontSize = '18px';
   map.addControl(refreshButton);
 
-  const helpButton = new L.easyButton('icon ion-help-circled', function() {open("about.html");});
+  // const helpButton = new L.easyButton('icon ion-help-circled', function() {open("about.html");});
-  helpButton.button.style.fontSize = '18px';
+  // helpButton.button.style.fontSize = '18px';
-  map.addControl(helpButton);
+  // map.addControl(helpButton);
 
   const controlSearch = new L.Control.Search({layer: drawnItems, propertyName: 'id', initial: false, zoom: 12});
   map.addControl(controlSearch);
@@ -85,45 +85,15 @@ function setup_map() {
       return;
     }
 
-    let name = prompt("Marker name:", "");
+    currentLayer = layer;
-    if (name) {
+    $("#edit-form").modal();
-      layer.options.id = null;
-      layer.options.title = name;
-      layer.bindPopup(name);
-      drawnItems.addLayer(layer);
-      let requestOptions = {
-        method: "POST",
-        headers: {
-          "Accept": "application/json",
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          "name": name,
-          "latitude": layer.getLatLng()["lat"],
-          "longitude": layer.getLatLng()["lng"],
-          "options": {}
-        })
-      };
-      fetch("/marker", requestOptions).then(() => reload_map());
-    }
   });
 
   map.on('draw:edited', function (e) {
     e.layers.eachLayer(layer => {
       let type = layer.layerType, id = layer.options.id;
-      let requestOptions = {
+      currentLayer = layer;
-        method: "PATCH",
+      $("#edit-form").modal();
-        headers: {
-          "Accept": "application/json",
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          "name": layer.options.name,
-          "latitude": layer.getLatLng()["lat"],
-          "longitude": layer.getLatLng()["lng"]
-        })
-      };
-      fetch("/marker/" + id, requestOptions).then(() => reload_map());
     });
   });
 
@@ -133,4 +103,38 @@ function setup_map() {
       fetch("/marker/" + id, {method: "DELETE"}).then(() => reload_map());
     });
   });
+
+  $("#marker-save").on("click", (event) => {
+    event.preventDefault();
+    let name = $("#marker-name").val();
+    const markerAttributes = {
+      "name": name,
+      "latitude": currentLayer.getLatLng()["lat"],
+      "longitude": currentLayer.getLatLng()["lng"],
+      "options": {}
+    };
+    if (name) {
+      currentLayer.options.title = name;
+      currentLayer.bindPopup(name);
+      drawnItems.addLayer(currentLayer);
+      let requestOptions = {
+        headers: {
+          "Accept": "application/json",
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(markerAttributes)
+      };
+      console.log(currentLayer);
+      if (currentLayer.options.id) {
+        requestOptions["method"] = "PATCH";
+        fetch("/marker/" + currentLayer.options.id, requestOptions).then(() => reload_map());
+      }
+      else {
+        requestOptions["method"] = "POST";
+        fetch("/marker", requestOptions).then(() => reload_map());
+      }
+    }
+    $.modal.close();
+    return false;
+  });
 }

mapmakr/templates/index.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
     <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
     <link rel="stylesheet" href="{{ url_for('static', path='/3rdparty/leaflet-search.css') }}" />
     <link rel="stylesheet" href="{{ url_for('static', path='/3rdparty/leaflet-easybutton.css') }}" />
     <link rel="stylesheet" href="{{ url_for('static', path='/3rdparty/leaflet-label.css') }}" />
@@ -15,9 +16,18 @@
   </head>
   <body>
     <div id="mapmakr" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
+    <form id="edit-form" class="modal">
+      <div class="form-control">
+        <label for="marker-name">Name:</label>
+        <input id="marker-name" name="marker-name" />
+      </div>
+      <button type="submit" id="marker-save">Save</button>
+    </form>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
     <script src="{{ url_for('static', path='/3rdparty/leaflet-search.js') }}"></script>
     <script src="{{ url_for('static', path='/3rdparty/leaflet-easybutton.js') }}"></script>
     <script src="{{ url_for('static', path='/3rdparty/leaflet-label.js') }}"></script>