@vixoniccom/aqi 0.0.1-dev.5 → 0.0.1-dev.7

package/configuration/appeareanceGroup/AppeareanceInputs.ts

@@ -1,41 +1,23 @@
-import {
-  Label,
-  SelectAssetKna,
-  SelectInput,
-  TextFormat,
-  TextInput,
-} from '@vixoniccom/modules'
+import { Label, NumberInput, SelectAssetKna, TextFormat, TextInput } from '@vixoniccom/modules'
 
 export const appeareanceInputs = [
   new Label({ label: 'General' }),
-  new TextInput({
-    id: 'padding',
-    label: 'Márgenes',
-    required: false,
-    description:
-      'CSS para mover la tarjeta. El formato es arriba/derecha/abajo/izquieda',
-  }),
-  new SelectAssetKna({
-    id: 'backgroundImage',
-    label: 'Fondo',
-    required: false,
-    extensions: ['jpg', 'png'],
-  }),
+  new SelectAssetKna({ id: 'backgroundImage', label: 'Fondo', required: false, extensions: ['jpg', 'png'] }),
 
   new Label({ label: 'Diseño de la tarjeta' }),
-  new TextInput({
-    id: 'cardWidth',
-    label: 'Ancho',
-    required: false,
-    description: 'Ancho de la tarjeta',
-  }),
-  new TextInput({
-    id: 'cardHeight',
-    label: 'Alto',
-    required: false,
-    description: 'Altura de la tarjeta',
-  }),
-  new TextInput({
+  new NumberInput({
+    id: 'topSeparationCard',
+    label: 'Separación desde arriba',
+    description: 'Separación de la tarjeta del margen superior',
+  }),
+  new NumberInput({
+    id: 'leftSeparationCard',
+    label: 'Separación desde izquierda',
+    description: 'Separación de la tarjeta del margen izquierdo',
+  }),
+  new NumberInput({ id: 'cardWidth', label: 'Ancho', required: false, description: 'Ancho de la tarjeta' }),
+  new NumberInput({ id: 'cardHeight', label: 'Alto', required: false, description: 'Altura de la tarjeta' }),
+  new NumberInput({
     id: 'cardGap',
     label: 'Separación entre elementos',
     required: false,
@@ -43,32 +25,16 @@ export const appeareanceInputs = [
   }),
 
   new Label({ label: 'Textos de la tarjeta' }),
-  new TextFormat({
-    id: 'aqiFormat',
-    label: 'Formato del índice de calidad del aire',
-  }),
-  new TextFormat({
-    id: 'stationFormat',
-    label: 'Formato de estación que realizó la medición',
-  }),
-  new TextFormat({
-    id: 'qualityFormat',
-    label: 'Formato del mensaje sobre la calidad del aire',
-  }),
+  new TextFormat({ id: 'aqiFormat', label: 'Formato del índice de calidad del aire' }),
+  new TextFormat({ id: 'stationFormat', label: 'Formato de estación que realizó la medición' }),
+  new TextFormat({ id: 'qualityFormat', label: 'Formato del mensaje sobre la calidad del aire' }),
 
   new Label({ label: 'Datos' }),
-  new SelectInput({
-    id: 'updateData',
-    label: 'Frecuencia con la que se piden datos',
-    items: [
-      { label: '1 minuto', value: 1 },
-      { label: '5 minutos', value: 5 },
-      { label: '10 minutos', value: 10 },
-      { label: '30 minutos', value: 30 },
-      { label: '45 minutos', value: 45 },
-      { label: '1 hora', value: 60 },
-    ],
-    defaultValue: 1,
+  new TextInput({
+    id: 'cityInput',
+    label: 'Ciudad a buscar',
+    description:
+      'Ciudad de la que se quiere medir el aire. Para ver la ciudades disponibles se puede consultar aquí: https://aqicn.org/here',
   }),
   new TextInput({ id: 'msj0', label: 'Mensaje sin Datos' }),
   new TextFormat({ id: 'formatMjs', label: 'Formato Mensaje sin Datos' }),

package/configuration.json

@@ -9,13 +9,6 @@
           "type": "label",
           "label": "General"
         },
-        {
-          "id": "padding",
-          "label": "Márgenes",
-          "type": "text-input",
-          "description": "CSS para mover la tarjeta. El formato es arriba/derecha/abajo/izquieda",
-          "required": false
-        },
         {
           "id": "backgroundImage",
           "label": "Fondo",
@@ -31,24 +24,36 @@
           "type": "label",
           "label": "Diseño de la tarjeta"
         },
+        {
+          "id": "topSeparationCard",
+          "label": "Separación desde arriba",
+          "type": "number-input",
+          "description": "Separación de la tarjeta del margen superior"
+        },
+        {
+          "id": "leftSeparationCard",
+          "label": "Separación desde izquierda",
+          "type": "number-input",
+          "description": "Separación de la tarjeta del margen izquierdo"
+        },
         {
           "id": "cardWidth",
           "label": "Ancho",
-          "type": "text-input",
+          "type": "number-input",
           "description": "Ancho de la tarjeta",
           "required": false
         },
         {
           "id": "cardHeight",
           "label": "Alto",
-          "type": "text-input",
+          "type": "number-input",
           "description": "Altura de la tarjeta",
           "required": false
         },
         {
           "id": "cardGap",
           "label": "Separación entre elementos",
-          "type": "text-input",
+          "type": "number-input",
           "description": "Separación entre los elementos de la tarjeta",
           "required": false
         },
@@ -76,36 +81,10 @@
           "label": "Datos"
         },
         {
-          "id": "updateData",
-          "label": "Frecuencia con la que se piden datos",
-          "type": "select-input",
-          "items": [
-            {
-              "label": "1 minuto",
-              "value": 1
-            },
-            {
-              "label": "5 minutos",
-              "value": 5
-            },
-            {
-              "label": "10 minutos",
-              "value": 10
-            },
-            {
-              "label": "30 minutos",
-              "value": 30
-            },
-            {
-              "label": "45 minutos",
-              "value": 45
-            },
-            {
-              "label": "1 hora",
-              "value": 60
-            }
-          ],
-          "defaultValue": 1
+          "id": "cityInput",
+          "label": "Ciudad a buscar",
+          "type": "text-input",
+          "description": "Ciudad de la que se quiere medir el aire. Para ver la ciudades disponibles se puede consultar aquí: https://aqicn.org/here"
         },
         {
           "id": "msj0",

package/package.json

@@ -8,7 +8,7 @@
   "author": {
     "name": "Daniel Alvayay"
   },
-  "version": "0.0.1-dev.5",
+  "version": "0.0.1-dev.7",
   "scripts": {
     "prepublishOnly": "vixonic-module-packager --mode=build",
     "watch": "vixonic-module-packager --mode=watch",

package/src/App.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react'
 import { Card } from './components/Card'
 import { FontLoader } from './components/FontLoader'
 import { FormattedText } from './components/FormattedText'
-import { AirQuality, StorageData } from './types'
+import { AirQuality, AqiData, StorageData } from './types'
 import { API_RESPONSE_STATUS, TOKEN } from './utils'
 
 interface Props {
@@ -15,8 +15,9 @@ interface Props {
 export const App: React.FunctionComponent<Props> = ({ data, start }) => {
   const { parameters, downloadsPath } = data
   const backgroundImageState = parameters.backgroundImage ? `url('${downloadsPath}/${parameters.backgroundImage.filename}')` : ''
-  const [formattedData, setFormattedData] = useState<AirQuality | null>()
-  const updateTime = (parameters?.updateData || 1) * 60000
+  const [formattedData, setFormattedData] = useState<AqiData>()
+  const cityInput = parameters?.cityInput || "santiago"
+  const updateTime = 600000
 
   const refetchData = (referenceDate: Date): boolean => {
     const now = new Date()
@@ -29,12 +30,11 @@ export const App: React.FunctionComponent<Props> = ({ data, start }) => {
       const differenceMinutes = Math.abs(now.getTime() - referenceDate.getTime())
       return differenceMinutes >= updateTime
     }
-
     return true
   }
 
   const requestData = async (): Promise<AirQuality | null> => {
-    const URL = `https://api.waqi.info/feed/here/?token=${TOKEN}`
+    const URL = `https://api.waqi.info/feed/${cityInput}/?token=${TOKEN}`
     try {
       const response = await axios.get<AirQuality>(URL)
       if (response?.status === 200) {
@@ -42,21 +42,34 @@ export const App: React.FunctionComponent<Props> = ({ data, start }) => {
       }
       return null
     } catch (error) {
-      console.log(error)
       return null
     }
   }
 
+  const processData = (response: AirQuality | null): AqiData => {
+    let data: AqiData = { city: cityInput, station: "Estación desconocida" }
+    if (response && response.status === API_RESPONSE_STATUS.OK) {
+      data = {
+        aqi: response.data.aqi,
+        city: cityInput,
+        station: response.data.city.name
+      }
+    }
+    return data
+  }
+
   const getData = async () => {
     const storageData: StorageData | null = await localforage.getItem('aqi')
     let data
-    if (!storageData?.item || !storageData?.date || refetchData(new Date(storageData.date))) {
+    if (!storageData?.item || storageData?.item.city !== parameters.cityInput || !storageData?.date || refetchData(new Date(storageData.date))) {
       data = await requestData()
-      await localforage.setItem('aqi', { item: data, date: new Date() })
+      const processedData = processData(data)
+      await localforage.setItem('aqi', { item: processedData, date: new Date() })
+      setFormattedData(processedData)
     } else {
       data = storageData.item
+      setFormattedData(data)
     }
-    setFormattedData(data)
   }
 
   useEffect(() => {
@@ -66,48 +79,60 @@ export const App: React.FunctionComponent<Props> = ({ data, start }) => {
       getData()
     }, updateTime)
     return () => clearInterval(interval)
-  }, [start, updateTime])
+  }, [start, updateTime, parameters.cityInput])
 
   return (
-    <div
-      style={{
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        backgroundImage: backgroundImageState,
-        backgroundSize: '100% 100%',
-        padding: parameters?.padding
-      }}
-    >
-      {formattedData?.status === API_RESPONSE_STATUS.OK ? (
-        <div>
-          <FontLoader paths={['aqiFormat.font', 'stationFormat.font', 'qualityFormat.font']} parameters={parameters} downloadsPath={downloadsPath} />
+    <div style={{
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      display: "flex",
+      backgroundImage: backgroundImageState,
+      backgroundSize: '100% 100%',
+    }}>
+      <div style={{
+        width: "100%",
+        height: "100%",
+        position: "relative"
+      }}>
+        {formattedData ? (
+          <div style={{
+            position: "absolute",
+            top: `${parameters.topSeparationCard || 0}px`,
+            left: `${parameters.leftSeparationCard || 0}px`
+          }}>
+            <FontLoader paths={['aqiFormat.font', 'stationFormat.font', 'qualityFormat.font']} parameters={parameters} downloadsPath={downloadsPath} />
 
-          <Card data={formattedData?.data}
-            format={{
-              cardWidth: parameters?.cardWidth,
-              cardHeight: parameters?.cardHeight,
-              cardGap: parameters?.cardGap,
-              aqiFormat: parameters?.aqiFormat,
-              stationFormat: parameters?.stationFormat,
-              qualityFormat: parameters?.qualityFormat
-            }} />
-        </div>
-      ) : (
-        <div>
-          <FontLoader paths={['formatMjs.font']} parameters={parameters} downloadsPath={downloadsPath} />
+            <Card data={formattedData}
+              format={{
+                cardWidth: parameters?.cardWidth,
+                cardHeight: parameters?.cardHeight,
+                cardGap: parameters?.cardGap,
+                aqiFormat: parameters?.aqiFormat,
+                stationFormat: parameters?.stationFormat,
+                qualityFormat: parameters?.qualityFormat
+              }} />
+          </div>
+        ) : (
           <div style={{
-            display: 'flex',
-            position: 'relative',
-            flex: '1 1 0%',
-            flexDirection: 'column',
+            position: "absolute",
+            top: `${parameters.topSeparationCard || 0}px`,
+            left: `${parameters.leftSeparationCard || 0}px`
           }}>
-            <FormattedText text={parameters?.msj0 || 'No hay datos para mostrar'} format={parameters?.formatMjs} />
+            <FontLoader paths={['formatMjs.font']} parameters={parameters} downloadsPath={downloadsPath} />
+            <div style={{
+              display: 'flex',
+              position: 'relative',
+              flex: '1 1 0%',
+              flexDirection: 'column',
+            }}>
+              <FormattedText text={parameters?.msj0 || 'No hay datos para mostrar'} format={parameters?.formatMjs} />
+            </div>
           </div>
-        </div>
-      )}
+        )}
+      </div>
     </div>
   )
 }

package/src/components/Card.tsx

@@ -1,15 +1,15 @@
-import React from 'react'
-import { assingAirQuality } from '../utils'
-import { Data } from '../types';
-import { TextFormat } from '@vixoniccom/modules'
-import { FormattedText } from './FormattedText'
+import React from 'react';
+import { assingAirQuality } from '../utils';
+import { AqiData } from '../types';
+import { TextFormat } from '@vixoniccom/modules';
+import { FormattedText } from './FormattedText';
 
 interface Props {
-  data: Data;
+  data: AqiData;
   format: {
-    cardWidth?: string;
-    cardHeight?: string;
-    cardGap?: string;
+    cardWidth?: number;
+    cardHeight?: number;
+    cardGap?: number;
     aqiFormat?: TextFormat.Value;
     stationFormat?: TextFormat.Value;
     qualityFormat?: TextFormat.Value;
@@ -17,33 +17,35 @@ interface Props {
 }
 
 export const Card: React.FunctionComponent<Props> = ({ data, format }) => {
-  const { color, quality } = assingAirQuality(data?.aqi)
+  const { color, quality } = assingAirQuality(data?.aqi || -1)
+  const city = data.station === "Estación desconocida" ? data.station : data.city
+
   return (
     <div style={{
       display: 'flex',
-      width: format.cardWidth || 300,
-      height: format.cardHeight || 200,
+      width: `${format.cardWidth || 300}px`,
+      height: `${format.cardHeight || 200}px`,
       flexDirection: 'column',
-      padding: '1rem',
       backgroundColor: color,
-      border: '2px solid #000',
-      // gap: format.cardGap || '2rem',
+      borderRadius: "10px"
     }}>
-      <div style={{
-        textAlign: `${format.aqiFormat?.alignment?.horizontal || 'left'}`,
-        padding: `${format.cardGap || '2rem'}`
-      }}>
-        <FormattedText text={String(data?.aqi)} format={format.aqiFormat} />
-      </div>
+      {(data?.aqi) && (
+        <div style={{
+          textAlign: `${format.aqiFormat?.alignment?.horizontal || 'left'}`,
+          padding: `${format.cardGap || 2}rem`
+        }}>
+          <FormattedText text={String(data?.aqi)} format={format.aqiFormat} />
+        </div>
+      )}
       <div style={{
         textAlign: `${format.stationFormat?.alignment?.horizontal || 'left'}`,
-        padding: `${format.cardGap || '2rem'}`,
+        padding: `${format.cardGap || 2}rem`,
       }}>
-        <FormattedText text={String(`Estación: ${data?.city?.name}`)} format={format.stationFormat} />
+        <FormattedText text={city} format={format.stationFormat} />
       </div>
       <div style={{
         textAlign: `${format.qualityFormat?.alignment?.horizontal || 'left'}`,
-        padding: `${format.cardGap || '2rem'}`,
+        padding: `${format.cardGap || 2}rem`,
         marginTop: '1rem'
       }}>
         <FormattedText text={data?.aqi ? quality : ''} format={format.qualityFormat} />

package/src/parameters.d.ts

@@ -5,11 +5,12 @@ declare type VixonicData = {
 }
 
 declare type VixonicParameters = Partial<{
-  padding: string
   backgroundImage: { id?: string; filename?: string; extension?: string }
-  cardWidth: string
-  cardHeight: string
-  cardGap: string
+  topSeparationCard: number
+  leftSeparationCard: number
+  cardWidth: number
+  cardHeight: number
+  cardGap: number
   aqiFormat: {
     fontSize?: number
     fontColor?: string
@@ -28,7 +29,7 @@ declare type VixonicParameters = Partial<{
     alignment?: { horizontal?: 'left' | 'right' | 'center' }
     font?: { filename: string; id: string; __isAsset: true }
   }
-  updateData: 1 | 5 | 10 | 30 | 45 | 60
+  cityInput: string
   msj0: string
   formatMjs: {
     fontSize?: number

package/src/test/parameters.json

@@ -1,14 +1,16 @@
 {
   "parameters": {
-    "padding": "200px 100px 100px 600px",
     "backgroundImage": {
       "id": "earthquakes",
       "filename": "Earthquakes.png",
       "__isAsset": true
     },
-    "cardWidth": "700px",
-    "cardHeight": "600px",
-    "cardGap": "2rem",
+    "cityInput": "Santiago",
+    "topSeparationCard": 200,
+    "leftSeparationCard": 600,
+    "cardWidth": 700,
+    "cardHeight": 600,
+    "cardGap": 2,
     "aqiFormat": {
       "fontSize": 18,
       "fontColor": "#000000",
@@ -31,4 +33,4 @@
       }
     }
   }
-}
+}

package/src/types.d.ts

@@ -1,14 +1,23 @@
+export interface StorageData {
+  item: AqiData
+  date: Date
+}
+
+export interface AqiData {
+  city: string
+  aqi?: number
+  station: string
+}
+
 export interface AirQuality {
-  status: 'ok' | 'error' | number
+  status: Status
   data: Data
 }
 
-export interface StorageData {
-  item: AirQuality
-  date: Date
-}
+type Status = 'ok' | 'error'
 
 export interface Data {
+  status?: Status
   aqi: number
   idx: number
   attributions: Attribution[]

package/src/utils.ts

@@ -5,11 +5,9 @@ const API_RESPONSE_STATUS = {
   ERROR: 'error',
 }
 
-const assingAirQuality = (
-  magnitude: number
-): { color: string; quality: string } => {
-  let color
-  let quality
+const assingAirQuality = (magnitude: number): { color: string; quality: string } => {
+  let color = '#9D9F93'
+  let quality = ''
   if (0 <= magnitude && magnitude <= 50) {
     color = '#009966'
     quality = 'Buena'
@@ -25,7 +23,7 @@ const assingAirQuality = (
   } else if (201 <= magnitude && magnitude <= 300) {
     color = '#660099'
     quality = 'Muy dañina a la salud'
-  } else {
+  } else if (magnitude >= 301) {
     color = '#7E0023'
     quality = 'Arriesgado'
   }