preview fields

This commit is contained in:
Corban-Lee Jones 2024-07-02 00:46:41 +01:00
parent 7adf6b5bf6
commit bc0166b3ce
2 changed files with 74 additions and 50 deletions

View File

@ -329,30 +329,31 @@
</div> </div>
</div> </div>
<div id="confirmContent" class="tab-pane fade flex-column h-100"> <div id="confirmContent" class="tab-pane fade flex-column h-100">
<h5 class="mb-3">Preview:</h5>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="form-floating mb-3"> <div class="form-floating mb-3 venue-preview-field">
<input type="text" name="" id="" class="form-control-plaintext" placeholder="" readonly value="Chequered Lake"> <input type="text" class="form-control-plaintext" placeholder="" readonly data-linked-field="#venueName">
<label for="" class="form-label">Venue Name</label> <label class="form-label">Venue Name</label>
</div> </div>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<div class="form-floating mb-3"> <div class="form-floating mb-3 venue-preview-field">
<input type="text" name="" id="" class="form-control-plaintext" placeholder="" readonly value="Some description..."> <input type="text" class="form-control-plaintext" placeholder="" readonly data-linked-field="#venueDesc">
<label for="" class="form-label">Description</label> <label class="form-label">Description</label>
</div> </div>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<div class="form-floating mb-3"> <div class="form-floating mb-3 venue-preview-field">
<input type="text" name="" id="" class="form-control-plaintext" placeholder="" readonly value="Fishery"> <input type="text" class="form-control-plaintext" placeholder="" readonly data-linked-field="#venueType">
<label for="" class="form-label">Venue Type</label> <label class="form-label">Venue Type</label>
</div> </div>
</div> </div>
</div> </div>
<div class="mt-5 mt-md-auto d-flex justify-content-end"> <div class="mt-5 mt-md-auto d-flex justify-content-end">
<button class="btn btn-outline-secondary me-3" type="button" onclick="$('#watersTab').click();">Back</button> <button class="btn btn-outline-secondary me-3" type="button" onclick="$('#watersTab').click();">Back</button>
<button class="btn btn-primary" type="submit">Save Changes</button> <button id="submitVenueBtn" class="btn btn-primary" type="submit">Save Changes</button>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,57 +1,80 @@
$("#confirmTab").on("click", function() {
$(".venue-preview-field").each(function() {
var input = $(this).find("input");
linkedFieldId = input.attr("data-linked-field");
linkedFieldType = input.attr("type")
if (linkedFieldType === "check") {
input.val($(`input[name="${linkedFieldId}"]:checked`).val());
}
else
input.val($(linkedFieldId).val());
});
})
async function viewVenueModal(venueId) { async function viewVenueModal(venueId) {
await openVenueModal(venueId) await openVenueModal(venueId)
$("#venueForm input, #venueForm textarea").prop("disabled", true) $("#venueForm input, #venueForm textarea").attr("disabled", true);
$("#submitVenueBtn").hide();
} }
async function openVenueModal(venueId) { async function openVenueModal(venueId) {
// showPage($("#newVenuePages .page:first")); // showPage($("#newVenuePages .page:first"));
$("#detailsTab").click(); $("#detailsTab").click();
setTimeout(() => { $("#venueName").focus() }, 300); setTimeout(() => { $("#venueName").focus() }, 300);
$("#venueForm input, #venueForm textarea").prop("disabled", false)
$("#venueForm").attr("data-id", venueId) $("#venueForm input, #venueForm textarea").prop("disabled", false);
$("#submitVenueBtn").show();
$("#venueForm").attr("data-id", venueId);
if (venueId===-1){ if (venueId===-1){
$("#venueName").val("") $("#venueName").val("");
$("#venueDesc").val("") $("#venueDesc").val("");
$(`#venueForm input[name="venueType"]`).prop("checked", false) $(`#venueForm input[name="venueType"]`).prop("checked", false);
$("#venueActive").prop("checked", true) $("#venueActive").prop("checked", true);
$("#venueStreet").val("") $("#venueStreet").val("");
$("#venueCity").val("") $("#venueCity").val("");
$("#venueCounty").val("") $("#venueCounty").val("");
$("#venuePost").val("") $("#venuePost").val("");
$("#venueCountry").val("") $("#venueCountry").val("");
$("#venueLat").val("") $("#venueLat").val("");
$("#venueLng").val("") $("#venueLng").val("");
$("#venuePhone").val("") $("#venuePhone").val("");
$("#venueEmail").val("") $("#venueEmail").val("");
$("#venueWebsite").val("") $("#venueWebsite").val("");
$("#venueFacebook").val("") $("#venueFacebook").val("");
$("#venueInstagram").val("") $("#venueInstagram").val("");
$("#venueTwitter").val("") $("#venueTwitter").val("");
} }
else { else {
const venue = await getVenue(venueId) const venue = await getVenue(venueId);
$("#venueName").val(venue.name)
$("#venueDesc").val(venue.description) $("#venueName").val(venue.name);
$(`#venueForm input[name="venueType"][value=${venue.venue_type}]`).prop("checked", true) $("#venueDesc").val(venue.description);
$("#venueActive").prop("checked", venue.active) $(`#venueForm input[name="venueType"][value=${venue.venue_type}]`).prop("checked", true);
// $("#venueStreetNum").val(venue.name) $("#venueActive").prop("checked", venue.active);
$("#venueStreet").val(venue.street_address) // $("#venueStreetNum").val(venue.name);
$("#venueCity").val(venue.city) $("#venueStreet").val(venue.street_address);
$("#venueCounty").val(venue.provence) $("#venueCity").val(venue.city);
$("#venuePost").val(venue.postal_code) $("#venueCounty").val(venue.provence);
$("#venueCountry").val(venue.country) $("#venuePost").val(venue.postal_code);
$("#venueLat").val(venue.latitude) $("#venueCountry").val(venue.country);
$("#venueLng").val(venue.longitude) $("#venueLat").val(venue.latitude);
$("#venuePhone").val(venue.phone_number) $("#venueLng").val(venue.longitude);
$("#venueEmail").val(venue.email_address) $("#venuePhone").val(venue.phone_number);
$("#venueWebsite").val(venue.website_url) $("#venueEmail").val(venue.email_address);
$("#venueFacebook").val(venue.facebook_url) $("#venueWebsite").val(venue.website_url);
$("#venueInstagram").val(venue.instagram_url) $("#venueFacebook").val(venue.facebook_url);
$("#venueTwitter").val(venue.twitter_url) $("#venueInstagram").val(venue.instagram_url);
$("#venueTwitter").val(venue.twitter_url);
} }
new bootstrap.Modal("#venueModal").show(); $("#venueModal").modal("show");
} }
async function deleteVenueBtn(venueId){ async function deleteVenueBtn(venueId){