mmpSearch/pages/perfil.md

layout, title, permalink

layout	title	permalink
default	Meu Perfil - MMPSearch	/perfil/

  <div class="tabs is-centered is-boxed is-medium mb-6">
    {% include sidebar.html %}
  </div>

  <div class="box p-0" style="overflow: hidden; border-radius: 12px; position: relative;">
    <div id="cover-container" style="height: 200px; background-color: #ddd; background-size: cover; background-position: center; position: relative;">
        <button class="button is-small is-white is-rounded" style="position: absolute; top: 10px; right: 10px; opacity: 0.8;" onclick="document.getElementById('cover-input').click()">
            <i class="fa-solid fa-camera mr-1"></i> Alterar Capa
        </button>
        <input type="file" id="cover-input" class="is-hidden" accept="image/*">
    </div>
    
    <div class="p-5" style="position: relative;">
        <div style="position: absolute; top: -60px; left: 30px;">
            <figure class="image is-128x128">
                <img id="avatar-img" class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png" style="border: 4px solid white; background: white; object-fit: cover;">
            </figure>
            <button class="button is-small is-rounded is-light" style="position: absolute; bottom: 0; right: 0;" onclick="document.getElementById('avatar-input').click()">
                <i class="fa-solid fa-pencil"></i>
            </button>
            <input type="file" id="avatar-input" class="is-hidden" accept="image/*">
        </div>

        <div class="columns" style="margin-top: 50px;">
            <div class="column is-8">
                <h1 class="title is-3" id="display-username">Carregando...</h1>
                <p class="subtitle is-6 has-text-grey" id="display-bio">...</p>
                <div class="tags mt-3" id="display-tags"></div>
            </div>
            <div class="column is-4 has-text-right">
                <button class="button is-info is-outlined" id="btn-edit-profile">
                    <i class="fa-solid fa-edit mr-2"></i> Editar Perfil
                </button>
            </div>
        </div>
    </div>
  </div>

  <div id="edit-form-box" class="box is-hidden has-background-light">
    <h3 class="title is-5"><i class="fa-solid fa-user-cog"></i> Editar Informações</h3>
    <form id="profile-form">
        <div class="field">
            <label class="label">Nome de Usuário</label>
            <div class="control has-icons-left">
                <input class="input" type="text" name="username" id="input-username" required>
                <span class="icon is-small is-left"><i class="fa-solid fa-user"></i></span>
            </div>
        </div>
        <div class="field">
            <label class="label">Bio (Max 240)</label>
            <div class="control">
                <textarea class="textarea" name="bio" id="input-bio" maxlength="240" rows="2"></textarea>
            </div>
            <p class="help has-text-right" id="char-count">0/240</p>
        </div>
        <div class="field">
            <label class="label">Tags</label>
            <div class="control has-icons-left">
                <input class="input" type="text" name="tags" id="input-tags" placeholder="Ex: Trap, Dark, Samples">
                <span class="icon is-small is-left"><i class="fa-solid fa-hashtag"></i></span>
            </div>
        </div>
        <div class="field is-grouped">
            <div class="control"><button type="submit" class="button is-success">Salvar</button></div>
            <div class="control"><button type="button" class="button is-light" id="btn-cancel-edit">Cancelar</button></div>
        </div>
        <div id="update-msg" class="notification is-hidden mt-2"></div>
    </form>
  </div>

  <div class="box mt-5">
    <div class="tabs is-boxed">
        <ul>
            <li class="is-active" data-tab="projects-tab"><a><span class="icon"><i class="fa-solid fa-folder"></i></span> <span>Projetos</span></a></li>
            <li data-tab="samples-tab"><a><span class="icon"><i class="fa-solid fa-music"></i></span> <span>Samples</span></a></li>
        </ul>
    </div>

    <div id="projects-tab" class="content-tab-content">
        <div class="table-container">
            <table class="table is-fullwidth is-hoverable is-striped">
                <thead><tr><th>Nome do Projeto</th><th>Data</th><th class="has-text-right">Ações</th></tr></thead>
                <tbody id="projects-list"></tbody>
            </table>
            <p id="no-projects" class="has-text-grey is-hidden has-text-centered p-4">Nenhum projeto encontrado.</p>
        </div>
    </div>

    <div id="samples-tab" class="content-tab-content is-hidden">
        <div class="table-container">
            <table class="table is-fullwidth is-hoverable is-striped">
                <thead><tr><th>Nome do Sample</th><th>Categoria</th><th>Data</th><th class="has-text-right">Ações</th></tr></thead>
                <tbody id="samples-list"></tbody>
            </table>
            <p id="no-samples" class="has-text-grey is-hidden has-text-centered p-4">Nenhum sample enviado.</p>
        </div>
    </div>
  </div>
</div>

Preview

<section class="modal-card-body p-0" style="background-color: #fff; min-height: 200px; display: flex; align-items: center; justify-content: center;">
  
  <iframe id="preview-iframe" class="is-hidden" src="" style="width: 100%; height: 60vh; border: none;"></iframe>
  
  <div id="audio-player-container" class="is-hidden p-5 has-text-centered" style="width: 100%;">
      <div class="icon is-large has-text-info mb-4">
          <i class="fa-solid fa-music fa-3x"></i>
      </div>
      <h4 id="audio-name" class="title is-5 mb-2"></h4>
      <audio id="preview-audio" controls style="width: 80%;"></audio>
  </div>

</section>

<footer class="modal-card-foot" style="justify-content: flex-end; background-color: #fff; border-top: 1px solid #cfe8fc;">
  <button class="button" id="close-modal-btn">Fechar</button>
  <a href="#" id="full-edit-btn" target="_blank" class="button is-info">
    <span>Abrir / Baixar</span>
    <span class="icon is-small ml-1"><i class="fa-solid fa-up-right-from-square"></i></span>
  </a>
</footer>

<script> document.addEventListener('DOMContentLoaded', () => { // Referências DOM const els = { username: document.getElementById('display-username'), bio: document.getElementById('display-bio'), tags: document.getElementById('display-tags'), projectList: document.getElementById('projects-list'), sampleList: document.getElementById('samples-list'), formBox: document.getElementById('edit-form-box'), form: document.getElementById('profile-form'), inpUser: document.getElementById('input-username'), inpBio: document.getElementById('input-bio'), inpTags: document.getElementById('input-tags'), msg: document.getElementById('update-msg'), btnEdit: document.getElementById('btn-edit-profile'), btnCancel: document.getElementById('btn-cancel-edit') }; // Referências Modal const modal = document.getElementById('preview-modal'); const iframe = document.getElementById('preview-iframe'); const audioContainer = document.getElementById('audio-player-container'); const audioPlayer = document.getElementById('preview-audio'); const audioName = document.getElementById('audio-name'); const modalTitle = document.getElementById('modal-title'); const fullEditBtn = document.getElementById('full-edit-btn'); // --- FUNÇÃO DE MODAL INTELIGENTE --- window.openModal = (type, url, title, fullLink) => { modalTitle.textContent = title; fullEditBtn.href = fullLink || url; // Resetar iframe.classList.add('is-hidden'); audioContainer.classList.add('is-hidden'); iframe.src = ""; audioPlayer.pause(); if (type === 'project') { iframe.classList.remove('is-hidden'); iframe.src = url; // Tenta esconder menu do iframe iframe.onload = () => { try { const doc = iframe.contentDocument || iframe.contentWindow.document; const style = doc.createElement('style'); style.textContent = ".tabs, .navbar, footer { display: none !important; } body { overflow: auto !important; }"; doc.head.appendChild(style); } catch(e){} }; } else if (type === 'audio') { audioContainer.classList.remove('is-hidden'); audioName.textContent = title.replace('Ouvir: ', ''); audioPlayer.src = url; audioPlayer.play(); } modal.classList.add('is-active'); document.documentElement.classList.add('is-clipped'); }; function closeModal() { modal.classList.remove('is-active'); document.documentElement.classList.remove('is-clipped'); iframe.src = ""; audioPlayer.pause(); } document.querySelectorAll('.modal-background, .modal-card-head .delete, #close-modal-btn').forEach(el => el.onclick = closeModal); // --- CARREGAR DADOS --- async function loadProfile() { try { const res = await fetch('/api/user/profile'); if (res.status === 401) { window.location.href = '/login/'; return; } const data = await res.json(); // Header els.username.textContent = data.username; els.bio.textContent = data.bio || "Sem bio definida."; els.tags.innerHTML = ''; if(data.tags) data.tags.split(',').forEach(t => { if(t.trim()) els.tags.innerHTML += `${t.trim()}`; }); // Forms Values els.inpUser.value = data.username; els.inpBio.value = data.bio || ""; els.inpTags.value = data.tags || ""; // 1. Projetos els.projectList.innerHTML = ''; if (data.projects && data.projects.length > 0) { data.projects.forEach(p => { const slug = p.filename.replace('.mmp', '').replace('.mmpz', ''); const pageUrl = `/mmpSearch/projetos/${slug}.html`; const editorUrl = `/mmpSearch/creation.html?project=${p.filename}&embed=true`; els.projectList.innerHTML += ` ${p.display_name} ${p.created_at} `; }); } else { document.getElementById('no-projects').classList.remove('is-hidden'); } // 2. Samples els.sampleList.innerHTML = ''; if (data.samples && data.samples.length > 0) { data.samples.forEach(s => { els.sampleList.innerHTML += ` ${s.display_name} ${s.category} ${s.created_at} `; }); } else { document.getElementById('no-samples').classList.remove('is-hidden'); } } catch(e) { console.error(e); } } // Handlers de Edição els.btnEdit.onclick = () => els.formBox.classList.remove('is-hidden'); els.btnCancel.onclick = () => els.formBox.classList.add('is-hidden'); els.form.onsubmit = async (e) => { e.preventDefault(); const payload = { username: els.inpUser.value, bio: els.inpBio.value, tags: els.inpTags.value }; const res = await fetch('/api/user/update', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(payload)}); if(res.ok) { els.formBox.classList.add('is-hidden'); loadProfile(); } }; // Função Delete Genérica window.deleteItem = async (type, id) => { if(!confirm("Tem certeza que deseja apagar?")) return; const res = await fetch(`/api/${type}/${id}`, { method: 'DELETE' }); if(res.ok) loadProfile(); }; // Inicializa loadProfile(); // Abas document.querySelectorAll('.tabs li').forEach(tab => { tab.addEventListener('click', () => { document.querySelectorAll('.tabs li').forEach(t => t.classList.remove('is-active')); tab.classList.add('is-active'); document.querySelectorAll('.content-tab-content').forEach(c => c.classList.add('is-hidden')); document.getElementById(tab.dataset.tab).classList.remove('is-hidden'); }); }); }); </script>