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

Merge branch 'redesign-branch' into james-dev

Browse Source
This commit is contained in:
jamesparkin675 2024-06-25 18:09:49 +01:00
commit a00d595ebb
20 changed files with 2249 additions and 410 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/mainapp/migrations/0004_venue_active_alter_venue_description.py Normal file
View File

@ -0,0 +1,23 @@
# Generated by Django 4.1.5 on 2023-11-06 20:31
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('mainapp', '0003_waters'),
]
operations = [
migrations.AddField(
model_name='venue',
name='active',
field=models.BooleanField(default=True),
),
migrations.AlterField(
model_name='venue',
name='description',
field=models.TextField(blank=True, max_length=500),
),
]

10
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)
@ -37,9 +37,17 @@ class Venue(models.Model):
instagram_url = models.URLField(blank=True)
facebook_url = models.URLField(blank=True)
active = models.BooleanField(default=True)
def __str__(self):
return self.name
def waters(self):
"""Returns all waters linked to this venue."""
waters = Waters.objects.filter(venue=self)
return waters
class Waters(models.Model):
"""Represents the waters of a Venue"""

31
src/mainapp/templates/_index.html Normal file
View File

@ -0,0 +1,31 @@
{% extends "base.html" %}
{% load static %}
{% block style %}
<link rel="stylesheet" href="{% static 'css/ocean.css' %}">
{% endblock style %}
{% block content %}
<div class="flex-grow-1 overflow-hidden">
<div id="ocean">
<div class="bubble bubble--1"></div>
<div class="bubble bubble--2"></div>
<div class="bubble bubble--3"></div>
<div class="bubble bubble--4"></div>
<div class="bubble bubble--5"></div>
<div class="bubble bubble--6"></div>
<div class="bubble bubble--7"></div>
<div class="bubble bubble--8"></div>
<div class="bubble bubble--9"></div>
<div class="bubble bubble--10"></div>
<div class="bubble bubble--11"></div>
<div class="bubble bubble--12"></div>
</div>
</div>
{% endblock content %}
{% block scripts %}
<script src="{% static 'js/ocean.js' %}"></script>
{% endblock scripts %}

485
src/mainapp/templates/index.html
View File

@ -1,31 +1,478 @@
{% extends "base.html" %}
{% load static %}
{% block title %}
Venues |
{% endblock title %}
{% block style %}
<link rel="stylesheet" href="{% static 'css/ocean.css' %}">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
{% endblock style %}
{% block content %}
{% block header_buttons %}
{% endblock header_buttons %}
<div class="flex-grow-1 overflow-hidden">
<div id="ocean">
<div class="bubble bubble--1"></div>
<div class="bubble bubble--2"></div>
<div class="bubble bubble--3"></div>
<div class="bubble bubble--4"></div>
<div class="bubble bubble--5"></div>
<div class="bubble bubble--6"></div>
<div class="bubble bubble--7"></div>
<div class="bubble bubble--8"></div>
<div class="bubble bubble--9"></div>
<div class="bubble bubble--10"></div>
<div class="bubble bubble--11"></div>
<div class="bubble bubble--12"></div>
</div>
{% block content %}
<div class="px-4 bg-body shadow mb-5">
<div class="d-flex justify-content-between align-items-center p-2 flex-wrap">
<h1 class="fw-bold h4 mb-0 ms-2">Venues &amp; Waters</h1>
<div class="input-group w-auto">
<div class="input-group-text bg-body pe-0">
<i class="bi bi-search"></i>
</div>
<input type="search" class="form-control border-start-0" placeholder="Search Venues">
</div>
<div class="d-flex flex-row align-items-center">
<button class="btn btn-primary rounded-2 me-3" onclick="openVenueModal(-1);">
<i class="bi bi-plus-lg me-1"></i>
New
</button>
<button class="btn btn-outline-secondary border-secondary-subtle rounded-2 me-3">
<i class="bi bi-upload me-1"></i>
Import
</button>
<button class="btn btn-outline-secondary border-secondary-subtle rounded-2 me-3">
<i class="bi bi-sort-alpha-up me-sm-1"></i>
<i class="bi bi-chevron-down"></i>
</button>
<button class="btn btn-outline-secondary border-secondary-subtle rounded-2">
<i class="bi bi-filter-right me-sm-1"></i>
<i class="bi bi-chevron-down"></i>
</button>
</div>
</div>
</div>
<div class="row flex-row-reverse my-4 mx-lg-4">
<div class="col-lg-3 d-flex flex-column">
<div id="locationMapContainer" class="w-100 position-relative shadow mb-4 bg-body rounded-3 overflow-hidden" style="height: 300px;">
<div id="allLocationsMap" class="w-100 h-100"></div>
</div>
<div class="bg-body rounded-3 p-4 flex-grow-1 shadow mb-3">
<div class="text-body small">
placeholder<br>
maybe a graph here?
</div>
</div>
</div>
<div class="col-lg-9">
<div class="row gx-3 px-2 mt-0">
{% for venue in venues %}
<div class="col-xxl-4 col-xl-6 col-md-6 col-sm-12 mb-3">
<div class="rounded-2 h-100 p-4 bg-body shadow d-flex flex-column">
<header class="d-flex justify-content-between align-items-start mb-3 dropend">
<div class="text-truncate">
<h4 class="h6 mb-1 text-body-secondary small">
{% if venue.venue_type == "FISHERY" %}
Fishery
{% elif venue.venue_type == "PRIVATE" %}
Private
{% elif venue.venue_type == "CLUB" %}
Club
{% endif %}
</h4>
<h4 class="h6 mb-0 me-2 text-truncate fw-bold">{{ venue.name }}</h4>
</div>
<button class="border-0 bg-transparent" type="button" data-bs-toggle="dropdown">
<i class="bi bi-three-dots fs-4 d-flex"></i>
</button>
<ul class="dropdown-menu rounded-4 overflow-hidden py-0 shadow-sm" style="width: fit-content; min-width: fit-content;">
<li>
<button class="dropdown-item hover-fill-primary py-2">
<i class="bi bi-eye"></i>
</button>
</li>
<li>
<hr class="dropdown-divider my-0">
</li>
<li>
<button class="dropdown-item py-2" onclick="openVenueModal({{ venue.id }});">
<i class="bi bi-pencil"></i>
</button>
</li>
<li>
<hr class="dropdown-divider my-0">
</li>
<li>
<button class="dropdown-item py-2 hover-fill-danger">
<i class="bi bi-trash"></i>
</button>
</li>
</ul>
</header>
<p class="text-body-secondary venue-description mb-4">{{ venue.description }}</p>
<div class="d-flex align-items-center fs-6 mt-auto ">
{% if venue.email_address %}
<a href="mailto:{{ venue.email_address }}" class="text-reset text-hover-primary me-3" data-bs-toggle="tooltip" data-bs-title="{{ venue.email_address }}">
<i class="bi bi-envelope-at"></i>
</a>
{% endif %}
{% if venue.phone_number %}
<a href="tel:{{ venue.phone_number }}" class="text-reset text-hover-primary me-3" data-bs-toggle="tooltip" data-bs-title="{{ venue.phone_number }}">
<i class="bi bi-telephone"></i>
</a>
{% endif %}
{% if venue.latitude and venue.longitude %}
<a href="https://www.openstreetmap.org/?mlat={{ venue.latitude }}&mlon={{ venue.longitude }}" target="_blank" class="text-reset text-hover-primary me-3" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="{{ venue.street_address }}<br>{{ venue.city }}, {{ venue.provence }}<br>{{ venue.postal_code }}">
<i class="bi bi-geo-alt"></i>
</a>
{% endif %}
{% if venue.website_url %}
<a href="{{ venue.website_url }}" class="text-reset text-hover-primary me-3" target="_blank" data-bs-toggle="tooltip" data-bs-title="{{ venue.website_url }}">
<i class="bi bi-globe2"></i>
</a>
{% endif %}
<div class="d-inline mx-auto"></div>
{% if venue.waters %}
<div class="badge bg-info-subtle text-info-emphasis ms-2" data-bs-toggle="tooltip" data-bs-title="There are {{ venue.waters|length }} waters in this venue">
{{ venue.waters|length }}
<i class="bi bi-droplet-half "></i>
</div>
{% endif %}
{% if not venue.latitude or not venue.longitude or not venue.phone_number or not venue.website_url or not venue.email_address %}
<div class="badge bg-warning-subtle text-warning-emphasis ms-2" data-bs-toggle="tooltip" data-bs-title="There are missing details for this venue">
<i class="bi bi-exclamation-triangle"></i>
</div>
{% endif %}
{% if not venue.active %}
<div class="badge bg-danger-subtle text-danger-emphasis ms-2" data-bs-toggle="tooltip" data-bs-title="This venue is inactive">
<i class="bi bi-x-lg"></i>
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
<div class="col-xxl-4 col-xl-6 col-md-6 col-sm-12">
<div class="fluid-hover-zoom h-100 d-flex flex-column justify-content-center align-items-center" role="button" onclick="openVenueModal(-1);">
<i class="bi bi-plus-lg fs-1"></i>
<span class="fw-bold">
Create new
</span>
</div>
</div>
</div>
</div>
</div>
<div id="venueModal" class="modal fade" data-venue-id="-1" data-bs-backdrop="static">
<div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-truncate me-5">New Venue</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="row g-0 flex-md-grow-1">
<div class="col-md-1">
<div id="sidebarNavigation" class="bg-body-tertiary">
<div class="modal-sidebar flex-row flex-md-column align-items-start text-center" role="tablist">
<button id="detailsTab" class="modal-sidebar-btn active" type="button" data-bs-toggle="tab" data-bs-target="#detailsContent" role="tab" aria-controls="detailsContent" aria-selected="true">
<i class="bi bi-file-earmark-text"></i>
</button>
<button id="addressTab" class="modal-sidebar-btn" type="button" data-bs-toggle="tab" data-bs-target="#addressContent" role="tab" aria-controls="addressContent" aria-selected="false">
<i class="bi bi-geo-alt"></i>
</button>
<button id="contactTab" class="modal-sidebar-btn" type="button" data-bs-toggle="tab" data-bs-target="#contactContent" role="tab" aria-controls="contactContent" aria-selected="false">
<i class="bi bi-telephone"></i>
</button>
<button id="watersTab" class="modal-sidebar-btn" type="button" data-bs-toggle="tab" data-bs-target="#watersContent" role="tab" aria-controls="watersContent" aria-selected="false">
<i class="bi bi-droplet-half"></i>
</button>
<button id="confirmTab" class="modal-sidebar-btn mt-md-auto" type="button" data-bs-toggle="tab" data-bs-target="#confirmContent" role="tab" aria-controls="confirmContent" aria-selected="false">
<i class="bi bi-check-lg"></i>
</button>
</div>
</div>
</div>
<div class="col-md-11 overflow-auto">
<div class="tab-content d-inline-block w-100 h-100 py-3 px-4">
<div id="detailsContent" class="tab-pane fade flex-column h-100 show active">
<div class="form-floating mb-4">
<input type="text" name="venueName" id="venueName" class="form-control" placeholder="">
<label for="venueName" class="form-label">Venue Name</label>
</div>
<div class="form-floating mb-4">
<textarea class="form-control" style="height: 150px; resize: none;" placeholder=""></textarea>
<label for="" class="form-label">Description</label>
</div>
<div class="mb-4">
<div class="form-check form-check-inline">
<input type="radio" name="venueType" id="venueFishery" class="form-check-input">
<label for="venueFishery" class="form-check-label">Fishery</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" name="venueType" id="venueClub" class="form-check-input">
<label for="venueClub" class="form-check-label">Club</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" name="venueType" id="venuePrivate" class="form-check-input">
<label for="venuePrivate" class="form-check-label">Private</label>
</div>
</div>
<div class="form-check form-switch">
<input type="checkbox" name="venueActive" id="venueActive" class="form-check-input">
<label for="venueActive" class="form-check-label">Venue is active?</label>
</div>
<div class="mt-5 mt-md-auto d-flex justify-content-end">
<button class="btn btn-primary px-3" type="button" onclick="$('#addressTab').click();">Next</button>
</div>
</div>
<div id="addressContent" class="tab-pane fade flex-column h-100">
<div class="form-floating mb-4">
<input type="text" name="venueSearch" id="venueSearch" class="form-control" placeholder="">
<label for="venueSearch" class="form-label">
<i class="bi bi-search me-1"></i>
Post Code or Street Address
</label>
</div>
<div id="venueSearchResults" style="display: none">
<div class="row">
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="venueStreetNum" id="venueStreetNum" class="form-control-plaintext" placeholder="" readonly>
<label for="venueStreetNum" class="form-label">Street Number</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="venueStreet" id="venueStreet" class="form-control-plaintext" placeholder="" readonly>
<label for="venueStreet" class="form-label">Street Address</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="venueCity" id="venueCity" class="form-control-plaintext" placeholder="" readonly>
<label for="venueCity" class="form-label">Town/City</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="venueCounty" id="venueCounty" class="form-control-plaintext" placeholder="" readonly>
<label for="venueCounty" class="form-label">County/Region</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="venuePost" id="venuePost" class="form-control-plaintext" placeholder="" readonly>
<label for="venuePost" class="form-label">Post Code</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="venueCountry" id="venueCountry" class="form-control-plaintext" placeholder="" readonly>
<label for="venueCountry" class="form-label">Country</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="venueLat" id="venueLat" class="form-control-plaintext" placeholder="" readonly>
<label for="venueLat" class="form-label">Latitude</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="venueLng" id="venueLng" class="form-control-plaintext" placeholder="" readonly>
<label for="venueLng" class="form-label">Longitude</label>
</div>
</div>
</div>
</div>
<div id="venueSearchHelper" class="my-auto text-center">
<label for="venueSearch" class="fs-4 mx-lg-4 text-body-secondary">Use the search to find your venue.</label>
</div>
<div class="mt-5 mt-md-auto d-flex justify-content-end">
<button class="btn btn-outline-secondary me-3" type="button" onclick="$('#detailsTab').click();">Back</button>
<button class="btn btn-primary px-3" type="button" onclick="$('#contactTab').click();">Next</button>
</div>
</div>
<div id="contactContent" class="tab-pane fade flex-column h-100">
<div class="row">
<div class="col-6">
<div class="form-floating mb-4">
<input type="tel" name="venuePhone" id="venuePhone" class="form-control" placeholder="">
<label for="venuePhone" class="form-label">Phone Number</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-4">
<input type="email" name="venueEmail" id="venueEmail" class="form-control" placeholder="">
<label for="venueEmail" class="form-label">Email Address</label>
</div>
</div>
</div>
<div class="form-floating mb-4">
<input type="url" name="venueWebsite" id="venueWebsite" class="form-control" placeholder="">
<label for="venueWebsite" class="form-label">Website URL</label>
</div>
<div class="form-floating mb-4">
<input type="url" name="venueFacebook" id="venueFacebook" class="form-control" placeholder="">
<label for="" class="form-label">Facebook URL</label>
</div>
<div class="form-floating mb-4">
<input type="url" name="venueInstagram" id="venueInstagram" class="form-control" placeholder="">
<label for="venueInstagram" class="form-label">Instagram URL</label>
</div>
<div class="form-floating mb-4">
<input type="url" name="venueTwitter" id="venueTwitter" class="form-control" placeholder="">
<label for="venueTwitter" class="form-label">Twitter URL</label>
</div>
<div class="mt-5 mt-md-auto d-flex justify-content-end">
<button class="btn btn-outline-secondary me-3" type="button" onclick="$('#addressTab').click();">Back</button>
<button class="btn btn-primary px-3" type="button" onclick="$('#watersTab').click();">Next</button>
</div>
</div>
<div id="watersContent" class="tab-pane fade flex-column h-100">
waters
<div class="mt-5 mt-md-auto d-flex justify-content-end">
<button class="btn btn-outline-secondary me-3" type="button" onclick="$('#contactTab').click();">Back</button>
<button class="btn btn-primary px-3" type="button" onclick="$('#confirmTab').click();">Next</button>
</div>
</div>
<div id="confirmContent" class="tab-pane fade flex-column h-100">
<div class="row">
<div class="col-12">
<div class="form-floating mb-3">
<input type="text" name="" id="" class="form-control-plaintext" placeholder="" readonly value="Chequered Lake">
<label for="" class="form-label">Venue Name</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="" id="" class="form-control-plaintext" placeholder="" readonly value="Some description...">
<label for="" class="form-label">Description</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="" id="" class="form-control-plaintext" placeholder="" readonly value="Fishery">
<label for="" class="form-label">Venue Type</label>
</div>
</div>
</div>
<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-primary" type="button" onclick="alert('not implemented')">Save Changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div id="venueModal" class="modal fade" data-venue-id="-1" data-bs-backdrop="static">
<div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down ">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New Venue</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div id="newVenuePages" class="modal-body">
<div id="detailsPage" class="page active">
<div class="form-floating mb-3">
<input type="text" class="form-control" placeholder="">
<label for="" class="form-label">Name</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control venue-textarea" placeholder=""></textarea>
<label for="" class="form-label">Description</label>
</div>
<label class="form-label">Type</label>
<div class="mb-3 group-radio-btns">
<input type="radio" name="vType" id="vtFishery" class="btn-check">
<label for="vtFishery" class="btn btn-outline-primary">Fishery</label>
<input type="radio" name="vType" id="vtClub" class="btn-check">
<label for="vtClub" class="btn btn-outline-primary">Club</label>
<input type="radio" name="vType" id="vtPrivate" class="btn-check">
<label for="vtPrivate" class="btn btn-outline-primary">Private</label>
</div>
</div>
<div id="addressPage" class="page">
<label class="form-label">Type part of the address or postcode to begin</label>
<input type="text" class="form-control" placeholder="E.g. 'CR0 3RL' or '36 Factory Lane'">
</div>
<div id="contactPage" class="page">
<div class="row mb-3">
<div class="col-lg-6">
<div class="form-floating">
<input type="tel" class="form-control" placeholder="">
<label for="">Phone Number</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating">
<input type="email" class="form-control" placeholder="">
<label for="">Email Address</label>
</div>
</div>
</div>
<div class="form-floating mb-3">
<input type="url" class="form-control" placeholder="">
<label for="">
<i class="bi bi-link-45deg"></i>
Website
</label>
</div>
<div class="form-floating mb-3">
<input type="url" class="form-control" placeholder="">
<label for="">
<i class="bi bi-link-45deg"></i>
Facebook
</label>
</div>
<div class="form-floating mb-3">
<input type="url" class="form-control" placeholder="">
<label for="">
<i class="bi bi-link-45deg"></i>
Instagram
</label>
</div>
<div class="form-floating mb-3">
<input type="url" class="form-control" placeholder="">
<label for="">
<i class="bi bi-link-45deg"></i>
Twitter
</label>
</div>
</div>
<div id="watersPage" class="page">
Waters
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
<button type="button" id="newVenueBack" class="btn btn-secondary" style="display: none">
<i class="bi bi-arrow-left me-1"></i>
Back
</button>
<button type="button" id="newVenueNext" class="btn btn-primary">
Next
<i class="bi bi-arrow-right ms-1"></i>
</button>
<button type="button" id="newVenueFinished" class="btn btn-primary" style="display: none;">
Save Changes
</button>
</div>
</div>
</div>
</div> -->
{% endblock content %}
{% block scripts %}
<script src="{% static 'js/ocean.js' %}"></script>
{% endblock scripts %}
<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl, {trigger : 'hover'}))
</script>
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r, "places"]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "AIzaSyDFR2xw2LhMPb6FC8OrfiLrJZRMRLMocvw",
v: "weekly",
});
</script>
<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 %}+

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

@ -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,16 +46,40 @@
</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-5 row-cols-xl-4 row-cols-lg-3 g-3">
{% 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 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 h-100">
<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>
<div class="text-body-secondary">
<p class="card-text mb-0">{{ venue.phone_number }}</p>
<p class="card-text mb-0">{{ venue.email_address }}</p>
</div>
</div>
<div class="d-flex flex-column justify-content-end align-items-end">
<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;" onclick="openVenueModal({{ venue.id }});">
<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>
@ -73,241 +98,382 @@
</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 }});">
<button class="btn btn-outline-company rounded-bottom-4 ms-0" onclick="openVenueModal({{ venue.id }});">
<i class="bi bi-pencil-fill"></i>
</button>
</div>
</div>
</div>
</div> -->
</div>
{% endfor %}
</div>
</div>
<div id="venueModal" class="modal fade">
<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 id="venueModal" class="modal fade" data-venue-id="-1">
<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-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>
<label for="venueName" class="form-label">
Name <strong class="text-danger">&ast;</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">&ast;</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">&ast;</strong>
</label>
<div class="invalid-feedback">Please enter a valid Street Address</div>
</div>
</div>
<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>
<label for="venueCity" class="form-label">
Town or City <strong class="text-danger">&ast;</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="" required>
<label for="venueProvence" class="form-label">
Provence <strong class="text-danger">&ast;</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="" required>
<label for="venuePostCode" class="form-label">
Postal Code <strong class="text-danger">&ast;</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="" 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 <i class="bi bi-lock-fill text-warning-emphasis"></i>
</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&colon;</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-start">
<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>
</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">
<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> -->
<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>
</div>
</div>
<div id="toastContainer" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
{% endblock content %}
{% block scripts %}
<script src="{% static 'js/mainapp/venues.js' %}"></script>
<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 %}

1
src/mainapp/urls.py
View File

@ -10,6 +10,7 @@ urlpatterns = [
path('venues/get-waters/<int:venue_id>', views.get_venue_waters, name="get-venue-waters"),
path('venues/<int:venue_id>', views.venue_details, name="venue-details"),
path("venues/api/<int:venue_id>", views.get_venue_details, name="venue-details"),
path("venues/api/create", views.create_venue, name="create-venue"),
# path('bulk-peg/', views.bulk_create_pegs, name='bulk-peg'),
path('get-angler-data/', views.get_angler_page_data, name='get-angler-data'),

31
src/mainapp/views.py
View File

@ -18,7 +18,11 @@ from .models import Venue, Waters
def index(request):
return render(request, 'index.html')
venues = Venue.objects.all()
context = {"venues": venues, "venue_types": Venue.VENUE_TYPES}
return render(request, 'index.html', context)
def results(request):
return render(request, 'results.html')
@ -47,6 +51,31 @@ def venue_details(request, venue_id):
return render(request, 'venue_details.html', context)
def create_venue(request):
if request.method != "POST":
return JsonResponse({"error", "Method not allowed"}, status=403)
test = request.POST
attributes = {
name: request.POST.get(name) for name in
[field.name for field in Venue._meta.get_fields()]
}
venue_id = request.POST.get("id")
if venue_id:
venue = Venue.objects.get(id=venue_id)
for k, v in attributes.items():
setattr(venue, k, v)
venue.save()
return JsonResponse({"success": "successful update"}, status=200)
del attributes["id"]
Venue.objects.create(**attributes)
return JsonResponse({"success": "successful creation"}, status=200)
def get_venue_details(request, venue_id: int):
try:

BIN
src/static/img/logo-horizontal.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
src/static/img/logo-icon-alt.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/static/img/logo-icon.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
src/static/img/logo-text-alt.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/static/img/logo-text.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

90
src/static/js/base.js
View File

@ -1,17 +1,77 @@
$(".sidebar-collapse-button").on("click", function () {
// $(".sidebar-collapse-button").on("click", function () {
const sidebar = $("#sidebar")
const content = $("#webContent")
const collapsed = !sidebar.hasClass("sidebar-enlarged");
// const sidebar = $("#sidebar")
// const content = $("#webContent")
// const collapsed = !sidebar.hasClass("sidebar-enlarged");
if (collapsed) {
sidebar.addClass("sidebar-enlarged");
sidebar.find(".nav-item").tooltip("disable");
content.addClass("webcontent-collapsed")
}
else {
sidebar.removeClass("sidebar-enlarged");
sidebar.find(".nav-item").tooltip("enable");
content.removeClass("webcontent-collapsed")
}
});
// if (collapsed) {
// sidebar.addClass("sidebar-enlarged");
// sidebar.find(".nav-item").tooltip("disable");
// content.addClass("webcontent-collapsed")
// }
// else {
// sidebar.removeClass("sidebar-enlarged");
// sidebar.find(".nav-item").tooltip("enable");
// content.removeClass("webcontent-collapsed")
// }
// });
$(document).ready(function() {
const getStoredTheme = () => localStorage.getItem("theme");
const setStoredTheme = theme => localStorage.setItem("theme", theme);
const getPreferredTheme = () => {
const storedTheme = getStoredTheme();
if (storedTheme) return storedTheme;
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
};
const setTheme = theme => {
if (theme === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
theme = "dark";
}
$("body").attr("data-bs-theme", theme);
};
const getThemeIcon = theme => {
return {
"auto": "diamond-half",
"light": "sun",
"dark": "moon-stars",
}[theme];
};
const showActiveTheme = (theme, focus = false) => {
const themeSwitcherButton = $("#themeSwitcher");
if (!themeSwitcherButton) {
warn("theme switcher button not found");
return;
}
// Swap the shown icon
const themeSwitcherIcon = $(themeSwitcherButton).find("i.bi");
const newIcon = getThemeIcon(theme);
themeSwitcherIcon.removeClass().addClass(`bi bi-${newIcon}`);
if (focus) themeSwitcherButton.focus();
};
$("#themeSwitcher").on("click", function() {
// 1. determine the current theme
const theme = getStoredTheme();
// 2. rotate to the next theme
const themes = ["light", "dark", "auto"];
const nextIndex = themes.indexOf(theme) + 1;
const nextTheme = nextIndex >= themes.length ? themes[0] : themes[nextIndex];
// 3. apply the new theme
setStoredTheme(nextTheme);
setTheme(nextTheme);
showActiveTheme(nextTheme);
});
var theme = getPreferredTheme();
setTheme(theme);
showActiveTheme(theme);
});

386
src/static/js/mainapp/_venues.js Normal file
View File

@ -0,0 +1,386 @@
var marker = null;
map = null;
originalMapCoords = [51.509865, -0.118092];
isGeocodingInProgress = false;
scriptData = document.currentScript.dataset;
const formControls = [
// Details Tab
{
id: "venueName",
validation: function (element) {
const value = element.val(); // FIELD IS VALID IF:
return (!element.attr("required") || value.trim() !== ""); // - element is not required OR not empty
},
errorMessage: function (element) {
const minlength = element.attr("minlength");
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";
}
},
{
id: "venueLatitude",
validation: function (element) {
const value = element.val();
return (!element.attr("required") || value.trim() !== "");
},
errorMessage: function (element) {
return "Enter the latitude of the venue";
}
},
{
id: "venueLongitude",
validation: function (element) {
const value = element.val();
return (!element.attr("required") || value.trim() !== "");
},
errorMessage: function (element) {
return "Enter the longitude of the venue";
}
},
];
$("#newVenueAddressTabBtn").on("shown.bs.tab", function() {
if (!map) {
var tileLayer = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: false,
})
map = L.map("locationMap", {
center: originalMapCoords,
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 = {
lat: $("#venueLatitude").val(),
lng: $("#venueLongitude").val()
};
if (venueCoords.lat && venueCoords.lng) {
map.setView(new L.LatLng(venueCoords.lat, venueCoords.lng), 15);
marker = L.marker(venueCoords).addTo(map);
}
map.on('click', function (e) {
if (isGeocodingInProgress) {
return;
}
toggleLoadingMap(true);
var coordinates = e.latlng;
// Create a point feature from the clicked coordinates
var clickedPoint = turf.point([coordinates.lng, coordinates.lat]);
// Define the UK boundary polygon coordinates (simplified for illustration)
var ukBoundary = turf.polygon([
[
[-8.647, 59.688], // Northwest corner
[-8.647, 49.784], // Southwest corner
[1.768, 49.784], // Southeast corner
[1.768, 59.688], // Northeast corner
[-8.647, 59.688] // Close the polygon
]
]);
if (marker) {
map.removeLayer(marker);
}
marker = L.marker(coordinates).addTo(map);
var isInsideUK = turf.booleanPointInPolygon(clickedPoint, ukBoundary);
if (!isInsideUK) {
alert("Please select a point within the UK");
map.removeLayer(marker);
toggleLoadingMap(false);
return false;
}
fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${coordinates.lat}&lon=${coordinates.lng}`)
.then(response => response.json())
.then(data => {
data.address; // check promise first
toggleLoadingMap(false);
$("#venueStreetAddress").val(data.address.road || '');
$("#venueCity").val(data.address.village || data.address.town || data.address.city);
$("#venueProvence").val(data.address.county || data.address.state_district);
$("#venuePostCode").val(data.address.postcode || '');
// $("#venueCountry").val(data.address.country || '');
$("#venueLatitude").val(coordinates.lat);
$("#venueLongitude").val(coordinates.lng);
});
});
setTimeout(function() {map.invalidateSize(false)}, 200)
});
function toggleLoadingMap(isLoading) {
isGeocodingInProgress = isLoading;
$("#saveVenue").prop("disabled", isLoading);
$("#venueStreetAddress").prop("disabled", isLoading)
$("#venueCity").prop("disabled", isLoading)
$("#venueProvence").prop("disabled", isLoading)
$("#venuePostCode").prop("disabled", isLoading)
// $("#venueCountry").prop("disabled", isLoading)
if (isLoading) {
$("#locationMapOverlay").show();
}
else {
$("#locationMapOverlay").hide();
}
}
$("#venueModal").on("hidden.bs.modal", function() {
// Reset the map if we are done
if (map) {
map.setView(originalMapCoords, 8);
if (marker) {
map.removeLayer(marker);
}
}
});
function openVenueModal(venue_id) {
$("#venueModal").data("venue-id", 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("");
$("#venueType").val("").change();
$("#venueDescription").val("");
$("#venueExtraNotes").val("");
$("#venueStreetAddress").val("");
$("#venueCity").val("");
$("#venueProvence").val("");
$("#venuePostCode").val("");
// $("#venueCountry").val("");
$("#venueLatitude").val("");
$("#venueLongitude").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);
$("#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);
$("#venueLatitude").val(venue.latitude);
$("#venueLongitude").val(venue.longitude);
$("#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_url);
},
error: function(error) {
alert("error: " + JSON.stringify(error));
}
});
}
new bootstrap.Modal("#venueModal").show();
}
$("#venueForm").on("submit", function(event) {
event.preventDefault();
const valid = validateVenue();
if (valid) saveVenue();
});
function validateVenue() {
// Reset the validation indicators and messages
$("#venueForm .form-control, #venueForm .form-select").removeClass("is-valid is-invalid");
$("#venueForm .invalid-feedback").text("");
var valid = true;
formControls.forEach(function(control) {
var element = $("#" + control.id);
if (!control.validation(element)) {
element.addClass("is-invalid");
element.siblings(".invalid-feedback").text(control.errorMessage(element));
valid = false;
}
else {
element.addClass("is-valid");
}
});
return valid;
}
function saveVenue() {
var data = {
name: $("#venueName").val(),
description: $("#venueDescription").val(),
extra_notes: "* placeholder *",
venue_type: $("#venueType").val(),
street_address: $("#venueStreetAddress").val(),
city: $("#venueCity").val(),
provence: $("#venueProvence").val(),
postal_code: $("#venuePostCode").val(),
country: $("#venueCountry").val(),
longitude: $("#venueLongitude").val(),
latitude: $("#venueLatitude").val(),
phone_number: $("#venuePhone").val(),
email_address: $("#venueEmail").val(),
website_url: $("#venueWebsite").val(),
twitter_url: $("#venueTwitter").val(),
facebook_url: $("#venueFacebook").val(),
instagram_url: $("#venueInstagram").val(),
csrfmiddlewaretoken: scriptData.csrfmiddlewaretoken,
active: 1
}
const venue_id = $("#venueModal").data("venue-id");
data.id = venue_id > -1 ? venue_id : null;
$.ajax({
url: `/venues/api/create`,
method: 'post',
dataType: 'json',
data: data,
success: function(response) {
window.location.reload();
},
error: function(error) {
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);
}
});

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

@ -1,72 +1,156 @@
// 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();
// showPage($("#newVenuePages .page:first"));
$("#detailsTab").click();
setTimeout(() => { $("#venueName").focus() }, 300);
new bootstrap.Modal("#venueModal").show();
}
$("#venueName").val("");
$("#venueDescription").val("");
$("#venueType").val("FISHERY").change();
function showPage(page) {
if (page.length === 0) return;
$("#newVenuePages .page").removeClass("active");
page.addClass("active");
$("#venueStreetAddress").val("");
$("#venueCity").val("");
$("#venueProvence").val("");
$("#venuePostCode").val("")
$("#venuePhone").val("");
$("#venueEmail").val("");
$("#venueWebsite").val("");
$("#venueTwitter").val("");
$("#venueFacebook").val("");
$("#venueInstagram").val("");
if (page.index() === 0) {
$("#newVenueBack").hide();
$("#newVenueNext").show();
$("#newVenueFinished").hide();
}
else if (page.index() + 1 === $("#newVenuePages .page").length) {
$("#newVenueBack").show();
$("#newVenueNext").hide();
$("#newVenueFinished").show();
}
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));
}
});
$("#newVenueBack").show();
$("#newVenueNext").show();
$("#newVenueFinished").hide();
}
}
new bootstrap.Modal("#venueModal").show();
}
$("#newVenueNext").on("click", function() {
const currentPage = $("#newVenuePages .page.active");
showPage(currentPage.next(".page"));
});
$("#newVenueBack").on("click", function() {
const currentPage = $("#newVenuePages .page.active");
showPage(currentPage.prev(".page"));
});
let map;
async function initMap() {
const position = { lat: 54.7023545, lng: -3.2765753 };
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
map = new Map($("#allLocationsMap")[0], {
zoom: 6,
restriction: {
latLngBounds: {
north: 58.804,
east: 2,
south: 49.864,
west: -8
},
strictBounds: true
},
center: position,
mapId: "ALL_LOCATIONS_MAP",
disableDefaultUI: true,
});
window.initAutocomplete();
// const marker = new AdvancedMarkerElement({
// map: map,
// position: position,
// title: "Test"
// });
// const infoWindow = new google.maps.InfoWindow();
// const infoWindowContent = $("#venueSearchResults")[0]
// infoWindow.setContent(infoWindowContent);
// autoComplete.addListener("place_changed", () => {
// // infoWindow.close();
// const place = autoComplete.getPlace();
// alert(JSON.stringify(place, null, 4));
// if (!place.geometry || !place.geometry.location) {
// alert("Couldn't find place");
// return;
// }
// });
}
let autocomplete;
function initAutocomplete() {
autocomplete = new google.maps.places.Autocomplete(
$("#venueSearch")[0],
{
componentRestrictions: { country: "gb" },
fields: ["address_components", "geometry"],
types: ["address"],
strictBounds: false
}
)
autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
if (!place.geometry || !place.geometry.location) {
alert("couldn't find this place");
return;
}
alert(JSON.stringify(place, null, 4));
fillAddress(place);
});
}
window.initAutocomplete = initAutocomplete;
function fillAddressControl(component, types, fieldSelector, component_attr="long_name") {
if (types.some(type => component.types.includes(type))) {
$(fieldSelector).val(component[component_attr]);
}
}
function fillAddress(place) {
// Clear the fields first, because sometimes we cant find data to replace them.
$("#venueSearchResults").show();
$("#venueSearchHelper").hide();
$("#addressContent input[readonly], #addressContent input[readonly='readonly']").val("");
place.address_components.forEach(component => {
fillAddressControl(component, ["street_number"], "#venueStreetNum");
fillAddressControl(component, ["route"], "#venueStreet");
fillAddressControl(component, ["postal_town", "locality"], "#venueCity");
fillAddressControl(component, ["administrative_area_level_2"], "#venueCounty");
fillAddressControl(component, ["postal_code"], "#venuePost");
fillAddressControl(component, ["country"], "#venueCountry");
});
$("#venueLat").val(place.geometry.location.lat);
$("#venueLng").val(place.geometry.location.lng);
// place.geometry.forEach(item => {
// fillAddressControl(item, ["lat"], "#venueLat", "lat");
// fillAddressControl(item, ["lng"], "#venueLng", "lng");
// });
}
$(document).ready(function() {
initMap();
});

195
src/static/scss/_base.scss Normal file
View File

@ -0,0 +1,195 @@
#webContent {
margin-left: 80px;
transition: margin 400ms ease-in-out;
&.webcontent-collapsed {
margin-left: 280px !important;
}
}
#sidebar {
color: white;
background-color: #04385c;
display: flex;
flex-direction: column;
flex-shrink: 0;
position: fixed;
height: 100%;
z-index: 3;
padding: 1rem 0;
transition: width 400ms ease-in-out;
overflow: hidden;
.sidebar-collapse-button {
display: inline-block;
color: white;
border: none;
background: none;
transition: transform 200ms ease-in-out;
}
&.sidebar-enlarged {
width: 280px !important;
.sidebar-collapse-button { transform: rotate(-180deg); }
a.nav-link {
text-align: start !important;
i.bi {
margin: 0 1rem 0 .5rem !important;
}
span.sidebar-item-text {
display: inline !important;
}
}
}
&:not(.sidebar-enlarged) {
width: 80px;
}
#sidebar-brand {
max-width: 120px;
align-self: center;
display: flex;
align-items: center;
color: inherit;
text-decoration: none;
padding: 0 .5rem;
}
ul.sidebar-items {
flex-direction: column;
margin-bottom: auto;
li.nav-item {
a.nav-link {
color: inherit;
transition: all 200ms;
text-align: center;
white-space: nowrap;
&:hover { background-color: rgba(0, 0, 0, 0.15); }
i.bi {
// transition: all 200ms ease-in-out;
// margin: 0 auto;
}
span.sidebar-item-text {
display: none;
}
}
}
}
}
// .card-badge-container {
// position: relative;
// .card-badge {
// aspect-ratio: 1 / 1;
// height: calc(100% + 20px);
// position: absolute;
// top: calc(-30% - 21px);
// left: -26px;
// background-color: #04385c;
// border-bottom: 30px;
// border-left: 30px;
// border-right: 30px;
// transform: rotate(45deg);
// // -webkit-transform: rotate(45deg);
// }
// }
#newVenueTabBtns {
// border-radius: 50rem;
overflow: hidden;
width: fit-content;
.nav-item > .nav-link {
// border-radius: 1rem !important;
color: #04385c;
&.active {
color: white;
background-color: #04385c;
}
}
}
.btn-facing-left {
border-top-left-radius: 1.2rem !important;
border-bottom-left-radius: 1.2rem !important;
border-top-right-radius: 0.8rem !important;
border-bottom-right-radius: 0.8rem !important;
}
.btn-facing-right {
border-top-left-radius: 0.8rem !important;
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;
}
#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;
}

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

@ -1,3 +1,166 @@
$primary-colour: #04385c;
$primary-hover-colour: #085c8d;
$danger-colour: #dc3545;
$danger-subtle-colour: #f8d7da;
$danger-emphasis-colour: #58151c;
$secondary-emphasis-colour:red;
$secondary-subtle-colour:red;
$border-color: #dee2e6;
$body-bg :#000;
.bg-primary {
background-color: $primary-colour !important;
}
.btn {
&.btn-primary {
border-color: $primary-colour;
background-color: $primary-colour;
transition: background-color 0.3s, border-color 0.3s;
&:hover {
border-color: $primary-hover-colour;
background-color: $primary-hover-colour;
}
}
&.btn-outline-primary {
color: $primary-colour;
border-color: $primary-colour;
transition: background-color 0.3s, border-color 0.3s;
&:hover {
color: white;
border-color: $primary-hover-colour;
background-color: $primary-hover-colour
}
.btn-check:checked + & {
border-color: $primary-colour;
background-color: $primary-colour;
}
}
}
.venue-description {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 100%
}
.nav-pills {
.nav-item {
.nav-link {
color: $primary-colour;
&.active {
color: white;
background-color: $primary-colour;
transition: background-color 0.3s;
}
}
}
}
.text-hover-primary {
transition: color 0.3s;
&:hover { color: $primary-colour !important; }
}
.tooltip-inner { text-align: left; }
// Width Fit Content
.w-fc { width: fit-content; }
.mw-fc { min-width: fit-content; }
.mxw-fc { max-width: fit-content; }
.hover-fill-secondary {
background-color: transparent;
transition: color 0.3s, background-color 0.3s;
&:hover {
color: $secondary-emphasis-colour;
background-color: $secondary-subtle-colour;
}
}
.hover-fill-danger {
background-color: transparent;
transition: color 0.3s, background-color 0.3s;
&:hover {
color: $danger-emphasis-colour;
background-color: $danger-subtle-colour;
}
}
.hover-fill-primary {
background-color: transparent;
transition: color 0.3s, background-color 0.3s;
&:hover {
color: white;
background-color: $primary-hover-colour;
}
}
.separator {
display: flex;
align-items: center;
text-align: center;
line-height: normal;
&::before,&::after {
content: '';
flex: 1;
border-bottom: 1px solid $border-color;
}
&:not(:empty)::before {
margin-right: .75em;
}
&:not(:empty)::after {
margin-left: .75em;
}
}
.fluid-hover-zoom {
transition:
.3s transform cubic-bezier(.155,1.105,.295,1.12),
.3s box-shadow,
.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
backface-visibility: hidden;
&:hover {
transform: scale(1.035);
}
}
.dropdown-menu {
.dropdown-item {
&:active {
color: black;
background-color: #f8f9fa;
}
}
}
.venue-textarea {
resize: none;
min-height: 152px !important;
}
#newVenuePages .page {
display: none;
&.active {
display: block !important;
}
}
#webContent {
margin-left: 80px;
transition: margin 400ms ease-in-out;
@ -103,45 +266,50 @@
}
.card-badge-container {
position: relative;
.card-badge {
width: 60px;
height: 60px;
position: absolute;
top: -30px;
right: -30px;
background-color: #04385c;
border-bottom: 30px;
border-left: 30px;
border-right: 30px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.pac-container {
z-index: 9999 !important;
}
#newVenueTabBtns {
// .card-badge-container {
// position: relative;
border-radius: 50rem;
overflow: hidden;
width: fit-content;
// .card-badge {
// aspect-ratio: 1 / 1;
.nav-item > .nav-link {
border-radius: 1rem !important;
// height: calc(100% + 20px);
color: #04385c;
// position: absolute;
// top: calc(-30% - 21px);
// left: -26px;
&.active {
color: white;
background-color: #04385c;
}
}
// background-color: #04385c;
// border-bottom: 30px;
// border-left: 30px;
// border-right: 30px;
}
// transform: rotate(45deg);
// // -webkit-transform: rotate(45deg);
// }
// }
// #newVenueTabBtns {
// // border-radius: 50rem;
// overflow: hidden;
// width: fit-content;
// .nav-item > .nav-link {
// // border-radius: 1rem !important;
// color: #04385c;
// &.active {
// color: white;
// background-color: #04385c;
// }
// }
// }
.btn-facing-left {
border-top-left-radius: 1.2rem !important;
@ -157,6 +325,102 @@
border-bottom-right-radius: 1.2rem !important;
}
// bootstrap md breakpoint
@media (min-width: 768px) {
#sidebarNavigation {
height: 100%;
}
}
@media (max-width: 768px) {
#venueModal .modal-content > .row:first {
height: 100%;
flex: 1;
}
#sidebarNavigation {
border-radius: 0.375rem;
overflow-y: hidden;
width: fit-content;
margin: 0.75rem auto;
.modal-sidebar .modal-sidebar-btn {
padding: 0.5rem 1rem !important;
width: fit-content !important;
}
}
}
#venueModal .modal-content {
min-height: 550px;
overflow: hidden;
.modal-sidebar {
display: flex;
height: 100%;
padding: 0;
.modal-sidebar-btn {
background-color: inherit;
text-align: inherit;
border: 0;
text-decoration: none;
color: inherit;
padding: 0.75rem 1.5rem;
display: block;
width: 100%;
transition: background-color 0.15s, color 0.15s;
&:hover {
background-color: $primary-hover-colour;
color: white;
}
// &:active {
// background-color: $primary-colour;
// color: white;
// }
&.active {
background-color: $primary-colour !important;
color: white !important;
}
}
}
.tab-content > .active {
display: flex;
}
}
#venueModal
.location-map {
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;
}
[data-bs-theme="dark"] .group-radio-btns label {
color: white !important;
}

101
src/templates/_base.html Normal file
View File

@ -0,0 +1,101 @@
{% load compress %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock title %}Angling Trust Results</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}" media="screen">
<link rel="stylesheet" type="text/css" href="{% static 'icons/font/bootstrap-icons.min.css' %}" media="screen">
<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}" media="screen">
<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}" media="screen">
{% compress css %}
<link rel="stylesheet" type="text/x-scss" href="{% static 'scss/base.scss' %}" media="screen">
{% endcompress %}
{% include 'fonts.html' %}
{% block style %}
{% endblock style %}
</head>
<body class="font-helvetica mw-100">
<div class="container">
<div class="d-flex align-content-stretch h-100 align-self-stretch">
<aside id="sidebar" class="shadow-lg font-raleway">
<a id="sidebar-brand" class="mb-3 mb-md-0" href="/">
<img src="{% static 'img/at-logo.png' %}" alt="" class="w-100">
</a>
<hr class="mx-2">
<ul class="sidebar-items nav nav-pills">
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Home">
<a class="nav-link py-3" href="/">
<i class="bi bi-house-fill fs-4"></i>
<span class="sidebar-item-text">Home</span>
</a>
</li>
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Anglers">
<a class="nav-link py-3" href="/anglers">
<i class="bi bi-people-fill fs-4"></i>
<span class="sidebar-item-text">Anglers</span>
</a>
</li>
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Venues and Waters">
<a class="nav-link py-3" href="/venues">
<i class="bi bi-droplet-fill fs-4"></i>
<span class="sidebar-item-text">Venues and Waters</span>
</a>
</li>
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Matches">
<a class="nav-link py-3" href="#">
<i class="bi bi-award-fill fs-4"></i>
<span class="sidebar-item-text">Matches</span>
</a>
</li>
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Scoreboard">
<a class="nav-link py-3" href="#">
<i class="bi bi-clipboard-data-fill fs-4"></i>
<span class="sidebar-item-text">Scoreboard</span>
</a>
</li>
</ul>
<ul class="sidebar-items nav nav-pills mb-0">
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Admin">
<a class="nav-link py-3" href="/admin">
<i class="bi bi-person-fill-gear fs-4"></i>
<span class="sidebar-item-text">Administration</span>
</a>
</li>
</ul>
<hr class="mx-2">
<button class="sidebar-collapse-button">
<i class="bi bi-chevron-double-right"></i>
</button>
</aside>
<div class="flex-grow-1 d-flex flex-column" id="webContent">
<div class="bg-body-secondary shadow-sm p-3 align-items-center" id="pageHeader" style="display: none;"> <!-- style="display: flex;" -->
<h1 class="h2 mb-0" id="headerTitle"></h1>
<div class="ms-auto">
{% block header_buttons %}
{% endblock header_buttons %}
</div>
</div>
<div class="flex-grow-1 d-flex overflow-auto">
{% block content %}
{% endblock content %}
</div>
</div>
</div>
</div>
<script src="{% static 'js/jquery-3.6.3.min.js' %}"></script>
<script src="{% static 'js/jquery.validate.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/custom.js' %}"></script>
<script src="{% static 'js/base.js' %}"></script>
{% block scripts %}
{% endblock scripts %}
</body>
</html>

164
src/templates/base.html
View File

@ -1,3 +1,4 @@
{% load static %}
{% load compress %}
<!DOCTYPE html>
<html lang="en">
@ -6,11 +7,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock title %}Angling Trust Results</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}" media="screen">
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}" media="screen">
<link rel="stylesheet" type="text/css" href="{% static 'icons/font/bootstrap-icons.min.css' %}" media="screen">
<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}" media="screen">
<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}" media="screen">
{% compress css %}
<link rel="stylesheet" type="text/x-scss" href="{% static 'scss/base.scss' %}" media="screen">
{% endcompress %}
@ -18,80 +17,113 @@
{% block style %}
{% endblock style %}
</head>
<body class="font-helvetica mw-100">
<body class="overflow-y-auto font-montserrat bg-body-tertiary">
<div class="d-flex align-content-stretch h-100 align-self-stretch">
<aside id="sidebar" class="shadow-lg font-raleway">
<a id="sidebar-brand" class="mb-3 mb-md-0" href="/">
<img src="{% static 'img/at-logo.png' %}" alt="" class="w-100">
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark" style="background-color: #04385c;">
<div class="container-fluid">
<a href="#" class="navbar-brand mx-auto ms-sm-4 me-sm-5 user-select-none">
<img src="{% static 'img/logo-icon-alt.webp' %}" class="me-1" height="45px" alt="Brand Logo">
<img src="{% static 'img/logo-text-alt.webp' %}" height="40px" alt="Brand Logo">
</a>
<hr class="mx-2">
<ul class="sidebar-items nav nav-pills">
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Home">
<a class="nav-link py-3" href="/">
<i class="bi bi-house-fill fs-4"></i>
<span class="sidebar-item-text">Home</span>
</a>
</li>
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Anglers">
<a class="nav-link py-3" href="/anglers">
<i class="bi bi-people-fill fs-4"></i>
<span class="sidebar-item-text">Anglers</span>
</a>
</li>
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Venues and Waters">
<a class="nav-link py-3" href="/venues">
<i class="bi bi-droplet-fill fs-4"></i>
<span class="sidebar-item-text">Venues and Waters</span>
</a>
</li>
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Matches">
<a class="nav-link py-3" href="#">
<i class="bi bi-award-fill fs-4"></i>
<span class="sidebar-item-text">Matches</span>
</a>
</li>
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Scoreboard">
<a class="nav-link py-3" href="#">
<i class="bi bi-clipboard-data-fill fs-4"></i>
<span class="sidebar-item-text">Scoreboard</span>
</a>
</li>
</ul>
<ul class="sidebar-items nav nav-pills mb-0">
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Admin">
<a class="nav-link py-3" href="/admin">
<i class="bi bi-person-fill-gear fs-4"></i>
<span class="sidebar-item-text">Administration</span>
</a>
</li>
</ul>
<hr class="mx-2">
<button class="sidebar-collapse-button">
<i class="bi bi-chevron-double-right"></i>
<button class="navbar-toggler mx-auto my-3 my-sm-0 me-sm-4" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
</aside>
<div class="flex-grow-1 d-flex flex-column" id="webContent">
<div class="bg-body-secondary shadow-sm p-3 align-items-center" id="pageHeader" style="display: none;"> <!-- style="display: flex;" -->
<h1 class="h2 mb-0" id="headerTitle"></h1>
<div class="ms-auto">
{% block header_buttons %}
{% endblock header_buttons %}
</div>
</div>
<div class="flex-grow-1 d-flex overflow-auto">
{% block content %}
{% endblock content %}
<div id="navbarCollapse" class="collapse navbar-collapse mx-4 mx-lg-0 mt-3 mt-lg-0">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 fw-bold small">
<li class="nav-item">
<a href="#" class="nav-link pe-3">Dashboard</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link pe-3 active">Venues &amp; Waters</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link pe-3">Other Page</a>
</li>
</ul>
<hr class="d-lg-none">
<ul class="navbar-nav mb-2 mb-lg-0 me-0 me-lg-4 flex-row flex-wrap">
<li class="nav-item mb-2 mb-lg-0">
<button id="themeSwitcher" class="btn btn-outline-light border-0 border-secondary-subtle d-flex align-items-center justify-content-center me-3">
<i class="bi"></i>
<span class="d-lg-none ms-2">Theme</span>
</button>
</li>
<li class="nav-item mb-2 mb-lg-0 dropdown position-relative">
<button class="btn btn-outline-light border-0 border-secondary-subtle d-flex align-items-center justify-content-center me-3" data-bs-toggle="dropdown">
<i class="bi bi-bell"></i>
<span class="d-lg-none ms-2">Notifications</span>
</button>
<ul class="dropdown-menu dropdown-menu-end position-absolute me-3 p-3" style="min-width: 15rem;">
<li class="text-center text-body-secondary small">
There are no notifications right now
</li>
</ul>
</li>
<li class="nav-item mb-2 mb-lg-0 ms-auto ms-lg-0 dropdown position-relative">
<button class="btn btn-outline-light rounded-pill border-secondary-subtle d-flex align-items-center justify-content-center me-3" data-bs-toggle="dropdown">
<i class="bi bi-person me-2"></i>
<span class="d-lg-none me-2">Administrator</span>
<i class="bi bi-chevron-down"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end position-absolute me-3">
<li>
<a href="" class="dropdown-item">
<i class="bi bi-gear me-2"></i>
Settings
</a>
</li>
<li>
<a href="" class="dropdown-item text-danger">
<i class="bi bi-box-arrow-right me-2"></i>
Logout
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
{% block content %}
{% endblock %}
<footer class="bg-dark text-light">
<div class="container py-5">
<div class="row">
<div class="col-lg-4">
<h3>
<img src="{% static 'img/at-logo.png' %}" width="200px" alt="">
</h3>
</div>
<div class="col-lg-4">
<h5>Links</h5>
<ul class="list-unstyled ps-3">
<li>
<a href="#" class="text-reset text-decoration-none">Dashboard</a>
</li>
<li>
<a href="#" class="text-reset text-decoration-none">Venues &amp; Waters</a>
</li>
<li>
<a href="#" class="text-reset text-decoration-none">Other</a>
</li>
</ul>
</div>
<div class="col-lg-4">
<h5>Contact</h5>
<ul>
placeholder
</ul>
</div>
</div>
</div>
</footer>
<script src="{% static 'js/jquery-3.6.3.min.js' %}"></script>
<script src="{% static 'js/jquery.validate.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/custom.js' %}"></script>
<!-- <script src="{% static 'js/custom.js' %}"></script> -->
<script src="{% static 'js/base.js' %}"></script>
{% block scripts %}
{% endblock scripts %}

12
src/templates/fonts.html
View File

@ -1,6 +1,18 @@
{% load static %}
<style type="text/css">
@font-face {
font-family: "Montserrat";
src: url("{% static 'fonts/Montserrat/ExtraBold.ttf' %}") format("truetype");
font-weight: bolder;
font-style: normal;
}
@font-face {
font-family: "Montserrat";
src: url("{% static 'fonts/Montserrat/Bold.ttf' %}") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Montserrat";
src: url("{% static 'fonts/Montserrat/Regular.ttf' %}") format("truetype");