Pastebin

New Paste Add Image

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wimaz - Gestión de Red</title>
    <meta name="theme-color" content="#FF0090">
    <meta name="mobile-web-app-capable" content="yes">
 
    <script src="https://unpkg.com/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
 
    <style>
        :root { 
            --magenta: #FF0090; 
            --negro: #1a1a1a; 
            --gris-suave: #e9ecef; 
            --blanco-puro: #ffffff;
            --gris-boton-volver: #d1d9e0;
        }
 
        body { 
            font-family: 'Segoe UI', sans-serif; 
            margin: 0; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            min-height: 100vh;
            background: var(--negro);
        }
 
        /* --- VISOR DE MAPA --- */
        #visor-mapa-fondo {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 1;
            background-color: var(--negro);
            display: flex;
            align-items: center;
            justify content: center;
            overflow: hidden;
            touch-action: none;
        }
 
        #img-mapa {
            max-width: none; !important;
            width: 100%; !important;
            height: 100%; !important;
            object-fit: contain;
            cursor: grab;
            shape-rendering: geometricPreision;
        }
 
        #img-mapa:active { cursor: grabbing; }
 
        /* --- NUEVA BARRA ESTÁTICA (SOLO AL VER PLANO) --- */
        #barra-superior-estatica {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 65px;
            background: var(--negro);
            border-bottom: 3px solid var(--magenta);
            display: none; /* Oculta por defecto */
            align-items: center;
            justify-content: center;
            z-index: 9999; /* Por encima de todo */
        }
 
        #btn-volver-estatico {
            width: 95%;
            height: 45px;
            background: #333;
            color: white;
            border: 1px solid var(--magenta);
            border-radius: 8px;
            font-weight: bold;
            text-transform: uppercase;
            cursor: pointer;
        }
 
        /* Contenedor para ocultar toda la UI de menús de golpe */
        #ui-principal {
            position: relative;
            z-index: 100;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
 
        /* Header & Logo */
        .header { background: rgba(26, 26, 26, 0.9); width: 100%; text-align: center; padding: 40px 0; color: var(--magenta); backdrop-filter: blur(5px); }
        .header h1 { margin: 0; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 2px; line-height: 1.2; }
        .logo-container { margin-top: -45px; z-index: 10; }
        .logo-circular { width: 90px; height: 90px; border-radius: 50%; background: #000; border: 4px solid white; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
        .logo-circular img { width: 100%; height: 100%; object-fit: contain; }
 
        .container { width: 95%; max-width: 1000px; padding: 20px 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }
        .oculto { display: none !important; }
 
        /* BOTONES PRINCIPALES */
        .btn { 
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid #ddd; 
            padding: 18px; 
            border-radius: 12px; 
            font-weight: bold; 
            cursor: pointer; 
            transition: all 0.3s ease; 
            color: #333; 
            display: flex;
            justify-content: center; 
            align-items: center; 
            text-transform: uppercase; 
            width: 100%; 
            box-sizing: border-box;
            position: relative;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        .btn span { flex-grow: 1; text-align: center; }
        .btn:hover { border-color: var(--magenta); color: var(--magenta); transform: translateY(-2px); }
 
        .btn-accion { background: var(--magenta); color: white; border: none; padding: 15px; border-radius: 8px; font-weight: bold; cursor: pointer; margin-bottom: 20px; width: 100%; text-transform: uppercase; box-shadow: 0 4px 12px rgba(255, 0, 144, 0.2); transition: 0.3s; }
        .btn-volver { background: var(--negro); border: 1px solid var(--magenta); color: white; font-weight: bold; padding: 14px; border-radius: 10px; cursor: pointer; margin-bottom: 15px; width: 100%; text-align: center; font-size: 0.85rem; text-transform: uppercase; }
 
        /* Tablas */
        .table-container { background: var(--blanco-puro); border-radius: 12px; overflow-x: auto; box-shadow: 0 4px 15px rgba(0,0,0,0.08); width: 100%; border: 1px solid #dee2e6; }
        table { width: 100%; border-collapse: collapse; min-width: 750px; }
        th { background: #f8f9fa; padding: 14px; border-bottom: 2px solid var(--gris-suave); font-size: 0.75rem; color: #666; }
        td { border-bottom: 1px solid #eee; padding: 0; position: relative; }
 
        td input { width: 100%; border: none; padding: 14px 8px; box-sizing: border-box; font-size: 14px; outline: none; background: transparent; text-align: center; color: #1a1a1a; }
        .fila-bloqueada-fondo { background-color: #f2f2f2 !important; }
        input:disabled { color: #000000 !important; opacity: 1 !important; font-weight: 500; }
        .badge-fotos { background: var(--magenta); color: white; border-radius: 50%; padding: 2px 6px; font-size: 0.7rem; margin-left: 4px; }
 
        /* MODAL */
        .modal-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 10000; backdrop-filter: blur(4px); }
        .modal-content { background: white; padding: 25px; border-radius: 20px; width: 85%; max-width: 380px; text-align: center; }
        .modal-btns { display: flex; gap: 12px; margin-top: 10px; }
        .btn-m { flex: 1; padding: 14px; border-radius: 10px; border: none; font-weight: bold; cursor: pointer; text-transform: uppercase; }
        .btn-save { background: var(--magenta); color: white; }
        .btn-cancel { background: #e0e0e0; color: #444; }
        .btn-danger { background: #ff4d4d; color: white; }
        .btn-delete { color: #ff4d4d; border: none; background: none; cursor: pointer; font-size: 1.2rem; }
 
        /* LOGIN CARD */
        .login-card { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); width: 100%; max-width: 350px; text-align: center; margin-top: 50px; }
        .login-card input { width: 100%; padding: 15px; margin: 10px 0; border: 2px solid var(--gris-suave); border-radius: 10px; box-sizing: border-box; outline: none; }
        .ojo-wrapper { position: relative; width: 100%; }
        .ojo-icon { position: absolute; right: 15px; top: 22px; cursor: pointer; color: #666; font-size: 1.2rem; }
 
        #info-coords-float {
            position: fixed;
            bottom: 10px; right: 10px;
            background: rgba(255,255,255,0.8);
            padding: 5px; border-radius: 5px;
            font-size: 10px; z-index: 1000;
            display: none;
        }
    </style>
</head>
<body>
    <div id="barra-superior-estatica">
        <button id="btn-volver-estatico" onclick="salirModoMapa()">⬅ VOLVER A LA LISTA DE NODOS</button>
    </div>
 
    <div id="info-coords-float"></div>
 
    <div id="visor-mapa-fondo">
        <img src="img/mapa-maestro.svg" id="img-mapa" alt="Plano AutoCAD">
    </div>
 
    <div id="ui-principal">
        <div class="header"><h1>INTERNET INALÁMBRICO<br>MAZARRÓN, S.L.</h1></div>
        <div class="logo-container"><div class="logo-circular"><img src="mi-logo.png" alt="Logo"></div></div>
 
        <div id="v-login" class="container">
            <div class="login-card">
                <h2 style="color:var(--negro)">ACCESO</h2>
                <input type="text" id="user" placeholder="Usuario">
                <div class="ojo-wrapper">
                    <input type="password" id="pass" placeholder="Contraseña">
                    <span class="ojo-icon" onclick="alternarOjo()">👁️</span>
                </div>
                <button class="btn-accion" onclick="login()">Entrar</button>
            </div>
        </div>
 
        <div id="v-obras" class="container oculto"></div>
        <div id="v-submenu" class="container oculto"></div>
        <div id="v-nodos" class="container oculto"></div>
        <div id="v-cajas" class="container oculto"></div>
        <div id="v-docs" class="container oculto"></div>
    </div>
 
    <div id="modal" class="modal-overlay">
        <div class="modal-content">
            <h3 id="modal-titulo">Título</h3>
            <p id="modal-msg" class="oculto" style="color: #666; font-size: 0.95rem;"></p>
            <input type="text" id="modal-input" placeholder="Escribir..." class="oculto" style="width: 100%; padding: 14px; margin: 15px 0; border: 2px solid var(--gris-suave); border-radius: 10px; box-sizing: border-box; text-align: center;">
            <div class="modal-btns" id="modal-footer"></div>
        </div>
    </div>
 
    <script>
        let DB = { usuarios: [], obras: {} };
        let obraSel = "", nodoSel = "", rolActual = "";
        let filaEditando = null;
 
        const imgMapa = document.getElementById('img-mapa');
        const pz = Panzoom(imgMapa, {
            maxScale: 30,
            minScale: 0.1,
            contain: 'outside',
            duration: 1000,
            animate: true
        });
 
        imgMapa.parentElement.addEventListener('wheel', pz.zoomWithWheel);
 
        const coordenadasMapa = {
            "BOLNUEVO": { x: 0.1784, y: 0.5714, zoom: 4, nodos: {
                "NODO 01": { x: 0.1650, y: 0.5600, zoom: 8 }
            }},
            "ISLA PLANA": { x: 0.6716, y: 0.4813, zoom: 4, nodos: {} },
            "LA AZOHÍA": { x: 0.8800, y: 0.9004, zoom: 4.5, nodos: {} },
            "MAZARRÓN": { x: 0.1169, y: 0.2690, zoom: 5.5, nodos: {} },
            "PUERTO DE MAZARRÓN": { x: 0.4800, y: 0.5817, zoom: 3.2, nodos: {} },
            "DEFAULT": { x: 0.5, y: 0.5, zoom: 1 },
        };
 
        function manejarZoom(nombreObra) {
            const data = coordenadasMapa[nombreObra.toUpperCase()] || coordenadasMapa["DEFAULT"];
            if(nombreObra === "DEFAULT") { pz.reset(); return; }
 
            pz.zoom(data.zoom, { animate: true });
            setTimeout(() => {
                const visor = imgMapa.parentElement;
                pz.pan(
                    (visor.offsetWidth / 2) - (imgMapa.offsetWidth * data.zoom * data.x),
                    (visor.offsetHeight / 2) - (imgMapa.offsetHeight * data.zoom * data.y),
                    { animate: true }
                );
            }, 100);
        }
 
        function zoomANodo(nombreNodo) {
            pz.preset();
            const obraData = coordenadasMapa[obraSel.toUpperCase()];
            if(obraData && obraData.nodos[nombreNodo.toUpperCase()]) {
                const n = obraData.nodos[nombreNodo.toUpperCase()];
 
                // --- ACTIVAR MODO MAPA ---
                document.getElementById('ui-principal').classList.add('oculto');
                document.getElementById('barra-superior-estatica').style.display = 'flex';
 
                pz.zoom(n.zoom, { animate: true });
                setTimeout(() => {
                    const visor = imgMapa.parentElement;
                    pz.pan(
                        (visor.offsetWidth / 2) - (imgMapa.offsetWidth * n.zoom * n.x),
                        (visor.offsetHeight / 2) - (imgMapa.offsetHeight * n.zoom * n.y),
                        { animate: true }
                    );
                }, 100);
            } else { alert("Coordenadas no definidas para este nodo."); }
        }
 
        function salirModoMapa() {
            document.getElementById('ui-principal').classList.remove('oculto');
            document.getElementById('barra-superior-estatica').style.display = 'none';
            document.getElementById('info-coords-float').style.display = 'none';
            pz.reset();
        }
 
        imgMapa.addEventListener('pointerup', (e) => {
            const rect = imgMapa.getBoundingClientRect();
            const x = ((e.clientX - rect.left) / rect.width).toFixed(4);
            const y = ((e.clientY - rect.top) / rect.height).toFixed(4);
            const info = document.getElementById('info-coords-float');
            info.style.display = 'block';
            info.innerHTML = `X: ${x} Y: ${y}`;
            console.log(`Punto pinchado: x: ${x}, y: ${y}`);
        });
 
        function alternarOjo() {
            const p = document.getElementById('pass');
            p.type = p.type === "password" ? "text" : "password";
        }
 
        async function cargarDatos() {
            try { 
                const resp = await fetch('datos.json'); 
                const data = await resp.json(); 
                if(data) DB = data; 
            } catch(e) { console.error("Error al cargar datos"); }
        }
 
        function login() {
            const u = document.getElementById('user').value;
            const p = document.getElementById('pass').value;
            const usuario = DB.usuarios.find(usr => usr.user === u && usr.pass === p);
            if(usuario) {
                rolActual = usuario.rol;
                document.getElementById('v-login').classList.add('oculto');
                renderObras();
                document.getElementById('v-obras').classList.remove('oculto');
            } else { alert("Usuario o contraseña incorrectos"); }
        }
 
        async function guardarEnServidor() {
            try { 
                await fetch('guardar.php', { method: 'POST', body: JSON.stringify(DB) }); 
            } catch(e) { console.error("Error al guardar"); }
        }
 
        function abrirModalApp({ titulo, mensaje, conInput, txtConfirmar, esPeligroso, callback }) {
            const modal = document.getElementById('modal');
            const input = document.getElementById('modal-input');
            const msg = document.getElementById('modal-msg');
            const footer = document.getElementById('modal-footer');
            document.getElementById('modal-titulo').innerText = titulo;
            if(conInput) input.classList.remove('oculto'); else input.classList.add('oculto');
            if(mensaje) msg.classList.remove('oculto'); else msg.classList.add('oculto');
            msg.innerText = mensaje || ""; input.value = "";
            footer.innerHTML = `<button class="btn-m btn-cancel" onclick="cerrarModal()">Cancelar</button>
                <button class="btn-m ${esPeligroso ? 'btn-danger' : 'btn-save'}" id="btn-modal-ok">${txtConfirmar || 'Aceptar'}</button>`;
            modal.style.display = 'flex';
            document.getElementById('btn-modal-ok').onclick = () => {
                const valor = conInput ? input.value : true;
                if(conInput && !valor) return;
                callback(valor); cerrarModal();
            };
        }
        function cerrarModal() { document.getElementById('modal').style.display = 'none'; }
 
        function mostrarVista(id) {
            document.querySelectorAll('.container').forEach(v => v.classList.add('oculto'));
            document.getElementById(id).classList.remove('oculto');
            window.scrollTo(0,0);
        }
 
        function renderObras() {
            const v = document.getElementById('v-obras');
            v.innerHTML = `<h2 style="color:white; text-shadow: 2px 2px 4px black;">SELECCIONAR ZONA</h2>`;
            manejarZoom("DEFAULT");
            Object.keys(DB.obras).sort().forEach(nombre => {
                let b = document.createElement('div'); b.className = 'btn';
                b.innerHTML = `<span>${nombre}</span>`;
                b.onclick = () => { 
                    obraSel = nombre; 
                    manejarZoom(nombre);
                    abrirSubmenu(); 
                };
                v.appendChild(b);
            });
        }
 
        function abrirSubmenu() {
            const v = document.getElementById('v-submenu');
            v.innerHTML = `<button class="btn-volver" onclick="renderObras(); mostrarVista('v-obras');">⬅ CAMBIAR DE ZONA</button>
                <h2 style="text-align:center; color:white; text-shadow: 2px 2px 4px black;">${obraSel}</h2>
                <div class="btn" onclick="abrirNodos()" style="background:var(--negro);color:white;border:1px solid var(--magenta);"><span>NODOS</span></div>
                <div class="btn" onclick="abrirDocs()" style="background:var(--negro);color:white;border:1px solid var(--magenta);"><span>DOCUMENTOS</span></div>`;
            mostrarVista('v-submenu');
        }
 
        function abrirNodos() {
            const v = document.getElementById('v-nodos');
            v.innerHTML = `<button class="btn-volver" onclick="mostrarVista('v-submenu')">⬅ VOLVER</button>
                ${rolActual === 'admin' ? '<button class="btn-accion" onclick="pedirNombreNodo()">+ AÑADIR NODO</button>' : ''}
                <div id="lista-nodos" style="width:100%"></div>`;
            const lista = v.querySelector('#lista-nodos');
            const nodos = Object.keys(DB.obras[obraSel].nodos).sort((a,b)=>a.localeCompare(b,undefined,{numeric:true}));
            nodos.forEach(n => {
                let d = document.createElement('div'); d.className = 'btn'; d.style.marginBottom="8px";
                d.innerHTML = `<button onclick="zoomANodo('${n}')" style="background:none; border:1px solid var(--magenta); color:var(--magenta); border-radius:5px; padding:5px; margin-right:10px; cursor:pointer;">📍 VER</button>
                               <span onclick="abrirCajas('${n}')">🔹 ${n}</span>
                               ${rolActual === 'admin' ? `<button class="btn-delete" style="margin-left:10px;" onclick="borrarNodo('${n}')">🗑️</button>` : ''}`;
                lista.appendChild(d);
            });
            mostrarVista('v-nodos');
        }
 
        function pedirNombreNodo() {
            abrirModalApp({ titulo: "Nuevo Nodo", conInput: true, callback: (val) => {
                if(!DB.obras[obraSel].nodos[val]) { DB.obras[obraSel].nodos[val] = []; guardarEnServidor(); abrirNodos(); }
            }});
        }
 
        function borrarNodo(n) {
            abrirModalApp({ titulo: "Borrar Nodo", mensaje: `¿Eliminar "${n}"?`, esPeligroso: true, txtConfirmar: "Eliminar", callback: () => {
                delete DB.obras[obraSel].nodos[n]; guardarEnServidor(); abrirNodos();
            }});
        }
 
        function abrirCajas(n) {
            nodoSel = n;
            mostrarVista('v-cajas');
            const v = document.getElementById('v-cajas');
            v.innerHTML = `<button class="btn-volver" onclick="abrirNodos()">⬅ VOLVER</button>
                <h2 style="text-align:center;color:var(--magenta); background: rgba(0,0,0,0.7); display:inline-block; padding: 5px 15px; border-radius:10px;">${n}</h2>
                ${rolActual === 'admin' ? '<button class="btn-accion" onclick="nuevaCaja()">+ AÑADIR CAJA</button>' : ''}
                <div class="table-container"><table><thead><tr><th>REF</th><th>DIRECCIÓN</th><th>P1</th><th>P2</th><th>OBS</th><th>FOTO</th><th>ACCIONES</th></tr></thead><tbody id="body-cajas"></tbody></table></div>`;
            const cajas = DB.obras[obraSel].nodos[nodoSel] || [];
            const tbody = v.querySelector('#body-cajas');
            cajas.forEach((c, idx) => {
                const bloqueada = (filaEditando !== idx);
                const tr = document.createElement('tr');
                const tdClase = bloqueada ? 'fila-bloqueada-fondo' : '';
                const disabledAttr = bloqueada ? 'disabled' : '';
                tr.innerHTML = `
                    <td class="${tdClase}"><input ${disabledAttr} onchange="editCaja(${idx},0,this.value)" value="${c[0]}"></td>
                    <td class="${tdClase}"><input ${disabledAttr} onchange="editCaja(${idx},1,this.value)" value="${c[1]}"></td>
                    <td class="${tdClase}"><input ${disabledAttr} onchange="editCaja(${idx},2,this.value)" value="${c[2]}"></td>
                    <td class="${tdClase}"><input ${disabledAttr} onchange="editCaja(${idx},3,this.value)" value="${c[3]}"></td>
                    <td class="${tdClase}"><input ${disabledAttr} onchange="editCaja(${idx},4,this.value)" value="${c[4]}"></td>
                    <td style="text-align:center" class="${tdClase}">
                        <button style="border:none;background:none;cursor:pointer;" onclick="subirFoto(${idx})">📸<span class="badge-fotos">${(c[5] && c[5].startsWith('[') ? JSON.parse(c[5]).length : 0)}</span></button>
                        <input type="file" id="f-${idx}" class="oculto" multiple onchange="procesarFoto(${idx},this)">
                    </td>
                    <td class="${tdClase}">
                        <div style="display:flex; justify-content:center; gap:8px;">
                            ${bloqueada ? `<span onclick="filaEditando=${idx}; abrirCajas(nodoSel)" style="cursor:pointer">✏️</span>` : `<span onclick="filaEditando=null; guardarEnServidor(); abrirCajas(nodoSel)" style="cursor:pointer">✅</span>`}
                            ${rolActual === 'admin' ? `<button class="btn-delete" onclick="borrarCaja(${idx})">🗑️</button>` : ''}
                        </div>
                    </td>`;
                tbody.appendChild(tr);
            });
        }
 
        function nuevaCaja() { DB.obras[obraSel].nodos[nodoSel].push(["","","","","","[]"]); guardarEnServidor(); abrirCajas(nodoSel); }
        function editCaja(idx, col, val) { DB.obras[obraSel].nodos[nodoSel][idx][col] = val; guardarEnServidor(); }
 
        function borrarCaja(idx) {
            abrirModalApp({ titulo: "Borrar Caja", mensaje: "¿Eliminar esta fila?", esPeligroso: true, callback: () => {
                DB.obras[obraSel].nodos[nodoSel].splice(idx,1); guardarEnServidor(); abrirCajas(nodoSel);
            }});
        }
 
        function abrirDocs() {
            const v = document.getElementById('v-docs');
            v.innerHTML = `<button class="btn-volver" onclick="mostrarVista('v-submenu')">⬅ VOLVER</button>
                <h2 style="text-align:center; color:white;">Documentos: ${obraSel}</h2>
                <input type="file" id="input-doc" class="oculto" onchange="procesarDoc(this)">
                ${rolActual === 'admin' ? '<button class="btn-accion" onclick="document.getElementById(\'input-doc\').click()">+ SUBIR ARCHIVO</button>' : ''}
                <div id="lista-archivos" style="width:100%"></div>`;
            renderListaDocs(); mostrarVista('v-docs');
        }
 
        function renderListaDocs() {
            const lista = document.getElementById('lista-archivos');
            lista.innerHTML = "";
            let docs = DB.obras[obraSel].docs || [];
            docs.forEach((doc, idx) => {
                const item = document.createElement('div'); item.className = 'btn'; item.style.marginBottom="8px";
                item.innerHTML = `<span onclick="descargarDoc(${idx})">📄 ${doc.nombre}</span>
                    ${rolActual === 'admin' ? `<button class="btn-delete" onclick="borrarDoc(${idx})">🗑️</button>` : ''}`;
                lista.appendChild(item);
            });
        }
        function descargarDoc(idx) { const d=DB.obras[obraSel].docs[idx]; const l=document.createElement('a'); l.href=d.data; l.download=d.nombre; l.click(); }
        function borrarDoc(idx) { DB.obras[obraSel].docs.splice(idx,1); guardarEnServidor(); renderListaDocs(); }
        function procesarDoc(inp) { if(!inp.files[0])return; const f=inp.files[0], r=new FileReader(); r.onload=()=>{ if(!DB.obras[obraSel].docs)DB.obras[obraSel].docs=[]; DB.obras[obraSel].docs.push({nombre:f.name, data:r.result}); guardarEnServidor(); renderListaDocs(); }; r.readAsDataURL(f); }
 
        function subirFoto(idx) {
            if(filaEditando !== idx) {
                let actual = DB.obras[obraSel].nodos[nodoSel][idx][5];
                let fotos = (actual && actual.startsWith('[')) ? JSON.parse(actual) : [];
                if(fotos.length > 0) {
                    const w = window.open();
                    w.document.write("<h3>Galería</h3><div style='display:flex; flex-wrap:wrap; gap:10px;'>");
                    fotos.forEach((img, fIdx) => {
                        w.document.write(`<div style="text-align:center"><img src="${img}" style="width:200px;"><br><button onclick="window.opener.borrarFotoFisica(${idx},${fIdx}); window.close()" style="color:red; cursor:pointer;">Borrar</button></div>`);
                    });
                    w.document.write("</div>");
                }
            } else { document.getElementById(`f-${idx}`).click(); }
        }
 
        window.borrarFotoFisica = function(cIdx, fIdx) {
            let fotos = JSON.parse(DB.obras[obraSel].nodos[nodoSel][cIdx][5]);
            fotos.splice(fIdx, 1);
            DB.obras[obraSel].nodos[nodoSel][cIdx][5] = JSON.stringify(fotos);
            guardarEnServidor(); abrirCajas(nodoSel);
        };
 
        function procesarFoto(idx, inp) {
            if(!inp.files.length) return;
            let actual = DB.obras[obraSel].nodos[nodoSel][idx][5];
            let fotos = (actual && actual.startsWith('[')) ? JSON.parse(actual) : [];
            let p = 0;
            Array.from(inp.files).forEach(file => {
                const fr = new FileReader();
                fr.onload = () => {
                    fotos.push(fr.result); p++;
                    if(p === inp.files.length) {
                        DB.obras[obraSel].nodos[nodoSel][idx][5] = JSON.stringify(fotos);
                        guardarEnServidor(); abrirCajas(nodoSel);
                    }
                };
                fr.readAsDataURL(file);
            });
        }
 
        cargarDatos();
    </script>
</body>
</html>

Settings

Title : [Optional]

Paste Folder : [Optional]

Syntax : [Optional]

Expiration : [Optional]

Status : [Optional]

Password : [Optional]

Description: [Optional]

Tags: [Optional]

Encrypt Paste (?)

You are currently not logged in, this means you can not edit or delete anything you paste. Sign Up or Login

Settings

Site Languages