updated dependencies in web ui

web/.eslintrc.json

@@ -2,7 +2,8 @@
   "extends": ["react-app", "prettier", "plugin:react/recommended"],
   "plugins": ["prettier"],
   "rules": {
-    "prettier/prettier": "error",
+    "prettier/prettier": "warn",
-    "react/no-unescaped-entities": false
+    "react/no-unescaped-entities": "off",
+    "react/prop-types": "off"
   }
 }

web/.prettierrc

@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
-  "printWidth": 120
+  "printWidth": 120,
+  "endOfLine":"auto"
 }

web/package.json

@@ -64,7 +64,7 @@
     "react-rating": "^2.0.5",
     "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.3",
+    "react-scripts": "^5.0.0",
     "react-scroll": "^1.8.1",
     "react-scrollbars-custom": "^4.0.25",
     "react-select": "^3.1.0",
@@ -88,9 +88,10 @@
   },
   "devDependencies": {
     "browser-sync": "^2.26.12",
-    "eslint-config-prettier": "^4.2.0",
+    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react": "^7.28.0",
+    "postcss": "^8.0.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^6.1.0",
     "gulp-clean-css": "^4.3.0",

web/src/Main.js

@@ -4,7 +4,7 @@ import AppContext from './context/Context';
 import { settings } from './config';
 import toggleStylesheet from './helpers/toggleStylesheet';
 import { getItemFromStore, setItemToStore, themeColors } from './helpers/utils';
-import i18n from "i18next";
+import i18n from 'i18next';
 
 const Main = props => {
   const [isFluid, setIsFluid] = useState(getItemFromStore('isFluid', settings.isFluid));
@@ -103,7 +103,7 @@ const Main = props => {
 
   useEffect(() => {
     setItemToStore('myems_web_ui_language', language);
-    i18n.changeLanguage(language)
+    i18n.changeLanguage(language);
     // eslint-disable-next-line
   }, [language]);
 

web/src/components/MyEMS/AdvancedReporting/AdvancedReporting.js

@@ -1,17 +1,5 @@
 import React, { Fragment, useEffect, useState } from 'react';
-import {
+import { Alert, Row, Col, Card, CardBody, Button, ButtonGroup, Form, FormGroup, Label, Spinner } from 'reactstrap';
-  Alert,
-  Row,
-  Col,
-  Card,
-  CardBody,
-  Button,
-  ButtonGroup,
-  Form,
-  FormGroup,
-  Label,
-  Spinner
-} from 'reactstrap';
 import Summary from './Summary';
 import FalconCardHeader from '../../common/FalconCardHeader';
 import Datetime from 'react-datetime';
@@ -24,7 +12,6 @@ import { withTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import { APIBaseURL } from '../../../config';
 
-
 const AdvacnedReporting = ({ setRedirect, setRedirectUrl, t }) => {
   let current_moment = moment();
   useEffect(() => {
@@ -59,22 +46,22 @@ const AdvacnedReporting = ({ setRedirect, setRedirectUrl, t }) => {
   const [reports, setReports] = useState([]);
 
   const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
-  
-  let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
-    setReportingPeriodBeginsDatetime(newDateTime);
-  }
 
-  let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
+  let onReportingPeriodBeginsDatetimeChange = newDateTime => {
+    setReportingPeriodBeginsDatetime(newDateTime);
+  };
+
+  let onReportingPeriodEndsDatetimeChange = newDateTime => {
     setReportingPeriodEndsDatetime(newDateTime);
-  }
+  };
 
   var getValidReportingPeriodBeginsDatetimes = function (currentDate) {
     return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
-  }
+  };
 
   var getValidReportingPeriodEndsDatetimes = function (currentDate) {
     return currentDate.isAfter(moment(reportingPeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
-  }
+  };
 
   // Handler
   const handleSubmit = e => {
@@ -87,7 +74,7 @@ const AdvacnedReporting = ({ setRedirect, setRedirectUrl, t }) => {
     setSubmitButtonDisabled(true);
     // show spinner
     setSpinnerHidden(false);
-    
+
     let isResponseOK = false;
     fetch(APIBaseURL + '/reports/advancedreports?' +
       'reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') +

web/src/components/MyEMS/Monitoring/EquipmentList.js

@@ -9,8 +9,7 @@ import classNames from 'classnames';
 import ButtonIcon from '../../common/ButtonIcon';
 import AppContext, { ProductContext } from '../../../context/Context';
 import { withTranslation } from 'react-i18next';
-
+import uuid from 'uuid/v1';
-
 
 const EquipmentList = ({
   id,
@@ -60,6 +59,7 @@ const EquipmentList = ({
                 <Slider {...sliderSettings}>
                   {files.map(file => (
                     <img
+                      key={uuid()}
                       className="img-fluid fit-cover w-sm-100 h-sm-100 rounded"
                       src={file['src'] || file['base64']}
                       alt={file.path}

web/src/components/MyEMS/Space/SpaceCost.js

@@ -31,7 +31,7 @@ import ButtonIcon from '../../common/ButtonIcon';
 import { APIBaseURL } from '../../../config';
 import { periodTypeOptions } from '../common/PeriodTypeOptions';
 import { comparisonTypeOptions } from '../common/ComparisonTypeOptions';
-
+import uuid from 'uuid/v1';
 
 const ChildSpacesTable = loadable(() => import('../common/ChildSpacesTable'));
 const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@@ -706,7 +706,7 @@ const SpaceCost = ({ setRedirect, setRedirectUrl, t }) => {
           <SharePie data={costShareData} title={t('Costs by Energy Category')} />
         </Col>
         {childSpaceProportionList.map(childSpaceProportionItem => (
-          <Col className="mb-3 pr-lg-2 mb-3">
+          <Col className="mb-3 pr-lg-2 mb-3" key={uuid()}>
             <SharePie
               data={childSpaceProportionItem['data']}
               title={t('Child Space Proportion CATEGORY UNIT',

web/src/components/MyEMS/Space/SpaceEnergyCategory.js

@@ -31,7 +31,7 @@ import { comparisonTypeOptions } from '../common/ComparisonTypeOptions';
 import { toast } from 'react-toastify';
 import ButtonIcon from '../../common/ButtonIcon';
 import { APIBaseURL } from '../../../config';
-
+import uuid from 'uuid/v1';
 
 const ChildSpacesTable = loadable(() => import('../common/ChildSpacesTable'));
 const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@@ -702,7 +702,7 @@ const SpaceEnergyCategory = ({ setRedirect, setRedirectUrl, t }) => {
           <SharePie data={TCO2EShareData} title={t('Ton of Carbon Dioxide Emissions by Energy Category')} />
         </Col>
         {childSpaceProportionList.map(childSpaceProportionItem => (
-          <Col className="mb-3 pr-lg-2 mb-3">
+          <Col className="mb-3 pr-lg-2 mb-3" key={uuid()}>
             <SharePie 
               data={childSpaceProportionItem['data']} 
               title={t('Child Space Proportion CATEGORY UNIT', 

web/src/components/notification/Notification.js

@@ -5,15 +5,13 @@ import { Link } from 'react-router-dom';
 import Avatar from '../common/Avatar';
 import createMarkup from '../../helpers/createMarkup';
 
-const Notification = ({ created_datetime, id, status, flush, message,subject}) => (
+const Notification = ({ created_datetime, id, status, flush, message, subject}) => (
-  <Link className={classNames('notification', { 'bg-200': status, 'notification-flush': flush }, id)}
+    <Link className={classNames('notification', { 'bg-200': status, 'notification-flush': flush }, id)}
-        to="/notification">
+    to="/notification">
     <div className="notification-body">
       <h5>{subject}</h5><p>{status}</p>
       <p className={'mb-0'} dangerouslySetInnerHTML={createMarkup(message)} />
-      <span className="notification-time">
+      <span className="notification-time">{created_datetime}</span>
-        {created_datetime}
-      </span>
     </div>
   </Link>
 );
@@ -27,6 +25,6 @@ Notification.propTypes = {
   message: PropTypes.node
 };
 
-Notification.defaultProps = { status: "acknowledged", flush: false };
+Notification.defaultProps = { status: 'acknowledged', flush: false };
 
 export default Notification;

web/src/layouts/MyEMSRoutes.js

@@ -162,7 +162,7 @@ import ShopfloorStatistics from '../components/MyEMS/Shopfloor/ShopfloorStatisti
 import ShopfloorSaving from '../components/MyEMS/Shopfloor/ShopfloorSaving';
 import ShopfloorBatch from '../components/MyEMS/Shopfloor/ShopfloorBatch';
 // CombinedEquipment
-import CombinedEquipmentBatch from '../components/MyEMS/CombinedEquipment/CombinedEquipmentBatch'
+import CombinedEquipmentBatch from '../components/MyEMS/CombinedEquipment/CombinedEquipmentBatch';
 import CombinedEquipmentCost from '../components/MyEMS/CombinedEquipment/CombinedEquipmentCost';
 import CombinedEquipmentEfficiency from '../components/MyEMS/CombinedEquipment/CombinedEquipmentEfficiency';
 import CombinedEquipmentEnergyCategory from '../components/MyEMS/CombinedEquipment/CombinedEquipmentEnergyCategory';
@@ -384,7 +384,7 @@ const MyEMSRoutes = () => (
     <Route path="/tenant/saving" exact component={TenantSaving} />
     <Route path="/tenant/bill" exact component={TenantBill} />
     <Route path="/tenant/batch" exact component={TenantBatch} />
-    
+
     {/*Sotore*/}
     <Route path="/store/energycategory" exact component={StoreEnergyCategory} />
     <Route path="/store/energyitem" exact component={StoreEnergyItem} />
@@ -393,7 +393,7 @@ const MyEMSRoutes = () => (
     <Route path="/store/statistics" exact component={StoreStatistics} />
     <Route path="/store/saving" exact component={StoreSaving} />
     <Route path="/store/batch" exact component={StoreBatch} />
-    
+
     {/*Shopfloor*/}
     <Route path="/shopfloor/energycategory" exact component={ShopfloorEnergyCategory} />
     <Route path="/shopfloor/energyitem" exact component={ShopfloorEnergyItem} />
@@ -426,20 +426,20 @@ const MyEMSRoutes = () => (
     <Route path="/fdd/tenant" exact component={FDDTenantFault} />
     <Route path="/fdd/store" exact component={FDDStoreFault} />
     <Route path="/fdd/shopfloor" exact component={FDDShopfloorFault} />
-    
+
     {/*Equipment Monitoring*/}
     <Route path="/monitoring/spaceequipments" exact component={SpaceEquipments} />
     <Route path="/monitoring/combinedequipments" exact component={CombinedEquipments} />
     <Route path="/monitoring/tenantequipments" exact component={TenantEquipments} />
     <Route path="/monitoring/storeequipments" exact component={StoreEquipments} />
     <Route path="/monitoring/shopfloorequipments" exact component={ShopfloorEquipments} />
-    
+
     {/*Advanced Reporting*/}
     <Route path="/advancedreporting" exact component={AdvancedReporting} />
-    
+
     {/*Knowledge Base*/}
     <Route path="/knowledgebase" exact component={KnowledgeBase} />
-    
+
     {/* Notification */}
     <Route path="/notification" exact component={Notification} />
 

web/src/routes.js

@@ -1,5 +1,5 @@
 import { version } from './config';
-import { Trans } from 'react-i18next'
+import { Trans } from 'react-i18next';
 
 // export const homeRoutes = {
 //   name: 'Home',
@@ -154,7 +154,6 @@ import { Trans } from 'react-i18next'
 //   ]
 // };
 
-
 // export const documentationRoutes = {
 //   name: 'Documentation',
 //   to: '/documentation',
@@ -310,7 +309,6 @@ import { Trans } from 'react-i18next'
 
 //  NOTE: if you changed names below, you must change names in i18n.js
 export const dashboardRoutes = {
- 
   name: 'Dashboard',
   to: '/dashboard',
   exact: true,
@@ -323,7 +321,7 @@ export const spaceRoutes = {
   icon: 'chart-pie',
   exact: true,
   children: [
-    { to: '/space/energycategory', name: 'Energy Category Data'},
+    { to: '/space/energycategory', name: 'Energy Category Data' },
     { to: '/space/energyitem', name: 'Energy Item Data' },
     { to: '/space/cost', name: 'Cost' },
     { to: '/space/output', name: 'Output' },
@@ -331,7 +329,7 @@ export const spaceRoutes = {
     { to: '/space/efficiency', name: 'Efficiency' },
     { to: '/space/load', name: 'Load' },
     { to: '/space/statistics', name: 'Statistics' },
-    { to: '/space/saving', name: 'Saving' },
+    { to: '/space/saving', name: 'Saving' }
   ]
 };
 
@@ -349,8 +347,8 @@ export const equipmentRoutes = {
     { to: '/equipment/load', name: 'Load' },
     { to: '/equipment/statistics', name: 'Statistics' },
     { to: '/equipment/saving', name: 'Saving' },
-    { to: '/equipment/batch', name: 'Batch Analysis'},
+    { to: '/equipment/batch', name: 'Batch Analysis' },
-    { to: '/equipment/tracking', name: 'Equipment Tracking' },
+    { to: '/equipment/tracking', name: 'Equipment Tracking' }
   ]
 };
 
@@ -368,8 +366,8 @@ export const meterRoutes = {
     { to: '/meter/virtualmetercost', name: 'Virtual Meter Cost' },
     { to: '/meter/offlinemeterenergy', name: 'Offline Meter Energy' },
     { to: '/meter/offlinemetercost', name: 'Offline Meter Cost' },
-    { to: '/meter/batch', name: 'Batch Analysis'},
+    { to: '/meter/batch', name: 'Batch Analysis' },
-    { to: '/meter/tracking', name: 'Meter Tracking' },
+    { to: '/meter/tracking', name: 'Meter Tracking' }
   ]
 };
 
@@ -385,7 +383,7 @@ export const tenantRoutes = {
     { to: '/tenant/statistics', name: 'Statistics' },
     { to: '/tenant/saving', name: 'Saving' },
     { to: '/tenant/bill', name: 'Tenant Bill' },
-    { to: '/tenant/batch', name: 'Batch Analysis' },
+    { to: '/tenant/batch', name: 'Batch Analysis' }
   ]
 };
 
@@ -400,7 +398,7 @@ export const storeRoutes = {
     { to: '/store/load', name: 'Load' },
     { to: '/store/statistics', name: 'Statistics' },
     { to: '/store/saving', name: 'Saving' },
-    { to: '/store/batch', name: 'Batch Analysis' },
+    { to: '/store/batch', name: 'Batch Analysis' }
   ]
 };
 
@@ -415,7 +413,7 @@ export const shopfloorRoutes = {
     { to: '/shopfloor/load', name: 'Load' },
     { to: '/shopfloor/statistics', name: 'Statistics' },
     { to: '/shopfloor/saving', name: 'Saving' },
-    { to: '/shopfloor/batch', name: 'Batch Analysis'},
+    { to: '/shopfloor/batch', name: 'Batch Analysis' }
   ]
 };
 
@@ -433,7 +431,7 @@ export const combinedEquipmentRoutes = {
     { to: '/combinedequipment/load', name: 'Load' },
     { to: '/combinedequipment/statistics', name: 'Statistics' },
     { to: '/combinedequipment/saving', name: 'Saving' },
-    { to: '/combinedequipment/batch', name: 'Batch Analysis'},
+    { to: '/combinedequipment/batch', name: 'Batch Analysis' }
   ]
 };
 
@@ -443,7 +441,7 @@ export const auxiliarySystemRoutes = {
   icon: 'chart-pie',
   children: [
     { to: '/auxiliarysystem/energyflowdiagram', name: 'Energy Flow Diagram' },
-    { to: '/auxiliarysystem/distributionsystem', name: 'Distribution System' },
+    { to: '/auxiliarysystem/distributionsystem', name: 'Distribution System' }
   ]
 };
 
@@ -457,7 +455,7 @@ export const fddRoutes = {
     { to: '/fdd/combinedequipment', name: 'Combined Equipment Faults Data' },
     { to: '/fdd/tenant', name: 'Tenant Faults Data' },
     { to: '/fdd/store', name: 'Store Faults Data' },
-    { to: '/fdd/shopfloor', name: 'Shopfloor Faults Data' },
+    { to: '/fdd/shopfloor', name: 'Shopfloor Faults Data' }
   ]
 };
 
@@ -470,7 +468,7 @@ export const monitoringRoutes = {
     { to: '/monitoring/combinedequipments', name: 'Combined Equipments' },
     { to: '/monitoring/tenantequipments', name: 'Tenant Equipments' },
     { to: '/monitoring/storeequipments', name: 'Store Equipments' },
-    { to: '/monitoring/shopfloorequipments', name: 'Shopfloor Equipments' },
+    { to: '/monitoring/shopfloorequipments', name: 'Shopfloor Equipments' }
   ]
 };