{"version":3,"sources":["App.tsx","reportWebVitals.ts","index.tsx"],"names":["Devices","id","lat","lng","name","getColorByAQI","value","fullValue","AQI","DrawDial","ref","fullvalue","current","console","log","data","datasets","backgroundColor","options","rotation","Math","PI","circumference","legend","display","tooltips","enabled","Chart","type","axiosConfig","headers","Marker","text","selected","changeDeviceFunc","key","OverlayTrigger","placement","delay","show","hide","overlay","props","Tooltip","style","width","height","borderRadius","HowManySecondsPassed","date","CurrentDate","Date","valueOf","DateParam","DateDiff","abs","floor","App","useState","SelectedDevice","setSelectedDevice","DataLoading","setDataLoading","PM25","PM10","NOX","SOX","CO","CO2","O3","timestamp","RecentAPIdata","setRecentAPIdata","pm25","useRef","pm10","nox","sox","o3","co","co2","LastUpdateMsg","setLastUpdateMsg","useEffect","fetchData","a","dev_id","axios","get","then","response","res","catch","err","last_timestamp","toISOString","secs","isNaN","Container","fluid","padding","margin","Row","Col","sm","md","alignItems","justifyContent","src","alignSelf","alt","textAlign","color","marginTop","bootstrapURLKeys","defaultCenter","center","defaultZoom","map","dev","paddingTop","Form","InputGroup","className","Prepend","Text","Append","Control","as","custom","onChange","e","parseInt","currentTarget","defaultValue","paddingLeft","paddingRight","Button","active","variant","onClick","Spinner","animation","role","icon","faSync","xs","lg","Card","Header","Body","maxWidth","maxHeight","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.10165ac7.chunk.js","sourcesContent":["import React, {useRef, useEffect, useState} from 'react';\nimport Container from 'react-bootstrap/Container';\nimport Row from \"react-bootstrap/Row\";\nimport Col from \"react-bootstrap/Col\";\nimport Form from \"react-bootstrap/Form\";\nimport Card from \"react-bootstrap/Card\";\nimport Spinner from \"react-bootstrap/Spinner\";\nimport InputGroup from \"react-bootstrap/InputGroup\";\nimport Button from \"react-bootstrap/Button\";\nimport Chart from 'chart.js';\nimport GoogleMapReact from \"google-map-react\";\nimport Tooltip from \"react-bootstrap/Tooltip\";\nimport OverlayTrigger from \"react-bootstrap/OverlayTrigger\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faSync } from \"@fortawesome/free-solid-svg-icons\";\n\nimport axios from 'axios';\nimport \"./App.css\";\n\ninterface type_RecentAPIdata {\n  PM25: number;\n  PM10: number;\n  NOX: number;\n  SOX: number;\n  CO: number;\n  CO2: number;\n  O3: number;\n  timestamp: string;\n}\n\ninterface type_Devices {\n  id: string;\n  name?: string;\n  lat: number;\n  lng: number;\n}\n\nconst Devices: type_Devices[] = [\n  {\n    id: \"ENE00036\",\n    lat: 22.577067614608932,\n    lng: 88.47961977464176,\n    name: \"Near Tata Medical\",\n  },\n  {\n    id: \"ENE00037\",\n    lat: 22.56613678517849,\n    lng: 88.48305799091615,\n    name: \"Near Jain Ashram, Action Area III\",\n  },\n  {\n    id: \"ENE00038\",\n    lat: 22.573902845581927,\n    lng: 88.46249931521422,\n    name: \"NTTIDCO Crossing (Tank No. 8)\",\n  },\n  {\n    id: \"ENE00039\",\n    lat: 22.61889235702044,\n    lng: 88.46555767792802,\n    name: \"Akhankha More\",\n  },\n  {\n    id: \"ENE00040\",\n    lat: 22.581959878555242,\n    lng: 88.45360975885475,\n    name: \"New Town 1st Rotary\",\n  },\n];\n\nfunction getColorByAQI(value: number, fullValue: number): string {\n  const AQI = value/fullValue;\n  if (AQI < 0.1) {\n    return \"#00B050\";\n  } else if (AQI < 0.2) {\n    return \"#92B050\";\n  } else if (AQI < 0.4) {\n    return \"#FFFF00\";\n  } else if (AQI < 0.6) {\n    return \"#FF9900\";\n  } else if (AQI < 0.8) {\n    return \"#FF0000\";\n  } else return \"#C00000\";\n}\n\nfunction DrawDial(\n  ref: React.RefObject<HTMLCanvasElement>,\n  name: string,\n  value: number,\n  fullvalue: number\n) {\n  if (ref.current !== null) {\n    console.log(`${name} drawing with value: ${value}.`);\n    const data = {\n      datasets: [\n        {\n          data: [value, (fullvalue - value)],\n          backgroundColor: [getColorByAQI(value,fullvalue), \"#ddd\"],\n        }\n      ],\n    };\n    const options = {\n      rotation: 0.5 * Math.PI,\n      circumference: 1.5 * Math.PI,\n      legend: {\n        display: false,\n      },\n      tooltips: {\n        enabled: false,\n      }\n    };\n    new Chart(ref.current, {\n      type: \"doughnut\",\n      data: data,\n      options: options,\n    });\n  }\n};\n\nconst axiosConfig = {\n  headers: {\n    \"Access-Control-Allow-Origin\": \"*\",\n  },\n};\n\nconst fetchRecentData = (dev_id: string) => {\n  const requestPromise = axios.get(\n    `https://api.enggenv.com/aaq/v1/fetch?app-key=lksdakfjaFcsEzswQr=&id=${dev_id}`,\n    axiosConfig\n  );\n  const responsePromise = requestPromise.then((response) => response.data);\n  return responsePromise;\n};\n\nconst Marker = ({ text, selected, changeDeviceFunc, key, id }: any) => {\n  const renderTooltip = (props: any) => {\n    return <Tooltip id=\"button-tooltip\" {...props}>\n      {text}\n    </Tooltip>\n};\n  return (\n    <OverlayTrigger\n      placement=\"right\"\n      delay={{ show: 250, hide: 400 }}\n      overlay={renderTooltip}\n    >\n      <div\n        // onClick={(e) => changeDeviceFunc(id)}\n        style={{\n          width: 20,\n          height: 20,\n          borderRadius: 10,\n          backgroundColor: selected ? \"#1e1\" : \"#0000b0\",\n        }}\n      ></div>\n    </OverlayTrigger>\n  );\n};\n\nfunction HowManySecondsPassed(date: string): number {\n  const CurrentDate = new Date().valueOf();\n  const DateParam = new Date(date).valueOf();\n  const DateDiff = Math.abs(CurrentDate - DateParam);\n  return Math.floor(DateDiff / 1000);\n}\n\nfunction Have15MinutesPassed(date: string): boolean {\n  return HowManySecondsPassed(date) > 15 * 60;\n}\n\nfunction App() {\n  const [SelectedDevice, setSelectedDevice] = useState<number>(0);\n  const [DataLoading, setDataLoading] = useState<boolean>(false)\n  const [RecentAPIdata, setRecentAPIdata] = useState<type_RecentAPIdata>({\n    PM25: 0,\n    PM10: 0,\n    NOX: 0,\n    SOX: 0,\n    CO: 0,\n    CO2: 0,\n    O3: 0,\n    timestamp: \"\",\n  }); \n  const pm25 = useRef<HTMLCanvasElement>(null);\n  const pm10 = useRef<HTMLCanvasElement>(null);\n  const nox = useRef<HTMLCanvasElement>(null);\n  const sox = useRef<HTMLCanvasElement>(null);\n  const o3 = useRef<HTMLCanvasElement>(null);\n  const co = useRef<HTMLCanvasElement>(null);\n  const co2 = useRef<HTMLCanvasElement>(null);\n  const [LastUpdateMsg, setLastUpdateMsg] = useState('');\n  useEffect(() => {\n    const fetchData = async () => {\n    const response = await fetchRecentData(Devices[SelectedDevice].id)\n      .then((res) => res)\n      .catch((err) => {\n\n        console.log(err)\n      });\n    console.log(response);\n    if (typeof response !== \"undefined\") {\n      setRecentAPIdata({\n        PM25: response.data[\"1\"][\"pm2.5\"],\n        PM10: response.data[\"1\"].pm10,\n        NOX: response.data[\"1\"].nox,\n        SOX: response.data[\"1\"].sox,\n        CO: response.data[\"1\"].co,\n        CO2: response.data[\"1\"].co2,\n        O3: response.data[\"1\"].o3,\n        timestamp: response.data[\"1\"].last_timestamp,\n      });\n    } else {\n      setRecentAPIdata({\n        PM25: 0,\n        PM10: 0,\n        NOX: 0,\n        SOX: 0,\n        CO: 0,\n        CO2: 0,\n        O3: 0,\n        timestamp: new Date().toISOString(),\n      });\n    }\n    };\n    if (DataLoading || RecentAPIdata.timestamp === '' || Have15MinutesPassed(RecentAPIdata.timestamp)) {\n      fetchData();\n      setDataLoading(false);\n      console.log(\"Updating Data\");\n    }    \n  }, [RecentAPIdata.timestamp, SelectedDevice, DataLoading])\n\n  useEffect(() => {\n    if (pm25 !== null) DrawDial(pm25, \"PM 2.5\", RecentAPIdata.PM25, 500);\n    if (pm10 !== null) DrawDial(pm10, \"PM 10\", RecentAPIdata.PM10, 500);\n    if (nox !== null) DrawDial(nox, \"NOX\", RecentAPIdata.NOX, 5);\n    if (sox !== null) DrawDial(sox, \"SOX\", RecentAPIdata.SOX, 5);\n    if (co !== null) DrawDial(co, \"CO\", RecentAPIdata.CO, 5);\n    if (co2 !== null) DrawDial(co2, \"CO2\", RecentAPIdata.CO2, 5000);\n    if (o3 !== null) DrawDial(o3, \"O3\", RecentAPIdata.O3, 5);\n    console.log(\"Drawing Dials\");\n  }, [RecentAPIdata])\n  useEffect(() => {\n    const secs = HowManySecondsPassed(RecentAPIdata.timestamp);\n    if(DataLoading) setLastUpdateMsg(\"Updating Data \")\n    else if (isNaN(secs)) setLastUpdateMsg(\"Data Not Available.\");\n    else if (secs < 60) setLastUpdateMsg(`Data updated ${secs} seconds ago.`);\n    else setLastUpdateMsg(`Data updated ${Math.floor(secs / 60)} minutes ago.`);\n  }, [RecentAPIdata.timestamp, DataLoading])\n  console.log(Devices)\n  return (\n    <Container fluid style={{ padding: 0, margin: 0 }}>\n      <div id=\"HeroBackground\"></div>\n      <Row style={{ width: \"100%\", padding: 20 }}>\n        {/* Header */}\n        <Col\n          sm={12}\n          md={1}\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n          }}\n        >\n          <img\n            src=\"logo.png\"\n            style={{ height: 75, alignSelf: \"center\" }}\n            alt=\"NKGSCCL logo\"\n          />\n        </Col>\n        <Col sm={12} md={11}>\n          <h1\n            style={{\n              textAlign: \"center\",\n              alignSelf: \"center\",\n              color: \"#6fa32e\",\n            }}\n          >\n            NEWTOWN AIR QUALITY INFORMATION\n          </h1>\n        </Col>\n      </Row>\n      <Row style={{ padding: 20, alignItems: \"center\" }}>\n        {/* Main Content */}\n        <Col sm={12} md={4}>\n          <Container fluid style={{ height: 400, marginTop: 20 }}>\n            <GoogleMapReact\n              bootstrapURLKeys={{\n                key: \"AIzaSyBJ-RKwTIsTWX_4eKsBN0bBUBBx8dP1-Ls\",\n              }}\n              defaultCenter={{\n                lat: 22.58,\n                lng: 88.46,\n              }}\n              center={{\n                lat: 22.58,\n                lng: 88.46,\n              }}\n              defaultZoom={12}\n            >\n              {Devices.map((dev, id) => {\n                return (\n                  <Marker\n                    lat={dev.lat}\n                    lng={dev.lng}\n                    text={dev.name}\n                    id={id}\n                    selected={id === SelectedDevice}\n                    key={id}\n                    changeDeviceFunc={setSelectedDevice}\n                  ></Marker>\n                );\n              })}\n            </GoogleMapReact>\n          </Container>\n        </Col>\n        <Col sm={12} md={8} style={{ paddingTop: 10 }}>\n          <Container>\n            <Row style={{ width: \"100%\" }}>\n              <Col\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"flex-start\",\n                }}\n                sm={12}\n                md={7}\n              >\n                <Form>\n                  <InputGroup className=\"mb-3\">\n                    <InputGroup.Prepend>\n                      <InputGroup.Text id=\"basic-addon1\">\n                        Devices\n                      </InputGroup.Text>\n                    </InputGroup.Prepend>\n                    <InputGroup.Append>\n                      <Form.Control\n                        as=\"select\"\n                        custom\n                        onChange={(e) => {\n                          setSelectedDevice(parseInt(e.currentTarget.value));\n                          setRecentAPIdata({\n                            ...RecentAPIdata,\n                            timestamp: \"\",\n                          });\n                        }}\n                        defaultValue={0}\n                      >\n                        {Devices.map((dev, id) => (\n                          <option key={id} value={id}>\n                            {dev.name}\n                          </option>\n                        ))}\n                      </Form.Control>\n                    </InputGroup.Append>\n                  </InputGroup>\n                </Form>\n              </Col>\n              <Col\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"flex-end\",\n                }}\n                sm={12}\n                md={5}\n              >\n                <b\n                  style={{\n                    textAlign: \"right\",\n                    color: \"#333\",\n                    backgroundColor: \"rgba(255,255,255,0.33)\",\n                    paddingLeft: 10,\n                    paddingRight: 10,\n                  }}\n                >\n                  {LastUpdateMsg}{\" \"}\n                  <Button active={!DataLoading} variant=\"light\" onClick={() => setDataLoading(true)}>\n                    {DataLoading ? (\n                      <Spinner animation=\"border\" role=\"status\">\n                        <span className=\"sr-only\">Loading...</span>\n                      </Spinner>\n                    ) : (\n                      <FontAwesomeIcon icon={faSync}></FontAwesomeIcon>\n                    )}\n                  </Button>\n                </b>\n              </Col>\n            </Row>\n            <Row>\n              <Col xs={6} sm={4} md={4} lg={4}>\n                <Card className=\"DialCards\">\n                  <Card.Header\n                    className=\"DialsHeader\"\n                    style={{ color: \"#DB321D\" }}\n                  >\n                    PM2.5 : {RecentAPIdata.PM25} &micro;g/m<sup>3</sup>\n                  </Card.Header>\n                  <Card.Body className=\"DialsBody\">\n                    <canvas\n                      ref={pm25}\n                      style={{ maxWidth: 400, maxHeight: 400 }}\n                    ></canvas>\n                  </Card.Body>\n                </Card>\n              </Col>\n              <Col xs={6} sm={4} md={4} lg={4}>\n                <Card className=\"DialCards\">\n                  <Card.Header\n                    className=\"DialsHeader\"\n                    style={{ color: \"#B7740A\" }}\n                  >\n                    PM 10 : {RecentAPIdata.PM10} &micro;g/m<sup>3</sup>\n                  </Card.Header>\n                  <Card.Body className=\"DialsBody\">\n                    <canvas\n                      ref={pm10}\n                      style={{ maxWidth: 400, maxHeight: 400 }}\n                    ></canvas>\n                  </Card.Body>\n                </Card>\n              </Col>\n              <Col xs={6} sm={4} md={4} lg={4}>\n                <Card className=\"DialCards\">\n                  <Card.Header\n                    className=\"DialsHeader\"\n                    style={{ color: \"#0265B7\" }}\n                  >\n                    O<sub>3</sub> : {RecentAPIdata.O3} ppm.\n                  </Card.Header>\n                  <Card.Body className=\"DialsBody\">\n                    <canvas\n                      ref={o3}\n                      style={{ maxWidth: 400, maxHeight: 400 }}\n                    ></canvas>\n                  </Card.Body>\n                </Card>\n              </Col>\n              <Col xs={6} sm={4} md={4} lg={4}>\n                <Card className=\"DialCards\">\n                  <Card.Header\n                    className=\"DialsHeader\"\n                    style={{ color: \"#639707\" }}\n                  >\n                    NO<sub>x</sub> : {RecentAPIdata.NOX} ppm.\n                  </Card.Header>\n                  <Card.Body className=\"DialsBody\">\n                    <canvas\n                      ref={nox}\n                      style={{ maxWidth: 400, maxHeight: 400 }}\n                    ></canvas>\n                  </Card.Body>\n                </Card>\n              </Col>\n              <Col xs={6} sm={4} md={4} lg={4}>\n                <Card className=\"DialCards\">\n                  <Card.Header\n                    className=\"DialsHeader\"\n                    style={{ color: \"#1939B7\" }}\n                  >\n                    SO<sub>x</sub> : {RecentAPIdata.SOX} ppm.\n                  </Card.Header>\n                  <Card.Body className=\"DialsBody\">\n                    <canvas\n                      ref={sox}\n                      style={{ maxWidth: 400, maxHeight: 400 }}\n                    ></canvas>\n                  </Card.Body>\n                </Card>\n              </Col>\n              <Col xs={6} sm={4} md={4} lg={4}>\n                <Card className=\"DialCards\">\n                  <Card.Header\n                    className=\"DialsHeader\"\n                    style={{ color: \"#FF5028\" }}\n                  >\n                    CO : {RecentAPIdata.CO} ppm.\n                  </Card.Header>\n                  <Card.Body className=\"DialsBody\">\n                    <canvas\n                      ref={co}\n                      style={{ maxWidth: 400, maxHeight: 400 }}\n                    ></canvas>\n                  </Card.Body>\n                </Card>\n              </Col>\n              <Col xs={6} sm={4} md={4} lg={4}>\n                <Card className=\"DialCards\">\n                  <Card.Header\n                    className=\"DialsHeader\"\n                    style={{ color: \"#FF00b0\" }}\n                  >\n                    CO<sub>2</sub> : {RecentAPIdata.CO2} ppm.\n                  </Card.Header>\n                  <Card.Body className=\"DialsBody\">\n                    <canvas\n                      ref={co2}\n                      style={{ maxWidth: 400, maxHeight: 400 }}\n                    ></canvas>\n                  </Card.Body>\n                </Card>\n              </Col>\n            </Row>\n          </Container>\n        </Col>\n      </Row>\n      <Row\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          textAlign: \"center\",\n          padding: 10,\n          color: \"#111\",\n        }}\n      >\n        {/* Footer */}\n        Designed and Developed by Distronix.\n      </Row>\n    </Container>\n  );\n}\n\nexport default App;\n","import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\nimport \"bootstrap/dist/css/bootstrap.min.css\";\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}