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 initWorkingDirectory();
|
||||||
await loadConfigs();
|
await loadConfigs();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Close sidebar on small screens when changing groups
|
||||||
|
if (window.innerWidth < 768) {
|
||||||
|
toggleSidebar();
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error during initialization:', error);
|
console.error('Error during initialization:', error);
|
||||||
}
|
}
|
||||||
|
|
@ -640,12 +645,89 @@
|
||||||
const description = option.getAttribute('data-description');
|
const description = option.getAttribute('data-description');
|
||||||
document.getElementById('group-description').textContent = 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>
|
</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>
|
</head>
|
||||||
<body class="bg-gray-100">
|
<body class="bg-gray-100">
|
||||||
<div class="container mx-auto px-4 py-8">
|
<!-- 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 -->
|
<!-- Level 1 Configuration -->
|
||||||
<div class="mb-8 bg-white p-6 rounded-lg shadow">
|
<div class="mb-8">
|
||||||
<div class="flex justify-between items-center mb-4">
|
<div class="flex justify-between items-center mb-4">
|
||||||
<h2 class="text-xl font-bold">Configuración General (Nivel 1)</h2>
|
<h2 class="text-xl font-bold">Configuración General (Nivel 1)</h2>
|
||||||
<button class="bg-blue-500 text-white px-4 py-2 rounded"
|
<button class="bg-blue-500 text-white px-4 py-2 rounded"
|
||||||
|
|
@ -661,23 +743,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
<select id="script-group" class="w-full p-2 border rounded mb-2">
|
|
||||||
{% for group in script_groups %}
|
|
||||||
<option value="{{ group.id }}" data-description="{{ group.description }}">{{ group.name }}</option>
|
|
||||||
{% endfor %}
|
|
||||||
</select>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Level 2 Configuration -->
|
<!-- Level 2 Configuration -->
|
||||||
<div class="mb-8 bg-white p-6 rounded-lg shadow">
|
<div class="mb-8">
|
||||||
<div class="flex justify-between items-center mb-4">
|
<div class="flex justify-between items-center mb-4">
|
||||||
<h2 class="text-xl font-bold">Configuración del Grupo (Nivel 2)</h2>
|
<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"
|
<button class="bg-blue-500 text-white px-4 py-2 rounded"
|
||||||
|
|
@ -692,6 +759,25 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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">Grupo de Scripts</h2>
|
||||||
|
<select id="script-group" class="w-full p-2 border rounded mb-2">
|
||||||
|
{% for group in script_groups %}
|
||||||
|
<option value="{{ group.id }}" data-description="{{ group.description }}">{{ group.name }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
<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 -->
|
<!-- Working Directory -->
|
||||||
<div class="mb-8 bg-white p-6 rounded-lg shadow">
|
<div class="mb-8 bg-white p-6 rounded-lg shadow">
|
||||||
|
|
@ -747,7 +833,7 @@
|
||||||
|
|
||||||
<!-- Schema Editor Modal -->
|
<!-- Schema Editor Modal -->
|
||||||
<div id="schema-editor" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center">
|
<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>
|
<h3 class="text-xl font-bold mb-4">Editor de Esquema</h3>
|
||||||
<div class="flex mb-4">
|
<div class="flex mb-4">
|
||||||
<button id="visual-tab" class="px-4 py-2 border-b-2" onclick="switchEditorMode('visual')">Visual</button>
|
<button id="visual-tab" class="px-4 py-2 border-b-2" onclick="switchEditorMode('visual')">Visual</button>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue