Use templates for `<select>` options

templates/boxplot.html

@@ -8,6 +8,7 @@
   <div>
     <select id="name" onchange="boxplotGetYears()">
       <option value="">Select Station</option>
+      {% include 'station-options.html' %}
     </select>
   </div>
   <div>
@@ -23,9 +24,7 @@
   <div>
     <select id="measurement">
       <option value="">Select Measurement</option>
-      <option value="temperature">Temperature</option>
-      <option value="pressure">Pressure</option>
-      <option value="wind-speed">Wind Speed</option>
+      {% include 'measurement-options.html' +%}
     </select>
   </div>
 

templates/index.html

@@ -8,6 +8,7 @@
   <div>
     <select id="name" onchange="indexGetYears()">
       <option value="">Select Station</option>
+      {% include 'station-options.html' %}
     </select>
   </div>
   <div>
@@ -18,9 +19,7 @@
   <div>
     <select id="measurement">
       <option value="">Select Measurement</option>
-      <option value="temperature">Temperature</option>
-      <option value="pressure">Pressure</option>
-      <option value="wind-speed">Wind Speed</option>
+      {% include 'measurement-options.html' +%}
     </select>
   </div>
 

templates/measurement-options.html

+      <option value="temperature">Temperature</option>
+      <option value="pressure">Pressure</option>
+      <option value="wind-speed">Wind Speed</option>

templates/overlay.html

@@ -8,6 +8,7 @@
   <div>
     <select id="name-1" onchange="overlayGetYears()">
       <option value="">Select Station #1</option>
+      {% include 'station-options.html' %}
     </select>
   </div>
   <div>
@@ -18,9 +19,7 @@
   <div>
     <select id="measurement">
       <option value="">Select Measurement</option>
-      <option value="temperature">Temperature</option>
-      <option value="pressure">Pressure</option>
-      <option value="wind-speed">Wind Speed</option>
+      {% include 'measurement-options.html' +%}
     </select>
   </div>
 
@@ -42,6 +41,7 @@
   <div>
     <select id="name-2" onchange="overlayGetYears2()">
       <option value="">Select Station #2</option>
+      {% include 'station-options.html' %}
     </select>
   </div>
   <div>

templates/station-options.html

+{% for station in g.stations %}
+      <option value="{{ station['name'] | e }}">
+        {{- station['name'] | e -}}
+      </option>
+{% endfor %}

visualizer.py

@@ -10,7 +10,7 @@ from types import SimpleNamespace
 from urllib.request import urlopen
 from wsgiref.handlers import CGIHandler
 
-from flask import abort, Flask, jsonify, render_template, request, Response
+from flask import abort, Flask, g, jsonify, render_template, request, Response
 import matplotlib
 import matplotlib.pyplot as plt
 import numpy as np
@@ -80,6 +80,9 @@ SOUTH_POLE_DATA = asccol.DataSpec(
 
 app = Flask(__name__)
 
+app.jinja_env.trim_blocks = True
+app.jinja_env.lstrip_blocks = True
+
 plt.style.use('ggplot')
 plt.rcParams['axes.xmargin'] = 0
 matplotlib.use('Agg')
@@ -87,16 +90,19 @@ matplotlib.use('Agg')
 
 @app.route('/')
 def home():
+    g.stations = get_records()
     return render_template('index.html')
 
 
 @app.route('/overlay')
 def overlay():
+    g.stations = get_records()
     return render_template('overlay.html')
 
 
 @app.route('/boxplot')
 def boxplot():
+    g.stations = get_records()
     return render_template('boxplot.html')