0

Quiero que los que salgan vacios en la base de datos puedan ser subidos cuando se da la oportuniad en la tabla cuando esta el input, no se como poner que el id del input sea diferente por los row que salgan para poder subirlo a la base de datos.

La funicion de la tabla es demostrar la info que ocupan los dibujantes para hacer cada dibujo de del tipo de diseño que les piden.

La parte de jpg y cad es donde los de dibujo suben sus archivos ya terminados.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Combined Code</title>
    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <!-- jQuery Modal -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
    <!-- jQuery Modal CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <style>
         body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 200px;
            margin: 0 auto;
            padding: 20px;
        }
        h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }
        th, td {
            padding: 10px 25px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
            color: #333;
        }
        td a {
            color: #007bff;
            text-decoration: none;
        }
        td a:hover {
            text-decoration: underline;
        }
        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            max-width: 600px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            z-index: 9999;
        }
        .popup-content {
            padding: 20px;
            text-align: center;
            position: relative;
        }
        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            font-size: 20px;
            color: #888;
        }
    </style>
</head>
<body>
<h2></h2>
<br>
<table >
    <tr>
        <th>Sucursal</th>
        <th>Comment</th>
        <th>Person</th>
        <th>Priority</th>
        <th>Status</th>
        <th>Due Date</th>
        <th>Tipo de Diseño</th>
        <th>Design</th>
        <th>Design Name</th>
        <th>Layout</th>
        <th>Measurement</th>
        <th>Measurement File</th>
        <th>JPG File</th>
        <th>CAD File</th>
    </tr>
    <?php
    // Datos de conexión a la base de datos
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "dibujo";

    // Crear conexión
    $conn = new mysqli($servername, $username, $password, $dbname);

    // Verificar conexión
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    // Consulta SQL para seleccionar todos los datos de la tabla de diseño
    $sql = "SELECT * FROM dibujo";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        // Mostrar los datos en una tabla HTML
        while($row = $result->fetch_assoc()) {
            echo "<tr>";
            echo "<td>" . $row["element"] . "</td>";
            echo "<td>" . $row["comment"] . "</td>";
            echo "<td>" . $row["person"] . "</td>";
            echo "<td><select class='priority' data-id='" . $row["id"] . "'><option value='Critical' " . ($row["priority"] == "Critical" ? "selected" : "") . ">Critical</option><option value='High' " . ($row["priority"] == "High" ? "selected" : "") . ">High</option><option value='Medium' " . ($row["priority"] == "Medium" ? "selected" : "") . ">Medium</option><option value='Low' " . ($row["priority"] == "Low" ? "selected" : "") . ">Low</option></select></td>";
            echo "<td><select class='status' data-id='" . $row["id"] . "'><option value='Done' " . ($row["status"] == "Done" ? "selected" : "") . ">Done</option><option value='Working on it' " . ($row["status"] == "Working on it" ? "selected" : "") . ">Working on it</option><option value='Stuck' " . ($row["status"] == "Stuck" ? "selected" : "") . ">Stuck</option><option value='Not Started' " . ($row["status"] == "Not Started" ? "selected" : "") . ">Not Started</option></select></td>";
            echo "<td class='fecha-celda'>". $row['fecha_inicio'] . " - " . $row['fecha_final']; "</td>";
            echo "<td>" . $row["tipo_diseno"] . "</td>";
            echo "<td><a href='#' class='ver-archivo' data-archivo='" . (isset($row['design_archivo']) ? $row['design_archivo'] : '') . "'>Ver</a></td>";
            echo "<td>" . $row["design_name"] . "</td>";
            echo "<td><a href='#' class='ver-archivo' data-archivo='" . (isset($row['layout_archivo']) ? $row['layout_archivo'] : '') . "'>Ver</a></td>";
            echo "<td>" . $row["measurement"] . "</td>";
            echo "<td><a href='#' class='ver-archivo' data-archivo='" . (isset($row['measurement_archivo']) ? $row['measurement_archivo'] : '') . "'>Ver</a></td>";
                // Mostrar campos de carga de archivos JPG y CAD si están vacíos
        if(empty($row['jpg_archivo'])) {
            echo "<td><input type='file' value='Subir' name='jpg_A'></td>";
        } else {
            echo "<td><a href='#' class='ver-archivo' data-archivo='" . $row['jpg_archivo'] . "'>Ver</a></td>";
        }

        if(empty($row['cad_archivo'])) {
            echo "<td><input type='file' value='Subir' name='cad_A'></td>";
        } else {
            echo "<td><a href='#' class='ver-archivo' data-archivo='" . $row['cad_archivo'] . "'>Ver</a></td>";
        }
                


            echo "</tr>";
        }
    } else {
        echo "No hay datos en la tabla";
    }

    // Cerrar conexión
    $conn->close();
    ?>
</table>
<div class="popup" id="popup">
    <div class="popup-content">
        <span class="close-button" onclick="cerrarPopup()">&times;</span>
        <p id="archivo_nombre"></p>
        <a id="link" href="" target="_blank" rel="noopener noreferrer">Ver Archivo en Nueva Pestaña</a> | <a id="download" href="" download>Descargar Archivo</a>
    </div>
</div>

<script>
$(document).ready(function(){
    // Al hacer clic en un enlace de archivo, mostrar el archivo correspondiente en el popup
    $(document).on('click', '.ver-archivo', function(event) {
        event.preventDefault();
        var archivo = $(this).data("archivo");
        mostrarArchivo(archivo);
    });

    // Función para mostrar el archivo en el popup
    function mostrarArchivo(archivo) {
        var popup = $("#popup");
        var link = $("#link");
        var download = $("#download");
        var archivoNombre = $("#archivo_nombre");

        // Obtener solo el nombre del archivo
        var nombreArchivo = archivo.split('/').pop();

        // Actualizar el nombre del archivo y los enlaces
        archivoNombre.text(nombreArchivo);
        link.attr("href", archivo);
        download.attr("href", archivo).toggle(archivo !== ''); // Ocultar el enlace de descarga si no hay archivo
        download.attr("download", nombreArchivo); // Agregar atributo de descarga solo si hay archivo

        // Mostrar el popup
        popup.show();
    }

    // Función para cerrar el popup
    $(".close-button").click(function() {
        cerrarPopup();
    });

    function cerrarPopup() {
        $("#popup").hide();
    }
});

// Event listener para cambiar la prioridad
document.querySelectorAll('.priority').forEach(item => {
    item.addEventListener('change', event => {
        const id = event.target.getAttribute('data-id');
        const priority = event.target.value;
        const previousPriority = event.target.getAttribute('data-previous-value');
        if (priority !== previousPriority) {
            updateField(id, 'priority', priority);
        }
    });
});

// Event listener para cambiar el estado
document.querySelectorAll('.status').forEach(item => {
    item.addEventListener('change', event => {
        const id = event.target.getAttribute('data-id');
        const status = event.target.value;
        const previousStatus = event.target.getAttribute('data-previous-value');
        if (status !== previousStatus) {
            updateField(id, 'status', status);
        }
    });
});

// Función para actualizar el campo en la base de datos
function updateField(id, field, value) {
    fetch('update.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            id: id,
            field: field,
            value: value
        })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log('Success:', data);
    })
    .catch(error => {
        console.error('Error:', error);
    });
}
// Obtener todas las celdas de fecha
$('.fecha-celda').mouseover(function(e) {
      // Verificar si ya se ha agregado el mensaje de fecha pasada
      if (!$(this).hasClass('pasado')) {
        // Obtener la fecha final
        var fechaFinalTexto = $(this).text().split(' - ')[1];
        var fechaFinal = new Date(fechaFinalTexto);
        var hoy = new Date();

        // Calcular los días restantes
        var diferencia = Math.ceil((fechaFinal - hoy) / (1000 * 60 * 60 * 24));

        // Mostrar los días restantes o mensaje de fecha pasada
        if (diferencia < 0) {
          // Mostrar mensaje de fecha pasada en rojo
          $(this).append(' <span class="texto-rojo">(Se acabaron los días)</span>');
          // Agregar clase para indicar que ya se ha agregado el mensaje
          $(this).addClass('pasado');
        } else {
          // Mostrar los días restantes
          $(this).append(' (' + diferencia + ' días restantes)');
        }
      }
    });

    // Restaurar el contenido original de la celda cuando el cursor sale de ella
    $('.fecha-celda').mouseleave(function() {
      var contenidoOriginal = $(this).text().split(' (')[0]; // Eliminar el mensaje de fecha pasada o los días restantes
      $(this).text(contenidoOriginal);
      // Eliminar la clase 'pasado' para permitir que se vuelva a agregar el mensaje en futuros movimientos del cursor
      $(this).removeClass('pasado');
    });
</script>

</body>
</html>

introducir la descripción de la imagen aquí

aqui estan los input solo es la parte de que su id o nombre sea difente en cada fila para poder subirlo, esa parte no se como hacerlo.

1
  • Estaba pensando en pedir el id que se le da en la base datos y que ese tenga el input Commented el 17 abr. a las 22:51

1 respuesta 1

0

crea un formulario y agrega un atributo id asi

if(empty($row['jpg_archivo'])) {
   echo '<td><form action="servidor.php" method="post" enctype="multipart/form-data">
                <input type="file" name="imagen"/>
                <input type="hidden" name="id" value="'.$row['id'].'"/>
                <input type="Submit" name="Enviar"/>
            </form></td>';
} else {
   echo "<td><a href='#' class='ver-archivo' data-archivo='" . $row['jpg_archivo'] . "'>Ver</a></td>";
}

despues en el archivo servidor.php recuperas del post id y imagen

$id = $_POST['id'];
$imagen = $_POST['imagen'];

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.