templates/unidades_especiais.html
<!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://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/v4-shims.css">,
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Objetos da tabela */
.row {
margin-top: 40px;
padding: 0 10px;
}
.forms {
margin-top: 0px;
padding-top: 10px;
}
.input-form {
display: inline-flex;
}
.container {
width: 90%;
}
.clickable {
cursor: pointer;
}
.panel-heading div {
margin-top: -18px;
font-size: 15px;
}
.panel-body {
display: none;
}
.table-responsive {
height: 500px;
overflow-y: auto;
overflow-x: auto;
}
.panel-heading div span {
margin-left: 5px;
}
.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;
padding-right: 15px;
}
thead th {
position: sticky;
position: -webkit-sticky;
top: 0;
background: white;
z-index: 10;
}
input#cod_eol,
select#school_type,
input#latitude,
input#longitude {
width: 125px;
}
input#school_name,
input#address,
input#neighbourhood,
select#meals,
select#ages {
margin-left: -8px;
width: 452px;
}
select#meals,
select#ages {
height: 120px;
}
label {
text-align: right;
padding: 0;
}
.col-sm-6 {
padding-right: 11px;
}
.checkbox-form {
height: 155px;
overflow: auto;
margin-left: -47px;
}
ul {
list-style-type: none;
}
.ui-autocomplete {
z-index: 2147483647;
}
textarea {
width: 300px;
height: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/editor/pendencias_publicacoes">HOME</a>
</div>
</div>
</nav>
</div>
<div class="row">
<a type="button" class="btn btn-default " href="{{ referrer }}">
<span class="glyphicon glyphicon-chevron-left"></span> VOLTAR PARA CARDÁPIOS
</a>
<button onclick='addSchool()' data-target="#modalAddSchoolForm" class="pull-right btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span style="font-family: inherit">ADICIONAR UNIDADE ESPECIAL</span>
</button>
</div>
<div id='email_user'>
</div>
<div style="padding: 15px 0">
<h3>Prato Aberto - Listagem de Unidades Especiais</h3>
</div>
<!-- Edição da escola -->
<div class="modal fade" tabindex="-1" role="dialog" id="xml_form">
<div class="modal-dialog" role="document" style="width: 70%">
<form method="post" id="post_json" action="/editor/atualiza_historico_escolas"
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">×</span></button>
<h4 class="modal-title">Edição de Unidade Especial</h4>
</div>
<div class="modal-body">
<div class="row" style="padding-right: 30px; padding-bottom: 15px;">
<a onclick="addRowModal()" class="btn btn-primary" style="float: right"><span
class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>
</div>
<div class="table-responsive">
<table class="table table-hover" id="edicao-escola">
<thead>
<tr>
<th style="word-wrap: break-word;"></th>
<th style="word-wrap: break-word;">NOME</th>
<th style="word-wrap: break-word;">DATA CRIACAO</th>
<th style="word-wrap: break-word;min-width: 90px;max-width: 150px;">DATA
INICIO</th>
<th style="word-wrap: break-word;">DATA FIM</th>
<th style="word-wrap: break-word;min-width: 150px;max-width: 150px;">ESCOLAS
</th>
<th style="word-wrap: break-word;"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">FECHAR</button>
<button type="submit" class="btn btn-success">SALVAR</button>
<input type="hidden" name="json_dump" id="json_dump" value="json_dump">
</div>
</div>
</form>
</div>
</div>
<div class="row main" style="padding-top: 30px;">
<div class="panel panel-success">
<div class="panel-heading">
<h2 class="panel-title">Unidades Especiais</h2>
</div>
<div class="table-responsive">
<div>
<table class="table table-bordered table-hover table-striped" id="task-table">
<thead>
<tr>
<th style="word-wrap: break-word;"></th>
<th style="word-wrap: break-word;">NOME</th>
<th style="word-wrap: break-word;">DATA CRIACAO</th>
<th style="word-wrap: break-word;min-width: 90px;max-width: 150px;">DATA INICIO</th>
<th style="word-wrap: break-word;">DATA FIM</th>
<th style="word-wrap: break-word;min-width: 150px;max-width: 150px;">ESCOLAS</th>
<th style="word-wrap: break-word;"></th>
</tr>
</thead>
<tbody>
{% for special_unit in special_units %}
<tr class="item">
<td><a class="btn btn-info" onclick='editRow({{ special_unit["_id"] }})' href="#"
data-toggle="modal"
data-target="#modalAddSchoolForm{{ special_unit['_id'] }}"><i
class="fas fa-edit"></i></a></td>
<td class="nome">{{ special_unit['nome'] }}</td>
<td class="data_criacao">{{ special_unit['data_criacao'] }}</td>
<td class="data_inicio">{{ special_unit['data_inicio'] }}</td>
<td class="data_fim">{{ special_unit['data_fim'] }}</td>
<td class="escolas">
{% for item in special_unit['escolas'] %}
{{ item }},
{% endfor %}
</td>
<td><a class="btn btn-danger" data-toggle="modal"
data-target="#exampleModal{{special_unit['nome']}}" href="#"
data-target="#xml_form"><i class="fas fa-trash-alt"></i></a></td>
<!-- Modal -->
<div class="modal fade" id="exampleModal{{special_unit['nome']}}" tabindex="-1"
role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Exclusão de escola
</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Tem certeza que deseja excluir essa unidade especial?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
id="{{special_unit['nome']}}"
data-dismiss="modal">Fechar</button>
<a href="#" onclick='deleteSpecialUnit({{special_unit}})'
type="button" class="btn btn-danger">Excluir</a>
</div>
</div>
</div>
</div>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</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>
<table id="lista-modificacoes">
<tbody style="display:none">
</table>
</footer>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<ul class=flashes>
{% for category, message in messages %}
<li id="mensagem" class="{{ category }} hidden">{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</div>
<div class="modal fade" id="modalAddSchoolForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style="width: 130%">
<div class="modal-header text-center">
{% if form.identifier.data %}
<h4 class="modal-title w-100 pull-left font-weight-bold">Editar unidade especial</h4>
{% endif %}
{% if not form.identifier.data %}
<h4 class="modal-title w-100 pull-left font-weight-bold">Adicionar unidade especial</h4>
{% endif %}
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{% if form.identifier.data %}
<form method="post" action="/editor/unidades_especiais/{{ form.identifier.data }}?openModal=true">
{% else %}
<form method="post" action="/editor/unidades_especiais?openModal=true">
{% endif %}
<div class="row forms">
<div class="col-xs-12">
<label class="col-sm-4 col-xs-12">{{ form_filter.school_types.label }}</label>
<span class="checkbox-form col-sm-4 col-xs-12">{{ form_filter.school_types }}</span>
<button type="submit" class="btn btn-info col-sm-offset-1 col-sm-2">APLICAR</button>
</div>
</div>
<div class="row forms">
<div class="col-xs-12">
<label class="col-sm-4 col-xs-12">{{ form_filter.school_autocomplete.label }}</label>
<span class="col-sm-4 col-xs-12">{{ form_filter.school_autocomplete }}</span>
<button type="submit" class="btn btn-info col-sm-offset-1 col-sm-2">ADICIONAR</button>
</div>
</div>
</form>
<hr />
<form method=post action="/editor/adicionar_unidade_especial">
<dl>
<div>
<div class="row forms">
<div style="display: none">
<label>{{ form.identifier.label }}</label>
<span>{{ form.identifier }}</span>
</div>
<div class="col-sm-offset-2 col-sm-8 col-xs-12">
{{ form.special_unit.label }}
<div>{{ form.special_unit }}</div>
</div>
</div>
<div class="row forms">
<div class="col-sm-offset-2 col-sm-4 col-xs-12">
{{form.initial_date.label}}
<div>
{{form.initial_date}}
</div>
</div>
<div class="col-sm-4 col-xs-12">
{{form.end_date.label}}
<div>
{{form.end_date}}
</div>
</div>
</div>
<div class="row forms">
<div class="col-xs-12">
<label class="col-sm-3 col-xs-12">{{ form.schools.label }}</label>
<span class="checkbox-form col-sm-9 col-xs-12">{{ form.schools }}</span>
</div>
</div>
</div>
</dl>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">FECHAR</button>
<button type="submit" class="btn btn-primary">SALVAR</button>
</div>
</form>
</div>
</div>
</div>
<!-- Adiciona linhas na tabela -->
<script>
function addRow() {
$('#task-table').prepend(
"<tr class='item' id=''>" +
"<td><a class='btn btn-info btn-sm' onclick='editRow(this)' href='#' data-toggle='modal' data-target='#xml_form'>EDITAR</a> <a style='cursor:pointer' onclick='delete_row(this)' class='btn btn-danger btn-sm'>REMOVER</a></td>" +
"<td class='cod_eol' contenteditable='false'>COD EOL</td>" +
"<td class='tipo_atendimento' contenteditable='false'>GESTÃO</td>" +
"<td class='tipo_unidade' contenteditable='false'>ESCOLA</td>" +
//"<td class='agrupamento' contenteditable='false'>A DEFINIR</td>" +
//"<td class='edital' contenteditable='false'>EDITAL </td>" +
"<td class='data' contenteditable='false'></td>" +
"<td class='nome' contenteditable='false'></td>" +
//"<td class='endereco' contenteditable='false'></td>" +
//"<td class='bairro' contenteditable='false'></td>" +
//"<td class='lat' contenteditable='false'></td>" +
//"<td class='lon' contenteditable='false'></td>" +
//"<td class='status' contenteditable='false'></td>" +
"<td class='refeicoes' contenteditable='false'></td>" +
"<td class='idades' contenteditable='false'></td>" +
"</tr>"
);
};
</script>
<!-- Cria json da tabela -->
<script>
$('#post_json').submit(function () {
json_dump = [];
$('#edicao-escola tr.item').each(function () {
var cod_eol = $($(this).children('td')[1]).text();
var tipo_atendimento = $($(this).children('td')[2]).text();
var tipo_unidade = $($(this).children('td')[3]).text();
var agrupamento = $($(this).children('td')[4]).text();
var edital = $($(this).children('td')[5]).text();
var data = $($(this).children('td')[6]).text();
var nome = $($(this).children('td')[7]).text();
var endereco = $($(this).children('td')[8]).text();
var bairro = $($(this).children('td')[9]).text();
var lat = $($(this).children('td')[10]).text();
var lon = $($(this).children('td')[11]).text();
var status = $($(this).children('td')[12]).text();
var refeicoes = $($(this).children('td')[13]).text();
var idades = $($(this).children('td')[14]).text();
modificacao = {
'_id': cod_eol,
'tipo_atendimento': tipo_atendimento,
'tipo_unidade': tipo_unidade,
'agrupamento': agrupamento,
'edital': edital,
'data_inicio_vigencia': data,
'nome': nome,
'endereco': endereco,
'bairro': bairro,
'lat': lat,
'lon': lon,
'status': status,
'refeicoes': jQuery.trim(refeicoes),
'idades': jQuery.trim(idades)
}
json_dump.push(modificacao)
});
console.log(json_dump);
$('#json_dump').attr('value', JSON.stringify(json_dump));
return true; // return false to cancel form action
});
</script>
<script>
function addSchool() {
if (window.location.href.includes('unidades_especiais/')) {
window.location.href = '/unidades_especiais?openModal=true';
} else {
$('#modalAddSchoolForm').modal('show');
}
}
</script>
<!-- Edita escola -->
<script>
function editRow(id) {
window.location.href = '/editor/unidades_especiais/' + id.$oid + '?openModal=true';
}
</script>
<script>
function deleteSpecialUnit(special_unit) {
$.ajax({
type: 'DELETE',
url: '/editor/excluir_unidade_especial/' + special_unit._id.$oid,
data: JSON.stringify(special_unit),
contentType: 'application/json',
//dataType: 'json',
success: function (data, textStatus, jqXHR) {
location.reload();
}
});
}
</script>
<!-- Deleta linha da tabela Modal -->
<script>
function deleteRowModal(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("edicao-escola").deleteRow(i);
}
</script>
<script>
function delete_row(row) {
if (confirm('Deseja remover nova escola?')) {
row.parentElement.parentElement.remove();
}
}
</script>
<!-- Adiciona linhas na tabela Modal -->
<script>
function addRowModal() {
$('#edicao-escola').append(
"<tr class='item' id=''>" +
"<td><a value='Delete' onclick='deleteRowModal(this)'><i style='color:#D9534F;font-size:30px;text-align: center' class='fas fa-trash-alt'></i></a></td>" +
"<td class='cod_eol' contenteditable='true'>Código EOL</td>" +
"<td class='tipo_atendimento' contenteditable='true'>Tipo Atendimento</td>" +
"<td class='tipo_unidade' contenteditable='true'>Tipo Unidade</td>" +
"<td class='agrupamento' contenteditable='true'>Agrupamento</td>" +
"<td class='edital' contenteditable='true'>EDITAL</td>" +
"<td class='data' contenteditable='true'>Data</td>" +
"<td class='nome' contenteditable='true'>Nome Escola</td>" +
"<td class='endereco' contenteditable='true'>Endereço</td>" +
"<td class='bairro' contenteditable='true'>Bairro</td>" +
"<td class='lat' contenteditable='true'></td>" +
"<td class='lon' contenteditable='true'></td>" +
"<td class='status' contenteditable='true'></td>" +
"<td class='refeicoes' contenteditable='true'></td>" +
"<td class='idades' contenteditable='true'></td>" +
"</tr>"
);
};
</script>
<!-- Pop erro -->
<script>
if ($('#mensagem').length) {
window.alert($('#mensagem').text());
}
</script>
<script>
jQuery(function () {
jQuery('.item').each(function () {
jQuery(this).click(function () {
jQuery('.item').removeClass('danger');
jQuery(this).addClass('danger');
});
});
});
</script>
<script>
$(window).on('load', function () {
if (location.href.includes('openModal=true')) {
$('#modalAddSchoolForm').modal('show');
}
});
</script>
<script>
$(function () {
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$.ajax({
url: '{{ url_for("autocomplete") }}'
}).done(function (data) {
$('#autocomplete_school').on("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).autocomplete("instance").menu.active) {
event.preventDefault();
}
}).autocomplete({
minLength: 2,
source: function (request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
data, extractLast(request.term)));
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
});
</script>
<script>
</script>
</body>
</html>