HTML in LogicMachine - Printable Version

Code:

content("application/json")



-- Leer cuerpo del POST

local len = tonumber(os.getenv("CONTENT_LENGTH") or 0)

local body = ""



if len > 0 then

  body = io.read(len)

end



if not body or #body == 0 then

  print('{"status":"error","msg":"POST vacío"}')

  return

end



-- Intentar escribir el archivo JSON

local f, err = io.open("/www/user/inquilinos.json", "w")

if not f then

  print('{"status":"error","msg":"No se pudo abrir el archivo: '..tostring(err)..'"}')

  return

end



f:write(body)

f:close()



print('{"status":"ok"}')

Code:

local html = [[

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Gestión de Inquilinos</title>

<style>

body { font-family: sans-serif; margin: 20px; }

h2 { margin-bottom: 10px; }

button { padding: 6px 12px; margin: 4px; cursor: pointer; }

table { border-collapse: collapse; width: 100%; margin-top: 10px; }

th, td { border: 1px solid #ccc; padding: 6px; text-align: left; }

th { background: #eee; }

input[disabled] { background-color: #f8f8f8; color: #555; border: none; }

.edit { color: blue; }

.del { color: red; }

</style>

</head>

<body>

<h2>? Gestión de Inquilinos</h2>

<button id="backbtn">? Volver al menú principal</button>

<table id="tbl">

<thead>

<tr><th>#</th><th>Descripción</th><th>Código de Zona</th><th>Planta</th><th>Acciones</th></tr>

</thead>

<tbody></tbody>

</table>

<button id="addbtn">➕ Añadir nuevo</button>



<script>

const tbody = document.querySelector('#tbl tbody');

let inquilinos = [];



// Cargar datos iniciales

fetch('/user/inquilinos.json')

.then(r => r.json())

.then(data => { inquilinos = data; render(); });



function render() {

  tbody.innerHTML = '';

  inquilinos.forEach((x,i) => {

    tbody.innerHTML += `

      <tr>

        <td>${i+1}</td>

        <td><input value="${x.descripcion}" data-i="${i}" data-f="descripcion" disabled></td>

        <td><input value="${x.cod_zona}" data-i="${i}" data-f="cod_zona" disabled></td>

        <td><input value="${x.planta}" data-i="${i}" data-f="planta" disabled></td>

        <td>

          <button class="edit" data-i="${i}">✏️ Editar</button>

          <button class="del" data-i="${i}">? Borrar</button>

        </td>

      </tr>`;

  });

}



tbody.addEventListener('click', e=>{

  const i = e.target.dataset.i;

  if(e.target.classList.contains('edit')) {

    const row = tbody.querySelectorAll('tr')[i];

    const inputs = row.querySelectorAll('input');

    const editing = e.target.textContent.includes('Guardar');

    if(!editing) {

      // activar edición

      inputs.forEach(inp => inp.disabled = false);

      e.target.textContent = '? Guardar';

    } else {

      // guardar cambios

      inputs.forEach(inp => inp.disabled = true);

      inquilinos[i] = {

        descripcion: inputs[0].value,

        cod_zona: inputs[1].value,

        planta: inputs[2].value

      };

      e.target.textContent = '✏️ Editar';

            fetch('/inquilinos_save.lua', {method:'POST', body: JSON.stringify(inquilinos)})

      .then(()=>alert('✅ Cambios guardados'));

    }

  } else if(e.target.classList.contains('del')) {

    inquilinos.splice(i,1); render();

    fetch('/inquilinos_save.lua', {method:'POST', body: JSON.stringify(inquilinos)});

  }

});



document.querySelector('#addbtn').addEventListener('click', ()=>{

  inquilinos.push({descripcion:'Nuevo', cod_zona:'', planta:''});

  render();

});



document.getElementById('backbtn').onclick = () => {

 

  window.location.href = 'http://213.96.119.214:3672/scada-vis';

};

</script>

</body>

</html>

]]



local f = io.open('/www/user/inquilinos.html', 'w')

if f then

  f:write(html)

  f:close()

  log('✅ Archivo /www/user/inquilinos.html actualizado correctamente')

else

  log('❌ No se pudo crear el archivo HTML')

end