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

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/package.json

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

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 { API_RESPONSE_STATUS, TOKEN } from './utils'
 
 interface Props {
   data: VixonicData
@@ -34,7 +34,6 @@ export const App: React.FunctionComponent<Props> = ({ data, start }) => {
   }
 
   const requestData = async (): Promise<AirQuality | null> => {
-    const TOKEN = "9fa7d8df1a621c9d518a351a13ff9b94093b9dac"
     const URL = `https://api.waqi.info/feed/here/?token=${TOKEN}`
     try {
       const response = await axios.get<AirQuality>(URL)
@@ -51,7 +50,7 @@ export const App: React.FunctionComponent<Props> = ({ data, start }) => {
   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?.date || refetchData(new Date(storageData.date))) {
       data = await requestData()
       await localforage.setItem('aqi', { item: data, date: new Date() })
     } else {

package/src/components/Card.tsx

@@ -27,24 +27,24 @@ export const Card: React.FunctionComponent<Props> = ({ data, format }) => {
       padding: '1rem',
       backgroundColor: color,
       border: '2px solid #000',
-      // gap: format.cardGap || "2rem",
+      // gap: format.cardGap || '2rem',
     }}>
       <div style={{
         textAlign: `${format.aqiFormat?.alignment?.horizontal || 'left'}`,
-        padding: `${format.cardGap || "2rem"}`
+        padding: `${format.cardGap || '2rem'}`
       }}>
         <FormattedText text={String(data?.aqi)} format={format.aqiFormat} />
       </div>
       <div style={{
         textAlign: `${format.stationFormat?.alignment?.horizontal || 'left'}`,
-        padding: `${format.cardGap || "2rem"}`,
+        padding: `${format.cardGap || '2rem'}`,
       }}>
         <FormattedText text={String(`Estación: ${data?.city?.name}`)} format={format.stationFormat} />
       </div>
       <div style={{
         textAlign: `${format.qualityFormat?.alignment?.horizontal || 'left'}`,
-        padding: `${format.cardGap || "2rem"}`,
-        marginTop: "1rem"
+        padding: `${format.cardGap || '2rem'}`,
+        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,39 @@
 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 } }
-}>
+  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 }
+  }
+}>

package/src/utils.ts

@@ -1,31 +1,35 @@
+const TOKEN = '9fa7d8df1a621c9d518a351a13ff9b94093b9dac'
+
 const API_RESPONSE_STATUS = {
-  OK: "ok",
-  ERROR: "error"
+  OK: 'ok',
+  ERROR: 'error',
 }
 
-const assingAirQuality = (magnitude: number): { color: string, quality: string } => {
+const assingAirQuality = (
+  magnitude: number
+): { color: string; quality: string } => {
   let color
   let quality
   if (0 <= magnitude && magnitude <= 50) {
     color = '#009966'
-    quality = "Buena"
+    quality = 'Buena'
   } else if (51 <= magnitude && magnitude <= 100) {
     color = '#FFDE33'
-    quality = "Moderada"
+    quality = 'Moderada'
   } else if (101 <= magnitude && magnitude <= 150) {
     color = '#FF9933'
-    quality = "Dañina a grupos sensibles"
+    quality = 'Dañina a grupos sensibles'
   } else if (151 <= magnitude && magnitude <= 200) {
     color = '#CC0033'
-    quality = "Dañina a la salud"
+    quality = 'Dañina a la salud'
   } else if (201 <= magnitude && magnitude <= 300) {
     color = '#660099'
-    quality = "Muy dañina a la salud"
+    quality = 'Muy dañina a la salud'
   } else {
     color = '#7E0023'
-    quality = "Arriesgado"
+    quality = 'Arriesgado'
   }
   return { color, quality }
 }
 
-export { API_RESPONSE_STATUS, assingAirQuality }
+export { TOKEN, API_RESPONSE_STATUS, assingAirQuality }