integrate frontend with backend

websiteapp/templates/websiteapp/decode.html

@@ -17,13 +17,17 @@
             ←
         </button>
     </a>
-    <a href="{% url 'encode_result' %}">
+    <button onclick="saveAndGo()">
-        <button onclick="saveAndGo()">
+        Get lame location :/
-            Get lame location :/
+    </button>
-        </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,40 +21,45 @@
 
 
 <script>
-    document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener("DOMContentLoaded", function () {
-        // Initialize map
+    // Initialize map
-        const map = L.map('map').setView([54.5, -3], 6); 
+    const map = L.map('map').setView([54.5, -3], 6);
 
-        // Add OpenStreetMap tiles
+    // Add OpenStreetMap tiles
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            maxZoom: 19,
+        maxZoom: 19,
-            attribution:
+        attribution:
-            '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
+        '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
-        }).addTo(map);
+    }).addTo(map);
 
-        let marker;
+    let marker;
 
-        // When the user clicks the map
+    // When the user clicks the map
-        map.on('click', function (e) {
+    map.on('click', function (e) {
-            const lat = e.latlng.lat.toFixed(6);
+        const lat = e.latlng.lat.toFixed(6);
-            const lng = e.latlng.lng.toFixed(6);
+        const lng = e.latlng.lng.toFixed(6);
 
-            // Remove existing marker (if any)
+        // Remove existing marker (if any)
-            if (marker) map.removeLayer(marker);
+        if (marker) map.removeLayer(marker);
 
-            // Add marker at clicked location
+        // Add marker at clicked location
-            marker = L.marker([lat, lng]).addTo(map);
+        marker = L.marker([lat, lng]).addTo(map);
 
-            // Show coordinates
+        // Show coordinates
-            document.getElementById('coords').textContent = `Coordinates: ${lat}, ${lng}`;
+        document.getElementById('coords').textContent = `Coordinates: ${lat}, ${lng}`;
 
-            // Save coordinates in hidden input as JSON
+        // Save coordinates in hidden input as JSON
-            const geoData = JSON.stringify({ lat: lat, lng: lng });
+        const geoData = JSON.stringify({ lat: lat, lng: lng });
-            document.getElementById('mapData').value = geoData;
+        document.getElementById('mapData').value = geoData;
 
-            console.log("Saved to hidden input:", geoData);
+        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()">
-        <button onclick="saveAndGo()">
+        GREGG IT!
-            GREGG IT!
+    </button>
-        </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,15 +3,15 @@
 
 {% 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' %}">
         <button>Encode</button>
-    </a>   
+    </a>
     <a href="{% url 'decode' %}">
         <button>Decode</button>
-    </a>   
+    </a>
 </div>
 
 <style>
@@ -19,7 +19,7 @@
     display: flex;              /* places buttons side-by-side */
     justify-content: center;    /* centers them horizontally */
     align-items: center;        /* aligns vertically */
-    gap: 30px;   
+    gap: 30px;
     margin-top: 0px;
 }
 
@@ -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:
-        loc = parse_location(loc_str)
+        try:
-        (lon, lat) = decode(loc)
+            loc = parse_location(loc_str)
-        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})