Merge pull request #32 from ioos/asset_inventory

adding table filtering and searching
ioos · Aug 3, 2023 · c5ba810 · c5ba810
2 parents 1bf669c + 43edc8e
commit c5ba810
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/website/create_asset_inventory_page.py b/website/create_asset_inventory_page.py
@@ -8,6 +8,7 @@
 import plotly.express as px
 import plotly
 import folium
+from folium.plugins import Search
 
 
 def write_html_index(template, configs, org_config):
@@ -68,7 +69,7 @@ def map_plot(gdf):
 
     columns = gdf.columns.tolist()
     columns.remove('geometry')
-    #print(columns)
+
     for name, group in gdf.groupby(by='RA'):
         #group["ref"] = [f"<a href=\"{url}\" target=\"_blank\">{url}</a>" for url in group["url"]]
 
@@ -81,11 +82,20 @@ def map_plot(gdf):
 #                aliases=["",""],
             ),
             popup=folium.features.GeoJsonPopup(
-                fields=columns,
+                fields=["RA","Latitude","Longitude","station_long_name","Platform","Operational","station_deployment","RA_Funded","Raw_Vars"]#columns,
                 #aliases=[""],
             ), show=True,
         ).add_to(m)
 
+    # statesearch = Search(
+    #         layer=gdf,
+    #         geom_type="Polygon",
+    #         placeholder="Search for an RA",
+    #         collapsed=False,
+    #         search_label="RA",
+    #         weight=3,
+    #     ).add_to(m)
+
     folium.LayerControl(collapsed=True).add_to(m)
 
     m.fit_bounds(m.get_bounds())
@@ -108,8 +118,10 @@ def main(org_config):
     fig = map_plot(gdf)
 
     #print(fig)
+    columns = ["RA","Latitude","Longitude","station_long_name","Platform","Operational","station_deployment","RA_Funded","Raw_Vars"]
 
-    configs = {'table': gdf.to_html(), 'figure': fig}
+    configs = {'table': gdf.to_html(table_id="table", index=False, columns=columns),
+               'figure': fig}
 
     write_templates(configs, org_config)
 

diff --git a/website/templates/asset_inventory_page.html b/website/templates/asset_inventory_page.html
@@ -1,5 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
+<header>
+    <link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet">
+</header>
 <head>
     {#<!-- Global site tag (gtag.js) - Google Analytics --> #}
     <script async src="{{org_config.google_analytics}}"></script>
@@ -50,8 +53,19 @@ <h2 class="title">{{org_config.general_title}} <a href=https://github.com/ioos/i
 
     <div>
         {{configs.table}}
+        {% raw %}
+        <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
+        <script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
+        <script>
+        $(document).ready( function () {
+            $('#table').DataTable();
+        } );
+        let table = new DataTable('#table');
+        </script>
+        {% endraw %}
     </div>
 
+
     <div class="divider_thin"></div>