@vixoniccom/aqi 0.0.1-dev.4 → 0.0.1-dev.6

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/appeareanceGroup/index.ts

@@ -1,8 +1,8 @@
-import { Group } from "@vixoniccom/modules";
-import { appeareanceInputs } from "./AppeareanceInputs";
+import { Group } from '@vixoniccom/modules'
+import { appeareanceInputs } from './AppeareanceInputs'
 
 export const appeareanceGroup = new Group({
   id: 'appeareanceGroup',
   label: 'Apariencia',
-  items: [...appeareanceInputs]
-})
+  items: [...appeareanceInputs],
+})

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.4",
+  "version": "0.0.1-dev.6",
   "scripts": {
     "prepublishOnly": "vixonic-module-packager --mode=build",
     "watch": "vixonic-module-packager --mode=watch",
@@ -28,8 +28,8 @@
   "devDependencies": {
     "@types/react": "^17.0.35",
     "@types/react-dom": "^17.0.11",
-    "@vixoniccom/module-packager": "^2.10.0",
-    "@vixoniccom/modules": "^2.19.0",
+    "@vixoniccom/module-packager": "^2.6.0",
+    "@vixoniccom/modules": "^2.16.0",
     "standard-version": "^9.3.1"
   }
 }

package/src/App.tsx

@@ -1,11 +1,11 @@
 import axios from 'axios'
+import localforage from 'localforage'
 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 { API_RESPONSE_STATUS } from './utils'
-import localforage from 'localforage'
+import { AirQuality, AqiData, StorageData } from './types'
+import { API_RESPONSE_STATUS, TOKEN } from './utils'
 
 interface Props {
   data: VixonicData
@@ -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,13 +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 TOKEN = "9fa7d8df1a621c9d518a351a13ff9b94093b9dac"
-    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) {
@@ -43,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 || refetchData(storageData?.date ?? new Date(0))) {
+    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(() => {
@@ -67,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,34 +17,36 @@ 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"}`,
-        marginTop: "1rem"
+        padding: `${format.cardGap || 2}rem`,
+        marginTop: '1rem'
       }}>
         <FormattedText text={data?.aqi ? quality : ''} format={format.qualityFormat} />
       </div>

package/src/components/FontLoader.tsx

@@ -26,8 +26,8 @@ export const FontLoader: React.FunctionComponent<Props> = ({ paths, parameters,
       }
       return `
           @font-face {
-            font-family: "${font.family}";
-            src: url("${font.src}");
+            font-family: '${font.family}';
+            src: url('${font.src}');
           }
         `
     } catch (err) {

package/src/components/FormattedText.tsx

@@ -61,7 +61,7 @@ export const FormattedText: React.FunctionComponent<Props> = ({ text, format, ma
     <div style={containerStyle}>
       <span style={{
         color: format?.fontColor,
-        fontFamily: checkNested(format, 'font.filename') ? `"${format?.font?.filename?.replace('.', '-')}"` : '',
+        fontFamily: checkNested(format, 'font.filename') ? `'${format?.font?.filename?.replace('.', '-')}'` : '',
         fontSize: `${format?.fontSize}${unit}`,
         textAlign: checkNested(format, 'alignment.horizontal') ? format?.alignment?.horizontal : 'left',
         lineHeight: lineHeight,

package/src/index.html

@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html style="position: absolute; height:100%; width: 100%; overflow: hidden;">
+<html style='position: absolute; height:100%; width: 100%; overflow: hidden;'>
 <head>
 <title></title>
-<meta charset="utf-8">
+<meta charset='utf-8'>
 </head>
-<body style="margin:0; overflow: hidden;">
-	<div id="root" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;">
+<body style='margin:0; overflow: hidden;'>
+	<div id='root' style='position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;'>
 	</div>
 </body>
 </html>

package/src/parameters.d.ts

@@ -1,9 +1,40 @@
 declare type VixonicData = {
   downloadsPath: string
-  services: { [key: string]: { data?: any, updatedAt?: number } }
+  services: { [key: string]: { data?: any; updatedAt?: number } }
   parameters: VixonicParameters
 }
 
 declare type VixonicParameters = Partial<{
-  padding: string, backgroundImage: {id?: string, filename?: string, extension?: string}, cardWidth: string, cardHeight: string, cardGap: string, aqiFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, stationFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, qualityFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, updateData: 1 | 5 | 10 | 30 | 45 | 60, msj0: string, formatMjs: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }
-}>
+  backgroundImage: { id?: string; filename?: string; extension?: string }
+  topSeparationCard: number
+  leftSeparationCard: number
+  cardWidth: number
+  cardHeight: number
+  cardGap: number
+  aqiFormat: {
+    fontSize?: number
+    fontColor?: string
+    alignment?: { horizontal?: 'left' | 'right' | 'center' }
+    font?: { filename: string; id: string; __isAsset: true }
+  }
+  stationFormat: {
+    fontSize?: number
+    fontColor?: string
+    alignment?: { horizontal?: 'left' | 'right' | 'center' }
+    font?: { filename: string; id: string; __isAsset: true }
+  }
+  qualityFormat: {
+    fontSize?: number
+    fontColor?: string
+    alignment?: { horizontal?: 'left' | 'right' | 'center' }
+    font?: { filename: string; id: string; __isAsset: true }
+  }
+  cityInput: string
+  msj0: string
+  formatMjs: {
+    fontSize?: number
+    fontColor?: string
+    alignment?: { horizontal?: 'left' | 'right' | 'center' }
+    font?: { filename: string; id: string; __isAsset: true }
+  }
+}>

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[]