sapl/sapl/templates/sdr/deliberacaoremota.html

{% extends "crud/detail.html" %}
{% load i18n common_tags %}
{% load render_bundle from webpack_loader %}

{% block title %}
  <h2 class="page-header">Sistema de Deliberação Remota (SDR)</h2>
{% endblock %}

{% block base_content %}
    {{ block.super }}
    {% if object %}
        <div id="content">
            <h4><b>Título:</b> {{ object.titulo }}<br/></h4>
            <h4><b>Descrição:</b> {% if object.descricao %}{{ object.descricao }}{% else %}Sem descrição.{% endif %}<br/></h4>
            <h5><b>ID:</b> {{ object.chat_id }}</h5><br/>
            {% if is_parlamentar %}
                <h4><b>Parlamentar:</b> {{ parlamentar.nome_parlamentar }}</h4><br/>
            {% else %}
                <h4><b>Usuário:</b> {{ nome_usuario }}</h4><br/>
            {% endif %}
        </div>
        <div class="container">
            {% if not object.finalizada %}
                <div id="meet" class="col-md"></div>
            {% else %}
                <font size="3"><p align="center"><b>Atenção! Deliberação Remota finalizada.</b></p></font>
            {% endif %}
            <div id="painel" class="col-md">
                {% if object.sessao_plenaria %}
                    <div class="row"><div id="dados_basicos" class="sm-12" style="margin-right:60px"></div></div>
                    <div class="row"><div id="titulo_expediente" class="sm-12" style="margin-right:60px"></div></div>
                    <div class="row">
                        <div id="presenca_sessao" class="sm-6" style="margin-top: 6px; margin-right:60px"></div>
                        <div id="oradores_expediente" class="sm-6" style="margin-top: 6px; margin-right:60px"></div>
                    </div>
                    <div class="row">
                        <div class="sm-12">
                            <table class="table table-striped table-hover">
                                <thead id="thead_tabela_expediente"></thead>
                                <tbody id="materias_expediente"></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="row"><div id="titulo_ordemdia" class="sm-12" style="margin-right:60px"></div></div>
                    <div class="row">
                        <div id="presenca_ordemdia" class="sm-6" style="margin-top: 6px; margin-right:60px"></div>
                        <div id="oradores_ordemdia" class="sm-6" style="margin-top: 6px; margin-right:60px"></div>
                    </div>
                    <div class="row">
                        <div class="sm-12">
                            <table class="table table-striped table-hover">
                                <thead id="thead_tabela_ordemdia"></thead>
                                <tbody id=materias_ordemdia></tbody>
                            </table>
                        </div>
                    </div>    
                {% endif %}
            </div>
        </div>
    {% else %}
        <font size="5"><p align="center"><b>Erro! Deliberação Remota não encontrada.</b></p></font>
    {% endif %}
    <br/>
{% endblock base_content %}

{% block extra_js %}
    {{ block.super }}
    <script src='https://meet.jit.si/external_api.js'></script>
    <script language="Javascript">
        api = undefined;
        $(document).ready(function() {
            const domain = 'meet.jit.si';
            const options= {
                roomName: '{{ object.chat_id }}',
                // width: 700,
                height: 700,
                configOverwrite: { defaultLanguage: 'ptBR' },
                parentNode: document.querySelector('#meet'),
                interfaceConfigOverwrite: {TOOLBAR_BUTTONS: [
                    'microphone', 'camera', 'hangup', 'chat', 'recording', 'livestreaming', 'raisehand', 'videoquality', 'shortcuts', 'tileview'
                ]}
            };
            
            api = new JitsiMeetExternalAPI(domain, options);

            api.executeCommand('toggleTileView');
            // api.executeCommand('toggleChat');
            api.executeCommand('subject', '{{ object.titulo }}');
            api.executeCommand('displayName', '{{ nome_usuario }}');

            // api.addEventListener('videoConferenceJoined', (response) => {
            //     api.executeCommand('password', {{ password }});
            // });

            api.on('readyToClose', () => {
                console.log('Closed session');
                window.location.href = "{% url 'sapl.sdr:deliberacaoremota_list' %}";
            });
        });
    </script>

    <script language="Javascript">
        $(document).ready(function() { (function poll() {
            "{% if user.is_anonymous %}"
                window.location.href = "{% url 'sapl.base:login' %}?next=/sdr/chat/{{object.id}}"
            "{% endif %}"

            "{% if object.sessao_plenaria %}"
                $.ajax({
                    url: "{% url 'sapl.sdr:dados_deliberacao_remota' object.sessao_plenaria.id %}",
                    type: "GET",
                    success: function(data) {
                        $("#dados_basicos").html(
                            "<br/><h3><b>Dados Básicos</b></h3>Sessão: " + data["sessao_plenaria"] + "<br/>Data Início: " + data["sessao_plenaria_data"] + "<br/>Hora Início: " +
                            data["sessao_plenaria_hora_inicio"] + "<br/>Iniciada: " + data["sessao_plenaria_iniciada"] + "<br/>"
                        );

                        if (data["f_em"]){
                            $("#titulo_expediente").html(
                            "<br/><h3><b>Expediente</b></h3>"
                            );

                            let presencas = "";
                            data["sessao_plenaria_presenca"].forEach(presenca => {
                                p = "<li>" + presenca + "</li>";
                                presencas = presencas + p;
                            });
                            if (!presencas){
                                presencas = "<li>Nenhum parlamentar presente.</li>";
                            }
                            $("#presenca_sessao").html("<h3>Presença</h3><ul>" + presencas + "<br/></ul>");

                            let oradores_expediente = "";
                            data["oradores_expediente"].forEach(orador => {
                                o = "<li>" + orador + "</li>";
                                oradores_expediente = oradores_expediente + o;
                            });
                            if (!oradores_expediente){
                                oradores_expediente = "<li>Nenhum orador nessa sessão.</li>";
                            }
                            $("#oradores_expediente").html("<h3>Oradores</h3>" + "<ul>" + oradores_expediente + "<br/></ul>");

                            $("#thead_tabela_expediente").html(
                                "<tr><th>Número Ordem</th><th>Matéria</th><th>Ementa</th><th>Resultado</th></tr>"
                            );

                            let materias_expediente = "";
                            data["materias_expediente"].forEach(materia_expediente => {
                                if (materia_expediente[3] === "Matéria sendo Lida"  || materia_expediente[3] === "Matéria em Votação"){
                                    expediente_1 = "<tr><td><font color='green'><b>" + materia_expediente[0] + "</b></font></td><td><font color='green'><b>" + materia_expediente[1];
                                    expediente_2 = "</b></font></td><td><font color='green'><b>" + materia_expediente[2] + "</b></font></td><td><font color='green'><b>";
                                    expediente_3 = materia_expediente[3] + "</b></font></td></tr>";
                                    materias_expediente = materias_expediente + expediente_1 + expediente_2 + expediente_3;
                                } else {
                                    expediente_1 = "<tr><td>" + materia_expediente[0] + "</td><td>" + materia_expediente[1] + "</td><td>" + materia_expediente[2] + "</td><td><b>";
                                    expediente_2 = materia_expediente[3] + "</b></td></tr>";
                                    materias_expediente = materias_expediente + expediente_1 + expediente_2;
                                }
                            });
                            if (!materias_expediente){
                                materias_expediente = "Nenhum registro encontrado.";
                            }
                            $("#materias_expediente").html(materias_expediente);
                        } else {   
                            $("#titulo_expediente").html("");
                            $("#presenca_sessao").html("");
                            $("#oradores_expediente").html("");
                            $("#thead_tabela_expediente").html("");
                            $("#materias_expediente").html("");
                        }
                        
                        if (data["f_od"]){
                            $("#titulo_ordemdia").html(
                            " <br/><h3><b>Ordem do Dia</b></h3>"
                            );

                            let presencas_ordemdia = "";
                            data["ordemdia_presenca"].forEach(presenca => {
                                p = "<li>" + presenca + "</li>";
                                presencas_ordemdia = presencas_ordemdia + p;
                            });
                            if (!presencas_ordemdia){
                                presencas_ordemdia = "<li>Nenhum parlamentar presente.</li>";
                            }
                            $("#presenca_ordemdia").html("<h3>Presença</h3><ul>" + presencas_ordemdia + "<br/></ul>");

                            let oradores_ordemdia = "";
                            data["oradores_ordemdia"].forEach(orador => {
                                o = "<li>" + orador + "</li>";
                                oradores_ordemdia = oradores_ordemdia + o;
                            });
                            if (!oradores_ordemdia){
                                oradores_ordemdia = "<li>Nenhum orador nessa sessão.</li>";
                            }
                            $("#oradores_ordemdia").html("<h3>Oradores</h3>" + "<ul>" + oradores_ordemdia + "<br/></ul>");

                            $("#thead_tabela_ordemdia").html(
                                "<tr><th>Número Ordem</th><th>Matéria</th><th>Ementa</th><th>Resultado</th></tr>"
                            );

                            let materias_ordemdia = "";
                            data["materias_ordemdia"].forEach(materia_ordemdia => {
                                if (materia_ordemdia[3] === "Matéria sendo Lida" || materia_ordemdia[3] === "Matéria em Votação"){
                                    ordemdia_1 = "<tr><td><font color='green'><b>" + materia_ordemdia[0] + "</b></font></td><td><font color='green'><b>" + materia_ordemdia[1];
                                    ordemdia_2 = "</b></font></td><td><font color='green'><b>" + materia_ordemdia[2] + "</b></font></td><td><font color='green'><b>";
                                    ordemdia_3 = materia_ordemdia[3] + "</b></font></td></tr>";
                                    materias_ordemdia = materias_ordemdia + ordemdia_1 + ordemdia_2 + ordemdia_3;
                                } else {
                                    ordemdia_1 = "<tr><td>" + materia_ordemdia[0] + "</td><td>" + materia_ordemdia[1] + "</td><td>" + materia_ordemdia[2] + "</td><td><b>";
                                    ordemdia_2 = materia_ordemdia[3] + "</b></td></tr>";
                                    materias_ordemdia = materias_ordemdia + ordemdia_1 + ordemdia_2;
                                }
                            });
                            if (!materias_ordemdia){
                                materias_ordemdia = "Nenhum registro encontrado."
                            }
                            $("#materias_ordemdia").html(materias_ordemdia);
                        } else {   
                            $("#titulo_ordemdia").html("");
                            $("#presenca_ordemdia").html("");
                            $("#oradores_ordemdia").html("");
                            $("#thead_tabela_ordemdia").html("");
                            $("#materias_ordemdia").html("");
                        }
                },
                error: function(err) {
                    console.error(err);
                },
                dataType: "json",
                complete: setTimeout(function() {poll()}, 500),
                timeout: 20000 // TODO: decrease
                })
            "{% endif %}" 
        } )(); });
    </script>
{% endblock extra_js %}