3 files changed, 142 insertions, 0 deletions
diff --git a/templates/index.css b/templates/index.css
new file mode 100644
index 0000000..f8bab2c
--- /dev/null
+++ b/templates/index.css
@@ -0,0 +1,11 @@
+html { height: 100% }
+body { height: 80%; margin: 0; padding: 0 }
+#map_canvas { height: 100%; width: 100% }
+.row {
+    display:flex;
+}
+.col {
+    display: flex;
+    flex-direction: column;
+    margin: 2%;
+}
+\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..71a0005
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,52 @@
+<html>
+    <head>
+        <meta name="viewport"content="initial-scale=1.0, user-scalable=no"/>
+
+        {{ templates/index.css }}
+        
+    </head>
+
+    <body>
+
+        <div id="map_canvas"></div>
+        
+        <form id="path-form">
+            <div class="row" >
+                <div class="col">
+                    Place marker for:
+                    <div>
+                        <input type="radio" name="marker-point" id="marker-point-start" checked="true" />
+                        <label for="marker-point-start">Start</label>
+                    </div>
+                    <div>
+                        <input type="radio" name="marker-point" id="marker-point-end" />
+                        <label for="marker-point-end">Destination</label>
+                    </div>
+                </div>
+                <div class="col">
+                    <div>
+                        <label for="lat1">Start lat:</label>
+                        <input name="lat1" id="lat1" />
+                    </div>
+                    <div>
+                        <label for="lng1">Start lng:</label>
+                        <input name="lng1" id="lng1" />
+                    </div>
+                </div>
+                <div class="col">
+                    <div>
+                        <label for="lat2">End latitude:</label>
+                        <input name="lat2" id="lat2" />
+                    </div>
+                    <div>
+                            <label for="lng2">End longitude:</label>
+                            <input name="lng2" id="lng2" />
+                    </div>
+                </div>
+                <input type="submit" />
+            </div>
+        </form>  
+        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBO7iAytSrxMTS21EovrsGI2TI73F3TyYg&sensor=false"></script>
+        {{ templates/index.js }}
+    </body>
+</html>
diff --git a/templates/index.js b/templates/index.js
new file mode 100644
index 0000000..bc05ed7
--- /dev/null
+++ b/templates/index.js
@@ -0,0 +1,79 @@
+var map;
+const form = document.querySelector('#path-form')
+const markerIsStart = document.querySelector("#marker-point-start")
+const markerIsEnd = document.querySelector("#marker-point-end")
+
+google.maps.event.addDomListener(window, 'load', initialize);
+form.addEventListener('submit', postShortestPath, false)
+
+
+function initialize() {
+    var mapOptions = {
+        center: new google.maps.LatLng(58.40384776751319, 15.578484535217285),
+        zoom: 15,
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+    };
+    var mapCanvas = document.getElementById("map_canvas")
+    map = new google.maps.Map(mapCanvas, mapOptions);
+    google.maps.event.addListener(map, 'click', handleMapClick)
+}
+
+async function postShortestPath(event){
+    event.preventDefault()
+    var lat1 = parseFloat(document.querySelector('#lat1').value)
+    var lng1 = parseFloat(document.querySelector('#lng1').value)
+    var lat2 = parseFloat(document.querySelector('#lat2').value)
+    var lng2 = parseFloat(document.querySelector('#lng2').value)
+
+    // Check that they're not Nan (stops function if one is Nan)
+    if(!lat1 || !lng1  || !lat2 || !lng2)
+        return alert('Formatting Error: Coordinates are not float values.')
+    
+    req = {lat1, lng1, lat2, lng2} // Dictionary auto-keys
+
+    res = await fetch('/shortest-path', {
+        method:'POST',
+        credentials: 'same-origin',
+        body: JSON.stringify(req)
+    })
+
+    res = await res.json() 
+    var points = new google.maps.MVCArray()
+    console.log(res.path)
+    res.path.map(coord=>{
+        var [lat, lng] = coord
+        var point = new google.maps.LatLng(lat, lng)
+        points.push(point)
+    })
+
+    createPolyline(points)
+}
+
+function createPolyline(points){
+    var polyline = new google.maps.Polyline({
+        path: points,
+        map: map
+    });
+}
+
+function handleMapClick ({latLng}){
+    createMarker(latLng, `Click: ${latLng}`)
+    console.log(latLng)
+    var {lat, lng} = latLng 
+    var posNumber = markerIsStart.checked ? '1' : '2'
+    document.querySelector('#lat' + posNumber).value = lat()
+    document.querySelector('#lng' + posNumber).value = lng()
+    if(markerIsStart.checked)
+        markerIsEnd.checked = true 
+    
+
+}
+
+
+function createMarker (position, title){
+    return new google.maps.Marker({
+        map,
+        position,
+        title
+    })
+}
+\ No newline at end of file