\r\n \r\n
\r\n \r\n )}\r\n \r\n )\r\n}\r\nexport { Topbar }\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport clsx from 'clsx'\r\nimport React, { useEffect } from 'react'\r\nimport { Link, useLocation } from 'react-router-dom'\r\nimport { MenuComponent } from '../../../assets/ts/components'\r\nimport { KTSVG, toAbsoluteUrl } from '../../../helpers'\r\nimport { useLayout } from '../../core'\r\nimport { Header } from './Header'\r\nimport { DefaultTitle } from './page-title/DefaultTitle'\r\nimport { Topbar } from './Topbar'\r\n\r\nexport function HeaderWrapper() {\r\n const { pathname } = useLocation()\r\n const { config, classes, attributes } = useLayout()\r\n const { header, aside } = config\r\n\r\n useEffect(() => {\r\n MenuComponent.reinitialization()\r\n }, [pathname])\r\n\r\n var content = 'INDUSTRYX'\r\n if (window.location.hostname.toLowerCase() === 'e2eq.lk') {\r\n content = 'E2EQ'\r\n }\r\n if (window.location.hostname.toLowerCase() === 'portal.smartgas.biz') {\r\n content = 'SMARTGAS'\r\n }\r\n\r\n\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n )}\r\n {/* end::Aside mobile toggle */}\r\n {/* begin::Logo */}\r\n {!aside.display && (\r\n \r\n \r\n })
\r\n \r\n
\r\n )}\r\n {/* end::Logo */}\r\n\r\n\r\n \r\n \r\n \r\n {content === 'INDUSTRYX' && (\r\n 
\r\n )}\r\n\r\n {content === 'E2EQ' && (\r\n\r\n })
\r\n )}\r\n {content === 'SMARTGAS' && (\r\n\r\n })
\r\n )}\r\n\r\n
\r\n\r\n\r\n {/* begin::Wrapper */}\r\n \r\n )}\r\n\r\n {content === 'E2EQ' && (\r\n\r\n \r\n )}\r\n {content === 'SMARTGAS' && (\r\n\r\n \r\n )}\r\n\r\n \r\n\r\n {header.left === 'menu' && (\r\n \r\n )}\r\n\r\n\r\n {header.left === 'page-title' && (\r\n \r\n )}\r\n\r\n
\r\n {/* end::Wrapper */}\r\n \r\n \r\n )\r\n}\r\n","import React, {useState, useEffect, useRef, PureComponent} from 'react'\r\nimport {\r\n PieChart,\r\n Pie,\r\n LineChart,\r\n BarChart,\r\n Bar,\r\n AreaChart,\r\n Label,\r\n Area,\r\n Line,\r\n XAxis,\r\n YAxis,\r\n CartesianGrid,\r\n Tooltip,\r\n Legend,\r\n Cell,\r\n ResponsiveContainer,\r\n} from 'recharts'\r\nimport parse from 'html-react-parser'\r\nimport ChartJ from './chart/Chartj'\r\n\r\nimport './../../../../_metronic/assets/sass/kntdashbaord.css'\r\nimport Draggable from 'react-draggable'\r\nimport Popup from 'reactjs-popup'\r\nimport 'reactjs-popup/dist/index.css'\r\nimport Chart from './chart/Chart'\r\nvar randomColor = require('randomcolor')\r\n\r\nfunction SensorArea(props) {\r\n const RADIAN = Math.PI / 180\r\n const Gradients = (item) => {\r\n var lines = []\r\n if (item.lines !== undefined && item.lines.length > 0) {\r\n for (let index = 0; index < item.lines.length; index++) {\r\n const element = item.lines[index]\r\n lines.push(\r\n \r\n
\r\n \r\n \r\n {' '}\r\n {item.displayName}{' '}\r\n \r\n {item.icon === 'dot' && (\r\n <>\r\n \r\n {item.isNotify === true && (\r\n \r\n {' '}\r\n \r\n )}\r\n \r\n )}\r\n\r\n {item.icon !== '' && item.icon !== 'dot' && (\r\n <>\r\n \r\n {item.isNotify === true && (\r\n \r\n {' '}\r\n \r\n )}\r\n \r\n )}\r\n
\r\n )}\r\n\r\n {item.type == 14 && (\r\n \r\n \r\n {Gradients(item)} \r\n {item.isEnableCartesianGrid && \r\n
\r\n )}\r\n\r\n {item.type == 13 && (\r\n \r\n \r\n {item.isEnableCartesianGrid && \r\n
\r\n )}\r\n\r\n {item.type == 26 && (\r\n \r\n <>\r\n
\r\n )}\r\n\r\n {item.type == 17 && (\r\n \r\n \r\n \r\n {Article(item, 'Pie')}\r\n \r\n {item.isLegend && (\r\n
\r\n )}\r\n\r\n {item.type == 15 && (\r\n \r\n \r\n {item.isEnableCartesianGrid && \r\n
\r\n )}\r\n \r\n \r\n \r\n {/* begin::Logo */}\r\n
\r\n {/* end::Content */}\r\n {/* begin::Footer */}\r\n industryX Automation
\r\n\r\n {/* end::Logo */}\r\n {/* begin::Wrapper */}\r\n\r\n
\r\n {/* end::Wrapper */}\r\n \r\n \r\n <>\r\n {' '}\r\n {state.DashboardStat}{' '}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n {/* end::Footer */}\r\n \r\n \r\n )\r\n }\r\n\r\n if (layout.category === 'MAP') {\r\n return (\r\n <>\r\n \r\n \r\n {new Date().getFullYear()} ©{' '}\r\n \r\n
\r\n \r\n {/* \r\n {state.DashboardStat === 'DISABLED' && (\r\n \r\n {state.DashboardStat}\r\n \r\n )}\r\n {state.DashboardStat === 'ACTIVE' && (\r\n \r\n {state.DashboardStat}\r\n \r\n )}\r\n {state.DashboardStat === 'CONNECTED' && (\r\n \r\n {state.DashboardStat}\r\n \r\n )}\r\n {state.DashboardStat === 'CONNECTING' && (\r\n \r\n {state.DashboardStat}\r\n \r\n )}\r\n\r\n */}\r\n\r\n 
\r\n
\r\n \r\n \r\n
\r\n\r\n \r\n\r\n Quick Actions
\r\n \r\n \r\n New Ticket\r\n \r\n
\r\n\r\n \r\n \r\n New Customer\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n\r\n \r\n \r\n Admin Group\r\n \r\n
\r\n\r\n \r\n \r\n Staff Group\r\n \r\n
\r\n\r\n \r\n \r\n Member Group\r\n \r\n
\r\n \r\n \r\n New Contact\r\n \r\n
\r\n\r\n \r\n\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport {Dropdown2}\r\n","const K_WIDTH = 40\r\nconst K_HEIGHT = 40\r\n\r\nconst greatPlaceStyle = {\r\n // initially any map object has left top corner at lat lng coordinates\r\n // it's on you to set object origin to 0,0 coordinates\r\n position: 'absolute',\r\n width: K_WIDTH,\r\n height: K_HEIGHT,\r\n left: -K_WIDTH / 2,\r\n top: -K_HEIGHT / 2,\r\n border: '5px solid #f44336',\r\n borderRadius: K_HEIGHT,\r\n backgroundColor: 'white',\r\n textAlign: 'center',\r\n color: '#3f51b5',\r\n fontSize: 16,\r\n fontWeight: 'bold',\r\n padding: 4,\r\n}\r\n\r\nconst greatPlaceStyle2 = {\r\n // initially any map object has left top corner at lat lng coordinates\r\n // it's on you to set object origin to 0,0 coordinates\r\n position: 'absolute',\r\n width: 60,\r\n height: K_HEIGHT,\r\n left: -60 / 2,\r\n top: -K_HEIGHT / 2,\r\n border: '5px solid #f44336',\r\n borderRadius: K_HEIGHT,\r\n backgroundColor: 'white',\r\n textAlign: 'center',\r\n color: '#3f51b5',\r\n fontSize: 16,\r\n fontWeight: 'bold',\r\n padding: 4,\r\n}\r\n\r\nexport {greatPlaceStyle, greatPlaceStyle2}\r\n","import React, {useState, useEffect, useRef} from 'react'\r\nimport './../../../../_metronic/assets/sass/kntdashbaord.css'\r\nimport {HubConnectionBuilder, JsonHubProtocol} from '@microsoft/signalr'\r\nimport axios from 'axios'\r\n// import useWindowDimensions from '../../helpers/WindowDimension'\r\n// import Dictionary from '../../helpers/Dictionary'\r\n// import {KTSVG, toAbsoluteUrl} from '../../../../_metronic/helpers'\r\n// import {Dropdown1} from '../../../../_metronic/partials'\r\n// import {AsideDefault} from '../../../../_metronic/layout/components/aside/AsideDefault'\r\n// import {Footer} from '../../../../_metronic/layout/components/Footer'\r\n// import {HeaderWrapper} from '../../../../_metronic/layout/components/header/HeaderWrapper'\r\nimport {PageDataProvider} from '../../../../_metronic/layout/core'\r\n// import {Content} from '../../../../_metronic/layout/components/Content'\r\n// import {\r\n// ChartsWidget1,\r\n// TablesWidget1,\r\n// ListsWidget5,\r\n// TablesWidget5,\r\n// } from '../../../../_metronic/partials/widgets'\r\n// import {stat} from 'fs'\r\n// import Confetti from 'react-confetti'\r\n// import ImageMapper from 'react-image-mapper'\r\n// import Draggable from 'react-draggable'\r\n// import {v4 as uuidv4} from 'uuid'\r\n// import Popup from 'reactjs-popup'\r\n// import SensorArea from './SensorArea'\r\nimport 'reactjs-popup/dist/index.css'\r\n// import {auto, hide, right} from '@popperjs/core'\r\nimport {ToastContainer, toast, Slide, Zoom, Flip, Bounce} from 'react-toastify'\r\nimport GoogleMapReact from 'google-map-react'\r\nimport MyGreatPlace from './my_great_place.jsx'\r\n\r\nimport shouldPureComponentUpdate from 'react-pure-render/function'\r\n\r\nimport MarkerExample, {K_SCALE_NORMAL} from './marker_example.jsx'\r\n\r\nimport {getScale, getRealFromTo} from '../helpers/calc_markers_visibility.js'\r\nimport markerDescriptions from '../constants/marker_descriptions.js'\r\nimport {customDistanceToMouse} from '../helpers/custom_distance.js'\r\n\r\nimport {FabricJSCanvas, useFabricJSEditor} from 'fabricjs-react'\r\nimport {fabric} from 'fabric'\r\n\r\nimport 'react-toastify/dist/ReactToastify.css'\r\nimport {List} from 'immutable'\r\nvar randomColor = require('randomcolor')\r\n\r\nfunction Map(props) {\r\n const [connection, setConnection] = useState(null)\r\n const reconnectRef = useRef(0)\r\n const urlParams = new URLSearchParams(window.location.search)\r\n const [isloading, setLoading] = useState(true)\r\n const [item, setItem] = useState('')\r\n const [SensorList, setsensorList] = useState([])\r\n const sensors = useRef([])\r\n\r\n const {selectedObjects, setSelectedObject, editor, onReady} = useFabricJSEditor({\r\n defaultStrokeColor: 'red',\r\n selection: false,\r\n })\r\n const [text, setText] = useState('')\r\n const [strokeColor, setStrokeColor] = useState('')\r\n const [fillColor, setFillColor] = useState('')\r\n const [isload, setisload] = useState(true)\r\n\r\n const AnyReactComponent = ({text}) => \r\n \r\n Generate Reports\r\n \r\n
\r\n {text}
\r\n const defaultProps = {\r\n center: {\r\n lat: 6.911979146490742,\r\n lng: 79.92597226721936,\r\n },\r\n zoom: 8,\r\n }\r\n\r\n const K_MARGIN_TOP = 30\r\n const K_MARGIN_RIGHT = 30\r\n const K_MARGIN_BOTTOM = 30\r\n const K_MARGIN_LEFT = 30\r\n\r\n const K_HOVER_DISTANCE = 30\r\n /*\r\n const initialStatex = [\r\n {\r\n name: 'KF',\r\n lat: 6.911979146490742,\r\n lng: 79.92597226721936,\r\n value: '',\r\n isNotify: false,\r\n link: '',\r\n type: '',\r\n },\r\n {\r\n name: 'EH',\r\n lat: 6.7064889452596015,\r\n lng: 79.94520235609559,\r\n value: '',\r\n isNotify: false,\r\n link: '',\r\n type: '',\r\n },\r\n ]*/\r\n\r\n //const initialStatex = []\r\n const [loc, setLoc] = useState([])\r\n const locax = useRef(loc)\r\n\r\n //editor?.addRectangle({ fill: \"red\", stroke: \"blue\" });\r\n /*selectedObjects[0]?.set({\r\n fill: \"red\",\r\n stroke: \"blue\",\r\n /* //Movement:\r\n lockMovementX : true,\r\n lockMovementY : true,\r\n \r\n //Scaling:\r\n lockScalingX : true,\r\n lockScalingY : true,\r\n \r\n // Rotation:\r\n lockRotation : true,\r\n \r\n // Object's frame/bounidngBox:\r\n hasControls : false,\r\n hasBorders : false,\r\n //left: selectedObjects[0].left + 100,\r\n });\r\n \r\n setTimeout(() => {\r\n if(isload){\r\n const data = JSON.parse(\r\n '{\"version\":\"4.3.1\",\"objects\":[{\"type\":\"circle\",\"version\":\"4.3.1\",\"originX\":\"left\",\"originY\":\"top\",\"left\":100,\"top\":100,\"width\":40,\"height\":40,\"fill\":\"rgba(255, 255, 255, 0.0)\",\"stroke\":\"#000000\",\"strokeWidth\":1,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeDashOffset\":0,\"strokeLineJoin\":\"miter\",\"strokeUniform\":false,\"strokeMiterLimit\":4,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"paintFirst\":\"fill\",\"globalCompositeOperation\":\"source-over\",\"skewX\":0,\"skewY\":0,\"radius\":20,\"startAngle\":0,\"endAngle\":6.283185307179586},{\"type\":\"text\",\"version\":\"4.3.1\",\"originX\":\"left\",\"originY\":\"top\",\"left\":253,\"top\":102,\"width\":95.55,\"height\":18.08,\"fill\":\"#000000\",\"stroke\":null,\"strokeWidth\":1,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeDashOffset\":0,\"strokeLineJoin\":\"miter\",\"strokeUniform\":false,\"strokeMiterLimit\":4,\"scaleX\":2.43,\"scaleY\":2.43,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"paintFirst\":\"fill\",\"globalCompositeOperation\":\"source-over\",\"skewX\":0,\"skewY\":0,\"text\":\"Some text\",\"fontSize\":16,\"fontWeight\":\"normal\",\"fontFamily\":\"Arial\",\"fontStyle\":\"normal\",\"lineHeight\":1.16,\"underline\":false,\"overline\":false,\"linethrough\":false,\"textAlign\":\"left\",\"textBackgroundColor\":\"\",\"charSpacing\":0,\"minWidth\":20,\"splitByGrapheme\":false,\"styles\":{}},{\"type\":\"rect\",\"lockMovementX\":\"True\",\"version\":\"4.3.1\",\"originX\":\"left\",\"originY\":\"top\",\"left\":109,\"top\":212,\"width\":40,\"height\":40,\"fill\":\"rgba(255, 255, 255, 0.0)\",\"stroke\":\"#000000\",\"strokeWidth\":1,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeDashOffset\":0,\"strokeLineJoin\":\"miter\",\"strokeUniform\":false,\"strokeMiterLimit\":4,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"paintFirst\":\"fill\",\"globalCompositeOperation\":\"source-over\",\"skewX\":0,\"skewY\":0,\"rx\":0,\"ry\":0},{\"type\":\"image\",\"version\":\"4.3.1\",\"originX\":\"left\",\"originY\":\"top\",\"left\":499,\"top\":86,\"width\":1200,\"height\":900,\"fill\":\"rgb(0,0,0)\",\"stroke\":null,\"strokeWidth\":0,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeDashOffset\":0,\"strokeLineJoin\":\"miter\",\"strokeUniform\":false,\"strokeMiterLimit\":4,\"scaleX\":0.2,\"scaleY\":0.2,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"paintFirst\":\"fill\",\"globalCompositeOperation\":\"source-over\",\"skewX\":0,\"skewY\":0,\"cropX\":0,\"cropY\":0,\"src\":\"https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg\",\"crossOrigin\":null,\"filters\":[]},{\"type\":\"polyline\",\"version\":\"4.3.1\",\"originX\":\"left\",\"originY\":\"top\",\"left\":483.78,\"top\":339.22,\"width\":50.88,\"height\":50.88,\"fill\":\"white\",\"stroke\":\"black\",\"strokeWidth\":2,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeDashOffset\":0,\"strokeLineJoin\":\"miter\",\"strokeUniform\":false,\"strokeMiterLimit\":4,\"scaleX\":1,\"scaleY\":1,\"angle\":262.52,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"paintFirst\":\"fill\",\"globalCompositeOperation\":\"source-over\",\"skewX\":0,\"skewY\":0,\"points\":[{\"x\":100,\"y\":100},{\"x\":99.11611652351681,\"y\":100.88388347648318},{\"x\":145.58058261758407,\"y\":147.34834957055045},{\"x\":142.92893218813452,\"y\":150},{\"x\":150,\"y\":150},{\"x\":150,\"y\":142.92893218813452},{\"x\":147.34834957055045,\"y\":145.58058261758407},{\"x\":100.88388347648318,\"y\":99.11611652351681},{\"x\":100,\"y\":100}]},{\"type\":\"image\",\"version\":\"4.3.1\",\"originX\":\"left\",\"originY\":\"top\",\"left\":197,\"top\":132,\"width\":1200,\"height\":900,\"fill\":\"rgb(0,0,0)\",\"stroke\":null,\"strokeWidth\":0,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeDashOffset\":0,\"strokeLineJoin\":\"miter\",\"strokeUniform\":false,\"strokeMiterLimit\":4,\"scaleX\":0.2,\"scaleY\":0.2,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"paintFirst\":\"fill\",\"globalCompositeOperation\":\"source-over\",\"skewX\":0,\"skewY\":0,\"cropX\":0,\"cropY\":0,\"src\":\"https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg\",\"crossOrigin\":null,\"filters\":[]}]}'\r\n );\r\n editor?.canvas.loadFromJSON(data);\r\n console.log(JSON.stringify(editor?.canvas))\r\n setisload(false);\r\n }\r\n }, 5000);\r\n \r\n */\r\n\r\n const [layout, setLayout] = useState({\r\n id: props.layout, //urlParams.get('id')??props.layout,\r\n layoutName: '',\r\n imageData: null,\r\n devices: [],\r\n isZoom: false,\r\n globalJs: '',\r\n designObject: [],\r\n })\r\n const [state, setState] = useState({\r\n Data: {},\r\n DashboardStat: 'CONNECTING',\r\n SensorList: [],\r\n loc: [],\r\n })\r\n\r\n const hubService = process.env.REACT_APP_MIDAS_HUB //\"https://signalr.midassit.com\";\r\n\r\n useEffect(() => {\r\n if (connection) {\r\n connection\r\n .start()\r\n .then((result) => {\r\n setState({\r\n ...state,\r\n DashboardStat: 'CONNECTED',\r\n })\r\n setLoading(false)\r\n reconnectRef.current = 0\r\n //console.log('Connected!');\r\n connection.onreconnecting((error) => {\r\n setState({\r\n ...state,\r\n DashboardStat: 'RECONNECTING',\r\n })\r\n console.log('Connection lost due to error . Reconnecting.')\r\n })\r\n\r\n // Reconnect if hub disconnects\r\n connection.onclose(function (e) {\r\n setState({\r\n ...state,\r\n DashboardStat: 'DISCONNECTED',\r\n })\r\n //console.log('Disconnected');\r\n })\r\n\r\n connection.on('ReceiveMessage', (message) => {\r\n //console.log(message)\r\n\r\n if (typeof message === 'string' || message instanceof String) {\r\n message = JSON.parse(message)\r\n }\r\n\r\n if (message.key !== 'SensorData') return\r\n\r\n let dataPacket = JSON.parse(message.data)\r\n\r\n /* */ if (\r\n dataPacket.TimeStamp === undefined ||\r\n Math.round((new Date() - new Date(dataPacket.TimeStamp)) / 1000) > 10\r\n ) {\r\n return\r\n } else {\r\n /*if (dataPacket.IsNotify) {\r\n toast.error(dataPacket.Message, {\r\n position: 'top-right',\r\n autoClose: 5000,\r\n hideProgressBar: true,\r\n closeOnClick: true,\r\n pauseOnHover: true,\r\n draggable: true,\r\n progress: undefined,\r\n })\r\n }*/\r\n\r\n if (dataPacket.Packet === layout.id.replace('ly', '')) {\r\n console.log(dataPacket)\r\n\r\n //console.log(JSON.stringify(loc))\r\n //console.log(testx)\r\n //console.log(dataPacket.Name)\r\n const newState = locax.current.map((obj) => {\r\n // 👇️ if id equals 2, update country property.\r\n\r\n if (\r\n dataPacket[obj.name] === undefined ||\r\n dataPacket[obj.name + '_gps'] === undefined\r\n )\r\n return obj\r\n\r\n // console.log(obj.name)\r\n // console.log(dataPacket[obj.name] + ' ' + dataPacket[obj.name + '_gps'])\r\n\r\n //console.log('XX' + dataPacket.Name)\r\n return {\r\n ...obj,\r\n value: dataPacket[obj.name],\r\n lat: dataPacket[obj.name + '_gps'].Lat, //6.7064889452596015, //,\r\n lng: dataPacket[obj.name + '_gps'].Lng, //79.94520235609559, //dataPacket[obj.name + '_gps'].Lat,\r\n isNotify: false,\r\n link: '/facility-detail-item/' + obj.code,\r\n type: 'Car',\r\n }\r\n\r\n // 👇️ otherwise return the object as is\r\n // return obj\r\n })\r\n\r\n locax.current = newState\r\n setLoc(newState)\r\n\r\n /* data.push({\r\n value: '17',\r\n lat: 6.7064889452596015,\r\n lng: 79.94520235609559,\r\n isNotify: false,\r\n link: '',\r\n type: 'Car',\r\n //}\r\n })*/\r\n //locax.current = newState\r\n //setLoc(newState)\r\n }\r\n\r\n //\r\n //console.log(dataPacket)\r\n //console.log(dataPacket.SensorValue)\r\n //let newElements = {}\r\n // Object.entries(dataPacket).map(([key, value]) => {\r\n // newElements[key] = value\r\n // })\r\n\r\n setState({\r\n ...state,\r\n SensorList: sensors.current,\r\n DashboardStat: 'CONNECTED',\r\n //loc: newState,\r\n })\r\n //console.log(JSON.stringify(state.loc))\r\n }\r\n })\r\n })\r\n .catch((e) => {\r\n console.log('Connection failed: ', e)\r\n })\r\n }\r\n }, [connection])\r\n\r\n useEffect(() => {\r\n axios({\r\n method: 'get',\r\n url: process.env.REACT_APP_BACKEND_API + '/api/sensor-monitor/layout?layout=' + layout.id,\r\n headers: {},\r\n }).then((response) => {\r\n setLayout({\r\n ...layout,\r\n layoutName: response.data.result.layoutName,\r\n imageData: 'data:image/png;base64,' + response.data.result.imageData,\r\n isZoom: response.data.result.isZoom,\r\n globalJs: response.data.result.globalJs,\r\n designObject: response.data.result.designObject,\r\n })\r\n\r\n var allSensors = []\r\n for (let index = 0; index < response.data.result.devices.length; index++) {\r\n const element = response.data.result.devices[index]\r\n allSensors.push({\r\n code: element.id,\r\n name: element.machineNo,\r\n value: '',\r\n lat: '',\r\n lng: '',\r\n isNotify: false,\r\n link: '',\r\n type: 'Car',\r\n //}\r\n })\r\n }\r\n //console.log('sssssssssssssssss' + JSON.stringify(allSensors))\r\n locax.current = allSensors\r\n\r\n setState({\r\n ...state,\r\n SensorList: response.data.result.devices,\r\n })\r\n\r\n sensors.current = response.data.result.devices\r\n\r\n setTimeout(() => {\r\n for (let index = 0; index < sensors.current.length; index++) {\r\n const element = sensors.current[index]\r\n try {\r\n eval(layout.globalJs + ';' + element.tempFeild1)\r\n } catch (error) {\r\n console.log(error)\r\n }\r\n }\r\n setState({\r\n ...state,\r\n SensorList: sensors.current,\r\n DashboardStat: 'INITIALIZATION',\r\n })\r\n setTimeout(() => {\r\n const newConnection = new HubConnectionBuilder()\r\n .withUrl(hubService + '/' + response.data.result.hub + '/Hub')\r\n .withAutomaticReconnect()\r\n .build()\r\n setConnection(newConnection)\r\n }, 100)\r\n }, 500)\r\n })\r\n }, [])\r\n\r\n if (editor != undefined && isload && layout.designObject.length > 0) {\r\n var desginObject = {\r\n version: '4.3.1',\r\n objects: [],\r\n }\r\n for (let index = 0; index < layout.designObject.length; index++) {\r\n const element = layout.designObject[index]\r\n var ds = JSON.parse(element.tempFeild1)\r\n //Movement:\r\n ds.lockMovementX = true\r\n ds.lockMovementY = true\r\n\r\n //Scaling:\r\n ds.lockScalingX = true\r\n ds.lockScalingY = true\r\n\r\n // Rotation:\r\n ds.lockRotation = true\r\n\r\n // Object's frame/bounidngBox:\r\n ds.hasControls = false\r\n ds.hasBorders = false\r\n desginObject.objects.push(ds)\r\n }\r\n editor?.canvas.loadFromJSON(desginObject)\r\n\r\n setisload(false)\r\n }\r\n\r\n let bodyCss = {\r\n overflowX: 'hidden',\r\n }\r\n\r\n function hideAllNotification() {\r\n toast.dismissAll()\r\n }\r\n\r\n function hideNotification(notification) {\r\n toast.dismiss(notification.toastId)\r\n }\r\n\r\n function getTransactionType(transition) {\r\n switch (transition.toLowerCase()) {\r\n case 'flip':\r\n return Flip\r\n case 'slide':\r\n return Slide\r\n case 'zoom':\r\n return Zoom\r\n\r\n default:\r\n return Bounce\r\n }\r\n }\r\n function getType(type) {\r\n switch (type.toLowerCase()) {\r\n case 'info':\r\n return toast.TYPE.INFO\r\n case 'error':\r\n return toast.TYPE.ERROR\r\n case 'success':\r\n return toast.TYPE.SUCCESS\r\n case 'warning':\r\n return toast.TYPE.WARNING\r\n default:\r\n return toast.TYPE.INFO\r\n }\r\n }\r\n\r\n function showNotification(notification) {\r\n notification.transition = getTransactionType(notification.transition)\r\n if (toast.isActive(notification.toastId)) {\r\n notification.render = notification.message\r\n notification.type = getType(notification.type)\r\n toast.update(notification.toastId, notification)\r\n return\r\n }\r\n\r\n switch (notification.type) {\r\n case 'error':\r\n toast.error(notification.message, notification)\r\n break\r\n case 'info':\r\n toast.info(notification.message, notification)\r\n break\r\n case 'warning':\r\n toast.warn(notification.message, notification)\r\n break\r\n case 'success':\r\n toast.success(notification.message, notification)\r\n break\r\n default:\r\n toast(notification.message)\r\n break\r\n }\r\n }\r\n\r\n function Notification(notification) {\r\n if (toast.isActive(notification.toastId)) {\r\n toast.dismiss(notification.toastId)\r\n }\r\n switch (notification.Type) {\r\n case 'error':\r\n toast.error(notification.Message, {\r\n toastId: notification?.toastId ?? 'default',\r\n position: notification?.Position ?? 'top-right',\r\n autoClose: notification?.Autoclose ?? 5000,\r\n hideProgressBar: true,\r\n closeOnClick: true,\r\n pauseOnHover: true,\r\n draggable: true,\r\n progress: undefined,\r\n })\r\n break\r\n\r\n case 'info':\r\n toast.info(notification.Message, {\r\n position: notification?.Position ?? 'top-right',\r\n autoClose: notification?.Autoclose ?? 5000,\r\n toastId: notification?.toastId ?? 'default',\r\n hideProgressBar: false,\r\n closeOnClick: true,\r\n pauseOnHover: true,\r\n draggable: true,\r\n progress: undefined,\r\n })\r\n break\r\n case 'warning':\r\n toast.warn(notification.Message, {\r\n position: notification?.Position ?? 'top-right',\r\n autoClose: notification?.Autoclose ?? 5000,\r\n toastId: notification.toastId ?? 'default',\r\n hideProgressBar: false,\r\n closeOnClick: true,\r\n pauseOnHover: true,\r\n draggable: true,\r\n progress: undefined,\r\n })\r\n break\r\n case 'success':\r\n toast.success(notification.Message, {\r\n position: notification?.Position ?? 'top-right',\r\n autoClose: notification?.Autoclose ?? 5000,\r\n toastId: notification?.toastId ?? 'default',\r\n hideProgressBar: false,\r\n closeOnClick: true,\r\n pauseOnHover: true,\r\n draggable: true,\r\n progress: undefined,\r\n })\r\n break\r\n default:\r\n toast('Wow so easy!')\r\n break\r\n }\r\n }\r\n\r\n let backcss = {\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n margin: 'auto',\r\n width: '1200px',\r\n }\r\n\r\n let sensorcss = {\r\n position: 'absolute',\r\n width: '1200px',\r\n }\r\n\r\n if (!layout.isZoom) {\r\n backcss = {\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n margin: 'auto',\r\n }\r\n\r\n sensorcss = {\r\n position: 'absolute',\r\n }\r\n\r\n bodyCss = {}\r\n }\r\n {\r\n /*\r\n if (isloading) {\r\n return (\r\n <>\r\n \r\n
\r\n Elysium Automation
\r\n\r\n
\r\n \r\n \r\n <>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n )\r\n }\r\n */\r\n }\r\n return (\r\n \r\n {/*\r\n {layout.layoutName}
/*}\r\n {/*
\r\n \r\n \r\n {layout.layoutName}
\r\n Elysium IOT\r\n \r\n {state.DashboardStat === 'DISABLED' && (\r\n \r\n {state.DashboardStat}\r\n \r\n )}\r\n {state.DashboardStat === 'ACTIVE' && (\r\n \r\n {state.DashboardStat}\r\n \r\n )}\r\n {state.DashboardStat === 'CONNECTED' && (\r\n \r\n {state.DashboardStat}\r\n \r\n )}\r\n {state.DashboardStat === 'CONNECTING' && (\r\n \r\n {state.DashboardStat}\r\n \r\n )}\r\n
/*}\r\n {/* \r\n {new Date().getFullYear()} ©\r\n \r\n overleap | Elysium\r\n \r\n
*/}\r\n \r\n \r\n {loc.map(\r\n (marker, index) =>\r\n marker.lat != '' && (\r\n \r\n )\r\n )}\r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n","import clsx from 'clsx'\r\nimport React, { FC } from 'react'\r\nimport { Link } from 'react-router-dom'\r\nimport { useLayout } from '../../../core/LayoutProvider'\r\nimport { usePageData } from '../../../core/PageData'\r\n\r\nconst DefaultTitle: FC = () => {\r\n const { pageTitle, pageDescription, pageBreadcrumbs } = usePageData()\r\n const { config, attributes, classes } = useLayout()\r\n return (\r\n \r\n
\r\n\r\n \r\n\r\n Filter Options
\r\n \r\n
\r\n \r\n \r\n\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n\r\n
\r\n\r\n \r\n \r\n\r\n \r\n
\r\n \r\n \r\n\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n Reset\r\n \r\n\r\n \r\n
\r\n \r\n {pageTitle}\r\n {pageDescription && config.pageTitle && config.pageTitle.description && (\r\n <>\r\n \r\n {pageDescription}\r\n \r\n )}\r\n
\r\n )}\r\n {/* end::Title */}\r\n\r\n {pageBreadcrumbs &&\r\n pageBreadcrumbs.length > 0 &&\r\n config.pageTitle &&\r\n config.pageTitle.breadCrumbs && (\r\n <>\r\n {config.pageTitle.direction === 'row' && (\r\n \r\n )}\r\n- \r\n {Array.from(pageBreadcrumbs).map((item, index) => (\r\n
- {pageTitle} \r\n
\r\n {/* begin::Content */}\r\n
\r\n \r\n )\r\n }\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n <>\r\n {' '}\r\n {state.DashboardStat}{' '}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {/* begin::Header */}\r\n
\r\n {/* end::Header */}\r\n {/* begin::Body */}\r\n \r\n \r\n \r\n
\r\n \r\n Last 24h Alerts\r\n Alert Management\r\n
\r\n\r\n {/* begin::Table container */}\r\n
\r\n {/* begin::Body */}\r\n \r\n )\r\n }\r\n const [countdown, setCountdown] = useState(60)\r\n const [countdown2, setCountdown2] = useState(0)\r\n // useEffect(() => {\r\n // if (connection) {\r\n // connection\r\n // .start()\r\n // .then((result) => {\r\n // setState({\r\n // ...state,\r\n // DashboardStat: 'CONNECTED',\r\n // })\r\n // setLoading(false)\r\n // reconnectRef.current = 0\r\n // connection.onreconnecting((error) => {\r\n // setState({\r\n // ...state,\r\n // DashboardStat: 'RECONNECTING',\r\n // })\r\n // console.log('Connection lost due to error . Reconnecting.')\r\n // })\r\n\r\n // // Reconnect if hub disconnects\r\n // connection.onclose(function (e) {\r\n // setState({\r\n // ...state,\r\n // DashboardStat: 'DISCONNECTED',\r\n // })\r\n // //console.log('Disconnected');\r\n // })\r\n\r\n // connection.on('ReceiveMessage', (message) => {\r\n // if (typeof message === 'string' || message instanceof String) {\r\n // message = JSON.parse(message)\r\n // }\r\n // if (message.key !== 'SensorData') return\r\n\r\n // let dataPacket = JSON.parse(message.data)\r\n // if (\r\n // dataPacket.TimeStamp === undefined ||\r\n // Math.round((new Date() - new Date(dataPacket.TimeStamp)) / 1000) > 10\r\n // ) {\r\n // return\r\n // }\r\n\r\n // console.log(message)\r\n // let newElements = {}\r\n // Object.entries(dataPacket).map(([key, value]) => {\r\n // newElements[key] = value\r\n // })\r\n\r\n // Object.entries(dataPacket).map(([key, value]) => {\r\n // for (let index = 0; index < sensors.current.length; index++) {\r\n // const element = sensors.current[index]\r\n // if (element.machineNo === '') continue\r\n\r\n // if (element.displayName === '') element.displayName = ' '\r\n\r\n // if (element.icon === undefined) element.icon = 'dot'\r\n\r\n // if (\r\n // element.isNotify === undefined ||\r\n // element.isNotify === '' ||\r\n // element.isNotify === null\r\n // )\r\n // element.isNotify = false\r\n\r\n // if (!element.lastUpdate) {\r\n // element.lastUpdate = new Date()\r\n // } else if (Math.round((new Date() - new Date(element.lastUpdate)) / 1000) > 60) {\r\n // // console.log('[DB PACKET ' + element.machineNo.toString().toLowerCase() + ']')\r\n // if (\r\n // element.type == 14 ||\r\n // element.type == 13 ||\r\n // element.type == 17 ||\r\n // element.type == 15\r\n // ) {\r\n // //console.log(\"[chart data cleared \"+element.machineNo.toString().toLowerCase()+\"]\");\r\n // element.value = []\r\n // } else {\r\n // element.value = '---'\r\n // element.color = 'black'\r\n // }\r\n // }\r\n\r\n // let object = element.object.toString().toLowerCase()\r\n // let packetType = dataPacket.Plant + '.' + dataPacket.Packet\r\n\r\n // if (\r\n // element.object.toString().toLowerCase() === key.toString().toLowerCase() &&\r\n // packetType.toString().toLowerCase() === element.pakages\r\n // ) {\r\n // element.lastUpdate = new Date()\r\n // element.value = value\r\n // element.color = 'black'\r\n // element.notification = {\r\n // toastId: key.toString().toLowerCase(),\r\n // position: 'top-right',\r\n // type: 'info',\r\n // autoClose: false, // or set time\r\n // hideProgressBar: false,\r\n // closeOnClick: true,\r\n // // pauseOnHover: true,\r\n // draggable: false,\r\n // progress: undefined,\r\n // transition: Bounce,\r\n // }\r\n // try {\r\n // // alert(layout.globalJs)\r\n // eval(layout.globalJs + ';' + element.formula)\r\n // // eval(element.formula)\r\n // } catch (error) {\r\n // element.value = '---'\r\n // element.color = 'black'\r\n // // console.log(element.formula)\r\n // console.log(error)\r\n // }\r\n // }\r\n // }\r\n // })\r\n // setState({\r\n // ...state,\r\n // SensorList: sensors.current,\r\n // DashboardStat: 'CONNECTED',\r\n // })\r\n // })\r\n // })\r\n // .catch((e) => {})\r\n // }\r\n // }, [connection])\r\n\r\n useEffect(() => {\r\n const countdownInterval = setInterval(() => {\r\n // Decrease the countdown value every second\r\n setCountdown((prevCountdown) => (prevCountdown - 1 < 0 ? 0 : prevCountdown - 1))\r\n }, 1000)\r\n\r\n // Cleanup function to clear the interval when the component unmounts\r\n return () => clearInterval(countdownInterval)\r\n }, []) // Empty dependency array ensures the effect runs only once\r\n\r\n useEffect(() => {\r\n axios({\r\n method: 'get',\r\n url:\r\n process.env.REACT_APP_BACKEND_API +\r\n '/api/sensors/' +\r\n (props.match?.params?.code ?? 'dream'),\r\n headers: {...axioDefaultConfig.headers, Authorization: 'Bearer ' + token},\r\n }).then((response) => {\r\n // alert(response.data.result.unitModels[0].object)\r\n if (response.data.status == 'S') {\r\n setLayout({\r\n ...layout,\r\n //subSectorName: response.data.result.subSectors[0].name,\r\n //subSectorCode: response.data.result.subSectors[0].code,\r\n //sectorName: response.data.result.name,\r\n //sectorCode: response.data.result.code,\r\n //factroyName: response.data.result.subSectors[0].factories[0].name,\r\n //factroyCode: response.data.result.subSectors[0].factories[0].code,\r\n //unitName: response.data.result.businessUnitModels[0].name,\r\n //unitCode: response.data.result.businessUnitModels[0].code,\r\n Sensor: response.data.result.unitModels[0],\r\n breadCrumbs: response.data.result.breadCrumbs,\r\n })\r\n objBrowser.current = response.data.result.unitModels[0]\r\n // setBreadCrum(response)\r\n\r\n RefreshData(response.data.result.unitModels[0])\r\n setInterval(() => {\r\n RefreshData(response.data.result.unitModels[0])\r\n }, 60000)\r\n\r\n setState({\r\n ...state,\r\n SensorList: response.data.result.unitModels,\r\n })\r\n sensors.current = response.data.result.unitModels\r\n setTimeout(() => {\r\n for (let index = 0; index < sensors.current.length; index++) {\r\n const element = sensors.current[index]\r\n try {\r\n eval(layout.globalJs + ';' + element.tempFeild1)\r\n } catch (error) {\r\n console.log(error)\r\n }\r\n }\r\n setState({\r\n ...state,\r\n SensorList: sensors.current,\r\n DashboardStat: 'INITIALIZATION',\r\n })\r\n\r\n setTimeout(() => {\r\n const newConnection = new HubConnectionBuilder()\r\n .withUrl(\r\n process.env.REACT_APP_MIDAS_HUB +\r\n '/' +\r\n response.data.result.automationChannel +\r\n '/Hub'\r\n )\r\n .withAutomaticReconnect()\r\n .build()\r\n setConnection(newConnection)\r\n }, 100)\r\n }, 500)\r\n }\r\n })\r\n }, [])\r\n\r\n // function RefreshData2() {\r\n // //alert('asdasd')\r\n // setChartLoading(true)\r\n // const chart = chartReference.current\r\n // setTimeout(() => {\r\n // setChartLoading(false)\r\n\r\n // chart.data.datasets[0] = [\r\n // {\r\n // label: '',\r\n // data: [],\r\n // lineTension: 0,\r\n // borderColor: 'rgb(53, 162, 235)',\r\n // backgroundColor: 'rgba(53, 162, 235, 0.5)',\r\n // },\r\n // ][0]\r\n // chart.update('none')\r\n // }, 10)\r\n // }\r\n\r\n function RefreshData(obj) {\r\n if (filter.current === '1') return\r\n //alert(filter.current)\r\n if (obj?.name == undefined) return\r\n const chart = chartReference.current\r\n const sector = ''\r\n axios({\r\n ...axioDefaultConfig,\r\n method: 'get',\r\n url: process.env.REACT_APP_BACKEND_API + '/api/get-alerts-tag?tag=' + obj.code,\r\n headers: {...axioDefaultConfig.headers, Authorization: 'Bearer ' + token},\r\n })\r\n .then(function (response) {\r\n setInitialLoading2(false)\r\n setdata(response?.data?.data)\r\n })\r\n .catch(function (error) {})\r\n\r\n var datafield = {}\r\n datafield['sensorCode'] = obj.code\r\n datafield['sort'] = 'TimeStamp: 1'\r\n datafield['find'] = 't_' + obj.object + ' : {$exists:true}, TimeStamp : ' + DeviceType\r\n datafield['project'] =\r\n 'TimeStamp: 1, ' +\r\n 't_' +\r\n obj.object +\r\n ' : 1, t_' +\r\n obj.object +\r\n '_gps : 1, t_' +\r\n obj.object +\r\n '_Ignition : 1 '\r\n axios({\r\n method: 'post',\r\n url: process.env.REACT_APP_BACKEND_API + '/api/sensor/getall',\r\n headers: {},\r\n data: datafield,\r\n }).then((response) => {\r\n if (response.data.status == 'S') {\r\n setChartLoading(false)\r\n gpsData.current = response.data\r\n // setLayout({\r\n // ...layout,\r\n // gpsdata: response.data,\r\n // })\r\n const _labels = []\r\n const _data = []\r\n const _gps_data = []\r\n for (let index = 0; index < response.data.result.list.length; index++) {\r\n const element = response.data.result.list[index]\r\n _labels.push(element['TimeStamp'])\r\n _data.push(element['t_' + obj.object])\r\n // console.log(element['t_' + obj.object + '_gps'])\r\n\r\n var gps = element['t_' + objBrowser.current.object + '_gps']\r\n var Ignition = element['t_' + objBrowser.current.object + '_Ignition'] ?? 'NA'\r\n if (gps?.Lat ?? 0 != 0) {\r\n const Bruno = _gps_data.find(\r\n (person) =>\r\n person.lat === gps?.Lat && person.lng === gps?.Lng && person.ignition === Ignition\r\n )\r\n if (Bruno === undefined) {\r\n _gps_data.push({\r\n lat: gps?.Lat,\r\n lng: gps?.Lng,\r\n value: element['t_' + objBrowser.current.object],\r\n text: element['TimeStamp'],\r\n endDate: element['TimeStamp'],\r\n waiting: 0,\r\n ignition: Ignition,\r\n })\r\n } else {\r\n Bruno.ignition = Ignition\r\n Bruno.waiting = dateConverter(Bruno.endDate, element['TimeStamp'])\r\n Bruno.text = `${element['TimeStamp']} /n waiting ${dateConverter(\r\n Bruno.endDate,\r\n element['TimeStamp']\r\n )}`\r\n }\r\n }\r\n // var gps = element['t_' + obj.object + '_gps']\r\n // if (gps?.Lat ?? 0 != 0) {\r\n // _gps_data.push({\r\n // lat: gps?.Lat,\r\n // lng: gps?.Lng,\r\n // value: element['t_' + obj.object],\r\n // text: element['TimeStamp'],\r\n // })\r\n // }\r\n }\r\n setCountdown(60)\r\n setLive({\r\n Live: response.data.result.currrent,\r\n Min: response.data.result.min,\r\n Max: response.data.result.max,\r\n Date: response.data.result.date,\r\n Status: response.data.result.status,\r\n Note: response.data.result.note,\r\n Description: response.data.result.description,\r\n NormalRange: response.data.result.normalRange,\r\n WarningRange: response.data.result.warningRange,\r\n CriticalRange: response.data.result.criticalRange,\r\n DisableRange: response.data.result.disableRange,\r\n Lat: response.data.result?.Lat ?? '-',\r\n Lng: response.data.result?.Lng ?? '-',\r\n ignition: response.data.result?.ignition ?? '-',\r\n })\r\n setgps_data(_gps_data)\r\n // gps_data.current = _gps_data\r\n setChartData({\r\n labels: _labels,\r\n datasets: [\r\n {\r\n label: '',\r\n data: _data,\r\n lineTension: 0,\r\n backgroundColor: 'rgba(75,192,192,0.4)',\r\n borderColor: 'rgba(75,192,192,1)',\r\n borderWidth: 1,\r\n },\r\n ],\r\n })\r\n setLoading(false)\r\n }\r\n })\r\n }\r\n\r\n function hideAllNotification() {\r\n toast.dismissAll()\r\n }\r\n\r\n function hideNotification(notification) {\r\n toast.dismiss(notification.toastId)\r\n }\r\n\r\n function getTransactionType(transition) {\r\n switch (transition.toLowerCase()) {\r\n case 'flip':\r\n return Flip\r\n case 'slide':\r\n return Slide\r\n case 'zoom':\r\n return Zoom\r\n\r\n default:\r\n return Bounce\r\n }\r\n }\r\n function getType(type) {\r\n switch (type.toLowerCase()) {\r\n case 'info':\r\n return toast.TYPE.INFO\r\n case 'error':\r\n return toast.TYPE.ERROR\r\n case 'success':\r\n return toast.TYPE.SUCCESS\r\n case 'warning':\r\n return toast.TYPE.WARNING\r\n default:\r\n return toast.TYPE.INFO\r\n }\r\n }\r\n\r\n function showNotification(notification) {\r\n notification.transition = getTransactionType(notification.transition)\r\n if (toast.isActive(notification.toastId)) {\r\n notification.render = notification.message\r\n notification.type = getType(notification.type)\r\n toast.update(notification.toastId, notification)\r\n return\r\n }\r\n\r\n switch (notification.type) {\r\n case 'error':\r\n toast.error(notification.message, notification)\r\n break\r\n case 'info':\r\n toast.info(notification.message, notification)\r\n break\r\n case 'warning':\r\n toast.warn(notification.message, notification)\r\n break\r\n case 'success':\r\n toast.success(notification.message, notification)\r\n break\r\n default:\r\n toast(notification.message)\r\n break\r\n }\r\n }\r\n\r\n function Notification(notification) {\r\n if (toast.isActive(notification.toastId)) {\r\n toast.dismiss(notification.toastId)\r\n }\r\n switch (notification.Type) {\r\n case 'error':\r\n toast.error(notification.Message, {\r\n toastId: notification?.toastId ?? 'default',\r\n position: notification?.Position ?? 'top-right',\r\n autoClose: notification?.Autoclose ?? 5000,\r\n hideProgressBar: true,\r\n closeOnClick: true,\r\n pauseOnHover: true,\r\n draggable: true,\r\n progress: undefined,\r\n })\r\n break\r\n\r\n case 'info':\r\n toast.info(notification.Message, {\r\n position: notification?.Position ?? 'top-right',\r\n autoClose: notification?.Autoclose ?? 5000,\r\n toastId: notification?.toastId ?? 'default',\r\n hideProgressBar: false,\r\n closeOnClick: true,\r\n pauseOnHover: true,\r\n draggable: true,\r\n progress: undefined,\r\n })\r\n break\r\n case 'warning':\r\n toast.warn(notification.Message, {\r\n position: notification?.Position ?? 'top-right',\r\n autoClose: notification?.Autoclose ?? 5000,\r\n toastId: notification.toastId ?? 'default',\r\n hideProgressBar: false,\r\n closeOnClick: true,\r\n pauseOnHover: true,\r\n draggable: true,\r\n progress: undefined,\r\n })\r\n break\r\n case 'success':\r\n toast.success(notification.Message, {\r\n position: notification?.Position ?? 'top-right',\r\n autoClose: notification?.Autoclose ?? 5000,\r\n toastId: notification?.toastId ?? 'default',\r\n hideProgressBar: false,\r\n closeOnClick: true,\r\n pauseOnHover: true,\r\n draggable: true,\r\n progress: undefined,\r\n })\r\n break\r\n default:\r\n toast('Wow so easy!')\r\n break\r\n }\r\n }\r\n\r\n const dateConverter = (startDate, timeEnd) => {\r\n const newStartDate = new Date(startDate)\r\n const newEndDate = new Date(timeEnd)\r\n const one_day = 1000 * 60\r\n let result\r\n result = Math.ceil((newEndDate.getTime() - newStartDate.getTime()) / one_day)\r\n console.log('date Converter result', result)\r\n if (result < 0) {\r\n return '0'\r\n }\r\n\r\n return `${Math.floor(result / 60)}h ${result % 60}min`\r\n }\r\n\r\n function OnReset() {\r\n const _gps_data = []\r\n for (let index = 0; index < gpsData.current.result.list.length; index++) {\r\n const element = gpsData.current.result.list[index]\r\n if (element == null) continue\r\n\r\n var gps = element['t_' + objBrowser.current.object + '_gps']\r\n var Ignition = element['t_' + objBrowser.current.object + '_Ignition'] ?? 'NA'\r\n if (gps?.Lat ?? 0 != 0) {\r\n const Bruno = _gps_data.find(\r\n (person) =>\r\n person.lat === gps?.Lat && person.lng === gps?.Lng && person.ignition === Ignition\r\n )\r\n if (Bruno === undefined) {\r\n _gps_data.push({\r\n lat: gps?.Lat,\r\n lng: gps?.Lng,\r\n value: element['t_' + objBrowser.current.object],\r\n text: element['TimeStamp'],\r\n endDate: element['TimeStamp'],\r\n waiting: 0,\r\n ignition: Ignition,\r\n })\r\n } else {\r\n Bruno.ignition = Ignition\r\n Bruno.waiting = dateConverter(Bruno.endDate, element['TimeStamp'])\r\n Bruno.text = `${element['TimeStamp']} /n waiting ${dateConverter(\r\n Bruno.endDate,\r\n element['TimeStamp']\r\n )}`\r\n }\r\n }\r\n }\r\n setgps_data(_gps_data)\r\n isPlaying.current = false\r\n filter.current = '0'\r\n setPlayUpToCount(-1)\r\n setPlayCount(0)\r\n setdefaultProps({\r\n ...defaultProps,\r\n zoom: 10,\r\n })\r\n }\r\n\r\n function Play() {\r\n const countdownInterval2 = setInterval(() => {\r\n //gps_data.current = _gps_data\r\n setPlayCount((prevCountdown) => {\r\n const _gps_data = []\r\n for (\r\n let index = 0;\r\n index <\r\n (gpsData.current.result.list.length > prevCountdown\r\n ? prevCountdown\r\n : gpsData.current.result.list.length);\r\n index++\r\n ) {\r\n const element = gpsData.current.result.list[index]\r\n if (element == null) continue\r\n\r\n var gps = element['t_' + objBrowser.current.object + '_gps']\r\n var Ignition = element['t_' + objBrowser.current.object + '_Ignition'] ?? 'NA'\r\n if (gps?.Lat ?? 0 != 0) {\r\n const Bruno = _gps_data.find(\r\n (person) =>\r\n person.lat === gps?.Lat && person.lng === gps?.Lng && person.ignition === Ignition\r\n )\r\n if (Bruno === undefined) {\r\n _gps_data.push({\r\n lat: gps?.Lat,\r\n lng: gps?.Lng,\r\n value: element['t_' + objBrowser.current.object],\r\n text: element['TimeStamp'],\r\n endDate: element['TimeStamp'],\r\n waiting: 0,\r\n ignition: Ignition,\r\n })\r\n } else {\r\n Bruno.ignition = Ignition\r\n Bruno.waiting = dateConverter(Bruno.endDate, element['TimeStamp'])\r\n Bruno.text = `${element['TimeStamp']} /n waiting ${dateConverter(\r\n Bruno.endDate,\r\n element['TimeStamp']\r\n )}`\r\n }\r\n }\r\n }\r\n // alert(prevCountdown)\r\n // alert(gpsData.current.result.list.length)\r\n // alert(_gps_data.length)\r\n setgps_data(_gps_data)\r\n\r\n if (gpsData.current.result.list.length < prevCountdown || !isPlaying.current) {\r\n OnReset()\r\n\r\n clearInterval(countdownInterval2)\r\n }\r\n return prevCountdown + 1\r\n })\r\n }, 500)\r\n }\r\n\r\n // useEffect(() => {\r\n // setdefaultProps({\r\n // center: {\r\n // lat: gps_data[PlayUpToCount].lat,\r\n // lng: gps_data[PlayUpToCount].lng,\r\n // },\r\n // zoom: 10,\r\n // })\r\n // }, [PlayUpToCount])\r\n\r\n useEffect(() => {\r\n if (containerRef.current) {\r\n containerRef.current.scrollTop = containerRef.current.scrollHeight\r\n }\r\n }, [gps_data])\r\n // Prevent user from scrolling up (if needed)\r\n const handleWheel = (event) => {\r\n if (containerRef.current) {\r\n const {scrollTop, scrollHeight, clientHeight} = containerRef.current\r\n // Prevent scrolling up\r\n if (scrollTop === 0 && event.deltaY < 0) {\r\n event.preventDefault() // Prevent scrolling up\r\n }\r\n }\r\n }\r\n\r\n function onClearFilter() {\r\n filter.current = '0'\r\n setPlayUpToCount(-1)\r\n setPlayCount(0)\r\n RefreshData(objBrowser.current)\r\n }\r\n\r\n function onSelect(index2) {\r\n setdefaultProps({\r\n center: {\r\n lat: Number(gps_data[index2].lat),\r\n lng: Number(gps_data[index2].lng),\r\n },\r\n zoom: 15,\r\n })\r\n filter.current = '1'\r\n setPlayUpToCount(index2)\r\n }\r\n\r\n function onStop() {\r\n isPlaying.current = false\r\n // setIsPlaying(false)\r\n }\r\n\r\n function onPlay() {\r\n setgps_data([])\r\n isPlaying.current = true\r\n // setIsPlaying(true)\r\n setPlayUpToCount(-1)\r\n setPlayCount(0)\r\n filter.current = '1'\r\n setdefaultProps({\r\n ...defaultProps,\r\n zoom: 15,\r\n })\r\n setTimeout(() => {\r\n Play()\r\n }, 200)\r\n }\r\n // function timeonchange(e) {\r\n // setDeviceType(e.target.value)\r\n // setChartLoading(true)\r\n // setTimeout(() => {\r\n // RefreshData(layout.Sensor)\r\n // }, 100)\r\n // }\r\n\r\n var statusColorClass = 'btn btn-sm btn-light-dark'\r\n if (live.Status == 'NORMAL') {\r\n statusColorClass = 'btn btn-sm btn-light-success'\r\n } else if (live.Status == 'WARNING') {\r\n statusColorClass = 'btn btn-sm btn-light-warning'\r\n } else if (live.Status == 'CRITICAL') {\r\n statusColorClass = 'btn btn-sm btn-light-danger'\r\n }\r\n\r\n return (\r\n <>\r\n \r\n {/* begin::Table */}\r\n \r\n \r\n Ticket \r\n Description \r\n \r\n \r\n {page.length === 0 && (\r\n \r\n \r\n No Data Found!\r\n \r\n \r\n )}\r\n {page.map((row, i) => {\r\n prepareRow(row)\r\n return (\r\n \r\n {/* {row.cells.map((cell) => {\r\n return {cell.render('Cell')} \r\n })}*/}\r\n \r\n {\r\n \r\n {row.values.formatCode}\r\n \r\n }\r\n \r\n \r\n {row.values.description}{' '}\r\n \r\n {row.values.priority}\r\n \r\n {\r\n \r\n {row.values.facilityName}\r\n \r\n }\r\n
\r\n {row.values.createdOn}\r\n {row.values.status == 'Opened' && (\r\n\r\n {' '}\r\n OPENED ({row.values.remain})\r\n \r\n )}\r\n {row.values.status == 'Resolved' && (\r\n \r\n {' '}\r\n RESOLVED\r\n \r\n )}\r\n {row.values.status == 'Closed' && (\r\n \r\n {' '}\r\n CLOSED\r\n \r\n )}\r\n \r\n \r\n )\r\n })}\r\n \r\n \r\n {/* \r\n Pagination can be built however you'd like. \r\n This is just a very basic UI implementation:\r\n */}\r\n
\r\n {/* end::Table container */}\r\n \r\n {row.values.createdOn}\r\n {row.values.status == 'Opened' && (\r\n
- \r\n
- gotoPage(0)} disabled={!canPreviousPage}>\r\n First\r\n \r\n
- previousPage()} disabled={!canPreviousPage}>\r\n {'<'}\r\n \r\n
- nextPage()} disabled={!canNextPage}>\r\n {'>'}\r\n \r\n
- \r\n \r\n Page{' '}\r\n \r\n {pageIndex + 1} of {pageOptions.length}\r\n {' '}\r\n \r\n \r\n
- \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Data Visualized (24h){' '}\r\n
\r\n
\r\n\r\n \r\n Data Visualized (24h){' '}\r\n
\r\n \r\n {layout?.Sensor?.description}\r\n {filter.current == '0' && (\r\n <>\r\n \r\n Last Update at {live?.Date} \r\n \r\n \r\n )}\r\n {filter.current == '1' && (\r\n <>\r\n Filtered Apply\r\n \r\n Clear Filers\r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n {countdown <= 10 && filter.current == '0' && (\r\n <>\r\n Auto refresh in {countdown} seconds\r\n \r\n )}\r\n {countdown > 10 && filter.current == '0' && (\r\n <>\r\n
\r\n Auto refresh in {countdown} seconds
{' '}\r\n \r\n )}\r\n\r\n
\r\n \r\n \r\n {live.Live}°C\r\n
\r\n \r\n
\r\n
\r\n {\r\n filter.current = '1'\r\n // alert('HI EX' + values.datex)\r\n var datafield = {}\r\n datafield['sensorCode'] = layout.Sensor.code\r\n datafield['sort'] = 'TimeStamp: 1'\r\n datafield['date'] = values.datex\r\n datafield['Ftype'] = values.Ftype\r\n datafield['find'] = 't_' + layout.Sensor.object + ' : {$exists:true}, TimeStamp : DT'\r\n datafield['project'] =\r\n 'TimeStamp: 1, ' +\r\n 't_' +\r\n layout.Sensor.object +\r\n ' : 1, t_' +\r\n layout.Sensor.object +\r\n '_gps : 1, t_' +\r\n layout.Sensor.object +\r\n '_Ignition : 1 '\r\n axios({\r\n method: 'post',\r\n url: process.env.REACT_APP_BACKEND_API + '/api/sensor/getall',\r\n headers: {},\r\n data: datafield,\r\n }).then((response) => {\r\n const _labels = []\r\n const _data = []\r\n const _gps_data = []\r\n if (response.data.status == 'S') {\r\n setChartLoading(false)\r\n gpsData.current = response.data\r\n // setLayout({\r\n // ...layout,\r\n // gpsdata: response.data,\r\n // })\r\n\r\n for (let index = 0; index < response.data.result.list.length; index++) {\r\n const element = response.data.result.list[index]\r\n _labels.push(element['TimeStamp'])\r\n _data.push(element['t_' + layout.Sensor.object])\r\n // console.log(element['t_' + obj.object + '_gps'])\r\n\r\n var gps = element['t_' + objBrowser.current.object + '_gps']\r\n var Ignition = element['t_' + objBrowser.current.object + '_Ignition'] ?? 'NA'\r\n if (gps?.Lat ?? 0 != 0) {\r\n const Bruno = _gps_data.find(\r\n (person) =>\r\n person.lat === gps?.Lat &&\r\n person.lng === gps?.Lng &&\r\n person.ignition === Ignition\r\n )\r\n if (Bruno === undefined) {\r\n _gps_data.push({\r\n lat: gps?.Lat,\r\n lng: gps?.Lng,\r\n value: element['t_' + objBrowser.current.object],\r\n text: element['TimeStamp'],\r\n endDate: element['TimeStamp'],\r\n waiting: 0,\r\n ignition: Ignition,\r\n })\r\n } else {\r\n Bruno.ignition = Ignition\r\n Bruno.waiting = dateConverter(Bruno.endDate, element['TimeStamp'])\r\n Bruno.text = `${element['TimeStamp']} /n waiting ${dateConverter(\r\n Bruno.endDate,\r\n element['TimeStamp']\r\n )}`\r\n }\r\n }\r\n // var gps = element['t_' + obj.object + '_gps']\r\n // if (gps?.Lat ?? 0 != 0) {\r\n // _gps_data.push({\r\n // lat: gps?.Lat,\r\n // lng: gps?.Lng,\r\n // value: element['t_' + obj.object],\r\n // text: element['TimeStamp'],\r\n // })\r\n // }\r\n }\r\n\r\n setLive({\r\n Live: response.data.result.currrent,\r\n Min: response.data.result.min,\r\n Max: response.data.result.max,\r\n Date: response.data.result.date,\r\n Status: response.data.result.status,\r\n Note: response.data.result.note,\r\n Description: response.data.result.description,\r\n NormalRange: response.data.result.normalRange,\r\n WarningRange: response.data.result.warningRange,\r\n CriticalRange: response.data.result.criticalRange,\r\n DisableRange: response.data.result.disableRange,\r\n Lat: response.data.result?.Lat ?? '-',\r\n Lng: response.data.result?.Lng ?? '-',\r\n ignition: response.data.result?.ignition ?? '-',\r\n })\r\n setgps_data(_gps_data)\r\n setChartData({\r\n labels: _labels,\r\n datasets: [\r\n {\r\n label: '',\r\n data: _data,\r\n lineTension: 0,\r\n backgroundColor: 'rgba(75,192,192,0.4)',\r\n borderColor: 'rgba(75,192,192,1)',\r\n borderWidth: 1,\r\n },\r\n ],\r\n })\r\n setLoading(false)\r\n } else {\r\n setgps_data([])\r\n setChartData({\r\n labels: _labels,\r\n datasets: [\r\n {\r\n label: '',\r\n data: _data,\r\n lineTension: 0,\r\n backgroundColor: 'rgba(75,192,192,0.4)',\r\n borderColor: 'rgba(75,192,192,1)',\r\n borderWidth: 1,\r\n },\r\n ],\r\n })\r\n setLoading(false)\r\n }\r\n // const _labels = []\r\n // const _data = []\r\n // if (response.data.status == 'S') {\r\n // setChartLoading(false)\r\n\r\n // for (let index = 0; index < response.data.result.list.length; index++) {\r\n // const element = response.data.result.list[index]\r\n // _labels.push(element['TimeStamp'])\r\n // _data.push(element['t_' + layout.Sensor.object])\r\n // }\r\n\r\n // setChartData({\r\n // labels: _labels,\r\n // datasets: [\r\n // {\r\n // label: '',\r\n // data: _data,\r\n // lineTension: 0,\r\n // backgroundColor: 'rgba(75,192,192,0.4)',\r\n // borderColor: 'rgba(75,192,192,1)',\r\n // borderWidth: 1,\r\n // },\r\n // ],\r\n // })\r\n // setLoading(false)\r\n // } else {\r\n // setChartData({\r\n // labels: _labels,\r\n // datasets: [\r\n // {\r\n // label: '',\r\n // data: _data,\r\n // lineTension: 0,\r\n // backgroundColor: 'rgba(75,192,192,0.4)',\r\n // borderColor: 'rgba(75,192,192,1)',\r\n // borderWidth: 1,\r\n // },\r\n // ],\r\n // })\r\n // setLoading(false)\r\n // }\r\n })\r\n //()\r\n }}\r\n >\r\n {({values, errors, touched, handleChange, handleBlur, handleSubmit}) => (\r\n \r\n )}\r\n \r\n
\r\n {/*\r\n \r\n
\r\n
\r\n \r\n
\r\n */}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n Data Visualized (24h)\r\n \r\n {layout?.Sensor?.description} |\r\n \r\n Last Update at {live?.Date} \r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n \r\n {' '}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Critical Level
\r\n{live?.CriticalRange} Range
\r\n \r\n {' '}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n Warning Level
\r\n{live?.WarningRange} Range
\r\n \r\n {' '}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n Normal Level
\r\n{live?.NormalRange} Range
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n Disable Level
\r\n\r\n {live?.DisableRange.substring(0, 15) + '...'} Range\r\n
\r\n \r\n {gps_data.length > 0 && (\r\n <>\r\n
\r\n {/* begin::Header */}\r\n
\r\n \r\n \r\n
\r\n \r\n Map View \r\n {/* {PlayCount} */}\r\n \r\n
\r\n\r\n\r\n {!isPlaying.current && (\r\n <>\r\n {' '}\r\n \r\n \r\n )}\r\n {isPlaying.current && (\r\n <>\r\n {' '}\r\n \r\n \r\n )}\r\n
\r\n \r\n onSelect(index)}\r\n className={\r\n 'col-lg-12 notice d-flex rounded border border-dashed mb-1 border-dark'\r\n }\r\n >\r\n
\r\n \r\n )}\r\n \r\n ))}\r\n \r\n \r\n \r\n {gps_data.map((marker, index) => (\r\n <>\r\n {PlayUpToCount == index && (\r\n <>\r\n onSelect(index)}\r\n className={\r\n 'col-lg-12 notice d-flex rounded border border-dashed mb-1 bg-light-danger border-danger border-dark'\r\n }\r\n >\r\n
\r\n \r\n )}\r\n {PlayUpToCount != index && (\r\n <>\r\n \r\n \r\n {marker.endDate}\r\n
\r\n
\r\n \r\n
\r\n W Time {marker.waiting} | IG :{' '}\r\n {marker.ignition == 1 ? (\r\n
\r\n ON
\r\n ) : marker.ignition == 0 ? (\r\nOFF
\r\n ) : (\r\n '-'\r\n )}{' '}\r\n | {marker.value} °C\r\n\r\n {/* {gps_data?.length - 1 === index && (\r\n <>\r\n \r\n \r\n )} */}\r\n \r\n {marker.endDate}\r\n
\r\n \r\n W Time {marker.waiting} | IG :{' '}\r\n {marker.ignition == 1 ? (\r\n
\r\n ON
\r\n ) : marker.ignition == 0 ? (\r\nOFF
\r\n ) : (\r\n '-'\r\n )}{' '}\r\n | {marker.value} °C\r\n\r\n {PlayUpToCount > 0 && (\r\n <>\r\n
\r\n \r\n \r\n {/* begin::Body */}\r\n \r\n \r\n )}\r\n {/* {gps_data.length > 0 && (\r\n <>\r\n \r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n {PlayUpToCount == -1 && (\r\n <>\r\n \r\n \r\n {gps_data.map((marker, index) => (\r\n \r\n ))}\r\n {/*\r\n { lat :6.9123483,\r\n lng:80.0322383,\r\n }\r\n key={index}\r\n lat={marker.lat}\r\n lng={marker.lng}\r\n text={''}\r\n isNotify={''} \r\n Link={''}\r\n Type={''}\r\n Value={''}\r\n \r\n {\r\n \r\n } */}\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Critical Level
\r\n {gps_data[gps_data.length - 1].text}
\r\n \r\n
\r\n \r\n \r\n
\r\n Warning Level
\r\n{live?.WarningRange} Range
\r\n \r\n
\r\n \r\n\r\n \r\n
\r\n Normal Level
\r\n{live?.NormalRange} Range
\r\n \r\n
\r\n \r\n \r\n \r\n )} */}\r\n {/* {JSON.stringify(gps_data)} */}\r\n \r\n
\r\n Disable Level
\r\n{live?.DisableRange} Range
\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n Minimum Temprature\r\n Based On Last 24hours\r\n
\r\n\r\n \r\n {live.Min}°C\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n Maximum Temprature\r\n Based On Last 24hours\r\n
\r\n\r\n \r\n {live.Max}°C\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n Data Visualized \r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default SensorView\r\n","import React, {Component} from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport shouldPureComponentUpdate from 'react-pure-render/function'\r\nimport Popup from 'reactjs-popup'\r\nimport 'reactjs-popup/dist/index.css'\r\nimport {greatPlaceStyle2} from '../sensor/config/my_great_place_styles.js'\r\n\r\nexport default class MyPlace extends Component {\r\n static propTypes = {\r\n text: PropTypes.string,\r\n long_text: PropTypes.string,\r\n isNotify: PropTypes.bool,\r\n Link: PropTypes.string,\r\n }\r\n\r\n static defaultProps = {}\r\n\r\n shouldComponentUpdate = shouldPureComponentUpdate\r\n\r\n render() {\r\n if (this.props.Type == 'Car') {\r\n return (\r\n <>\r\n \r\n temp : {this.props.Value}°C
\r\n \r\n View More Details\r\n \r\n
\r\n \r\n \r\n )\r\n } else {\r\n if (!this.props.isNotify) {\r\n return (\r\n <>\r\n \r\n \r\n View More Details\r\n \r\n
\r\n {this.props.long_text}\r\n {/* \r\n View More Details\r\n */}\r\n
\r\n \r\n \r\n )\r\n } else {\r\n return (\r\n <>\r\n \r\n {this.props.long_text}\r\n {/* \r\n View More Details\r\n */}\r\n
\r\n \r\n \r\n )\r\n }\r\n }\r\n }\r\n}\r\n\r\nconst PopupExample = () => (\r\n Popup content here !!
\r\n \r\n const value = parseInt(buffer.style.getPropertyValue('z-index'))\r\n if (!isNaN(value) && value !== 0) {\r\n return value\r\n }\r\n }\r\n\r\n bufferNode = bufferNode.parentNode\r\n buffer = bufferNode as HTMLElement\r\n }\r\n return null\r\n}\r\n\r\nfunction getScrollTop(): number {\r\n return (document.scrollingElement || document.documentElement).scrollTop\r\n}\r\n\r\n// https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth\r\nfunction getViewPort(): ViewPortModel {\r\n return {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n }\r\n}\r\n\r\nfunction insertAfterElement(el: HTMLElement, referenceNode: HTMLElement) {\r\n return referenceNode.parentNode?.insertBefore(el, referenceNode.nextSibling)\r\n}\r\n\r\nfunction isElementHasClasses(element: HTMLElement, classesStr: string): boolean {\r\n const classes = classesStr.split(' ')\r\n for (let i = 0; i < classes.length; i++) {\r\n if (!element.classList.contains(classes[i])) {\r\n return false\r\n }\r\n }\r\n\r\n return true\r\n}\r\n\r\nfunction isVisibleElement(element: HTMLElement): boolean {\r\n return !(element.offsetWidth === 0 && element.offsetHeight === 0)\r\n}\r\n\r\n// Throttle function: Input as function which needs to be throttled and delay is the time interval in milliseconds\r\nfunction throttle(timer: number | undefined, func: Function, delay?: number) {\r\n // If setTimeout is already scheduled, no need to do anything\r\n if (timer) {\r\n return\r\n }\r\n\r\n // Schedule a setTimeout after delay seconds\r\n timer = window.setTimeout(function () {\r\n func()\r\n\r\n // Once setTimeout function execution is finished, timerId = undefined so that in
\r\n // the next scroll event function execution can be scheduled by the setTimeout\r\n timer = undefined\r\n }, delay)\r\n}\r\n\r\nfunction getElementChildren(element: HTMLElement, selector: string): Array
routeChange(link)}>\r\n {/* begin::Body */}\r\n
\r\n\r\n {/* end::Body */}\r\n \r\n )\r\n\r\n return (\r\n \r\n {/* begin::Header */}\r\n \r\n\r\n {/* begin::Item */}\r\n
\r\n {/* end::Items */}\r\n\r\n \r\n {/* begin::Heading */}\r\n
\r\n {/* end::Header */}\r\n {/* begin::Items */}\r\n \r\n
\r\n {/* end::Heading */}\r\n {/* begin::Balance */}\r\n {factoryName}
\r\n\r\n\r\n {!(val == '0%' || alldevice == undefined) && (<>\r\n \r\n \r\n )}\r\n\r\n {/*\r\n \r\n
\r\n \r\n Crtical \r\n \r\n {critical}\r\n \r\n
\r\n {/* end::Balance */}\r\n \r\n
\r\n {/* end::Item */}\r\n {/* begin::Item */}\r\n \r\n {/* begin::Title */}\r\n
\r\n {/* end::Description */}\r\n \r\n \r\n Warrnings\r\n \r\n \r\n
\r\n {/* end::Title */}\r\n {/* begin::Label */}\r\n \r\n
\r\n {/* end::Label */}\r\n {warning}
\r\n \r\n\r\n
\r\n \r\n {/* begin::Title */}\r\n
\r\n {/* end::Description */}\r\n \r\n \r\n Connections\r\n \r\n
\r\n {/* end::Title */}\r\n {/* begin::Label */}\r\n \r\n
\r\n {/* end::Label */}\r\n {val}
\r\n \r\n\r\n
\r\n\r\n\r\n {/* end::Item */}\r\n {/* begin::Item */}\r\n \r\n {/* begin::Title */}\r\n
\r\n {/* end::Description */}\r\n \r\n \r\n All Tags\r\n \r\n
\r\n {/* end::Title */}\r\n {/* begin::Label */}\r\n \r\n
\r\n {/* end::Label */}\r\n {alldevice}
\r\n \r\n\r\n
\r\n {/* end::Item */}\r\n \r\n {/* begin::Title */}\r\n
\r\n {/* end::Description */}\r\n \r\n \r\n Alerts\r\n \r\n
\r\n {/* end::Title */}\r\n {/* begin::Label */}\r\n Past 24 hours
\r\n \r\n
\r\n {/* end::Label */}\r\n {alert}
\r\n routeChange(link)} style={{ cursor: 'pointer' }}>\r\n {/* begin::Body */}\r\n
\r\n {/* end::Body */}\r\n \r\n )\r\n}\r\n\r\nexport { MixedWidget1 }\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useEffect, useRef } from 'react'\r\nimport ApexCharts, { ApexOptions } from 'apexcharts'\r\nimport { KTSVG } from '../../../helpers'\r\nimport { getCSSVariableValue } from '../../../assets/ts/_utils'\r\nimport { Dropdown1 } from '../../content/dropdown/Dropdown1'\r\n\r\ntype Props = {\r\n className: string\r\n chartColor: string\r\n chartHeight: string\r\n}\r\n\r\nconst MixedWidget7: React.FC\r\n {/* begin::Header */}\r\n \r\n {/* begin::Item */}\r\n
\r\n {/* end::Items */}\r\n \r\n {/* begin::Heading */}\r\n
\r\n {/* end::Header */}\r\n {/* begin::Items */}\r\n \r\n
\r\n {/* end::Heading */}\r\n {/* begin::Balance */}\r\n {factoryName}
\r\n\r\n {!(val == '0%' || alldevice == undefined) && (<>\r\n \r\n \r\n )}\r\n\r\n {/*\r\n \r\n
\r\n \r\n Crtical\r\n\r\n \r\n {critical}\r\n \r\n
\r\n {/* end::Balance */}\r\n \r\n\r\n
\r\n {/* end::Item */}\r\n {/* begin::Item */}\r\n \r\n {/* begin::Title */}\r\n
\r\n {/* end::Description */}\r\n \r\n \r\n Total\r\n \r\n \r\n
\r\n {/* end::Title */}\r\n {/* begin::Label */}\r\n \r\n
\r\n {/* end::Label */}\r\n {alldevice}
\r\n \r\n\r\n
\r\n {/* end::Item */}\r\n {/* begin::Item */}\r\n \r\n {/* begin::Title */}\r\n
\r\n {/* end::Description */}\r\n \r\n \r\n Warrnings\r\n \r\n \r\n
\r\n {/* end::Title */}\r\n {/* begin::Label */}\r\n \r\n
\r\n {/* end::Label */}\r\n {warning}
\r\n \r\n\r\n
\r\n {/* end::Item */}\r\n {/* begin::Item */}\r\n \r\n {/* begin::Title */}\r\n
\r\n {/* end::Description */}\r\n \r\n \r\n Connections\r\n \r\n
\r\n {/* end::Title */}\r\n {/* begin::Label */}\r\n \r\n
\r\n {/* end::Label */}\r\n {val}
\r\n \r\n\r\n
\r\n {/* end::Item */}\r\n \r\n {/* begin::Title */}\r\n
\r\n {/* end::Description */}\r\n \r\n \r\n Alerts\r\n \r\n
\r\n {/* end::Title */}\r\n {/* begin::Label */}\r\n Past 24 hours
\r\n \r\n
\r\n {/* end::Label */}\r\n {alert}
\r\n \r\n {/* begin::Beader */}\r\n
\r\n )\r\n}\r\n\r\nconst chartOptions = (chartColor: string, chartHeight: string): ApexOptions => {\r\n const baseColor = getCSSVariableValue('--bs-' + chartColor)\r\n const lightColor = getCSSVariableValue('--bs-light-' + chartColor)\r\n const labelColor = getCSSVariableValue('--bs-gray-700')\r\n\r\n return {\r\n series: [74],\r\n chart: {\r\n fontFamily: 'inherit',\r\n height: chartHeight,\r\n type: 'radialBar',\r\n },\r\n plotOptions: {\r\n radialBar: {\r\n hollow: {\r\n margin: 0,\r\n size: '65%',\r\n },\r\n dataLabels: {\r\n name: {\r\n show: false,\r\n fontWeight: '700',\r\n },\r\n value: {\r\n color: labelColor,\r\n fontSize: '30px',\r\n fontWeight: '700',\r\n offsetY: 12,\r\n show: true,\r\n formatter: function (val) {\r\n return val + '%'\r\n },\r\n },\r\n },\r\n track: {\r\n background: lightColor,\r\n strokeWidth: '100%',\r\n },\r\n },\r\n },\r\n colors: [baseColor],\r\n stroke: {\r\n lineCap: 'round',\r\n },\r\n labels: ['Progress'],\r\n }\r\n}\r\n\r\nexport { MixedWidget7 }\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useEffect, useRef } from 'react'\r\nimport ApexCharts, { ApexOptions } from 'apexcharts'\r\nimport { getCSSVariableValue } from '../../../assets/ts/_utils'\r\nimport { link } from 'fs'\r\nimport { config } from 'process'\r\n\r\ntype Props = {\r\n className: string\r\n chartColor: string\r\n chartHeight: string\r\n name: string\r\n min: string\r\n max: string\r\n val: number\r\n Link: string\r\n extra: string,\r\n type: string,\r\n\r\n}\r\n\r\nconst routeChange = (link: any) => {\r\n window.location.href = link;\r\n // alert('asa' + link)\r\n}\r\n\r\nconst MixedWidget10: React.FC\r\n
\r\n {/* end::Header */}\r\n\r\n {/* begin::Body */}\r\n \r\n Action Needed\r\n Check and Verified following Attempts\r\n
\r\n\r\n\r\n {/* begin::Menu */}\r\n \r\n
\r\n \r\n
\r\n {/* end::Body */}\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n Notes: make sure\r\n to verify all alerts\r\n
\r\n & warnings\r\n
routeChange(Link)} style={{ cursor: 'pointer' }}>\r\n {/* begin::Body */}\r\n
\r\n )\r\n }\r\n\r\n\r\n\r\n return (\r\n \r\n {/* begin::Stats */}\r\n
\r\n {/* end::Body */}\r\n \r\n
\r\n {/* end::Stats */}\r\n\r\n\r\n \r\n \r\n
\r\n ---
\r\n routeChange(Link)} style={{ cursor: 'pointer' }}>\r\n {/* begin::Body */}\r\n
\r\n )\r\n}\r\n\r\n\r\nexport { MixedWidget10 }\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useEffect, useRef } from 'react'\r\nimport ApexCharts, { ApexOptions } from 'apexcharts'\r\nimport { getCSSVariableValue } from '../../../assets/ts/_utils'\r\nimport { link } from 'fs'\r\nimport { config } from 'process'\r\nimport { KTSVG, toAbsoluteUrl } from '../../../../_metronic/helpers'\r\n\r\ntype Props = {\r\n className: string\r\n chartColor: string\r\n chartHeight: string\r\n name: string\r\n min: string\r\n max: string\r\n val: number\r\n Link: string\r\n type: string,\r\n data: string\r\n}\r\n\r\nconst routeChange = (link: any) => {\r\n window.location.href = link;\r\n // alert('asa' + link)\r\n}\r\n\r\nconst MixedWidget49: React.FC\r\n {/* begin::Stats */}\r\n
\r\n {/* end::Body */}\r\n \r\n
\r\n {/* end::Stats */}\r\n\r\n\r\n \r\n \r\n
\r\n {val}°C
\r\n \r\n <>\r\n \r\n \r\n \r\n
\r\n routeChange(Link)} style={{ cursor: 'pointer' }}>\r\n // {/* begin::Body */}\r\n //
\r\n // )\r\n // }\r\n //console.log(data)\r\n var objList = JSON.parse(data);\r\n\r\n\r\n ////var obj = objList.filter((item: any) => item.FieldName == \"MCU_TEMP\")[0]\r\n var ncu_fw_ver = objList.filter((item: any) => item.FieldName == \"NCU_FW_VER\")[0]\r\n var imei = objList.filter((item: any) => item.FieldName == \"IMEI\")[0]\r\n var BAT_VOL = objList.filter((item: any) => item.FieldName == \"BAT_VOL\")[0]\r\n ////var DATETIME = objList.filter((item: any) => item.FieldName == \"DATETIME\")[0]\r\n var GAS_METER = objList.filter((item: any) => item.FieldName == \"GAS_METER\")[0]\r\n\r\n //var pr = ((GAS_METER.Value / 400.0) * 100); //\r\n var F_DATETIME = objList.filter((item: any) => item.FieldName == \"F_DATETIME\")[0]\r\n //var CSQ = objList.filter((item: any) => item.FieldName == \"CSQ\")[0]\r\n var RSSI = objList.filter((item: any) => item.FieldName == \"RSSI\")[0] ?? \"\"\r\n\r\n var TANK_SIZE = objList.filter((item: any) => item.FieldName == \"TANK_SIZE\")[0]\r\n var GAS_PERCENT = objList.filter((item: any) => item.FieldName == \"GAS_PERCENT\")[0] ?? 0\r\n var pr = GAS_PERCENT.Value ?? 0\r\n var colurx = '#900C3F';\r\n if (pr > 70) {\r\n colurx = '#09932c';\r\n }\r\n else if (pr > 45) {\r\n colurx = '#FFC300'\r\n }\r\n else {\r\n colurx = '#900C3F';\r\n }\r\n\r\n return (\r\n \r\n // {/* begin::Stats */}\r\n //
\r\n // {/* end::Body */}\r\n // \r\n //
\r\n // {/* end::Stats */}\r\n\r\n\r\n // \r\n // \r\n //
\r\n // ---
\r\n // routeChange(Link)} style={{ cursor: 'pointer' }}>\r\n\r\n\r\n\r\n {/* begin::Body */}\r\n
\r\n )\r\n}\r\n\r\n\r\nexport { MixedWidget49 }\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React from 'react'\r\nimport { Dropdown1 } from '../../content/dropdown/Dropdown1'\r\nimport { KTSVG } from '../../../helpers'\r\n\r\n\r\n\r\ntype Props = {\r\n className: string\r\n color: string\r\n factoryName: string\r\n critical: string\r\n warning: string\r\n connected: number\r\n alldevice: number\r\n alert: string\r\n link: string,\r\n key: string,\r\n timestamp: string\r\n code: string,\r\n user: any\r\n}\r\n\r\n\r\nconst routeChange = (link: any) => {\r\n window.location.href = link;\r\n}\r\n\r\nconst MixedWidget20_1: React.FC\r\n {/* begin::Stats */}\r\n
\r\n {/* end::Body */}\r\n \r\n
\r\n {/* end::Stats */}\r\n\r\n\r\n \r\n \r\n
\r\n\r\n\r\n
\r\n\r\n\r\n | \r\n \r\n \r\n \r\n \r\n \r\n }) \r\n | \r\n \r\n \r\n\r\n \r\n {imei?.Value ?? \"--\"} {/*JSON.stringify(objList)} */}\r\n \r\n \r\n Tank Level: {GAS_METER?.Value} cm | Size: {TANK_SIZE?.Value ?? \"--- lb\"} \r\n\r\n | \r\n \r\n {pr}% \r\n | \r\n
\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n <>\r\n
\r\n {F_DATETIME?.Value}
\r\n V {ncu_fw_ver?.Value ?? \"--\"} Battery {BAT_VOL?.Value} {RSSI?.Value}\r\n \r\n \r\n {/* begin::Body */}\r\n
\r\n\r\n {/* end::Body */}\r\n \r\n )\r\n}\r\n\r\n\r\nexport { MixedWidget20_1 }\r\n","import React, {createContext, useContext, useReducer} from 'react'\r\n\r\nexport const DataLayerContext = createContext()\r\n\r\nexport const DataLayer = ({initialState, reducer, children}) => (\r\n \r\n {/* begin::Header */}\r\n \r\n\r\n {/* begin::Item */}\r\n
\r\n {/* end::Items */}\r\n\r\n routeChange(link)} >\r\n {/* begin::Heading */}\r\n
\r\n {/* end::Header */}\r\n {/* begin::Items */}\r\n \r\n
\r\n {/* end::Heading */}\r\n {/* begin::Balance */}\r\n {factoryName}
\r\n\r\n\r\n {!(val == '0%' || alldevice == undefined) && (<>\r\n \r\n \r\n )}\r\n\r\n {/*\r\n \r\n
\r\n \r\n Critical \r\n \r\n {critical}\r\n \r\n
\r\n {/* end::Balance */}\r\n \r\n
\r\n {/* end::Item */}\r\n {/* begin::Item */}\r\n \r\n {/* begin::Title */}\r\n
\r\n {/* end::Description */}\r\n \r\n \r\n Warnings\r\n \r\n
\r\n {/* end::Title */}\r\n {/* begin::Label */}\r\n \r\n Normal {normal}\r\n
\r\n \r\n
\r\n {/* end::Label */}\r\n {warning}
\r\n \r\n\r\n
\r\n \r\n {/* begin::Title */}\r\n
\r\n {/* end::Description */}\r\n \r\n \r\n Connections\r\n \r\n
\r\n {/* end::Title */}\r\n {/* begin::Label */}\r\n \r\n Disable {disable}\r\n
\r\n \r\n
\r\n {/* end::Label */}\r\n {val}
\r\n \r\n
\r\n {/* end::Item */}\r\n {/* begin::Item */}\r\n \r\n {/* begin::Title */}\r\n
\r\n {/* end::Description */}\r\n \r\n \r\n All Tags\r\n \r\n
\r\n {/* end::Title */}\r\n {/* begin::Label */}\r\n \r\n
\r\n {/* end::Label */}\r\n {alldevice}
\r\n \r\n\r\n \r\n {/* end::Description */}\r\n
\r\n {/* begin::Title */}\r\n \r\n
\r\n {/* end::Description */}\r\n\r\n {/* end::Item */}\r\n {timestamp}
{(user == 'Administrator' || user == 'Content_Admin') && edit facility info}\r\n \r\n temp : {this.props.Value}°C
\r\n \r\n View More Details\r\n \r\n
\r\n \r\n \r\n )\r\n } else {\r\n if (!this.props.isNotify) {\r\n return (\r\n <>\r\n \r\n \r\n View More Details\r\n \r\n
\r\n \r\n View More Details\r\n \r\n
\r\n \r\n \r\n )\r\n } else {\r\n return (\r\n <>\r\n \r\n \r\n View More Details\r\n \r\n
\r\n \r\n \r\n )\r\n }\r\n }\r\n }\r\n}\r\n\r\nconst PopupExample = () => (\r\n Popup content here !!
\r\n ![](\"a2.gif\")
\r\n \r\n \r\n {/* begin::Title */}\r\n
\r\n\r\n Confirm your registration
\r\n\r\n\r\n \r\n \r\n \r\n
\r\n\r\n {formik.status && (\r\n \r\n
\r\n )}\r\n\r\n {/* begin::Form group Firstname */}\r\n\r\n {/* end::Form group */}\r\n\r\n {/* begin::Form group Email */}\r\n {formik.status}
\r\n \r\n \r\n
\r\n {/* end::Form group */}\r\n\r\n {/* begin::Form group Password */}\r\n \r\n
\r\n )}\r\n \r\n {formik.errors.email}\r\n
\r\n \r\n
\r\n {/* end::Form group */}\r\n\r\n {/* begin::Form group Confirm password */}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formik.touched.password && formik.errors.password && (\r\n \r\n
\r\n )}\r\n \r\n {formik.errors.password}\r\n
\r\n \r\n \r\n
\r\n {/* end::Form group */}\r\n\r\n {/* begin::Form group */}\r\n {/* \r\n \r\n \r\n
\r\n {formik.touched.changepassword && formik.errors.changepassword && (\r\n \r\n
\r\n )}\r\n \r\n {formik.errors.changepassword}\r\n
\r\n \r\n
*/}\r\n {/* end::Form group */}\r\n\r\n {/* begin::Form group */}\r\n \r\n \r\n I Agree the{' '}\r\n \r\n terms and conditions\r\n \r\n .\r\n \r\n {formik.touched.acceptTerms && formik.errors.acceptTerms && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n {formik.errors.acceptTerms}\r\n
\r\n \r\n \r\n {!loading && Submit}\r\n {loading && (\r\n \r\n Please wait...{' '}\r\n \r\n \r\n )}\r\n \r\n {/* \r\n \r\n Cancel\r\n \r\n */}\r\n
\r\n {/* end::Form group */}\r\n \r\n )\r\n}\r\n\r\n","import React, { useState } from 'react'\r\nimport * as Yup from 'yup'\r\nimport clsx from 'clsx'\r\nimport { Link } from 'react-router-dom'\r\nimport { useFormik } from 'formik'\r\nimport { requestPassword } from '../redux/AuthCRUD'\r\nimport { axioDefaultConfig } from '../../../../app/ui/common/commonResource'\r\nimport axios from 'axios'\r\n\r\nconst initialValues = {\r\n email: '',\r\n}\r\n\r\nconst forgotPasswordSchema = Yup.object().shape({\r\n email: Yup.string()\r\n .email('Wrong email format')\r\n .min(3, 'Minimum 3 symbols')\r\n .max(50, 'Maximum 50 symbols')\r\n .required('Email is required'),\r\n})\r\n\r\nexport function ForgotPassword() {\r\n\r\n const [isSubmitting, setSubmitting] = useState(false)\r\n const [hasErrors, setHasErrors] = useState\r\n {/* begin::Title */}\r\n
\r\n\r\n {/* begin::Title */}\r\n {hasErrors === true && (\r\n Forgot Password ?
\r\n {/* end::Title */}\r\n\r\n {/* begin::Link */}\r\nEnter your email to reset your password.
\r\n {/* end::Link */}\r\n \r\n
\r\n )}\r\n\r\n {hasErrors === false && (\r\n \r\n Sorry, looks like there are some errors detected, please try again.\r\n
\r\n \r\n
\r\n )}\r\n {/* end::Title */}\r\n\r\n {/* begin::Form group */}\r\n Password reset request was sent successfully. Please check your email to reset your password
\r\n \r\n \r\n
\r\n {/* end::Form group */}\r\n\r\n {/* begin::Form group */}\r\n \r\n
\r\n )}\r\n \r\n {formik.errors.email}\r\n
\r\n \r\n \r\n \r\n \r\n Cancel\r\n \r\n {' '}\r\n
\r\n {/* \r\n \r\n Submit\r\n {isSubmitting && (\r\n \r\n Please wait...\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n Cancel\r\n \r\n {' '}\r\n
*/}\r\n {/* end::Form group */}\r\n \r\n \r\n )\r\n}\r\n","import axios from 'axios'\r\nimport {AuthModel} from '../models/AuthModel'\r\nimport {UserModel} from '../models/UserModel'\r\n\r\nconst API_URL = process.env.REACT_APP_API_URL || 'api'\r\n\r\nexport const GET_USER_BY_ACCESSTOKEN_URL = `${API_URL}/auth/get-user`\r\nexport const LOGIN_URL = `${API_URL}/auth/login`\r\nexport const REGISTER_URL = `${API_URL}/auth/register`\r\nexport const REQUEST_PASSWORD_URL = `${API_URL}/auth/forgot-password`\r\n\r\n// Server should return AuthModel\r\nexport function login(UserName: string, Password: string) {\r\n return axios.post('http://13.233.53.129:5000/api/users/login/0', {\"UserName\":UserName, \"Password\":Password})\r\n}\r\n\r\n// Server should return AuthModel\r\nexport function register(email: string, firstname: string, lastname: string, password: string) {\r\n return axios.post\r\n \r\n
\r\n )}\r\n\r\n {content === 'E2EQ' && (\r\n \r\n \r\n })
\r\n
\r\n )}\r\n\r\n {content === 'SMARTGAS' && (\r\n \r\n \r\n
\r\n )}\r\n\r\n {/* begin::Form group */}\r\n \r\n \r\n
\r\n {/* end::Form group */}\r\n\r\n {/* begin::Form group */}\r\n \r\n {formik.errors.email}\r\n
\r\n )}\r\n \r\n \r\n
\r\n {/* end::Form group */}\r\n\r\n {/* begin::Wrapper */}\r\n \r\n
\r\n )}\r\n \r\n {formik.errors.password}\r\n
\r\n \r\n \r\n\r\n {/* begin::Link */}\r\n \r\n Forgot Password ?\r\n \r\n {/* end::Link */}\r\n
\r\n {/* end::Wrapper */}\r\n\r\n {/* begin::Action */}\r\n \r\n \r\n {!loading && (\r\n \r\n Continue \r\n
\r\n {/* end::Action \r\n\r\n \r\n Not a Member yet?{' '}\r\n \r\n Sign up\r\n \r\n
*/}\r\n\r\n {content === 'E2EQ' && (\r\n \r\n
\r\n})
\r\n
\r\n )}\r\n {/* {content === 'SMARTGAS' && (\r\n \r\n
\r\n \r\n
\r\n})
\r\n
\r\n )} */}\r\n\r\n {content === 'INDUSTRYX' && (\r\n \r\n
\r\n \r\n
\r\n})
\r\n
\r\n )}\r\n \r\n )\r\n\r\n return (\r\n \r\n )\r\n}\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useEffect, useState } from 'react'\r\nimport { Redirect, Route, Switch } from 'react-router-dom'\r\nimport { Registration } from './components/Registration'\r\nimport { ForgotPassword } from './components/ForgotPassword'\r\nimport { Login } from './components/Login'\r\nimport { toAbsoluteUrl } from '../../../_metronic/helpers'\r\n\r\n\r\nexport function AuthPage() {\r\n useEffect(() => {\r\n const root = document.getElementById('root')\r\n if (root) {\r\n root.style.height = '100%'\r\n }\r\n return () => {\r\n if (root) {\r\n root.style.height = 'auto'\r\n }\r\n }\r\n }, [])\r\n\r\n const [backgroundImage, setBackgroundImage] = useState('');\r\n\r\n useEffect(() => {\r\n // Array of background image URLs\r\n var backgroundImages = [\r\n\r\n toAbsoluteUrl('/media/bg/industryx/1.jpg'),\r\n toAbsoluteUrl('/media/bg/industryx/2.jpg'),\r\n toAbsoluteUrl('/media/bg/industryx/3.jpg'),\r\n toAbsoluteUrl('/media/bg/industryx/4.jpg'),\r\n toAbsoluteUrl('/media/bg/industryx/5.jpg'),\r\n toAbsoluteUrl('/media/bg/industryx/6.jpg'),\r\n\r\n ];\r\n\r\n var content = 'INDUSRTYX'\r\n if (window.location.hostname.toLowerCase() === 'e2eq.lk') {\r\n backgroundImages = [\r\n\r\n toAbsoluteUrl('/media/bg/e2eq/1.jpg'),\r\n toAbsoluteUrl('/media/bg/e2eq/2.jpg'),\r\n toAbsoluteUrl('/media/bg/e2eq/3.jpg'),\r\n toAbsoluteUrl('/media/bg/e2eq/4.jpg'),\r\n toAbsoluteUrl('/media/bg/e2eq/5.jpg'),\r\n toAbsoluteUrl('/media/bg/e2eq/6.jpg'),\r\n\r\n ];\r\n }\r\n if (window.location.hostname.toLowerCase() === 'portal.smartgas.biz') {\r\n backgroundImages = [\r\n\r\n toAbsoluteUrl('/media/bg/smartgas/1.jpg'),\r\n toAbsoluteUrl('/media/bg/smartgas/2.jpg'),\r\n toAbsoluteUrl('/media/bg/smartgas/3.jpg'),\r\n toAbsoluteUrl('/media/bg/smartgas/4.jpg'),\r\n toAbsoluteUrl('/media/bg/smartgas/5.jpg'),\r\n toAbsoluteUrl('/media/bg/smartgas/6.jpg'),\r\n\r\n ];\r\n }\r\n // Generate a random index to select a background image from the array\r\n const randomIndex = Math.floor(Math.random() * backgroundImages.length);\r\n\r\n // Set the selected background image URL\r\n setBackgroundImage(backgroundImages[randomIndex]);\r\n }, []);\r\n\r\n return (\r\n\r\n \r\n
\r\n \r\n {/* begin::Body */}\r\n \r\n {/* begin::Content */}\r\n\r\n {/* end::Content */}\r\n
\r\n {/* end::Aside */}\r\n \r\n )\r\n}\r\n\r\n","import {toAbsoluteUrl} from '../../../../_metronic/helpers'\r\nimport {UserModel} from '../models/UserModel'\r\n\r\nexport class UsersTableMock {\r\n public static table: Array\r\n {/* begin::Form */}\r\n
\r\n {/* end::Body */}\r\n\r\n {/* begin::Aside */}\r\n \r\n {/* begin::Wrapper */}\r\n
\r\n {/* end::Form */}\r\n\r\n {/* begin::Footer */}\r\n \r\n \r\n \r\n
\r\n {/* end::Wrapper */}\r\n \r\n {/* begin::Links */}\r\n
\r\n {/* end::Footer */}\r\n \r\n\r\n\r\n
\r\n {/* end::Links */}\r\n \r\n {new Date().getFullYear()} © \r\n ![](\"https://industryx.io/wp-content/uploads/2024/08/logo-2.png\")
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n {/* begin::Container */}\r\n \r\n
\r\n {/* end::Container */}\r\n \r\n )\r\n}\r\n\r\nexport { Toolbar1 }\r\n","import React from 'react'\r\nimport {useLayout} from '../../core/LayoutProvider'\r\nimport {Toolbar1} from './Toolbar1'\r\n\r\nconst Toolbar = () => {\r\n const {config} = useLayout()\r\n\r\n switch (config.toolbar.layout) {\r\n case 'toolbar1':\r\n return \r\n {/* begin::Wrapper */}\r\n \r\n View Layout\r\n }\r\n {/* end::Button */}\r\n
\r\n {/* end::Actions */}\r\n \r\n {/* begin::Menu */}\r\n {/* \r\n
\r\n {/* end::Wrapper */}\r\n\r\n {/* begin::Button */}\r\n {(pageCode != '') &&\r\n \r\n
\r\n )\r\n}\r\n","import {useEffect, useRef} from 'react'\r\nimport {\r\n MenuComponent,\r\n DrawerComponent,\r\n ScrollComponent,\r\n ScrollTopComponent,\r\n StickyComponent,\r\n ToggleComponent,\r\n} from '../assets/ts/components'\r\n\r\nimport {useLayout} from './core'\r\n\r\nexport function MasterInit() {\r\n const {config} = useLayout()\r\n const isFirstRun = useRef(true)\r\n const pluginsInitialization = () => {\r\n isFirstRun.current = false\r\n setTimeout(() => {\r\n ToggleComponent.bootstrap()\r\n ScrollTopComponent.bootstrap()\r\n DrawerComponent.bootstrap()\r\n StickyComponent.bootstrap()\r\n MenuComponent.bootstrap()\r\n ScrollComponent.bootstrap()\r\n }, 200)\r\n }\r\n\r\n useEffect(() => {\r\n if (isFirstRun.current) {\r\n isFirstRun.current = false\r\n pluginsInitialization()\r\n }\r\n }, [config])\r\n\r\n return <>\r\n}\r\n","import React from 'react'\r\nimport { AsideDefault } from './components/aside/AsideDefault'\r\nimport { Footer } from './components/Footer'\r\nimport { HeaderWrapper } from './components/header/HeaderWrapper'\r\nimport { Toolbar } from './components/toolbar/Toolbar'\r\nimport { ScrollTop } from './components/ScrollTop'\r\nimport { Content } from './components/Content'\r\nimport { MasterInit } from './MasterInit'\r\nimport { PageDataProvider } from './core'\r\nimport {\r\n DrawerMessenger,\r\n ExploreMain,\r\n ActivityDrawer,\r\n Main,\r\n InviteUsers,\r\n UpgradePlan,\r\n} from '../partials'\r\nimport { DefaultTitle } from './components/header/page-title/DefaultTitle'\r\nimport { MenuInnerWithSub } from './components/header/MenuInnerWithSub'\r\n\r\n\r\nconst MasterLayout: React.FC = ({ children }) => {\r\n return (\r\n \r\n
\r\n\r\n\r\n {/*\r\n\r\n \r\n
\r\n\r\n \r\n\r\n
\r\n \r\n \r\n\r\n {children} \r\n
\r\n \r\n {\r\n setValue(e.target.value)\r\n onChange(e.target.value)\r\n }}\r\n />\r\n
\r\n )\r\n}\r\n\r\nfunction TablesWidget10() {\r\n const columns = React.useMemo(\r\n () => [\r\n {\r\n Header: ' ',\r\n columns: [\r\n {\r\n accessor: 'code',\r\n },\r\n {\r\n accessor: 'description',\r\n },\r\n {\r\n accessor: 'category',\r\n },\r\n {\r\n accessor: 'groupCode',\r\n },\r\n {\r\n accessor: 'pakages',\r\n },\r\n ],\r\n },\r\n ],\r\n []\r\n )\r\n\r\n const {\r\n getTableProps,\r\n getTableBodyProps,\r\n headerGroups,\r\n prepareRow,\r\n page,\r\n canPreviousPage,\r\n canNextPage,\r\n pageOptions,\r\n pageCount,\r\n gotoPage,\r\n nextPage,\r\n previousPage,\r\n setPageSize,\r\n state: {pageIndex, pageSize, globalFilter},\r\n preGlobalFilteredRows,\r\n setGlobalFilter,\r\n } = useTable(\r\n {\r\n columns,\r\n data,\r\n initialState: {pageIndex: 0, pageSize: 20, globalFilter: ''},\r\n },\r\n useGlobalFilter,\r\n usePagination\r\n )\r\n const [error, setError] = useState({status: 'E', text: ''})\r\n const [InitialLoading, setInitialLoading] = useState(true)\r\n //const [{token, user}, dispatch] = useDataLayerValue()\r\n const [{user}, dispatch] = useDataLayerValue()\r\n function handleErros(error) {\r\n if (error?.response?.status === 401) {\r\n /* dispatch({\r\n type: 'SET_TOKEN',\r\n token: null,\r\n }) */\r\n return\r\n }\r\n\r\n if (error?.response?.data?.status === 'E') {\r\n setError(error?.response?.data)\r\n return\r\n }\r\n const message = Object.entries(error?.response?.data?.errors)\r\n .map(([key, value]) => value)\r\n .join(',')\r\n setError({status: 'E', text: message})\r\n }\r\n\r\n /// Loading\r\n useEffect(() => {\r\n console.log('asa')\r\n axios({\r\n ...axioDefaultConfig,\r\n method: 'get',\r\n url: process.env.REACT_APP_BACKEND_API + '/api/sensor-monitor/layouts',\r\n // headers: {...axioDefaultConfig.headers, Authorization: 'Bearer ' + token},\r\n })\r\n .then(function (response) {\r\n console.log('dd')\r\n setInitialLoading(false)\r\n if (response?.data?.status === 'S') {\r\n console.log(response?.data?.result)\r\n data = response?.data?.result\r\n setGlobalFilter('')\r\n }\r\n })\r\n .catch(function (error) {\r\n handleErros(error)\r\n })\r\n }, [])\r\n\r\n if (InitialLoading) return \r\n {/* begin::Header */}\r\n
\r\n {/* end::Header */}\r\n {/* begin::Body */}\r\n \r\n \r\n \r\n
\r\n \r\n All Layouts\r\n {data.length} Registered\r\n
\r\n\r\n
\r\n\r\n {user.email === 'gevan@overleap.lk' && (\r\n \r\n {/* begin::Table container */}\r\n
\r\n {/* begin::Body */}\r\n \r\n )\r\n}\r\n\r\nfunction AllLayout() {\r\n return (\r\n <>\r\n \r\n {/* begin::Table */}\r\n \r\n \r\n Code \r\n Description \r\n Category \r\n Group \r\n {/* {headerGroups.map((headerGroup) => (\r\n \r\n {headerGroup.headers.map((column) => (\r\n {column.render('Header')} \r\n ))}\r\n \r\n ))}*/}\r\n \r\n \r\n {page.length === 0 && (\r\n \r\n \r\n No Data Found!\r\n \r\n \r\n )}\r\n {page.map((row, i) => {\r\n prepareRow(row)\r\n return (\r\n \r\n {/* {row.cells.map((cell) => {\r\n return {cell.render('Cell')} \r\n })}*/}\r\n {row.values.code} \r\n {row.values.description} \r\n {row.values.category} \r\n {row.values.groupCode} \r\n \r\n \r\n \r\n )\r\n })}\r\n \r\n \r\n {/* \r\n Pagination can be built however you'd like. \r\n This is just a very basic UI implementation:\r\n */}\r\n
\r\n {/* end::Table container */}\r\n \r\n {(row.values.pakages === '' || row.values.pakages === null) && (\r\n <>\r\n \r\n \r\n \r\n \r\n )}\r\n\r\n {row.values.pakages !== '' && row.values.pakages !== null && (\r\n <>\r\n \r\n \r\n \r\n \r\n )}\r\n {user.email === 'gevan@overleap.lk' && (\r\n <>\r\n \r\n \r\n \r\n \r\n
\r\n - \r\n
- gotoPage(0)} disabled={!canPreviousPage}>\r\n First\r\n \r\n
- previousPage()} disabled={!canPreviousPage}>\r\n {'<'}\r\n \r\n
- nextPage()} disabled={!canNextPage}>\r\n {'>'}\r\n \r\n
- \r\n \r\n Page{' '}\r\n \r\n {pageIndex + 1} of {pageOptions.length}\r\n {' '}\r\n \r\n \r\n
- \r\n \r\n
\r\n
\r\n \r\n )\r\n}\r\n\r\nexport default AllLayout\r\n","import React, {useState, useEffect, useRef} from 'react'\r\nimport {PageLink, PageTitle} from '../../../_metronic/layout/core'\r\nimport {KTSVG, toAbsoluteUrl} from '../../../_metronic/helpers'\r\nimport {useTable, useFilters, useGlobalFilter, usePagination, useAsyncDebounce} from 'react-table'\r\nimport axios from 'axios'\r\nimport ErrorMessage from '../helpers/message'\r\nimport Loading from '../helpers/loading'\r\nimport {axioDefaultConfig} from '../helpers/commonResource'\r\nimport {useDataLayerValue} from '../../../DataLayer'\r\n\r\nconst breadCrumb = [\r\n {\r\n title: 'Home',\r\n path: '/dashboard',\r\n isSeparator: false,\r\n isActive: false,\r\n },\r\n {\r\n title: '',\r\n path: '',\r\n isSeparator: true,\r\n isActive: false,\r\n },\r\n]\r\n\r\nlet data = []\r\nfunction GlobalFilter({preGlobalFilteredRows, globalFilter, setGlobalFilter}) {\r\n //const count = preGlobalFilteredRows.length\r\n const [value, setValue] = React.useState(globalFilter)\r\n const [{token, user}, dispatch] = useDataLayerValue()\r\n\r\n const onChange = (value) => {\r\n setGlobalFilter(value)\r\n }\r\n\r\n return (\r\n \r\n {\r\n setValue(e.target.value)\r\n onChange(e.target.value)\r\n }}\r\n />\r\n
\r\n )\r\n}\r\n\r\nfunction TablesWidget10(props) {\r\n console.log(JSON.stringify(props))\r\n const columns = React.useMemo(\r\n () => [\r\n {\r\n Header: ' ',\r\n columns: [\r\n {\r\n accessor: 'code',\r\n },\r\n {\r\n accessor: 'formatCode',\r\n },\r\n {\r\n accessor: 'description',\r\n },\r\n {\r\n accessor: 'createdOn',\r\n },\r\n {\r\n accessor: 'status',\r\n },\r\n {\r\n accessor: 'priority',\r\n },\r\n {\r\n accessor: 'fK_SectorCode',\r\n },\r\n {\r\n accessor: 'facilityName',\r\n },\r\n {\r\n accessor: 'remain',\r\n },\r\n ],\r\n },\r\n ],\r\n []\r\n )\r\n\r\n const {\r\n getTableProps,\r\n getTableBodyProps,\r\n headerGroups,\r\n prepareRow,\r\n page,\r\n canPreviousPage,\r\n canNextPage,\r\n pageOptions,\r\n pageCount,\r\n gotoPage,\r\n nextPage,\r\n previousPage,\r\n setPageSize,\r\n state: {pageIndex, pageSize, globalFilter},\r\n preGlobalFilteredRows,\r\n setGlobalFilter,\r\n } = useTable(\r\n {\r\n columns,\r\n data,\r\n initialState: {pageIndex: 0, pageSize: 20, globalFilter: ''},\r\n },\r\n useGlobalFilter,\r\n usePagination\r\n )\r\n const [error, setError] = useState({status: 'E', text: ''})\r\n const [InitialLoading, setInitialLoading] = useState(true)\r\n const [{user, token}, dispatch] = useDataLayerValue()\r\n function handleErros(error) {\r\n if (error?.response?.status === 401) {\r\n dispatch({\r\n type: 'SET_TOKEN',\r\n token: null,\r\n })\r\n return\r\n }\r\n\r\n if (error?.response?.data?.status === 'E') {\r\n setError(error?.response?.data)\r\n return\r\n }\r\n const message = Object.entries(error?.response?.data?.errors)\r\n .map(([key, value]) => value)\r\n .join(',')\r\n setError({status: 'E', text: message})\r\n }\r\n\r\n /// Loading\r\n useEffect(() => {\r\n const sector = props.props.match?.params?.sector ?? ''\r\n axios({\r\n ...axioDefaultConfig,\r\n method: 'get',\r\n url:\r\n process.env.REACT_APP_BACKEND_API +\r\n '/api/get-alerts?facility=' +\r\n sector +\r\n '&code=' +\r\n user.facility,\r\n headers: {...axioDefaultConfig.headers, Authorization: 'Bearer ' + token},\r\n })\r\n .then(function (response) {\r\n setInitialLoading(false)\r\n data = response?.data?.data\r\n setGlobalFilter('')\r\n })\r\n .catch(function (error) {\r\n handleErros(error)\r\n })\r\n }, [])\r\n\r\n if (InitialLoading) return \r\n {/* begin::Header */}\r\n
\r\n {/* end::Header */}\r\n {/* begin::Body */}\r\n \r\n \r\n
\r\n \r\n All Alerts\r\n Alert Management\r\n
\r\n\r\n
\r\n \r\n {/* begin::Table container */}\r\n
\r\n {/* begin::Body */}\r\n \r\n )\r\n}\r\n\r\nfunction AllAlerts(props) {\r\n return (\r\n <>\r\n \r\n {/* begin::Table */}\r\n \r\n \r\n Ticket \r\n Description \r\n \r\n \r\n No Data Found!\r\n \r\n \r\n )}\r\n {page.map((row, i) => {\r\n prepareRow(row)\r\n return (\r\n \r\n {/* {row.cells.map((cell) => {\r\n return {cell.render('Cell')} \r\n })}*/}\r\n \r\n {{row.values.formatCode}}\r\n \r\n \r\n {row.values.description}{' '}\r\n \r\n {row.values.priority}\r\n \r\n {\r\n \r\n {row.values.facilityName}\r\n \r\n }\r\n
\r\n {row.values.createdOn}\r\n {row.values.status == 'Opened' && (\r\n\r\n {' '}\r\n OPENED ({row.values.remain})\r\n \r\n )}\r\n {row.values.status == 'Resolved' && (\r\n \r\n {' '}\r\n RESOLVED\r\n \r\n )}\r\n {row.values.status == 'Closed' && (\r\n \r\n {' '}\r\n CLOSED\r\n \r\n )}\r\n \r\n\r\n \r\n \r\n \r\n )\r\n })}\r\n \r\n \r\n {/* \r\n Pagination can be built however you'd like. \r\n This is just a very basic UI implementation:\r\n */}\r\n
\r\n {/* end::Table container */}\r\n \r\n {row.values.createdOn}\r\n {row.values.status == 'Opened' && (\r\n
\r\n <>\r\n \r\n \r\n \r\n \r\n
\r\n - \r\n
- gotoPage(0)} disabled={!canPreviousPage}>\r\n First\r\n \r\n
- previousPage()} disabled={!canPreviousPage}>\r\n {'<'}\r\n \r\n
- nextPage()} disabled={!canNextPage}>\r\n {'>'}\r\n \r\n
- \r\n \r\n Page{' '}\r\n \r\n {pageIndex + 1} of {pageOptions.length}\r\n {' '}\r\n \r\n \r\n
- \r\n \r\n
\r\n
\r\n \r\n )\r\n}\r\n\r\nexport default AllAlerts\r\n","import React from \"react\";\r\n//import ChromeDinoGame from 'react-chrome-dino';\r\n\r\nexport function Dashboard() {\r\n return \r\n /* return \r\n\r\n
*/\r\n}\r\n\r\n\r\nexport default Dashboard\r\n","import React, {useState, useEffect, useRef, PureComponent, Component} from 'react'\r\nimport {useQuill} from 'react-quilljs'\r\n// or const { useQuill } = require('react-quilljs');\r\nimport 'quill/dist/quill.snow.css' // Add css for snow theme\r\n\r\nfunction TagConfig(props) {\r\n const inputReference = useRef(null)\r\n const {quill, quillRef} = useQuill('#editor', {\r\n theme: 'snow',\r\n })\r\n\r\n React.useEffect(() => {\r\n if (quill) {\r\n quill.clipboard.dangerouslyPasteHTML(props?.item?.note ?? '')\r\n if (inputReference) {\r\n inputReference.current.focus()\r\n }\r\n\r\n quill.on('text-change', (delta, oldDelta, source) => {\r\n var hm = quill.root.innerHTML\r\n // console.log('Text change!');\r\n // console.log(quill.getText()); // Get text only\r\n //console.log(quill.getContents()); // Get delta contents\r\n // console.log(quill.root.innerHTML); // Get innerHTML using quill\r\n //console.log(quillRef.current.firstChild.innerHTML); // Get innerHTML using quillRef\r\n /* if (quill.root.innerHTML && quill.root.innerHTML.substr(quill.root.innerHTML.length - 11) == \"
\"\r\n }*/\r\n props.item.note = hm\r\n })\r\n }\r\n }, [quill])\r\n\r\n return (\r\n <>\r\n\r\n \r\n Packet Name\r\n \r\n props.onkeyPress(e, props.index, 'OBJECT')}\r\n className='form-control form-control-solid '\r\n value={props.item.object}\r\n placeholder='Packet Name'\r\n type='text'\r\n />\r\n \r\n [Plant] / [Plant.PacketType] / [PacketType]\r\n \r\n
\r\n
\r\n \r\n
\r\n Tag/Field Name\r\n props.onkeyPress(e, props.index, 'NAME')}\r\n className='form-control form-control-solid '\r\n value={props.item.machineNo}\r\n placeholder='Tag Name'\r\n type='text'\r\n />\r\n \r\n view object browser\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n\r\n | \r\n Display Text\r\n | \r\n \r\n Type\r\n | \r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n
| \r\n X coordinate\r\n | \r\n \r\n Y coordinate\r\n | \r\n
\r\n
\r\n [CODE - INITIAL]\r\n props.onkeyPress(e, props.index, 'INIT')}\r\n className='form-control form-control-solid '\r\n value={props.item.tempFeild1}\r\n placeholder='Intial'\r\n type='text'\r\n />\r\n \r\n View Documentation\r\n \r\n
\r\n \r\n [CODE - INITIAL]\r\n
\r\n
\r\n
\r\n \r\n
\r\n [Code - RUNTIME/Data Manipulation]\r\n props.onkeyPress(e, props.index, 'FORMULA')}\r\n className='form-control form-control-solid '\r\n value={props.item.formula}\r\n placeholder='Code here'\r\n type='text'\r\n />\r\n
\r\n \r\n View Documentation\r\n \r\n \r\n [Code - RUNTIME/Data Manipulation]\r\n
\r\n
\r\n {' '}\r\n Document/Instructions\r\n
\r\n \r\n )\r\n}\r\n\r\nexport {ChatInner}\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, {FC, useEffect, useRef, useState} from 'react'\r\nimport {KTSVG, toAbsoluteUrl} from '../../../helpers'\r\nimport {Formik, Form, FormikValues, Field, ErrorMessage} from 'formik'\r\nimport * as Yup from 'yup'\r\nimport {StepperComponent} from '../../../assets/ts/components'\r\n\r\ninterface ICreateAccount {\r\n appName: string\r\n category: string\r\n framework: string\r\n dbName: string\r\n dbType: string\r\n nameOnCard: string\r\n cardNumber: string\r\n cardExpiryMonth: string\r\n cardExpiryYear: string\r\n cardCvv: string\r\n saveCard: string\r\n}\r\n\r\nconst inits: ICreateAccount = {\r\n appName: '',\r\n category: '1',\r\n framework: '1',\r\n dbName: '',\r\n dbType: '1',\r\n nameOnCard: 'Max Doe',\r\n cardNumber: '4111 1111 1111 1111',\r\n cardExpiryMonth: '1',\r\n cardExpiryYear: '2025',\r\n cardCvv: '123',\r\n saveCard: '1',\r\n}\r\n\r\nconst createAppSchema = [\r\n Yup.object({\r\n appName: Yup.string().required().label('App name'),\r\n category: Yup.string().required().label('Category'),\r\n }),\r\n Yup.object({\r\n framework: Yup.string().required().label('Framework'),\r\n }),\r\n Yup.object({\r\n dbName: Yup.string().required().label('Database name'),\r\n dbType: Yup.string().required().label('Database engine'),\r\n }),\r\n Yup.object({\r\n nameOnCard: Yup.string().required().label('Name'),\r\n cardNumber: Yup.string().required().label('Card Number'),\r\n cardExpiryMonth: Yup.string().required().label('Expiration Month'),\r\n cardExpiryYear: Yup.string().required().label('Expiration Year'),\r\n cardCvv: Yup.string().required().label('CVV'),\r\n }),\r\n]\r\n\r\nconst Main: FC = () => {\r\n const stepperRef = useRef\r\n \r\n
\r\n {/* \r\n\r\n \r\n \r\n Send\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {/*\r\n \r\n */}\r\n {children}\r\n
\r\n )\r\n}\r\n\r\nexport { Content }\r\n","import {\r\n IAside,\r\n IContent,\r\n IFooter,\r\n IHeader,\r\n IToolbar,\r\n ILayout,\r\n ILayoutCSSClasses,\r\n ILayoutHTMLAttributes,\r\n ILayoutCSSVariables,\r\n IPageTitle,\r\n} from './LayoutModels'\r\nimport {DefaultLayoutConfig} from './DefaultLayoutConfig'\r\n\r\nconst LAYOUT_CONFIG_KEY = process.env.REACT_APP_BASE_LAYOUT_CONFIG_KEY || 'LayoutConfig'\r\n\r\nexport function getLayout(): ILayout {\r\n const ls = localStorage.getItem(LAYOUT_CONFIG_KEY)\r\n if (ls) {\r\n try {\r\n return JSON.parse(ls) as ILayout\r\n } catch (er) {\r\n console.error(er)\r\n }\r\n }\r\n return DefaultLayoutConfig\r\n}\r\n\r\nfunction setLayout(config: ILayout): void {\r\n try {\r\n localStorage.setItem(LAYOUT_CONFIG_KEY, JSON.stringify(config))\r\n } catch (er) {\r\n console.error(er)\r\n }\r\n}\r\n\r\nexport function getEmptyCssClasses() {\r\n return {\r\n header: [],\r\n headerContainer: [],\r\n headerMobile: [],\r\n headerMenu: [],\r\n aside: [],\r\n asideMenu: [],\r\n asideToggle: [],\r\n toolbar: [],\r\n toolbarContainer: [],\r\n content: [],\r\n contentContainer: [],\r\n footerContainer: [],\r\n sidebar: [],\r\n pageTitle: [],\r\n }\r\n}\r\n\r\nexport function getEmptyHTMLAttributes() {\r\n return {\r\n asideMenu: new Map(),\r\n headerMobile: new Map(),\r\n headerMenu: new Map(),\r\n headerContainer: new Map(),\r\n pageTitle: new Map(),\r\n }\r\n}\r\n\r\nexport function getEmptyCSSVariables() {\r\n return {\r\n body: new Map(),\r\n }\r\n}\r\n\r\nexport class LayoutSetup {\r\n public static isLoaded: boolean = false\r\n public static config: ILayout = getLayout()\r\n public static classes: ILayoutCSSClasses = getEmptyCssClasses()\r\n public static attributes: ILayoutHTMLAttributes = getEmptyHTMLAttributes()\r\n public static cssVariables: ILayoutCSSVariables = getEmptyCSSVariables()\r\n\r\n private static initCSSClasses(): void {\r\n LayoutSetup.classes = getEmptyCssClasses()\r\n }\r\n\r\n private static initHTMLAttributes(): void {\r\n LayoutSetup.attributes = Object.assign({}, getEmptyHTMLAttributes())\r\n }\r\n\r\n private static initCSSVariables(): void {\r\n LayoutSetup.cssVariables = getEmptyCSSVariables()\r\n }\r\n\r\n private static initLayout(config: ILayout): void {\r\n Array.from(document.body.attributes).forEach((attr) => {\r\n document.body.removeAttribute(attr.name)\r\n })\r\n document.body.setAttribute('style', '')\r\n document.body.setAttribute('id', 'kt_body')\r\n if (config.main?.body?.backgroundImage) {\r\n document.body.style.backgroundImage = `url('${config.main.body.backgroundImage}')`\r\n }\r\n\r\n if (config.main?.body?.class) {\r\n document.body.classList.add(config.main.body.class)\r\n }\r\n\r\n // if (config.loader.display) {\r\n // document.body.classList.add('page-loading')\r\n // document.body.classList.add('page-loading-enabled')\r\n // }\r\n }\r\n\r\n private static initHeader(config: IHeader): void {\r\n LayoutSetup.classes.headerContainer.push(\r\n config.width === 'fluid' ? 'container-fluid' : 'container'\r\n )\r\n\r\n if (config.fixed.desktop) {\r\n document.body.classList.add('header-fixed')\r\n }\r\n\r\n if (config.fixed.tabletAndMobile) {\r\n document.body.classList.add('header-tablet-and-mobile-fixed')\r\n }\r\n }\r\n\r\n private static initToolbar(config: IToolbar): void {\r\n if (!config.display) {\r\n return\r\n }\r\n\r\n document.body.classList.add('toolbar-enabled')\r\n LayoutSetup.classes.toolbarContainer.push(\r\n config.width === 'fluid' ? 'container-fluid' : 'container'\r\n )\r\n\r\n if (config.fixed.desktop) {\r\n document.body.classList.add('toolbar-fixed')\r\n }\r\n\r\n if (config.fixed.tabletAndMobileMode) {\r\n document.body.classList.add('toolbar-tablet-and-mobile-fixed')\r\n }\r\n\r\n // Height setup\r\n const type = config.layout\r\n const typeOptions = config.layouts[type]\r\n if (typeOptions) {\r\n let bodyStyles: string = ''\r\n if (typeOptions.height) {\r\n bodyStyles += ` --kt-toolbar-height: ${typeOptions.height};`\r\n }\r\n\r\n if (typeOptions.heightAndTabletMobileMode) {\r\n bodyStyles += ` --kt-toolbar-height-tablet-and-mobile: ${typeOptions.heightAndTabletMobileMode};`\r\n }\r\n document.body.setAttribute('style', bodyStyles)\r\n }\r\n }\r\n\r\n private static initPageTitle(config: IPageTitle): void {\r\n if (!config.display) {\r\n return\r\n }\r\n\r\n if (config.direction === 'column') {\r\n this.classes.pageTitle.push('flex-column')\r\n this.classes.pageTitle.push('align-items-start')\r\n } else {\r\n this.classes.pageTitle.push('align-items-center')\r\n this.classes.pageTitle.push('flex-wrap')\r\n }\r\n this.classes.pageTitle.push('me-3')\r\n\r\n if (config.responsive) {\r\n this.classes.pageTitle.push('mb-5')\r\n this.classes.pageTitle.push('mb-lg-0')\r\n\r\n LayoutSetup.attributes.pageTitle.set('data-kt-swapper', true)\r\n LayoutSetup.attributes.pageTitle.set('data-kt-swapper-mode', 'prepend')\r\n LayoutSetup.attributes.pageTitle.set(\r\n 'data-kt-swapper-parent',\r\n `{ default: '#kt_content_container', '${config.responsiveBreakpoint}': '${config.responsiveTarget}'}`\r\n )\r\n }\r\n }\r\n\r\n private static initContent(config: IContent): void {\r\n LayoutSetup.classes.contentContainer.push(\r\n config.width === 'fluid' ? 'container-fluid' : 'container'\r\n )\r\n // if (Theme::getOption('layout', 'content/container-class')) {\r\n // \tTheme::addHtmlClass('content-container', Theme::getOption('layout', 'content/container-class'));\r\n // }\r\n }\r\n\r\n private static initAside(config: IAside): void {\r\n // Check if aside is displayed\r\n if (!config.display) {\r\n return\r\n }\r\n\r\n // Enable Aside\r\n document.body.classList.add('aside-enabled')\r\n LayoutSetup.classes.aside.push(`aside-${config.theme}`)\r\n\r\n // Fixed Aside\r\n if (config.fixed) {\r\n document.body.classList.add('aside-fixed')\r\n }\r\n\r\n // Default minimized\r\n if (config.minimized) {\r\n document.body.setAttribute('data-kt-aside-minimize', 'on')\r\n }\r\n\r\n // Hoverable on minimize\r\n if (config.hoverable) {\r\n LayoutSetup.classes.aside.push('aside-hoverable')\r\n }\r\n }\r\n\r\n private static initAsideMenu(config: IAside): void {\r\n // if (Theme::getOption('layout', 'aside/menu') === 'documentation') {\r\n // \tself::$menu = new Menu( Theme::getOption('menu', 'documentation'), Theme::getPagePath() );\r\n // } else {\r\n // \tself::$menu = new Menu( Theme::getOption('menu', 'main'), Theme::getPagePath() );\r\n // }\r\n // if (Theme::getOption('layout', 'aside/menu-icons-display') === false) {\r\n // \tself::$menu->displayIcons(false);\r\n // }\r\n // self::$menu->setIconType(Theme::getOption('layout', 'aside/menu-icon'));\r\n }\r\n\r\n // private static initSidebar(sidebarConfig: ISidebarConfig): void {\r\n // // / Set Sidebar enabled class\r\n // if (sidebarConfig.display) {\r\n // document.body.classList.add('sidebar-enabled')\r\n // } else {\r\n // return\r\n // }\r\n\r\n // // Set Sidebar shown status\r\n // if (sidebarConfig.shown) {\r\n // document.body.setAttribute('data-sidebar', 'on')\r\n // }\r\n\r\n // // Set Sidebar background color class\r\n // ThemeSetup.classes.sidebar.push(sidebarConfig.bgColor)\r\n // }\r\n\r\n private static initFooter(config: IFooter): void {\r\n LayoutSetup.classes.footerContainer.push(`container${config.width === 'fluid' ? '-fluid' : ''}`)\r\n }\r\n\r\n private static initConfig(config: ILayout): void {\r\n if (config.main?.darkSkinEnabled) {\r\n document.body.classList.add('dark-skin')\r\n }\r\n\r\n // Init layout\r\n LayoutSetup.initLayout(config)\r\n if (config.main?.type !== 'default') {\r\n return\r\n }\r\n\r\n LayoutSetup.initHeader(config.header)\r\n LayoutSetup.initPageTitle(config.pageTitle as IPageTitle)\r\n LayoutSetup.initToolbar(config.toolbar)\r\n LayoutSetup.initContent(config.content)\r\n LayoutSetup.initAside(config.aside)\r\n LayoutSetup.initFooter(config.footer)\r\n LayoutSetup.initAsideMenu(config.aside)\r\n }\r\n\r\n public static updatePartialConfig(fieldsToUpdate: Partial