prefeiturasp/SME-PratoAberto-Editor

View on GitHub
templates/pendencias_deletadas.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Prato Aberto - Editor Cardapio</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .jumbotron {
            margin-top: 15px;
            text-align: center;
        }

        /* Objetos da tabela */
        .row {
            margin-top: 30px;
            padding: 0 10px;
        }

        .container {
            width: 90%;
        }

        .clickable {
            cursor: pointer;
        }

        .panel-heading div {
            margin-top: -18px;
            font-size: 15px;
        }

        .panel-heading div span {
            margin-left: 5px;
        }

        .panel-body {
            display: none;
        }

        .table-responsive {
            height: 500px;
            overflow-y: auto;
            overflow-x: auto;
        }

        .table>tbody>tr>th,
        .table>tfoot>tr>th {
            font-size: 10px;
        }

        .table>tbody>tr>td,
        .table>tfoot>tr>td {
            vertical-align: inherit;
        }

        .navbar-nav {
            margin-top: 8px;
            padding-left: 10px;
        }

        thead th {
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            background: white;
            z-index: 10;
        }
    </style>
</head>

<body>

    {% include 'top_header.html' %}


    <!-- Upload form -->
    <div class="modal fade" tabindex="-1" role="dialog" id="xml_form">
        <div class="modal-dialog" role="document">
            <form method="post" action="/editor/upload" enctype="multipart/form-data">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Upload XML</h4>
                    </div>
                    <div class="modal-body">
                        <p>
                            <input type="file" name="file" class="form-control-file">
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                        <button type="submit" class="btn btn-primary">Enviar</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Informações do agrupamento -->
    <div class="row">
        <div class="col-12" style="text-align: left">
            <a href="/editor/pendencias_unidades_especiais" class="col-md-4 btn btn-lg btn-info">Histórico de Cardápios
                Unidades Especiais</a>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <a href="/editor/pendencias_publicacoes" class="col-md-3 btn btn-lg btn-primary">Cardápios Pendentes</a>
            <a href="/editor/pendencias_publicadas?filtro_periodo=30" class="col-md-offset-1 col-md-3 btn btn-lg btn-success">Cardápios
                Publicados</a>
            <a class="col-md-offset-1 col-md-3 btn btn-lg btn-default disabled">Cardápios Deletados</a>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 dropdown" style="width: 22%">
            <label> Selecione a semana:</label>
            <select class="form-control input" id="filtro_semana" name="filtro_semana" style='overflow:hidden'>
                {% for semana in semanas %}
                <option>{{ semana }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="row">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h2 class="panel-title">Cardápios Deletados</h2>
                <div class="pull-right">
                    <span class="clickable filter" data-toggle="tooltip" title="Toggle table filter"
                        data-container="body">
                        <i class="glyphicon glyphicon-filter"></i>
                    </span>
                </div>
            </div>
            <div class="panel-body">
                <input type="text" class="form-control" id="task-table-filter" data-action="filter"
                    data-filters="#task-table" placeholder="Filter Tasks" />
            </div>
            <div class="table-responsive">
                <div class="panel panel-default">
                    <table class="table table-hover table-striped" id="task-table">
                        <thead>
                            <tr id="thead-table">
                                <th style="cursor:pointer; word-wrap: break-word;min-width: 50px;max-width: 50px;">
                                    <input type="checkbox" id="check_all" />
                                </th>
                                <th style="display: none;"></th>
                                <th onclick="w3.sortHTML('#task-table', '.item', 'td:nth-child(2)')"
                                    style="cursor:pointer; word-wrap: break-word;min-width: 150px;max-width: 150px;">
                                    TIPO
                                    GESTÃO <i class="fa fa-sort" aria-hidden="true"></i></th>
                                <th onclick="w3.sortHTML('#task-table', '.item', 'td:nth-child(3)')"
                                    style="cursor:pointer; word-wrap: break-word;min-width: 150px;max-width: 150px;">
                                    TIPO
                                    ESCOLA <i class="fa fa-sort" aria-hidden="true"></i></th>
                                <th onclick="w3.sortHTML('#task-table', '.item', 'td:nth-child(4)')"
                                    style="cursor:pointer; word-wrap: break-word;min-width: 160px;max-width: 160px;">
                                    AGRUPAMENTO <i class="fa fa-sort" aria-hidden="true"></i></th>
                                <th onclick="w3.sortHTML('#task-table', '.item', 'td:nth-child(5)')"
                                    style="cursor:pointer; word-wrap: break-word;min-width: 160px;max-width: 160px;">
                                    IDADE
                                    <i class="fa fa-sort" aria-hidden="true"></i>
                                </th>
                                <th onclick="w3.sortHTML('#task-table', '.item', 'td:nth-child(6)')"
                                    style="cursor:pointer; word-wrap: break-word;min-width: 140px;max-width: 140px;">
                                    DATA
                                    INICIAL <i class="fa fa-sort" aria-hidden="true"></i></th>
                                <th onclick="w3.sortHTML('#task-table', '.item', 'td:nth-child(7)')"
                                    style="cursor:pointer; word-wrap: break-word;min-width: 140px;max-width: 140px;">
                                    DATA
                                    FINAL <i class="fa fa-sort" aria-hidden="true"></i></th>
                                <th onclick="w3.sortHTML('#task-table', '.item', 'td:nth-child(8)')"
                                    style="cursor:pointer; word-wrap: break-word;min-width: 180px;max-width: 180px;">
                                    STATUS<i class="fa fa-sort" aria-hidden="true"></i></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%" style="display: none;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for linha in pendentes %}
                            <tr class="item" style="display: none;">
                                <td class="id_mongo"><input type="checkbox" class="check_remove"
                                        value="{{ linha[10] }}" /></td>
                                <td class="ids" style="display: none;">{{ linha[10] }}</td>
                                <td class="semana" style="display: none;">{{ linha[8] }}</td>
                                <td class="tipo_gestao">{{ linha[0] }}</td>
                                <td class="tipo_escola">{{ linha[1] }}</td>
                                <td class="agrupamento">{{ linha[2] }}</td>
                                <td class="idade">{{ linha[3] }}</td>
                                <td class="data_inicial">{{ linha[4] }}</td>
                                <td class="data_final">{{ linha[5] }}</td>
                                <td class="status">{{ linha[6] }}</td>
                                <td width="2%"><a class="btn btn-info"
                                        href="/editor/visualizador_cardapio?{{ linha[7] }}">VER</a></td>
                                <td width="2%">
                                    <button class="btn btn-warning pendente" value="PENDENTE">VOLTAR PARA EDIÇÃO
                                    </button>
                                </td>
                                <td class="semana_inter" style="display: none;">{{ linha[4] }} - {{ linha[5] }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div align="center">
        <button id="remover" class="btn btn-danger btn-lg">Remover Selecionados</button>
    </div>
    <footer class="container-fluid text-center">
        <br>
        <p><a href="http://pratoaberto.sme.prefeitura.sp.gov.br/"
                title="Projeto Prato Aberto">http://pratoaberto.sme.prefeitura.sp.gov.br/</a>
        </p>
    </footer>
    </div>

    <!-- Script com a funcionalidade do filtro da tabela -->
    <script>
        /**
         *   I don't recommend using this plugin on large tables, I just wrote it to make the demo useable. It will work fine for smaller tables
         *   but will likely encounter performance issues on larger tables.
         *
         *       <input type="text" class="form-control" id="dev-table-filter" data-action="filter" data-filters="#dev-table" placeholder="Filter Developers" />
         *       $(input-element).filterTable()
         *
         *   The important attributes are 'data-action="filter"' and 'data-filters="#table-selector"'
         */
        (function () {
            'use strict';
            var $ = jQuery;
            $.fn.extend({
                filterTable: function () {
                    return this.each(function () {
                        $(this).on('keyup', function (e) {
                            $('.filterTable_no_results').remove();
                            var $this = $(this),
                                search = $this.val().toLowerCase(),
                                target = $this.attr('data-filters'),
                                $target = $(target),
                                $rows = $target.find('tbody tr');

                            if (search == '') {
                                $rows.show();
                            } else {
                                $rows.each(function () {
                                    var $this = $(this);
                                    $this.text().toLowerCase().indexOf(search) === -1 ? $this.hide() : $this.show();
                                })
                                if ($target.find('tbody tr:visible').size() === 0) {
                                    var col_count = $target.find('tr').first().find('td').size();
                                    var no_results = $('<tr class="filterTable_no_results"><td colspan="' + col_count + '">No results found</td></tr>')
                                    $target.find('tbody').append(no_results);
                                }
                            }
                        });
                    });
                }
            });
            $('[data-action="filter"]').filterTable();
        })(jQuery);

        $(function () {
            // attach table filter plugin to inputs
            $('[data-action="filter"]').filterTable();

            $('.container').on('click', '.panel-heading span.filter', function (e) {
                var $this = $(this),
                    $panel = $this.parents('.panel');

                $panel.find('.panel-body').slideToggle();
                if ($this.css('display') != 'none') {
                    $panel.find('.panel-body input').focus();
                }
            });
            $('[data-toggle="tooltip"]').tooltip();
        })
    </script>

    <!-- Botões de ordenação da tabela -->
    <script src="/editor/static/js/w3.js"></script>

    <!-- PENDENTE linha da tabela -->
    <script>
        $(".pendente").click(function () {
            var $row = $(this).closest("tr");    // Find the row
            var $text = $row.find(".ids").text(); // Find the text
            var lista_ids = $text.split(',');
            var cardapios = []
            $.each(lista_ids, function (index, value) {
                cardapios.push({
                    "_id": { "$oid": value },
                    "status": "PENDENTE"
                });
            });

            $.ajax({
                type: 'POST',
                url: '/editor/atualiza_cardapio',
                data: JSON.stringify(cardapios),
                contentType: 'application/json',
                //dataType: 'json',
                success: function (data, textStatus, jqXHR) {
                    //console.log("Cardapio publicado com sucesso");
                    $row.hide();
                }
            });
        });
    </script>

    <!-- Filtro da semana ao carregar a pagina -->
    <script>
        $(document).ready(function () {
            var semana_filtro = $('#filtro_semana').val()
            $('#task-table tr').not(':first').each(function () {
                var semana_linha = $($(this).children('td')[12]).text()
                if (semana_linha == semana_filtro) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
    </script>

    <!-- Fitra a tabela ao mudar o selector -->
    <script>
        $(function () {
            //change to two ? how?
            $('#filtro_semana').change(function () {
                var semana_filtro = $(this).val();
                $('#task-table tr').not(':first').each(function () {
                    var semana_linha = $($(this).children('td')[12]).text()
                    if (semana_linha == semana_filtro) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }

                });
            });
        });
    </script>


    <!-- Função para informar remoção efetuada -->
    <script>
        $(function () {

            var param = window.location.search;

            if (param == '?removed=1') {
                alert('Cardápio(s) removido(s) com sucesso.');
            }
        });
    </script>
    <!-- Função de selecionar todos -->
    <script>
        $(function () {
            $('#check_all').click(function () {
                $('input:checkbox').not(this).prop('checked', this.checked);
            });
        });
    </script>


    <!-- Função de remover selecionados -->
    <script>
        $(function () {
            $('#remover').click(function () {
                var ids = [];
                var total = 0;
                $('.check_remove').each(function () {
                    if ($(this).is(':checked')) {

                        total++;

                        json = new Object();

                        json._ids = $(this).val();
                        ids.push(json);
                    }
                });

                if (total == 0) {
                    alert('Nenhum cardápio foi selecionado!');
                } else {
                    if (confirm('Deseja realmente remover o(s) cardápio(s) selecionado(s), os registros serão removidos permanentemente sem possibilidade de recuperação! Deseja continuar?')) {

                        jQuery.ajax({
                            url: '/editor/remove-cardapio',
                            type: 'DELETE',
                            data: { data: JSON.stringify(ids) },
                            dataType: 'html',
                            success: function (resp) {
                                alert(resp);
                                location.reload();
                            }
                        });
                    }
                }
            });
        });
    </script>


</body>

</html>