working on the venue UI changes

src/mainapp/models.py

@@ -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)
 

src/mainapp/templates/venues.html

@@ -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="">
-                <div class="card w-100 h-100 fluid-hover-zoom shadow-sm md-shadow-on-hover overflow-hidden flex-row">
+                <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>

src/static/js/mainapp/venues.js

@@ -9,8 +9,7 @@ const formControls = [
     {
         id: "venueName",
         validation: function (element) {
-            const value = element.val();
+            const value = element.val();                                 // FIELD IS VALID IF:
-            const minlength = element.attr("minlength") || 0;            // 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);
+    }
+
+});

src/static/scss/base.scss

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