From 6b72069c51dcdc6bd87a2f0152c7b1d8c2995144 Mon Sep 17 00:00:00 2001
From: Miguel <miguel.vera.csa@gmail.com>
Date: Sat, 8 Feb 2025 23:58:51 +0100
Subject: [PATCH] Log persistente y eschemas editables

---
 __pycache__/config_manager.cpython-310.pyc | Bin 7826 -> 9367 bytes
 app.py                                     |  14 +-
 config_manager.py                          |  37 ++++
 data/log.txt                               |  30 +++
 templates/index.html                       | 227 +++++++++++++++++++--
 templates/schema_editor.html               |  44 ++++
 6 files changed, 334 insertions(+), 18 deletions(-)
 create mode 100644 data/log.txt
 create mode 100644 templates/schema_editor.html

diff --git a/__pycache__/config_manager.cpython-310.pyc b/__pycache__/config_manager.cpython-310.pyc
index f48bd70800a790641b6b7892c8f596a0c2d2de7d..6da376a52de5aa3ee92d4f9f5f71ac0f3b2b8fb4 100644
GIT binary patch
delta 3589
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
Ao&W#<

delta 2090
zcmaJ>&2Jk;6yI5|H~v^Vj$^xZ;>1qU(6~}*NlW@cX=&B8(2qoI5h?*;+?}zzC9&PN
zYqeBDInWAJ4hRMb2_z&=C~!gYpTNCRFC6B?g#$f+xRwLFH|yfov{>>_Z{NJH-<$X5
z%hx`CIo(dB5(fTO)pyOG7CuXVz4-<+3}LJ>ZmgM{ar3sZ7U2<LaZ5ynC9H;7G#VC<
za{IQmW}|jQSg0}i2#=vA#%Fi}t&{(H#I=Xb9iF-!T}wRkJk3Y(d@~u3_f0Z7p>}^P
zTv$MikMS&;JI}V}@kWe~^Bh{G`u-yW3YtWo7qH|s-=>STkk<Bhc@b5kIxKOR_z#as
zUc!)>en@hf;?w9erZvNzvU!<T@HETgmyGJH%E{~ToV;L8uv2o~T(-G^YD?ZX%Vsqp
z|1v#iiz&+&>y0e~^73wECF|h*6j+woEXM4=6Omg}7$cvr)x4G$)M`K%sB92H7h3X*
z_=EjwWJCCVy(u2Xc|E8<f6Z^V6ua@8iG~>6_F7!Df)zF5cU>1Pw@fI>9}~Hnvc*l$
z4}8d?C5%#BtKAVTW$6$W?{0Le7UbxZvO<PTSOfC(p`k#Uyf1><jW)dJwVE~VfpCL1
zygw#ql7F(i9Cvn2jz8&;II@m;-S$T3=&Zc#G%|y8EfwTFr@$)mS7(W>^d?g_OHJ$4
zi;C@24CLPQto<Ct+$k@o%lmbOFVOcQfv&Ym(oms^CKl?pTMe(d(EB0nvFUwi_0SRi
z^{&_mI|uv8@kN3qxtQ6x9Oj|#0|W;V)aaQ@t1Bmk+vZ{!pbc<{j-HmycdugPL%nY@
zr<kpy7UhGna(R**C_50dFlm{j3c-wA$j+Z1WL`k!mL1-N=4q4F|C3F1J2(!a&-X&_
zt8AW?b;cv)JfQh_+I!=b#V6CkD`Y)H?NRKI-IZP?moZcGXsDtc@LB=vkuMbv6jglr
zrYkyuhXWb$1E|JA3XAeiVSfH3*)uU5+o9R0`7U^!!0+_#7d~OzmeBN8v>P;bAFMJJ
z6D{mK4x7BT{i6z%t1J+8u1pZh_C+1stI9sP`ug#6=U`E0iiOe{G=gP<vk29Zu#Qzy
zRON}{?&5h8pJWNAQFpiZaq&Zw6{S-;oz&e68z<i>on;r~_a&H82H+!Vz#Kv~qU?4z
z=yU@plCC6=Ozp|(&NwuDv?a76a9D0mEj4zcjf&Eq`S2FWG2*fAwS=-d?e%qdm4duY
zaFLD^;o8&Ofu^L{r21VYvo{geoGZ|-bGMFtY_woiPEOAqyF&gJg%0BpVHFoNy|oR$
zImBJ1#ZBRMaeTsy__p`K^c|L@dkEL7E>o4s=3rE4H&g^E0+9`06j~KHicsy3E)A?o
zJ?cTNQxC3!-cvo!dTocUz(tQ=jNYde$u@OECn%;~p6ev(+0~8}`kX;n2{(#v19l)(
zlMp9aTj}EHrGqhoLH)F0Vbz1a_NS!3X1KiIla;QRo<exa&?x88V@TKhyCHv`y~xI8
zb#8uh8@bSh0lmzyi@+k-OAsMAOmK|gIKc^m6#^PX=nzmxARrjDN=x(<Llhx~fB&2o
kVr(Lo9j(MFV`fqQF?Tje0|%Vol3d<V$qdJk-5s<40MypXw*UYD

diff --git a/app.py b/app.py
index 681807f..150e464 100644
--- a/app.py
+++ b/app.py
@@ -26,7 +26,7 @@ def handle_websocket(ws):
 
 
 def broadcast_message(message):
-    """Envía un mensaje a todas las conexiones WebSocket activas."""
+    """Envía un mensaje a todas las conexiones WebSocket activas y guarda en log."""
     dead_connections = set()
     for ws in websocket_connections:
         try:
@@ -34,6 +34,9 @@ def broadcast_message(message):
         except Exception:
             dead_connections.add(ws)
 
+    # Guardar en archivo de log
+    config_manager.append_log(message)
+
     # Limpiar conexiones muertas
     websocket_connections.difference_update(dead_connections)
 
@@ -147,5 +150,14 @@ def browse_directories():
     return jsonify({"status": "cancelled"})
 
 
+@app.route("/api/logs", methods=["GET", "DELETE"])
+def handle_logs():
+    if request.method == "GET":
+        return jsonify({"logs": config_manager.read_log()})
+    else:  # DELETE
+        success = config_manager.clear_log()
+        return jsonify({"status": "success" if success else "error"})
+
+
 if __name__ == "__main__":
     app.run(debug=True)
diff --git a/config_manager.py b/config_manager.py
index e58bf81..542ad50 100644
--- a/config_manager.py
+++ b/config_manager.py
@@ -13,6 +13,43 @@ class ConfigurationManager:
             self.base_path, "backend", "script_groups"
         )
         self.working_directory = None
+        self.log_file = os.path.join(self.data_path, "log.txt")
+        self._init_log_file()
+
+    def _init_log_file(self):
+        """Initialize log file if it doesn't exist"""
+        if not os.path.exists(self.data_path):
+            os.makedirs(self.data_path)
+        if not os.path.exists(self.log_file):
+            with open(self.log_file, "w", encoding="utf-8") as f:
+                f.write("")
+
+    def append_log(self, message: str) -> None:
+        """Append a message to the log file"""
+        try:
+            with open(self.log_file, "a", encoding="utf-8") as f:
+                f.write(message)
+        except Exception as e:
+            print(f"Error writing to log file: {e}")
+
+    def read_log(self) -> str:
+        """Read the entire log file"""
+        try:
+            with open(self.log_file, "r", encoding="utf-8") as f:
+                return f.read()
+        except Exception as e:
+            print(f"Error reading log file: {e}")
+            return ""
+
+    def clear_log(self) -> bool:
+        """Clear the log file"""
+        try:
+            with open(self.log_file, "w", encoding="utf-8") as f:
+                f.write("")
+            return True
+        except Exception as e:
+            print(f"Error clearing log file: {e}")
+            return False
 
     def set_working_directory(self, path: str) -> Dict[str, str]:
         """Set and validate working directory."""
diff --git a/data/log.txt b/data/log.txt
new file mode 100644
index 0000000..cac062f
--- /dev/null
+++ b/data/log.txt
@@ -0,0 +1,30 @@
+
+Iniciando ejecución de x1.py...
+=== Ejecutando Script de Prueba 1 ===
+
+Configuraciones cargadas:
+Nivel 1: {
+  "api_key": "your-api-key-here",
+  "model": "gpt-3.5-turbo",
+  "max_tokens": 1000,
+  "temperature": 0.7
+}
+Nivel 2: {
+  "input_dir": "D:/Datos/Entrada",
+  "output_dir": "D:/Datos/Salida",
+  "batch_size": 50
+}
+Nivel 3: {
+  "project_name": "Test"
+}
+
+Simulando procesamiento...
+Progreso: 20%
+Progreso: 40%
+Progreso: 60%
+Progreso: 80%
+Progreso: 100%
+
+¡Proceso completado!
+
+Ejecución completada.
diff --git a/templates/index.html b/templates/index.html
index 4e3e4b4..81639c4 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -174,38 +174,210 @@
         }
 
         async function modifySchema(level) {
-            const response = await fetch(`/api/schema/${level}?group=${currentGroup}`);
-            const schema = await response.json();
-            
-            // Show schema editor modal
-            const modal = document.getElementById('schema-editor');
-            modal.classList.remove('hidden');
+            try {
+                console.log('Loading schema for level:', level); // Debug line
+                const response = await fetch(`/api/schema/${level}?group=${currentGroup}`);
+                const schema = await response.json();
+                console.log('Loaded schema:', schema); // Debug line
+                
+                // Show schema editor modal
+                const modal = document.getElementById('schema-editor');
+                modal.classList.remove('hidden');
+                
+                // Inicializar JSON editor
+                const jsonEditor = document.getElementById('json-editor');
+                jsonEditor.value = JSON.stringify(schema, null, 2);
+                
+                // Inicializar visual editor
+                const visualEditor = document.getElementById('visual-editor');
+                visualEditor.innerHTML = '<div id="schema-fields" class="mb-4"></div>' +
+                    '<button onclick="addSchemaField()" class="mt-4 bg-green-500 text-white px-4 py-2 rounded">Agregar Campo</button>';
+                
+                // Renderizar campos existentes
+                renderVisualEditor(schema);
+                
+                // Guardar nivel actual
+                document.getElementById('schema-level').value = level;
+                
+                // Activar pestaña visual por defecto
+                switchEditorMode('visual');
+            } catch (error) {
+                console.error('Error loading schema:', error);
+                alert('Error cargando el esquema');
+            }
+        }
+
+        function switchEditorMode(mode) {
+            const visualEditor = document.getElementById('visual-editor');
+            const jsonEditor = document.getElementById('json-editor');
+            const visualTab = document.getElementById('visual-tab');
+            const jsonTab = document.getElementById('json-tab');
+
+            if (mode === 'visual') {
+                visualEditor.classList.remove('hidden');
+                jsonEditor.classList.add('hidden');
+                visualTab.classList.add('border-blue-500');
+                jsonTab.classList.remove('border-blue-500');
+            } else {
+                visualEditor.classList.add('hidden');
+                jsonEditor.classList.remove('hidden');
+                visualTab.classList.remove('border-blue-500');
+                jsonTab.classList.add('border-blue-500');
+            }
+        }
+
+        function renderVisualEditor(schema) {
+            const container = document.getElementById('schema-fields');
+            container.innerHTML = '';
+
+            Object.entries(schema.properties || {}).forEach(([key, field]) => {
+                container.appendChild(createFieldEditor(key, field));
+            });
+        }
+
+        function createFieldEditor(key, field) {
+            const div = document.createElement('div');
+            div.className = 'mb-6 p-4 border rounded schema-field';
+            div.innerHTML = `
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-sm font-bold mb-2">Nombre del Campo</label>
+                        <input type="text" value="${key}" 
+                               class="w-full p-2 border rounded"
+                               onchange="updateVisualSchema()">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-bold mb-2">Tipo</label>
+                        <select class="w-full p-2 border rounded"
+                                onchange="updateFieldType(this)">
+                            <option value="string" ${field.type === 'string' ? 'selected' : ''}>Texto</option>
+                            <option value="number" ${field.type === 'number' ? 'selected' : ''}>Número</option>
+                            <option value="boolean" ${field.type === 'boolean' ? 'selected' : ''}>Booleano</option>
+                            <option value="enum" ${field.enum ? 'selected' : ''}>Lista de Opciones</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-bold mb-2">Título</label>
+                        <input type="text" value="${field.title || ''}" 
+                               class="w-full p-2 border rounded"
+                               onchange="updateVisualSchema()">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-bold mb-2">Descripción</label>
+                        <input type="text" value="${field.description || ''}" 
+                               class="w-full p-2 border rounded"
+                               onchange="updateVisualSchema()">
+                    </div>
+                </div>
+                ${field.enum ? `
+                    <div class="enum-container mt-4">
+                        <label class="block text-sm font-bold mb-2">Opciones (una por línea)</label>
+                        <textarea class="w-full p-2 border rounded" rows="3"
+                                 onchange="updateVisualSchema()">${field.enum.join('\n')}</textarea>
+                    </div>
+                ` : ''}
+                <button onclick="removeField(this)" 
+                        class="mt-2 bg-red-500 text-white px-3 py-1 rounded">
+                    Eliminar Campo
+                </button>
+            `;
+            return div;
+        }
+
+        function updateFieldType(select) {
+            const fieldContainer = select.closest('.schema-field');
+            const enumContainer = fieldContainer.querySelector('.enum-container');
             
+            if (select.value === 'enum') {
+                if (!enumContainer) {
+                    const div = document.createElement('div');
+                    div.className = 'enum-container mt-4';
+                    div.innerHTML = `
+                        <label class="block text-sm font-bold mb-2">Opciones (una por línea)</label>
+                        <textarea class="w-full p-2 border rounded" rows="3"
+                                 onchange="updateEnumValues(this)"></textarea>
+                    `;
+                    fieldContainer.appendChild(div);
+                }
+            } else if (enumContainer) {
+                enumContainer.remove();
+            }
+            updateVisualSchema();
+        }
+
+        function removeField(button) {
+            const fieldContainer = button.closest('.schema-field');
+            fieldContainer.remove();
+            updateVisualSchema();
+        }
+
+        function createEnumEditor(enumValues) {
+            return `
+                <div class="mt-4">
+                    <label class="block text-sm font-bold mb-2">Opciones (una por línea)</label>
+                    <textarea class="w-full p-2 border rounded" rows="3"
+                             onchange="updateEnumValues(this)">${enumValues.join('\n')}</textarea>
+                </div>
+            `;
+        }
+
+        function addSchemaField() {
+            const container = document.getElementById('schema-fields');
+            const newField = createFieldEditor(`campo_${Date.now()}`, {
+                type: 'string',
+                title: 'Nuevo Campo',
+                description: ''
+            });
+            container.appendChild(newField);
+        }
+
+        // Funciones de actualización del esquema visual
+        function updateVisualSchema() {
+            const fields = document.getElementById('schema-fields').children;
+            const schema = {
+                type: 'object',
+                properties: {}
+            };
+
+            Array.from(fields).forEach(field => {
+                const inputs = field.getElementsByTagName('input');
+                const select = field.getElementsByTagName('select')[0];
+                const key = inputs[0].value;
+                
+                schema.properties[key] = {
+                    type: select.value === 'enum' ? 'string' : select.value,
+                    title: inputs[1].value,
+                    description: inputs[2].value
+                };
+
+                if (select.value === 'enum') {
+                    const textarea = field.getElementsByTagName('textarea')[0];
+                    schema.properties[key].enum = textarea.value.split('\n').filter(v => v.trim());
+                }
+            });
+
             document.getElementById('schema-content').value = JSON.stringify(schema, null, 2);
-            document.getElementById('schema-level').value = level;
+            return schema;
         }
 
         async function saveSchema() {
-            const level = document.getElementById('schema-level').value;
-            const content = document.getElementById('schema-content').value;
-            
             try {
-                const schema = JSON.parse(content);
+                const level = document.getElementById('schema-level').value;
+                const schema = updateVisualSchema();
+
                 await fetch(`/api/schema/${level}?group=${currentGroup}`, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify(schema)
                 });
                 
-                // Refresh form
                 const response = await fetch(`/api/config/${level}?group=${currentGroup}`);
                 const data = await response.json();
                 renderForm(`level${level}-form`, data);
                 
-                // Hide modal
                 document.getElementById('schema-editor').classList.add('hidden');
             } catch (e) {
-                alert('Invalid JSON schema: ' + e.message);
+                alert('Error guardando esquema: ' + e.message);
             }
         }
 
@@ -335,14 +507,27 @@
             }
         }
 
-        function clearLogs() {
-            document.getElementById('log-area').innerHTML = '';
+        async function clearLogs() {
+            const response = await fetch('/api/logs', { method: 'DELETE' });
+            const result = await response.json();
+            if (result.status === 'success') {
+                document.getElementById('log-area').innerHTML = '';
+            }
+        }
+
+        async function loadStoredLogs() {
+            const response = await fetch('/api/logs');
+            const result = await response.json();
+            const logArea = document.getElementById('log-area');
+            logArea.innerHTML = result.logs;
+            logArea.scrollTop = logArea.scrollHeight;
         }
 
         // Initialize on page load
         async function initializeApp() {
             try {
                 initWebSocket();
+                await loadStoredLogs();  // Cargar logs almacenados
                 
                 // Primero establecer el grupo actual
                 const group = localStorage.getItem('selectedGroup');
@@ -501,7 +686,15 @@
     <div id="schema-editor" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center">
         <div class="bg-white p-6 rounded-lg shadow-lg w-3/4 max-h-screen overflow-auto">
             <h3 class="text-xl font-bold mb-4">Editor de Esquema</h3>
-            <textarea id="schema-content" class="w-full h-96 font-mono p-2 border rounded mb-4"></textarea>
+            <div class="flex mb-4">
+                <button id="visual-tab" class="px-4 py-2 border-b-2" onclick="switchEditorMode('visual')">Visual</button>
+                <button id="json-tab" class="px-4 py-2 border-b-2" onclick="switchEditorMode('json')">JSON</button>
+            </div>
+            <div id="visual-editor" class="hidden">
+                <div id="schema-fields"></div>
+                <button onclick="addSchemaField()" class="mt-4 bg-green-500 text-white px-4 py-2 rounded">Agregar Campo</button>
+            </div>
+            <textarea id="json-editor" class="w-full h-96 font-mono p-2 border rounded mb-4"></textarea>
             <input type="hidden" id="schema-level">
             <div class="flex justify-end gap-4">
                 <button onclick="document.getElementById('schema-editor').classList.add('hidden')"
diff --git a/templates/schema_editor.html b/templates/schema_editor.html
new file mode 100644
index 0000000..dcded19
--- /dev/null
+++ b/templates/schema_editor.html
@@ -0,0 +1,44 @@
+<div class="bg-white p-6 rounded-lg shadow-lg w-3/4 max-h-screen overflow-auto">
+    <h3 class="text-xl font-bold mb-4">Editor de Esquema</h3>
+    
+    <!-- Pestañas -->
+    <div class="border-b border-gray-200 mb-4">
+        <div class="flex">
+            <button onclick="switchEditorMode('visual')" 
+                    id="visual-tab"
+                    class="px-4 py-2 border-b-2 border-transparent hover:border-blue-500">
+                Editor Visual
+            </button>
+            <button onclick="switchEditorMode('json')" 
+                    id="json-tab"
+                    class="px-4 py-2 border-b-2 border-transparent hover:border-blue-500">
+                Editor JSON
+            </button>
+        </div>
+    </div>
+
+    <!-- Editor Visual -->
+    <div id="visual-editor" class="mb-4">
+        <div id="schema-fields"></div>
+        <button onclick="addSchemaField()" class="mt-4 bg-green-500 text-white px-4 py-2 rounded">
+            Agregar Campo
+        </button>
+    </div>
+
+    <!-- Editor JSON -->
+    <div id="json-editor" class="hidden">
+        <textarea id="schema-content" class="w-full h-96 font-mono p-2 border rounded mb-4"></textarea>
+    </div>
+
+    <input type="hidden" id="schema-level">
+    <div class="flex justify-end gap-4">
+        <button onclick="document.getElementById('schema-editor').classList.add('hidden')"
+            class="bg-gray-500 text-white px-4 py-2 rounded">
+            Cancelar
+        </button>
+        <button onclick="saveSchema()"
+            class="bg-blue-500 text-white px-4 py-2 rounded">
+            Guardar
+        </button>
+    </div>
+</div>