Rene
/
AD


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
							{% load static %}
{% load custom_tags %}
{% load bootstrap5 %}

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="120; URL=/public/" >
    <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;
            font-weight: bold;
            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 */
            padding: 4px; /* Reduce padding to decrease row height */
            line-height: 1.2; /* Adjust line height to decrease row height */
        }
        .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="/public/" class="btn btn-primary">Aktuelle Woche</a>
        <a href="/login/" class="btn btn-secondary">Login</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 }}</h4>
        <div class="table-responsive">
            <table class="table table-bordered table-hover w-100">
                <thead class="table-dark">
                    <tr>
                        <th class="employee-name">Veranstaltungen</th>
                        {% for day, date in days_with_dates %}
                        <th class="day-name">{{ day }} {{ date }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for location, events in events_by_location.items %}
                    <tr>
                        <td class="employee-name">{{ location.name }}</td>
                        {% for day, date in days_with_dates %}
                            {% with event=events|get_item:forloop.counter0 %}
                                {% if event == None %}
                                    <td class="shift-none"></td>
                                {% else %}
                                    <td class="shift-none" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="Name: {{ event.name }}<br> Location: {{ event.location }}<br> CVD: {{ event.cvd }}<br> CVT: {{ event.cvt }}">
                                            {% if event.name %}
                                                {{ event.name }}
                                            {% else %}
                                                F
                                            {% endif %}
                                    </td>
                                {% endif %}
                            {% endwith %}
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
                <tbody>
                    <tr class="table-dark">
                        <th class="employee-name">Mitarbeiter</th>
                        {% for day, date in days_with_dates %}
                        <th class="day-name">{{ day }} {{ date }}</th>
                        {% endfor %}
                    </tr>
                    {% 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">
                                        F
                                    </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 %}
                                    ">
                                            {% if shift.start and shift.end %}
                                                {{ shift.start|time:"H:i" }} - {{ shift.end|time:"H:i" }}
                                            {% else %}
                                                {{ shift.get_shifttype_display }}
                                            {% endif %}
                                    </td>
                                {% endif %}
                            {% endwith %}
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% bootstrap_javascript %}
    <script>
        // Initialize all tooltips on the page
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    </script>
</body>
</html>