goworking-mesas/blueprints/goworking/templates/index.html

{% extends "default_layout.html" %}
{% block title %}{{ title }}{% endblock %}
{% block css %}
{% endblock %}
{% block nav %}
{% endblock %}
{% block main %}
<div class="container-fluid">
<div class="row">
  <div class="col-2"><img id="logotipo" src="{{
    url_for('.static', filename = 'img/FdoF_logo_preto.png')
  }}" /></div>
</div> <!-- row -->
<div class="row">
  <div class="col-2">&nbsp;</div>
  <div class="col-2 table-primary">Cadeira ocupada</div>
  <div class="col-2 table-success">Cadeira Vazia</div>
<!--
  <div class="col-2 table-warning">Mesa</div>
-->
<!--
  <div class="col badge-secondary">Corredor (vazio)</div>
-->
<!--
  <div class="col badge-dark">Corredor (intersecção)</div>
-->
<!--
  <div class="col badge-danger">Posição de mesa</div>
-->
<!--
  <div class="col active">Active</div>
-->
<!--
  <div class="col info">Info</div>
-->
<!--
  <div class="col light">Light</div>
-->
</div> <!-- row -->
<div class="row">
  <div class="col-12">
    {% set contador = namespace(valor = 0) %}
    <!--
      Goworking atualmente é um grid de 10 linhas por 4 colunas, onde 
      seis filas têm duas mesas e duas filas têm quatro mesas. A
      primeira fila é o jardim de inverno e a última fila é a recepção.
    -->
    {% for row in range(10) %} <!-- for row in range(10) -->
      <div class="row">
      {% for col in range(4) %} <!-- for col in range(4) -->
        <div class="col goworking-espaco-{{
          espacos[contador.valor].numero }}">
        <!-- Se não existir o campo 'mesa' no objeto do espaço, então
        é um espaço sem mesa. -->
        {% if espacos[contador.valor].mesa %}
          <table class="goworking-mesa-{{
            espacos[contador.valor]['mesa']['numero']
          }} table table-borderless table-responsive">
            <tbody>
              <tr>
                <td><!-- {{ espacos[contador.valor].numero }} --></td>
                <td class="table-{% if espacos[contador.valor].mesa.cadeiras[0].habitante %}primary{% else %}success{% endif %}"><button
                  class="btn table-{% if espacos[contador.valor].mesa.cadeiras[0].habitante %}primary{% else %}success{% endif %}"
                  type="button"
                  data-toggle="modal"
                  data-target="#modal-cadeira-{{
                    espacos[contador.valor].mesa.cadeiras[0].id
                  }}"
                >{{
                  espacos[contador.valor].mesa.cadeiras[0].numero
                }}</button></td>
                <td></td>
                <td class="table-{% if espacos[contador.valor].mesa.cadeiras[1].habitante %}primary{% else %}success{% endif %}"><button
                  class="btn table-{% if espacos[contador.valor].mesa.cadeiras[1].habitante %}primary{% else %}success{% endif %}"
                  type="button"
                  data-toggle="modal"
                  data-target="#modal-cadeira-{{
                    espacos[contador.valor].mesa.cadeiras[1].id
                  }}"
                >{{
                  espacos[contador.valor].mesa.cadeiras[1].numero
                }}</button></td>
                <td></td>
              </tr>
              <tr>
                <td class="mesa">&nbsp;</td>
                <td class="mesa">&nbsp;</td>
                <td class="mesa">&nbsp;</td>
                <td class="mesa">&nbsp;</td>
                <td class="mesa">&nbsp;</td>
              </tr>
              <tr>
                <td class="mesa">&nbsp;</td>
                <td class="mesa">&nbsp;</td>
                <td class="mesa">Mesa {{
                  espacos[contador.valor].mesa.numero }}</td>
                <td class="mesa">&nbsp;</td>
                <td class="mesa">&nbsp;</td>
              </tr>
              <tr>
                <td class="mesa">&nbsp;</td>
                <td class="mesa">&nbsp;</td>
                <td class="mesa">&nbsp;</td>
                <td class="mesa">&nbsp;</td>
                <td class="mesa">&nbsp;</td>
              </tr>
              <tr>
                <td></td>
                <td class="table-{% if espacos[contador.valor].mesa.cadeiras[2].habitante %}primary{% else %}success{% endif %}"><button
                  class="btn table-{% if espacos[contador.valor].mesa.cadeiras[2].habitante %}primary{% else %}success{% endif %}"
                  type="button"
                  data-toggle="modal"
                  data-target="#modal-cadeira-{{
                    espacos[contador.valor].mesa.cadeiras[2].id
                  }}"
                >{{
                  espacos[contador.valor].mesa.cadeiras[2].numero
                }}</button></td>
                <td></td>
                <td class="table-{% if espacos[contador.valor].mesa.cadeiras[3].habitante %}primary{% else %}success{% endif %}"><button
                  class="btn table-{% if espacos[contador.valor].mesa.cadeiras[3].habitante %}primary{% else %}success{% endif %}"
                  type="button"
                  data-toggle="modal"
                  data-target="#modal-cadeira-{{
                    espacos[contador.valor].mesa.cadeiras[3].id
                  }}"
                >{{
                  espacos[contador.valor].mesa.cadeiras[3].numero
                }}</button></td>
                <td></td>
              </tr>
            </tbody>
          </table>
        {% else %}
          <table class="
            goworking-vazio table table-borderless table-responsive">
            <tbody>
              <tr>
                <td><!-- {{ espacos[contador.valor].numero }} --></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>{{ espacos[contador.valor].desc }}</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </tbody>
          </table>
        {% endif %}
        </div> <!-- col goworking-espaco-{{
          espacos[contador.valor].numero }} -->
        {% set contador.valor = contador.valor + 1 %}
      {% endfor %} <!-- endfor col in range(4) -->
      </div> <!-- row -->
    {% endfor %} <!-- endfor row in range(10) -->
  </div> <!-- col-12 -->
</div> <!-- row -->
</div> <!-- container-fluid -->
{% endblock %}
{% block javascript %}
{% endblock %}
{% block modal %}
{% for habitante in habitantes %} <!-- for habitante in habitantes -->
<div
  class="modal fade"
  id="modal-habitante-{{ habitante.id }}"
  tabindex="-1"
  role="dialog"
  aria-labelledby="habitante-{{ habitante.id }}"
  aria-hidden="true"
  style="background-color: #e8e8e8;"
>
  <div class="modal-dialog modal-lg modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"
          id="habitante-{{ habitante.id }}">{{
            habitante.nome }}</h5>
        <button type="button" class="close" data-dismiss="modal"
          aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
        {% if habitante.empresa %}
          <div class="row">
            <div class="col-6 ml-auto">Empresa</div>
            <div class="col-6 ml-auto"><a
              href="#"
              data-toggle="modal"
              data-target="#modal-empresa-{{ habitante.empresa.id }}"
              data-dismiss="modal"
            >{{ habitante.empresa.nome }}</a></div>
          </div> <!-- row -->
        {% endif %}
          <div class="row">
            <div class="col-6 ml-auto">Cadeira</div>
          {% if habitante.cadeira %}
            <div class="col-6 ml-auto"><a
              href="#"
              data-toggle="modal"
              data-target="#modal-cadeira-{{ habitante.cadeira.id }}"
              data-dismiss="modal"
            >{{ habitante.cadeira.numero }}</a></div>
          {% else %}
            <div class="col-6 ml-auto alert-danger">Nenhuma&excl; Habitante est&aacute; sem cadeira&excl;</div>
          {% endif %}
          </div> <!-- row -->
        {% if habitante.cpf %}
          <div class="row">
            <div class="col-6 ml-auto">CPF</div>
            <div class="col-6 ml-auto">{{ habitante.cpf|cpf }}</div>
          </div> <!-- row -->
        {% endif %}
        {% if habitante.desc %}
          <div class="row">
            <div class="col-6 ml-auto">Mais informa&ccedil;&otilde;es</div>
            <div class="col-6 ml-auto">{{ habitante.desc }}</div>
          </div> <!-- row -->
        {% endif %}
        <div class="row">
          <div class="col-6 ml-auto">Data de entrada</div>
          <div class="col-6 ml-auto">{{ habitante.data_entrada|data }}</div>
        </div> <!-- row -->
        <div class="row">
          <div class="col-6 ml-auto">Data de renova&ccedil;&atilde;o</div>
          <div class="col-6 ml-auto">{{ habitante.data_renovacao|data }}</div>
        </div> <!-- row -->
        <div class="row">
          <div class="col-6 ml-auto">Data de sa&iacute;da</div>
          <div class="col-6 ml-auto">{{ habitante.data_saida|data }}</div>
        </div> <!-- row -->
        </div> <!-- container-fluid -->
      </div> <!-- modal-body -->
      <div class="modal-footer justify-content-center">
<!--
        <button type="button" class="btn btn-success" data-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
-->
        <a
          role="button"
          class="btn btn-info"
          href="{{
            url_for(
              'goworking.habitante_editar',
              id = habitante.id,
            )
          }}"
        >Editar informa&ccedil;&otilde;es</a>
      </div> <!-- modal-footer justify-content-center -->
    </div> <!-- modal-content -->
  </div> <!-- modal-dialog modal-lg modal-xl -->
</div> <!-- modal fade -->
{% endfor %} <!-- endfor habitante in habitantes -->
{% for empresa in empresas %} <!-- for empresa in empresas -->
<div
  class="modal fade"
  id="modal-empresa-{{ empresa.id }}"
  tabindex="-1"
  role="dialog"
  aria-labelledby="empresa-{{ empresa.id }}"
  aria-hidden="true"
  style="background-color: #e8e8e8;"
>
  <div class="modal-dialog modal-lg modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"
          id="empresa-{{ empresa.id }}">{{
            empresa.nome }}</h5>
        <button type="button" class="close" data-dismiss="modal"
          aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
        {% if empresa.habitantes %}
          <div class="row">
            <div class="col-6 ml-auto">Habitantes</div>
          <!-- for habitante in empresa.habitantes -->
          {% for habitante in empresa.habitantes %}
            <div class="col-1 ml-auto"><a
              href="#"
              data-toggle="modal"
              data-target="#modal-habitante-{{ habitante.id }}"
              data-dismiss="modal"
            >{{ habitante.nome }}</a></div>
          {% endfor %}
          <!-- endfor habitante in empresa.habitantes -->
          </div> <!-- row -->
        {% endif %} <!-- endif empresa.habitantes -->
        {% if empresa.cnpj %}
          <div class="row">
            <div class="col-6 ml-auto">CNPJ</div>
            <div class="col-6 ml-auto">{{ empresa.cnpj|cnpj }}</div>
          </div> <!-- row -->
        {% endif %}
        {% if empresa.desc %}
          <div class="row">
            <div class="col-6 ml-auto">Mais informa&ccedil;&otilde;es</div>
            <div class="col-6 ml-auto">{{ empresa.desc }}</div>
          </div> <!-- row -->
        {% endif %}
        </div> <!-- container-fluid -->
      </div> <!-- modal-body -->
      <div class="modal-footer justify-content-center">
<!--
        <button type="button" class="btn btn-success" data-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
-->
        <a
          role="button"
          class="btn btn-info"
          href="{{
            url_for(
              'goworking.empresa_editar',
              id = empresa.id,
            )
          }}"
        >Editar informa&ccedil;&otilde;es</a>
      </div> <!-- modal-footer justify-content-center -->
    </div> <!-- modal-content -->
  </div> <!-- modal-dialog modal-lg modal-xl -->
</div> <!-- modal fade -->
{% endfor %} <!-- endfor empresa in empresas -->
{% for cadeira in cadeiras %} <!-- for cadeira in cadeiras -->
<div
  class="modal fade"
  id="modal-cadeira-{{ cadeira.id }}"
  tabindex="-1"
  role="dialog"
  aria-labelledby="cadeira-{{ cadeira.id }}"
  aria-hidden="true"
  style="background-color: #d21d21d21;"
>
  <div class="modal-dialog modal-lg modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"
          id="cadeira-{{ cadeira.id }}">Cadeira {{
            cadeira.numero }}</h5>
        <button type="button" class="close" data-dismiss="modal"
          aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
        {% if cadeira.mesa %}
          <div class="row">
            <div class="col-6 ml-auto">Mesa</div>
            <div class="col-6 ml-auto">{{ cadeira.mesa.numero }}</div>
          </div> <!-- row -->
        {% endif %}
          <div class="row">
            <div class="col-6 ml-auto">Habitante</div>
          {% if cadeira.habitante %}
            <div class="col-6 ml-auto"><a
              href="#"
              data-toggle="modal"
              data-target="#modal-habitante-{{ cadeira.habitante.id }}"
              data-dismiss="modal"
            >{{ cadeira.habitante.nome }}</a></div>
          {% else %}
            <div class="col-6 ml-auto alert-danger">Ningu&eacute;m&excl; Cadeiras vazias s&atilde;o chatas...</div>
          {% endif %}
          </div> <!-- row -->
        {% if cadeira.desc %}
          <div class="row">
            <div class="col-6 ml-auto">Detalhes</div>
            <div class="col-6 ml-auto">{{ cadeira.desc }}</div>
          </div> <!-- row -->
        {% endif %}
        </div> <!-- container-fluid -->
      </div> <!-- modal-body -->
      <div class="modal-footer justify-content-center">
<!--
        <button type="button" class="btn btn-success" data-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
-->
        <a
          role="button"
          class="btn btn-info"
          href="{{
            url_for(
              'goworking.cadeira_editar',
              id = cadeira.id,
            )
          }}"
        >Editar informa&ccedil;&otilde;es da cadeira</a>
        {% if cadeira.habitante %}
        <a
          role="button"
          class="btn btn-info"
          href="{{
            url_for(
              'goworking.habitante_editar',
              id = cadeira.habitante.id,
            )
          }}"
        >Editar informa&ccedil;&otilde;es de habitante</a>
        {% else %}
        <a
          role="button"
          class="btn btn-success"
          href="{{
            url_for(
              'goworking.habitante_cadeira',
              id_cadeira = cadeira.id,
            )
          }}"
        >Adicionar habitante &agrave; cadeira vazia</a>
        {% endif %}
      </div> <!-- modal-footer justify-content-center -->
    </div> <!-- modal-content -->
  </div> <!-- modal-dialog modal-lg modal-xl -->
</div> <!-- modal fade -->
{% endfor %} <!-- endfor cadeira in cadeiras -->
{% endblock %}