@vixoniccom/aqi 0.0.1-dev.0

package/configuration/appeareanceGroup/AppeareanceInputs.ts

@@ -0,0 +1,75 @@
+import {
+  Label,
+  SelectAssetKna,
+  SelectInput,
+  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 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({
+    id: 'cardGap',
+    label: 'Separación entre elementos',
+    required: false,
+    description: 'Separación entre los elementos de la tarjeta',
+  }),
+
+  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 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: 'msj0', label: 'Mensaje sin Datos' }),
+  new TextFormat({ id: 'formatMjs', label: 'Formato Mensaje sin Datos' }),
+]

package/configuration/appeareanceGroup/index.ts

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

package/configuration/index.ts

@@ -0,0 +1,8 @@
+import { Configuration } from '@vixoniccom/modules'
+import { appeareanceGroup } from './appeareanceGroup'
+
+export const configuration = new Configuration({
+  schema: [
+    appeareanceGroup
+  ]
+})

package/configuration.json

@@ -0,0 +1,123 @@
+{
+  "schema": [
+    {
+      "id": "appeareanceGroup",
+      "label": "Apariencia",
+      "type": "group",
+      "items": [
+        {
+          "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",
+          "type": "select-asset-kna-input",
+          "required": false,
+          "extensions": [
+            "jpg",
+            "png"
+          ],
+          "multiple": false
+        },
+        {
+          "type": "label",
+          "label": "Diseño de la tarjeta"
+        },
+        {
+          "id": "cardWidth",
+          "label": "Ancho",
+          "type": "text-input",
+          "description": "Ancho de la tarjeta",
+          "required": false
+        },
+        {
+          "id": "cardHeight",
+          "label": "Alto",
+          "type": "text-input",
+          "description": "Altura de la tarjeta",
+          "required": false
+        },
+        {
+          "id": "cardGap",
+          "label": "Separación entre elementos",
+          "type": "text-input",
+          "description": "Separación entre los elementos de la tarjeta",
+          "required": false
+        },
+        {
+          "type": "label",
+          "label": "Textos de la tarjeta"
+        },
+        {
+          "id": "aqiFormat",
+          "label": "Formato del índice de calidad del aire",
+          "type": "text-format"
+        },
+        {
+          "id": "stationFormat",
+          "label": "Formato de estación que realizó la medición",
+          "type": "text-format"
+        },
+        {
+          "id": "qualityFormat",
+          "label": "Formato del mensaje sobre la calidad del aire",
+          "type": "text-format"
+        },
+        {
+          "type": "label",
+          "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": "msj0",
+          "label": "Mensaje sin Datos",
+          "type": "text-input"
+        },
+        {
+          "id": "formatMjs",
+          "label": "Formato Mensaje sin Datos",
+          "type": "text-format"
+        }
+      ]
+    }
+  ]
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@vixoniccom/aqi",
+  "alias": "Air-Quality-Index",
+  "description": "Muestra información sobre la calidad del aire en una ubicación específica",
+  "color": "#3395FF",
+  "license": "ISC",
+  "tags": [],
+  "author": {
+    "name": "Daniel Alvayay"
+  },
+  "version": "0.0.1-dev.0",
+  "scripts": {
+    "prepublishOnly": "vixonic-module-packager --mode=build",
+    "watch": "vixonic-module-packager --mode=watch",
+    "run": "vixonic-module-packager --mode=run",
+    "configuration": "vixonic-module-packager --mode generate-configuration",
+    "configuration:validate": "vixonic-module-packager --mode validate-configuration",
+    "release": "standard-version",
+    "prerelease-beta": "standard-version --prerelease beta",
+    "prerelease-dev": "standard-version --prerelease dev"
+  },
+  "dependencies": {
+    "axios": "^0.21.1",
+    "localforage": "^1.10.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
+  },
+  "devDependencies": {
+    "@types/react": "^16.14.14",
+    "@types/react-dom": "^16.9.14",
+    "@vixoniccom/module-packager": "^2.6.0",
+    "@vixoniccom/modules": "^2.16.0",
+    "standard-version": "^9.3.1"
+  }
+}

package/src/App.tsx

@@ -0,0 +1,114 @@
+import axios from 'axios'
+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'
+
+interface Props {
+  data: VixonicData
+  start: boolean
+}
+
+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 refetchData = (referenceDate: Date): boolean => {
+    const now = new Date()
+
+    const sameYear = referenceDate.getFullYear() === now.getFullYear()
+    const sameMonth = referenceDate.getMonth() === now.getMonth()
+    const sameDay = referenceDate.getDate() === now.getDate()
+
+    if (sameYear && sameMonth && sameDay) {
+      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}`
+    try {
+      const response = await axios.get<AirQuality>(URL)
+      if (response?.status === 200) {
+        return response.data
+      }
+      return null
+    } catch (error) {
+      console.log(error)
+      return null
+    }
+  }
+
+  const getData = async () => {
+    const storageData: StorageData | null = await localforage.getItem('aqi')
+    let data
+    if (!storageData?.item || refetchData(storageData?.date ?? new Date(0))) {
+      data = await requestData()
+      await localforage.setItem('aqi', { item: data, date: new Date() })
+    } else {
+      data = storageData.item
+    }
+    setFormattedData(data)
+  }
+
+  useEffect(() => {
+    if (!start) return
+    getData()
+    const interval = setInterval(() => {
+      getData()
+    }, updateTime)
+    return () => clearInterval(interval)
+  }, [start, updateTime])
+
+  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} />
+
+          <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} />
+          <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>
+  )
+}

package/src/components/Card.tsx

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

package/src/components/FontLoader.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+interface Props {
+  paths: Array<string>
+  parameters: any
+  downloadsPath: string
+}
+
+export const FontLoader: React.FunctionComponent<Props> = ({ paths, parameters, downloadsPath }) => {
+  const _getValueByPath = (path: any, obj: any): any => {
+    let pathsArray = path.split('.')
+    let propertyName = pathsArray[0]
+    if (pathsArray.length === 1) return obj[propertyName]
+    else {
+      pathsArray.splice(0, 1)
+      return _getValueByPath(pathsArray.join('.'), obj[propertyName])
+    }
+  }
+
+  const fonts = paths.map((path: any) => {
+    try {
+      let fontParam = _getValueByPath(path, parameters)
+      let font = {
+        family: fontParam.filename.replace('.', '-'),
+        src: `${downloadsPath}/${fontParam.filename}`
+      }
+      return `
+          @font-face {
+            font-family: "${font.family}";
+            src: url("${font.src}");
+          }
+        `
+    } catch (err) {
+      return ''
+    }
+  })
+
+  return (
+    <style>{fonts}</style>
+  )
+}

package/src/components/FormattedText.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+
+const alignments = {
+  center: 'center',
+  left: 'flex-start',
+  right: 'flex-end'
+}
+
+type Aligment = {
+  horizontal: keyof typeof alignments,
+  vertical: keyof typeof alignments
+}
+
+interface Props {
+  format?: any
+  lineHeight?: number
+  maxChar?: number
+  style?: number
+  text: string
+  unit?: string
+  paddingBottom?: string
+  paddingTop?: string
+}
+
+export const FormattedText: React.FunctionComponent<Props> = ({ text, format, maxChar, lineHeight, style, unit, paddingBottom, paddingTop }) => {
+  const trimText = (text: any, maxChar: any) => {
+    const isValid = maxChar && maxChar >= 3
+    if (isValid && (text && text.length > maxChar) || false) {
+      let returnText = text.substring(0, maxChar - 3)
+      returnText.substr(-1, 3)
+      return `${returnText.trim()}...`
+    }
+    return text
+  }
+
+  const checkNested = (obj: any, path: any): any => {
+    let arr = path.split('.')
+    if (arr.length > 0) {
+      if (obj.hasOwnProperty(arr[0])) {
+        if (arr.length > 1) return checkNested(obj[arr[0]], arr.splice(1).join('.'))
+        else return true
+      } else return false
+    }
+  }
+
+  const getHorizontalAlignment = (alignment: Aligment) => {
+    if (alignment) {
+      let hA = alignment.horizontal
+      return alignments.hasOwnProperty(hA) ? alignments[alignment.horizontal] : 'flex-start'
+    }
+    return 'flex-start'
+  }
+
+  const renderText = maxChar ? trimText(text, maxChar) : text
+  let containerStyle = Object.assign({
+    display: 'inline-flex',
+    justifyContent: getHorizontalAlignment(format.alignment)
+  }, style)
+
+  return (
+    <div style={containerStyle}>
+      <span style={{
+        color: format?.fontColor,
+        fontFamily: checkNested(format, 'font.filename') ? `"${format?.font?.filename?.replace('.', '-')}"` : '',
+        fontSize: `${format?.fontSize}${unit}`,
+        textAlign: checkNested(format, 'alignment.horizontal') ? format?.alignment?.horizontal : 'left',
+        lineHeight: lineHeight,
+        paddingBottom: paddingBottom,
+        paddingTop: paddingTop,
+        display: 'inline-flex'
+      }}>{renderText}</span>
+    </div>
+  )
+}
+
+FormattedText.defaultProps = {
+  format: {},
+  lineHeight: 1,
+  unit: 'vh',
+  maxChar: undefined
+}

package/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html style="position: absolute; height:100%; width: 100%; overflow: hidden;">
+<head>
+<title></title>
+<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;">
+	</div>
+</body>
+</html>

package/src/main.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App } from './App';
+
+const { ipcRenderer } = require('electron')
+let start: boolean = false
+
+ipcRenderer.on('preload', (_event: any, data: VixonicData) => {
+  render(data)
+})
+
+ipcRenderer.on('start', (_event: any, data: VixonicData) => {
+  start = true
+  render(data)
+})
+
+ipcRenderer.on('update', (_event: any, data: VixonicData) => {
+  render(data)
+})
+
+ipcRenderer.on('finish', (_event: VixonicData) => {
+  console.log('finish')
+})
+
+function render(data: VixonicData) {
+  ReactDOM.render(React.createElement(App, { data, start }), document.getElementById('root'))
+}

package/src/parameters.d.ts

@@ -0,0 +1,9 @@
+declare type VixonicData = {
+  downloadsPath: string
+  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 } }
+}>

package/src/test/parameters.json

@@ -0,0 +1,34 @@
+{
+  "parameters": {
+    "padding": "200px 100px 100px 600px",
+    "backgroundImage": {
+      "id": "earthquakes",
+      "filename": "Earthquakes.png",
+      "__isAsset": true
+    },
+    "cardWidth": "700px",
+    "cardHeight": "600px",
+    "cardGap": "5rem",
+    "aqiFormat": {
+      "fontSize": 18,
+      "fontColor": "#000000",
+      "alignment": {
+        "horizontal": "center"
+      }
+    },
+    "stationFormat": {
+      "fontSize": 8,
+      "fontColor": "#000000",
+      "alignment": {
+        "horizontal": "center"
+      }
+    },
+    "qualityFormat": {
+      "fontSize": 4,
+      "fontColor": "#000000",
+      "alignment": {
+        "horizontal": "center"
+      }
+    }
+  }
+}