pets.html
unknown
html
a month ago
10 kB
2
Indexable
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPetModal">
<i class="bi bi-plus-lg"></i> Add Pet
</button>
</div>
<div class="table-responsive">
<table class="table table-hover align-middle">
<thead>
<tr>
<th>Name</th>
<th>Species/Breed</th>
<th>Age</th>
<th>Owner</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="pets-list"></tbody>
</table>
</div>
<!-- Add Pet Modal -->
<div class="modal fade" id="addPetModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add Pet</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="addPetForm">
<div class="mb-3">
<label class="form-label">Name *</label>
<input type="text" class="form-control" name="name" required>
</div>
<div class="mb-3">
<label class="form-label">Species</label>
<input type="text" class="form-control" name="species">
</div>
<div class="mb-3">
<label class="form-label">Breed</label>
<input type="text" class="form-control" name="breed">
</div>
<div class="mb-3">
<label class="form-label">Age</label>
<input type="number" class="form-control" name="age" min="0">
</div>
<div class="mb-3">
<label class="form-label">Owner *</label>
<select class="form-select" name="owner_id" required></select>
</div>
<div class="modal-footer px-0 pb-0">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save Pet</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Edit Pet Modal -->
<div class="modal fade" id="editPetModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Pet</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="editPetForm">
<input type="hidden" name="id">
<div class="mb-3">
<label class="form-label">Name *</label>
<input type="text" class="form-control" name="name" required>
</div>
<div class="mb-3">
<label class="form-label">Species</label>
<input type="text" class="form-control" name="species">
</div>
<div class="mb-3">
<label class="form-label">Breed</label>
<input type="text" class="form-control" name="breed">
</div>
<div class="mb-3">
<label class="form-label">Age</label>
<input type="number" class="form-control" name="age" min="0">
</div>
<div class="mb-3">
<label class="form-label">Owner *</label>
<select class="form-select" name="owner_id" required></select>
</div>
<div class="modal-footer px-0 pb-0">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="medicalRecordsModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Pet Medical Records</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<ul class="nav nav-tabs mb-3" id="medicalRecordsTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="medications-tab" data-bs-toggle="tab" href="#medications">Medications</a>
</li>
<li class="nav-item">
<a class="nav-link" id="attachments-tab" data-bs-toggle="tab" href="#attachments">Attachments</a>
</li>
</ul>
<div class="tab-content" id="medicalRecordsContent">
<!-- Medications Tab -->
<div class="tab-pane fade show active" id="medications">
<button class="btn btn-primary mb-3" onclick="showAddMedicationForm()">
<i class="bi bi-plus-lg"></i> Add Medication Record
</button>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Medication</th>
<th>Dosage</th>
<th>Notes</th>
<th>Next Appointment</th>
<th>Veterinarian</th>
</tr>
</thead>
<tbody id="medicationsList"></tbody>
</table>
</div>
</div>
<!-- Attachments Tab -->
<div class="tab-pane fade" id="attachments">
<form id="uploadAttachmentForm" class="mb-3">
<div class="row g-3">
<div class="col-md-6">
<input type="file" class="form-control" id="attachmentFile" required>
</div>
<div class="col-md-4">
<input type="text" class="form-control" id="attachmentDescription" placeholder="Description">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-primary w-100">Upload</button>
</div>
</div>
</form>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>File Name</th>
<th>Description</th>
<th>Uploaded By</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="attachmentsList"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Add Medication Form Modal -->
<div class="modal fade" id="addMedicationModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add Medication Record</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="addMedicationForm">
<input type="hidden" id="medicationPetId" name="pet_id">
<div class="mb-3">
<label class="form-label">Medication Name *</label>
<input type="text" class="form-control" name="medication_name" required>
</div>
<div class="mb-3">
<label class="form-label">Dosage *</label>
<input type="text" class="form-control" name="dosage" required>
</div>
<div class="mb-3">
<label class="form-label">Notes</label>
<textarea class="form-control" name="notes" rows="3"></textarea>
</div>
<div class="mb-3">
<label class="form-label">Next Appointment Date</label>
<input type="datetime-local" class="form-control" name="next_appointment_date">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save Record</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="../renderer-pets.js"></script>
Editor is loading...
Leave a Comment