108 lines
3.0 KiB
JavaScript
108 lines
3.0 KiB
JavaScript
const painel_serviços_icon = document.getElementById('saida');
|
|
|
|
function renderService(service) {
|
|
const { nome, Imagem, id_server, resposta_popup, resposta_script, resposta_estilo } = service;
|
|
const serviceDiv = document.createElement('div');
|
|
serviceDiv.classList.add('painel');
|
|
serviceDiv.id = id_server;
|
|
|
|
serviceDiv.innerHTML = `
|
|
<div class="Colun_1">
|
|
<img src="${Imagem}" alt="">
|
|
</div>
|
|
<div class="Colun_2">
|
|
<h2>${nome}</h2>
|
|
</div>
|
|
`;
|
|
|
|
painel_serviços_icon.appendChild(serviceDiv);
|
|
|
|
serviceDiv.addEventListener('click', () => {
|
|
popup(resposta_popup, resposta_script, resposta_estilo);
|
|
});
|
|
}
|
|
|
|
function renderAllServices() {
|
|
painel_serviços_icon.innerHTML = '';
|
|
|
|
// Renderiza os serviços de Ser_Itguys
|
|
for (const service of Object.values(Data_Center.Ser_Itguys)) {
|
|
renderService(service);
|
|
}
|
|
|
|
// Renderiza os serviços de Ser_User
|
|
for (const service of Object.values(Data_Center.Ser_User)) {
|
|
renderService(service);
|
|
}
|
|
}
|
|
|
|
// Inicializa a renderização
|
|
renderAllServices();
|
|
|
|
function popup(resposta, script, estilo) {
|
|
const painel_serviços = document.getElementById('painel_Servico');
|
|
painel_serviços.innerHTML = `
|
|
<section>
|
|
<div class='colun_1'>
|
|
<button id='fechar'>
|
|
X
|
|
</button>
|
|
</div>
|
|
<div class='colun_2'>
|
|
${resposta}
|
|
</div>
|
|
</section>
|
|
`;
|
|
|
|
// Remover estilos e scripts anteriores
|
|
const existingStyles = document.querySelectorAll('style');
|
|
existingStyles.forEach(style => style.remove());
|
|
const existingScripts = document.querySelectorAll('script[data-dynamic]');
|
|
existingScripts.forEach(script => script.remove());
|
|
|
|
// Injetar estilo se houver
|
|
if (estilo) {
|
|
const style = document.createElement('style');
|
|
style.innerHTML = estilo;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
// Injetar script se houver
|
|
if (script) {
|
|
const scriptElement = document.createElement('script');
|
|
scriptElement.setAttribute('data-dynamic', '');
|
|
scriptElement.src = script;
|
|
document.body.appendChild(scriptElement);
|
|
}
|
|
|
|
const button_servi = document.getElementById('fechar');
|
|
button_servi.addEventListener('click', fecharPopup);
|
|
|
|
function fecharPopup() {
|
|
painel_serviços.style.display = "none";
|
|
}
|
|
|
|
painel_serviços.style.display = "flex";
|
|
}
|
|
|
|
const button_pesquisa = document.getElementById('button_pesqui');
|
|
const input_pesquisa = document.getElementById('pesquisa');
|
|
|
|
button_pesquisa.addEventListener('click', pesquisar);
|
|
input_pesquisa.addEventListener('keypress', function (event) {
|
|
if (event.key === 'Enter') {
|
|
pesquisar();
|
|
}
|
|
});
|
|
|
|
function pesquisar() {
|
|
const query = input_pesquisa.value.toLowerCase();
|
|
painel_serviços_icon.innerHTML = '';
|
|
|
|
// Filtra e renderiza os serviços
|
|
for (const service of Object.values(Data_Center.Ser_Itguys).concat(Object.values(Data_Center.Ser_User))) {
|
|
if (service.nome.toLowerCase().includes(query)) {
|
|
renderService(service);
|
|
}
|
|
}
|
|
} |