improve map styling for the phase list view + add table next to the m…

…ap + facelift to navbar and other style improvments

asset_dashboard/static/css/app.css

@@ -23,3 +23,7 @@ input[type="checkbox"] {
 .map-container {
     height: 80vh;
 }
+
+.map-thumbnail {
+    height: 40vh;
+}

asset_dashboard/static/js/PortfolioPlanner.js

@@ -391,7 +391,7 @@ class PortfolioPlanner extends React.Component {
                   <CSVLink
                     data={this.state.portfolio.projects}
                     filename={`CIP-${this.getDate()}`}
-                    className='btn btn-primary mx-auto'
+                    className='btn btn-info mx-auto'
                     >
                       Export as CSV
                   </CSVLink>

asset_dashboard/static/js/components/BaseTable.js

@@ -64,9 +64,9 @@ const BaseTable = ({ rows = [], columns, getTrProps = props => props, rowClassNa
 
       <div className="row container" aria-label="Pagination for all potential projects.">
           <div className="d-flex col align-items-center ml-2">
-            <small className="text-muted">Pages {pageIndex + 1} of {pageOptions.length > 0 ? pageOptions.length : 1 }</small>
+            <small className="text-muted mb-3">Pages {pageIndex + 1} of {pageOptions.length > 0 ? pageOptions.length : 1 }</small>
           </div>
-          <ul className="pagination col d-flex align-items-center mb-0">
+          <ul className="pagination col d-flex align-items-center justify-content-center">
             <li className="page-item">
               <button onClick={() => gotoPage(0)} disabled={!canPreviousPage} className="btn btn-light btn-sm">
                 {'<<'}

asset_dashboard/static/js/components/maps/ListAssetsMap.js

@@ -4,6 +4,9 @@ import BaseMap from './BaseMap'
 import { GeoJSON } from 'react-leaflet'
 import zoomToExistingGeometries from '../map_utils/zoomToExistingGeometries'
 import circleMarker from '../map_utils/circleMarker'
+import ReactTable from '../BaseTable'
+import existingAssetsColumns from '../table_utils/existingAssetsColumns'
+import bindPopup from '../map_utils/bindPopup'
 
 function ListAssetsMap(props) {
 
@@ -13,21 +16,42 @@ function ListAssetsMap(props) {
   }
 
   return (
-    <div className='map-container border border-secondary rounded'>
-      <BaseMap
-      center={[41.8781, -87.6298]}
-      zoom={11}
-      whenCreated={onMapCreated}>
-        {
-          props?.assets && 
-            <GeoJSON 
-              data={props.assets} 
-              style={{color: 'green'}} 
-              pointToLayer={circleMarker}
-            />
-        }
-      </BaseMap>
-    </div>
+    <>
+      {
+        props?.assets && 
+          <div className='border border-secondary rounded'>
+            <div className='row'>
+              <div className='col-4 m-3'>
+                <div className="d-flex align-items-center justify-content-between m-2">
+                  <h3>Phase Assets</h3>
+                  <a href={`${window.location.href}assets`} class="btn btn-warning ml-4">Edit Assets ></a>
+                </div>
+                <div className='map-thumbnail'>
+                  <BaseMap
+                    center={[41.8781, -87.6298]}
+                    zoom={11}
+                    whenCreated={onMapCreated}>
+                    <GeoJSON 
+                      data={props.assets} 
+                      style={{color: 'green'}} 
+                      pointToLayer={circleMarker}
+                      onEachFeature={bindPopup}
+                    />
+                  </BaseMap>
+                </div>
+              </div>
+              <div className='col m-3'>
+                <ReactTable 
+                  rows={props.assets.features}
+                  columns={React.useMemo(() =>  existingAssetsColumns(), [])}
+                  pageSizeIncrements={[10]}
+                  sizeOfPage={10}
+                />
+              </div>
+            </div>
+          </div>
+      }
+    </>
   )
 }
 

asset_dashboard/static/js/components/maps/SelectAssetsMap.js

@@ -228,14 +228,14 @@ function SelectAssetsMap(props) {
           </div>
         </div>
         <div className='col'>
-          <div className='card text-center bg-light mb-3 border-secondary'>
+          <div className='card text-center bg-light mb-4 border-secondary'>
             <div className='card-body'>
               <h2 className='card-title'>{props.phase_name}</h2>
                 <div className=''>
                   {geomsToSave 
                     ?
                       <button 
-                        className='btn btn-primary'
+                        className='btn btn-info'
                         onClick={() => saveGeometries()}>
                         Save Assets
                       </button>

asset_dashboard/static/js/components/table_utils/existingAssetsColumns.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 const existingAssetsColumns = (handleDelete) => {
-  return [
+  let columns = [
     {
       Header: 'Identifier',
       accessor: 'properties.asset_id'
@@ -13,8 +13,11 @@ const existingAssetsColumns = (handleDelete) => {
     {
       Header: 'Type',
       accessor: 'properties.asset_type'
-    },
-    {
+    }
+  ]
+
+  if (handleDelete) {
+    columns.push({
       Header: () => null,
       accessor: 'id',
       disableSortBy: true,
@@ -23,8 +26,10 @@ const existingAssetsColumns = (handleDelete) => {
                         onClick={() => handleDelete(props.value)}>
                           <i className='fas fa-trash'></i> Delete
                       </button>)
-    }
-  ]
+    })
+  }
+
+  return columns
 }
 
 export default existingAssetsColumns

asset_dashboard/static/scss/custom.scss

@@ -1,4 +1,4 @@
-$trees: #2b491c;
+$trees: #445721;
 $words: #203700;
 $path: #7e9137;
 $maroon: #9e0b0f;

asset_dashboard/templates/asset_dashboard/base.html

@@ -36,10 +36,15 @@
   </head>
 
   <body class="bg-light">
-    <nav class="navbar navbar-expand-lg navbar-light justify-content-between border-bottom shadow-sm bg-info">
+    <nav class="navbar navbar-expand-lg navbar-light justify-content-between border-bottom shadow-sm bg-primary">
 
-      <a class="navbar-brand text-light" href="{% url 'projects' %}">
-        Forest Preserves of Cook County
+      <a href="{% url 'projects' %}">
+        <img
+          class="m-2"
+          style="height:70px"
+          src="{% static 'images/fpdcc-logo.png' %}"
+          alt="Forest Preserves of Cook County"
+        />
       </a>
 
       <div class="nav-item justify-content-right">

asset_dashboard/templates/asset_dashboard/partials/forms/add_edit_phase_form.html

@@ -13,7 +13,7 @@
   {{ finances_form.errors }}
 
   <div class="text-right">
-    <input type="submit" value="Save Phase" class="btn btn-primary">
+    <input type="submit" value="Save Phase" class="btn btn-info">
   </div>
 
   <div class="row m-4">
@@ -62,11 +62,11 @@
 {% endif %}
 
 {% if phase %}
-  <div>
-    <div class="d-flex justify-content-between align-items-center mb-2">
-      <h4 class="col-2">Phase Assets</h4>
-      <a href="{% url 'create-update-assets' pk=phase.id %}" class="btn btn-warning">Edit Assets ></a>
-    </div>
+  <div class="">
+    <!-- <div class="d-flex align-items-center m-2 col">
+      <h4 class="my-2 mr-4">Phase Assets</h4>
+      <a href="{% url 'create-update-assets' pk=phase.id %}" class="btn btn-warning ml-4">Edit Assets ></a>
+    </div> -->
 
 
     <div id="map">

asset_dashboard/templates/asset_dashboard/partials/forms/add_project_modal_form.html

@@ -2,7 +2,7 @@
 <div class="modal fade" id="projectForm" tabindex="-1" aria-labelledby="projectFormLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
-      <div class="modal-header bg-info">
+      <div class="modal-header bg-primary">
         <h1 class="modal-title text-light" id="projectFormLabel">Add Project</h1>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
@@ -34,7 +34,7 @@ <h1 class="modal-title text-light" id="projectFormLabel">Add Project</h1>
             </div>
 
             <div class="d-flex justify-content-end">
-              <input type="submit" value="Add Project" class="btn btn-primary">
+              <input type="submit" value="Add Project" class="btn btn-info">
             </div>
 
           </form>

asset_dashboard/templates/asset_dashboard/partials/forms/edit_project_form.html

@@ -14,7 +14,7 @@
         </div>
 
         <div class="col-lg-2 col-md-12 d-flex justify-content-center align-items-end">
-            <input type="submit" value="Save Project" class="btn btn-primary">
+            <input type="submit" value="Save Project" class="btn btn-info">
         </div>
     </div>
     <div class="row">

asset_dashboard/templates/asset_dashboard/projects.html

@@ -8,7 +8,7 @@
     <div class="row row d-flex justify-content-center">
       <h1 class="col-8">Capital Projects</h1>
       <div class="col-2 d-flex justify-content-end align-items-center">
-        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#projectForm">
+        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#projectForm">
           Add Project
         </button>
       </div>

asset_dashboard/templates/registration/login.html

@@ -29,7 +29,7 @@ <h2 class="text-center">Login</h2>
 
                     <div class="text-center m-2">
                         {% csrf_token %}
-                        <button type="submit" class="btn btn-primary">Login</button>
+                        <button type="submit" class="btn btn-info">Login</button>
                     </div>
                 </form>
             </div>

asset_dashboard/views.py

@@ -271,7 +271,8 @@ def get_context_data(self, **kwargs):
 
         if assets.exists():
             context['props'] = {
-                'assets': LocalAssetReadSerializer(assets, many=True).data
+                'assets': LocalAssetReadSerializer(assets, many=True).data,
+                'phase_id': self.object.id
             }
 
         return context