@vixoniccom/menu-daily 0.1.2-dev.1 → 0.2.0-dev.0

package/configuration/appearanceGroup/AppearanceInputs.ts

@@ -0,0 +1,94 @@
+import { ColorPicker, Label, NumberInput, NumberRangeValue, SelectAssetKna, SelectInput, TextFormat, TextInput } from '@vixoniccom/modules'
+
+export const appearanceInputs = [
+  new Label({ label: 'Animación' }),
+  new NumberInput({
+    id: 'animationDuration',
+    label: 'Duración',
+    description: 'En segundos. Por defecto 15s.',
+  }),
+  new SelectInput({
+    id: 'animationMode',
+    label: 'Modo',
+    items: [
+      { label: 'Fundido', value: 'fade' },
+      { label: 'Izquieda-derecha', value: 'slideRight' },
+      { label: 'Derecha-izquierda', value: 'slideLeft' },
+    ],
+    defaultValue: 'fade',
+  }),
+
+  new Label({ label: 'Contenedor General' }),
+  new NumberInput({
+    id: 'containerGridColumns',
+    label: 'Columnas',
+    range: new NumberRangeValue(1, 99),
+  }),
+  new NumberInput({
+    id: 'containerGridColumnsGap',
+    label: 'Separación',
+    description: 'En porcentaje',
+    range: new NumberRangeValue(0, 100),
+  }),
+  new NumberInput({
+    id: 'containerGridRows',
+    label: 'Filas',
+    range: new NumberRangeValue(1, 99),
+  }),
+  new NumberInput({
+    id: 'containerGridRowsGap',
+    label: 'Separación',
+    description: 'En porcentaje',
+    range: new NumberRangeValue(0, 100),
+  }),
+  new TextInput({
+    id: 'containerGridMargins',
+    label: 'Margenes',
+    description: 'En formato CSS.',
+  }),
+  new SelectAssetKna({
+    id: 'backgroundImage',
+    label: 'Imagen de fondo',
+  }),
+
+  new Label({ label: 'Contenedor de comida' }),
+  new NumberInput({
+    id: 'itemGridRows',
+    label: 'Filas',
+  }),
+  new TextInput({
+    id: 'itemGridMargins',
+    label: 'Margenes',
+    description: 'En formato CSS.',
+  }),
+  new NumberInput({
+    id: 'itemAnimationDuration',
+    label: 'Duración de animación',
+    description: 'En segundos. Por defecto calcula automaticamente.',
+  }),
+
+  new Label({ label: 'Comida' }),
+  new TextFormat({
+    id: 'itemTitleTextFormat',
+    label: 'Formato del título',
+  }),
+  new ColorPicker({
+    id: 'itemTitleBackgroundColor',
+    label: 'Fondo',
+    description: 'Color de fondo del título',
+  }),
+  new TextFormat({
+    id: 'itemOptionsTextFormat',
+    label: 'Formato de las opciones',
+  }),
+  new SelectInput({
+    id: 'itemStyle',
+    label: 'Estilo',
+    items: [
+      { label: 'Estandard', value: 'standard' },
+      { label: 'Moderno', value: 'modern' },
+      { label: 'Enmarcado', value: 'framed' },
+    ],
+    defaultValue: 'standard',
+  }),
+]

package/configuration/appearanceGroup/index.ts

@@ -0,0 +1,8 @@
+import { Group } from '@vixoniccom/modules'
+import { appearanceInputs } from './AppearanceInputs'
+
+export const appearanceGroup = new Group({
+  id: 'appearanceGroup',
+  label: 'Apariencia',
+  items: [...appearanceInputs],
+})

package/configuration/dataGroup/DataInputs.ts

@@ -0,0 +1,21 @@
+import { ServiceInput, TextInput } from '@vixoniccom/modules'
+
+export const dataInputs = [
+  new ServiceInput({
+    id: 'menuService',
+    label: 'Hoja de cálculo de Google Sheets con el menú',
+    serviceType: 'MenuAppService',
+    required: true,
+  }),
+  new TextInput({
+    id: 'mealType',
+    label: 'Tipo de comida',
+    description: 'El nombre de la pestaña a mostrar (No requerido)',
+    required: false
+  }),
+  new TextInput({
+    id: 'msj0',
+    label: 'Sin menú',
+    description: 'Mensaje cuando no hay menú',
+  }),
+]

package/configuration/dataGroup/index.ts

@@ -0,0 +1,8 @@
+import { Group } from '@vixoniccom/modules'
+import { dataInputs } from './DataInputs'
+
+export const dataGroup = new Group({
+  id: 'dataGroup',
+  label: 'Datos',
+  items: [...dataInputs],
+})

package/configuration/index.ts

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

package/configuration.json

@@ -1,88 +1,51 @@
 {
   "schema": [
     {
-      "type": "group",
-      "id": "data",
+      "id": "dataGroup",
       "label": "Datos",
+      "type": "group",
       "items": [
         {
-          "type": "text-input",
-          "id": "url",
-          "label": "Enlace",
-          "description": "Dirección donde se encuentran los datos en formato excel.",
-          "required": true
-        },
-        {
-          "type": "select-input",
-          "id": "pollingInterval",
-          "label": "Actualización",
-          "description": "Frecuencia de consulta de los datos.",
-          "items": [
-            {
-              "label": "5 minutos",
-              "value": 300000
-            },
-            {
-              "label": "15 minutos",
-              "value": 900000
-            },
-            {
-              "label": "30 minutos",
-              "value": 1.8e+6
-            },
-            {
-              "label": "1 hora",
-              "value": 3.6e+6
-            },
-            {
-              "label": "6 horas",
-              "value": 2.16e+7
-            },
-            {
-              "label": "12 horas",
-              "value": 4.32e+7
-            },
-            {
-              "label": "Diaria",
-              "value": 8.64e+7
-            }
-          ],
-          "defaultValue": 900000,
+          "id": "menuService",
+          "label": "Hoja de cálculo de Google Sheets con el menú",
+          "type": "service-input",
+          "serviceType": "MenuAppService",
           "required": true
         },
         {
-          "type": "text-input",
           "id": "mealType",
           "label": "Tipo de comida",
-          "description": "El nombre de la pestaña en el excel. No requerido."
+          "type": "text-input",
+          "description": "El nombre de la pestaña a mostrar (No requerido)",
+          "required": false
         },
         {
-          "type": "text-input",
           "id": "msj0",
           "label": "Sin menú",
-          "description": "Mensaje cuando no hay menu."
+          "type": "text-input",
+          "description": "Mensaje cuando no hay menú"
         }
       ]
     },
     {
-      "type": "group",
-      "id": "design",
+      "id": "appearanceGroup",
       "label": "Apariencia",
+      "type": "group",
       "items": [
         {
           "type": "label",
           "label": "Animación"
         },
         {
-          "type": "number-input",
           "id": "animationDuration",
           "label": "Duración",
-          "description": "En segundos. Por defecto 15s."      
+          "type": "number-input",
+          "description": "En segundos. Por defecto 15s."
         },
         {
-          "type": "select-input",
           "id": "animationMode",
           "label": "Modo",
+          "type": "select-input",
           "items": [
             {
               "label": "Fundido",
@@ -104,87 +67,89 @@
           "label": "Contenedor General"
         },
         {
-          "type": "number-input",
           "id": "containerGridColumns",
           "label": "Columnas",
-          "range": "[1:99]"
+          "type": "number-input",
+          "range": "[1:99:]"
         },
         {
-          "type": "number-input",
           "id": "containerGridColumnsGap",
           "label": "Separación",
-          "description": "En porcentaje",
-          "range": "[0:100]"
+          "type": "number-input",
+          "range": "[0:100:]",
+          "description": "En porcentaje"
         },
         {
-          "type": "number-input",
           "id": "containerGridRows",
           "label": "Filas",
-          "range": "[1:99]"
+          "type": "number-input",
+          "range": "[1:99:]"
         },
         {
-          "type": "number-input",
           "id": "containerGridRowsGap",
           "label": "Separación",
-          "description": "En porcentaje",
-          "range": "[0:100]"
+          "type": "number-input",
+          "range": "[0:100:]",
+          "description": "En porcentaje"
         },
         {
-          "type": "text-input",
           "id": "containerGridMargins",
           "label": "Margenes",
+          "type": "text-input",
           "description": "En formato CSS."
         },
         {
-          "type": "select-asset-kna-input",
           "id": "backgroundImage",
-          "label": "Imagen de fondo"
+          "label": "Imagen de fondo",
+          "type": "select-asset-kna-input",
+          "multiple": false
         },
         {
           "type": "label",
           "label": "Contenedor de comida"
         },
         {
-          "type": "number-input",
           "id": "itemGridRows",
-          "label": "Filas"
+          "label": "Filas",
+          "type": "number-input"
         },
         {
-          "type": "text-input",
           "id": "itemGridMargins",
           "label": "Margenes",
+          "type": "text-input",
           "description": "En formato CSS."
         },
         {
-          "type": "number-input",
           "id": "itemAnimationDuration",
           "label": "Duración de animación",
-          "description": "En segundos. Por defecto calcula automaticamente."      
+          "type": "number-input",
+          "description": "En segundos. Por defecto calcula automaticamente."
         },
         {
           "type": "label",
           "label": "Comida"
         },
         {
-          "type": "text-format",
           "id": "itemTitleTextFormat",
-          "label": "Formato del título"
+          "label": "Formato del título",
+          "type": "text-format"
         },
         {
-          "type": "color-picker",
           "id": "itemTitleBackgroundColor",
           "label": "Fondo",
-          "description": "Color de fondo del título"
+          "type": "color-picker",
+          "description": "Color de fondo del título",
+          "output": "auto"
         },
         {
-          "type": "text-format",
           "id": "itemOptionsTextFormat",
-          "label": "Formato de las opciones"
+          "label": "Formato de las opciones",
+          "type": "text-format"
         },
         {
-          "type": "select-input",
           "id": "itemStyle",
           "label": "Estilo",
+          "type": "select-input",
           "items": [
             {
               "label": "Estandard",

package/package.json

@@ -10,27 +10,28 @@
   "author": {
     "name": ""
   },
-  "version": "0.1.2-dev.1",
+  "version": "0.2.0-dev.0",
   "scripts": {
     "prepublish": "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"
   },
-  "devDependencies": {
-    "standard-version": "^9.5.0",
-    "@types/node": "^14.18.63",
-    "@types/react": "^17.0.35",
-    "@types/react-dom": "^17.0.11",
-    "@vixoniccom/module-packager": "^2.10.0"
-  },
   "dependencies": {
     "animejs": "^3.2.2",
-    "localforage": "^1.5.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "xlsx": "^0.17.5"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/animejs": "^3.1.13",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@vixoniccom/module-packager": "^2.13.0",
+    "@vixoniccom/modules": "^2.25.0-dev.23",
+    "standard-version": "^9.5.0"
   }
 }

package/src/global.d.ts

@@ -1,59 +1,23 @@
-declare type VixonicData = {
-  downloadsPath: string
-  parameters: VixonicParameters
+declare type VixonicTextFormat = {
+  fontSize?: number
+  fontColor?: string
+  alignment?: { horizontal?: 'left' | 'right' | 'center' }
+  font?: { filename: string; id: string; __isAsset: true }
 }
 
-declare type VixonicFile = Partial<{
-  filename: string
-}>
-
-declare type VixonicTextFormat = Partial<{
-  fontSize: number,
-  fontColor: string,
-  alignment: {
-    horizontal: 'left' | 'right' | 'center'
-  }
-  font: VixonicFile
-}>
-
-declare type VixonicParameters = Partial<{
-  url: string
-  pollingInterval: number
-  mealType: string
-  animationDuration: number
-  animationMode: 'fade' | 'slideLeft' | 'slideRight'
-  containerGridColumns: number
-  containerGridColumnsGap: number
-  containerGridRows: number
-  containerGridRowsGap: number
-  containerGridMargins: number
-  backgroundImage: VixonicFile
-  msj0: string
-  itemStyle: 'standard' | 'modern' | 'framed'
-  itemTitleTextFormat: VixonicTextFormat
-  itemTitleBackgroundColor: string
-  itemAnimationDuration: number
-  itemGridMargins: string
-  itemGridRows: number
-  itemOptionsTextFormat: VixonicTextFormat
-}>
-
-declare type CacheData = {
-  updateTime: number
-  menuData: MenuData
+declare type Meal = {
+  type: string
+  options: string[]
 }
 
-declare type MenuData = {
-  [type: string]: MenuByDate
-}
+declare type Menu = Meal[]
 
-declare type MenuByDate = {
-  [date: number]: Menu
+declare type MenuDay = {
+  date: number
+  meals: Meal[]
 }
 
-declare type Menu = Meal[]
-
-declare type Meal = {
-  type: string
-  options: string[]
+declare type MenuAppServiceData = {
+  menus: { [mealType: string]: MenuDay[] }
+  errors?: string
 }

package/src/main.ts

@@ -10,11 +10,6 @@ let { ipcRenderer } = require('electron')
 let start = false
 let vixonicData: VixonicData
 
-type VixonicData = {
-  downloadsPath: string,
-  parameters: VixonicParameters
-}
-
 ipcRenderer.on('preload', (_event: any, _data: VixonicData) => {
   // Preload command
   logger.log('Preload', _data)

package/src/parameters.d.ts

@@ -0,0 +1,31 @@
+declare type VixonicData = {
+  downloadsPath: string
+  services: { [key: string]: { data?: any; updatedAt?: number } }
+  parameters: VixonicParameters
+}
+
+declare type VixonicParameters = Partial<{
+  menuService: { id: string }
+  mealType: string
+  msj0: string
+  animationDuration: number
+  animationMode: 'fade' | 'slideRight' | 'slideLeft'
+  containerGridColumns: number
+  containerGridColumnsGap: number
+  containerGridRows: number
+  containerGridRowsGap: number
+  containerGridMargins: string
+  backgroundImage: { id?: string; filename?: string; extension?: string }
+  itemGridRows: number
+  itemGridMargins: string
+  itemAnimationDuration: number
+  itemTitleTextFormat: { fontSize?: number; fontColor?: string; alignment?: { horizontal?: 'left' | 'right' | 'center' }; font?: { filename: string; id: string; __isAsset: true } }
+  itemTitleBackgroundColor: string
+  itemOptionsTextFormat: {
+    fontSize?: number
+    fontColor?: string
+    alignment?: { horizontal?: 'left' | 'right' | 'center' }
+    font?: { filename: string; id: string; __isAsset: true }
+  }
+  itemStyle: 'standard' | 'modern' | 'framed'
+}>

package/src/scenes/App.tsx

@@ -1,6 +1,4 @@
 import * as React from 'react'
-
-import { DataLoader } from '../dataLoader'
 import Grid from './components/Grid'
 import MealContainer from './components/MealContainer'
 import FontLoader, { fontParser } from './components/FontLoader'
@@ -11,48 +9,38 @@ export type AppProps = {
   vixonicData: VixonicData
 }
 
-export type AppState = {
-  loading: boolean
-  updateTime?: number
+type TodayMenu = {
+  status: 'loading' | 'ready'
   data?: Menu
+  error?: string
 }
 
-class App extends React.Component<AppProps, AppState> {
-  private readonly dataLoader: DataLoader
+const resolveTodayMenu = (vixonicData: VixonicData): TodayMenu => {
+  const { parameters, services } = vixonicData
+  const serviceId = parameters.menuService?.id
+  const serviceData = serviceId ? (services?.[serviceId]?.data as MenuAppServiceData | undefined) : undefined
 
-  constructor (props: AppProps) {
-    super(props)
-    let { parameters } = props.vixonicData
-    this.state = {
-      loading: true
-    }
-    this.dataLoader = new DataLoader(parameters.url, parameters.pollingInterval)
-  }
+  if (!serviceData) return { status: 'loading' }
+  if (serviceData.errors) return { status: 'ready', error: serviceData.errors }
 
-  componentDidMount () {
-    this.dataLoader.onUpdate = (data) => {
-      const { mealType } = this.props.vixonicData.parameters
-      const today = new Date()
-      today.setHours(0,0,0,0)
-      const menu = mealType && data[mealType.toUpperCase()] || data[Object.keys(data)[0]]
-      this.setState({loading: false, data: menu[today.getTime()]})
-    }
+  const menus = serviceData.menus || {}
+  const sheet = (parameters.mealType && menus[parameters.mealType.toUpperCase()]) || menus[Object.keys(menus)[0]]
+  if (!sheet) return { status: 'ready' }
 
-    this.dataLoader.onError = (e) => {
-      console.error(e)
-    }
-  }
-
-  componentWillReceiveProps (nextProps: AppProps) {
-    if (this.props.vixonicData.parameters.url !== nextProps.vixonicData.parameters.url) {
-      let { parameters } = nextProps.vixonicData
-      parameters.url && this.dataLoader.setup(parameters.url, parameters.pollingInterval)
-    }
-  }
+  const now = new Date()
+  const todayKey = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())
+  const day = sheet.find((d) => d.date === todayKey)
+  const meals = day?.meals.filter((meal) => meal.options.length > 0)
+  return { status: 'ready', data: meals }
+}
 
+class App extends React.Component<AppProps> {
   render () {
     const { parameters, downloadsPath } = this.props.vixonicData
     let cycle = parameters.animationDuration && parameters.animationDuration * 1000 || 15000
+    const { status, data, error } = resolveTodayMenu(this.props.vixonicData)
+    const placeholder = error || (status === 'loading' ? 'Cargando...' : parameters.msj0 || 'No hay menu.')
+
     return <div style={{
       position: 'absolute',
       top: 0, right: 0, bottom: 0, left: 0,
@@ -62,11 +50,10 @@ class App extends React.Component<AppProps, AppState> {
       padding: parameters.containerGridMargins
     }}>
     {
-      this.state.loading || !this.state.data || !this.state.data[0] ?
+      !data?.[0] ?
         <div style={{width: '100%', height: '100%', display: 'flex', fontSize: `${100 / (parameters.itemGridRows || 1)}vmin`, justifyContent: 'center', alignItems: 'center'}}>
           <FormattedText
-            text={this.state.loading ? 'Cargando...' : parameters.msj0 || 'No hay menu.'}
-            downloadsPath={downloadsPath}
+            text={placeholder}
             defaults={{
               alignment: 'center',
               fontColor: 'black',
@@ -80,7 +67,7 @@ class App extends React.Component<AppProps, AppState> {
         id='container'
         animate={this.props.start}
         style={{width: '100%', height: '100%'}}
-        items={this.state.data.map((meal) => (<MealContainer data={meal} interval={cycle} vixonicData={this.props.vixonicData} />))}
+        items={data.map((meal) => (<MealContainer key={meal.type} data={meal} interval={cycle} vixonicData={this.props.vixonicData} />))}
         animation={{
           mode: parameters.animationMode || 'fade',
           duration: cycle

package/src/scenes/components/FontLoader.tsx

@@ -15,7 +15,7 @@ class FontLoader extends React.Component<Props> {
             src: url("${parseFontUrl(this.props.downloadPath, font)}");
           }
         `
-      } catch (err) {
+      } catch {
         return ''
       }
     })
@@ -24,21 +24,8 @@ class FontLoader extends React.Component<Props> {
 }
 
 export function fontParser (parameters: VixonicParameters): string[] {
-  let initArr: string[] = []
-  return Object.keys(parameters).reduce(
-    (fonts, param) => {
-      switch (param) {
-        case 'itemTitleTextFormat':
-        case 'itemOptionsTextFormat':
-          if (parameters[param] && parameters[param]!.font && parameters[param]!.font!.filename) {
-            fonts.push((parameters[param]!.font!.filename || ''))
-            return fonts
-          } else return fonts
-        default:
-          return fonts
-      }
-    }, initArr
-  )
+  const keys = ['itemTitleTextFormat', 'itemOptionsTextFormat'] as const
+  return keys.map(key => parameters[key]?.font?.filename).filter((filename): filename is string => !!filename)
 }
 
 export const parseFontName = (filename: string): string => {