load file with name via formload-file

2 files changed, 24 insertions, 3 deletions

diff --git a/templates/index.html b/templates/index.html
index b29f84f..614a0ac 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -43,8 +43,19 @@
                     
                 </div>
                 
-        </form> 
+        </form>
+        <form id="osm-file-form">
+            <!--TODO this could be a table -->
+            <div class="row" >
+                <div class="col">
+                    <div>
+                        <label for="filename">End latitude:</label>
+                        <input name="filename" id="filename" />
+                    </div>
+                </div>
+                <input type="submit" value="Load file" />
+            </div>
+        </form>
         {{ templates/index.js }}
-        
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/index.js b/templates/index.js
index b7b3b58..d4cc5a5 100644
--- a/templates/index.js
+++ b/templates/index.js
@@ -3,6 +3,7 @@ const form = document.querySelector('#path-form')
 const markerIsStart = document.querySelector("#marker-point-start")
 const markerIsEnd = document.querySelector("#marker-point-end")
 form.addEventListener('submit', postShortestPath, false)
+document.querySelector("#osm-file-form").addEventListener('submit', loadFile, false)
 
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -33,6 +34,15 @@ async function postShortestPath(event){
 
 }
 
+async function loadFile(event) {
+    event.preventDefault()
+    await fetch("/load-file", {
+        method: "POST",
+        credentials: "same-origin",
+        body: JSON.stringify({"filename": document.querySelector("#filename").value})
+    })
+}
+
 function handleMapClick ({latlng}){
     var {lat, lng} = latlng 
     var marker = L.marker([lat, lng]).addTo(map)