@@ -391,7 +391,7 @@ class PortfolioPlanner extends React.Component {
Export as CSV
diff --git a/asset_dashboard/static/js/components/BaseTable.js b/asset_dashboard/static/js/components/BaseTable.js
index 29f94d59..71c2033c 100644
--- a/asset_dashboard/static/js/components/BaseTable.js
+++ b/asset_dashboard/static/js/components/BaseTable.js
@@ -1,52 +1,13 @@
import React from 'react'
import { useTable, usePagination, useSortBy } from 'react-table'
-const BaseTable = ({ rows = [], getTrProps = props => props, rowClassNames, selector }) => {
+const BaseTable = ({ rows = [], columns, getTrProps = props => props, rowClassNames, cellClassNames, sizeOfPage=15, pageSizeIncrements=[15, 30, 45] }) => {
+
const data = React.useMemo(
- () => rows.map((project) => {
- return project
+ () => rows.map((row) => {
+ return row
}), [rows])
- const columns = React.useMemo(
- () => [
- {
- Header: () => null,
- id: 'selector',
- Cell: selector ? selector :
,
- disableSortBy: true
- },
- {
- Header: 'Name',
- accessor: 'name'
- },
- {
- Header: 'Description',
- accessor: 'description',
- },
- {
- Header: 'Total Score',
- accessor: 'score',
- },
- {
- Header: 'Total Budget',
- accessor: 'budget',
- },
- {
- Header: 'Phase',
- accessor: 'phase'
- },
- {
- Header: () => null,
- accessor: 'key',
- disableSortBy: true,
- Cell: props =>
e.stopPropagation()}
- className='btn btn-outline-dark btn-sm'
- target="_blank">View Project
- }
- ], []
- )
-
const {
getTableProps,
getTableBodyProps,
@@ -62,7 +23,7 @@ const BaseTable = ({ rows = [], getTrProps = props => props, rowClassNames, sel
previousPage,
setPageSize,
state: { pageIndex, pageSize },
- } = useTable({ columns, data, initialState: { pageIndex: 0, pageSize: 15 }}, useSortBy, usePagination)
+ } = useTable({ columns, data, initialState: { pageIndex: 0, pageSize: sizeOfPage }}, useSortBy, usePagination)
return (
@@ -89,7 +50,7 @@ const BaseTable = ({ rows = [], getTrProps = props => props, rowClassNames, sel
key={i} className={rowClassNames ? `${rowClassNames} cursor-pointer` : 'cursor-pointer'}>
{row.cells.map(cell => {
return (
-
+ |
{cell.render('Cell')}
|
)
@@ -102,11 +63,10 @@ const BaseTable = ({ rows = [], getTrProps = props => props, rowClassNames, sel
-
-
Pages {pageIndex + 1} of {pageOptions.length}
+
+ Pages {pageIndex + 1} of {pageOptions.length > 0 ? pageOptions.length : 1 }
-
-
+
-
-
- {[15, 30, 45].map(pSize => (
- -
-
-
- ))}
-
+ {pageSizeIncrements.length > 1 &&
+
+ {
+ pageSizeIncrements.map(pSize => (
+ -
+
+
+ ))
+ }
+
+ }
)
diff --git a/asset_dashboard/static/js/components/PortfolioTable.js b/asset_dashboard/static/js/components/PortfolioTable.js
index 7541a58c..97e4a849 100644
--- a/asset_dashboard/static/js/components/PortfolioTable.js
+++ b/asset_dashboard/static/js/components/PortfolioTable.js
@@ -3,8 +3,9 @@ import ReactTable from './BaseTable'
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
import InputGroup from 'react-bootstrap/InputGroup'
+import projectColumns from './table_utils/projectColumns'
-const PortfolioTable = ({ portfolio, columns, onRemoveFromPortfolio, savePortfolioName, savePortfolio, createNewPortfolio }) => {
+const PortfolioTable = ({ portfolio, onRemoveFromPortfolio, savePortfolioName, savePortfolio, createNewPortfolio }) => {
const [edit, setEdit] = useState(portfolio.name ? false : true)
const onRowClick = ({ original }) => {
@@ -27,6 +28,14 @@ const PortfolioTable = ({ portfolio, columns, onRemoveFromPortfolio, savePortfol
).catch(err => console.error(err))
}
+ const selector = () => {
+ return (
+
+
+
+ )
+ }
+
return (
{!edit &&
@@ -97,17 +106,10 @@ const PortfolioTable = ({ portfolio, columns, onRemoveFromPortfolio, savePortfol
}
projectColumns(selector), [])}
rows={portfolio.projects}
getTrProps={onRowClick}
rowClassNames='table-info'
- selector={() => {
- return (
-
-
-
- )
- }}
/>
)
diff --git a/asset_dashboard/static/js/components/ProjectsTable.js b/asset_dashboard/static/js/components/ProjectsTable.js
index c8704345..304cbbb4 100644
--- a/asset_dashboard/static/js/components/ProjectsTable.js
+++ b/asset_dashboard/static/js/components/ProjectsTable.js
@@ -1,7 +1,8 @@
import React from 'react'
import ReactTable from './BaseTable'
+import projectColumns from './table_utils/projectColumns'
-const ProjectsTable = ({ allProjects, columns, onAddToPortfolio, searchInput }) => {
+const ProjectsTable = ({ allProjects, onAddToPortfolio, searchInput }) => {
const onRowClick = ({ original }) => {
return {
onClick: e => {
@@ -10,6 +11,14 @@ const ProjectsTable = ({ allProjects, columns, onAddToPortfolio, searchInput })
}
}
+ const selector = () => {
+ return (
+
+
+
+ )
+ }
+
return (
<>
@@ -19,15 +28,9 @@ const ProjectsTable = ({ allProjects, columns, onAddToPortfolio, searchInput })
projectColumns(selector), [])}
getTrProps={onRowClick}
- selector={() => {
- return (
-
-
-
- )
- }} />
+ />
)
}
diff --git a/asset_dashboard/static/js/components/FilterComponent.js b/asset_dashboard/static/js/components/SearchInput.js
similarity index 61%
rename from asset_dashboard/static/js/components/FilterComponent.js
rename to asset_dashboard/static/js/components/SearchInput.js
index 236fe49f..2ea9b480 100644
--- a/asset_dashboard/static/js/components/FilterComponent.js
+++ b/asset_dashboard/static/js/components/SearchInput.js
@@ -18,17 +18,17 @@ const TextField = styled.input`
`;
const SearchInput = ({ filterText, onFilter }) => {
- return (
-
-
-
- )
- }
+ return (
+
+
+
+ )
+}
export default SearchInput
diff --git a/asset_dashboard/static/js/components/helpers/Message.js b/asset_dashboard/static/js/components/helpers/Message.js
new file mode 100644
index 00000000..93ab1478
--- /dev/null
+++ b/asset_dashboard/static/js/components/helpers/Message.js
@@ -0,0 +1,16 @@
+import React from 'react'
+
+export default function Message({ text, messageTag, onCloseMessage }) {
+ return (
+
+
+ {text}
+
+ )
+}
diff --git a/asset_dashboard/static/js/components/map_utils/EditControl.js b/asset_dashboard/static/js/components/map_utils/EditControl.js
new file mode 100644
index 00000000..9e8a2617
--- /dev/null
+++ b/asset_dashboard/static/js/components/map_utils/EditControl.js
@@ -0,0 +1,150 @@
+// Code source: https://github.com/alex3165/react-leaflet-draw/blob/21b65921e6e32217f964e36dc32646a4541b4f92/src/EditControl.js#L1
+// We couldn't import the code from npm due to some incompatibilites with the react-leaflet-draw library
+// and the react-leaflet library. See https://github.com/alex3165/react-leaflet-draw/issues/52 and https://github.com/alex3165/react-leaflet-draw/issues/97.
+
+import { PropTypes } from 'prop-types';
+import Draw from 'leaflet-draw'; // eslint-disable-line
+import isEqual from 'fast-deep-equal';
+import React, { useRef } from 'react';
+import { useLeafletContext } from '@react-leaflet/core';
+
+import leaflet, { Map, Control } from 'leaflet';
+
+const eventHandlers = {
+ onEdited: 'draw:edited',
+ onDrawStart: 'draw:drawstart',
+ onDrawStop: 'draw:drawstop',
+ onDrawVertex: 'draw:drawvertex',
+ onEditStart: 'draw:editstart',
+ onEditMove: 'draw:editmove',
+ onEditResize: 'draw:editresize',
+ onEditVertex: 'draw:editvertex',
+ onEditStop: 'draw:editstop',
+ onDeleted: 'draw:deleted',
+ onDeleteStart: 'draw:deletestart',
+ onDeleteStop: 'draw:deletestop',
+};
+
+function EditControl(props) {
+ const context = useLeafletContext();
+ const drawRef = useRef();
+ const propsRef = useRef(props);
+
+ const onDrawCreate = (e) => {
+ const { onCreated } = props;
+ const container = context.layerContainer || context.map;
+ container.addLayer(e.layer);
+ onCreated && onCreated(e);
+ };
+
+ React.useEffect(() => {
+ const { map } = context;
+ const { onMounted } = props;
+
+ for (const key in eventHandlers) {
+ map.on(eventHandlers[key], (evt) => {
+ let handlers = Object.keys(eventHandlers).filter(
+ (handler) => eventHandlers[handler] === evt.type
+ );
+ if (handlers.length === 1) {
+ let handler = handlers[0];
+ props[handler] && props[handler](evt);
+ }
+ });
+ }
+ map.on(leaflet.Draw.Event.CREATED, onDrawCreate);
+ drawRef.current = createDrawElement(props, context);
+ map.addControl(drawRef.current);
+ onMounted && onMounted(drawRef.current);
+
+ return () => {
+ map.off(leaflet.Draw.Event.CREATED, onDrawCreate);
+
+ for (const key in eventHandlers) {
+ if (props[key]) {
+ map.off(eventHandlers[key], props[key]);
+ }
+ }
+ };
+ }, []);
+
+ React.useEffect(() => {
+ if (
+ isEqual(props.draw, propsRef.current.draw) &&
+ isEqual(props.edit, propsRef.current.edit) &&
+ props.position === propsRef.current.position
+ ) {
+ return
+ }
+ const { map } = context;
+
+ drawRef.current.remove(map);
+ drawRef.current = createDrawElement(props, context);
+ drawRef.current.addTo(map);
+
+ const { onMounted } = props;
+ onMounted && onMounted(drawRef.current);
+
+ return null;
+ }, [props.draw, props.edit, props.position]);
+
+ return null;
+}
+
+function createDrawElement(props, context) {
+ const { layerContainer } = context;
+ const { draw, edit, position } = props;
+ const options = {
+ edit: {
+ ...edit,
+ featureGroup: layerContainer,
+ },
+ };
+
+ if (draw) {
+ options.draw = { ...draw };
+ }
+
+ if (position) {
+ options.position = position;
+ }
+
+ return new Control.Draw(options);
+}
+
+EditControl.propTypes = {
+ ...Object.keys(eventHandlers).reduce((acc, val) => {
+ acc[val] = PropTypes.func;
+ return acc;
+ }, {}),
+ onCreated: PropTypes.func,
+ onMounted: PropTypes.func,
+ draw: PropTypes.shape({
+ polyline: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+ polygon: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+ rectangle: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+ circle: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+ marker: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+ }),
+ edit: PropTypes.shape({
+ edit: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+ remove: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+ poly: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+ allowIntersection: PropTypes.bool,
+ }),
+ position: PropTypes.oneOf([
+ 'topright',
+ 'topleft',
+ 'bottomright',
+ 'bottomleft',
+ ]),
+ leaflet: PropTypes.shape({
+ map: PropTypes.instanceOf(Map),
+ layerContainer: PropTypes.shape({
+ addLayer: PropTypes.func.isRequired,
+ removeLayer: PropTypes.func.isRequired,
+ }),
+ }),
+};
+
+export default EditControl;
diff --git a/asset_dashboard/static/js/components/map_utils/MapClipper.js b/asset_dashboard/static/js/components/map_utils/MapClipper.js
new file mode 100644
index 00000000..e1221a27
--- /dev/null
+++ b/asset_dashboard/static/js/components/map_utils/MapClipper.js
@@ -0,0 +1,148 @@
+import React, { useEffect, useState } from 'react'
+import { FeatureGroup } from 'react-leaflet'
+import clip from 'turf-clip'
+import * as turf from '@turf/turf'
+import EditControl from './EditControl'
+
+export default function MapClipper({ geoJson, onClipped }) {
+ const [drawnGeometries, setDrawnGeometries] = useState(null)
+
+ useEffect(() => {
+ if (drawnGeometries) {
+ clipGeometries(drawnGeometries)
+ }
+ }, [drawnGeometries])
+
+ function onEdited(e) {
+ let editedLayers = {}
+
+ for (const [key, layer] of Object.entries(e.layers._layers)) {
+ const geoJSON = layer.toGeoJSON()
+
+ editedLayers = {
+ ...editedLayers,
+ [key]: geoJSON
+ }
+ }
+
+ setDrawnGeometries(prevState => {
+ return {
+ ...prevState,
+ ...editedLayers
+ }
+ })
+ }
+
+ function onCreated(e) {
+ const geoJSON = e.layer.toGeoJSON()
+
+ setDrawnGeometries(prevState => {
+ return {
+ ...prevState,
+ [e.layer._leaflet_id]: geoJSON
+ }
+ })
+ }
+
+ function onDeleted(e) {
+ setDrawnGeometries(prevState => {
+ for (const [key, layer] of Object.entries(e.layers._layers)) {
+ delete prevState[key]
+ }
+ return {
+ ...prevState
+ }
+ })
+ }
+
+ /* Separate the geometry types. We need the LineStrings to clip,
+ and separately all of the other geometry types to see if they
+ intersect with the drawnGeometries.
+ A LineString would be a trail that can be clipped.
+ The remaining types would be like a building or structure, etc
+ that should be treated as an entire entity and not clipped. */
+ function separateGeometryTypes() {
+ const lineStringFeatureTypes = []
+ const allOtherFeatureTypes = []
+
+ turf.featureEach(geoJson, (currentFeature) => {
+ if (['LineString', 'MultiLineString'].includes(turf.getType(currentFeature))) {
+ lineStringFeatureTypes.push(currentFeature)
+ } else {
+ allOtherFeatureTypes.push(currentFeature)
+ }
+ })
+
+ return [
+ turf.featureCollection(lineStringFeatureTypes),
+ turf.featureCollection(allOtherFeatureTypes)
+ ]
+ }
+
+ function getIntersectingFeatures(bounds, featureCollection) {
+ if (featureCollection) {
+ const intersectingFeatures = []
+
+ turf.featureEach(featureCollection, (currentFeature) => {
+ if (turf.booleanIntersects(currentFeature, bounds)) {
+ intersectingFeatures.push(currentFeature)
+ }
+ })
+
+ return intersectingFeatures
+ }
+
+ return []
+ }
+
+ function getClippedFeatures(bounds, featureCollection) {
+ if (featureCollection) {
+ return clip(bounds, featureCollection).features
+ }
+
+ return []
+ }
+
+ function clipGeometries(geometries) {
+ const [lineStringFeatureCollection, allOtherTypesFeatureCollection] = separateGeometryTypes()
+
+ const bounds = turf.featureCollection(Object.values(geometries))
+
+ const intersectingFeatures = getIntersectingFeatures(bounds, allOtherTypesFeatureCollection)
+
+ const clippedFeatures = getClippedFeatures(bounds, lineStringFeatureCollection)
+
+ const finalFeatureCollection = turf.featureCollection(intersectingFeatures.concat(clippedFeatures))
+
+ if (finalFeatureCollection.features.length > 0) {
+ onClipped(finalFeatureCollection)
+ } else {
+ // No features exist, which means they were deleted.
+ // Send back null so that the caller has no clipped geometries.
+ onClipped(null)
+ }
+ }
+
+ return (
+
+
+
+ )
+}
diff --git a/asset_dashboard/static/js/components/map_utils/MapZoom.js b/asset_dashboard/static/js/components/map_utils/MapZoom.js
new file mode 100644
index 00000000..23224045
--- /dev/null
+++ b/asset_dashboard/static/js/components/map_utils/MapZoom.js
@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react'
+import { useMap } from 'react-leaflet'
+import zoomToSearchGeometries from './zoomToSearchGeometries'
+
+
+function MapZoom({ searchGeoms }) {
+ const map = useMap()
+
+ useEffect(() => {
+ const group = new L.featureGroup()
+ zoomToSearchGeometries(map, group)
+ }, [searchGeoms])
+
+ return null
+}
+
+export default MapZoom
diff --git a/asset_dashboard/static/js/components/map_utils/ShowPopup.js b/asset_dashboard/static/js/components/map_utils/ShowPopup.js
new file mode 100644
index 00000000..5397e1c5
--- /dev/null
+++ b/asset_dashboard/static/js/components/map_utils/ShowPopup.js
@@ -0,0 +1,16 @@
+import React, { useEffect } from 'react'
+import { useMap } from 'react-leaflet'
+
+export default function ShowPopup({ geojson }) {
+ const map = useMap()
+
+ useEffect(() => {
+ map.eachLayer((layer) => {
+ if (layer.feature == geojson) {
+ layer.openPopup()
+ }
+ })
+ }, [geojson])
+
+ return null
+}
diff --git a/asset_dashboard/static/js/components/map_utils/bindPopup.js b/asset_dashboard/static/js/components/map_utils/bindPopup.js
new file mode 100644
index 00000000..31b95e6c
--- /dev/null
+++ b/asset_dashboard/static/js/components/map_utils/bindPopup.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import ReactDOMServer from 'react-dom/server'
+
+function Popup({ feature }) {
+ const properties = feature.properties
+ return (
+ <>
+ {properties &&
+
+
Asset Info
+
+ -
+ ID: {properties.asset_id ? properties.asset_id : properties.identifier }
+
+ -
+ Name: {properties.asset_name ? properties.asset_name : properties.name }
+
+ {properties.asset_type
+ && -
+ Asset Type: {properties.asset_type}
+
+ }
+
+
+
+
+
+ existingAssetsColumns(), [])}
+ pageSizeIncrements={[10]}
+ sizeOfPage={10}
+ />
+
+
+
+
+
+
+
+
+ setSearchText(e.target.value)}
+ value={searchText}
+ className='form-control'
+ aria-label='Search for assets'
+ placeholder='Search for assets' />
+
+
+
+
+
+
+
+
+ {isLoading ? 'Loading...' : null}
+ {searchGeoms &&
+
+ }
+
+
+
+
+
+
{props.phase_name}
+
+ {geomsToSave
+ ?
+
+ :
Click on an asset or use the map toolbar to select and save assets.
+ }
+
+
+
+
+
+
+ {searchGeoms &&
+ <>
+
+
+
+ {selectedSearchAsset && }
+
+ }
+ {existingGeoms &&
+
+ }
+
+
+
+
+ {existingGeoms &&
+
+ }
+
+
+ )
+}
+
+ReactDOM.render(
+ React.createElement(SelectAssetsMap, window.props),
+ window.reactMount
+)
diff --git a/asset_dashboard/static/js/components/table_utils/assetSearchColumns.js b/asset_dashboard/static/js/components/table_utils/assetSearchColumns.js
new file mode 100644
index 00000000..a21a5449
--- /dev/null
+++ b/asset_dashboard/static/js/components/table_utils/assetSearchColumns.js
@@ -0,0 +1,12 @@
+const assetSearchColumns = [
+ {
+ Header: 'Identifier',
+ accessor: 'properties.identifier'
+ },
+ {
+ Header: 'Name',
+ accessor: 'properties.name',
+ }
+]
+
+export default assetSearchColumns
diff --git a/asset_dashboard/static/js/components/table_utils/existingAssetsColumns.js b/asset_dashboard/static/js/components/table_utils/existingAssetsColumns.js
new file mode 100644
index 00000000..4228398a
--- /dev/null
+++ b/asset_dashboard/static/js/components/table_utils/existingAssetsColumns.js
@@ -0,0 +1,35 @@
+import React from 'react'
+
+const existingAssetsColumns = (handleDelete) => {
+ let columns = [
+ {
+ Header: 'Identifier',
+ accessor: 'properties.asset_id'
+ },
+ {
+ Header: 'Name',
+ accessor: 'properties.asset_name',
+ },
+ {
+ Header: 'Type',
+ accessor: 'properties.asset_type'
+ }
+ ]
+
+ if (handleDelete) {
+ columns.push({
+ Header: () => null,
+ accessor: 'id',
+ disableSortBy: true,
+ Cell: props => ()
+ })
+ }
+
+ return columns
+}
+
+export default existingAssetsColumns
diff --git a/asset_dashboard/static/js/components/table_utils/projectColumns.js b/asset_dashboard/static/js/components/table_utils/projectColumns.js
new file mode 100644
index 00000000..813fb998
--- /dev/null
+++ b/asset_dashboard/static/js/components/table_utils/projectColumns.js
@@ -0,0 +1,43 @@
+import React from 'react'
+
+const projectColumns = (selector) => {
+ return [
+ {
+ Header: () => null,
+ id: 'selector',
+ Cell: selector ? selector : ,
+ disableSortBy: true
+ },
+ {
+ Header: 'Name',
+ accessor: 'name'
+ },
+ {
+ Header: 'Description',
+ accessor: 'description',
+ },
+ {
+ Header: 'Total Score',
+ accessor: 'score',
+ },
+ {
+ Header: 'Total Budget',
+ accessor: 'budget',
+ },
+ {
+ Header: 'Phase',
+ accessor: 'phase'
+ },
+ {
+ Header: () => null,
+ accessor: 'key',
+ disableSortBy: true,
+ Cell: props => e.stopPropagation()}
+ className='btn btn-outline-dark btn-sm'
+ target="_blank">View Phase
+ }
+ ]
+}
+
+export default projectColumns
diff --git a/asset_dashboard/static/js/components/tables/AssetSearchTable.js b/asset_dashboard/static/js/components/tables/AssetSearchTable.js
new file mode 100644
index 00000000..ba83e67e
--- /dev/null
+++ b/asset_dashboard/static/js/components/tables/AssetSearchTable.js
@@ -0,0 +1,35 @@
+import React, { useCallback } from 'react'
+import ReactTable from '../BaseTable'
+import PropTypes from 'prop-types'
+import assetSearchColumns from '../table_utils/assetSearchColumns'
+
+function AssetSearchTable({ rows, onSelectRow }) {
+ const onRowClick = useCallback(
+ ({ original }) => {
+ return {
+ onClick: e => {
+ onSelectRow(original)
+ }
+ }
+ }, [rows]
+ )
+
+ return (
+
+ assetSearchColumns, [])}
+ getTrProps={onRowClick}
+ pageSizeIncrements={[10]}
+ sizeOfPage={10}
+ cellClassNames='text-nowrap'
+ />
+
+ )
+}
+
+AssetSearchTable.propTypes = {
+ rows: PropTypes.array.isRequired
+}
+
+export default AssetSearchTable
diff --git a/asset_dashboard/static/js/components/tables/ExistingAssetsTable.js b/asset_dashboard/static/js/components/tables/ExistingAssetsTable.js
new file mode 100644
index 00000000..01a32a45
--- /dev/null
+++ b/asset_dashboard/static/js/components/tables/ExistingAssetsTable.js
@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import Cookies from 'js-cookie'
+import { useSessionstorageState } from 'rooks'
+import ReactTable from '../BaseTable'
+import existingAssetsColumns from '../table_utils/existingAssetsColumns'
+import Message from '../helpers/Message'
+
+function ExistingAssetsTable({ rows }) {
+ const [ajaxMessage, setAjaxMessage] = useSessionstorageState('ajaxMessageTable', null)
+
+ function handleDelete(assetId) {
+ fetch(`/local-assets/${assetId}`, {
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json',
+ 'X-CSRFTOKEN': Cookies.get('csrftoken')
+ },
+ method: 'DELETE',
+ mode: 'same-origin'
+ }).then((response) => {
+ console.log('response', response)
+ if (response.status == 204) {
+ setAjaxMessage({text: 'Asset successfully deleted.', tag: 'success'})
+ location.reload()
+ }
+ }).catch(error => {
+ setAjaxMessage({text: 'An error occurred when deleting the asset. Please try again.', tag: 'danger'})
+ console.error(error)
+ })
+ }
+
+ return (
+
+
Phase Assets
+ {ajaxMessage
+ ?
+ : null
+ }
+ existingAssetsColumns(handleDelete), [])}
+ pageSizeIncrements={[10, 20, 30]}
+ sizeOfPage={10}
+ />
+
+ )
+}
+
+ExistingAssetsTable.propTypes = {
+ rows: PropTypes.array.isRequired
+}
+
+export default ExistingAssetsTable
diff --git a/asset_dashboard/static/scss/custom.scss b/asset_dashboard/static/scss/custom.scss
index c2222b80..0a93ab0f 100644
--- a/asset_dashboard/static/scss/custom.scss
+++ b/asset_dashboard/static/scss/custom.scss
@@ -1,4 +1,4 @@
-$trees: #2b491c;
+$trees: #445721;
$words: #203700;
$path: #7e9137;
$maroon: #9e0b0f;
diff --git a/asset_dashboard/templates/asset_dashboard/asset_create_update.html b/asset_dashboard/templates/asset_dashboard/asset_create_update.html
new file mode 100644
index 00000000..b3469d47
--- /dev/null
+++ b/asset_dashboard/templates/asset_dashboard/asset_create_update.html
@@ -0,0 +1,31 @@
+{% extends "asset_dashboard/partials/project_base.html" %}
+{% load static %}
+
+{% block extra_css %}
+
+
+{% endblock %}
+
+{% block project %}
+
+{% endblock %}
+
+{% block extra_js %}
+ {{ block.super }}
+ {% load compress %}
+ {{ props|json_script:"props" }}
+
+ {% compress js %}
+
+ {% endcompress %}
+{% endblock %}
diff --git a/asset_dashboard/templates/asset_dashboard/base.html b/asset_dashboard/templates/asset_dashboard/base.html
index 344c6dfa..7d84c149 100644
--- a/asset_dashboard/templates/asset_dashboard/base.html
+++ b/asset_dashboard/templates/asset_dashboard/base.html
@@ -36,10 +36,15 @@
-