Added a confirmation dialog

This commit is contained in:
2026-08-07 09:12:22 -05:00
parent d9a3e8914b
commit 5531d83994
5 changed files with 73 additions and 23 deletions

Binary file not shown.

View File

@@ -48,45 +48,45 @@
<p class="error" data-visible="error_message != ''">{{error_message}}</p>
<label>Name:</label>
<input type="text" data-value="form.name" />
<input type="text" data-value="new_critter_form.name" />
<label>Species:</label>
<input type="text" data-value="form.species" />
<input type="text" data-value="new_critter_form.species" />
<label>Gender (M/F):</label>
<input type="text" data-value="form.gender" />
<input type="text" data-value="new_critter_form.gender" />
<label>Mother ID (Optional):</label>
<input type="text" data-value="form.mother_id" />
<input type="text" data-value="new_critter_form.mother_id" />
<label>Father ID (Optional):</label>
<input type="text" data-value="form.father_id" />
<input type="text" data-value="new_critter_form.father_id" />
<label>Notes:</label>
<textarea data-value="form.notes"></textarea>
<textarea data-value="new_critter_form.notes"></textarea>
<div class="modal-buttons">
<button data-event-click="submit_add_critter">Save</button>
<button data-event-click="is_add_critter_dialog_open = false">Cancel</button>
<button data-event-click="submit_add_critter">Save</button>
</div>
</div>
</div>
<!-- Confirmation Dialog -->
<div class="modal-overlay" data-visible="confirmation_dialog_open">
<div class="modal-overlay" data-visible="is_confirmation_dialog_open">
<div class="modal-content">
<h2>Confirmation</h2>
<p>{{confirmation_dialog_text}}</p>
<!-- <p class="error" data-visible="error_message != ''">{{error_message}}</p> -->
<p class="dialog-text">{{confirmation_dialog_text}}</p>
<div class="modal-buttons">
<button data-event-click="confimation_dialog_result = false">Cancel</button>
<button data-event-click="confimation_dialog_result = true">Yes</button>
<button data-event-click="confirm_dialog_no">Cancel</button>
<button data-event-click="confirm_dialog_yes">Yes</button>
</div>
</div>
</div>
</body>
</rml>

View File

@@ -443,9 +443,26 @@ progress-value {
font-weight: bold;
}
.dialog-text {
font-size: 25pt;
/* font-style: italic; */
}
.modal-buttons {
margin-top: 15px;
display: flex;
justify-content: space-between;
flex-direction: row;
gap: 20px;
/* justify-content: space-between; */
align-items: center;
justify-content: center;
font-size: 18pt;
width: 100%;
}
.modal-buttons button {
width: 50%;
height: 50px;
font-size: 20pt;
line-height: 50px;
}