Creada pagina lateral para las configuraciones nivel 1 y 2
This commit is contained in:
parent
64a8b41881
commit
04e180ae3f
|
|
@ -603,6 +603,11 @@
|
|||
await initWorkingDirectory();
|
||||
await loadConfigs();
|
||||
});
|
||||
|
||||
// Close sidebar on small screens when changing groups
|
||||
if (window.innerWidth < 768) {
|
||||
toggleSidebar();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error during initialization:', error);
|
||||
}
|
||||
|
|
@ -640,27 +645,125 @@
|
|||
const description = option.getAttribute('data-description');
|
||||
document.getElementById('group-description').textContent = description;
|
||||
}
|
||||
|
||||
function toggleSidebar() {
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
const overlay = document.querySelector('.overlay');
|
||||
const schemaEditor = document.getElementById('schema-editor');
|
||||
|
||||
// No cerrar sidebar si el modal está abierto
|
||||
if (!schemaEditor.classList.contains('hidden')) {
|
||||
return;
|
||||
}
|
||||
|
||||
sidebar.classList.toggle('open');
|
||||
overlay.classList.toggle('show');
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -400px;
|
||||
width: 400px;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
|
||||
transition: right 0.3s ease;
|
||||
z-index: 40;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0,0,0,0.5);
|
||||
display: none;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.overlay.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#schema-editor {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
#schema-editor .modal-content {
|
||||
z-index: 51;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<!-- Level 1 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 General (Nivel 1)</h2>
|
||||
<button class="bg-blue-500 text-white px-4 py-2 rounded"
|
||||
onclick="toggleConfig('level1-content')">
|
||||
Mostrar Configuración
|
||||
<!-- 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>
|
||||
<div id="level1-content" class="hidden">
|
||||
<div id="level1-form"></div>
|
||||
<button class="bg-blue-500 text-white px-4 py-2 rounded mt-4" onclick="modifySchema(1)">
|
||||
Modificar Esquema
|
||||
</button>
|
||||
|
||||
<!-- Level 1 Configuration -->
|
||||
<div class="mb-8">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-xl font-bold">Configuración General (Nivel 1)</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>
|
||||
<button class="bg-blue-500 text-white px-4 py-2 rounded mt-4" onclick="modifySchema(1)">
|
||||
Modificar Esquema
|
||||
</button>
|
||||
</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 Grupo (Nivel 2)</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>
|
||||
<button class="bg-blue-500 text-white px-4 py-2 rounded mt-4" onclick="modifySchema(2)">
|
||||
Modificar Esquema
|
||||
</button>
|
||||
</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">Grupo de Scripts</h2>
|
||||
|
|
@ -676,23 +779,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Level 2 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 Grupo (Nivel 2)</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>
|
||||
<button class="bg-blue-500 text-white px-4 py-2 rounded mt-4" onclick="modifySchema(2)">
|
||||
Modificar Esquema
|
||||
</button>
|
||||
</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>
|
||||
|
|
@ -747,7 +833,7 @@
|
|||
|
||||
<!-- 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="bg-white p-6 rounded-lg shadow-lg w-3/4 max-h-screen overflow-auto">
|
||||
<div class="modal-content 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>
|
||||
<div class="flex mb-4">
|
||||
<button id="visual-tab" class="px-4 py-2 border-b-2" onclick="switchEditorMode('visual')">Visual</button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue