add the svg router

myems-web/src/components/MyEMS/AuxiliarySystem/SvgSystem.js

@@ -0,0 +1,166 @@
+import React, { createRef, Fragment, useState, useEffect } from 'react';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Card,
+  CardBody,
+  Col,
+  CustomInput,
+  Form,
+  FormGroup,
+  Label,
+  Row,
+  Spinner,
+} from 'reactstrap';
+import RealtimeChart from './RealtimeChart';
+import { getCookieValue, createCookie } from '../../../helpers/utils';
+import withRedirect from '../../../hoc/withRedirect';
+import { withTranslation } from 'react-i18next';
+import uuid from 'uuid/v1';
+import { toast } from 'react-toastify';
+import { APIBaseURL } from '../../../config';
+
+
+const SvgSystem = ({ setRedirect, setRedirectUrl, t }) => {
+
+  useEffect(() => {
+    let is_logged_in = getCookieValue('is_logged_in');
+    let user_name = getCookieValue('user_name');
+    let user_display_name = getCookieValue('user_display_name');
+    let user_uuid = getCookieValue('user_uuid');
+    let token = getCookieValue('token');
+    if (is_logged_in === null || !is_logged_in) {
+      setRedirectUrl(`/authentication/basic/login`);
+      setRedirect(true);
+    } else {
+      //update expires time of cookies
+      createCookie('is_logged_in', true, 1000 * 60 * 60 * 8);
+      createCookie('user_name', user_name, 1000 * 60 * 60 * 8);
+      createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8);
+      createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8);
+      createCookie('token', token, 1000 * 60 * 60 * 8);
+    }
+  });
+  let table = createRef();
+  // State
+  // Query Parameters
+  const [distributionSystemList, setSvgSystemList] = useState([]);
+  const [selectedSvgSystemName, setSelectedSvgSystemName] = useState(undefined);
+  const [selectedSvgSystemID, setSelectedSvgSystemID] = useState(undefined);
+  
+  //Results
+  const [images, setImages] = useState([]);
+  const [spinnerHidden, setSpinnerHidden] = useState(false);
+
+  useEffect(() => {
+    let isResponseOK = false;
+    fetch(APIBaseURL + '/distributionsystems', {
+      method: 'GET',
+      headers: {
+        "Content-type": "application/json",
+        "User-UUID": getCookieValue('user_uuid'),
+        "Token": getCookieValue('token')
+      },
+      body: null,
+
+    }).then(response => {
+      console.log(response);
+      if (response.ok) {
+        isResponseOK = true;
+      }
+      return response.json();
+    }).then(json => {
+      console.log(json);
+      if (isResponseOK) {
+        // rename keys 
+        json = JSON.parse(JSON.stringify(json).split('"id":').join('"value":').split('"name":').join('"label":'));
+        
+        console.log(json);
+        setSvgSystemList(json);
+        setSelectedSvgSystemID([json[0]].map(o => o.value));
+        setSelectedSvgSystemName([json[0]].map(o => o.label));
+        
+        let images = {};
+        json.forEach((currentValue, index) => {
+          images[currentValue['value']] = {__html: currentValue['svg']}
+        });
+        setImages(images);
+        setSpinnerHidden(true);
+      } else {
+        toast.error(json.description);
+      }
+    }).catch(err => {
+      console.log(err);
+    });
+
+  }, []);
+
+  const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
+
+  let onSvgSystemChange = (event) => {
+    setSelectedSvgSystemID(event.target.value);
+    distributionSystemList.forEach((currentItem, index) => {
+      if (currentItem['value'] === event.target.value) {
+        setSelectedSvgSystemName(currentItem['label']);
+      }
+    });
+    
+  }
+
+
+  return (
+    <Fragment>
+      <div>
+        <Breadcrumb>
+          <BreadcrumbItem>{t('Auxiliary System')}</BreadcrumbItem><BreadcrumbItem active>{t('Distribution System')}</BreadcrumbItem>
+        </Breadcrumb>
+      </div>
+      <Card className="bg-light mb-3">
+        <CardBody className="p-3">
+          <Form >
+            <Row form>
+              <Col xs={6} sm={3}>
+                <FormGroup>
+                  <Label className={labelClasses} for="distributionSystemSelect">
+                    {t('Distribution System')}
+                  </Label>
+                  <CustomInput type="select" id="distributionSystemSelect" name="distributionSystemSelect"
+                    value={selectedSvgSystemID} onChange={onSvgSystemChange}
+                  >
+                    {distributionSystemList.map((distributionSystem, index) => (
+                      <option value={distributionSystem.value} key={distributionSystem.value}>
+                        {distributionSystem.label}
+                      </option>
+                    ))}
+                  </CustomInput>
+                </FormGroup>
+              </Col>
+              <Col xs="auto">
+                <FormGroup>
+                  <br></br>
+                  <Spinner color="primary" hidden={spinnerHidden}  />
+                </FormGroup>
+              </Col>              
+            </Row>
+          </Form>
+        </CardBody>
+      </Card>
+      <Row noGutters>
+        
+        <Col lg="4" className="pr-lg-2" key={uuid()}>
+          <RealtimeChart 
+            distributionSystemID={selectedSvgSystemID} 
+            distributionSystemName={selectedSvgSystemName}  
+          />
+        </Col>
+        
+        <Col lg="8" className="pr-lg-2">
+          <div dangerouslySetInnerHTML={images[selectedSvgSystemID]} />
+        </Col>
+
+      </Row>
+    </Fragment>
+  );
+};
+
+export default withTranslation()(withRedirect(SvgSystem));

myems-web/src/config.js

@@ -1,8 +1,8 @@
 export const version = '1.9.0';
 export const navbarBreakPoint = 'xl'; // Vertical navbar breakpoint
 export const topNavbarBreakpoint = 'lg';
-//export const APIBaseURL = 'http://127.0.0.1:8000';
-export const APIBaseURL = window.location.protocol+"//"+window.location.hostname+":"+window.location.port+"/api";
+export const APIBaseURL = 'http://127.0.0.1:8000';
+// export const APIBaseURL = window.location.protocol+"//"+window.location.hostname+":"+window.location.port+"/api";
 export const settings = {
   isFluid: true,
   isRTL: false,

myems-web/src/layouts/MyEMSRoutes.js

@@ -196,6 +196,7 @@ import AdvancedReporting from '../components/MyEMS/AdvancedReporting/AdvancedRep
 import KnowledgeBase from '../components/MyEMS/KnowledgeBase/KnowledgeBase';
 // Notification
 import Notification from '../components/MyEMS/Notification/Notification';
+import SvgSystem from '../components/MyEMS/AuxiliarySystem/SvgSystem';
 
 // const InboxRoutes = ({ match: { url } }) => (
 //   <InboxProvider>
@@ -422,6 +423,7 @@ const MyEMSRoutes = () => (
     {/*Auxiliary System*/}
     <Route path="/auxiliarysystem/energyflowdiagram" exact component={EnergyFlowDiagram} />
     <Route path="/auxiliarysystem/distributionsystem" exact component={DistributionSystem} />
+    <Route path="/auxiliarysystem/svgsystem" exact component={SvgSystem} />
 
     {/*FDD*/}
     <Route path="/fdd/combinedequipment" exact component={FDDCombinedEquipmentFault} />

myems-web/src/routes.js

@@ -443,7 +443,8 @@ 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' },
+    { to: '/auxiliarysystem/svgsystem', name: 'Svg System' }
   ]
 };