@vixoniccom/menu-daily 0.1.0

package/configuration.json

@@ -0,0 +1,207 @@
+{
+  "schema": [
+    {
+      "type": "group",
+      "id": "data",
+      "label": "Datos",
+      "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,
+          "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",
+          "id": "msj0",
+          "label": "Sin menú",
+          "description": "Mensaje cuando no hay menu."
+        }
+      ]
+    },
+    {
+      "type": "group",
+      "id": "design",
+      "label": "Apariencia",
+      "items": [
+        {
+          "type": "label",
+          "label": "Animación"
+        },
+        {
+          "type": "number-input",
+          "id": "animationDuration",
+          "label": "Duración",
+          "description": "En segundos. Por defecto 15s."      
+        },
+        {
+          "type": "select-input",
+          "id": "animationMode",
+          "label": "Modo",
+          "items": [
+            {
+              "label": "Fundido",
+              "value": "fade"
+            },
+            {
+              "label": "Izquieda-derecha",
+              "value": "slideRight"
+            },
+            {
+              "label": "Derecha-izquierda",
+              "value": "slideLeft"
+            }
+          ],
+          "defaultValue": "fade"
+        },
+        {
+          "type": "label",
+          "label": "Contenedor General"
+        },
+        {
+          "type": "number-input",
+          "id": "containerGridColumns",
+          "label": "Columnas",
+          "range": "[1:99]"
+        },
+        {
+          "type": "number-input",
+          "id": "containerGridColumnsGap",
+          "label": "Separación",
+          "description": "En porcentaje",
+          "range": "[0:100]"
+        },
+        {
+          "type": "number-input",
+          "id": "containerGridRows",
+          "label": "Filas",
+          "range": "[1:99]"
+        },
+        {
+          "type": "number-input",
+          "id": "containerGridRowsGap",
+          "label": "Separación",
+          "description": "En porcentaje",
+          "range": "[0:100]"
+        },
+        {
+          "type": "text-input",
+          "id": "containerGridMargins",
+          "label": "Margenes",
+          "description": "En formato CSS."
+        },
+        {
+          "type": "select-asset-kna-input",
+          "id": "backgroundImage",
+          "label": "Imagen de fondo"
+        },
+        {
+          "type": "label",
+          "label": "Contenedor de comida"
+        },
+        {
+          "type": "number-input",
+          "id": "itemGridRows",
+          "label": "Filas"
+        },
+        {
+          "type": "text-input",
+          "id": "itemGridMargins",
+          "label": "Margenes",
+          "description": "En formato CSS."
+        },
+        {
+          "type": "number-input",
+          "id": "itemAnimationDuration",
+          "label": "Duración de animación",
+          "description": "En segundos. Por defecto calcula automaticamente."      
+        },
+        {
+          "type": "label",
+          "label": "Comida"
+        },
+        {
+          "type": "text-format",
+          "id": "itemTitleTextFormat",
+          "label": "Formato del tíltulo"
+        },
+        {
+          "type": "color-picker",
+          "id": "itemTitleBackgroundColor",
+          "label": "Fondo",
+          "description": "Color de fondo del título"
+        },
+        {
+          "type": "text-format",
+          "id": "itemOptionsTextFormat",
+          "label": "Formato de las opciones"
+        },
+        {
+          "type": "select-input",
+          "id": "itemStyle",
+          "label": "Estilo",
+          "items": [
+            {
+              "label": "Estandard",
+              "value": "standard"
+            },
+            {
+              "label": "Moderno",
+              "value": "modern"
+            },
+            {
+              "label": "Enmarcado",
+              "value": "framed"
+            }
+          ],
+          "defaultValue": "standard"
+        }
+      ]
+    }
+  ]
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@vixoniccom/menu-daily",
+  "alias": "Menú diario",
+  "description": "App que muestra el menú del día.",
+  "color": "#3395FF",
+  "tags": [
+    "menu",
+    "app"
+  ],
+  "author": {
+    "name": ""
+  },
+  "version": "0.1.0",
+  "scripts": {
+    "prepublish": "vixonic-module-packager --mode build",
+    "watch": "vixonic-module-packager --mode watch",
+    "run": "vixonic-module-packager --mode run"
+  },
+  "devDependencies": {
+    "@types/node": "^8.0.14",
+    "@types/react": "^15.0.38",
+    "@types/react-dom": "^15.5.1"
+  },
+  "dependencies": {
+    "animejs": "^2.0.2",
+    "localforage": "^1.5.0",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "xlsx": "^0.10.8"
+  }
+}

package/src/dataLoader.ts

@@ -0,0 +1,168 @@
+import xlsx from 'xlsx'
+import localforage from 'localforage'
+import { logger } from './logger'
+
+const getStoreKey = (id: string) => (`urlrequest-menu:${id}`)
+
+export class DataLoader {
+  onUpdate?: (data: MenuData) => void
+  onError?: (e: Error) => void
+
+  private _url: string | undefined
+  get url (): string | undefined { return this._url }
+
+  private _data: MenuData | undefined
+  get data (): MenuData | undefined { return this._data }
+
+  private _mealType?: string
+  private _pollingInterval: number = 60000
+  private _pollingTimer: number | undefined
+
+  private _req: XMLHttpRequest | undefined
+
+  private _started: boolean = false
+
+  constructor (url?: string, interval?: number, mealType?: string) {
+    this.setup(url, interval, mealType)
+  }
+
+  setup (url?: string, interval: number = 300000, mealType?: string) {
+    if (!url) {
+      this.stop()
+      return
+    }
+
+    this._pollingInterval = interval >= 60000 ? interval : 60000
+    this._mealType = mealType
+    if (this._url !== url) {
+      this.stop()
+      this._url = url
+      // Get cache data
+      if (!this._data) {
+        localforage.getItem<CacheData>(getStoreKey(this._url)).then(
+          (data) => {
+            if (!data || !data.updateTime || !data.menuData) {
+              this.startPolling()
+            } else {
+              logger.log('Got cached data!', data.updateTime)
+              this.onUpdate && this.onUpdate(data.menuData)
+              let timeDiff = Date.now() - data.updateTime
+              if (timeDiff >= this._pollingInterval) {
+                this.startPolling()
+              } else {
+                this.startPollingTimer(this._pollingInterval - timeDiff)
+              }
+            }
+          },
+          (_e) => {
+            this.startPolling()
+          }
+        )
+      } else {
+        this.startPolling()
+      }
+    }
+  }
+
+  private startPolling () {
+    if (this._started) return
+    if (!this._url) return
+    this._started = true
+    this.load()
+  }
+
+  private stop (): void {
+    window.clearTimeout(this._pollingTimer)
+    this._started = false
+    if (this._req) this._req.abort()
+  }
+
+  private load (): void {
+    if (!this._url) return
+
+    this._req = new XMLHttpRequest()
+    this._req.open('GET', this._url, true)
+    this._req.responseType = 'arraybuffer'
+
+    this._req.onload = this.onLoad.bind(this)
+
+    this._req.onerror = (e) => {
+      if (e) {
+        this.onError && this.onError(e as any)
+        this.startPollingTimer(30000)
+      }
+    }
+
+    this._req.send()
+  }
+
+  private onLoad (_ev: Event) {
+    if (!(this._req && this._url)) return
+
+    logger.log('Data loaded', Date.now())
+    let arraybuffer = this._req.response
+
+    /* convert data to binary string */
+    let data = new Uint8Array(arraybuffer)
+    let arr = new Array()
+    for (let i = 0; i !== data.length; ++i) arr[i] = String.fromCharCode(data[i])
+    let bstr = arr.join('')
+
+    /* Call XLSX */
+    let workbook = xlsx.read(bstr, { type: 'binary' })
+    this._pollingTimer = window.setTimeout(() => { this.load() }, this._pollingInterval)
+
+    let menuData = this.parseData(workbook)
+    if (menuData) {
+      this._data = menuData
+      // Save cache
+      localforage.setItem<CacheData>(getStoreKey(this._url), {
+        updateTime: Date.now(),
+        menuData: this._data
+      })
+      // Dispatch update
+      this.onUpdate && this.onUpdate(this._data)
+    }
+  }
+
+  private startPollingTimer (interval?: number) {
+    if (this._pollingTimer) window.clearTimeout(this._pollingInterval)
+    this._pollingTimer = window.setTimeout(() => { this.load() }, interval || this._pollingInterval)
+  }
+
+  private parseData (workbook: xlsx.WorkBook): MenuData | undefined {
+    try {
+      if (this._mealType) workbook.SheetNames.find((name) => name.toUpperCase() === this._mealType!.toUpperCase())
+      let menuData: MenuData = workbook.SheetNames.reduce((menu: MenuData, name) => {
+        let newMenu = {...menu}
+        let dailyMenu = this.parseSheet(workbook.Sheets[name])
+        if (dailyMenu) newMenu[name.toUpperCase()] = dailyMenu
+        return newMenu
+      }, {})
+      logger.log(menuData)
+      return menuData
+    } catch (e) {
+      this.onError && this.onError(e)
+      return undefined
+    }
+  }
+
+  private parseSheet (sheet: xlsx.WorkSheet): MenuByDate | undefined {
+    if (!sheet) return undefined
+    let meals: MenuByDate | {} = xlsx.utils.sheet_to_json(sheet, {raw: true}).reduce((menu: MenuByDate, row: any) => {
+      let newMenu = {...menu}
+      let keys = Object.keys(row)
+      let date: {d: number, m: number, y: number} = xlsx.SSF.parse_date_code(row[keys[0]] as any)
+      if (date.d && date.m && date.y) {
+        newMenu[new Date(date.y,date.m - 1,date.d).getTime()] = keys.slice(1).map((key) => {
+          return {
+            type: key,
+            options: row[key] && row[key].split(';') || []
+          } as Meal
+        })
+      }
+      return newMenu
+    }, {})
+    return meals
+  }
+}

package/src/global.d.ts

@@ -0,0 +1,59 @@
+declare type VixonicData = {
+  downloadsPath: string
+  parameters: VixonicParameters
+}
+
+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 MenuData = {
+  [type: string]: MenuByDate
+}
+
+declare type MenuByDate = {
+  [date: number]: Menu
+}
+
+declare type Menu = Meal[]
+
+declare type Meal = {
+  type: string
+  options: string[]
+}

package/src/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title></title>
+	<meta charset="utf-8">
+	<style>
+		@font-face {
+			font-family: 'FrutigerLTStdBoldCn';
+			src: url('./static/fonts/FrutigerLTStdBoldCn.ttf');
+		}
+		
+		@font-face {
+			font-family: 'FrutigerLTStdCn';
+			src: url('./static/fonts/FrutigerLTStdCn.otf');
+		}
+		
+		@font-face {
+			font-family: 'FrutigerLTStdBlackCn';
+			src: url('./static/fonts/FrutigerLTStdBlackCn.ttf');
+		}
+		
+		@font-face {
+			font-family: 'FrutigerLTStdLightCn';
+			src: url('./static/fonts/FrutigerLTStdLightCn.ttf');
+		}
+	</style>
+</head>
+<body>
+	<div id="root" style="position: absolute; top: 0; left: 0;
+	bottom: 0; right: 0; display: flex; justify-content: center;
+	align-items: center; overflow: hidden;"></div>
+</body>
+</html>

package/src/logger.ts

@@ -0,0 +1,11 @@
+export const LOGGER_PROPERTY = 'vxAppLogger'
+class Logger {
+  log (message: any, ...optionalParams: any[]) {
+    if ((window as any)[LOGGER_PROPERTY] === true) {
+      if (optionalParams && optionalParams.length > 0) console.log(message, optionalParams)
+      else console.log(message)
+    }
+  }
+}
+
+export let logger = new Logger()

package/src/main.ts

@@ -0,0 +1,47 @@
+'use strict'
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import App, { AppProps } from './scenes/App'
+import { logger } from './logger'
+
+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)
+  vixonicData = _data
+  doRender()
+})
+
+ipcRenderer.on('start', (_event: any, _data: VixonicData) => {
+  // Start command
+  logger.log('Start', _data)
+  vixonicData = _data
+  start = true
+  doRender()
+})
+
+ipcRenderer.on('update', (_event: any, _data: VixonicData) => {
+  // Update command
+  logger.log('Update', _data)
+  vixonicData = _data
+  doRender()
+})
+
+ipcRenderer.on('finish', (_event: any) => {
+  // Finish command.
+})
+
+function doRender () {
+  if (!vixonicData) return
+  ReactDOM.render(React.createElement<AppProps>(App as any, { start, vixonicData }), document.getElementById('root'))
+}

package/src/scenes/App.tsx

@@ -0,0 +1,103 @@
+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'
+import FormattedText from './components/FormattedText'
+
+export type AppProps = {
+  start: boolean,
+  vixonicData: VixonicData
+}
+
+export type AppState = {
+  loading: boolean
+  updateTime?: number
+  data?: Menu
+}
+
+class App extends React.Component<AppProps, AppState> {
+  private readonly dataLoader: DataLoader
+
+  constructor (props: AppProps) {
+    super(props)
+    let { parameters } = props.vixonicData
+    this.state = {
+      loading: true
+    }
+    this.dataLoader = new DataLoader(parameters.url, parameters.pollingInterval)
+  }
+
+  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()]})
+    }
+
+    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)
+    }
+  }
+
+  render () {
+    const { parameters, downloadsPath } = this.props.vixonicData
+    let cycle = parameters.animationDuration && parameters.animationDuration * 1000 || 15000
+    return <div style={{
+      position: 'absolute',
+      top: 0, right: 0, bottom: 0, left: 0,
+      backgroundImage: parameters.backgroundImage &&
+      `url("${downloadsPath + '/' + parameters.backgroundImage.filename}")` || undefined,
+      backgroundSize: '100% 100%',
+      padding: parameters.containerGridMargins
+    }}>
+    {
+      this.state.loading || !this.state.data || !this.state.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}
+            defaults={{
+              alignment: 'center',
+              fontColor: 'black',
+              fontSize: 10
+            }}
+            style={{width: '100%'}}
+            format={parameters.itemOptionsTextFormat || {}}
+            unit='%'/>
+        </div> :
+        <Grid
+        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} />))}
+        animation={{
+          mode: parameters.animationMode || 'fade',
+          duration: cycle
+        }} layout={{
+          alignment: {
+            h: 'start',
+            v: 'center'
+          },
+          columns: parameters.containerGridColumns || 1,
+          columnsGap: parameters.containerGridColumnsGap || 0,
+          rows: parameters.containerGridRows || 1,
+          rowsGap: parameters.containerGridRowsGap || 0
+        }}/>
+    }
+    <FontLoader downloadPath={downloadsPath} fonts={fontParser(parameters)}/>
+  </div>
+  }
+}
+
+export default App