From 9fbf437731307b6bb1c5396e20b939a2ddf07c95 Mon Sep 17 00:00:00 2001
From: Thomas Kolb <cfr34k-git@tkolb.de>
Date: Tue, 14 Nov 2023 22:07:47 +0100
Subject: [PATCH] Make the website actually useful

- coordinates are no longer hardcoded
- form submission works with and without javascript
---
 static/map.js   | 13 +++++++++++--
 views/index.tpl |  4 ++--
 web.py          | 19 +++++++++++--------
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/static/map.js b/static/map.js
index 5c9a5a8..41b518b 100644
--- a/static/map.js
+++ b/static/map.js
@@ -1,7 +1,16 @@
-function update_map()
+function update_map(event)
 {
+	event.preventDefault();
+
+	var lat = document.getElementById('lat').value;
+	var lon = document.getElementById('lon').value;
+
+	request_url = new URL("/render/map.svg", document.URL);
+	request_url.searchParams.append("lat", lat);
+	request_url.searchParams.append("lon", lon);
+
 	var request = new XMLHttpRequest();
-	request.open("GET","/render/45/11.svg");
+	request.open("GET", request_url);
 
 	request.addEventListener('load', function(event) {
 		if (request.status >= 200 && request.status < 300) {
diff --git a/views/index.tpl b/views/index.tpl
index f93c5ae..73227d0 100644
--- a/views/index.tpl
+++ b/views/index.tpl
@@ -14,8 +14,8 @@
 		<h1>QSOMap: Azimuthal-equidistant SVG map generator</h1>
 		<p>Here you can generate a map in azimuthal-equidistant projections for any point on Earth. You get a map where the specified coordinate is in the center, and all other locations are projected such that locations with the same physical distance from the given coordinate are also the same distance from the center on the map.</p>
 		<p>The generated output is a Scalable Vector Graphics (SVG) image that can be edited as needed. I recommend <a href="https://inkscape.org">Inkscape</a> as an SVG editor.</p>
-		<p><strong>Please note:</strong> It may take a few seconds to generate the map. Please give it some time. The map will appear below the form.</p>
-		<form action="#" onsubmit="update_map();">
+		<p><strong>Please note:</strong> It may take a few seconds to generate the map. Please give it some time. The map will appear below the form along with a download link. If you have JavaScript disabled, the map will replace this page.</p>
+		<form action="/render/map.svg" onsubmit="update_map(event);">
 			<label for="lat">Map center latitude:</label>
 			<input type="text" id="lat" name="lat" value="49.585"><br>
 			<label for="lon">Map center longitude:</label>
diff --git a/web.py b/web.py
index d714163..d8e6eb8 100755
--- a/web.py
+++ b/web.py
@@ -1,25 +1,28 @@
 #!/usr/bin/env python3
 
-from bottle import response, route, run, template, static_file
+from bottle import Bottle, request, response, template, static_file
 from io import StringIO
 import qsomap
 
-@route('/render/<lat>/<lon>.svg')
-def render(lat, lon):
+app = application = Bottle()
+
+@app.route('/render/map.svg')
+def render():
     svg_stream = StringIO()
-    qsomap.render(float(lat), float(lon), svg_stream, None)
+    qsomap.render(float(request.query.lat), float(request.query.lon), svg_stream, None)
     response.content_type = 'image/svg+xml'
     return svg_stream.getvalue()
 
 
-@route('/')
-@route('/index.html')
+@app.route('/')
+@app.route('/index.html')
 def index():
     return template('index')
 
 
-@route('/static/<filename:path>')
+@app.route('/static/<filename:path>')
 def send_static(filename):
     return static_file(filename, root='./static')
 
-run(host='localhost', port=8080)
+if __name__ == "__main__":
+    app.run(host='localhost', port=8080)