updates the html with a get map and get table approach and adds table…

… endpoint for gridcell
cdibble · Dec 28, 2022 · bca6990 · bca6990
1 parent a20c16f
commit bca6990
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 15 deletions.
diff --git a/src/ccfrp_app.py b/src/ccfrp_app.py
@@ -37,7 +37,7 @@ class TimeForm(FlaskForm):
     start_date = DateField('start_date')
     end_date = DateField('end_date')
     submit = SubmitField('Submit')
-    
+
 @app.route("/")
 def index():
     return render_template('base.html')
@@ -68,9 +68,11 @@ def make_chloropleth_length(df: pd.DataFrame, geo: geojson, locations_column:str
     fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
     # graphJSON = json.dumps([fig], cls=plotly.utils.PlotlyJSONEncoder)
     return fig
+
 ###############
 # Routes
 ###############
+# ## MAPS
 # Fish Length: Grid Cell
 @app.route("/fish/length/map/gridcell", methods = ['GET'])
 def fish_length_map_get():
@@ -160,5 +162,45 @@ def fish_length_map_area_post():
         default_end = form.data.get('end_date'),
         )
 
+# ## TABLES
+@app.route("/fish/length/table/gridcell", methods = ['GET'])
+def fish_length_table_get():
+    all_species=angler.species.Common_Name.unique()
+    TimeForm.fish_name = SelectField(u'Field name', choices = all_species, validators = [InputRequired()])
+    form = TimeForm()
+    default_start = angler.length.Date.min().date().isoformat()
+    default_end = (angler.length.Date.max() + timedelta(days=1)).date().isoformat()
+    return render_template(
+        'select_fish_gridcell.html',
+        form = form,
+        default_start = default_start,
+        default_end = default_end
+        )
+
+@app.route("/fish/length/table/gridcell", methods = ['POST'])
+def fish_length_table_post():
+    all_species=angler.species.Common_Name.unique()
+    TimeForm.fish_name = SelectField(u'Field name', choices = all_species, validators = [InputRequired()])
+    form = TimeForm()
+    df = angler.get_df(
+        type = 'length',
+        common_name=form.data.get('fish_name'),
+        start_time=form.data.get('start_date'),
+        end_time=form.data.get('end_date')
+    )
+    # fig = make_chloropleth_length(map_df, geo)
+    # graphJSON = json.dumps([fig], cls=plotly.utils.PlotlyJSONEncoder)
+    return render_template(
+        'select_fish_gridcell.html',
+        form=form,
+        table = df.to_html(),
+        # graphJSON = graphJSON,
+        # plt_html=fig.to_html(),
+        default_start = form.data.get('start_date'),
+        default_end = form.data.get('end_date'),
+        )
+
+#
+
 if __name__ == '__main__':
     app.run(debug=True, use_reloader=True)
diff --git a/src/templates/select_fish_area.html b/src/templates/select_fish_area.html
@@ -4,13 +4,18 @@
     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> -->
   </head>
   <body>
-
+  <form name="go_home" method="GET" action="/home">
+    <input type="submit" value="Go Home">
+  </form>
+  <h1>Fish Length</h1>
+  <p>Explore fish lengths across MPAs and REF (reference) areas for different regions aggregated within those areas.</p>  
   <form name="form1" method="POST" action='/fish/length/map/area'>
     <h3>Start Date. {{ form.start_date (class= "datepicker", value = default_start)}}
     &nbsp End Date. {{ form.end_date (class= "datepicker", value = default_end)}} </h3>
     <h3>Fish Species Name. {{ form.fish_name}}</h3>
-    {{ form.submit }}
-  </form>
+    <input formaction="/fish/length/map/area" type="submit" value="Get Map">
+    <input formaction="/fish/length/table/area" type="submit" value="Get Table">
+    </form>
 
 <!-- Table -->
   <div>
@@ -24,10 +29,7 @@ <h3>Fish Species Name. {{ form.fish_name}}</h3>
 <!-- Chart -->
   <div>
     <div>
-      <div id = "chart1" style = "width: 90%; height: 800px;">
-        <p>
-          Chart 1
-        </p>
+      <div id = "chart1" style = "width: 50%; height: 200px;">
       </div>
     </div>
   </div>

diff --git a/src/templates/select_fish_gridcell.html b/src/templates/select_fish_gridcell.html
@@ -4,12 +4,17 @@
     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> -->
   </head>
   <body>
-
-  <form name="form1" method="POST" action='/fish/length/map/gridcell'>
+  <form name="go_home" method="GET" action="/home">
+    <input type="submit" value="Go Home">
+  </form>
+  <h1>Fish Length</h1>
+  <p>Explore fish lengths across MPAs and REF (reference) areas for different regions for every Grid Cell sampled.</p>
+  <form name="form1" method="POST" action="">
     <h3>Start Date. {{ form.start_date (class= "datepicker", value = default_start)}}
     &nbsp End Date. {{ form.end_date (class= "datepicker", value = default_end)}} </h3>
     <h3>Fish Species Name. {{ form.fish_name}}</h3>
-    {{ form.submit }}
+    <input formaction="/fish/length/map/gridcell" type="submit" value="Get Map">
+    <input formaction="/fish/length/table/gridcell" type="submit" value="Get Table">
   </form>
 
 <!-- Table -->
@@ -24,10 +29,7 @@ <h3>Fish Species Name. {{ form.fish_name}}</h3>
 <!-- Chart -->
   <div>
     <div>
-      <div id = "chart1" style = "width: 90%; height: 800px;">
-        <p>
-          Chart 1
-        </p>
+      <div id = "chart1" style = "width: 50%; height: 200px;">
       </div>
     </div>
   </div>