Arch/templates/schemas/create.html

141 lines
6.2 KiB
HTML

{% extends "base.html" %}
{% block title %}Crear Esquema - ARCH{% endblock %}
{% block content %}
<div class="container mt-4">
<h1>Crear Nuevo Esquema</h1>
<div class="card">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">Información del Esquema</h5>
</div>
<div class="card-body">
<form method="POST" action="{{ url_for('schemas.create') }}" id="schema-form">
{{ form.csrf_token if form.csrf_token }}
<div class="mb-3">
<label for="codigo" class="form-label">Código del Esquema</label>
<input type="text" class="form-control" id="codigo" name="codigo" required>
</div>
<div class="mb-3">
<label for="descripcion" class="form-label">Descripción</label>
<textarea class="form-control" id="descripcion" name="descripcion" rows="3" required></textarea>
</div>
<hr>
<h4>Documentos del Esquema</h4>
<div id="documents-container">
<!-- Initial document template -->
<div class="document-item card mb-3 p-3">
<div class="row">
<div class="col-md-3 mb-3">
<label class="form-label">Tipo de Documento</label>
<select class="form-select" name="doc_tipo[]" required>
{% if filetypes %}
{% for extension, filetype in filetypes.items() %}
<option value="{{ extension }}">{{ filetype.descripcion }}</option>
{% endfor %}
{% else %}
<option value="">No hay tipos disponibles</option>
{% endif %}
</select>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Nombre</label>
<input type="text" class="form-control" name="doc_nombre[]" required>
</div>
<div class="col-md-2 mb-3">
<label class="form-label">Nivel Ver</label>
<input type="number" class="form-control" name="doc_nivel_ver[]" value="0" min="0" max="9999">
</div>
<div class="col-md-2 mb-3">
<label class="form-label">Nivel Editar</label>
<input type="number" class="form-control" name="doc_nivel_editar[]" value="1000" min="0" max="9999">
</div>
<div class="col-md-1 mb-3 d-flex align-items-end">
<button type="button" class="btn btn-danger remove-document" style="display:none;">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
</div>
<div class="mb-4">
<button type="button" class="btn btn-secondary" id="add-document">
<i class="fas fa-plus"></i> Agregar Documento
</button>
</div>
<div class="d-flex justify-content-between">
<button type="submit" class="btn btn-primary">Crear Esquema</button>
<a href="{{ url_for('schemas.list') }}" class="btn btn-secondary">Cancelar</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('documents-container');
const addButton = document.getElementById('add-document');
// Initially enable the remove button if more than one document exists
updateRemoveButtons();
addButton.addEventListener('click', function() {
const documentTemplate = container.querySelector('.document-item').cloneNode(true);
// Reset values
const inputs = documentTemplate.querySelectorAll('input[type="text"], input[type="number"]');
inputs.forEach(input => {
if (input.name.includes('nivel_ver')) {
input.value = '0';
} else if (input.name.includes('nivel_editar')) {
input.value = '1000';
} else {
input.value = '';
}
});
container.appendChild(documentTemplate);
updateRemoveButtons();
// Add event listener to the new remove button
documentTemplate.querySelector('.remove-document').addEventListener('click', function() {
this.closest('.document-item').remove();
updateRemoveButtons();
});
});
// Function to update the visibility of remove buttons
function updateRemoveButtons() {
const items = container.querySelectorAll('.document-item');
items.forEach((item, index) => {
const removeBtn = item.querySelector('.remove-document');
if (items.length > 1) {
removeBtn.style.display = 'block';
} else {
removeBtn.style.display = 'none';
}
});
}
// Add event listeners to initial remove buttons
document.querySelectorAll('.remove-document').forEach(button => {
button.addEventListener('click', function() {
this.closest('.document-item').remove();
updateRemoveButtons();
});
});
});
</script>
{% endblock %}