Rene
/
AD


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
							{% load static %}
{% load custom_tags %}
{% load bootstrap5 %}

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Schichten der aktuellen Woche</title>
    <link rel="icon" href="{% static 'favicon.png' %}">
    {% bootstrap_css %}
    <style>
        body {
            font-family: Tahoma, sans-serif;
            margin: 0;
            padding: 0;
            font-size: 10px; /* Set the base font size */
        }
        .shift-none {
            background-color: white !important;
            text-align: center;
        }
        .shift-vacation {
            background-color: blue !important;
            color: white !important;
            text-align: center;
        }
        .shift-sick {
            background-color: yellow !important;
            text-align: center;
        }
        .shift-other {
            background-color: gray !important;
            color: white !important;
            text-align: center;
        }
        .buttons-container {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
        }
        .container-fluid {
            padding-top: 10px; /* Reduce the padding to remove extra space */
        }
        a {
            color: black;
            text-decoration: none;
        }
        a:hover {
            color: black;
        }
        .employee-name {
            text-align: left;
            width: 150px; /* Set a fixed width for the employee column */
        }
        .day-name {
            text-align: center;
            width: 150px; /* Set a fixed width for the employee column */
        }
        .table th, .table td {
            vertical-align: middle;
            width: 100px; /* Set a fixed width for all other columns */
        }
        .custom-heading {
            margin: 0; /* Remove margin to eliminate extra space */
        }
        @media print {
            .buttons-container {
                display: none; /* Hide the buttons when printing */
            }
        }
    </style>
</head>
<body>
    <div class="buttons-container">
        <a href="?start_date={{ previous_week }}" class="btn btn-primary">Eine Woche zurück</a>
        <a href="?start_date={{ next_week }}" class="btn btn-primary">Eine Woche vorwärts</a>
    </div>
    <div class="container-fluid">
        <h4 class="custom-heading">Dienstplan für KW {{ calendar_week }} - {{ start_of_week }} bis {{ end_of_week }}</h4>
        <div class="table-responsive">
            <table class="table table-bordered table-hover w-100">
                <thead class="table-dark">
                    <tr>
                        <th class="employee-name">Employee</th>
                        {% for day, date in days_with_dates %}
                        <th class="day-name">{{ day }} {{ date }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for employee, shifts in shifts_by_employee.items %}
                    <tr>
                        <td class="employee-name">{{ employee.name }}</td>
                        {% for day, date in days_with_dates %}
                            {% with shift=shifts|get_item:forloop.counter0 %}
                                {% if shift == None %}
                                    <td class="shift-none">
                                        <a href="{% url 'create_multiple_shifts' %}?date={{ date }}">F</a>
                                    </td>
                                {% else %}
                                    <td class="
                                        {% if shift.start and shift.end %}
                                            shift-none
                                        {% elif shift.shifttype == 'U' %}
                                            shift-vacation
                                        {% elif shift.shifttype == 'K' %}
                                            shift-sick
                                        {% else %}
                                            shift-other
                                        {% endif %}
                                    ">
                                        <a href="{% url 'edit_shift' pk=shift.id %}">
                                            {% if shift.start and shift.end %}
                                                {{ shift.start|time:"H:i" }} - {{ shift.end|time:"H:i" }}
                                            {% else %}
                                                {{ shift.get_shifttype_display }}
                                            {% endif %}
                                        </a>
                                    </td>
                                {% endif %}
                            {% endwith %}
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% bootstrap_javascript %}
</body>
</html>