current_week_shifts.html 10 KB

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