2024-11-05 11:48:32 +00:00

482 lines
31 KiB
HTML

{% extends "base.html" %}
{% load static %}
{% block title %}
Venues |
{% 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 %}
{% endblock header_buttons %}
{% 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" onclick="viewVenueModal({{ venue.id }})">
<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" onclick="deleteVenueBtn({{ venue.id }});">
<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>
<form id="venueForm" class="flex-md-grow-1 d-flex" novalidate>
<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 name="venueDesc" id="venueDesc" class="form-control" style="height: 150px; resize: none;" placeholder=""></textarea>
<label for="venueDesc" 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" value="FISHERY">
<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" value="CLUB">
<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" value="PRIVATE">
<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="venueFacebook" 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">
<h5 class="mb-3">Preview:</h5>
<div class="row">
<div class="col-12">
<div class="form-floating mb-3 venue-preview-field">
<input type="text" class="form-control-plaintext" placeholder="" readonly data-linked-field="#venueName">
<label class="form-label">Venue Name</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3 venue-preview-field">
<input type="text" class="form-control-plaintext" placeholder="" readonly data-linked-field="#venueDesc">
<label class="form-label">Description</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3 venue-preview-field">
<input type="text" class="form-control-plaintext" placeholder="" readonly data-linked-field="#venueType">
<label 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 id="submitVenueBtn" class="btn btn-primary" type="submit">Save Changes</button>
</div>
</div>
</div>
</div>
</div>
</form>
</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>
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 %}+