Implementation of venue API
implemented venue API for the edit/new form.
This commit is contained in:
Corban-Lee
parent
a112ba38e9
commit
d1ab33430e
@ -9,10 +9,6 @@
|
||||
{% endblock style %}
|
||||
|
||||
{% block header_buttons %}
|
||||
<!-- <a href="/" class="btn btn-company d-flex align-items-center">
|
||||
<i class="bi bi-plus-lg"></i>
|
||||
<span class="ms-2">Add Venue and Waters</span>
|
||||
</a> -->
|
||||
{% endblock header_buttons %}
|
||||
|
||||
{% block content %}
|
||||
@ -31,7 +27,7 @@
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-4">
|
||||
<div class="input-group d-flex justify-content-md-end">
|
||||
<button class="btn border-secondary-subtle btn-outline-company" id="addVenue" data-bs-toggle="modal" data-bs-target="#venueModal" data-bs-toggle="tooltip" data-bs-title="Add Venue" data-bs-custom-class="light-tooltip">
|
||||
<button class="btn border-secondary-subtle btn-outline-company" id="addVenue" onclick="openVenueModal(-1);" data-bs-toggle="tooltip" data-bs-title="Add Venue" data-bs-custom-class="light-tooltip">
|
||||
<i class="bi bi-plus-lg"></i>
|
||||
</button>
|
||||
<button class="btn border-secondary-subtle btn-outline-company me-4 rounded-end" id="importVenue" data-bs-toggle="tooltip" data-bs-title="Import Venue" data-bs-custom-class="light-tooltip">
|
||||
@ -58,10 +54,7 @@
|
||||
<div class="m-4 mt-0 row">
|
||||
{% for venue in venues %}
|
||||
<div class="col-xl-3 col-lg-4 col-sm-6 mb-4">
|
||||
<div class="card w-100 h-100 fluid-hover-zoom shadow-sm md-shadow-on-hover overflow-hidden">
|
||||
<div class="card-badge-container">
|
||||
<div class="card-badge"></div>
|
||||
</div>
|
||||
<div class="card w-100 h-100 fluid-hover-zoom shadow-sm md-shadow-on-hover overflow-hidden flex-row">
|
||||
<div class="card-body d-flex">
|
||||
<div class="d-flex flex-column">
|
||||
<h5 class="card-title text-company mb-0">{{ venue.name }}</h5>
|
||||
@ -79,6 +72,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<div class="card-badge-container">
|
||||
<div class="card-badge"></div>
|
||||
</div>
|
||||
<div class="btn-group btn-group-vertical m-3 mt-auto">
|
||||
<a class="btn btn-outline-company rounded-top-4" href="{{ venue.id }}">
|
||||
<i class="bi bi-eye-fill"></i>
|
||||
</a>
|
||||
<button class="btn btn-outline-secondary rounded-bottom-4 ms-0" onclick="openVenueModal({{ venue.id }});">
|
||||
<i class="bi bi-pencil-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
@ -93,8 +99,11 @@
|
||||
<div class="card-badge"></div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="card-title text-company fw-bold mb-4">New Venue</h4>
|
||||
<ul id="newVenueTabBtns" class="nav nav-pills mb-4 border" role="tablist">
|
||||
<h4 class="card-title text-company fw-bold mb-4">
|
||||
<span class="create" style="display: none">New Venue</span>
|
||||
<span class="edit" style="display: none">Edit Venue</span>
|
||||
</h4>
|
||||
<ul id="newVenueTabBtns" class="nav nav-pills mb-4 border d-flex" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button id="newVenueDetailsTabBtn" class="nav-link active" data-bs-toggle="pill" data-bs-target="#newVenueDetailsTab" type="button" role="tab" aria-controls="newVenueDetailsTab" aria-selected="true">Details</button>
|
||||
</li>
|
||||
@ -121,15 +130,15 @@
|
||||
<div class="col-6">
|
||||
<label for="venueType" class="form-label">Type</label>
|
||||
<select name="venueType" id="venueType" class="form-select">
|
||||
<option value="0">Fishery</option>
|
||||
<option value="1">Club</option>
|
||||
<option value="2">Private</option>
|
||||
{% for type in venue_types %}
|
||||
<option value="{{ type.0 }}">{{ type.1 }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="venueDescription" class="form-label">Description</label>
|
||||
<textarea name="venueDescription" id="venueDescription" type="text" class="form-control" rows="3" placeholder="A brief description of the Venues and Waters ..."></textarea>
|
||||
<textarea name="venueDescription" id="venueDescription" type="text" class="form-control" rows="3" placeholder="A brief description of the Venues and Waters ..." style="max-height: 150px"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div id="newVenueAddressTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueAddressTabBtn" tabindex="0">
|
||||
@ -171,21 +180,30 @@
|
||||
<div id="newVenueSocialsTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueSocialsTabBtn" tabindex="0">
|
||||
<div class="row g-4 align-items-center">
|
||||
<div class="col-12">
|
||||
<label for="venueTwitter" class="form-label">Twitter Link</label>
|
||||
<input name="venueTwitter" id="venueTwitter" type="url" class="form-control" placeholder="https://anglingtrust.net/">
|
||||
<label for="venueTwitter" class="form-label d-flex align-items-center">
|
||||
<i class="bi bi-twitter me-2" style="color: #1DA1F2"></i>
|
||||
Twitter Link
|
||||
</label>
|
||||
<input name="venueTwitter" id="venueTwitter" type="url" class="form-control" placeholder="https://twitter.com/anglingtrust">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="venueFacebook" class="form-label">Facebook Link</label>
|
||||
<input name="venueFacebook" id="venueFacebook" type="url" class="form-control" placeholder="https://anglingtrust.net/">
|
||||
<label for="venueFacebook" class="form-label d-flex align-items-center">
|
||||
<i class="bi bi-facebook me-2" style="color: #4267B2"></i>
|
||||
Facebook Link
|
||||
</label>
|
||||
<input name="venueFacebook" id="venueFacebook" type="url" class="form-control" placeholder="https://www.facebook.com/AnglingTrust">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="venueInstagram" class="form-label">Instagram Link</label>
|
||||
<input name="venueInstagram" id="venueInstagram" type="url" class="form-control" placeholder="https://anglingtrust.net/">
|
||||
<label for="venueInstagram" class="form-label d-flex align-items-center">
|
||||
<i class="bi bi-instagram me-2" style="color: #D62976;"></i>
|
||||
Instagram Link
|
||||
</label>
|
||||
<input name="venueInstagram" id="venueInstagram" type="url" class="form-control" placeholder="https://www.instagram.com/angling_trust">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="newVenueWatersTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueWatersTabBtn" tabindex="0">
|
||||
<div class="p-3 pt-0 d-flex justify-content-between align-items-center border-bottom">
|
||||
<div class="pb-4 px-3 pt-0 d-flex justify-content-between align-items-center border-bottom">
|
||||
<button class="btn btn-outline-secondary rounded-4 d-flex align-items-center">
|
||||
<i class="bi bi-info-lg"></i>
|
||||
</button>
|
||||
@ -201,8 +219,73 @@
|
||||
<p class="mb-0 text-body-secondary">Specimen Carp</p>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-self-stretch">
|
||||
<span class="badge company-bg rounded-pill mb-auto">1 · 36</span>
|
||||
<button class="btn btn-outline-secondary small rounded-4">
|
||||
<span class="badge company-bg rounded-pill mb-4">1 · 36</span>
|
||||
<button class="btn btn-outline-secondary small rounded-4 mt-auto">
|
||||
<i class="bi bi-pencil-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
|
||||
<p class="mb-0">Commercial Water</p>
|
||||
<p class="mb-0 text-body-secondary">Specimen Carp</p>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-self-stretch">
|
||||
<span class="badge company-bg rounded-pill mb-4">1 · 36</span>
|
||||
<button class="btn btn-outline-secondary small rounded-4 mt-auto">
|
||||
<i class="bi bi-pencil-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
|
||||
<p class="mb-0">Commercial Water</p>
|
||||
<p class="mb-0 text-body-secondary">Specimen Carp</p>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-self-stretch">
|
||||
<span class="badge company-bg rounded-pill mb-4">1 · 36</span>
|
||||
<button class="btn btn-outline-secondary small rounded-4 mt-auto">
|
||||
<i class="bi bi-pencil-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
|
||||
<p class="mb-0">Commercial Water</p>
|
||||
<p class="mb-0 text-body-secondary">Specimen Carp</p>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-self-stretch">
|
||||
<span class="badge company-bg rounded-pill mb-4">1 · 36</span>
|
||||
<button class="btn btn-outline-secondary small rounded-4 mt-auto">
|
||||
<i class="bi bi-pencil-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
|
||||
<p class="mb-0">Commercial Water</p>
|
||||
<p class="mb-0 text-body-secondary">Specimen Carp</p>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-self-stretch">
|
||||
<span class="badge company-bg rounded-pill mb-4">1 · 36</span>
|
||||
<button class="btn btn-outline-secondary small rounded-4 mt-auto">
|
||||
<i class="bi bi-pencil-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
|
||||
<p class="mb-0">Commercial Water</p>
|
||||
<p class="mb-0 text-body-secondary">Specimen Carp</p>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-self-stretch">
|
||||
<span class="badge company-bg rounded-pill mb-4">1 · 36</span>
|
||||
<button class="btn btn-outline-secondary small rounded-4 mt-auto">
|
||||
<i class="bi bi-pencil-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
@ -214,7 +297,10 @@
|
||||
</div>
|
||||
<div class="modal-footer border-top-0 p-4 pt-2">
|
||||
<button class="btn btn-secondary px-4 me-3 btn-facing-left" data-bs-dismiss="modal">Cancel</button>
|
||||
<button class="btn btn-company btn-facing-right">Save New</button>
|
||||
<button class="btn btn-company btn-facing-right">
|
||||
<span class="edit" style="display: none;">Save Edit</span>
|
||||
<span class="create" style="display: none;">Save New</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -223,4 +309,5 @@
|
||||
{% endblock content %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="{% static 'js/mainapp/venues.js' %}"></script>
|
||||
{% endblock scripts %}
|
||||
|
||||
@ -1,13 +1,72 @@
|
||||
function getWaters(venueID) {
|
||||
$.ajax({
|
||||
url: `/venues/get-waters/${venueID}`,
|
||||
type: "GET",
|
||||
"dataType": "json",
|
||||
success: function (data) {
|
||||
alert(JSON.stringify(data));
|
||||
},
|
||||
error: function (error) {
|
||||
alert("error: " + error);
|
||||
}
|
||||
});
|
||||
// function getWaters(venueID) {
|
||||
// $.ajax({
|
||||
// url: `/venues/get-waters/${venueID}`,
|
||||
// type: "GET",
|
||||
// "dataType": "json",
|
||||
// success: function (data) {
|
||||
// alert(JSON.stringify(data));
|
||||
// },
|
||||
// error: function (error) {
|
||||
// alert("error: " + error);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
function openVenueModal(venue_id) {
|
||||
if (venue_id == -1) {
|
||||
$("#venueModal .edit").hide();
|
||||
$("#venueModal .create").show();
|
||||
|
||||
$("#venueName").val("");
|
||||
$("#venueDescription").val("");
|
||||
$("#venueType").val("FISHERY").change();
|
||||
|
||||
$("#venueStreetAddress").val("");
|
||||
$("#venueCity").val("");
|
||||
$("#venueProvence").val("");
|
||||
$("#venuePostCode").val("")
|
||||
|
||||
$("#venuePhone").val("");
|
||||
$("#venueEmail").val("");
|
||||
$("#venueWebsite").val("");
|
||||
|
||||
$("#venueTwitter").val("");
|
||||
$("#venueFacebook").val("");
|
||||
$("#venueInstagram").val("");
|
||||
}
|
||||
else {
|
||||
$("#venueModal .edit").show();
|
||||
$("#venueModal .create").hide();
|
||||
|
||||
$.ajax({
|
||||
url: `/venues/api/${venue_id}`,
|
||||
method: 'get',
|
||||
dataType: 'json',
|
||||
success: function(response) {
|
||||
const venue = response.data;
|
||||
|
||||
$("#venueName").val(venue.name);
|
||||
$("#venueDescription").val(venue.description);
|
||||
$("#venueType").val(venue.venue_type).change();
|
||||
|
||||
$("#venueStreetAddress").val(venue.street_address);
|
||||
$("#venueCity").val(venue.city);
|
||||
$("#venueProvence").val(venue.provence);
|
||||
$("#venuePostCode").val(venue.postal_code)
|
||||
|
||||
$("#venuePhone").val(venue.phone_number);
|
||||
$("#venueEmail").val(venue.email_address);
|
||||
$("#venueWebsite").val(venue.website_url);
|
||||
|
||||
$("#venueTwitter").val(venue.twitter_url);
|
||||
$("#venueFacebook").val(venue.facebook_url);
|
||||
$("#venueInstagram").val(venue.instagram);
|
||||
},
|
||||
error: function(error) {
|
||||
alert("error: " + JSON.stringify(error));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
new bootstrap.Modal("#venueModal").show();
|
||||
}
|
||||
@ -155,4 +155,8 @@
|
||||
border-bottom-left-radius: 0.8rem !important;
|
||||
border-top-right-radius: 1.2rem !important;
|
||||
border-bottom-right-radius: 1.2rem !important;
|
||||
}
|
||||
|
||||
#venueModal .modal-content {
|
||||
min-height: 550px;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user