mmpSearch/automation.html

131 lines
4.2 KiB
HTML

---
layout: default
title: Projetos com a tag Automation
permalink: /automation/
---
<meta charset="utf-8" />
<main class="main-content">
<div class="publication">{% include sidebar.html %}</div>
<div class="container">
<div class="columns is-mobile is-vcentered" style="margin-bottom: 2rem">
<!-- Título -->
<div class="column is-auto">
<h2 class="title is-4">
<code>Projetos que possuem a tag automation:</code>
</h2>
</div>
<!-- Botão Limpar Filtro -->
<div class="column is-auto">
<button id="clearFilterButton" class="button is-small is-light">
Limpar filtro
</button>
</div>
</div>
<!-- Projetos -->
<div id="project-list" class="columns is-multiline">
{% for projeto in site.data.all %} {% if projeto.tags.TAG contains
"automation" %}
<div
class="column is-6 project-item"
data-automation="{{ projeto.tags.automation | join: ',' }}"
>
<div class="box">
<!-- Botão do projeto -->
{% assign file_url = projeto.file | downcase | replace: ' ', '-' |
replace: 'ç', 'c' | replace: 'ã', 'a' | replace: 'á', 'a' | replace:
'â', 'a' | replace: 'é', 'e' | replace: 'ê', 'e' | replace: 'í', 'i' |
replace: 'ó', 'o' | replace: 'ô', 'o' | replace: 'õ', 'o' | replace:
'ú', 'u' %}
<a
href="../mmp_pages/{{ file_url }}.html"
class="button is-link is-fullwidth"
>
{{ projeto.file }}
</a>
<!-- Lista de automations clicáveis -->
{% if projeto.tags.automation and projeto.tags.automation.size > 0 %}
<div style="margin-top: 1rem">
<p><strong>Automation:</strong></p>
<ul style="list-style-type: disc; padding-left: 1.25rem">
{% for automation in projeto.tags.automation %} {% if automation
!= "" %}
<li>
<a
href="#"
class="automation-item"
data-automation="{{ automation }}"
>{{ automation }}</a
>
</li>
{% endif %} {% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
{% endif %} {% endfor %}
</div>
</div>
</main>
<script>
document.addEventListener("DOMContentLoaded", function () {
const projects = document.querySelectorAll(".project-item");
// Função para aplicar filtro por automation
function filterByAutomation(automationName) {
projects.forEach((project) => {
const projectAutomations = project
.getAttribute("data-automation")
.split(",");
if (projectAutomations.includes(automationName)) {
project.style.display = "block";
} else {
project.style.display = "none";
}
});
}
// Lê a automation da URL se houver
const urlParams = new URLSearchParams(window.location.search);
const automationFromUrl = urlParams.get("automation");
if (automationFromUrl) {
filterByAutomation(automationFromUrl);
}
// Ao clicar numa automation na lista
const automationItems = document.querySelectorAll(".automation-item");
automationItems.forEach((item) => {
item.addEventListener("click", function (event) {
event.preventDefault();
const selectedAutomation = item.getAttribute("data-automation");
filterByAutomation(selectedAutomation);
// Atualiza a URL sem recarregar a página
const newUrl = new URL(window.location.href);
newUrl.searchParams.set("automation", selectedAutomation);
window.history.replaceState({}, "", newUrl);
});
});
// Botão para limpar filtro
const clearFilterButton = document.querySelector("#clearFilterButton");
clearFilterButton.addEventListener("click", function () {
projects.forEach((project) => {
project.style.display = "block";
});
// Remove o filtro da URL
const newUrl = new URL(window.location.href);
newUrl.searchParams.delete("automation");
window.history.replaceState({}, "", newUrl);
});
});
</script>