Spaces:
Runtime error
Runtime error
{% extends 'base.html' %} {% block head %} | |
<link rel="stylesheet" href="../static/vagas.css" /> | |
{% endblock %} {% block conteudo %} | |
<main class="page"> | |
<div class="container-vagas"> | |
<div class="header-page-vagas"> | |
<span id="header-field">Central de vagas</span> | |
</div> | |
<div class="card-column"> | |
<ul id="filter-head" class="filter-head"> | |
<li> | |
<a href="{{ url_for('nova_vaga') }}"> | |
<i | |
class="bi bi-door-open" | |
title="Criar vaga" | |
style="cursor: pointer" | |
></i> | |
</a> | |
</li> | |
<div class="filter-content"> | |
<li class="dropdown"> | |
<i id="view-filter" class="bi-fnl bi-funnel"></i> | |
<span class="dropdown-funnel">Filtrar por</span> | |
<ul class="dropdown-menu"> | |
<li>Departamento</li> | |
<li>Data de publicação</li> | |
</ul> | |
</li> | |
<select id="status-dropdown"> | |
<option value=""></option> | |
</select> | |
</div> | |
<li> | |
<div class="icons-filter"> | |
<i id="ordenar-az" class="bi-sort bi-sort-alpha-down"></i> | |
<i id="show-hide" data-info="hide" class="bi bi-eye-slash-fill"></i> | |
</div> | |
</li> | |
<li> | |
<div class="container-input"> | |
<input | |
type="text" | |
placeholder="Pesquisar" | |
name="text" | |
class="input-search" | |
/> | |
<svg | |
xmlns="http://www.w3.org/2000/svg" | |
width="16" | |
height="16" | |
fill="#000000" | |
class="bi bi-search" | |
viewBox="0 0 16 16" | |
> | |
<path | |
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" | |
/> | |
</svg> | |
</div> | |
</li> | |
</ul> | |
</div> | |
<div class="card-container"> | |
<!-- Itere sobre as vagas para exibir os cards --> | |
{% for vaga in vagas %} | |
<div | |
class="card-content {{vaga.departamento}}" | |
data-vaga-id="{{ vaga.id }}" | |
> | |
<div id="status-bar-color" class="status-bar {{ vaga.status }}"></div> | |
<div class="div-card-title"> | |
<h5 class="card-title">{{vaga.cargo}} | {{vaga.nivel}}</h5> | |
<p class="card-departamento">{{vaga.departamento}}</p> | |
</div> | |
<p class="card-data-publicacao"> | |
Publicado em {{vaga.data_abertura.strftime('%d/%m/%Y')}} | |
</p> | |
</div> | |
{% endfor %} | |
</div> | |
</div> | |
</main> | |
{% endblock %} {% block finalscript %} | |
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.min.js"></script> | |
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> | |
<script> | |
$(document).ready(function () { | |
// Adiciona um ouvinte de evento para o clique em um item do menu dropdown | |
$(".dropdown-menu li").click(function () { | |
// Encontra o texto da opção selecionada | |
var selectedText = $(this).text(); | |
// Atualiza o texto do span .dropdown-funnel com o texto da opção selecionada | |
$(this).closest(".dropdown").find(".dropdown-funnel").text(selectedText); | |
$(this) | |
.closest(".dropdown") | |
.find("#view-filter") | |
.removeClass() | |
.addClass("bi-funnel-fill") | |
.attr("title", "Limpar filtros"); | |
// Fecha o menu dropdown | |
$(this).closest(".dropdown").find(".dropdown-menu").slideUp(); | |
}); | |
// Adiciona um ouvinte de evento para o clique no link dropdown | |
$(".dropdown-funnel").click(function () { | |
// Encontra o menu dropdown correspondente | |
var dropdownMenu = $(this).next(".dropdown-menu"); | |
// Alterna a visibilidade do menu dropdown | |
dropdownMenu.slideToggle(); | |
$("#status-dropdown").empty(); | |
}); | |
function limparFiltros() { | |
$(".dropdown-funnel").text("Filtrar por"); | |
$("#status-dropdown").empty(); | |
$(".card-content").each(function () { | |
var status = $("#status-bar-color").hasClass("ativo") | |
? "ativo" | |
: "inativo"; | |
if (status === "ativo") { | |
$(this).show(); | |
} | |
}); | |
$("#view-filter").removeClass().addClass("bi-fnl bi-funnel"); | |
} | |
// Evento de clique no botão de limpar filtro | |
$("#view-filter").click(function () { | |
limparFiltros(); | |
}); | |
}); | |
</script> | |
<script> | |
$(document).ready(function () { | |
$(".dropdown-menu li").click(function () { | |
$(".card-content").show(); | |
var opcaoSelecionada = $(this).text().toLowerCase(); | |
// Atualiza o texto do span para refletir a opção selecionada | |
$(".dropdown-funnel").text( | |
opcaoSelecionada.charAt(0).toUpperCase() + opcaoSelecionada.slice(1) | |
); | |
// Atualiza o valor do select com base no filtro selecionado | |
if (opcaoSelecionada === "departamento") { | |
// Preencha o select com departamentos | |
var departamentos = []; | |
$(".card-departamento").each(function () { | |
var departamento = $(this).text().trim(); | |
if (!departamentos.includes(departamento)) { | |
departamentos.push(departamento); | |
} | |
}); | |
// Limpa o select | |
$("#status-dropdown").empty(); | |
// Adiciona as opções ao select | |
departamentos.forEach(function (departamento) { | |
$("#status-dropdown").append( | |
'<option data-filter=".' + | |
departamento + | |
'" value="' + | |
departamento + | |
'">' + | |
departamento + | |
"</option>" | |
); | |
$("#status-dropdown").val(""); | |
$(".card-content .status-bar.inativo").parent().hide(); | |
}); | |
} else if (opcaoSelecionada === "data de publicação") { | |
var datas = ["15 dias", "30 dias", "45 dias"]; | |
$("#status-dropdown").empty(); | |
datas.forEach(function (data) { | |
$("#status-dropdown").append( | |
'<option data-filter=".' + | |
data.trim() + | |
' " value="' + | |
data.trim() + | |
'">' + | |
data.trim() + | |
"</option>" | |
); | |
$("#status-dropdown").val(""); | |
}); | |
} | |
}); | |
}); | |
</script> | |
<script> | |
$(document).ready(function () { | |
var $listing = $(".card-container").isotope({ | |
itemSelector: ".card-content", | |
layoutMode: "fitRows", | |
percentPosition: true, | |
fitRows: { | |
gutter: 30, | |
}, | |
transitionDuration: "0.3s", | |
getSortData: { | |
vaga: ".card-title", | |
departamento: "[value]", | |
data_publicacao: "[value]", | |
}, | |
}); | |
$("#status-dropdown").change(function () { | |
var opcaoSelecionada = $(".dropdown-funnel").text(); | |
var filterValue = $(this) | |
.children("option:selected") | |
.attr("data-filter") | |
.trim(); | |
if (opcaoSelecionada === "Departamento") { | |
$listing.isotope({ filter: filterValue }); | |
} else if (opcaoSelecionada === "Data de cadastro") { | |
var hoje = new Date(); | |
var filtroDias; | |
if (filterValue === ".15 dias") { | |
filtrarPorData(15); | |
} else if (filterValue === ".30 dias") { | |
filtrarPorData(30); | |
} else if (filterValue === ".45 dias") { | |
filtrarPorData(45); | |
} else { | |
// Se nenhuma opção for selecionada, exibe todos os itens | |
$listing.isotope({ filter: "*" }); | |
} | |
} | |
}); | |
function filtrarPorData(filtroDias) { | |
var hoje = new Date(); | |
var dataCorte = new Date(hoje); | |
dataCorte.setDate(hoje.getDate() - filtroDias); | |
$listing.isotope({ | |
filter: function () { | |
var dataPublicacaoStr = $(this) | |
.find(".card-data-cadastro") | |
.text() | |
.trim(); | |
dataPublicacaoStr = dataPublicacaoStr.replace( | |
/^Cadastrado\s+em\s+/i, | |
"" | |
); | |
var partesData = dataPublicacaoStr.split("/"); | |
var dia = parseInt(partesData[0], 10); // Converte o dia para número inteiro | |
var mes = parseInt(partesData[1], 10) - 1; // Converte o mês para número inteiro (0-based) | |
var ano = parseInt(partesData[2], 10); | |
var dataTexto = new Date(ano, mes, dia); | |
return dataTexto >= dataCorte; | |
}, | |
}); | |
} | |
$("#view-filter").click(function () { | |
$listing.isotope({ filter: "*" }); | |
}); | |
$("#ordenar-az").click(function () { | |
var $biSort = $("#ordenar-az"); | |
if ($biSort.hasClass("bi-sort-alpha-down")) { | |
$biSort.removeClass().addClass("bi-sort-alpha-up-alt"); | |
$listing.isotope({ sortBy: "vaga", sortAscending: false }); | |
} else { | |
$biSort.removeClass().addClass("bi-sort-alpha-down"); | |
$listing.isotope({ sortBy: "vaga", sortAscending: true }); | |
} | |
}); | |
$(".input-search").on("input", function () { | |
var searchText = $(this).val().toLowerCase(); | |
$listing.isotope({ | |
filter: function () { | |
var cardNome = $(this).find(".card-title").text().toLowerCase(); | |
return cardNome.includes(searchText); | |
}, | |
}); | |
}); | |
}); | |
</script> | |
<script> | |
$("#vagas-link").toggleClass("active"); | |
</script> | |
<script> | |
$(document).on("click", ".card-content", function () { | |
var vagaId = $(this).data("vaga-id"); | |
window.location.href = "/vagas/" + vagaId; | |
}); | |
</script> | |
<script> | |
$(document).ready(function () { | |
$(".bi-nc").click(function () { | |
window.location.href = "/nova_vaga"; | |
}); | |
}); | |
</script> | |
<script> | |
$(document).ready(function () { | |
// Ocultar inicialmente os cards com a classe "inativo" na barra de status | |
$(".card-content .status-bar.inativo").parent().hide(); | |
var icon = $("#show-hide"); | |
icon.click(function () { | |
$(".card-content").each(function () { | |
var statusBar = $("#status-bar-color"); | |
var status = statusBar.hasClass("ativo") ? "ativo" : "inativo"; | |
var icon = $("#view-filter"); | |
if (status === "ativo") { | |
$(this).show(); | |
} else { | |
$(this).toggle(); | |
} | |
}); | |
if (icon.hasClass("bi bi-eye-fill")) { | |
icon.removeClass("bi bi-eye-fill").addClass("bi bi-eye-slash-fill"); | |
icon.attr("data-info", "hide"); | |
} else { | |
icon.removeClass("bi bi-eye-slash-fill").addClass("bi bi-eye-fill"); | |
icon.attr("data-info", "show"); | |
} | |
}); | |
}); | |
</script> | |
<script> | |
$(document).ready(function () { | |
$("#header-field").click(function () { | |
location.reload(); // Atualiza a página | |
}); | |
}); | |
</script> | |
{% endblock %} | |