[AJUDA] Problemas com PouchDB · VictorHuguinho

Gente, eu tenho 14 anos, e semana que vem eu vou ter uma mostra de ciencias, e a minha turma vamos fazer tipo um hospital, ai eu resolvi fazer um negoço com uma database online, ai eu fiz esse codigo aqui. Só que eu num sei porque esse PouchDB num ta funcionando, ai eu queria saber porque alguem pode me ajudar?

HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mostra 2023</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header class="bg-dark text-white text-center p-4">
        Mostra 2023
    </header>

    <section id="patient-registration" class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <h2>Registro de Paciente</h2>
                <form id="patientRegistrationForm">
                    <div class="form-group">
                        <label for="patientName">Nome do Paciente:</label>
                        <input type="text" class="form-control" id="patientName" placeholder="Digite o nome do paciente" required>
                    </div>
                    <div class="form-group">
                        <label for="patientAge">Idade do Paciente:</label>
                        <input type="number" class="form-control" id="patientAge" placeholder="Digite a idade do paciente" required>
                    </div>
                    <div class="form-group">
                        <label for="serviceNeeded">Serviços:</label>
                        <select class="form-control" id="serviceNeeded" required>
                            <option value="">Selecione o serviço necessário</option>
                            <option value="Endocrinologista">Endocrinologista</option>
                            <option value="Nutricionista">Nutricionista</option>
                            <option value="Nutrólogo">Nutrólogo</option>
                            <option value="Psiquiatra">Psiquiatra</option>
                            <option value="Psicólogo">Psicólogo</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-primary w-100" onclick="registerPatient()">Registrar Paciente</button>
                </form>
            </div>
        </div>
    </section>

    <section id="patient-list" class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <h2>Pacientes</h2>
                <table class="table table-dark">
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Idade</th>
                            <th>Serviço</th>
                            <th>Ação</th>
                        </tr>
                    </thead>
                    <tbody id="patientTableBody">
                        <!-- Patient data will be dynamically added here -->
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pouchdb.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

var db = new PouchDB('hospital');

$(document).ready(function () {
    loadPatients();
});

function registerPatient() {
    var patientName = $('#patientName').val();
    var patientAge = $('#patientAge').val();
    var serviceNeeded = $('#serviceNeeded').val();

    var patient = {
        _id: new Date().toISOString(),
        name: patientName,
        age: patientAge,
        service: serviceNeeded
    };

    db.put(patient, function (err, result) {
        if (err) {
            console.log(err);
        } else {
            console.log(result);
            $('#patientName').val('');
            $('#patientAge').val('');
            $('#serviceNeeded').val('');
            loadPatients();
        }
    });
}

function loadPatients() {
    db.allDocs({ include_docs: true, descending: true }, function (err, result) {
        if (err) {
            console.log(err);
        } else {
            var patientTableBody = $('#patientTableBody');
            patientTableBody.empty();

            result.rows.forEach(function (row) {
                var patient = row.doc;

                var tableRow = $('<tr>');
                tableRow.append($('<td>').text(patient.name));
                tableRow.append($('<td>').text(patient.age));
                tableRow.append($('<td>').text(patient.service));
                tableRow.append($('<td>').html('<button class="btn btn-danger btn-sm" onclick="removePatient(\'' + patient._id + '\')">Remover</button>'));

                patientTableBody.append(tableRow);
            });
        }
    });
}

function removePatient(patientId) {
    db.get(patientId, function (err, doc) {
        if (err) {
            console.log(err);
        } else {
            db.remove(doc, function (err, result) {
                if (err) {
                    console.log(err);
                } else {
                    console.log(result);
                    loadPatients();
                }
            });
        }
    });
}

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #222;
    color: #fff;
}

header {
    font-weight: bold;
}

#patient-registration {
    background-color: #333;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

#patient-list {
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.table {
    margin-top: 20px;
}

.table th {
    font-weight: bold;
}

.table td {
    vertical-align: middle;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-primary:focus, .btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: #0062cc;
    border-color: #005cbf;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}