5fc0128c7c
I've added the model for the Venues, and implemented a basic system for displaying them in the venues and waters page.
182 lines
8.2 KiB
HTML
182 lines
8.2 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}
|
|
Venues and Waters |
|
|
{% endblock title %}
|
|
|
|
{% block style %}
|
|
{% endblock style %}
|
|
|
|
{% block header_buttons %}
|
|
<!-- <a href="/" class="btn btn-company d-flex align-items-center">
|
|
<i class="bi bi-plus-lg"></i>
|
|
<span class="ms-2">Add Venue and Waters</span>
|
|
</a> -->
|
|
{% endblock header_buttons %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="d-flex flex-column flex-grow-1">
|
|
|
|
<div class="m-4 mb-0 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">
|
|
<i class="bi bi-sort-up"></i>
|
|
</button>
|
|
<input type="search" name="search" id="search" class="form-control border-secondary-subtle shadow-none" placeholder="Search Venues and Waters">
|
|
<button type="button" class="btn btn-outline-company border-secondary-subtle rounded-end" id="searchButton"><i class="bi bi-search"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-4">
|
|
<div class="input-group d-flex justify-content-md-end">
|
|
<button class="btn border-secondary-subtle btn-outline-company me-4 rounded-end" id="addVenue" data-bs-toggle="modal" data-bs-target="#venueModal" data-bs-toggle="tooltip" data-bs-title="Add Venues and Waters" data-bs-custom-class="light-tooltip">
|
|
<i class="bi bi-plus-lg"></i>
|
|
</button>
|
|
<button class="btn border-secondary-subtle btn-outline-company rounded-start" id="ContractView" data-bs-toggle="tooltip" data-bs-title="List View" data-bs-custom-class="light-tooltip">
|
|
<i class="bi bi-list-task"></i>
|
|
</button>
|
|
<button class="btn border-secondary-subtle btn-outline-company" id="expandView" data-bs-toggle="tooltip" data-bs-title="Grid View" data-bs-custom-class="light-tooltip">
|
|
<i class="bi bi-grid"></i>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mx-4 my-2">
|
|
<div class="col-xl-7">
|
|
<hr>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="m-4 mt-0 row">
|
|
|
|
<!-- <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">
|
|
<div class="card-badge-container">
|
|
<div class="card-badge"></div>
|
|
</div>
|
|
<div class="card-body d-flex">
|
|
<div class="d-flex flex-column">
|
|
<h5 class="card-title text-company mb-0">Generic Location Name</h5>
|
|
<div class="fw-bold mb-3">
|
|
<p class="mb-0">Private</p>
|
|
</div>
|
|
<div class="text-body-secondary mb-3">
|
|
<p class="mb-0">4 Branshaw Grove</p>
|
|
<p class="mb-0">Newquay, Cornwall</p>
|
|
<p class="mb-0">TR7 1LN</p>
|
|
</div>
|
|
<div class="text-body-secondary mb-3">
|
|
<p class="mb-0">07796 081958</p>
|
|
<p class="mb-0">branshaw.grove@mail.co.uk</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
{% 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">
|
|
<div class="card-badge-container">
|
|
<div class="card-badge"></div>
|
|
</div>
|
|
<div class="card-body d-flex">
|
|
<div class="d-flex flex-column">
|
|
<h5 class="card-title text-company mb-0">{{ venue.name }}</h5>
|
|
<div class="fw-bold mb-3">
|
|
<p class="mb-0">{{ venue.type }}</p>
|
|
</div>
|
|
<div class="text-body-secondary mb-3">
|
|
<p class="mb-0">{{ venue.street_address }}</p>
|
|
<p class="mb-0">{{ venue.city }}, {{ venue.provence }}</p>
|
|
<p class="mb-0">{{ venue.postal_code }}</p>
|
|
</div>
|
|
<div class="text-body-secondary mb-3">
|
|
<p class="mb-0">{{ venue.phone_number }}</p>
|
|
<p class="mb-0">{{ venue.email_address }}</p>
|
|
</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">
|
|
<div class="modal-body p-0">
|
|
<div class="card-badge-container">
|
|
<div class="card-badge"></div>
|
|
</div>
|
|
<div class="p-3">
|
|
<h5 class="card-title text-company mb-4">New Venue and Waters</h5>
|
|
<div class="row g-3 align-items-center mb-3">
|
|
<div class="col-6">
|
|
<label for="" class="form-label">Name</label>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="" class="form-label">Type</label>
|
|
<select name="" id="" class="form-select">
|
|
<option value="-1">placeholder</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="" class="form-label">Description</label>
|
|
<textarea type="text" class="form-control" rows="3"></textarea>
|
|
</div>
|
|
<hr>
|
|
<div class="mb-3">
|
|
<label for="" class="form-label">Street Address</label>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
<div class="row g-3 align-items-center mb-3">
|
|
<div class="col-6">
|
|
<label for="" class="form-label">City/Town</label>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="" class="form-label">Provence</label>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="" class="form-label">Postal Code</label>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 align-items-center">
|
|
<div class="col-6">
|
|
<label for="" class="form-label">Phone Number</label>
|
|
<input type="tel" class="form-control">
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="" class="form-label">Email Address</label>
|
|
<input type="email" class="form-control">
|
|
</div>
|
|
<div class="col-12">
|
|
<label for="" class="form-label">Website Address</label>
|
|
<input type="url" class="form-control">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary px-3" data-dismiss="modal">Cancel</button>
|
|
<button class="btn btn-company" data-dismiss="modal">Save New</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock content %}
|
|
|
|
{% block scripts %}
|
|
{% endblock scripts %}
|