AirQo widget [DRAFT]

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2025-03-07T10:47:32.346Z\n"
-"PO-Revision-Date: 2025-03-07T10:47:32.346Z\n"
+"POT-Creation-Date: 2025-03-21T10:46:10.062Z\n"
+"PO-Revision-Date: 2025-03-21T10:46:10.062Z\n"
 
 msgid "About this app"
 msgstr "About this app"
@@ -111,6 +111,9 @@ msgstr "Home"
 msgid "Explore data"
 msgstr "Explore data"
 
+msgid "Station data"
+msgstr "Station data"
+
 msgid "Import data"
 msgstr "Import data"
 
@@ -505,6 +508,19 @@ msgstr "{{name}}: Monthly temperatures {{period}}"
 msgid "Normal temperature"
 msgstr "Normal temperature"
 
+msgid "Resample"
+msgstr "Resample"
+
+msgid "Weekly"
+msgstr "Weekly"
+
+msgid ""
+"Change from 16-days to weekly or monthly periods using linear "
+"interpolation. Weekly periods are recommended when importing to DHIS2."
+msgstr ""
+"Change from 16-days to weekly or monthly periods using linear "
+"interpolation. Weekly periods are recommended when importing to DHIS2."
+
 msgid "{{name}}: {{band}} vegetation index 2024"
 msgstr "{{name}}: {{band}} vegetation index 2024"
 
@@ -707,6 +723,9 @@ msgstr "Heat stress upper category"
 msgid "Heat stress lower category"
 msgstr "Heat stress lower category"
 
+msgid "AirQo token"
+msgstr "AirQo token"
+
 msgid "Calculate from data"
 msgstr "Calculate from data"
 
@@ -785,6 +804,21 @@ msgstr "End value"
 msgid "Color"
 msgstr "Color"
 
+msgid "Route set up"
+msgstr "Route set up"
+
+msgid "Your route will be created with the following information ..."
+msgstr "Your route will be created with the following information ..."
+
+msgid "Token"
+msgstr "Token"
+
+msgid "Cancel"
+msgstr "Cancel"
+
+msgid "Save"
+msgstr "Save"
+
 msgid "How to configure this app"
 msgstr "How to configure this app"
 
@@ -900,6 +934,21 @@ msgstr ""
 msgid "Time zone"
 msgstr "Time zone"
 
+msgid "Missing route"
+msgstr "Missing route"
+
+msgid "AirQo token not set"
+msgstr "AirQo token not set"
+
+msgid "Create route"
+msgstr "Create route"
+
+msgid "Air Quality PM<sub>2.5</sub>"
+msgstr "Air Quality PM<sub>2.5</sub>"
+
+msgid "AirQo"
+msgstr "AirQo"
+
 msgid "Approximately 31 km (0.25°)"
 msgstr "Approximately 31 km (0.25°)"
 
@@ -1129,6 +1178,64 @@ msgstr "Extreme heat stress"
 msgid "Extreme<br>heat stress"
 msgstr "Extreme<br>heat stress"
 
+msgid "Air Quality Index (AQI"
+msgstr "Air Quality Index (AQI"
+
+msgid "Good"
+msgstr "Good"
+
+msgid ""
+"Air quality is considered satisfactory, and air pollution poses little or "
+"no risk"
+msgstr ""
+"Air quality is considered satisfactory, and air pollution poses little or "
+"no risk"
+
+msgid "Moderate"
+msgstr "Moderate"
+
+msgid ""
+"Active children and adults, and people with respiratory disease, such as "
+"asthma, should limit prolonged outdoor exertion."
+msgstr ""
+"Active children and adults, and people with respiratory disease, such as "
+"asthma, should limit prolonged outdoor exertion."
+
+msgid "Unhealthy for Sensitive Groups"
+msgstr "Unhealthy for Sensitive Groups"
+
+msgid ""
+"Members of sensitive groups may experience health effects. Active children "
+"and adults, and people with respiratory disease, such as asthma, should "
+"limit prolonged outdoor exertion."
+msgstr ""
+"Members of sensitive groups may experience health effects. Active children "
+"and adults, and people with respiratory disease, such as asthma, should "
+"limit prolonged outdoor exertion."
+
+msgid "Unhealthy"
+msgstr "Unhealthy"
+
+msgid ""
+"Everyone may begin to experience health effects; members of sensitive "
+"groups may experience more serious health effects."
+msgstr ""
+"Everyone may begin to experience health effects; members of sensitive "
+"groups may experience more serious health effects."
+
+msgid "Very unhealthy"
+msgstr "Very unhealthy"
+
+msgid ""
+"Health warnings of emergency conditions. The entire population is more "
+"likely to be affected."
+msgstr ""
+"Health warnings of emergency conditions. The entire population is more "
+"likely to be affected."
+
+msgid "Hazardous"
+msgstr "Hazardous"
+
 msgid "ERA5-Land / Copernicus Climate Change Service / Google Earth Engine"
 msgstr "ERA5-Land / Copernicus Climate Change Service / Google Earth Engine"
 
@@ -1140,6 +1247,3 @@ msgstr "NASA LP DAAC at the USGS EROS Center / Google Earth Engine"
 
 msgid "No data found for the selected period"
 msgstr "No data found for the selected period"
-
-msgid "Weekly"
-msgstr "Weekly"

src/components/Root.jsx

@@ -10,6 +10,7 @@ import styles from './styles/Root.module.css'
 export const appPages = [
     { path: '/', name: i18n.t('Home') },
     { path: '/explore', name: i18n.t('Explore data') },
+    { path: '/station', name: i18n.t('Station data') },
     { path: '/import', name: i18n.t('Import data') },
     { path: '/setup', name: i18n.t('Setup guide') },
     { path: '/settings', name: i18n.t('Settings') },

src/components/Routes.jsx

@@ -23,6 +23,7 @@ import ImportPage from './import/ImportPage.jsx'
 import Root from './Root.jsx'
 import SettingsPage from './settings/SettingsPage.jsx'
 import SetupPage from './setup/SetupPage.jsx'
+import StationPage from './station/StationPage.jsx'
 
 const monthlyPath = 'monthly/:startTime/:endTime/:referencePeriodId'
 const dailyPath = 'daily/:startTime/:endTime'
@@ -160,6 +161,10 @@ const Routes = () => {
                         },
                     ],
                 },
+                {
+                    path: 'station',
+                    element: <StationPage />,
+                },
                 {
                     path: 'import',
                     element: <ImportPage />,

src/components/settings/ChartSettings.jsx

@@ -33,7 +33,6 @@ const ChartSettings = () => {
                 label={i18n.t('Max temperature in °C')}
                 value={tempMax}
                 onChange={changeSetting}
-                inputWidth="100px"
             />
             <NumberInput
                 id="tempMin"

src/components/settings/DataSettings.jsx

@@ -0,0 +1,31 @@
+import i18n from '@dhis2/d2-i18n'
+import { InputField } from '@dhis2/ui'
+import useAppSettings from '../../hooks/useAppSettings.js'
+
+const ChartSettings = () => {
+    const { settings, changeSetting } = useAppSettings()
+
+    if (!settings) {
+        return null
+    }
+
+    const { airqoToken } = settings
+
+    return (
+        <>
+            <h2>Data settings</h2>
+            <InputField
+                label={i18n.t('AirQo token')}
+                value={airqoToken}
+                onChange={({ value }) =>
+                    changeSetting(
+                        'airqoToken',
+                        value !== '' ? value : undefined
+                    )
+                }
+            />
+        </>
+    )
+}
+
+export default ChartSettings

src/components/settings/SettingsPage.jsx

@@ -1,6 +1,7 @@
 import i18n from '@dhis2/d2-i18n'
 import useAppSettings from '../../hooks/useAppSettings.js'
 import ChartSettings from './ChartSettings.jsx'
+import DataSettings from './DataSettings.jsx'
 import StartPageSelect from './StartPageSelect.jsx'
 import styles from './styles/SettingsPage.module.css'
 import TimeZoneSelect from './TimeZoneSelect.jsx'
@@ -25,6 +26,7 @@ const SettingsPage = () => {
             <StartPageSelect startPage={startPage} onChange={changeSetting} />
             <TimeZoneSelect timeZone={timeZone} onChange={changeSetting} />
             <ChartSettings />
+            <DataSettings />
         </div>
     )
 }

src/components/setup/RouteSetup.jsx

@@ -0,0 +1,94 @@
+import { useDataMutation } from '@dhis2/app-runtime'
+import i18n from '@dhis2/d2-i18n'
+import {
+    Modal,
+    ModalTitle,
+    ModalContent,
+    ModalActions,
+    ButtonStrip,
+    Button,
+    InputField,
+} from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
+const mutation = {
+    resource: 'routes',
+    type: 'create',
+    data: ({ data }) => data,
+}
+
+const RouteSetup = ({
+    routeInfo,
+    isRouteSetupModalOpen,
+    setIsRouteSetupModalOpen,
+}) => {
+    const [token, setToken] = useState('')
+    if (routeInfo.auth.type == 'api-query-params') {
+        routeInfo.auth.queryParams = {
+            token: token,
+        }
+    } else if (routeInfo.auth.type == 'api-headers') {
+        routeInfo.auth.headers = {
+            'X-API-KEY': token,
+        }
+    }
+    const [saveRoute] = useDataMutation(mutation, {
+        variables: {
+            data: routeInfo,
+        },
+        onComplete: () => {
+            setIsRouteSetupModalOpen(!isRouteSetupModalOpen)
+        },
+    })
+
+    return (
+        <>
+            <Modal>
+                <ModalTitle>{i18n.t('Route set up')}</ModalTitle>
+                <ModalContent>
+                    <h3>
+                        {i18n.t(
+                            'Your route will be created with the following information ...'
+                        )}
+                    </h3>
+                    <div>
+                        <pre>{JSON.stringify(routeInfo, null, 2)}</pre>
+                    </div>
+                    <InputField
+                        label={i18n.t('Token')}
+                        value={token}
+                        onChange={({ value }) => setToken(value)}
+                    />
+                </ModalContent>
+                <ModalActions>
+                    <ButtonStrip end>
+                        <Button
+                            onClick={() =>
+                                setIsRouteSetupModalOpen(!isRouteSetupModalOpen)
+                            }
+                            secondary
+                        >
+                            {i18n.t('Cancel')}
+                        </Button>
+                        <Button
+                            disabled={!token}
+                            onClick={() => saveRoute()}
+                            primary
+                        >
+                            {i18n.t('Save')}
+                        </Button>
+                    </ButtonStrip>
+                </ModalActions>
+            </Modal>
+        </>
+    )
+}
+
+RouteSetup.propTypes = {
+    isRouteSetupModalOpen: PropTypes.bool.isRequired,
+    routeInfo: PropTypes.object.isRequired,
+    setIsRouteSetupModalOpen: PropTypes.func.isRequired,
+}
+
+export default RouteSetup

src/components/station/StationPage.jsx

@@ -0,0 +1,8 @@
+import AirQoPlugin from './airqo/AirQoPlugin.jsx'
+// import styles from './styles/StationPage.module.css'
+
+const StationPage = () => {
+    return <AirQoPlugin siteId="6461df90dab86000293ba49f" />
+}
+
+export default StationPage