213 lines
10 KiB
HTML
213 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Script Parameter Manager</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<!-- Settings Button -->
|
|
<div class="fixed top-4 right-4 z-50">
|
|
<button onclick="toggleSidebar()" class="bg-white p-2 rounded-full shadow-lg hover:bg-gray-100">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="overlay" onclick="toggleSidebar()"></div>
|
|
<div class="sidebar">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-xl font-bold">Configuración Global</h2>
|
|
<button onclick="toggleSidebar()" class="text-gray-500 hover:text-gray-700">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Level 1 Configuration -->
|
|
<div class="mb-8">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-bold">Configuración Base</h2>
|
|
<button class="bg-blue-500 text-white px-4 py-2 rounded"
|
|
onclick="toggleConfig('level1-content')">
|
|
Mostrar Configuración
|
|
</button>
|
|
</div>
|
|
<div id="level1-content" class="hidden">
|
|
<div id="level1-form"></div>
|
|
<div class="flex justify-end mt-4">
|
|
<button class="bg-blue-500 text-white px-4 py-2 rounded" onclick="modifySchema(1)">
|
|
Modificar Esquema
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Level 2 Configuration -->
|
|
<div class="mb-8">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-bold">Configuración del Scrips</h2>
|
|
<button class="bg-blue-500 text-white px-4 py-2 rounded"
|
|
onclick="toggleConfig('level2-content')">
|
|
Mostrar Configuración
|
|
</button>
|
|
</div>
|
|
<div id="level2-content" class="hidden">
|
|
<div id="level2-form"></div>
|
|
<div class="flex justify-end mt-4">
|
|
<button class="bg-blue-500 text-white px-4 py-2 rounded" onclick="modifySchema(2)">
|
|
Modificar Esquema
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="container mx-auto px-4 py-8">
|
|
<!-- Script Group Selection -->
|
|
<div class="mb-8 bg-white p-6 rounded-lg shadow">
|
|
<h2 class="text-xl font-bold mb-4">Funciones a utilizar:</h2>
|
|
<div class="flex gap-2 items-center">
|
|
<select id="script-group" class="flex-1 p-2 border rounded mb-2">
|
|
{% for group in script_groups %}
|
|
<option value="{{ group.id }}" data-description="{{ group.description }}">{{ group.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<button onclick="editGroupDescription()" class="bg-blue-500 text-white p-2 rounded mb-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<p id="group-description" class="text-gray-600 text-sm italic"></p>
|
|
<div class="text-xs text-gray-500 mt-2">
|
|
<span id="group-version"></span>
|
|
<span id="group-author"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Working Directory -->
|
|
<div class="mb-8 bg-white p-6 rounded-lg shadow">
|
|
<h2 class="text-xl font-bold mb-4">Directorio de Trabajo</h2>
|
|
<div class="flex gap-4">
|
|
<div class="flex-1 flex gap-2">
|
|
<input type="text" id="working-directory" class="flex-1 p-2 border rounded bg-green-50">
|
|
<button class="bg-gray-500 text-white px-4 py-2 rounded" onclick="browseDirectory()">
|
|
Explorar
|
|
</button>
|
|
</div>
|
|
<button class="bg-blue-500 text-white px-4 py-2 rounded" onclick="setWorkingDirectory()">
|
|
Confirmar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Level 3 Configuration -->
|
|
<div class="mb-8 bg-white p-6 rounded-lg shadow">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-bold">Configuración del Directorio</h2>
|
|
<button class="bg-blue-500 text-white px-4 py-2 rounded"
|
|
onclick="toggleConfig('level3-content')">
|
|
Mostrar Configuración
|
|
</button>
|
|
</div>
|
|
<div id="level3-content" class="hidden">
|
|
<div id="level3-form"></div>
|
|
<div class="flex justify-end mt-4">
|
|
<button class="bg-blue-500 text-white px-4 py-2 rounded" onclick="modifySchema(3)">
|
|
Modificar Esquema
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts List -->
|
|
<div class="mb-8 bg-white p-6 rounded-lg shadow">
|
|
<h2 class="text-xl font-bold mb-4">Scripts Disponibles</h2>
|
|
<div id="scripts-list"></div>
|
|
</div>
|
|
|
|
<!-- Logs -->
|
|
<div class="bg-white p-6 rounded-lg shadow">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-bold">Logs</h2>
|
|
<button class="bg-red-500 text-white px-4 py-2 rounded" onclick="clearLogs()">
|
|
Limpiar
|
|
</button>
|
|
</div>
|
|
<div id="log-area" class="bg-gray-100 p-4 rounded h-64 overflow-y-auto font-mono text-sm whitespace-pre-wrap">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schema Editor Modal -->
|
|
<div id="schema-editor" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center">
|
|
<div class="modal-content bg-white rounded-lg shadow-lg max-h-screen overflow-auto">
|
|
<div class="modal-header">
|
|
<div class="flex justify-between items-center">
|
|
<h3 class="text-xl font-bold">Editor de Esquema</h3>
|
|
<div class="flex 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>
|
|
<div class="flex mt-4" id="editor-tabs">
|
|
<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>
|
|
|
|
<div class="p-4">
|
|
<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"></textarea>
|
|
<input type="hidden" id="schema-level">
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Corregir la ruta del script -->
|
|
<script src="{{ url_for('static', filename='js/scripts.js') }}" defer></script>
|
|
<script>
|
|
window.addEventListener('load', () => {
|
|
console.log('Window loaded, initializing app...');
|
|
if (typeof initializeApp === 'function') {
|
|
initializeApp().catch(console.error);
|
|
} else {
|
|
console.error('initializeApp function not found');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|