@vixoniccom/footbal-score 1.0.1-beta.1 → 1.0.1-beta.11

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.0.1-beta.11](https://gitlab.com/mandomedio/vixonic/football-score/compare/v1.0.1-beta.10...v1.0.1-beta.11) (2022-11-22)
+
+### [1.0.1-beta.10](https://gitlab.com/mandomedio/vixonic/football-score/compare/v1.0.1-beta.9...v1.0.1-beta.10) (2022-11-21)
+
+### [1.0.1-beta.9](https://gitlab.com/mandomedio/vixonic/football-score/compare/v1.0.1-beta.8...v1.0.1-beta.9) (2022-11-21)
+
+### [1.0.1-beta.8](https://gitlab.com/mandomedio/vixonic/football-score/compare/v1.0.1-beta.7...v1.0.1-beta.8) (2022-11-21)
+
+### [1.0.1-beta.6](https://gitlab.com/mandomedio/vixonic/football-score/compare/v1.0.1-beta.7...v1.0.1-beta.6) (2022-11-21)
+
+### [1.0.1-beta.7](https://gitlab.com/mandomedio/vixonic/football-score/compare/v1.0.1-beta.6...v1.0.1-beta.7) (2022-11-21)
+
+### [1.0.1-beta.6](https://gitlab.com/mandomedio/vixonic/football-score/compare/v1.0.1-beta.5...v1.0.1-beta.6) (2022-11-21)
+
+### [1.0.1-beta.5](https://gitlab.com/mandomedio/vixonic/football-score/compare/v1.0.1-beta.4...v1.0.1-beta.5) (2022-11-21)
+
+### [1.0.1-beta.4](https://gitlab.com/mandomedio/vixonic/football-score/compare/v1.0.1-beta.3...v1.0.1-beta.4) (2022-11-16)
+
+### [1.0.1-beta.3](https://gitlab.com/mandomedio/vixonic/football-score/compare/v1.0.1-beta.2...v1.0.1-beta.3) (2022-11-16)
+
+### [1.0.1-beta.2](https://gitlab.com/mandomedio/vixonic/football-score/compare/v1.0.1-beta.1...v1.0.1-beta.2) (2022-11-16)
+
 ### [1.0.1-beta.1](https://gitlab.com/mandomedio/vixonic/football-score/compare/v1.0.1-beta.0...v1.0.1-beta.1) (2022-11-15)
 
 ### 1.0.1-beta.0 (2022-11-15)

package/configuration.json

@@ -10,6 +10,43 @@
           "type": "label",
           "label": "Datos"
         },
+        {
+					"id": "updateTime",
+					"type": "select-input",
+					"required": true,
+					"label": "Actualización",
+					"defaultValue": 300000,
+					"items": [
+            {
+							"label": "5 minutos",
+							"value": 300000
+						},
+						{
+							"label": "10 minutos",
+							"value": 600000
+						},
+						{
+							"label": "30 minutos",
+							"value": 1800000
+						},
+						{
+							"label": "1 hora",
+							"value": 3600000
+						},
+						{
+							"label": "6 horas",
+							"value": 21600000
+						},
+						{
+							"label": "12 horas",
+							"value": 43200000
+						},
+						{
+							"label": "Diario",
+							"value": 86400000
+						}
+					]
+				},
         {
           "type": "switch",
           "id": "titleEnabled",
@@ -59,6 +96,20 @@
           "required": false,
           "label": "Márgenes",
           "description": "CSS para dar espacio arriba/derecha/abajo/izquieda."
+        },
+        {
+          "id": "columnGap",
+          "type": "text-input",
+          "required": false,
+          "label": "Separación entre columnas",
+          "description": "Agregar en px, ejemplo 100px. (Por defecto son 10px)"
+        },
+        {
+          "id": "rowGap",
+          "type": "text-input",
+          "required": false,
+          "label": "Separación entre filas",
+          "description": "Agregar en px, ejemplo 100px. (Por defecto son 30px)"
         }
       ]
     },
@@ -77,20 +128,60 @@
           "id": "timeFormat",
           "label": "Formato Tiempo"
         },
+        {
+          "id": "widthTime",
+          "type": "text-input",
+          "required": false,
+          "label": "Ancho columna fecha partido",
+          "description": "Agregar en px, ejemplo 100px. (Por defecto son 200px)",
+          "defaultValue":"200px"
+        },
         {
           "type": "text-format",
           "id": "statusFormat",
-          "label": "Formato Status Partido"
+          "label": "Formato Status"
+        },
+        {
+          "id": "widthStatus",
+          "type": "text-input",
+          "required": false,
+          "label": "Ancho columna Status Partido",
+          "description": "Agregar en px, ejemplo 100px. (Por defecto son 200px)",
+          "defaultValue":"200px"
         },
         {
           "type": "text-format",
           "id": "goalsFormat",
           "label": "Formato Goles"
         },
+        {
+          "id": "widthScore",
+          "type": "text-input",
+          "required": false,
+          "label": "Ancho columna Goles",
+          "description": "Agregar en px, ejemplo 100px. (Por defecto son 100px)",
+          "defaultValue":"200px"
+        },
+        {
+          "type": "switch",
+          "id": "descriptionEnabled",
+          "label": "Nombre Equipos",
+          "defaultValue": true
+        },
         {
           "type": "text-format",
           "id": "descriptionFormat",
-          "label": "Formato Nombre Equipo"
+          "label": "Formato Nombre Equipo",
+          "show": "{{descriptionEnabled}} === true"
+        },
+        {
+          "id": "widthDescription",
+          "type": "text-input",
+          "required": false,
+          "label": "Ancho columna Nombre Equipo",
+          "show": "{{descriptionEnabled}} === true",
+          "description": "Agregar en px, ejemplo 100px. (Por defecto son 200px)",
+          "defaultValue":"200px"
         },
         {
           "type": "label",
@@ -102,6 +193,14 @@
           "range": "[1:100]",
           "label": "Tamaño",
           "description": "Tamaño de la imagen en porcentaje."
+        },
+        {
+          "id": "widthImage",
+          "type": "text-input",
+          "required": false,
+          "label": "Ancho columna Bandera",
+          "description": "Agregar en px, ejemplo 100px. (Por defecto son 300px)",
+          "defaultValue":"300px"
         }
       ]
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vixoniccom/footbal-score",
   "alias": "Resultados Deportivos",
-  "version": "1.0.1-beta.1",
+  "version": "1.0.1-beta.11",
   "description": "Muestra resultados en vivo de fútbol.",
   "main": "main.js",
   "author": "",

package/src/App.tsx

@@ -10,7 +10,7 @@ type Props = {
 }
 
 export const App = ({ data, start }: Props) => {
-  const [dataFixture, setDataFixture] = useState([]);
+   const [dataFixture, setDataFixture] = useState([]);
 
   const { configureState, addConfiguration } = useContext(ConfigureContext)
 
@@ -19,8 +19,10 @@ export const App = ({ data, start }: Props) => {
   const { backgroundImage,
     padding,
     msj0 = '',
+    updateTime
   } = parameters
- 
+    console.log("🚀 ~ file: App.tsx ~ line 24 ~ App ~ updateTime", updateTime)
+
   let backgroundImageState = backgroundImage && backgroundImage.filename
     ? `url("${downloadsPath}/${backgroundImage.filename}")`
     : ''
@@ -30,19 +32,20 @@ export const App = ({ data, start }: Props) => {
     setDataFixture(data);
   }
 
-  //Request data every 5 minutes
-  // useEffect(() => {
-  //   const interval = setInterval(() => {
-  //     if (start) getData()
-  //   }, 300000)
-  //   return () => clearInterval(interval)
-  // }, [])
 
   useEffect(() => {
+    console.log('entro aquí')
     if (start) getData()
     addConfiguration(data)
   }, [data])
 
+  //Request data every 5 minutes
+  useEffect(() => {
+    const interval = setInterval(() => {
+      getData()
+    }, updateTime || 300000)
+    return () => clearInterval(interval)
+  }, [updateTime])
 
 
 
@@ -60,7 +63,7 @@ export const App = ({ data, start }: Props) => {
           padding: padding
         }}
       >
-        <FontLoader paths={['nameFormat.font', 'descriptionFormat.font', 'dateDayFormat.font', 'dateMonthFormat.font']} parameters={parameters} downloadsPath={downloadsPath} />
+        <FontLoader paths={['nameFormat.font','statusFormat.font', 'timeFormat.font','titleFormat.font', 'descriptionFormat.font', 'dateDayFormat.font', 'dateMonthFormat.font', 'goalsFormat.font']} parameters={parameters} downloadsPath={downloadsPath} />
         {
           parameters.titleEnabled &&
           <div style={{

package/src/components/table-fixture/Results.tsx

@@ -6,7 +6,7 @@ export const Results = (goals: any) => {
 
   const { configureState } = useContext(ConfigureContext)
   const { parameters } = configureState
-
+ 
 
   return (
     <div style={{

package/src/components/table-fixture/Row.tsx

@@ -1,58 +1,94 @@
 import React, { useContext } from 'react'
 // import { TeamItems } from './TeamItems'
-import { Results } from './Results';
 import { Time } from './Time';
 import { FormattedText } from '../FormattedText';
 import { ConfigureContext } from '../../contex/configureContext/ConfigureContext';
+import { Status } from './Status';
+import { translateTeams } from '../../helpers/translateTeams';
 
 export const Row = (item: any) => {
 
     const { fixture, teams, goals } = item.item;
     const { configureState } = useContext(ConfigureContext)
     const { parameters } = configureState
+
+    const {
+        descriptionEnabled,
+        widthDescription,
+        descriptionFormat,
+        imageSize,
+        widthImage,
+        widthScore,
+        columnGap,
+        rowGap,
+        widthStatus,
+        widthTime,
+        goalsFormat    
+    } = parameters
+        console.log("🚀 ~ file: Row.tsx ~ line 28 ~ Row ~ descriptionFormat", descriptionFormat)
+        console.log("🚀 ~ file: Row.tsx ~ line 28 ~ Row ~ goalsFormat", goalsFormat)
+
+    let gridColumns = descriptionEnabled ? `${widthTime || "200px"} ${widthStatus || "200px"} ${widthDescription || "200px"}  ${widthImage || "300px"} ${widthScore || "100px"} ${widthImage || "300px"} ${widthDescription || "200px"}` :
+        ` ${widthTime || "100px"} ${widthStatus || "100px"} ${widthImage || "300px"} ${widthScore || "100px"} ${widthImage || "300px"}`
+
+    let nameHome = translateTeams(teams.home.name)   
+    let nameAway = translateTeams(teams.away.name)
+
     return (
         <div
             style={{
                 display: 'grid',
-                gridTemplateColumns: '1fr 1fr 8fr',
+                gridTemplateColumns: `${gridColumns}`,
+                columnGap: `${columnGap || "10px"}`,
                 width: '100%',
-                gap: '100px',
                 alignItems: 'center',
+                placeContent: 'center',
+                padding: `${rowGap || "30px"} 0px`,
+                justifyContent: 'center'
             }}
         >
             <Time time={Number(fixture.timestamp)} />
-            <FormattedText text={fixture.status.long} format={parameters.timeFormat} />
-            <div
-                style={{
-                    display: 'grid',
-                    gridTemplateColumns: '1fr 2fr 1fr 2fr 2fr',
-                    columnGap: '10px',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    width: '100%',
-                    padding: '30px',
-                    placeContent: 'center',
-                }}
-            >
-                <FormattedText text={teams.home.name} format={parameters.descriptionFormat} />
+
+            <Status status={fixture.status.short} />
+
+
+            {
+                descriptionEnabled &&
                 <div style={{
                     display: 'flex',
-                    justifyContent: 'center',
+                    justifyContent: 'flex-end',
                 }}>
-                    <img src={teams.home.logo} style={{ width: `${parameters.imageSize}%` }} />
+                    <FormattedText text={nameHome} format={descriptionFormat} />
                 </div>
+            }
+            <div style={{
+                display: 'flex',
+                justifyContent: 'center',
+            }}>
+                <img src={teams.home.logo} style={{ width: `${imageSize}%` }} />
+            </div>
 
-                <Results goals={goals} />
-                <div
-                    style={{
-                        display: 'flex',
-                        justifyContent: 'center',
-                    }}
-                >
-                    <img src={teams.away.logo} style={{ width: `${parameters.imageSize}%` }} />
-                </div>
-                <FormattedText text={teams.away.name} format={parameters.descriptionFormat} />
+            <div style={{
+                display: 'flex',
+                justifyContent: 'center',
+            }}>
+                <FormattedText text={goals.home ? goals.home : 0} format={goalsFormat} />
+                <FormattedText text={"-"} format={goalsFormat} />
+                <FormattedText text={goals.away ? goals.away : 0} format={goalsFormat} />
+            </div>
+
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                }}
+            >
+                <img src={teams.away.logo} style={{ width: `${imageSize}%` }} />
             </div>
-        </div>
+            {
+                descriptionEnabled &&
+                <FormattedText text={nameAway} format={descriptionFormat} />
+            }
+        </div >
     )
 }

package/src/components/table-fixture/Status.tsx

@@ -0,0 +1,49 @@
+import React, { useContext } from 'react'
+import { ConfigureContext } from '../../contex/configureContext/ConfigureContext'
+import { FormattedText } from '../FormattedText'
+
+export const Status = ({
+    status
+}: any) => {
+
+    let translateStatus: string = ''
+    const { configureState } = useContext(ConfigureContext)
+    const { parameters } = configureState
+
+    switch (status) {
+        case 'NS':
+            translateStatus = 'Por iniciar'
+            break
+        case '1H':
+            translateStatus = 'Primer tiempo'
+            break
+        case 'HT':
+            translateStatus = 'Medio tiempo '
+            break
+        case '2H':
+            translateStatus = 'Segundo tiempo'
+            break
+        case 'FT':
+            translateStatus = 'Finalizado'
+            break
+        case 'P':
+            translateStatus = 'Penales'
+            break
+        case 'LIVE':
+            translateStatus = 'En vivo'
+            break
+        default:
+            translateStatus = 'Finalizado'
+            break
+    }
+
+    return (
+        <div style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+        }}>
+            <FormattedText text={translateStatus} format={parameters.statusFormat} />
+        </div>
+    )
+}

package/src/contex/configureContext/ConfigureProvider.tsx

@@ -50,13 +50,20 @@ const INITIAL_STATE: VixonicData = {
         template: "",
         textAlignment: "center",
         textPosition: 0,
-        updateTime: 0,
+        updateTime: 300000,
         urlBaseApi: "",
         imageMargin: "",
         textMargin: "",
         dateMargin: "",
-        separator: false
-    }
+        separator: false,
+        widthDescription: "200px",
+        widthImage: "300px",
+        widthScore: "100px",
+        columnGap: "10px",
+        rowGap: "30px",
+        widthStatus: "200px",
+        widthTime: "200px",
+     }
 }
 
 interface props {

package/src/contex/configureContext/configureReducer.ts

@@ -44,7 +44,14 @@ export const parameterReducer = (state: VixonicData, action: ConfigureAction) =>
                     titleEnabled: parameters.titleEnabled,
                     titleFormat: parameters.titleFormat,
                     statusFormat: parameters.statusFormat,
-                }
+                    widthDescription: parameters.widthDescription,
+                    widthImage: parameters.widthImage,
+                    widthScore: parameters.widthScore,
+                    columnGap: parameters.columnGap,
+                    rowGap: parameters.rowGap,
+                    widthTime: parameters.widthTime,
+                    widthStatus: parameters.widthStatus,
+                 }
             }
         default:
             return state;

package/src/helpers/getFixture.ts

@@ -1,20 +1,26 @@
-// import moment from 'moment';
+import moment from 'moment';
 const axios = require("axios");
 
 export const getFixture = async () => {
 
-    // const today = moment().format('YYYY-MM-DD')    
+    const today = moment().format('YYYY-MM-DD')    
     // console.log("🚀 ~ file: getFixture.ts ~ line 6 ~ getFixture ~ today", today)
 
     const options = {
         method: 'GET',
         url: 'https://api-football-v1.p.rapidapi.com/v3/fixtures',
-        params: { date: '2022-11-21', league: '1', season: '2022' },
+        params: { date: `${today}`, league: '1', season: '2022' },
         headers: {
             'X-RapidAPI-Key': 'a7e693d4c5msh72a2ff2020fd601p12dd08jsn0f168421d7bb',
             'X-RapidAPI-Host': 'api-football-v1.p.rapidapi.com'
         }
     };
-    const response = await axios.request(options)
-    return response.data.response
+    try {
+        const response = await axios.request(options)
+        return response.data.response
+    } catch (error) {
+        console.error(error);
+        return []
+    }
+
 }

package/src/helpers/translateTeams.ts

@@ -0,0 +1,91 @@
+
+export const translateTeams = (team: string) => {
+    switch (team) {
+        case 'England':
+            return 'Inglaterra'
+        case 'Spain':
+            return 'España'
+        case 'Italy':
+            return 'Italia'
+        case 'Germany':
+            return 'Alemania'
+        case 'France':
+            return 'Francia'
+        case 'Portugal':
+            return 'Portugal'
+        case 'Netherlands':
+            return 'Holanda'
+        case 'Belgium':
+            return 'Bélgica'
+        case 'Russia':
+            return 'Rusia'
+        case 'Turkey':
+            return 'Turquía'
+        case 'Ukraine':
+            return 'Ucrania'
+        case 'Czech Republic':
+            return 'República Checa'
+        case 'Sweden':
+            return 'Suecia'
+        case 'Poland':
+            return 'Polonia'
+        case 'Austria':
+            return 'Austria'
+        case 'Switzerland':
+            return 'Suiza'
+        case 'Denmark':
+            return 'Dinamarca'
+        case 'Hungary':
+            return 'Hungría'
+        case 'Romania':
+            return 'Rumanía'
+        case 'Croatia':
+            return 'Croacia'
+        case 'Scotland':
+            return 'Escocia'
+        case 'Wales':
+            return 'Gales'
+        case 'Northern Ireland':
+            return 'Irlanda del Norte'
+        case 'Slovakia':
+            return 'Eslovaquia'
+        case 'Norway':
+            return 'Noruega'
+        case 'Finland':
+            return 'Finlandia'
+        case 'Bulgaria':
+            return 'Bulgaria'
+        case 'North Macedonia':
+            return 'Macedonia del Norte'
+        case 'Iceland':
+            return 'Islandia'
+        case 'Iran':
+            return 'Irán'
+        case 'United States':
+            return 'Estados Unidos'
+        case 'Mexico':
+            return 'México'
+        case 'Tunisia':
+            return 'Túnez'
+        case 'Japan':
+            return 'Japón'
+        case 'Argentina':
+            return 'Argentina'
+        case 'Canada':
+            return 'Canadá'
+        case 'Morocco':
+            return 'Marruecos'
+        case 'Brazil':
+            return 'Brasil'
+        case 'Cameroon':
+            return 'Camerún'
+        case 'Ghana':
+            return 'Ghana'
+        case 'South Korea':        
+            return 'Corea del Sur'
+        case 'Saudi Arabia':
+            return 'Arabia Saudita'
+        default:
+            return team
+    }
+}

package/src/parameters.d.ts

@@ -13,7 +13,7 @@ declare type VixonicParameters = Partial<{
   animationOrder: boolean
   animationSpeed: number
   animationTime: string
-  animationStagger:number
+  animationStagger: number
   apiDomain: string
   backgroundImage: GeneralData
   containerColumns: string
@@ -25,6 +25,7 @@ declare type VixonicParameters = Partial<{
   dateDayFormat: DateFormat
   timeFormat: DateFormat
   goalsFormat: DateFormat
+  updateTime: number
   dateEnabled: boolean
   title0: string
   titleEnabled: boolean
@@ -62,6 +63,13 @@ declare type VixonicParameters = Partial<{
   nameMaxChar: number,
   descriptionMaxChar: number,
   statusFormat: DateFormat,
+  widthDescription: string,
+  widthImage: string,
+  widthScore: string,
+  columnGap: string,
+  rowGap: string,
+  widthTime: string,
+  widthStatus: string
 }>
 
 

package/src/test/parameters.json

@@ -2,6 +2,10 @@
     "parameters": {
       "urlBaseApi": "mandomedio",
       "msj0": "No hay partidos",
+      "statusEnabled": true,
+      "timeRequest":60000,
+      "rowGap":"30px",
+      "columnGap":"10px",
       "padding": "30px 25px 80px 40px",
       "dataMode": "monthly",
       "template": "standard",