crud

 

Modales para Actualizar y Ver Video

  • Modal de Actualización (<div class="modal" id="modalActualizar">): Permite al usuario actualizar la información de una audiencia.
  • Modal para Ver Video (<div class="modal" id="modalVerVideo">): Permite al usuario ver el video asociado a una audiencia.

JavaScript

  • document.addEventListener('DOMContentLoaded', () => { ... }): Ejecuta el código cuando la página ha terminado de cargar.
  • Funciones principales:
    • obtenerAudiencias(caso_id): Realiza una petición a un servidor para obtener las audiencias asociadas a un caso específico y muestra los resultados en la tabla.
    • formVideo.addEventListener('submit', ...): Captura el evento de envío del formulario y envía los datos al servidor utilizando fetch.
    • audienciasTable.addEventListener('click', ...): Detecta clics en los botones dentro de la tabla, permitiendo editar, eliminar o ver videos de audiencias.

Interacción con el Servidor

El código se comunica con el servidor para:

  1. Obtener audiencias: obtenerAudiencias(caso_id).
  2. Guardar una nueva audiencia: Enviar el formulario formVideo.
  3. Actualizar una audiencia: Enviar el formulario formActualizar.
  4. Eliminar una audiencia: Detectar clic en el botón de eliminar y enviar una solicitud al servidor.

Explicación de la Lógica de los Botones

  • Editar: Llena el formulario de actualización con datos y abre el modal.
  • Eliminar: Muestra un cuadro de diálogo de confirmación y elimina la audiencia si se confirma.
  • Ver Video: Carga y muestra el video asociado en el modal.
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Audiencias</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</head>
<body>
<div class="container mt-2">
    <form id="formVideo" method="POST" enctype="multipart/form-data">
        <input type="hidden" name="caso_id" value="<?php echo isset($_GET['caso_id']) ? intval($_GET['caso_id']) : ''; ?>">
        <input type="hidden" name="nombreFrom" value="formVideo">
        <div class="row mt-3">
            <div class="col-3 mb-3">
                <label for="fecha" class="form-label">Fecha</label>
                <input type="date" class="form-control" id="fecha" name="fecha" required>
            </div>
            <div class="col-5 mb-3">
                <label for="archivo" class="form-label">Archivo</label>
                <input type="file" class="form-control" id="archivo" name="archivo" required>
            </div>
            <div class="col-3 mb-3 d-flex align-items-end">
                <button type="submit" class="btn btn-success w-100">Guardar Información</button>
            </div>
        </div>
    </form>
</div>

<div class="container">
    <table class="table">
        <thead class="table-dark">
            <tr>
                <th>ID</th>
                <th>Caso</th>
                <th>Carpeta</th>
                <th>Fecha</th>
                <th>Resolvió</th>
     
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody id="audienciasTable">
            <!-- Aquí se insertarán las filas con JavaScript -->
        </tbody>
    </table>
</div>

<!-- Modales y scripts -->
<!-- Modal para Actualizar -->
<div class="modal fade" id="modalActualizar" tabindex="-1" aria-labelledby="modalActualizarLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="formActualizar">
            <input type="hidden" name="id" id="modalId">
            <input type="hidden" name="nombreFrom" value="formActualizar">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalActualizarLabel">Actualizar Audiencia</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="modalCarpeta" class="form-label">Carpeta</label>
                        <input type="text" class="form-control" id="modalCarpeta" name="carpeta" required>
                    </div>
                    <div class="mb-3">
                        <label for="modalResolvio" class="form-label">Resolvió</label>
                        <input type="text" class="form-control" id="modalResolvio" name="resolvio" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal para Ver Video -->
<div class="modal fade" id="modalVerVideo" tabindex="-1" aria-labelledby="modalVerVideoLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalVerVideoLabel">Ver Video</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <video id="videoPlayer" class="w-100" controls>
                    <source id="videoSource" src="" type="video/mp4">
                    Tu navegador no soporta la reproducción de videos.
                </video>
            </div>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    // Obtener el caso_id del campo oculto en el formulario
    const caso_id = document.querySelector('input[name="caso_id"]').value;
   
    obtenerAudiencias(caso_id);
    // Si existe un caso_id, realizar una solicitud fetch para obtener las audiencias asociadas
    function obtenerAudiencias(caso_id) {
        fetch(`http://localhost/despachos/vistas/expediente/expAudienciaservidor.php?caso_id=${caso_id}`)
            .then(response => response.json()) // Convertir la respuesta en formato JSON
            .then(data => {
                const tbody = document.getElementById('audienciasTable'); // Obtener el elemento tbody de la tabla
                tbody.innerHTML = ''; // Limpiar el contenido actual del tbody
               
                // Recorrer los datos obtenidos y construir filas para cada audiencia
                data.forEach(audiencia => {
                    const fila = `
                        <tr>
                            <td>${audiencia.id}</td>
                            <td>${audiencia.numero_expediente}</td>
                            <td>${audiencia.carpeta}</td>
                            <td>${audiencia.fecha}</td>
                           <td>${audiencia.resolvio}</td>
                            <td>
                                <!-- Botones para editar, eliminar y ver video de la audiencia -->
                                <button class="btn btn-primary btnEditar" data-id="${audiencia.id}" data-carpeta="${audiencia.carpeta}" data-resolvio="${audiencia.resolvio}">Editar</button>
                                <button class="btn btn-danger btnEliminar" data-id="${audiencia.id}">Eliminar</button>
                                <button class="btn btn-info btnVerVideo" data-ruta="${audiencia.ruta}">Ver Video</button>
                            </td>
                        </tr>`;
                    tbody.insertAdjacentHTML('beforeend', fila); // Insertar la fila en la tabla
                });
            });
    }

    // Manejar el evento de envío del formulario de video
    document.getElementById('formVideo').addEventListener('submit', (e) => {
        e.preventDefault(); // Prevenir el envío normal del formulario
        const formData = new FormData(e.target); // Crear un objeto FormData con los datos del formulario

        // Enviar los datos del formulario a través de una solicitud fetch
        fetch(`http://localhost/despachos/vistas/expediente/expAudienciaservidor.php?caso_id=${caso_id}`, {
            method: 'POST',
            body: formData
        })
        .then(response => response.json()) // Convertir la respuesta en formato JSON
        .then(res => {

            formVideo.reset(); // Resetea el formulario siempre
            if (res.status === 'success') {
                // Mostrar un mensaje de éxito y recargar la página
                Swal.fire('Guardado', 'La audiencia ha sido guardada.', 'success');
     
                obtenerAudiencias(caso_id);
            } else {
                // Mostrar un mensaje de error si algo falla
                Swal.fire('Error', 'Hubo un problema al guardar la audiencia.', 'error');
            }
        });
    });

    // Manejar los clics en la tabla de audiencias
    document.getElementById('audienciasTable').addEventListener('click', (e) => {
        // Si el clic fue en el botón de editar
        if (e.target.classList.contains('btnEditar')) {
            const id = e.target.dataset.id; // Obtener el ID de la audiencia
            const carpeta = e.target.dataset.carpeta; // Obtener la carpeta de la audiencia
            const resolvio = e.target.dataset.resolvio; // Obtener el responsable de la resolución
           
            // Llenar el formulario del modal con los datos de la audiencia
            document.getElementById('modalId').value = id;
            document.getElementById('modalCarpeta').value = carpeta;
            document.getElementById('modalResolvio').value = resolvio;
           
            // Mostrar el modal de actualización
            new bootstrap.Modal(document.getElementById('modalActualizar')).show();
        }

        // Si el clic fue en el botón de eliminar
        if (e.target.classList.contains('btnEliminar')) {
            const id = e.target.dataset.id; // Obtener el ID de la audiencia

            // Mostrar un cuadro de diálogo de confirmación
            Swal.fire({
                title: '¿Estás seguro?',
                text: "Esta acción no se puede deshacer.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Si el usuario confirma, enviar una solicitud para eliminar la audiencia
                    fetch(`http://localhost/despachos/vistas/expediente/expAudienciaservidor.php?caso_id=${caso_id}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ eliminarAudiencia: true, id: id }) // Enviar los datos en formato JSON
                    })
                    .then(response => response.json()) // Convertir la respuesta en formato JSON
                    .then(res => {
                        console.log(res.status);
                        if (res.status === 'success') {
                            // Mostrar un mensaje de éxito y recargar la página
                            Swal.fire('Eliminado', 'La audiencia ha sido eliminada.', 'success');
                            obtenerAudiencias(caso_id);
                        } else {
                            // Mostrar un mensaje de error si algo falla
                            Swal.fire('Error', 'Hubo un problema al eliminar la audiencia.', 'error');
                        }
                    });
                }
            });
        }

        // Si el clic fue en el botón de ver video
if (e.target.classList.contains('btnVerVideo')) {
    const ruta = e.target.dataset.ruta; // Obtener la ruta del video
   
    // Cambiar la fuente del video y abrir el modal // Construir la URL completa var videoUrl = '/despachos/vistas/expediente/' + ruta;
    document.getElementById('videoSource').src = `/despachos/vistas/expediente/${ruta}`;
    document.getElementById('videoPlayer').load();
    new bootstrap.Modal(document.getElementById('modalVerVideo')).show();
   
}

    });
// Detener el video cuando se cierra el modal
document.getElementById('modalVerVideo').addEventListener('hidden.bs.modal', () => {
    const videoPlayer = document.getElementById('videoPlayer');
    videoPlayer.pause(); // Pausar el video
    videoPlayer.currentTime = 0; // Reiniciar el video al principio
});
    // Manejar el evento de envío del formulario de actualización
    document.getElementById('formActualizar').addEventListener('submit', (e) => {
        e.preventDefault(); // Prevenir el envío normal del formulario
        const formData = new FormData(e.target); // Crear un objeto FormData con los datos del formulario

        // Enviar los datos del formulario a través de una solicitud fetch
        fetch(`http://localhost/despachos/vistas/expediente/expAudienciaservidor.php?caso_id=${caso_id}`, {
            method: 'POST',
            body: formData
        })
        .then(response => response.json()) // Convertir la respuesta en formato JSON
        .then(res => {
            console.log(res.status);
            if (res.status === 'success') {
                // Mostrar un mensaje de éxito y recargar la página
                Swal.fire('Actualizado', 'La audiencia ha sido actualizada.', 'success');
                obtenerAudiencias(caso_id);
            } else {
                // Mostrar un mensaje de error si algo falla
                Swal.fire('Error', 'Hubo un problema al actualizar la audiencia.', 'error');
            }
        });
    });
});
</script>

</body>
</html>

Comentarios

Publicar un comentario

Entradas populares de este blog

Normalizar valores

 Para asegurarte de que todos los registros en la columna juez que coinciden con "LIC. ERICK SERRANO" (y sus variantes) se cambien exactamente a "LIC. ERICK SERRANO", puedes utilizar una consulta SQL que normalice esos valores. Esto eliminará las diferencias de formato que puedan estar causando que se cuenten como registros distintos. DELETE FROM carpetas; UPDATE control SET estatus = 'TRÁMITE' ; UPDATE `carpetas` SET `juez` = ' LIC. PATRICIA LOZANO ' WHERE `juez` LIKE '% PATRICIA LOZANO %'; UPDATE `carpetas` SET `juez` = 'LIC. ERICK SERRANO' WHERE `juez` LIKE '%ERICK SERRANO%'; UPDATE `carpetas` SET `tipo_solicitud` = 'CON DETENIDO' WHERE `tipo_solicitud` LIKE '%CON DETENIDO%'; UPDATE `carpetas` SET `tipo_solicitud` = 'ORDEN DE APREHENSION' WHERE `tipo_solicitud` LIKE '%ORDEN DE APRENSION%'; UPDATE `control` SET `tipo_solicitud` = 'ORDEN DE APREHENSION' WHERE `tipo_solicitud` LIKE...
Leer más

NORMALIZAR TABLA-audiencia_intervinientes

 Para normalizar las columnas relacionadas con los intervinientes en la tabla audiencia , puedes seguir un proceso similar al que hicimos con los delitos. Vamos a crear una nueva tabla llamada audiencia_intervinientes , donde cada interviniente estará asociado a una audiencia con un tipo que indica qué rol (asistente, víctima, asesor, etc.) desempeña en esa audiencia. 1. Crear la nueva tabla audiencia_intervinientes Esta tabla contendrá una columna nombre , una columna tipo que identificará el tipo de interviniente, y una clave foránea que haga referencia a la tabla audiencia . CREATE TABLE audiencia_intervinientes (     id_interviniente INT AUTO_INCREMENT PRIMARY KEY,     id_audiencia INT NOT NULL,     nombre VARCHAR(150) NOT NULL,     tipo VARCHAR(50) NOT NULL,     FOREIGN KEY (id_audiencia) REFERENCES audiencia(id_audiencia) ON DELETE CASCADE ); 2. Insertar los intervinientes antiguos en la nueva tabla Ahora, vamos a mover los...
Leer más

Listar audiencias

  <!-- Listar Audiencias -->     <h4> Audiencias </h4>     <table class = "table" >         <thead>             <tr>                 <th> ID </th>                 <th> Folio_S </th>                 <th> Carpeta </th>                 <th> Nombre </th>                 <th> Fecha </th>                 <th> Video </th>             </tr>         </thead>         <tbody>             <?php             $audienciasCtr = new Contr...
Leer más