@vixoniccom/menu-daily 0.2.0-dev.1 → 0.2.0-dev.3

package/configuration/dataGroup/DataInputs.ts

@@ -1,11 +1,28 @@
-import { ServiceInput, TextInput } from '@vixoniccom/modules'
+import { SelectInput, ServiceInput, TextInput } from '@vixoniccom/modules'
 
 export const dataInputs = [
+  new SelectInput({
+    id: 'menuServiceProvider',
+    label: 'Origen de los datos',
+    items: [
+      { value: 'google', label: 'Google Sheets' },
+      { value: 'excel', label: 'Microsoft Excel' },
+    ],
+    defaultValue: 'google',
+  }),
   new ServiceInput({
     id: 'menuService',
     label: 'Hoja de cálculo de Google Sheets con el menú',
     serviceType: 'MenuAppService',
     required: true,
+    show: `{{menuServiceProvider}} !== 'excel'`,
+  }),
+  new ServiceInput({
+    id: 'excelMenuService',
+    label: 'Libro de Excel de Microsoft con el menú',
+    serviceType: 'MenuAppService',
+    required: true,
+    show: `{{menuServiceProvider}} === 'excel'`,
   }),
   new TextInput({
     id: 'mealType',

package/configuration.json

@@ -5,9 +5,34 @@
       "label": "Datos",
       "type": "group",
       "items": [
+        {
+          "id": "menuServiceProvider",
+          "label": "Origen de los datos",
+          "type": "select-input",
+          "items": [
+            {
+              "value": "google",
+              "label": "Google Sheets"
+            },
+            {
+              "value": "excel",
+              "label": "Microsoft Excel"
+            }
+          ],
+          "defaultValue": "google"
+        },
         {
           "id": "menuService",
           "label": "Hoja de cálculo de Google Sheets con el menú",
+          "show": "{{menuServiceProvider}} !== 'excel'",
+          "type": "service-input",
+          "serviceType": "MenuAppService",
+          "required": true
+        },
+        {
+          "id": "excelMenuService",
+          "label": "Libro de Excel de Microsoft con el menú",
+          "show": "{{menuServiceProvider}} === 'excel'",
           "type": "service-input",
           "serviceType": "MenuAppService",
           "required": true

package/package.json

@@ -10,7 +10,7 @@
   "author": {
     "name": ""
   },
-  "version": "0.2.0-dev.1",
+  "version": "0.2.0-dev.3",
   "scripts": {
     "prepublish": "vixonic-module-packager --mode build",
     "watch": "vixonic-module-packager --mode watch",

package/src/logger.ts

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

package/src/parameters.d.ts

@@ -1,31 +1,9 @@
 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<{
-  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'
-}>
+  menuServiceProvider: 'google' | 'excel', menuService: { id: string }, excelMenuService: { 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

@@ -15,9 +15,12 @@ type TodayMenu = {
   error?: string
 }
 
+const selectedServiceId = ({ menuServiceProvider, menuService, excelMenuService }: VixonicParameters): string | undefined =>
+  (menuServiceProvider === 'excel' ? excelMenuService : menuService)?.id
+
 const resolveTodayMenu = (vixonicData: VixonicData): TodayMenu => {
   const { parameters, services } = vixonicData
-  const serviceId = parameters.menuService?.id
+  const serviceId = selectedServiceId(parameters)
   const serviceData = serviceId ? (services?.[serviceId]?.data as MenuAppServiceData | undefined) : undefined
 
   if (!serviceData) return { status: 'loading' }
@@ -35,7 +38,7 @@ const resolveTodayMenu = (vixonicData: VixonicData): TodayMenu => {
 }
 
 class App extends React.Component<AppProps> {
-  render () {
+  render() {
     const { parameters, downloadsPath } = this.props.vixonicData
     let cycle = parameters.animationDuration && parameters.animationDuration * 1000 || 15000
     const { status, data, error } = resolveTodayMenu(this.props.vixonicData)
@@ -45,13 +48,29 @@ class App extends React.Component<AppProps> {
       position: 'absolute',
       top: 0, right: 0, bottom: 0, left: 0,
       backgroundImage: parameters.backgroundImage &&
-      `url("${downloadsPath + '/' + parameters.backgroundImage.filename}")` || undefined,
+        `url("${downloadsPath + '/' + parameters.backgroundImage.filename}")` || undefined,
       backgroundSize: '100% 100%',
       padding: parameters.containerGridMargins
     }}>
-    {
-      !data?.[0] ?
-        <div style={{width: '100%', height: '100%', display: 'flex', fontSize: `${100 / (parameters.itemGridRows || 1)}vmin`, justifyContent: 'center', alignItems: 'center'}}>
+      {data?.[0] ?
+        <Grid
+          animate={this.props.start}
+          style={{ width: '100%', height: '100%' }}
+          items={data.map((meal) => (<MealContainer key={meal.type} data={meal} interval={cycle} vixonicData={this.props.vixonicData} />))}
+          animationConfig={{
+            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
+          }} /> :
+        <div style={{ width: '100%', height: '100%', display: 'flex', fontSize: `${100 / (parameters.itemGridRows || 1)}vmin`, justifyContent: 'center', alignItems: 'center' }}>
           <FormattedText
             text={placeholder}
             defaults={{
@@ -59,31 +78,13 @@ class App extends React.Component<AppProps> {
               fontColor: 'black',
               fontSize: 10
             }}
-            style={{width: '100%'}}
+            style={{ width: '100%' }}
             format={parameters.itemOptionsTextFormat || {}}
-            unit='%'/>
-        </div> :
-        <Grid
-        id='container'
-        animate={this.props.start}
-        style={{width: '100%', height: '100%'}}
-        items={data.map((meal) => (<MealContainer key={meal.type} 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>
+            unit='%' />
+        </div>
+      }
+      <FontLoader downloadPath={downloadsPath} fonts={fontParser(parameters)} />
+    </div>
   }
 }
 

package/src/scenes/components/FormattedText.tsx

@@ -22,13 +22,15 @@ type Props = {
 }
 
 class FormattedText extends React.Component<Props> {
-  render () {
-    let { format, defaults } = this.props
-    let { alignment, font, fontColor, fontSize } = format
-    let containerStyle = Object.assign({
+  render() {
+    const { format, defaults } = this.props
+    const { alignment, font, fontColor, fontSize } = format
+    const containerStyle = {
       display: 'inline-flex',
-      justifyContent: this.getHorizontalAlignment(alignment?.horizontal || defaults.alignment)
-    }, this.props.style)
+      justifyContent: this.getHorizontalAlignment(alignment?.horizontal || defaults.alignment),
+      ...this.props.style
+    }
+
     return <div style={containerStyle}>
       <span style={{
         color: fontColor || defaults.fontColor,
@@ -44,7 +46,7 @@ class FormattedText extends React.Component<Props> {
     </div>
   }
 
-  getHorizontalAlignment (alignment: any) {
+  getHorizontalAlignment(alignment: any) {
     if (alignment) {
       return alignments.hasOwnProperty(alignment) ? (alignments as any)[alignment] : 'flex-start'
     }

package/src/scenes/components/Grid/Grid.tsx

@@ -4,14 +4,14 @@ import Item from './GridItem'
 
 type GridProps = {
   animate: boolean,
-  animation: {
+  animationConfig: {
     mode: 'fade' | 'slideLeft' | 'slideRight',
     duration: number,
     speed?: number,
     stagger?: number,
     reverse?: boolean
   },
-  layout: {
+  layout: Readonly<{
     rows: number,
     rowsGap?: number,
     columns: number,
@@ -20,10 +20,9 @@ type GridProps = {
       h: 'start' | 'center' | 'end',
       v: 'start' | 'center' | 'end'
     }
-  }
+  }>
   style?: React.CSSProperties
   fontSize?: string
-  id: string
   items: React.ReactNode[]
 }
 
@@ -54,39 +53,42 @@ class Grid extends React.Component<GridProps, GridState> {
     items: []
   }
 
-  constructor (props: GridProps) {
-    super (props)
+  constructor(props: GridProps) {
+    super(props)
     this.lastIndex = 0
     this.animation = new AnimationController()
   }
 
-  componentDidMount () {
-    this.configure(this.props)
+  componentDidMount() {
+    this.configure()
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     this.unmounting = true
   }
 
-  configure (props: GridProps) {
-    this.animation.configure(props.animation)
-    this.columns = props.layout.columns || 1
-    this.columnsGap = props.layout.columnsGap || 0
-    this.rows = props.layout.rows || 1
-    this.rowsGap = props.layout.rowsGap || 0
+  configure() {
+    const { animationConfig, layout, animate } = this.props
+    this.animation.configure(animationConfig)
+    this.columns = layout.columns || 1
+    this.columnsGap = layout.columnsGap || 0
+    this.rows = layout.rows || 1
+    this.rowsGap = layout.rowsGap || 0
     this.itemsCount = this.rows * this.columns
-    if (props.animate && !this.animating && this.state.stage === 'idle') {
+    if (animate && !this.animating && this.state.stage === 'idle') {
       this.animating = true
-      this.createItems(props)
+      this.createItems()
     }
   }
 
   // Filter items by index and create the proper item within its container.
-  createItems (props: GridProps) {
-    if (!props.items) return
+  createItems() {
+    const { items, layout } = this.props
+    if (!items) return
+
     let count = 0
-    this.lastIndex = this.lastIndex < props.items.length ? this.lastIndex : 0
-    let newItems = props.items.filter((_item, index) => {
+    this.lastIndex = this.lastIndex < items.length ? this.lastIndex : 0
+    const newItems = items.filter((_item, index) => {
       return index >= this.lastIndex
     }).map((item, index, arr) => {
       if (count >= this.itemsCount) return null
@@ -101,7 +103,7 @@ class Grid extends React.Component<GridProps, GridState> {
           ic_lastChild: index === (arr.length - 1)
         }} style={this.animation.getInitialStyle()}
         // Item alignment. By default is center - center.
-        alignment={props.layout.alignment}
+        alignment={layout.alignment}
         // Setup item width based on columns count.
         width={(100 - (this.columnsGap * (this.columns - 1))) / this.columns}
         // Setup item height based on rows count. If 0 set up on auto.
@@ -129,7 +131,7 @@ class Grid extends React.Component<GridProps, GridState> {
     }
   }
 
-  render () {
+  render() {
     return <div ref={(container) => { this.container = container }} style={{
       opacity: this.state.show ? 1 : 0,
       position: 'relative',
@@ -142,14 +144,14 @@ class Grid extends React.Component<GridProps, GridState> {
     </div>
   }
 
-  componentDidUpdate (prevProps: GridProps) {
+  componentDidUpdate(prevProps: GridProps) {
     if (prevProps !== this.props) {
-      this.configure(this.props)
+      this.configure()
     }
     if (this.props.animate && this.state.stage === 'prepared') {
       // Start animations.
       this.animation.animate(this.container!.childNodes, () => {
-        !this.unmounting && this.createItems(this.props)
+        !this.unmounting && this.createItems()
       })
       this.setState({
         stage: 'animating'

package/src/scenes/components/Grid/GridItem.tsx

@@ -41,13 +41,23 @@ class GridItem extends React.Component<GridItemProps, any> {
     this.setState({height: this.el.offsetHeight})
   }
 
-  componentWillReceiveProps () {
-    this.setState({ height: this.el.offsetHeight })
+  componentDidUpdate () {
+    const height = this.el.offsetHeight
+    if (height !== this.state.height) {
+      this.setState({ height })
+    }
   }
 
   render () {
-    let props = this.props
-    let style: React.CSSProperties = {
+    const props = this.props
+    const { ic_rowIndex, ic_columnIndex } = props.containerData
+    const top = ic_rowIndex > 0 && props.verticalGap
+      ? `${props.verticalGap * ic_rowIndex}%`
+      : '0'
+    const paddingLeft = ic_columnIndex > 0 && props.horizontalGap
+      ? `${props.horizontalGap}%`
+      : '0'
+    const style: React.CSSProperties = {
       overflow: 'hidden',
       display: 'flex',
       position: 'relative',
@@ -56,16 +66,8 @@ class GridItem extends React.Component<GridItemProps, any> {
       width: `${props.width}%`,
       height: `${props.height}%`,
       fontSize: this.props.fontSize || this.state.height && `${this.state.height}px`,
-      top: props.containerData.ic_rowIndex === 0
-      ? '0'
-      : props.verticalGap
-        ? `${props.verticalGap * props.containerData.ic_rowIndex}%`
-        : '0',
-      paddingLeft: props.containerData.ic_columnIndex === 0
-      ? '0'
-      : props.horizontalGap
-        ? `${props.horizontalGap}%`
-        : '0',
+      top,
+      paddingLeft,
       ...props.style
     }
     return <div style={style}

package/src/scenes/components/MealContainer/components/Title/index.tsx

@@ -29,16 +29,17 @@ class Title extends React.Component<Props> {
   }
 
   componentDidMount() {
-    this.setup(this.props)
+    this.setup()
   }
 
-  setup(props: Props) {
-    const { parameters } = props.vixonicData
+  setup() {
+    const { vixonicData, getPadding } = this.props
+    const { parameters } = vixonicData
     if (parameters.itemStyle && TitleStyles[parameters.itemStyle]) {
       this.style = TitleStyles[parameters.itemStyle]
     }
     const fontSize = parameters.itemTitleTextFormat?.fontSize
-    props.getPadding(this.style.getPadding(fontSize || defaultFontSize))
+    getPadding(this.style.getPadding(fontSize || defaultFontSize))
   }
 
   render() {

package/src/scenes/components/MealContainer/index.tsx

@@ -38,10 +38,9 @@ export default class MealContainer extends React.Component<Props, any> {
             padding: parameters.itemGridMargins || this.state.padding
           }}
           fontSize='inherit'
-          id={data.type}
           items={data.options.map((option) => (<OptionItem key={option} data={option} vixonicData={vixonicData} />))}
           animate={true}
-          animation={{
+          animationConfig={{
             mode: parameters.animationMode || 'fade',
             duration: cycle
           }}

package/.claude/settings.local.json

@@ -1,31 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(find /home/danielalvayail/repos/server-ruffo -type f -name \"package.json\" -o -name \"tsconfig.json\" -o -name \".gitmodules\" | head -20)",
-      "Read(//home/danielalvayail/repos/server-ruffo/**)",
-      "Bash(grep -n \"insertAgendaApp\\\\|insertBirthdayApp\\\\|insertSheetsReader\\\\|insertLocalAppSheets\\\\|__resolveType\\\\|AgendaAppService\\\\|implements Service\\\\|gql\\\\`\" src/schema/modules/services/index.ts)",
-      "Bash(npx tsc *)",
-      "Bash(echo \"exit=$?  \\(vacío = sin errores en esos archivos relativos a MenuAppService\\)\")",
-      "Bash(echo \"exit=$? \\(vacío = sin errores que mencionen Menu/MenuApp\\)\")",
-      "Bash(xargs ls -lh)",
-      "Bash(echo \"exit=$? \\(vacío = sin errores que mencionen MenuApp/MenuAppForm\\)\")",
-      "Bash(echo \"exit=$? \\(vacío = sin errores en esos archivos\\)\")",
-      "Bash(node -e \"JSON.parse\\(require\\('fs'\\).readFileSync\\('src/i18n/locales/es.json','utf8'\\)\\); console.log\\('es.json OK'\\)\")",
-      "Bash(python3 -c \"import json; json.load\\(open\\('src/i18n/locales/es.json'\\)\\); print\\('es.json OK'\\)\")",
-      "Bash(find /home/danielalvayail/repos/apps/store-birthdays -type f \\\\\\( -name \"*.ts\" -o -name \"*.tsx\" -o -name \"*.json\" -o -name \"*.d.ts\" \\\\\\) | head -30)",
-      "Read(//home/danielalvayail/repos/apps/store-birthdays/**)",
-      "Bash(python3 -c \"import json; d=json.load\\(open\\('src/test/services.json'\\)\\); k=list\\(d['services']\\)[0]; print\\('services.json OK — id:', k\\); print\\('hojas:', list\\(d['services'][k]['data']['menus']\\)\\)\")",
-      "Bash(python3 -c \"import json; p=json.load\\(open\\('src/test/parameters.json'\\)\\); print\\('parameters menuService.id:', p['parameters']['menuService']['id']\\)\")",
-      "Bash(python3 -c \"import json; d=json.load\\(open\\('src/test/services.json'\\)\\); print\\('services.json OK, primer date AMANECIDA:', d['services']['38c3df7c-fb9e-e5a5-489a-d6e31048c2d3']['data']['menus']['AMANECIDA'][0]['date']\\)\")",
-      "Read(//home/danielalvayail/.nvm/versions/node/**)",
-      "Bash(command -v nodejs)",
-      "Bash(node -e \"const r=require\\('./node_modules/react'\\); console.log\\('SFC=',typeof r.SFC,'StatelessComponent=',typeof r.StatelessComponent\\)\")",
-      "Bash(git add *)",
-      "Bash(git commit -m ' *)",
-      "Bash(git push *)",
-      "Bash(command -v nvm)",
-      "Read(//usr/local/bin/**)",
-      "Bash(bash -lc 'which node')"
-    ]
-  }
-}

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "js/ts.tsdk.path": "node_modules/typescript/lib"
-}