add theme to the card and fix the layout for the filter

SeaBee-no · Feb 20, 2024 · 25aa773 · 25aa773
1 parent 172e339
commit 25aa773
Show file tree

Hide file tree

Showing 9 changed files with 8,998 additions and 8,901 deletions.
diff --git a/geonode/dmc/tempfolder/geonodeLayers.json b/geonode/dmc/tempfolder/geonodeLayers.json
diff --git a/geonode/geoviz/static/mapMyDrone/css/mapMyPlace.css b/geonode/geoviz/static/mapMyDrone/css/mapMyPlace.css
@@ -51,6 +51,8 @@ background-color: white;
 }
 
 
+/* ##################### datatable css start #################### */
+
 .dataTableStyle td {
     font-size: 14px; /* Change this value to your preferred font size */
 }
@@ -62,20 +64,60 @@ background-color: white;
     cursor: pointer;
 }
 
+.biStyle{
+    font-size: 15px;
+    color: #007bff;
+}
 
 .biStyle:hover {
     cursor: pointer;
 }
 
+/* center the datatable cell contant of secnd row */
+.dataTables_wrapper .dataTable td:nth-child(2) {
+    text-align: center;
+    vertical-align: middle;
+}
 
 
-
+.dataTables_wrapper .dataTable thead th {
+    background-color:#004C73;  /* Adjust color as needed */
+    color: white;
+}
 
 div.dataTables_wrapper div.dataTables_info {
-    padding-top: 0.85em;
-    font-size: 0.75em;
+
+    font-size: 0.7em;
+}
+
+
+.dataTables_wrapper .dataTables_paginate .paginate_button .page-link {
+    font-size: 0.9em;  /* Adjust as needed */
+
+}
+
+
+.dataTables_wrapper .dataTables_length {
+    font-size: 0.8em;  /* Adjust as needed */
 }
 
+.dataTables_wrapper .dataTables_filter {
+    font-size: 0.8em;  /* Adjust as needed */
+}
+
+
+/* ############ datatable css end */
+
+
+
+
+#mapModelopt  .modal-header:hover {
+
+    cursor: move !important;
+
+}
+
+
 .uppertext{
     text-transform: uppercase;
 }

diff --git a/geonode/geoviz/static/mapMyDrone/js/mapMyPlace.js b/geonode/geoviz/static/mapMyDrone/js/mapMyPlace.js
@@ -316,6 +316,11 @@ otterLayer = L.layerGroup();
         map.removeLayer(circleMarker);
       }
 
+      //remove the overlay layer
+      if (map.hasLayer(GN_Overlay_layer)) {
+        map.removeLayer(GN_Overlay_layer);
+      }
+
 
       // unlock the table update 
     dynamicTableUpdateFlag = true;
@@ -550,6 +555,8 @@ otterLayer = L.layerGroup();
         "#",
         "DLB_layer"],
          "#",
+         "#",
+          "#",
         );
 
     });
@@ -629,15 +636,19 @@ otterLayer = L.layerGroup();
       markersAll.addLayer(markerGN);
 
       // droneDataTable add data
-      droneDataTable.push([el.Name, `<i type="GN"  class="bi bi-info-circle-fill biStyle text-primary opacity-75"></i>`,
+      droneDataTable.push([
+      el.Name, 
+      `<i type="GN"  class="bi bi-info-square-fill biStyle text-primary opacity-75"></i>`,
       elxy.lat,
       elxy.log,
       el.thumbnail_url,
       el.detail_url,
       el.uuid,
       el.abstract_table,
         "GN_layer",
-        el.thumbnail_url_compress,]);
+        el.thumbnail_url_compress,
+      el.flight_date,
+    el.theme,]);
 
 
     });
@@ -695,20 +706,28 @@ otterLayer = L.layerGroup();
         { data: 0, 
           title: "Name",
           render: (data, type, row)=> {
-            let title = (data.replace(/_/g, ' '))
+
 
 
-            return `
+            return  `
+
 
         <div class="card-user-list">
             <div class="row g-0">
-                <div class="col-2 text-center align-self-center">
-                      <img style="width: 75px; height:75px; object-fit:cover" class="rounded-circle ratio ratio-1x1 p-0 m-0" 
-                src="${row[9]}" alt="seabee">
+                <div class="col-2 text-center align-self-center">    
+                  <img loading="lazy" style="width: 75px; height:75px; object-fit:cover" 
+                  class="  rounded-circle ratio ratio-1x1 p-0 m-0" 
+                  src="${ row[9] }" alt="seabee">
                 </div>
                 <div class="col-10">
                     <div class="card-body">
-                        <h6 class="card-title m-0">${title}</h6>
+                        <h6 class="card-title m-0 text-info-emphasis">${toTitleCase(data)}</h6>
+                        <div class="hstack gap-2 ps-4 pt-2">
+                          <div class="p-2 text-dark fst-italic">Flight date: <span class="text-warning-emphasis" >${ formatDate(row[10]) }</span></div>
+                          <div class="p-2 fst-italic">Theme: ${ themeColorbadges(row[11]) }  </div>
+                     
+                        </div>
+
                     </div>
                 </div>
             </div>
@@ -725,7 +744,7 @@ otterLayer = L.layerGroup();
       ],
       data: dataSet,
       bDestroy: true,
-      pageLength: 25,
+      pageLength: 35,
       paging: true,
       select: true,
       scrollY: '80vh',
@@ -820,9 +839,10 @@ otterLayer = L.layerGroup();
 
 
 
+
   // model parameter 
   const modelparaSetting = (data) => {
-    $("#mapModelopt .modal-title").text(data[0]);
+    $("#mapModelopt .modal-title").text(toTitleCase(data[0]));
     $("#mapModelopt .img-fluid").attr("src", data[4].length > 0 ? data[4][0] : '#');
 
     // store info at valaue
@@ -1268,6 +1288,8 @@ map.on('zoomend', function() {
 
     }
 
+
+
   });
 
 
@@ -1325,7 +1347,53 @@ map.on('zoomend', function() {
   }
 
 
+  $("#mapModelopt").draggable({
+    handle: ".modal-dialog"
+});
 
 });
 
 
+// string to title case
+const toTitleCase = (str)=> {
+
+  return str.replace(/_/g, ' ')
+  .toLowerCase().split(' ')
+  .map(word => word.charAt(0)
+  .toUpperCase() + word.slice(1)).join(' ');
+}
+
+
+
+const formatDate = (dateStr) => {
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+  let date = new Date(dateStr);
+
+  let day = date.getDate();
+  let month = months[date.getMonth()];
+  let year = date.getFullYear();
+
+  // Pad the day with a leading zero if necessary
+  day = day < 10 ? '0' + day : day;
+
+  return `${day}${month}${year}`;
+}
+
+
+const themeColorbadges  = (themeVal) => {
+
+let theme = themeVal.toLowerCase();
+
+switch (theme) {
+  case "seabirds":
+    return `<span class="badge rounded-pill bg-info-subtle  text-success-emphasis">${toTitleCase(theme)}</span>`;
+    break;
+  case "habitat":
+    return `<span class="badge rounded-pill text-bg-success" style="--bs-bg-opacity: .8;">${toTitleCase(theme)}</span>`;
+    break;
+  default:
+    return `<span class="badge rounded-pill text-bg-dark" style="--bs-bg-opacity: .6;">Other</span>`;
+}
+
+}
diff --git a/geonode/geoviz/templates/mapMyDrone/geoviz_filterInfo.html b/geonode/geoviz/templates/mapMyDrone/geoviz_filterInfo.html
@@ -1,31 +1,43 @@
 {% load static %}
 
-<div style="height: 5vh;">
-<div class="card rounded-0 p-0 m-0 ">
-  <div class="card-body p-0 m-0 " id="titleCard">
-    <div class="row">
-      <div class="col-6 align-self-center">
-        <img width="200px" src="{% static 'mapstore/img/geonode-logo.svg' %}" class="img-fluid p-0 m-0 float-start"
-          alt="seabee">
-      </div>
 
-      <div class="col-5 align-self-center text-end">
-        <a href="{% url 'home' %}" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover"><i class="bi bi-house-door-fill"></i></a>
-      </div>
 
-      <div class="col-1 align-self-center ">
-        <a href="#" id="leftPanelClose" class="text-secondary float-end pe-2" data-bs-target="#sidebar"
-          data-bs-toggle="collapse"><i class="bi bi-x-circle bi-lg"></i></a>
+
+
+
+
+
+
+
+
+
+
+
+
+<div class=" overflow-hidden  p-1 w-100 " style="height: 100vh;">
+
+  <div class="card rounded-0 p-0 m-0 mb-2">
+    <div class="card-body p-0 m-0 " id="titleCard">
+      <div class="row">
+        <div class="col-6 align-self-center">
+          <img width="200px" src="{% static 'mapstore/img/geonode-logo.svg' %}" class="img-fluid p-0 m-0 float-start"
+            alt="seabee">
+        </div>
+
+        <div class="col-5 align-self-center text-end">
+          <a href="{% url 'home' %}" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover"><i class="bi bi-house-door-fill"></i></a>
+        </div>
+
+        <div class="col-1 align-self-center ">
+          <a href="#" id="leftPanelClose" class="text-secondary float-end pe-2" data-bs-target="#sidebar"
+            data-bs-toggle="collapse"><i class="bi bi-x-circle bi-lg"></i></a>
+        </div>
       </div>
     </div>
   </div>
-</div>
-</div>
-
 
-<div class=" overflow-y-scroll overflow-x-hidden pt-3 ps-1" style="height: 95vh;">
 
-<table id="droneList" class="table dataTableStyle table-hover table-striped "></table>
+<table id="droneList" class="table dataTableStyle table-hover table-striped"></table>
 </div>
 <!-- <div class=" overflow-y-scroll overflow-x-hidden pt-3 ps-1" style="height: 25vh;">
 

diff --git a/geonode/geoviz/templates/mapMyDrone/geoviz_mapInfo.html b/geonode/geoviz/templates/mapMyDrone/geoviz_mapInfo.html
@@ -12,10 +12,27 @@ <h2 id="testDiv" >Map area to be added </h2>
     
     </div> -->
 
-    <div id="mapD">
+    <div id="mapD" >
         <a href="#"
         class=" d-none d-md-block position-absolute top-50 start-0 translate-middle-y border rounded-3 p-1 text-decoration-none"
         id="panelBtn" data-bs-target="#sidebar" data-bs-toggle="collapse" style="z-index: 999;"><i
             class="bi bi-caret-left-fill bi-lg py-2 p-1"></i></a>
+
+
     </div>
 
+    <!-- <div class="w-100 text-center" style="z-index: 99;">
+                <div class="btn-group w-75 ps-2 pe-2 mt-2 mb-2 " role="group" aria-label="Basic radio toggle button group" style="height: 4vh;">
+                  
+                  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
+                  <label class="btn btn-outline-primary" for="btnradio1">Seabirds</label>
+                  
+                
+                  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
+                  <label class="btn btn-outline-primary" for="btnradio2">Habitats</label>
+                
+                  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
+                  <label class="btn btn-outline-primary" for="btnradio3">All</label>
+                  
+                </div>
+              </div> -->
diff --git a/geonode/geoviz/templates/mapMyDrone/index_geoviz_mymap.html b/geonode/geoviz/templates/mapMyDrone/index_geoviz_mymap.html
@@ -156,6 +156,7 @@ <h6 class="modal-title  mt-3 text-primary-emphasis">title</h6>
 </script>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script
   src="https://cdn.datatables.net/v/bs5/dt-1.13.6/af-2.6.0/cr-1.7.0/date-1.5.1/fc-4.3.0/fh-3.4.0/kt-2.10.0/r-2.5.0/rg-1.4.0/rr-1.4.1/sc-2.2.0/sb-1.5.0/sp-2.2.0/sl-1.7.0/sr-1.3.0/datatables.min.js"></script>
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"

diff --git a/geonode/geoviz/views.py b/geonode/geoviz/views.py
@@ -14,6 +14,7 @@
 from .models import *
 
 
+
 jsonPath=""
 #inside geonode enviroment 
 jsonPath_test=Path.joinpath(conf_settings.BASE_DIR, 'geonode' ,'dmc','tempfolder')
@@ -97,8 +98,9 @@ def get(self, request, format=None):
                      ],
                     "uuid": record["object_uuid"],
                     "json_org":"GN",
-                    "Theme":record["Theme"],
-                    "thumbnail_url_compress":record["thumbnail_url"]
+                    "theme":record["Theme"],
+                    "thumbnail_url_compress":record["thumbnail_url"],
+                    "flight_date":record["flight_date"],
 
                 }
                 for record in obj
@@ -230,4 +232,7 @@ def get(self, request ):
 
             except Exception as e:
                 print(e, flush=True)
-                return Response('something went wrong')
+                return Response('something went wrong')
+
+
+
diff --git a/geonode/jobs/jobs.py b/geonode/jobs/jobs.py
@@ -6,6 +6,7 @@
 from shapely.geometry import Polygon
 import uuid
 from bs4 import BeautifulSoup
+import re
 
 jsonPath=""
 #inside geonode enviroment 
@@ -113,13 +114,23 @@ def schedule_geonodeLayers_api():
                 for el in  json_obj['resources']:
                     el["bbx_xy"] =  bounding_box_to_centroid(el['ll_bbox_polygon']['coordinates'][0])
                     el['object_uuid'] = str(uuid.uuid4())
+
+                    # capture the theme from the abstract
                     if len(el['abstract']) > 0 and (el['abstract']).count('Theme') > 0:
                              soup = BeautifulSoup(el['abstract'], 'html.parser')
                              theme_row = soup.find('th', string='Theme').find_next('td')
                              theme_value = theme_row.text.strip()
                              el["Theme"] = theme_value
                     else:
-                        el["Theme"] = '' 
+                        el["Theme"] = ''
+
+                    # capture the flight date from the abstract
+                    matchDate = re.search(r'\d{4}-\d{2}-\d{2}', el['abstract'])
+                    if matchDate:
+                        dateMatch = matchDate.group()
+                        el["flight_date"] = dateMatch 
+                    else:
+                        el["flight_date"] = ''  
 
 
                 jsondata = jsondata + json_obj['resources']