testes/js/page/Modulo_Construcao/Painel/Config/Ambiente/Ambientes.js

// Dados experimentais para exibir os itens na tela
const dataAmbientes = {
    // Lista de ambientes, com um nome associado a cada um
    itguys: {
        nome: 'ItGuys',
    },
    enseg: {
        nome: 'Enseg',
    },
    OestPan: {
        nome: 'OestPan',
    },
    Prolog: {
        nome: 'Prolog',
    }
}

// Função de ancoragem, chamada no início do processo para alinhar e acionar subprocessos automaticamente quando um evento for disparado
function AlinhamentoAmbientes() {

    // Seleciona o elemento que vai receber os ambientes no painel
    const ListaAmbientes = document.getElementById('apresentarAmbientes');

    // Insere o HTML gerado pela função ComponenteAmbientes dentro do painel
    ListaAmbientes.innerHTML = ComponenteAmbientes();  // Inserção de HTML

    // Após um tempo (setTimeout), itera sobre os dados e chama funções específicas para cada ambiente
    setTimeout(() => {
        for (let ambiente in dataAmbientes) {  // Itera sobre os itens de ambientes definidos no objeto 'dataAmbientes'
            const nome = dataAmbientes[ambiente].nome;  // Pega o nome de cada ambiente

            // Chama a função 'FormeEditarAmbiente' passando o nome de cada ambiente
            FormeEditarAmbiente(nome);
        }
    }, 0);  // Executa o loop sem delay (imediatamente após a inserção de HTML)

    // Chama a função para criar um novo ambiente
    FormeCriarAmbiente();
}

// Função responsável por gerar o HTML com a estrutura dos ambientes
function ComponenteAmbientes() {
    let htmlContent = '';  // Variável para armazenar o conteúdo HTML gerado

    // Itera sobre os dados de ambientes e gera o HTML para cada um
    for (let ambiente in dataAmbientes) {
        const nome = dataAmbientes[ambiente].nome;

        // Para cada ambiente, adiciona um painel com seu nome e um ícone
        htmlContent += `
            <div class="painelItem">
                <div class="img">
                    <img src="../Acessts/Imagens/Iconis/hospital.png" alt="Logo da ${nome}">
                </div>
                <div class="corpo">
                    <div class="titulo">
                        <h2>${nome}</h2>
                    </div>
                    <div class="alinhamentos">
                        <button id="AtreladorDashbord">Dashbords</button>
                        <button id="AtreladorGrupos">Grupos</button>
                    </div>
                </div>
                <div class="edicao">
                    <button id="Painel_${nome}">:</button>
                </div>
            </div>
        `;
    }

    // Retorna o conteúdo HTML gerado para ser inserido no DOM
    return htmlContent;
}

// Função que permite a criação de um novo ambiente através de um painel
function FormeCriarAmbiente() {
    const InsercaoAmbiente = document.getElementById('criarAmbiente');

    // Adiciona um ouvinte de evento para o botão de criação de ambiente
    InsercaoAmbiente.addEventListener('click', CriarAmbiente);

    function CriarAmbiente() {
        const PainelCriacao = document.getElementById('PopPainel');

        // Exibe o painel de criação e aplica classes para estilizar
        PainelCriacao.style.display = 'flex';
        PainelCriacao.classList.add('CriacaoAmbientes');
        PainelCriacao.classList.remove('EdicaoAmbientes');

        // Insere o conteúdo HTML do painel de criação de ambiente
        PainelCriacao.innerHTML = PainelAmbiente();

        // Chama a função de extras para configurar botões auxiliares no painel
        Extras();

        // Função que retorna o HTML do painel de criação de ambiente
        function PainelAmbiente() {
            return `
            <div class='fecharPainel' id='FecharPainel'>
                <button>X</button>
            </div>
            
            <div id='formulario'>
                <div class='Bloco_1'>
                    <div class='TituloCampo'>
                        <h2>Informações do Ambiente</h2>
                    </div>
                    <div class='Campo'>
                        <label>Dominio</label>
                        <input type="text" placeholder="Escreva o Dominio" id="pesquisarAmbiente">
                    </div>
                    <div class='Campo'>
                        <label>Nome</label>
                        <input type="text" placeholder="Escreva o nome do Ambiente" id="pesquisarAmbiente">
                    </div>
                    <div class='Campolong'>
                        <label>Descrição</label>
                        <textarea name="" id=""></textarea>
                    </div>
                </div>
    
                <div class='Bloco_2'>
                    <div class='TituloCampo'>
                        <h2>Informações do Cliente</h2>
                    </div>
                    <div class='Campo'>
                        <label>Nome</label>
                        <input type="text" placeholder="Escreva o nome do cliente" id="pesquisarAmbiente">
                    </div>
                    <div class='CampoInsercao'>
                        <label>Logo</label>
                        <button id='ImagemEmpresa' onclick="document.getElementById('uploadImagem').click()">+</button>
                        <input type="file" id="uploadImagem" style="display: none;" accept="image/*">
                    </div>
                </div>
    
                <div class='Bloco_3'>
                    <div class='TituloCampo'>
                        <h2>Alinhamento do Ambiente</h2>
                    </div>
                    <div class='PainelDasborhs'>
                        <div class='Coluna_1'>
                            <div class='TitutloPopup'>
                                <h2>Dashbords</h2>
                            </div>
                            <div class='PesquisaPopup'>
                                <input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
                                <button id="pesquisa">
                                    <img src="../Acessts/Imagens/Iconis/lupa.png">
                                </button>
                            </div>
                        </div>
    
                        <div class='Coluna_2'>
                            <div class='DashbordItem'>
                                <h2>Nome da Dashbord</h2>
                                <button id='DesvincularDashbord'>X</button>
                            </div>
                        </div>
                    </div>
    
                    <div class='PainelDasborhs'>
                        <div class='Coluna_1'>
                            <div class='TitutloPopup'>
                                <h2>Grupos</h2>
                            </div>
                            <div class='PesquisaPopup'>
                                <input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
                                <button id="pesquisa">
                                    <img src="../Acessts/Imagens/Iconis/lupa.png">
                                </button>
                            </div>
                        </div>
                        <div class='Coluna_2'>
                            <div class='DashbordItem'>
                                <h2>Nome da Dashbord</h2>
                                <button id='DesvincularDashbord'>X</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            `;
        }

        // Função para alterar a imagem do botão de logo da empresa
        function alterarImagem() {
            const input = document.getElementById('uploadImagem');
            const button = document.getElementById('ImagemEmpresa');
            const file = input.files[0];

            if (file) {
                const reader = new FileReader();

                reader.onload = function (event) {
                    // Aplica a imagem ao botão
                    button.style.backgroundImage = `url(${event.target.result})`;
                    button.style.backgroundSize = "contain";
                    button.style.backgroundRepeat = "no-repeat";
                    button.style.backgroundPosition = "center";
                    button.style.height = '30vh';
                    button.style.transition = '1s ease';
                    button.textContent = '';  // Remove o texto '+' após a imagem ser carregada
                }

                reader.readAsDataURL(file);  // Lê a imagem como uma URL
            }
        }

        // Função para tratar os botões auxiliares do painel
        function Extras() {
            fechar();

            // Função de fechamento do painel
            function fechar() {
                const FecharPainelEdicao = document.getElementById('FecharPainel');
                FecharPainelEdicao.addEventListener('click', EncerrarTarefa);

                // Função que fecha o painel e limpa o conteúdo
                function EncerrarTarefa() {
                    PainelCriacao.style.display = 'none';
                    PainelCriacao.classList.remove('CriacaoAmbientes');
                    PainelCriacao.innerHTML = ``;
                }
            }
        }

        // Adiciona o listener para o evento de mudança no input de imagem
        const inputImagem = document.getElementById('uploadImagem');
        inputImagem.addEventListener('change', alterarImagem);
    }
}

// Função responsável por editar o ambiente, chamada quando um painel de ambiente é clicado
function FormeEditarAmbiente(Empresa) {
    const ItemAmbiente = document.getElementById(`Painel_${Empresa}`);
    ItemAmbiente.addEventListener('click', PaineldeEdicao);

    function PaineldeEdicao() {
        const PainelEdicao = document.getElementById('PopPainel');

        PainelEdicao.style.display = 'flex';
        PainelEdicao.classList.remove('CriacaoAmbientes');
        PainelEdicao.classList.add('EdicaoAmbientes');
        PainelEdicao.innerHTML = PainelAmbiente();

        Extras();

        function PainelAmbiente() {
            return `
            <div class='fecharPainel'>
                <button id='FecharPainel'>X</button>
            </div>
            <div class='CorpoPainel'>
                <div class='PainelDasborhs'>
                    <div class='Coluna_1'>
                        <div class='TitutloPopup'>
                            <h2>Dashbords ${Empresa}</h2>
                        </div>
                        <div class='PesquisaPopup'>
                            <input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
                            <button id="pesquisa">
                                <img src="../Acessts/Imagens/Iconis/lupa.png">
                            </button>
                        </div>
                    </div>
                    <div class='Coluna_2'>
                        <div class='DashbordItem'>
                            <h2>Nome da Dashbord</h2>
                            <button id='DesvincularDashbord'>X</button>
                        </div>
                    </div>
                </div>
                
                <div class='PainelDasborhs'>
                    <div class='Coluna_1'>
                        <div class='TitutloPopup'>
                            <h2>Grupos ${Empresa}</h2>
                        </div>
                        <div class='PesquisaPopup'>
                            <input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
                            <button id="pesquisa">
                                <img src="../Acessts/Imagens/Iconis/lupa.png">
                            </button>
                        </div>
                    </div>
                    <div class='Coluna_2'>
                        <div class='DashbordItem'>
                            <h2>Nome do Grupo</h2>
                            <button id='DesvincularDashbord'>X</button>
                        </div>
                    </div>
                </div>
            </div>
            `;
        }

        function Extras() {
            fechar();

            // Função de fechamento do painel de edição
            function fechar() {
                const FecharPainelEdicao = document.getElementById('FecharPainel');
                FecharPainelEdicao.addEventListener('click', EncerrarTarefa);

                // Função para encerrar e limpar o painel de edição
                function EncerrarTarefa() {
                    PainelEdicao.style.display = 'none';
                    PainelEdicao.classList.remove('EdicaoAmbientes');
                    PainelEdicao.innerHTML = ``;
                }
            }
        }
    }
}