Recorrer botonea

Plantillas de Apps
1

En una pantalla tengo un container dentro de el tengo botones simulando mesas de una sala de restaurant con diferente tamaño quiero hacer un sistema de reserva de mesa, ejemplo al entrar el cliente debe encontrar las mesas que estan disponibles y selecionar la mesa de su preferencia, por la estructura del restaurant y la ubicacion de la meaa de forma asimetrica no puede hacerlo con add colection to ui sino tuve que utilizar botones. Pero ahora como puedo hacrr la programacion para que en el on load se vean las mesas que estan ocupadas y las que eatan disponibile y obviamente cambiar de color de verde a rojo.

3

Cuando una mesa se ocupa guardas en BD con un true o false, asi a la hora de ver que mesas estan ocupadas, si es true lo pones de un color y si es false de otro.

4

Ok esto lo tengo claro pero tengo alrededor de 30 botones simulando una mesa, como hago cuando entro en esta pantalla para que recorra los botones y conaulte cada uno si esta ocupado o disponible para reservar?

5

image
Tienes 3 formas de hacerlo.

  1. Iterate children
  2. Foreach
  3. Code Compute

La más fácil Iterate children puedes recorrer cualquier elemento y modificarlo, te dejo captura de la función.

:rocket: GoQuickDev — construyo software que factura

• Apps móviles (transporte, delivery, e-commerce)
• Integraciones (pagos, mapas, IA)
• Web/landing + automatización y chatbots

:calling: WhatsApp: +593968643400
:globe_with_meridians: Web: goquickdev.com

6

Si de hecho lo hice con el iterate chidren pero se supone que en cada iteracion tengo que consultar si el nombre del boton que estoy iterando e igual a numero de mesa y la condicion de esta mesa es dispobible entonces coloco el style.background verde y si no lo debo colocar el rojo. Entonces alli donde tengo dificulta. Inicualmenete pasa toda la consulta a una vatiable para evitar hacer un get en cada iteracion pero ahora tengo dificultad para hacer la consulta y cambiar el background de los botones.

7

Con condicionales puedes poner modify así ir cambiando los colores o estilos.

:rocket: GoQuickDev — construyo software que factura

• Apps móviles (transporte, delivery, e-commerce)
• Integraciones (pagos, mapas, IA)
• Web/landing + automatización y chatbots

:calling: WhatsApp: +593968643400
:globe_with_meridians: Web: goquickdev.com

8

Claro, pero mi duda es si hago un condicional al data base eso implica que cada vez que entro en la pantalla hara 30 consulta a la base de dato y si al entrar a la.pantalla hago una sola consulta y la paso a una variable local luego no se como llegarle a los item o almeno lo intente pero no funciona item.estado entonce prinero hago la conaulta la paso a una variable luego en iterance coloco un codiciona que si el nombre del boton es == a item.nombre luego si es true hago un nuevo condicional que si item.estado == disponible entonces en true coloco style.background #63748 (verde) si es false (rojo) pero no me funciona

9

@Gianfranco_Tonti para no disparar 30 lecturas, haz una sola y pinta todo con Iterate children:

  • Al cargar la pantalla, trae todas las mesas con su estado y guárdalas en una variable (ej. MesasEstado).
  • A cada botón dale el mismo tag mesa y un alias único (M1, M2, M3…).
  • Recorre el contenedor con Iterate children filtrando por mesa. En cada iteración:
    • Obtén el alias del botón actual (p. ej. M7).
    • Busca ese alias en MesasEstado y aplica estilo:
      • disponible → background #2ECC71 y habilitado
      • ocupada → background #E74C3C, deshabilitado y un toast corto tipo “Mesa ocupada”
      • reservada (si existe) → background #F1C40F y aviso “en proceso”
    • Opcional: muestra un pequeño badge con el alias (ej. [M7]) en la esquina del botón.
  • Al confirmar una reserva, actualiza MesasEstado y vuelve a correr el Iterate children para repintar sin recargar.

Con eso mantienes tu layout asimétrico con botones, haces 1 sola consulta por entrada y evitas latencia innecesaria. Si gustas lo cotizamos, puedo dejarlo implementado y probado directamente en tu proyecto.

Andréss Ortiz · GoQuickDev :rocket:
Apps móviles · Integraciones · Automatización
WhatsApp: Share on WhatsApp · goquickdev.com

10

gracias Andress pero el problema lo tengo al momento de consultar la informacion en la variable:

{
    "subtitle": {
        "M7": {
            "sillas": "5",
            "estado": "DISPONIBILE"
        },
        "M6": {
            "posicionX": "",
            "posicionY": "",
            "numero": "",
            "sillas": "5",
            "estado": "DISPONIBILE"
        },
        "M5": {
            "posicionX": "",
            "posicionY": "",
            "numero": "",
            "sillas": "5",
            "estado": "DISPONIBILE"
        },
``` no logro llegar al nombre de la mesa (M7, M6 etc)
1 me gusta