Cálculo de prazo e disable button

Telles85 · June 12, 2022 at 02:11 PM

Numa tabela com as datas das consultas queria que não fosse permitido ao utilizador alterar os dados da consulta a menos de 72 horas da data da consulta marcada.

O projeto de avaliação que estou a fazer esta tabela é gerada em php diretamente da base de dados. Mas para exemplificar resumi a uma tabela.

Já tentei fazer um loop mas não estou a conseguir, apenas consegui umas dicas com o código a seguir:

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table td {
            padding: 15px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    
    <table>
        <thead>
            <tr>
                <th>ID_CONSULTA</th>
                <th>UTILIZADOR</th>
                <th>DATA</th>
                <th>OBSERVAÇÕES</th>
            </tr>
            
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>marco</td>
                <td id="data-consulta">2022-06-16</td>
                <td>marcação1</td>
                <td><button id="editar">Editar</button></td>
            </tr>
            <tr>
                <td>2</td>
                <td>martim</td>
                <td id="data-consulta">2022-06-20</td>
                <td>marcação2</td>
                <td><button id="editar">Editar</button></td>
            </tr>
            <tr>
                <td>3</td>
                <td>carlos</td>
                <td id="data-consulta">2022-06-15</td>
                <td>marcação3</td>
                <td><button id="editar">Editar</button></td>
            </tr>
        </tbody>
    </table>

    <script src="script.js"></script>
</body>
</html>

var inputConsulta = document.querySelector('#data-consulta');
var editar = document.querySelector('#editar');

function calcularDiferenca() {
    
    var dataConsulta = inputConsulta.innerHTML;
    //var dataAtual = inputAtual.value;
    var dataAtual = new Date().toISOString().slice(0, 10);
    dataConsulta = new Date(dataConsulta).toISOString().slice(0, 10);

    //dataConsulta = new Date(dataConsulta);
    //dataAtual= new Date(dataAtual);

    var diffInTime = Math.abs(dataConsulta - dataAtual);
    var timeInOneDay = 1000 * 60 * 60 * 24;
    var diffInDays = diffInTime / timeInOneDay;

    if (diffInDays >= 3) {
        alert('Você escolher alterar a marcação!');
    } else {
        alert('O prazo de 72 para alterar a marcação expirou!');
    }
}

editar.addEventListener('click', () => {
    var diffInDays = calcularDiferenca();

    if (diffInDays >= 3) {
        ('#editar').prop('disabled', false);
        alert('Você escolheu alterar uma marcação!');
    } else {
        $('#editar').prop('disabled', true);
        alert('O prazo para alterar a marcação foi expirado!\nPor favor, entre em contacto com a empresa!');
    }
});

Ivo Vicente · June 13, 2022 at 10:31 PM

Podes controlar do lado da renderização da tabela no PHP.

Por exemplo usando um DATEDIFF no query sql, consegues um valor que podes usar para saberes se geras o link/botão de alterar um um espaço vazio ou mensagem a dizer "72h...bla bla bla".

Uma nota para o teu Javascript, está sempre a usar #editar, um ID é suposto ser único na página, o chrome até regista alertas na consola sobre isso, deves alterar a tua abordagem, e passar uma classe por exemplo.

Telles85 · June 14, 2022 at 10:34 AM

Tinha primeiramente enviado uma tabela resumida, abaixo deixo mesmo a tabela em que as linhas são geradas por php em que ele as vai buscar à base de dados.

Obrigado pela rápida resposta, a questão dos "id" repetidos é um erro básico que já corrigi, o cansaço de matutar no prazo das 72 horas nem via isso.

Entretanto a dica de usar um "DATEIFF" foi fantástica, pesquisei sobre a diferença de datas e acabei por encontrar umas linhas de código que adicionei na página. Agora para ter o resultado do button disable ou mesmo hidden caso a data da consulta for inferior a 72h e não dar para alterar penso que seria com um loop para percorrer cada linha e desativar o button ao abrir a página. Qual seria o passo a tomar para o resultado final?

<table>
        <thead>
            <tr>
                <td><b>ID_CONSULTA</b></td>
                <td><b>UTILIZADOR</b></td>
                <td><b>DATA</b></td>
                <td><b>OBSERVAÇÕES</b></td>
            </tr>
        </thead>
        <tbody>
            <?php
                $queryconsulta = mysqli_query($conn, "SELECT * FROM consultas WHERE utilizador='$queryuser'");
                while ($consulta_data = mysqli_fetch_assoc($queryconsulta)) {
                    echo "<tr>";
                    echo "<td>".$consulta_data['id_consulta']."</td>";
                    echo "<td>".$consulta_data['utilizador']."</td>";
                    echo "<td id='data-consulta'>".$consulta_data['data_consulta']."</td>";
                    echo "<td>".$consulta_data['observacoes']."</td>";
                    echo "<td><a href='editar-marcacao-consultas.php?id=$consulta_data[id_consulta]' class='btn btn-sm btn-primary prazo'>Editar</a></td>";
                    echo "</tr>";

                    $data_cons = $consulta_data['data_consulta'];
                    $marcacao = "$data_cons";

                    $data_atual = time();
                    $data_consulta = strtotime("$marcacao");
                    $diferenca = $data_atual - $data_consulta;
                    $diferenca_dias = abs(floor($diferenca/(60*60*24)));

                    if ($diferenca_dias < 3) {
                        
                    }
                }
            ?>
        </tbody>
    </table>

Ivo Vicente · June 15, 2022 at 05:00 PM

Se usares o datediff do mysql, tens apenas que validar com um simple if na "impressão" do link de editar

<?php 
//...
if($consulta_data["diff"]>3){
echo "<td><a href='editar-marcacao-consultas.php?id=$consulta_data[id_consulta]' class='btn btn-sm btn-primary prazo'>Editar</a></td>";
}else{
  echo "<td>---</td>";
}

Telles85 · June 16, 2022 at 02:53 PM

Obrigado Ivo, isso ajudou imenso, tinha conseguido chegar ao código para calcular a diferença, na minha cabeça a confusão estava em como aplicar a condição para ser executada na página caso o prazo fosse inferior.

Seguindo os teus conselhos, apliquei, precisamente isso, caso a diferença fosse >= 3, então apresentaria o echo com o button para alterar, senão não apresentava nada.

Mais uma vez obrigado Ivo.

Abraço

Ivo Vicente · June 16, 2022 at 03:40 PM

@Telles85 ainda bem que fui util.

Bom fim de semana

Sign In

Cálculo de prazo e disable button

Recommended Posts

Telles85

Ivo Vicente

Telles85

Ivo Vicente

Telles85

Ivo Vicente

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information