193 lines
9.2 KiB
HTML
193 lines
9.2 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% load static %}
|
|
|
|
{% block title %}Verleih{% endblock %}
|
|
|
|
{% block content %}
|
|
<main class="container mx-auto w-full px-4 my-8 flex-1">
|
|
<h1 class="page-title">Verleih</h1>
|
|
|
|
<section class="text-center my-6">
|
|
<p class="my-6 text-gray-900 dark:text-gray-100">
|
|
Willkommen bei unserem Verleih!
|
|
</p>
|
|
|
|
{% if user.is_authenticated %}
|
|
<a href="{% url 'rental:calendar' %}" class="block btn btn-secondary max-w-xs mx-auto sm:w-max sm:mr-0 sm:ml-auto my-6"><i class="fa-solid fa-calendar-days mr-2"></i>Verleih-Kalender abonnieren</a>
|
|
{% endif %}
|
|
|
|
<a href="{% url 'rental:rental_create' %}" class="page-subtitle block btn-small btn-primary max-w-xs mx-auto sm:w-max sm:mr-0 sm:ml-auto">
|
|
<i class="fa-solid fa-plus mr-1"></i> Verleih anfragen
|
|
</a>
|
|
</section>
|
|
|
|
<form action="" method="GET">
|
|
<section>
|
|
<div class="grid grid-cols-1 gap-x-6 gap-y-6 lg:grid-cols-6 sm:grid-cols-3 pb-6">
|
|
<button
|
|
id="filterDropdownButton"
|
|
data-dropdown-toggle="filterDropdown"
|
|
class="w-full md:w-auto flex items-center justify-center py-2 px-4 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
|
|
type="button"
|
|
>
|
|
<i class="h-4 w-4 mr-2 fa-solid fa-filter"></i>
|
|
Filter
|
|
<i class="-mr-1 ml-1.5 mt-1 w-5 h-5 fa-solid fa-chevron-down"></i>
|
|
</button>
|
|
<div id="filterDropdown" class="z-10 hidden w-56 p-3 bg-white rounded-lg shadow dark:bg-gray-700">
|
|
<h6 class="mb-3 text-sm font-medium text-gray-900 dark:text-white">Verleihgegenstände</h6>
|
|
<ul class="space-y-2 text-sm" aria-labelledby="filterDropdownButton">
|
|
{% for item in rentalitems %}
|
|
<li class="flex items-center">
|
|
<input
|
|
id="item_{{ item.id }}"
|
|
type="checkbox"
|
|
name="rentalitems"
|
|
value="{{ item.name }}"
|
|
{% for key, value in rentalitem_filters.items %}
|
|
{% if key == "rentalitems" and item.name in value %}
|
|
checked
|
|
{% endif %}
|
|
{% endfor %}
|
|
class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
|
|
>
|
|
<label for="item_{{ item.id }}" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">{{ item.name }}</label>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<button type="submit" class="block btn btn-primary" name="" value="Submit">Filter anwenden</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="text-center">
|
|
<div class="wrapper mx-auto bg-white rounded shadow max-w-full">
|
|
<div class="header flex justify-between border-b p-2">
|
|
<span class="text-lg font-bold">{{ month|date:'F Y' }}</span>
|
|
|
|
<div class="buttons">
|
|
<button type="submit" class="p-1" name="month" value="{{ prev_month|date:'Y-m' }}">
|
|
<i class="fa-regular fa-circle-left"></i>
|
|
</button>
|
|
<button type="submit" class="p-1" name="month" value="{{ next_month|date:'Y-m' }}">
|
|
<i class="fa-regular fa-circle-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="table-fixed w-full mx-auto">
|
|
<thead>
|
|
<tr>
|
|
<th class="p-2 border-r h-10 xl:text-sm text-xs">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Monday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Mon</span>
|
|
</th>
|
|
<th class="p-2 border-r h-10 xl:text-sm text-xs">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Tuesday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Tue</span>
|
|
</th>
|
|
<th class="p-2 border-r h-10 xl:text-sm text-xs">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Wednesday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Wed</span>
|
|
</th>
|
|
<th class="p-2 border-r h-10 xl:text-sm text-xs">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Thursday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Thu</span>
|
|
</th>
|
|
<th class="p-2 border-r h-10 xl:text-sm text-xs">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Friday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Fri</span>
|
|
</th>
|
|
<th class="p-2 border-r h-10 xl:text-sm text-xs">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Saturday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Sat</span>
|
|
</th>
|
|
<th class="p-2 border-r h-10 xl:text-sm text-xs">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Sunday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Sun</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{% for day in days_of_prev_month %}
|
|
{% if day.weekday == 0 %}
|
|
<tr class="text-center h-20">
|
|
{% endif %}
|
|
|
|
<td class="border p-1 h-40">
|
|
<div class="flex flex-col h-40">
|
|
<div class="top h-5 w-full">
|
|
<span class="text-gray-500 text-sm">{{ day.day }}</span>
|
|
</div>
|
|
<div class="bottom flex-grow h-30 py-1 w-full"></div>
|
|
</div>
|
|
</td>
|
|
{% endfor %}
|
|
|
|
{% for day in days_of_month %}
|
|
{% if day.weekday == 0 %}
|
|
<tr class="text-center h-20">
|
|
{% endif %}
|
|
|
|
<td class="border p-1 h-40">
|
|
<div class="flex flex-col h-40">
|
|
<div class="top h-5 w-full">
|
|
{% if day == today %}
|
|
<span class="text-gray-100 dark:text-gray-900 border-2 border-blue-900 dark:border-blue-100 rounded-full bg-blue-900 dark:bg-blue-100">{{ day.day }}</span>
|
|
{% else %}
|
|
<span class="text-gray-900 dark:text-gray-100">{{ day.day }}</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% for key, names in rental_dict.items %}
|
|
{% if key == day %}
|
|
{% for name in names %}
|
|
<div class="bottom h-30 py-1 w-full">
|
|
<div class="event bg-purple-400 text-white rounded p-1 text-sm">
|
|
<span class="event-name whitespace-nowrap 2xl:block xl:hidden lg:hidden md:hidden sm:hidden hidden">{{ name|truncatechars:26 }}</span>
|
|
<span class="event-name whitespace-nowrap 2xl:hidden xl:block lg:hidden md:hidden sm:hidden hidden">{{ name|truncatechars:20 }}</span>
|
|
<span class="event-name whitespace-nowrap 2xl:hidden xl:hidden lg:block md:hidden sm:hidden hidden">{{ name|truncatechars:15 }}</span>
|
|
<span class="event-name whitespace-nowrap 2xl:hidden xl:hidden lg:hidden md:block sm:hidden hidden">{{ name|truncatechars:10 }}</span>
|
|
<span class="event-name whitespace-nowrap 2xl:hidden xl:hidden lg:hidden md:hidden sm:block hidden">{{ name|truncatechars:6 }}</span>
|
|
<span class="event-name whitespace-nowrap 2xl:hidden xl:hidden lg:hidden md:hidden sm:hidden block">{{ name|truncatechars:3 }}</span>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="bottom flex-grow h-30 py-1 w-full"></div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</td>
|
|
|
|
{% if day.weekday == 6 %}
|
|
</tr>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% for day in days_of_next_month %}
|
|
<td class="border p-1 h-40">
|
|
<div class="flex flex-col h-40">
|
|
<div class="top h-5 w-full">
|
|
<span class="text-gray-500 text-sm">{{ day.day }}</span>
|
|
</div>
|
|
<div class="bottom flex-grow h-30 py-1 w-full"></div>
|
|
</div>
|
|
</td>
|
|
|
|
{% if day.weekday == 6 %}
|
|
</tr>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</form>
|
|
</main>
|
|
{% endblock content %}
|