jamesparkin/Results-Page
1
0
Fork 0
Code Issues 9 Pull Requests Projects 1 Releases Activity

working on the venue UI changes

Browse Source
This commit is contained in:
Corban-Lee 2023-11-04 21:56:03 +00:00
parent cbbf46bdb9
commit bf6d441812
4 changed files with 178 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/mainapp/models.py
View File

@ -14,7 +14,7 @@ class Venue(models.Model):
)
name = models.CharField(max_length=255)
description = models.TextField(blank=True)
description = models.TextField(blank=True, max_length=500)
extra_notes = models.TextField(blank=True)
venue_type = models.CharField(choices=VENUE_TYPES, max_length=50)

71
src/mainapp/templates/venues.html
View File

@ -52,10 +52,32 @@
</div>
</div>
<div class="m-1 m-sm-4 mt-0 row row-cols-xxl-4 row-cols-xl-3 row-cols-lg-2">
<div class="m-1 m-sm-4 mt-0 row row-cols-xxl-5 row-cols-xl-4 row-cols-lg-3 g-3">
{% for venue in venues %}
<div class=" mb-4">
<div class="card w-100 h-100 fluid-hover-zoom shadow-sm md-shadow-on-hover overflow-hidden flex-row">
<div class="">
<div class="card w-100 h-100 border-0 rounded-3 overflow-hidden">
<div class="card-body bg-body-tertiary position-relative">
<div class="d-flex justify-content-between align-items-stretch">
<div>
<h5 class="card-title fw-semibold">{{ venue.name }}</h5>
<p class="card-text mb-0">{{ venue.street_address }}</p>
<p class="card-text mb-0">{{ venue.city }}, {{ venue.provence }}</p>
<p class="card-text mb-3">{{ venue.postal_code }}</p>
<p class="card-text mb-0">{{ venue.phone_number }}</p>
<p class="card-text mb-0">{{ venue.email_address }}</p>
</div>
<div class="d-flex flex-column justify-content-end align-items-end h-100">
<div class="badge company-bg rounded-pill end-0 top-0">
6 Waters
</div>
<button class="mt-auto btn btn-outline-company rounded-circle" style="width: fit-content;">
<i class="bi bi-gear"></i>
</button>
</div>
</div>
</div>
</div>
<!-- <div class="card w-100 h-100 shadow-sm overflow-hidden flex-row fluid-hover-zoom md-shadow-on-hover" data-venue-id="{{ venue.id }}">
<div class="card-body d-flex">
<div class="d-flex flex-column">
<h5 class="card-title text-company mb-0">{{ venue.name }}</h5>
@ -74,9 +96,6 @@
</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>
@ -86,7 +105,7 @@
</button>
</div>
</div>
</div>
</div> -->
</div>
{% endfor %}
</div>
@ -120,7 +139,7 @@
<form id="venueForm" n class="needs-validation" novalidate>
<div id="newVenueTabs" class="tab-content">
<div id="newVenueDetailsTab" class="tab-pane fade show active" role="tabpanel" aria-labelledby="newVenueDetailsTabBtn" tabindex="0">
<div class="row g-4 align-items-center mb-3">
<div class="row g-4 align-items-start mb-3">
<div class="col-12">
<div class="form-floating">
<input name="venueName" id="venueName" type="text" class="form-control" placeholder="" minlength="3" maxlength="100" required>
@ -172,7 +191,7 @@
<div class="invalid-feedback">Please enter a valid Street Address</div>
</div>
</div>
<div class="row g-4 align-items-center mb-3">
<div class="row g-4 align-items-start mb-3">
<div class="col-6">
<div class="form-floating">
<input name="venueCity" id="venueCity" type="text" class="form-control" placeholder="" required>
@ -184,7 +203,7 @@
</div>
<div class="col-6">
<div class="form-floating">
<input name="venueProvence" id="venueProvence" type="text" class="form-control" placeholder="">
<input name="venueProvence" id="venueProvence" type="text" class="form-control" placeholder="" required>
<label for="venueProvence" class="form-label">
Provence <strong class="text-danger">&ast;</strong>
</label>
@ -193,7 +212,7 @@
</div>
<div class="col-6">
<div class="form-floating">
<input name="venuePostCode" id="venuePostCode" type="text" class="form-control" placeholder="">
<input name="venuePostCode" id="venuePostCode" type="text" class="form-control" placeholder="" required>
<label for="venuePostCode" class="form-label">
Postal Code <strong class="text-danger">&ast;</strong>
</label>
@ -202,9 +221,12 @@
</div>
<div class="col-6">
<div class="form-floating">
<input name="venueCountry" id="venueCountry" type="text" class="form-control" placeholder="">
<!-- <input name="venueCountry" id="venueCountry" type="text" class="form-control" placeholder="" required> -->
<select name="venueCountry" id="venueCountry" class="form-select" placeholder="" disabled required>
<option value="UK">United Kingdom</option>
</select>
<label for="venueCountry" class="form-label">
Country <strong class="text-danger">&ast;</strong>
Country <i class="bi bi-lock-fill"></i>
</label>
<div class="invalid-feedback">Please enter a Country</div>
</div>
@ -225,7 +247,7 @@
</div>
</div>
<div id="newVenueContactTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueContactTabBtn" tabindex="0">
<div class="row g-4 align-items-center">
<div class="row g-4 align-items-start">
<div class="col-6">
<div class="form-floating">
<input name="venuePhone" id="venuePhone" type="tel" class="form-control" placeholder="">
@ -413,11 +435,30 @@
</div>
</div>
<div class="modal-footer bg-light border-top-0 px-4 py-3">
<button type="button" class="btn btn-outline-danger rounded-4 me-auto px-3 edit" style="display: none">Delete</button>
<!-- <button type="button" class="btn btn-outline-danger rounded-4 me-auto px-3 edit" style="display: none">Delete</button>
<button type="button" class="btn btn-outline-secondary me-3 rounded-4 px-3" data-bs-dismiss="modal">Cancel</button>
<button type="submit" id="saveVenue" class="btn btn-company rounded-4 px-3" form="venueForm">
<span class="edit" style="display: none;">Save Edit</span>
<span class="create" style="display: none;">Save New</span>
</button> -->
<button type="button" class="btn btn-outline-danger rounded-4">
<i class="bi bi-trash2"></i>
</button>
<div class="mx-auto">
<!-- <button type="button" id="newVenueTabLeft" class="btn btn-company rounded-4 me-1" disabled>
<i class="bi bi-chevron-left"></i>
</button> -->
<button type="submit" id="saveVenue" class="btn btn-company rounded-4 px-4" form="venueForm">
<!-- <i class="bi bi-floppy"></i> -->
<span class="edit" style="display: none;">Save Edit</span>
<span class="create" style="display: none;">Save New</span>
</button>
<!-- <button type="button" id="newVenueTabRight" class="btn btn-company rounded-4 ms-1">
<i class="bi bi-chevron-right"></i>
</button> -->
</div>
<button type="button" class="btn btn-outline-secondary rounded-4" data-bs-dismiss="modal">
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>

112
src/static/js/mainapp/venues.js
View File

@ -9,8 +9,7 @@ const formControls = [
{
id: "venueName",
validation: function (element) {
const value = element.val();
const minlength = element.attr("minlength") || 0; // FIELD IS VALID IF:
const value = element.val(); // FIELD IS VALID IF:
return (!element.attr("required") || value.trim() !== ""); // - element is not required OR not empty
},
errorMessage: function (element) {
@ -18,7 +17,58 @@ const formControls = [
return `Enter a venue name longer than ${minlength} characters`;
}
},
{
id: "venueType",
validation: function (element) {
const value = element.val(); // FIELD IS VALID IF:
return (!element.attr("required") || value !== null); // - element is not required OR not empty
},
errorMessage: function (element) {
return "Please selected a type of venue";
}
},
// Address Tab
{
id: "venueStreetAddress",
validation: function (element) {
const value = element.val();
return (!element.attr("required") || value.trim() !== "");
},
errorMessage: function (element) {
return "Enter the street address of the venue";
}
},
{
id: "venueCity",
validation: function (element) {
const value = element.val();
return (!element.attr("required") || value.trim() !== "");
},
errorMessage: function (element) {
return "Enter the town or city of the venue";
}
},
{
id: "venueProvence",
validation: function (element) {
const value = element.val();
return (!element.attr("required") || value.trim() !== "");
},
errorMessage: function (element) {
return "Enter the provence of the venue";
}
},
{
id: "venuePostCode",
validation: function (element) {
const value = element.val();
return (!element.attr("required") || value.trim() !== "");
},
errorMessage: function (element) {
return "Enter the postal code of the venue";
}
},
];
$(document).ready(function() {
@ -39,6 +89,12 @@ $("#newVenueAddressTabBtn").on("shown.bs.tab", function() {
zoom:8,
layers: [tileLayer]
});
const UKSouthWest = L.latLng(49.823809, -8.649357);
const UKNorthEast = L.latLng(60.905124, 2.637773);
const UKBounds = L.latLngBounds(UKSouthWest, UKNorthEast);
map.setMaxBounds(UKBounds);
}
venueCoords = {
@ -137,20 +193,23 @@ function openVenueModal(venue_id) {
const detailsTab = new bootstrap.Tab("#newVenueDetailsTabBtn");
detailsTab.show(); // back to the first tab
$("#venueForm .form-control, #venueForm .form-select").removeClass("is-valid is-invalid");
$("#venueForm .invalid-feedback").text("");
if (venue_id == -1) {
$("#venueModal .edit").hide();
$("#venueModal .create").show();
$("#venueName").val("");
$("#venueDescription").val("");
$("#venueType").val("").change();
$("#venueDescription").val("");
$("#venueExtraNotes").val("");
$("#venueStreetAddress").val("");
$("#venueCity").val("");
$("#venueProvence").val("");
$("#venuePostCode").val("");
$("#venueCountry").val("");
// $("#venueCountry").val("");
$("#venueLatitude").val("");
$("#venueLongitude").val("");
@ -174,14 +233,15 @@ function openVenueModal(venue_id) {
const venue = response.data;
$("#venueName").val(venue.name);
$("#venueDescription").val(venue.description);
$("#venueType").val(venue.venue_type).change();
$("#venueDescription").val(venue.description);
$("#venueExtraNotes").val(venue.extra_notes);
$("#venueStreetAddress").val(venue.street_address);
$("#venueCity").val(venue.city);
$("#venueProvence").val(venue.provence);
$("#venuePostCode").val(venue.postal_code);
$("#venueCountry").val(venue.country);
// $("#venueCountry").val(venue.country);
$("#venueLatitude").val(venue.latitude);
$("#venueLongitude").val(venue.longitude);
@ -211,7 +271,7 @@ $("#venueForm").on("submit", function(event) {
function validateVenue() {
// Reset the validation indicators and messages
$("#venueForm .form-control").removeClass("is-valid is-invalid");
$("#venueForm .form-control, #venueForm .form-select").removeClass("is-valid is-invalid");
$("#venueForm .invalid-feedback").text("");
var valid = true;
@ -272,4 +332,40 @@ function saveVenue() {
alert("error: " + JSON.stringify(error));
}
});
}
}
$("#newVenueTabLeft").on("click", function() {
const currentTab = $("#newVenueTabBtns .nav-link.active").parent();
const previousTabParent = currentTab.prev();
const previousTab = previousTabParent.find(".nav-link");
previousTab.click();
if (previousTabParent.is(":first-child")) {
$("#newVenueTabLeft").prop("disabled", true);
$("#newVenueTabRight").prop("disabled", false);
}
else {
$("#newVenueTabRight").prop("disabled", false);
$("#saveVenue").hide();
}
});
$("#newVenueTabRight").on("click", function() {
const currentTab = $("#newVenueTabBtns .nav-link.active").parent();
const nextTabParent = currentTab.next();
const nextTab = nextTabParent.find(".nav-link");
nextTab.click();
if (nextTabParent.is(":last-child")) {
$("#newVenueTabRight").prop("disabled", true);
$("#saveVenue").show();
$("#newVenueTabLeft").prop("disabled", false);
}
else {
$("#newVenueTabLeft").prop("disabled", false);
}
});

33
src/static/scss/base.scss
View File

@ -103,26 +103,27 @@
}
.card-badge-container {
position: relative;
// .card-badge-container {
// position: relative;
.card-badge {
width: 60px;
height: 60px;
// .card-badge {
// aspect-ratio: 1 / 1;
position: absolute;
top: -30px;
right: -30px;
// height: calc(100% + 20px);
background-color: #04385c;
border-bottom: 30px;
border-left: 30px;
border-right: 30px;
// position: absolute;
// top: calc(-30% - 21px);
// left: -26px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
}
// background-color: #04385c;
// border-bottom: 30px;
// border-left: 30px;
// border-right: 30px;
// transform: rotate(45deg);
// // -webkit-transform: rotate(45deg);
// }
// }
#newVenueTabBtns {