public.html 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. {% load static %}
  2. {% load custom_tags %}
  3. {% load bootstrap5 %}
  4. <!DOCTYPE html>
  5. <html lang="de">
  6. <head>
  7. <meta charset="UTF-8">
  8. <meta http-equiv="refresh" content="120; URL=/" >
  9. <title>Schichten der aktuellen Woche</title>
  10. <link rel="icon" href="{% static 'favicon.png' %}">
  11. {% bootstrap_css %}
  12. <style>
  13. body {
  14. font-family: Tahoma, sans-serif;
  15. margin: 0;
  16. padding: 0;
  17. font-size: 10px; /* Set the base font size */
  18. }
  19. .shift-none {
  20. background-color: white !important;
  21. text-align: center;
  22. }
  23. .shift-vacation {
  24. background-color: blue !important;
  25. color: white !important;
  26. text-align: center;
  27. }
  28. .shift-sick {
  29. background-color: yellow !important;
  30. text-align: center;
  31. }
  32. .shift-other {
  33. background-color: gray !important;
  34. color: white !important;
  35. text-align: center;
  36. }
  37. .buttons-container {
  38. display: flex;
  39. justify-content: space-between;
  40. padding: 10px;
  41. background-color: #f8f9fa;
  42. border-bottom: 1px solid #dee2e6;
  43. }
  44. .container-fluid {
  45. padding-top: 10px; /* Reduce the padding to remove extra space */
  46. }
  47. a {
  48. color: black;
  49. text-decoration: none;
  50. }
  51. a:hover {
  52. color: black;
  53. }
  54. .employee-name {
  55. text-align: left;
  56. font-weight: bold;
  57. width: 150px; /* Set a fixed width for the employee column */
  58. }
  59. .day-name {
  60. text-align: center;
  61. width: 150px; /* Set a fixed width for the employee column */
  62. }
  63. .table th, .table td {
  64. vertical-align: middle;
  65. width: 100px; /* Set a fixed width for all other columns */
  66. padding: 4px; /* Reduce padding to decrease row height */
  67. line-height: 1.2; /* Adjust line height to decrease row height */
  68. }
  69. .custom-heading {
  70. margin: 0; /* Remove margin to eliminate extra space */
  71. }
  72. @media print {
  73. .buttons-container {
  74. display: none; /* Hide the buttons when printing */
  75. }
  76. }
  77. </style>
  78. </head>
  79. <body>
  80. <div class="buttons-container">
  81. <a href="?start_date={{ previous_week }}" class="btn btn-primary">Eine Woche zurück</a>
  82. <a href="/public/" class="btn btn-primary">Aktuelle Woche</a>
  83. <a href="/login/" class="btn btn-secondary">Login</a>
  84. <a href="?start_date={{ next_week }}" class="btn btn-primary">Eine Woche vorwärts</a>
  85. </div>
  86. <div class="container-fluid">
  87. <h4 class="custom-heading">Dienstplan für KW {{ calendar_week }}</h4>
  88. <div class="table-responsive">
  89. <table class="table table-bordered table-striped table-hover w-100">
  90. <thead class="table-dark">
  91. <tr>
  92. <th class="employee-name">Veranstaltungen</th>
  93. {% for day, date in days_with_dates %}
  94. <th class="day-name">{{ day }} {{ date }}</th>
  95. {% endfor %}
  96. </tr>
  97. </thead>
  98. <tbody>
  99. {% for location, events in events_by_location.items %}
  100. <tr>
  101. <td class="employee-name">{{ location.name }}</td>
  102. {% for day, date in days_with_dates %}
  103. {% with event=events|get_item:forloop.counter0 %}
  104. {% if event == None %}
  105. <td class="shift-none"></td>
  106. {% else %}
  107. <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 }}">
  108. {% if event.name %}
  109. {{ event.name }}
  110. {% else %}
  111. F
  112. {% endif %}
  113. </td>
  114. {% endif %}
  115. {% endwith %}
  116. {% endfor %}
  117. </tr>
  118. {% endfor %}
  119. <tr>
  120. <td class="employee-name">Helfer</td>
  121. {% for day in range_days %}
  122. {% if helpers_by_date|default_if_none:None %}
  123. {% if helpers_by_date|get_item:day %}
  124. {% with helper=helpers_by_date|get_item:day %}
  125. <td class="shift-none" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="Benötigt: {{ helper.ben }}<br> Bestellt: {{ helper.best }}<br> Info: {{ helper.info }}">
  126. {{ helper.ben }}/{{ helper.best }}
  127. </td>
  128. {% endwith %}
  129. {% else %}
  130. <td class="shift-none" >--</td>
  131. {% endif %}
  132. {% else %}
  133. <td class="shift-none" >--</td>
  134. {% endif %}
  135. {% endfor %}
  136. </tr>
  137. </tbody>
  138. <tbody>
  139. <tr class="table-dark">
  140. <th class="employee-name">Mitarbeiter</th>
  141. {% for day, date in days_with_dates %}
  142. <th class="day-name">{{ day }} {{ date }}</th>
  143. {% endfor %}
  144. </tr>
  145. {% for employee, shifts in shifts_by_employee.items %}
  146. <tr>
  147. <td class="employee-name">{{ employee.name }}</td>
  148. {% for day, date in days_with_dates %}
  149. {% with shift=shifts|get_item:forloop.counter0 %}
  150. {% if shift == None %}
  151. <td class="shift-none">
  152. F
  153. </td>
  154. {% else %}
  155. <td class="
  156. {% if shift.start and shift.end %}
  157. shift-none
  158. {% elif shift.shifttype == 'U' %}
  159. shift-vacation
  160. {% elif shift.shifttype == 'K' %}
  161. shift-sick
  162. {% else %}
  163. shift-other
  164. {% endif %}
  165. ">
  166. {% if shift.start and shift.end %}
  167. {{ shift.start|time:"H:i" }} - {{ shift.end|time:"H:i" }}
  168. {% else %}
  169. {{ shift.get_shifttype_display }}
  170. {% endif %}
  171. </td>
  172. {% endif %}
  173. {% endwith %}
  174. {% endfor %}
  175. </tr>
  176. {% endfor %}
  177. </tbody>
  178. </table>
  179. </div>
  180. </div>
  181. {% bootstrap_javascript %}
  182. <script>
  183. // Initialize all tooltips on the page
  184. var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  185. var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  186. return new bootstrap.Tooltip(tooltipTriggerEl)
  187. })
  188. </script>
  189. </body>
  190. </html>