integrate frontend with backend

websiteapp/templates/websiteapp/decode.html

@@ -17,13 +17,17 @@
             ←
         </button>
     </a>
-    <a href="{% url 'encode_result' %}">
     <button onclick="saveAndGo()">
         Get lame location :/
     </button>
-    </a>
 </div>
 
+<script>
+function saveAndGo() {
+    let text = document.getElementById("greggordinates").value;
+    window.location.assign(`/decode/result?loc=${text}`);
+}
+</script>
 
 
 {% endblock %}

websiteapp/templates/websiteapp/decode_result.html

@@ -2,6 +2,37 @@
 
 {% block content %}
 
-<p> Landing Page </p>
+<p> {{ result }} </p>
+
+<br>
+
+<div id="map" data-mode=""></div>
+<input
+    type="hidden"
+    data-map-markers=""
+    value=""
+    name="map-geojson-data"
+    id="mapData"
+/>
+
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+    // Initialize map
+    const map = L.map('map').setView([54.5, -3], 6);
+
+    const lat = {{ lat }};
+    const lng = {{ lon }};
+
+    // Add OpenStreetMap tiles
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 19,
+        attribution:
+        '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+    // Add marker at clicked location
+    let marker = L.marker([lat, lng]).addTo(map);
+});
+</script>
 
 {% endblock %}

websiteapp/templates/websiteapp/encode.html

@@ -21,7 +21,7 @@
 
 
 <script>
-    document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener("DOMContentLoaded", function () {
     // Initialize map
     const map = L.map('map').setView([54.5, -3], 6);
 
@@ -54,7 +54,12 @@
 
         console.log("Saved to hidden input:", geoData);
     });
-    });
+});
+
+function saveAndGo() {
+    let coords = JSON.parse(document.getElementById('mapData').value);
+    window.location.assign(`/encode/result?lat=${coords.lat}&lon=${coords.lng}`);
+}
 </script>
 
 
@@ -64,11 +69,9 @@
             ←
         </button>
     </a>
-    <a href="{% url 'encode_result' %}">
     <button onclick="saveAndGo()">
         GREGG IT!
     </button>
-    </a>
 </div>
 
 <style>

websiteapp/templates/websiteapp/encode_result.html

@@ -2,6 +2,8 @@
 
 {% block content %}
 
-<p> encode result </p>
+<div width="100%">
+    <p width="80%" style="border-radius: 10px; border: 1px solid black; background-color: rgba(192, 192, 192, 0.5); max-width: 500px; margin: 0 auto; padding: 20px; word-wrap:break-word;"> {{ result }} </p>
+</div>
 
 {% endblock %}

websiteapp/templates/websiteapp/landing_page.html

@@ -3,7 +3,7 @@
 
 {% block content %}
 
-<img src="{% static 'img/drawing.png' %}" alt="Cute map drawing">
+<img src="{% static 'img/drawing.png' %}" alt="Cute map drawing" id="homepageimage">
 
 <div class="btn-group">
     <a href="{% url 'encode' %}">
@@ -32,6 +32,13 @@
     font-size:25px;
     margin-top: 0px;
 }
+
+#homepageimage {
+    max-width: 80vw;
+    max-height: 50vh;
+    width: auto; height: auto;
+}
+
 </style>
 
 {% endblock %}

websiteapp/views.py

@@ -21,7 +21,7 @@ def encode_result_view(request: HttpRequest) -> HttpResponse:
         # TODO: do some nice error display
         return render(request, 'websiteapp/encode_result.html', {"result": "error"})
 
-    result = encode((lat, lon))
+    result = encode((float(lat), float(lon)))
     result_str = format_location(result)
 
     return render(request, 'websiteapp/encode_result.html', {"result": result_str})
@@ -34,10 +34,15 @@ def decode_result_view(request: HttpRequest) -> HttpResponse:
     if loc_str is None:
         # TODO: do some nice error display
         result = "error"
+        lat, lon = 0, 0
 
     else:
+        try:
             loc = parse_location(loc_str)
-        (lon, lat) = decode(loc)
-        result = f"{lon},{lat}"
+            (lat, lon) = decode(loc)
+            result = f"{lat},{lon}"
+        except ValueError:
+            result = "ERROR - invalid greggordinate!"
+            lat, lon = 0, 0
 
-    return render(request, 'websiteapp/decode_result.html', {"result": result})
+    return render(request, 'websiteapp/decode_result.html', {"result": result, "lat": lat, "lon": lon})