public.html 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  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" >
  9. <title>Dienstplan</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 !important;
  22. {% if user.is_authenticated %}
  23. cursor: pointer !important;
  24. {% endif %}
  25. }
  26. .shift-vacation {
  27. background-color: blue !important;
  28. color: white !important;
  29. text-align: center;
  30. }
  31. .shift-sick {
  32. background-color: yellow !important;
  33. text-align: center;
  34. }
  35. .shift-other {
  36. background-color: gray !important;
  37. color: white !important;
  38. text-align: center;
  39. }
  40. .buttons-container {
  41. display: flex;
  42. justify-content: space-between;
  43. padding: 10px;
  44. background-color: #f8f9fa;
  45. border-bottom: 1px solid #dee2e6;
  46. }
  47. .container-fluid {
  48. padding-top: 10px; /* Reduce the padding to remove extra space */
  49. }
  50. a {
  51. color: black;
  52. text-decoration: none;
  53. }
  54. a:hover {
  55. color: black;
  56. }
  57. .employee-name {
  58. text-align: left;
  59. font-weight: bold;
  60. width: 150px; /* Set a fixed width for the employee column */
  61. }
  62. .day-name {
  63. text-align: center;
  64. width: 150px; /* Set a fixed width for the employee column */
  65. }
  66. .table th, .table td {
  67. vertical-align: middle;
  68. width: 100px; /* Set a fixed width for all other columns */
  69. padding: 4px; /* Reduce padding to decrease row height */
  70. line-height: 1.2; /* Adjust line height to decrease row height */
  71. }
  72. .custom-heading {
  73. margin: 0; /* Remove margin to eliminate extra space */
  74. }
  75. @media print {
  76. .btn {
  77. display: none; /* Hide the buttons when printing */
  78. }
  79. }
  80. </style>
  81. </head>
  82. <body>
  83. <div class="container-fluid">
  84. <table class="table">
  85. <tr>
  86. <td><a href="?start_date={{ previous_week }}" class="btn btn-primary text-start"><<</a></td>
  87. <td><a href="/public" class="btn btn-primary">Aktuelle Woche</a></td>
  88. <td><h4 class="custom-heading text-center">Dienstplan für KW {{ calendar_week }}</h4></td>
  89. <td ></td>
  90. <td class="text-end"><a href="?start_date={{ next_week }}" class="btn btn-primary">>></a></td>
  91. </tr>
  92. </table>
  93. <div class="table-responsive">
  94. <table class="table table-bordered table-striped table-hover w-100">
  95. <thead class="table-dark">
  96. <tr>
  97. <th class="employee-name">Veranstaltungen</th>
  98. {% for day, date in days_with_dates %}
  99. <th class="day-name">{{ day }} {{ date }}</th>
  100. {% endfor %}
  101. </tr>
  102. </thead>
  103. <tbody>
  104. {% for location, events in events_by_location.items %}
  105. <tr>
  106. <td class="employee-name">{{ location.name }}</td>
  107. {% for day, date in days_with_dates %}
  108. {% with event=events|get_item:forloop.counter0 %}
  109. {% if event == None %}
  110. <td class="shift-none">--</td>
  111. {% else %}
  112. <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> Belegung: {{ event.belegung }}<br> PAX: {{ event.pax }}<br> CVD: {{ event.cvd }}<br> CVT: {{ event.cvt }}<br> Info: {{ event.info }}">
  113. {% if event.name %}
  114. {{ event.name }}
  115. {% else %}
  116. F
  117. {% endif %}
  118. </td>
  119. {% endif %}
  120. {% endwith %}
  121. {% endfor %}
  122. </tr>
  123. {% endfor %}
  124. <tr>
  125. <td class="employee-name">Reinigung</td>
  126. {% for day in range_days %}
  127. {% if reinigungs_by_date|default_if_none:None %}
  128. {% if reinigungs_by_date|get_item:day %}
  129. {% with reinigung=reinigungs_by_date|get_item:day %}
  130. <td class="shift-none" >
  131. {{ reinigung.auftrag }}
  132. </td>
  133. {% endwith %}
  134. {% else %}
  135. <td class="shift-none" >--</td>
  136. {% endif %}
  137. {% else %}
  138. <td class="shift-none" >--</td>
  139. {% endif %}
  140. {% endfor %}
  141. </tr>
  142. <tr>
  143. <td class="employee-name">Helfer</td>
  144. {% for day in range_days %}
  145. {% if helpers_by_date|default_if_none:None %}
  146. {% if helpers_by_date|get_item:day %}
  147. {% with helper=helpers_by_date|get_item:day %}
  148. <td class="shift-none" >
  149. {{ helper.ben }}/{{ helper.best }}
  150. </td>
  151. {% endwith %}
  152. {% else %}
  153. <td class="shift-none" >--</td>
  154. {% endif %}
  155. {% else %}
  156. <td class="shift-none" >--</td>
  157. {% endif %}
  158. {% endfor %}
  159. </tr>
  160. </tbody>
  161. <tbody>
  162. <tr class="table-dark">
  163. <th class="employee-name">Mitarbeiter</th>
  164. {% for day, date in days_with_dates %}
  165. <th class="day-name">{{ day }} {{ date }}</th>
  166. {% endfor %}
  167. </tr>
  168. {% for employee, shifts in shifts_by_employee.items %}
  169. <tr>
  170. <td class="employee-name">{{ employee.name }}</td>
  171. {% for day, date in days_with_dates %}
  172. {% with shift=shifts|get_item:forloop.counter0 %}
  173. {% if shift == None %}
  174. <td class="shift-none" >
  175. F
  176. </td>
  177. {% else %}
  178. <td class="
  179. {% if shift.start and shift.end %}
  180. shift-none
  181. {% elif shift.shifttype == 'U' %}
  182. shift-vacation
  183. {% elif shift.shifttype == 'K' %}
  184. shift-sick
  185. {% else %}
  186. shift-other
  187. {% endif %}
  188. "
  189. {% if shift.info %}
  190. data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="Info: {{ shift.info }}"
  191. {% endif %}
  192. >
  193. {% if shift.start and shift.end %}
  194. {{ shift.start|time:"H:i" }} - {{ shift.end|time:"H:i" }}
  195. {% if shift.shiftchef %}
  196. {{ shift.shiftchef }}
  197. {% endif %}
  198. {% else %}
  199. {{ shift.get_shifttype_display }}
  200. {% endif %}
  201. </td>
  202. {% endif %}
  203. {% endwith %}
  204. {% endfor %}
  205. </tr>
  206. {% endfor %}
  207. </tbody>
  208. </table>
  209. </div>
  210. </div>
  211. {% bootstrap_javascript %}
  212. <script>
  213. // Initialize all tooltips on the page
  214. var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  215. var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  216. return new bootstrap.Tooltip(tooltipTriggerEl)
  217. })
  218. </script>
  219. </body>
  220. </html>