@vixoniccom/aniversarios 1.2.3-dev.1 → 1.3.0-dev.0

package/src/components/FormattedText/index.tsx

@@ -25,7 +25,7 @@ interface Props {
 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) {
+    if (isValid && (text && text.length > maxChar)) {
       const returnText = text.substring(0, maxChar - 3)
       returnText.substr(-1, 3)
       return `${returnText.trim()}...`
@@ -35,7 +35,7 @@ export const FormattedText: React.FunctionComponent<Props> = ({ text, format, ma
 
   const checkNested = (obj: any, path: string): boolean => {
     return path.split('.').every(segment => {
-      if (obj && obj.hasOwnProperty(segment)) {
+      if (obj?.hasOwnProperty(segment)) {
         obj = obj[segment]
         return true
       }
@@ -52,10 +52,11 @@ export const FormattedText: React.FunctionComponent<Props> = ({ text, format, ma
   }
 
   const renderText = maxChar ? trimText(text, maxChar) : text
-  const containerStyle = Object.assign({
+  const containerStyle = {
     display: 'inline-flex',
-    justifyContent: getHorizontalAlignment(format.alignment)
-  }, style)
+    justifyContent: getHorizontalAlignment(format.alignment),
+    ...(style as any)
+  }
 
   return (
     <div style={containerStyle}>

package/src/components/ItemsContainer/components/Item.tsx

@@ -16,9 +16,21 @@ interface Props {
   style: any
 }
 
+
+
 export const Item = ({ width, height, containerData, verticalGap, horizontalGap, children, style }: Props) => {
   const itemRef = useRef(null)
 
+  let topPosition = '0';
+  if (containerData.ic_rowIndex !== 0) {
+    topPosition = verticalGap ? `${verticalGap * containerData.ic_rowIndex}%` : '0';
+  }
+
+  let leftPadding = '0'
+  if (containerData.ic_columnIndex !== 0) {
+    leftPadding = horizontalGap ? `${horizontalGap}%` : '0';
+  }
+
   return (
     <div ref={itemRef}
       style={{
@@ -29,13 +41,9 @@ export const Item = ({ width, height, containerData, verticalGap, horizontalGap,
         justifyContent: aligments['center'],
         width: width,
         height: height,
-        top: containerData.ic_rowIndex === 0
-          ? '0'
-          : verticalGap ? `${verticalGap * containerData.ic_rowIndex}%` : '0',
-        paddingLeft: containerData.ic_columnIndex === 0
-          ? '0'
-          : horizontalGap ? `${horizontalGap}%` : '0'
-        , ...style
+        top: topPosition,
+        paddingLeft: leftPadding,
+        ...style
       }}
     >
       {React.cloneElement(children, containerData)}

package/src/components/ItemsContainer/components/animation.ts

@@ -58,7 +58,7 @@ const animationModes = {
   },
 }
 
-class Animation {
+export class AnimationController {
   public mode: any
   public duration: number
   public speed: number
@@ -73,12 +73,12 @@ class Animation {
     this.reverse = true
   }
 
-  configure(options: Options) {
-    this.mode = animationModes.hasOwnProperty(options.mode) ? animationModes[options.mode] : animationModes.fade
+  configure(options: Partial<Options>) {
+    this.mode = options.mode && animationModes.hasOwnProperty(options.mode) ? animationModes[options.mode] : animationModes.fade
     this.duration = options.duration || 10000
     this.speed = 1000 * (options.speed || 1)
     this.stagger = this.speed / (options.stagger || 4)
-    this.reverse = options.reverse
+    this.reverse = options.reverse !== undefined ? options.reverse : true
   }
 
   getInitialStyle() {
@@ -96,35 +96,29 @@ class Animation {
       autoplay: false,
     })
     animation.add(
-      Object.assign(
-        {
-          targets: els,
-          duration: this.speed,
-          delay: function (_el: any, i: any, _l: any) {
-            return i * self.stagger
-          },
+      {
+        targets: els,
+        duration: this.speed,
+        delay: function (_el: any, i: any, _l: any) {
+          return i * self.stagger
         },
-        this.mode.in
-      )
+        ...this.mode.in
+      }
     )
     animation.add(
-      Object.assign(
-        {
-          targets: els,
-          duration: this.speed,
-          delay: function (_el: any, _i: any, _l: any) {
-            return _i * self.stagger
-          },
-          complete: () => {
-            finished()
-          },
+      {
+        targets: els,
+        duration: this.speed,
+        delay: function (_el: any, _i: any, _l: any) {
+          return _i * self.stagger
         },
-        this.mode.out
-      ),
+        complete: () => {
+          finished()
+        },
+        ...this.mode.out
+      },
       `+=${offset}`
     )
     animation.play()
   }
 }
-
-module.exports = exports = Animation

package/src/components/ItemsContainer/index.tsx

@@ -1,8 +1,8 @@
-import React, { useContext, useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { Item } from './components/Item'
-import { ConfigureContext } from '../../context/configureContext/ConfigureContext'
 import { useStateWithCallbackLazy } from 'use-state-with-callback'
 import { ReactElementLike } from 'prop-types'
+import { AnimationController } from './components/animation'
 
 const stages = {
   idle: 'idle',
@@ -14,20 +14,20 @@ interface Props {
   items: ReactElementLike[],
   animation: Animation,
   animate: boolean
+  data: VixonicData
 }
 
 interface Animation {
-  mode?: string
+  mode?: "fade" | "slideRight" | "slideLeft"
   duration?: number,
   speed?: number,
   reverse?: boolean
 }
 
-export const ItemsContainer = ({ animation, items, animate }: Props) => {
-  const { configureState } = useContext(ConfigureContext)
-  const { containerColumns, containerRows, containerRowsGap, containerColumnsGap } = configureState.parameters
+export const ItemsContainer = ({ animation, items, animate, data }: Props) => {
+  const { containerColumns, containerRows, containerRowsGap, containerColumnsGap } = data.parameters
   const container = useRef<HTMLDivElement>(null)
-  const [animations] = useState(new (require('./components/animation'))())
+  const [animations] = useState(new AnimationController())
   let itemsCount = Number(containerColumns) * Number(containerRows)
   let columns = Number(containerColumns) || 1
   let rows = Number(containerRows) || 1

package/src/components/Render/index.tsx

@@ -1,6 +1,3 @@
-import React, { useContext } from 'react'
-import { ConfigureContext } from '../../context/configureContext/ConfigureContext'
-import { DataContext } from '../../context/dataContext/DataContex'
 import { FontLoader } from '../FontLoader'
 import { FormattedText } from '../FormattedText'
 import { AnniversaryItem } from '../AnniversaryItem'
@@ -8,26 +5,27 @@ import { ItemsContainer } from '../ItemsContainer'
 
 interface Props {
   start: boolean
+  appData: VixonicData
+  anniversaries: Anniversary[]
 }
 
-export const Render = ({ start }: Props) => {
-  const { configureState } = useContext(ConfigureContext)
-  const { dataEmployee } = useContext(DataContext)
-  const { parameters, downloadsPath } = configureState
+
+export const Render = ({ start, appData, anniversaries }: Props) => {
+  const { parameters, downloadsPath } = appData
   const { backgroundImage,
     padding,
-    msj0 = '',
+    defaultMessage = '',
     animationMode,
     animationOrder,
     animationSpeed,
     animationTime,
   } = parameters
 
-  const backgroundImageState = backgroundImage && backgroundImage.filename
+  const backgroundImageState = backgroundImage?.filename
     ? `url("${downloadsPath}/${backgroundImage.filename}")` : ''
 
-  const anniversaryItems = dataEmployee.dataEmployee.map((anniversary: DataEmployee) => {
-    return <AnniversaryItem style={'standard'} anniversary={anniversary} />
+  const anniversaryItems = anniversaries.map((anniversary: Anniversary) => {
+    return <AnniversaryItem style={'standard'} anniversary={anniversary} data={appData} />
   })
 
   return (
@@ -41,8 +39,8 @@ export const Render = ({ start }: Props) => {
       backgroundSize: '100% 100%',
       padding: padding
     }}>
-      <FontLoader paths={['nameFormat.font', 'descriptionFormat.font', 'dateDayFormat.font', 'dateMonthFormat.font', 'optionalFormat.font']} />
-      {(dataEmployee.dataEmployee && dataEmployee.dataEmployee.length > 0) ?
+      <FontLoader paths={['nameFormat.font', 'descriptionFormat.font', 'dateDayFormat.font', 'dateMonthFormat.font', 'optionalFormat.font']} data={appData} />
+      {( anniversaries.length > 0) ?
         <ItemsContainer
           items={anniversaryItems}
           animation={{
@@ -52,6 +50,7 @@ export const Render = ({ start }: Props) => {
             reverse: animationOrder
           }}
           animate={start}
+          data={appData}
         /> :
         <div style={{
           width: '100%',
@@ -60,7 +59,7 @@ export const Render = ({ start }: Props) => {
           justifyContent: 'center',
           alignItems: 'center'
         }}>
-          <FormattedText text={msj0.trim() || 'Sin ingresos'} format={parameters.nameFormat || parameters.descriptionFormat} />
+          <FormattedText text={defaultMessage.trim() || 'Sin ingresos'} format={parameters.nameFormat || parameters.descriptionFormat} />
         </div>
       }
     </div >

package/src/global.d.ts

@@ -0,0 +1,8 @@
+declare interface Anniversary {
+  month: number
+  day: number
+  name: string
+  image?: string
+  position?: string
+  optional?: string
+}

package/src/main.ts

@@ -0,0 +1,46 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { App } from './App'
+import { AnniversaryLoader } from './anniversary-loader'
+const { ipcRenderer } = require('electron')
+
+let start: boolean = false
+let appData: VixonicData
+let anniversaries: Anniversary[] = []
+
+const anniversariesLoader = new AnniversaryLoader()
+
+anniversariesLoader.onData = (update) => {
+  anniversaries = update
+  render()
+}
+
+ipcRenderer.on('preload', (_event: any, data: VixonicData) => {
+  appData = data
+  anniversariesLoader.update(data)
+  render()
+})
+
+ipcRenderer.on('start', (_event: any, data: VixonicData) => {
+  appData = data
+  anniversariesLoader.update(data)
+  start = true
+  render()
+})
+
+ipcRenderer.on('update', (_event: any, data: VixonicData) => {
+  appData = data
+  anniversariesLoader.update(data)
+  render()
+})
+
+ipcRenderer.on('finish', (_event: any) => {
+  anniversariesLoader.stop()
+  console.log('finish')
+})
+
+function render() {
+  ReactDOM.render(
+    React.createElement(App, { start, appData, anniversaries }), document.getElementById('root')
+  )
+}

package/src/parameters.d.ts

@@ -1,124 +1,9 @@
-
-
 declare type VixonicData = {
-  parameters: VixonicParameters,
-  services?: { [key: string]: { data?: any, updatedAt?: number } }
   downloadsPath: string
+  services: { [key: string]: { data?: any, updatedAt?: number } }
+  parameters: VixonicParameters
 }
 
-
 declare type VixonicParameters = Partial<{
-  abbreviatedMonths: boolean
-  animationMode: string
-  animationOrder: boolean
-  animationSpeed: number
-  animationTime: string
-  animationStagger:number
-  apiDomain: string
-  backgroundImage: GeneralData
-  containerColumns: string
-  containerRows: string
-  containerRowsGap: string
-  containerColumnsGap:string
-  dataMode: string
-  dateAlignment: keyof typeof alignment
-  dateDayFormat: DateFormat
-  dateEnabled: boolean
-  dateMonthFormat: DateFormat
-  datePosition: number
-  datePrimaryColor: string
-  dateStyle: keyof typeof styles
-  descriptionEnabled: boolean
-  descriptionFormat: DateFormat
-  optionalEnabled: boolean
-  optionalFormat: DateFormat
-  excludePast: boolean
-  imageAlignment: keyof typeof alignment
-  imageEnabled: boolean
-  imagePosition: number
-  imageStyle: keyof typeof borderStyles,
-  imageSize: number
-  itemMargins: string
-  msj0: string
-  nameFormat: DateFormat
-  orientation: string
-  padding: string
-  photosMode: string
-  photosZip: GeneralData
-  template: string
-  textAlignment: keyof typeof alignment
-  textPosition: number
-  updateTime: number
-  urlBaseApi: string,
-  imageMargin: string,
-  textMargin: string,
-  dateMargin: string,
-  separator: boolean,
-  separatorWidth: number,
-  separatorColor: string,
-  nameMaxChar: number,
-  descriptionMaxChar: number,
-}>
-
-
-declare type DataEmployee = {
-  apellidoPate: string
-  area: string
-  cargo: string
-  contrato: string
-  empleado: string
-  empresa: string
-  estado: string
-  fechaInic: string
-  modalidad_contrato: string
-  nombre: string
-  sede: string
-  situacion: string
-  tipoCont: string,
-  nombreCargo: string,
-  day:number
-  month:number
-  name:string
-  position:string
-  image:string
-  optional: string
-}
-
-declare type Employees = {
-  dataEmployee: DataEmployee[]  | any[][]
-}
-
-type GeneralData = {
-  filename?: string
-  id?: string,
-  extension?: string,
-  _isAsset: boolean
-}
-
-type DateFormat = {
-  alignment?: { horizontal?: 'left' | 'right' | 'center' },
-  font?: GeneralData,
-  fontColor?: string,
-  fontSize?: number
-}
-
-const alignment = {
-  start: 'flex-start',
-  center: 'center',
-  end: 'flex-end'
-}
-
-
-const borderStyles = {
-  normal: '0',
-  rounded: '10',
-  circle: '100'
-}
-
-const styles = {
-  text: 'text',
-  calendarFlat: 'calendarFlat',
-  calendarText: 'calendarText',
-  circle: 'circle',
-  outlines: 'outlines'
-}
+  displayService: 'AnniversaryAppService' | 'RexmasAnniversarieService', documentService: { id: string }, rexmasService: { id: string }, photoMode: 'zip' | 'online', photosZip: {id?: string, filename?: string, extension?: string}, updateTime: 600000 | 1800000 | 3600000 | 21600000 | 43200000 | 86400000 | 604800000, defaultMessage: string, defaultMessageFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, orientation: 'h' | 'v', animationMode: 'fade' | 'slideRight' | 'slideLeft', animationSpeed: 2 | 1.5 | 1, animationOrder: boolean, animationTime: number, containerColumns: number, containerColumnsGap: number, containerRows: number, containerRowsGap: number, backgroundImage: {id?: string, filename?: string, extension?: string}, padding: string, textPosition: 1 | 2 | 3, textAlignment: 'start' | 'center' | 'end', nameFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, nameMaxChar: number, textMargin: string, descriptionEnabled: boolean, descriptionFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, descriptionMaxChar: number, optionalEnabled: boolean, optionalFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, imageEnabled: boolean, imagePosition: 1 | 2 | 3, imageAlignment: 'start' | 'center' | 'end', imageStyle: 'normal' | 'rounded' | 'circle', imageMargin: string, imageSize: number, dateEnabled: boolean, datePosition: 1 | 2 | 3, dateAlignment: 'start' | 'center' | 'end', dateStyle: 'calendarFlat' | 'calendarText' | 'circle' | 'text' | 'outlines', dateDayFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, dateMonthFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, abbreviatedMonths: boolean, datePrimaryColor: string, dateMargin: string, separator: boolean, separatorWidth: number, separatorColor: string, itemMargins: string
+}>

package/src/service-parsers.ts

@@ -0,0 +1,40 @@
+export class AnniversaryServiceParsers {
+  static readonly AnniversaryAppService = {
+    parse: (data: any[]): Anniversary[] => {
+      return data.map(item => ({
+        month: item.month,
+        day: item.day,
+        name: item.name,
+        image: item.image,
+       }))
+    }
+  }
+
+  static readonly RexmasAnniversaryService = {
+    parse: (data: any[]): Anniversary[] => {
+      return data.map(item => ({
+        month: item.month,
+        day: item.day,
+        name: item.name,
+        description: undefined, 
+        image: item.image,
+        optional: undefined
+      }))
+    }
+  }
+
+  static getParser(serviceType: VixonicData['parameters']['displayService']): ServiceParser {
+    switch (serviceType) {
+      case 'AnniversaryAppService':
+        return this.AnniversaryAppService
+      case 'RexmasAnniversarieService':
+        return this.RexmasAnniversaryService
+      default:
+        return this.AnniversaryAppService 
+    }
+  }
+}
+
+export interface ServiceParser {
+  parse: (data: any[]) => Anniversary[]
+}

package/src/test/parameters.json

@@ -1,7 +1,8 @@
 {
   "parameters": {
-    "apiDomain": "https://docs.google.com/spreadsheets/d/1nxPf6Y97fPubVE9mWhShrWvcXAlndD4x-qSvdjgoIVk/edit?usp=sharing",
-    "msj0": "No ingresos",
+    "documentService": {"id":"0159f12d-4a7d-24d1-f260-f33908c049e22"},
+    "rexmasService": {"id":"12b64ef1-0c66-c4ae-8797-9113e1063c4c"},
+    "defaultMessage": "No ingresos",
     "padding": "365px 25px 80px 40px",
     "dataMode": "monthly",
     "template": "standard",

package/src/test/services.json

@@ -0,0 +1,158 @@
+{
+  "services": {
+    "d3e82496-63af-5992-96dc-7d9639d21dd6": {
+      "id": "d3e82496-63af-5992-96dc-7d9639d21dd6",
+      "data": [
+        {
+          "day": 14,
+          "month": 6,
+          "name": "MANUEL SOMOZA",
+          "description": "CORPORATIVO",
+          "image": "Foto prueba.jpg"
+        },
+        {
+          "day": 14,
+          "month": 6,
+          "name": "ANTONIO BELLO",
+          "description": "CORPORATIVO",
+          "image": "Foto prueba.jpg"
+        },
+        {
+          "day": 16,
+          "month": 6,
+          "name": "MARIA DEL PILAR MARTINEZ",
+          "description": "FORD DURANGO",
+          "image": "Foto prueba.jpg"
+        },
+        {
+          "day": 17,
+          "month": 6,
+          "name": "AXEL ZALDIVAR",
+          "description": "JAC METEPEC",
+          "image": "Foto prueba.jpg"
+        },
+        {
+          "day": 18,
+          "month": 6,
+          "name": "GUSTAVO MENDEZ",
+          "description": "PEUGEOT ARBOLEDAS",
+          "image": "Foto prueba.jpg"
+        },
+        {
+          "day": 19,
+          "month": 6,
+          "name": "CARLOS CAMPOS",
+          "description": "JAC METEPEC",
+          "image": "Foto prueba.jpg"
+        },
+        {
+          "day": 19,
+          "month": 6,
+          "name": "CRISTIAN HOLGUIN",
+          "description": "CORPORATIVO",
+          "image": "Foto prueba.jpg"
+        },
+        {
+          "day": 20,
+          "month": 6,
+          "name": "MARIA DOMINGUEZ",
+          "description": "JAC CUERNAVACA",
+          "image": "Foto prueba.jpg"
+        },
+        {
+          "day": 20,
+          "month": 6,
+          "name": "DANIEL PEREZ",
+          "description": "CORPORATIVO",
+          "image": "Foto prueba.jpg"
+        },
+        {
+          "day": 21,
+          "month": 6,
+          "name": "ORLANDO QUIROZ",
+          "description": "PEUGEOT ARBOLEDAS",
+          "image": "Foto prueba.jpg"
+        },
+        {
+          "day": 26,
+          "month": 6,
+          "name": "LIZZA GUZMAN",
+          "description": "FORD DURANGO",
+          "image": "Foto prueba.jpg"
+        },
+        {
+          "day": 26,
+          "month": 6,
+          "name": "MONTSERRAT TORRES",
+          "description": "LEXUS SANTA FE",
+          "image": "Foto prueba.jpg"
+        },
+        {
+          "day": 28,
+          "month": 6,
+          "name": "PAOLA ALEMAN",
+          "description": "CORPORATIVO",
+          "image": "Foto prueba.jpg"
+        },
+        {
+          "day": 30,
+          "month": 6,
+          "name": "FANNY ANDRADE",
+          "description": "FORD DURANGO",
+          "image": "Foto prueba.jpg"
+        }
+      ],
+      "updatedAt": 1749672137077,
+      "__typename": "AnniversaryAppService"
+    },
+    "12b64ef1-0c66-c4ae-8797-9113e1063c4c": {
+      "id": "12b64ef1-0c66-c4ae-8797-9113e1063c4c",
+      "data": [
+        {
+          "day": 5,
+          "month": 5,
+          "name": "Juan Esteban Cárdenas",
+          "image": "https://s3.us-east-2.amazonaws.com/payroll-prod-chile/media/static/entidades/losnavegantes/18749054-5.jpg"
+        },
+        {
+          "day": 5,
+          "month": 5,
+          "name": "CARLA ELENA OYARZÚN",
+          "image": "https://s3.us-east-2.amazonaws.com/payroll-prod-chile/media/static/entidades/losnavegantes/12810705-3.png"
+        },
+        {
+          "day": 7,
+          "month": 5,
+          "name": "César Claudio Llancafil",
+          "image": "https://s3.us-east-2.amazonaws.com/payroll-prod-chile/media/static/entidades/losnavegantes/20761855-1.png"
+        },
+        {
+          "day": 16,
+          "month": 5,
+          "name": "JOSE MIGUEL DUQUE",
+          "image": "https://s3.us-east-2.amazonaws.com/payroll-prod-chile/media/static/entidades/losnavegantes/13461287-8.png"
+        },
+        {
+          "day": 17,
+          "month": 5,
+          "name": "CARLOS EDUARDO RIVERA",
+          "image": "https://s3.us-east-2.amazonaws.com/payroll-prod-chile/media/static/entidades/losnavegantes/25455086-8.jpg"
+        },
+        {
+          "day": 22,
+          "month": 5,
+          "name": "Pablo Baltazar Troncoso",
+          "image": "https://s3.us-east-2.amazonaws.com/payroll-prod-chile/media/static/entidades/losnavegantes/18407251-3.jpg"
+        },
+        {
+          "day": 29,
+          "month": 5,
+          "name": "Elizabeth Marcela Urdaneta",
+          "image": "https://s3.us-east-2.amazonaws.com/payroll-prod-chile/media/static/entidades/losnavegantes/25440150-1.png"
+        }
+      ],
+      "updatedAt": 1749670622134,
+      "__typename": "RexmasBirthdayService"
+    }
+  }
+}

package/src/context/configureContext/ConfigureContext.tsx

@@ -1,8 +0,0 @@
-import { createContext } from "react"
-
-type ConfigureContext = {
-  configureState: VixonicData
-  addConfiguration: (configure: VixonicData) => void
-}
-
-export const ConfigureContext = createContext<ConfigureContext>({} as ConfigureContext);