[NET] Enhancements to Client Details table and Map Functionality

netmanager/package.json

@@ -53,7 +53,7 @@
     "leaflet-draw": "^1.0.4",
     "leaflet-makimarkers": "^3.1.0",
     "leaflet-spin": "^1.1.2",
-    "mapbox-gl": "^2.15.0",
+    "mapbox-gl": "^2.5.1",
     "material-table": "^1.57.2",
     "material-ui-nested-menu-item": "^1.0.2",
     "moment": "^2.29.1",

netmanager/src/assets/css/overlay-map.css

@@ -48,8 +48,8 @@
   justify-content: center;
   font-size: 1.1rem;
   background: blue;
-  width: 12px;
-  height: 12px;
+  /* width: 12px;
+  height: 12px; */
   cursor: pointer;
   color: #f3f3f3;
   font-weight: 600;
@@ -94,12 +94,13 @@
 }
 
 .marker-unknown {
-  background: #b19174;
+  background: #979797;
 }
 
 .map-popup {
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial,
     sans-serif;
+  z-index: 1000;
 }
 
 .map-popup .mapboxgl-popup-content {
@@ -184,6 +185,14 @@
   font-style: italic;
 }
 
+.popup-pollutant .popup-pollutant-noData {
+  font-size: 14px;
+  letter-spacing: 0.1px;
+  color: rgb(85, 79, 79);
+  font-weight: 600;
+  line-height: 12px;
+}
+
 .popup-pollutant .popup-pollutant-value {
   font-size: 15px;
   font-weight: 600;

netmanager/src/config/urls/analytics.js

@@ -41,9 +41,7 @@ export const GENERATE_AIRQLOUD_DATA_SUMMARY_URI = `${BASE_ANALYTICS_URL_V2}/anal
 export const GENERATE_ACCESS_TOKEN = `${BASE_ANALYTICS_URL_V2}/users/tokens`;
 
 // Token generation and management
-export const CREATE_CLIENT_URI = `${BASE_ANALYTICS_URL_V2}/users/clients`;
-
-export const GET_CLIENTS_URI = `${BASE_ANALYTICS_URL_V2}/users/clients`;
+export const CLIENT_URI = `${BASE_ANALYTICS_URL_V2}/users/clients`;
 
 export const GENERATE_TOKEN_URI = `${BASE_ANALYTICS_URL_V2}/users/tokens`;
 

netmanager/src/views/apis/analytics.js

@@ -1,12 +1,11 @@
 import {
-  GET_DATA_MAP,
+  GET_MAP_READING_URI,
   GET_SITES,
   DOWNLOAD_CUSTOMISED_DATA_URI,
   D3_CHART_DATA_URI,
   GENERATE_AIRQLOUD_DATA_SUMMARY_URI,
   SCHEDULE_EXPORT_DATA,
-  CREATE_CLIENT_URI,
-  GET_CLIENTS_URI,
+  CLIENT_URI,
   GENERATE_TOKEN_URI,
   GET_USER_STATS_URI
 } from 'config/urls/analytics';
@@ -66,13 +65,19 @@ export const generateGridDataSummaryApi = async (data) => {
 
 export const createClientApi = async (data) => {
   return await createAxiosInstance()
-    .post(CREATE_CLIENT_URI, data)
+    .post(CLIENT_URI, data)
+    .then((response) => response.data);
+};
+
+export const updateClientApi = async (data, client_id) => {
+  return await createAxiosInstance()
+    .put(CLIENT_URI + '/' + client_id, data)
     .then((response) => response.data);
 };
 
 export const getClientsApi = async () => {
   return await createAxiosInstance()
-    .get(GET_CLIENTS_URI)
+    .get(CLIENT_URI)
     .then((response) => response.data);
 };
 

netmanager/src/views/layouts/Landing.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import MapContainer from '../pages/Map/OverlayMap';
+import HeatMapOverlay from '../pages/Heatmap/HeatMapOverlay';
 import ErrorBoundary from 'views/ErrorBoundary/ErrorBoundary';
 import Main from './Main';
 
@@ -16,7 +16,7 @@ class Landing extends Component {
   render() {
     return (
       <Main>
-        <MapContainer />
+        <HeatMapOverlay />
       </Main>
     );
   }

netmanager/src/views/pages/Dashboard/components/Map/MapPopup.js

@@ -68,7 +68,11 @@ const MapPopup = (feature, showPollutant, pollutantValue, desc, duration, second
     </span>
   </div>
   ${DividerIcon}
-  <div class="${`popup-aqi ${markerClass}`}"> 
+
+  ${
+    pollutantValue !== null && pollutantValue !== undefined
+      ? `
+      <div class="${`popup-aqi ${markerClass}`}"> 
     <div class="popup-aqi-icon">
         ${icon}
     </div>
@@ -77,7 +81,7 @@ const MapPopup = (feature, showPollutant, pollutantValue, desc, duration, second
     </div>
   </div>
   ${DividerIcon}
-  <div class="popup-pollutant">
+      <div class="popup-pollutant">
     <span class="popup-pollutant-title">
         <b>
         ${(showPollutant.pm2_5 && 'PM<sub>2.5<sub>') || (showPollutant.pm10 && 'PM<sub>10<sub>')}
@@ -86,7 +90,15 @@ const MapPopup = (feature, showPollutant, pollutantValue, desc, duration, second
     <span class="popup-pollutant-value">
     ${(pollutantValue && pollutantValue.toFixed(1)) || '--'} µg/m<sup>3</sup>
     </span>
-  </div>
+  </div>`
+      : `<div class="popup-pollutant">
+    <span class="popup-pollutant-noData">
+        <b>
+        Sorry, No data available
+        </b>
+    </span>
+  </div>`
+  }
   <span>Last Updated: <b>${duration}</b> ago</span>
   <span>${formattedDate}</span>