{"version":3,"sources":["Overview.jsx","Datasheet.jsx","App.js","reportWebVitals.js","index.js"],"names":["Subheader","label","style","display","onSubmit","window","open","Button","type","Overview","timestampRef","useRef","useState","Date","timestamp","setTimestamp","name","serial","description","location","lat","lon","alt","device","setDevice","gasen","feinstaub","luftdruck","feuchtigkeit","temperatur","values","setValues","useEffect","interval","setInterval","clearInterval","mounted","fetch","then","response","a","json","deviceSpecs","device_specs","lastValues","latest_values","Object","entries","key","value","includes","push","current","getMinutes","Card","boxShadow","minWidth","width","CardHeader","title","subheader","d3","CardContent","className","Paper","map","el","i","alignItems","Typography","fontWeight","component","GiDustCloud","GiGooeyMolecule","flexDirection","padding","margin","timstamp","Datasheet","maxNumberOfPages","page","setPage","downloadPDF","method","blob","pdf","document","createElement","href","URL","createObjectURL","setAttribute","click","console","log","minHeight","position","src","height","bottom","right","zIndex","opacity","justifyContent","listStyleType","checked","disabled","Tabelle","Kontakt","CardActions","backgroundColor","onClick","left","App","history","useHistory","state","setState","paramState","URLSearchParams","search","get","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","getElementById"],"mappings":"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","file":"static/js/main.db2c4487.chunk.js","sourcesContent":["import React, {useEffect, useState, useRef} from 'react';\r\nimport * as d3 from \"d3\";\r\nimport {Card, Paper, Typography, CardHeader, CardContent, Button} from '@material-ui/core';\r\nimport {FaThermometerHalf} from 'react-icons/fa'\r\nimport {WiCloudy, WiHumidity} from 'react-icons/wi'\r\nimport {GiGooeyMolecule, GiDustCloud} from 'react-icons/gi'\r\nimport './App.css';\r\n\r\nfunction Subheader({ label }){\r\n    return (\r\n        <form style={{display: \"flex\"}} onSubmit={() => window.open('https://gwsluftwaechter.blob.core.windows.net/public/Datenblatt_Luftwächter_GWS.pdf', '_blank')}>\r\n            {label}<Button type='submit'> Datenblatt anzeigen </Button>\r\n        </form>\r\n    );\r\n}\r\n\r\nexport default function Overview() {\r\n    const timestampRef = useRef(0);\r\n    const [timestamp, setTimestamp] = useState(new Date());\r\n    const [device, setDevice] = useState({ \r\n        name:\"\", \r\n        serial:\"\", \r\n        type:\"\", \r\n        description:\"\", \r\n        location:\"\", \r\n        lat:\"\", \r\n        lon:\"\", \r\n        alt:\"\", \r\n        timestamp:\"\" \r\n    });\r\n    const [values, setValues] = useState({\r\n        gasen:[], \r\n        feinstaub:[], \r\n        luftdruck:[], \r\n        feuchtigkeit:[], \r\n        temperatur:[]\r\n    });\r\n\r\n    useEffect(() => {\r\n        const interval = setInterval(function(){\r\n        setTimestamp(new Date());\r\n        }, 1000);\r\n        return () => { window.clearInterval(interval); }\r\n    }, []);\r\n    \r\n    useEffect(() => {\r\n        let mounted = true;\r\n        if (mounted){\r\n            fetch('https://its-hilfsfunktionen.azurewebsites.net/api/luftwaechterLatestValues')\r\n            .then( async ( response ) => {\r\n            const gasen = [];\r\n            const feinstaub = [];\r\n            const temperatur = [];\r\n            const feuchtigkeit=[];\r\n            const luftdruck=[]; \r\n\r\n            const {device_specs:deviceSpecs, latest_values:lastValues} = await response.json();\r\n            const {timestamp} = lastValues;\r\n            for (const [key, value] of Object.entries(lastValues)){\r\n                if([\"NO2\", \"CO\", \"O3\", \"NO\"].includes(key)) gasen.push({[`${key}`]: value})\r\n                else if([\"PM2.5\", \"PM10\"].includes(key)) feinstaub.push({[`${key}`]: value})\r\n                else if ([\"Air Temp.\"].includes(key)) temperatur.push({[`${key}`]: value})\r\n                else if ([\"Air Hum.\"].includes(key)) feuchtigkeit.push({[`${key}`]: value})\r\n                else if ([\"Air Pres.\"].includes(key)) luftdruck.push({[`${key}`]: value})\r\n            };\r\n            setValues({gasen, feinstaub, temperatur, feuchtigkeit, luftdruck});\r\n            setDevice({...deviceSpecs, timestamp});\r\n            // setDevice(lastValues)\r\n            })\r\n        };\r\n        return () => { \r\n            mounted = false; \r\n            setDevice({ \r\n                name:\"\", serial:\"\", type:\"\", \r\n                description:\"\", location:\"\", \r\n                lat:\"\", lon:\"\", alt:\"\", \r\n                timestamp:\"\" \r\n            });  \r\n        };\r\n    },[timestampRef.current])\r\n    \r\n    if (timestamp.getMinutes() % 10 === 3) timestampRef.current = timestamp.getMinutes();\r\n    \r\n    return (\r\n        <Card style={{ boxShadow:\"0 8px 40px -12px rgba(0,0,0,0.3)\", minWidth: 415, width:\"70vw\" }}>\r\n        <CardHeader title={`Luftwächter® - Musterstandort bei Green Way Systems Baden-Baden`} subheader={Subheader({label: d3.timeFormat(\"%d.%m.%Y %H:%M:%S\")(timestamp)})}/>\r\n        <CardContent>      \r\n            <div className=\"test\">\r\n            <Paper className=\"container\">\r\n            {/* <CardHeader component={FaThermometerHalf}/> */}\r\n            {values.temperatur && values.temperatur.map((el, i) => {\r\n                const [key, value] = Object.entries(el)[0];\r\n                let label=\"\";\r\n                switch (key){case(\"Air Temp.\"): label = \"Temperatur\"; break;};\r\n                return (\r\n                <div className=\"data-frame\" key={i}>\r\n                    <div style={{display: \"flex\", alignItems:\"center\"}}>\r\n                    <FaThermometerHalf/>\r\n                    <Typography style={{ fontWeight:'bold'}}> {label} </Typography>\r\n                    </div>\r\n                    <Typography><span>{value}&nbsp;°C</span> </Typography>\r\n                </div>\r\n                );\r\n            })}\r\n            </Paper>\r\n            <Paper className=\"container\">\r\n            {/* <CardHeader component={WiHumidity}/> */}\r\n            {values.feuchtigkeit && values.feuchtigkeit.map((el, i) => {\r\n                const [key, value] = Object.entries(el)[0];\r\n                let label=\"\";\r\n                switch (key){case(\"Air Hum.\"): label = \"Feuchtigkeit\"; break;};\r\n                return (  \r\n                <div className=\"data-frame\" key={i}>\r\n                    <div style={{display: \"flex\", alignItems:\"center\"}}>\r\n                    <WiHumidity/>\r\n                    <Typography style={{ fontWeight:'bold'}}> {label} </Typography>\r\n                    </div>\r\n                    <Typography><span>{value}&nbsp;%</span> </Typography>\r\n                </div>\r\n                );\r\n            })}\r\n            </Paper>\r\n            <Paper className=\"container\">\r\n            {/* <CardHeader component={WiCloudy}/> */}\r\n            {values.luftdruck && values.luftdruck.map((el, i) => {\r\n                const [key, value] = Object.entries(el)[0];\r\n                let label=\"\";\r\n                switch (key){case(\"Air Pres.\"): label = \"Luftdruck\"; break;};\r\n                return (  \r\n                <div className=\"data-frame\" key={i}>\r\n                    <div style={{display: \"flex\", alignItems:\"center\"}}>\r\n                    <WiCloudy/>\r\n                    <Typography style={{ fontWeight:'bold'}}> {label} </Typography>\r\n                    </div>\r\n                    <Typography><span>{value}&nbsp;mbar</span> </Typography>\r\n                </div>\r\n                );\r\n            })}\r\n            </Paper>\r\n            <Paper className=\"container\">\r\n            <CardHeader component={GiDustCloud}/>\r\n            {values.feinstaub && values.feinstaub.map((el, i) => {\r\n                const [key, value] = Object.entries(el)[0];\r\n                let label=\"\";\r\n                switch (key){\r\n                case(\"PM2.5\"): label = \"Feinstaub 2.5\"; break;\r\n                    case(\"PM10\"): label = \"Feinstaub 10\"; break;\r\n                };\r\n                return (  \r\n                <div className=\"data-frame\" key={i}>\r\n                    <Typography style={{ fontWeight:'bold'}}> {label} </Typography>\r\n                    <Typography> \r\n                        <span>\r\n                        {value}&nbsp;{'\\xB5'}g/m{<sup>3</sup>}\r\n                        </span> \r\n                    </Typography>\r\n                </div>\r\n                );\r\n            })}\r\n            </Paper>\r\n            <Paper className=\"container\">\r\n            <CardHeader component={GiGooeyMolecule} />\r\n            {values.gasen && values.gasen.map((el, i) => {\r\n                const [key, value] = Object.entries(el)[0];\r\n                let label=\"\";\r\n                switch (key){\r\n                case(\"NO2\"): label = \"Stickstoffdioxid [NO2]\"; break;\r\n                case(\"CO\"): label = \"Kohlenstoffmonoxid [CO]\"; break;\r\n                case(\"O3\"): label = \"Ozon [O3]\"; break;\r\n                case(\"NO\"): label = \"Stickstoffmonoxid [NO]\"; break;\r\n                };\r\n                return (  \r\n                <div className=\"data-frame\" key={i}>\r\n                    <Typography style={{ fontWeight:'bold'}}> {label} </Typography>\r\n                    <Typography> \r\n                        <span>\r\n                        {value}&nbsp;{'\\xB5'}g/m{<sup>3</sup>}\r\n                        </span> \r\n                    </Typography>\r\n                </div>\r\n                );\r\n            })}\r\n            </Paper>\r\n            </div>\r\n            <Paper style={{boxShadow:\"0 8px 40px -12px rgba(0,0,0,0.3)\", display:'flex', flexDirection:'column', minWidth:350 ,width: '30vw', padding: 15, margin:\"auto\"}}>\r\n                <div className=\"data-frame\">\r\n                    <Typography style={{fontWeight:'bold'}}>\r\n                        Seriennummer\r\n                    </Typography>\r\n                    <Typography>\r\n                        {device.name}\r\n                    </Typography>\r\n                </div>\r\n                <div className=\"data-frame\">\r\n                    <Typography style={{fontWeight:'bold'}}>\r\n                        Beschreibung\r\n                    </Typography>\r\n                    <Typography>\r\n                        {`MOG100/${device.description}`}\r\n                    </Typography>\r\n                </div>\r\n                <div className=\"data-frame\">\r\n                    <Typography style={{fontWeight:'bold'}}>\r\n                        Ort\r\n                    </Typography>\r\n                    <Typography className=\"label location\">\r\n                    {device.location}\r\n                    </Typography>\r\n                </div>\r\n                <div className=\"data-frame\">\r\n                    <Typography style={{fontWeight:'bold'}}>\r\n                        Längengrad\r\n                    </Typography>\r\n                    <Typography>\r\n                        {device.lat + '°'}\r\n                    </Typography>\r\n                </div>\r\n                <div className=\"data-frame\">\r\n                    <Typography style={{fontWeight:'bold'}}>\r\n                        Breitengrad\r\n                    </Typography>\r\n                    <Typography>\r\n                        {device.lon + '°'}\r\n                    </Typography>\r\n                </div>\r\n                <div className=\"data-frame\">\r\n                    <Typography style={{fontWeight:'bold'}}>\r\n                        Höhe\r\n                    </Typography>\r\n                    <Typography>\r\n                        {device.alt + ' m'}\r\n                    </Typography>\r\n                </div>\r\n                <div className=\"data-frame\">\r\n                    <Typography style={{fontWeight:'bold'}}>\r\n                        letzter Stand:\r\n                    </Typography>\r\n                    <Typography>\r\n                        {device.timstamp===\"\"?\"\":d3.timeFormat(\"%d.%m.%Y %H:%M\")(d3.utcParse(\"%Y-%m-%d %H:%M:%S\")(device.timestamp))}\r\n                    </Typography>\r\n                </div>\r\n            </Paper>\r\n        </CardContent>\r\n    \r\n        </Card>\r\n    );\r\n}","import React, {useState} from 'react';\r\nimport {Card, CardHeader, CardContent, CardActions, Button} from '@material-ui/core';\r\nimport './App.css';\r\n// import { Fragment } from 'react';\r\n\r\nexport default function Datasheet(){\r\n    const [maxNumberOfPages] = useState(3);\r\n    const [page, setPage] = useState(0);\r\n\r\n    const downloadPDF = async () => {\r\n        const response = await fetch('/archives/Datenblatt_Luftwächter_GWS.pdf', {method: 'GET'});\r\n        try{\r\n            const blob = await response.blob();\r\n            let pdf = document.createElement('a');\r\n            pdf.href = window.URL.createObjectURL(blob);\r\n            pdf.setAttribute('download', `GWS_Luftwächter_Datenblatt`);\r\n            pdf.click();\r\n        }catch(err){\r\n            console.log(err)\r\n        };\r\n    };\r\n\r\n    return (\r\n        <Card style={{ boxShadow:\"0 8px 40px -12px rgba(0,0,0,0.3)\", minWidth: 415, width:\"70vw\" }}>\r\n            <CardHeader title={`Luftwächter® - Messstation als Montageset`} />\r\n            <CardContent>\r\n                { \r\n                    page === 0 && \r\n                    <div style={{minHeight:300, position:\"relative\", width:\"100%\"}}>\r\n                        <img src=\"/pictures/mietpreis.png\" style={{width: 300, height:300, position:\"absolute\", bottom:10, right:20, zIndex:1, opacity:0.5}}/>\r\n                        <ul style={{height:\"70%\", margin:0, display:\"flex\", flexDirection:\"column\", justifyContent:\"space-around\", padding:0, zIndex:3, position:\"relative\"}}>\r\n                            <li style={{listStyleType:\"none\"}}><input type=\"checkbox\" checked={true} disabled/>Erfassung von gas- und partikelförmigen Luftschadstoffen</li>\r\n                            <li style={{listStyleType:\"none\"}}><input type=\"checkbox\" checked={true} disabled/>energieautarker Betrieb mit Solarpanel und Akku</li>\r\n                            <li style={{listStyleType:\"none\"}}><input type=\"checkbox\" checked={true} disabled/>Montagefreundlich mit Universalhalterung für vorhandene Maste</li>\r\n                            <li style={{listStyleType:\"none\"}}><input type=\"checkbox\" checked={true} disabled/>einfaches Anschließen aller Komponenten</li>\r\n                            <li style={{listStyleType:\"none\"}}><input type=\"checkbox\" checked={true} disabled/>Intelligentes Energiemanagement</li>\r\n                            <li style={{listStyleType:\"none\"}}><input type=\"checkbox\" checked={true} disabled/>Datenkommunikation über Mobilfunk</li>\r\n                            <li style={{listStyleType:\"none\"}}><input type=\"checkbox\" checked={true} disabled/>Visualisierung und Bereitstellung der Daten über Web-Portal</li>\r\n                            <li style={{listStyleType:\"none\"}}><input type=\"checkbox\" checked={true} disabled/>Mietkonzept</li>\r\n                        </ul>\r\n                        \r\n                    </div>\r\n                }\r\n                {\r\n                    page === 1 && \r\n                    <Tabelle/>\r\n                }\r\n                {\r\n                    page === 2 && \r\n                    <Kontakt/>\r\n                }\r\n            </CardContent>\r\n            <CardActions style={{backgroundColor: \"rgb(140, 208, 0, 0.4)\"}}>\r\n                <Button disabled={page <= 0} onClick={() => setPage(page - 1)}>{\"<\"}</Button>\r\n                <Button disabled={page >= maxNumberOfPages - 1} onClick={() => setPage(page + 1)}>{\">\"}</Button>\r\n                <Button onClick={() => downloadPDF()}>Datenblatt herunterladen</Button>\r\n            </CardActions>\r\n        </Card>\r\n    );\r\n}\r\n\r\n\r\nfunction Tabelle(){\r\n    return (\r\n        <div style={{position:\"relative\", width:\"100%\"}}>\r\n            <table style={{position:\"relative\", zIndex:3}}>\r\n                <thead>\r\n                    <tr>\r\n                        <th className=\"table-cell\">Bezeichnung</th>\r\n                        <th className=\"table-cell\">Beschreibung und Nennwerte</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr>\r\n                        <td className=\"table-cell\">Messung folgender Werte</td>\r\n                        <td className=\"table-cell\">\r\n                            Stickstoffdioxid NO<span><sub>2</sub></span>, Stickstoffmonoxid NO, Ozon O<span><sub>3</sub></span>, Kohlenstoffmonoxid CO,\r\n                            Feinstaub PM<span><sub>2.5</sub></span> und PM<span><sub>10</sub></span>, Temperatur, Luftdruck und Luftfeuchtigkeit\r\n                        </td>\r\n                    </tr>\r\n                    <tr>\r\n                        <td className=\"table-cell\">Messintervall</td>\r\n                        <td className=\"table-cell\">5 min. für alle Gase, 10 min. für Feinstaub</td>\r\n                    </tr>\r\n                    <tr>\r\n                        <td className=\"table-cell\">Übertragungsintervall</td>\r\n                        <td className=\"table-cell\">alle 15 min</td>\r\n                    </tr>\r\n                    <tr>\r\n                        <td className=\"table-cell\">Leistungsaufnahme</td>\r\n                        <td className=\"table-cell\">ca. 2 W</td>\r\n                    </tr>\r\n                    <tr>\r\n                        <td className=\"table-cell\">Montagehöhe</td>\r\n                        <td className=\"table-cell\">1,5 m bis 4,0 m je nach Örtlichkeit</td>\r\n                    </tr>\r\n                    <tr>\r\n                        <td className=\"table-cell\">Halterung</td>\r\n                        <td className=\"table-cell\">Universalhalterung für Mastdurchmesser von 60mm bis 400mm</td>\r\n                    </tr>\r\n                    <tr>\r\n                        <td className=\"table-cell\">Gewicht</td>\r\n                        <td className=\"table-cell\">ca. 50 kg inkl. Transportkoffer</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n            <img src=\"/pictures/lw_gehaeuse.png\" style={{width: 150, height:200, position:\"absolute\", bottom:30, left:20, zIndex:1, opacity:0.5}}/>\r\n            <img src=\"/pictures/luftwaechter.png\" style={{width: 150, height:300, position:\"absolute\", bottom:30, right:20, zIndex:1, opacity:0.5}}/>\r\n        </div>\r\n        \r\n    );\r\n};\r\n\r\nfunction Kontakt(){\r\n    return(\r\n        <div style={{position:\"relative\", width:\"100%\"}}>\r\n            <div style={{position:\"relative\", zIndex:3}}>\r\n                <h4>Kontakt</h4>\r\n                <p>Green Way Systems GmbH</p>\r\n                <p>Im Rollfeld 40</p>\r\n                <p>D-76532 Baden-Baden</p>\r\n                <p>Telefon: +49 (7221) 189 56 - 80</p>\r\n                <p>Telefax: +49 (7221) 189 56 - 99</p>\r\n                <p>Mail: info@greenwaysystems.de</p>\r\n                <p>Web: <span><a href={\"https://greenwaysystems.de/\"}>https://greenwaysystems.de/</a></span></p>\r\n            </div>\r\n            <img src=\"/pictures/gws_schild.png\" style={{width: 180, height:300, position:\"absolute\", bottom:30, right:20, zIndex:1, opacity:0.5}}/>\r\n        </div>\r\n    )\r\n};","import React, {useEffect, useState} from 'react';\r\nimport {useHistory} from \"react-router-dom\";\r\nimport Overview from \"./Overview\"\r\nimport Datasheet from \"./Datasheet\";\r\nimport './App.css';\r\n\r\nexport default function App() {\r\n  const history = useHistory();\r\n\r\n  const [state, setState] = useState(\"uebersicht\");\r\n  // const setURLParams = (queryState) => {\r\n  //   const urlParams = new URLSearchParams();\r\n  //   urlParams.set(\"state\", queryState);\r\n  //   history.push(`?${urlParams.toString()}`);\r\n  //   setState(queryState);\r\n  // };\r\n\r\n  useEffect(() => {\r\n    let mounted = true;\r\n    if (mounted){\r\n      const urlParams = new URLSearchParams( window.location.search );\r\n      const paramState = urlParams.get(\"status\") || \"uebersicht\";\r\n      history.push(`?status=${paramState}`);\r\n      setState(paramState);\r\n    };\r\n    return () => { mounted = false }\r\n\r\n  },[history]);\r\n\r\n  return (\r\n    <div>\r\n      { state===\"uebersicht\" && <Overview/> }\r\n      { state===\"datenblatt\" && <Datasheet/>}\r\n    </div>\r\n  );\r\n\r\n};\r\n","const reportWebVitals = onPerfEntry => {\r\n  if (onPerfEntry && onPerfEntry instanceof Function) {\r\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\r\n      getCLS(onPerfEntry);\r\n      getFID(onPerfEntry);\r\n      getFCP(onPerfEntry);\r\n      getLCP(onPerfEntry);\r\n      getTTFB(onPerfEntry);\r\n    });\r\n  }\r\n};\r\n\r\nexport default reportWebVitals;\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport {BrowserRouter as Router} from \"react-router-dom\"\r\nimport './index.css';\r\nimport App from './App';\r\nimport reportWebVitals from './reportWebVitals';\r\n\r\nReactDOM.render(\r\n  <React.StrictMode>\r\n    <Router>\r\n      <App/>\r\n    </Router>\r\n  </React.StrictMode>,\r\n  document.getElementById('root')\r\n);\r\n\r\n// If you want to start measuring performance in your app, pass a function\r\n// to log results (for example: reportWebVitals(console.log))\r\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\r\nreportWebVitals();\r\n"],"sourceRoot":""}