templates/editor_terceirizadas.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calendário</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">
<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>
<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">
<link rel="stylesheet" href="static/css/custom.css">
<style>
.row {
margin-top: 20px;
margin-bottom: 20px;
padding: 0 10px;
}
.container {
width: 80%;
}
.row.tbl {
padding-top: 40px;
}
.table td {
/*height: 150px;*/
max-height: 150px;
text-align: left;
max-width: 0;
/*width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;*/
}
.table th {
/*text-align: left;*/
padding-top: 8px;
background-color: #D9F7FA;
}
.navbar-nav {
margin-top: 8px;
}
.clickable {
cursor: pointer;
}
.table-responsive {
height: 500px;
overflow-y: auto;
overflow-x: auto;
}
.panel-heading div {
margin-top: -18px;
font-size: 15px;
}
.panel-heading div span {
margin-left: 5px;
}
.panel-body {
display: none;
}
thead th {
position: sticky;
position: -webkit-sticky;
top: 0;
background: white;
z-index: 10;
}
</style>
</head>
<body>
<div class="container">
<!-- NAVBAR -->
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Prato Aberto - Editor de Cardápio</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" style="padding-right: 7px">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<i class="glyphicon glyphicon-list-alt"></i> CONFIGURAÇÕES
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="/editor/configuracoes_gerais">DE-PARA</a></li>
<li><a href="/editor/configuracoes_cardapio">HISTÓRICO CARDÁPIOS TECEIRIZADAS</a>
</li>
</ul>
</li>
<a type="button" class="btn btn-default " href="/editor/pendencias_publicacoes">
<span class="glyphicon glyphicon-chevron-left"></span> VOLTAR PARA CARDÁPIOS
</a>
<a type="button" class="btn btn-success" onclick="salvaCardapio()">
<span class="glyphicon glyphicon glyphicon-floppy-disk"></span> SALVAR CARDÁPIO
</a>
</ul>
</div>
</div>
</nav>
</div>
<!-- Informações do agrupamento -->
<div style="text-align: left">
<span type="button" class="btn btn-lg btn-default disabled" id="tipo_atendimento">{{ tipo_atendimento
}}</span>
<span type="button" class="btn btn-lg btn-default disabled" id="tipo_unidade">{{ tipo_unidade }}</span>
<span type="button" class="btn btn-lg btn-default disabled" id="idade">{{ idade }}</span>
<span type="button" class="btn btn-lg btn-default disabled" id="agrupamento">{{ agrupamento }}</span>
<span type="button" class="btn btn-warning" onclick="update_status('A_CONFERIR')"
id="step1-conferencia">MARCAR PARA CONFERÊNCIA</span>
<span type="button" class="btn btn-success" onclick="update_status('CONFERIDO')"
id="step2-conferencia">MARCAR COMO CONFERIDO</span>
</div>
<div class="row">
<button onclick="addRow()" class="btn btn-primary" style="float: right"><span
class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
<!-- Acrescentar a tabela para o calendario -->
<div class="row tbl">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Editor de Cardápio</h3>
<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>
<th onclick="w3.sortHTML('#task-table', '.item', 'td:nth-child(1)')"
style="cursor:pointer; word-wrap: break-word;min-width: 60px;max-width: 60px;">
DIA<i class="fa fa-sort" aria-hidden="true"></i></th>
<th onclick="w3.sortHTML('#task-table', '.item', 'td:nth-child(2)')"
style="cursor:pointer; word-wrap: break-word;min-width: 60px;max-width: 60px;">
SEMANA <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: 100px;max-width: 100px;">
TIPO
REFEIÇÃO <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: 200px;max-width: 200px;">
LISTA
DE ALIMENTOS (PAPA)<i class="fa fa-sort" aria-hidden="true"></i></th>
<th
style="cursor:pointer; word-wrap: break-word;min-width: 200px;max-width: 200px;">
PUBLICAÇÃO
</th>
<th
style="cursor:pointer; word-wrap: break-word;min-width: 200px;max-width: 200px;">
SEMANA
ANTERIOR
</th>
<th style="cursor:pointer; word-wrap: break-word;min-width: 30px;max-width: 30px;">
</th>
<th style="cursor:pointer; word-wrap: break-word;min-width: 30px;max-width: 30px;">
</th>
</tr>
</thead>
<tbody>
{% for cardapio in cardapios %}
{% for tipo_refeicao, lista_alimentos in cardapio['cardapio'].items() %}
<tr class="item" id="{{ cardapio['_id']['$oid'] }}">
<td>{{ cardapio['data'] }}</td>
<td>{{ cardapio['dia_semana'] }}</td>
<td class="tipo" contenteditable="true">{{ tipo_refeicao }}</td>
<td class="lista-alimentos">
{% for ingrediente in cardapio['cardapio_original'][tipo_refeicao] %}
{{ ingrediente | replace("*", "<span class='warning'>*</span>") | safe }},
{% endfor %}
</td>
<!-- PUBLICAÇÕES -->
<td class="refeicao" contenteditable="true" style="background-color: #FFEEAD">
{% for ingrediente in lista_alimentos %}
{{ ingrediente }},
{% endfor %}
</td>
<td>
{% for ingrediente in cardapio['cardapio_semana_anterior'][tipo_refeicao] %}
{{ ingrediente }},
{% endfor %}
</td>
<td>
<button onclick="get_cardapio(this)" class="btn btn-primary"
style="padding: 5px 9px;">
<span class="glyphicon glyphicon-refresh"></span></button>
</td>
<td>
<button onclick="deleteRow(this)" value='Delete' class="btn btn-danger"
style="padding: 5px 9px;"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
{% endfor %}
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<div id="historicos_cardapios" style="display:none;">{{ historicos_cardapios }}</div>
<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>
<!-- Mantem a aba selecionada mesmo depois de mudar de data -->
<script>
$(function () {
// for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// save the latest tab; use cookies if you like 'em better:
localStorage.setItem('lastTab', $(this).attr('href'));
});
// go to the latest tab, if it exists:
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('[href="' + lastTab + '"]').tab('show');
}
});
</script>
<!-- Botões de ordenação da tabela -->
<script src="/editor/static/js/w3.js"></script>
<!-- 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>
<!-- Substitui palavras da lista de alimentos por receita -->
<script>
function substituir() {
var DE = document.getElementById("DE").value;
var PARA = document.getElementById("PARA").value;
$('#task-table tr').each(function () {
var ingredientes = $($(this).children('td')[4]).text();
var ingredientes = ingredientes.replace(DE, PARA);
$($(this).children('td')[4]).html(ingredientes);
});
}
</script>
<!-- Cria nota na Merenda -->
<script>
function notaRodape() {
var NOTA = document.getElementById("NOTA").value;
$('#task-table tr').each(function () {
var texto_inicial = $($(this).children('td')[3]).text();
if (texto_inicial == '') {
$($(this).children('td')[4]).html(NOTA);
} else {
$($(this).children('td')[4]).html(texto_inicial + ', ' + NOTA);
}
});
}
</script>
<!-- POST Salvar modificações-->
<script>
function salvaCardapio() {
var cardapio = {};
/* itera em cada linha para construir o post */
$('#task-table tr').each(function () {
var id = $(this).attr('id');
//var data = $($(this).children('td')[0]).text();
if (id === undefined) return; /* pula header */
var tipo_refeicao = $($(this).children('td')[2]).text();
var refeicao = $.map($($(this).children('td')[4]).text().split(','),
function (v) {
return $.trim(v) === "" ? null : $.trim(v);
});
if (cardapio[id] === undefined) {
item_cardapio = {};
item_cardapio[tipo_refeicao] = refeicao;
cardapio[id] = item_cardapio;
} else {
cardapio[id][tipo_refeicao] = refeicao;
}
});
var cardapios = []
$.each(cardapio, function (key, value) {
cardapios.push({
"_id": { "$oid": key },
"cardapio": value,
});
});
$.ajax({
type: 'POST',
url: '/editor/atualiza_cardapio',
data: JSON.stringify(cardapios),
contentType: 'application/json',
//dataType: 'json',
success: function (data, textStatus, jqXHR) {
window.alert("Cardápio salvo com sucesso");
}
});
}
</script>
<script>
function update_status(status) {
var cardapio = {};
/* itera em cada linha para construir o post */
$('#task-table tr').each(function () {
var id = $(this).attr('id');
//var data = $($(this).children('td')[0]).text();
if (id === undefined) return; /* pula header */
var tipo_refeicao = $($(this).children('td')[2]).text();
var refeicao = $.map($($(this).children('td')[4]).text().split(','),
function (v) {
return $.trim(v) === "" ? null : $.trim(v);
});
if (cardapio[id] === undefined) {
item_cardapio = {};
item_cardapio[tipo_refeicao] = refeicao;
cardapio[id] = item_cardapio;
} else {
cardapio[id][tipo_refeicao] = refeicao;
}
});
var cardapios = []
$.each(cardapio, function (key, value) {
cardapios.push({
"_id": { "$oid": key },
"cardapio": value,
"status": status,
});
});
$.ajax({
type: 'POST',
url: '/editor/atualiza_cardapio',
data: JSON.stringify(cardapios),
contentType: 'application/json',
//dataType: 'json',
success: function (data, textStatus, jqXHR) {
window.alert("Cardápio salvo com sucesso");
document.location.href = document.referrer;
}
});
}
</script>
<!-- Sorteia cardapio-->
<script>
function get_cardapio(r) {
var cardapios = {{ historicos_cardapios| tojson | safe
}};
/*window.alert(cardapios['Qui']['D - DESJEJUM']);*/
/*$($(r).children('td')).css({ 'background-color':'#fff' });*/
var i = r.parentNode.parentNode.rowIndex;
dia_semana = document.getElementById("task-table").rows[i].cells[1].innerHTML
refeicao = document.getElementById("task-table").rows[i].cells[2].innerHTML
cardapio = cardapios[dia_semana][refeicao]
var randomNumber = Math.floor(Math.random() * cardapio.length);
document.getElementById("task-table").rows[i].cells[4].innerHTML = cardapio[randomNumber];
}
</script>
<!-- Adiciona nova refeição -->
<script>
function addRow() {
$('#task-table').append(
"<tr class='item' id=''>" +
"<td class='data_editavel' contenteditable='true'>yyyymmdd</td>" +
"<td contenteditable='true'></td>" +
"<td contenteditable='true'></td>" +
"<td></td>" +
"<td contenteditable='true' style='background-color: #FFEEAD'></td>" +
"<td></td>" +
"<td><button onclick='get_cardapio(this)' class='btn btn-primary' style='padding: 5px 9px;'><span class='glyphicon glyphicon-refresh'></span></button></td>" +
"<td><button onclick='deleteRow(this)' value='Delete' class='btn btn-danger' style='padding: 5px 9px;'><span class='glyphicon glyphicon-remove'></span></button></td>" +
"</tr>"
);
};
</script>
<!-- Deleta refeição -->
<script>
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("task-table").deleteRow(i);
}
</script>
<!-- Atualiza id do elemento quando campo é atualizado -->
<script>
$('body').on('focus', '[contenteditable]', function () {
var $this = $(this);
$this.data('before', $this.html());
return $this
}).on('blur keyup paste input', '[contenteditable]', function () {
var $this = $(this);
if ($this.data('before') !== $this.html()) {
$this.data('before', $this.html());
$this.trigger('change');
}
var dia = $this.html();
$('#task-table tr').each(function () {
if (dia == $($(this).children('td')[0]).html()) {
if ($($(this).children('td')[0]).html() != "") {
var row = $this.closest('tr');
var id_exemplo = $(this).attr('id');
$(row).attr('id', id_exemplo)
}
;
}
;
})
});
</script>
</body>
</html>