Location picker map & Modal design
Added a location picker map and a redesign for the new/edit venue modal.
This commit is contained in:
Corban-Lee
parent
0abd71d498
commit
ac388a6e5b
@ -6,6 +6,7 @@
|
||||
{% endblock title %}
|
||||
|
||||
{% block style %}
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
|
||||
{% endblock style %}
|
||||
|
||||
{% block header_buttons %}
|
||||
@ -15,7 +16,7 @@
|
||||
|
||||
<div class="d-flex flex-column flex-grow-1">
|
||||
|
||||
<div class="m-4 mb-0 row">
|
||||
<div class="m-1 m-sm-4 mb-0 mt-4 row">
|
||||
<div class="col-xl-4 col-md-8 mb-md-0 mb-4">
|
||||
<div class="input-group">
|
||||
<button type="button" data-bs-toggle="dropdown" class="btn btn-outline-company border-secondary-subtle">
|
||||
@ -45,15 +46,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mx-4 my-2">
|
||||
<div class="row m-1 mx-sm-4 my-2">
|
||||
<div class="col-xl-7">
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-4 mt-0 row">
|
||||
<div class="m-1 m-sm-4 mt-0 row row-cols-xxl-4 row-cols-xl-3 row-cols-lg-2">
|
||||
{% for venue in venues %}
|
||||
<div class="col-xl-3 col-lg-4 col-sm-6 mb-4">
|
||||
<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="card-body d-flex">
|
||||
<div class="d-flex flex-column">
|
||||
@ -80,7 +81,7 @@
|
||||
<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 }});">
|
||||
<button class="btn btn-outline-company rounded-bottom-4 ms-0" onclick="openVenueModal({{ venue.id }});">
|
||||
<i class="bi bi-pencil-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
@ -92,216 +93,329 @@
|
||||
</div>
|
||||
|
||||
<div id="venueModal" class="modal fade" data-venue-id="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content overflow-hidden rounded-4">
|
||||
<div class="modal-body border-bottom-0 p-0">
|
||||
<div class="card-badge-container">
|
||||
<div class="card-badge"></div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<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>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button id="newVenueAddressTabBtn" class="nav-link" data-bs-toggle="pill" data-bs-target="#newVenueAddressTab" type="button" role="tab" aria-controls="newVenueAddressTab" aria-selected="false">Address</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button id="newVenueContactTabBtn" class="nav-link" data-bs-toggle="pill" data-bs-target="#newVenueContactTab" type="button" role="tab" aria-controls="newVenueContactTab" aria-selected="false">Contact</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button id="newVenueSocialsTabBtn" class="nav-link" data-bs-toggle="pill" data-bs-target="#newVenueSocialsTab" type="button" role="tab" aria-controls="newVenueSocialsTab" aria-selected="false">Socials</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button id="newVenueWatersTabBtn" class="nav-link" data-bs-toggle="pill" data-bs-target="#newVenueWatersTab" type="button" role="tab" aria-controls="newVenueWatersTab" aria-selected="false">Waters</button>
|
||||
</li>
|
||||
</ul>
|
||||
<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="col-12">
|
||||
<label for="venueName" class="form-label">Name</label>
|
||||
<input name="venueName" id="venueName" type="text" class="form-control" placeholder="Venue and Waters">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="venueType" class="form-label">Type</label>
|
||||
<select name="venueType" id="venueType" class="form-select">
|
||||
{% for type in venue_types %}
|
||||
<option value="{{ type.0 }}">{{ type.1 }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
|
||||
<div class="modal-content overflow-hidden rounded-4" style="min-height: 760px;">
|
||||
<div class="modal-header company-bg justify-content-center">
|
||||
<h4 class="card-title text-light fw-bold mb-0">
|
||||
<span class="create" style="display: none">New Venue</span>
|
||||
<span class="edit" style="display: none">Edit Venue</span>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body border-bottom-0 p-0 overflow-hidden">
|
||||
<ul id="newVenueTabBtns" class="nav nav-pills mb-4 d-flex w-100 justify-content-center py-2 bg-light" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button id="newVenueDetailsTabBtn" class="nav-link rounded-4 active" data-bs-toggle="pill" data-bs-target="#newVenueDetailsTab" type="button" role="tab" aria-controls="newVenueDetailsTab" aria-selected="true">Details</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button id="newVenueAddressTabBtn" class="nav-link rounded-4" data-bs-toggle="pill" data-bs-target="#newVenueAddressTab" type="button" role="tab" aria-controls="newVenueAddressTab" aria-selected="false">Address</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button id="newVenueContactTabBtn" class="nav-link rounded-4" data-bs-toggle="pill" data-bs-target="#newVenueContactTab" type="button" role="tab" aria-controls="newVenueContactTab" aria-selected="false">Contact</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button id="newVenueWatersTabBtn" class="nav-link rounded-4" data-bs-toggle="pill" data-bs-target="#newVenueWatersTab" type="button" role="tab" aria-controls="newVenueWatersTab" aria-selected="false">Waters</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="px-2 px-sm-4 pb-0">
|
||||
<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="col-12">
|
||||
<div class="form-floating">
|
||||
<input name="venueName" id="venueName" type="text" class="form-control" placeholder="" minlength="3" maxlength="100" required>
|
||||
<label for="venueName" class="form-label">
|
||||
Name <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter the Venue's name</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-7">
|
||||
<div class="form-floating">
|
||||
<select name="venueType" id="venueType" class="form-select" placeholder="" required>
|
||||
<option disabled value="">Choose one ...</option>
|
||||
{% for type in venue_types %}
|
||||
<option value="{{ type.0 }}">{{ type.1 }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<label for="venueType" class="form-label">
|
||||
Type of Venue <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please select a Venue type</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-floating">
|
||||
<textarea name="venueDescription" id="venueDescription" type="text" class="form-control venue-textarea" placeholder="" maxlength="500"></textarea>
|
||||
<label for="venueDescription" class="form-label">
|
||||
Description
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a brief description of the Venue</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-floating">
|
||||
<textarea name="venueExtraNotes" id="venueExtraNotes" type="text" class="form-control venue-textarea" placeholder="" maxlength="500"></textarea>
|
||||
<label for="venueExtraNotes" class="form-label">Extra Notes</label>
|
||||
<div class="invalid-feedback">Please enter any additional notes regarding the Venue</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 ..." style="max-height: 150px"></textarea>
|
||||
<div id="newVenueAddressTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueAddressTabBtn" tabindex="0">
|
||||
<div class="mb-3">
|
||||
<div class="form-floating">
|
||||
<input name="venueStreetAddress" id="venueStreetAddress" type="text" class="form-control" placeholder="" required>
|
||||
<label for="venueStreetAddress" class="form-label">
|
||||
Street Address <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<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="col-6">
|
||||
<div class="form-floating">
|
||||
<input name="venueCity" id="venueCity" type="text" class="form-control" placeholder="" required>
|
||||
<label for="venueCity" class="form-label">
|
||||
Town or City <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a Town or City</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="form-floating">
|
||||
<input name="venueProvence" id="venueProvence" type="text" class="form-control" placeholder="">
|
||||
<label for="venueProvence" class="form-label">
|
||||
Provence <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a Provence</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="form-floating">
|
||||
<input name="venuePostCode" id="venuePostCode" type="text" class="form-control" placeholder="">
|
||||
<label for="venuePostCode" class="form-label">
|
||||
Postal Code <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a Postal Code</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="form-floating">
|
||||
<input name="venueCountry" id="venueCountry" type="text" class="form-control" placeholder="">
|
||||
<label for="venueCountry" class="form-label">
|
||||
Country <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a Country</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none">
|
||||
<input type="hidden" name="venueLatitude" id="venueLatitude">
|
||||
<input type="hidden" name="venueLongitude" id="venueLongitude">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div id="locationMapContainer" class="w-100 position-relative" style="height: 225px;">
|
||||
<div id="locationMap" class="rounded-2 w-100 h-100"></div>
|
||||
<div id="locationMapOverlay" style="display: none;">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="form-text">(<strong>Disclaimer:</strong> results fetched from clicking the map may be inaccurate)</span>
|
||||
</div>
|
||||
</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="col-6">
|
||||
<div class="form-floating">
|
||||
<input name="venuePhone" id="venuePhone" type="tel" class="form-control" placeholder="">
|
||||
<label for="venuePhone" class="form-label">Phone Number</label>
|
||||
<div class="invalid-feedback">Bad phone number</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="form-floating">
|
||||
<input name="venueEmail" id="venueEmail" type="email" class="form-control" placeholder="">
|
||||
<label for="venueEmail" class="form-label">Email Address</label>
|
||||
<div class="invalid-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-floating">
|
||||
<input name="venueWebsite" id="venueWebsite" type="url" class="form-control" placeholder="">
|
||||
<label for="venueWebsite" class="form-label">Website Address</label>
|
||||
<div class="invalid-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">
|
||||
<i class="bi bi-twitter" style="color: #1DA1F2"></i>
|
||||
</span>
|
||||
<div class="form-floating">
|
||||
<input name="venueTwitter" id="venueTwitter" type="url" class="form-control" placeholder="">
|
||||
<label for="venueTwitter" class="form-label d-flex align-items-center">
|
||||
Twitter Profile Address
|
||||
</label>
|
||||
<div class="invalid-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">
|
||||
<i class="bi bi-facebook" style="color: #4267B2"></i>
|
||||
</span>
|
||||
<div class="form-floating">
|
||||
<input name="venueFacebook" id="venueFacebook" type="url" class="form-control" placeholder="">
|
||||
<label for="venueFacebook" class="form-label d-flex align-items-center">
|
||||
Facebook Profile Address
|
||||
</label>
|
||||
<div class="invalid-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">
|
||||
<i class="bi bi-instagram" style="color: #D62976;"></i>
|
||||
</span>
|
||||
<div class="form-floating">
|
||||
<input name="venueInstagram" id="venueInstagram" type="url" class="form-control" placeholder="">
|
||||
<label for="venueInstagram" class="form-label d-flex align-items-center">
|
||||
Instagram Profile Address
|
||||
</label>
|
||||
<div class="invalid-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="newVenueWatersTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueWatersTabBtn" tabindex="0">
|
||||
<div class="pb-5 pt-0 d-flex justify-content-between align-items-center">
|
||||
<button class="btn btn-outline-secondary rounded-4 d-flex align-items-center">
|
||||
<i class="bi bi-info-lg"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline-company rounded-4 d-flex align-items-center">
|
||||
<span>Add Waters</span>
|
||||
</button>
|
||||
</div>
|
||||
<ul class="list-unstyled overflow-y-auto" style="max-height: 450px;">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start mb-4">
|
||||
<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 mb-4">
|
||||
<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 mb-4">
|
||||
<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 mb-4">
|
||||
<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 mb-4">
|
||||
<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 mb-4">
|
||||
<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 mb-4">
|
||||
<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 mb-4">
|
||||
<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>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="newVenueAddressTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueAddressTabBtn" tabindex="0">
|
||||
<div class="mb-3">
|
||||
<label for="venueStreetAddress" class="form-label">Street Address</label>
|
||||
<input name="venueStreetAddress" id="venueStreetAddress" type="text" class="form-control" placeholder="Wharncliffe Rd">
|
||||
</div>
|
||||
<div class="row g-4 align-items-center mb-3">
|
||||
<div class="col-6">
|
||||
<label for="venueCity" class="form-label">City/Town</label>
|
||||
<input name="venueCity" id="venueCity" type="text" class="form-control" placeholder="Ilkeston">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="venueProvence" class="form-label">Provence</label>
|
||||
<input name="venueProvence" id="venueProvence" type="text" class="form-control" placeholder="Derbyshire">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="venuePostCode" class="form-label">Postal Code</label>
|
||||
<input name="venuePostCode" id="venuePostCode" type="text" class="form-control" placeholder="DE7 5GF">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="venueCountry" class="form-label">Country</label>
|
||||
<input name="venueCountry" id="venueCountry" type="text" class="form-control" placeholder="United Kingdom">
|
||||
</div>
|
||||
</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="col-6">
|
||||
<label for="venuePhone" class="form-label">Phone Number</label>
|
||||
<input name="venuePhone" id="venuePhone" type="tel" class="form-control" placeholder="0343 507 7006">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="venueEmail" class="form-label">Email Address</label>
|
||||
<input name="venueEmail" id="venueEmail" type="email" class="form-control" placeholder="admin@anglingtrust.net">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="venueWebsite" class="form-label">Website Address</label>
|
||||
<input name="venueWebsite" id="venueWebsite" type="url" class="form-control" placeholder="https://anglingtrust.net/">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 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 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 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="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>
|
||||
<button class="btn btn-outline-company rounded-4 d-flex align-items-center">
|
||||
<span>Add Waters</span>
|
||||
</button>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush overflow-y-auto" style="max-height: 450px;">
|
||||
<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>
|
||||
</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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</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" onclick="saveVenue();">
|
||||
<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-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>
|
||||
@ -310,8 +424,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toastContainer" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
|
||||
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||||
<script src="https://unpkg.com/@turf/turf@6.5.0/turf.min.js"></script>
|
||||
<script src="{% static 'js/mainapp/venues.js' %}" data-csrfmiddlewaretoken="{{ csrf_token }}"></script>
|
||||
{% endblock scripts %}
|
||||
|
||||
@ -126,12 +126,12 @@
|
||||
|
||||
#newVenueTabBtns {
|
||||
|
||||
border-radius: 50rem;
|
||||
// border-radius: 50rem;
|
||||
overflow: hidden;
|
||||
width: fit-content;
|
||||
|
||||
.nav-item > .nav-link {
|
||||
border-radius: 1rem !important;
|
||||
// border-radius: 1rem !important;
|
||||
|
||||
color: #04385c;
|
||||
|
||||
@ -159,4 +159,36 @@
|
||||
|
||||
#venueModal .modal-content {
|
||||
min-height: 550px;
|
||||
}
|
||||
|
||||
#locationMapOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7); /* Darkened overlay with 70% opacity */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000; /* Ensure the overlay is above the map */
|
||||
}
|
||||
|
||||
.spinner {
|
||||
border: 4px solid rgba(255, 255, 255, 0.3); /* Light border for the spinner */
|
||||
border-top: 4px solid #3498db; /* Blue spinner */
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.venue-textarea {
|
||||
resize: none;
|
||||
min-height: 152px !important;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user