Crie um App de reserva de assentos para cinema.

Você já reparou como funciona o aplicativo das bilheterias dos cinemas?
Existe um mapa de assentos com as cadeirinhas para clicar e reservar, nesse vídeo vamos aprender a fazer isso com Zoho Creator, vai ser incrível!

CRIE SUA CONTA NA ZOHO:
✅ https://go.zoho.com/ueN

Se precisar dos códigos usados no vídeo, segue abaixo:

OnLoadReserva

hide assentos_selecionados;
hide Assentos;
input.Date_field = zoho.currentdate;

OnChangeAssentos

if(Assentos.size() > 0)
{
   assentos_reservados = Reserva[Date_field == input.Date_field && Filme == input.Filme].Assentos.getAll();
   assentos_disponiveis = assentos_reservados.intersect(input.Assentos);

   lista_assentos = input.Assentos;
   lista_assentos.removeall(assentos_disponiveis);

   if(lista_assentos.isEmpty())
   {
      hide assentos_selecionados;
   }
   else
   {
      show assentos_selecionados;
      input.assentos_selecionados = "Assentos selecionados <a>" + lista_assentos + "</a>";
   }
}
else
{
  hide assentos_selecionados;
}

OnChangeData e OnChangeFilme

if(input.Date_field >= zoho.currentdate && input.Filme != null)
{
   img_assento_ocupado = "https://leoandrade.net/leoandrade.net/imagens/1.png";
   img_assento_livre = "https://leoandrade.net/leoandrade.net/imagens/2.png";
   img_assento_selecionado = "https://leoandrade.net/leoandrade.net/imagens/3.png";
   hide assentos_selecionados;
   show Assentos;
   lista_assentos_reservados = Reserva[Date_field == input.Date_field && Filme == input.Filme].Assentos.getAll();
   assentos_reservados_estilo = "";

   for each umAssento in lista_assentos_reservados
   {
      assentos_reservados_estilo = assentos_reservados_estilo + "input[id$=checkboxesEl_zc-Assentos_" + umAssento + "] + label { background: url('" + img_assento_ocupado + "'); background-repeat:no-repeat;width: 40.0px;background-position: 15.0px 0.0px;} input[id$=checkboxesEl_zc-Assentos_" + umAssento + "]:checked + label {background:url(' " + img_assento_ocupado + "');background-repeat: no-repeat;width: 40.0px; height: 40px; background-position: 15.0px 0.0px;}";
   }

   ultima_linha_assento_estilo = "";
   lista_assentos_desc = thisapp.gerar_lista(40,{});
   lista_assentos = lista_assentos_desc.sort(true);
   input.Assentos:ui.add(lista_assentos);
   fileiras = 4;

   for each umAssento in lista_assentos
   {
      if(umAssento.toLong() == fileiras)
      {
         ultima_linha_assento_estilo = ultima_linha_assento_estilo + "input[id$=checkboxesEl_zc-Assentos_" + umAssento + "]+label{margin-right:50px; }";
         fileiras = fileiras + 4;
      }
   }

   input.assentos_estilo = "<style> .flLeft .tempContDiv .zc-Checkbox { display:block;} .form-field .tempContDiv .choice-table-row {display:none;}.form-field .tempContDiv .choice-table-cell{ display:block;float:left;padding:0px;} .customCheckbox+label, .customRadio+label{ margin-right:0 px;border:none; background:url('" + img_assento_livre + "');padding: 12px;background-repeat: no-repeat; width:40px; height: 20px; background-position: 15px 0px;} .customCheckbox:checked+label{background:none; border:none; background-image: url('" + img_assento_selecionado + "');background-repeat: no-repeat; width: 40px; height: 20px; background-position: 15px 0px;} .customCheckbox:focus+label, .customRadio:focus+label{ border:none;} .choice-label-text { display:none; } .zc_checkbox:checked + label:after {display: none;} label+label { display:none; }" + assentos_reservados_estilo + " .form-field .tempContDiv { display: table; Width:650px;} " + ultima_linha_assento_estilo + ".form-group label.zc-Assentos-label{display:none;} .choice-table-cell span { padding:5px 0 0 0;} </style>";
}
else if(input.Date_field < zoho.currentdate)
{
   Assentos.deselectall();
   hide Assentos;
   show assentos_selecionados;
   input.assentos_selecionados = "<p style='color:red'>Selecione uma data futura</p>";
}
else
{
   Assentos.deselectall();
   hide Assentos;
   show assentos_selecionados;
   input.assentos_selecionados = "<p style='color:red'>Selecione um filme</p>";
}