current_week_shifts.html 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  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. <td class="shift-none" onclick="window.location.href='{% url 'create_event' %}?date={{ date }}'"></td>
  108. {% else %}
  109. <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 }}">
  110. {% if event.name %}
  111. {{ event.name }}
  112. {% else %}
  113. F
  114. {% endif %}
  115. </td>
  116. {% endif %}
  117. {% endwith %}
  118. {% endfor %}
  119. </tr>
  120. {% endfor %}
  121. <tr>
  122. <td class="employee-name">Reinigung</td>
  123. {% for day in range_days %}
  124. {% if reinigungs_by_date|default_if_none:None %}
  125. {% if reinigungs_by_date|get_item:day %}
  126. {% with reinigung=reinigungs_by_date|get_item:day %}
  127. <td class="shift-none" onclick="window.location.href='{% url 'edit_reinigung' pk=reinigung.id %}'">
  128. {{ reinigung.auftrag }}
  129. </td>
  130. {% endwith %}
  131. {% else %}
  132. <td class="shift-none" onclick="window.location.href='{% url 'create_reinigung' %}?date={{ date }}'">--</td>
  133. {% endif %}
  134. {% else %}
  135. <td class="shift-none" onclick="window.location.href='{% url 'create_reinigung' %}?date={{ date }}'">--</td>
  136. {% endif %}
  137. {% endfor %}
  138. </tr>
  139. <tr>
  140. <td class="employee-name">Helfer</td>
  141. {% for day in range_days %}
  142. {% if helpers_by_date|default_if_none:None %}
  143. {% if helpers_by_date|get_item:day %}
  144. {% with helper=helpers_by_date|get_item:day %}
  145. <td class="shift-none" onclick="window.location.href='{% url 'edit_helper' pk=helper.id %}'">
  146. {{ helper.ben }}/{{ helper.best }}
  147. </td>
  148. {% endwith %}
  149. {% else %}
  150. <td class="shift-none" onclick="window.location.href='{% url 'create_helper' %}?date={{ date }}'">--</td>
  151. {% endif %}
  152. {% else %}
  153. <td class="shift-none" onclick="window.location.href='{% url 'create_helper' %}?date={{ date }}'">--</td>
  154. {% endif %}
  155. {% endfor %}
  156. </tr>
  157. </tbody>
  158. <tbody>
  159. <tr class="table-dark">
  160. <th class="employee-name">Mitarbeiter</th>
  161. {% for day, date in days_with_dates %}
  162. <th class="day-name">{{ day }} {{ date }}</th>
  163. {% endfor %}
  164. </tr>
  165. {% for employee, shifts in shifts_by_employee.items %}
  166. <tr>
  167. <td class="employee-name">{{ employee.name }}</td>
  168. {% for day, date in days_with_dates %}
  169. {% with shift=shifts|get_item:forloop.counter0 %}
  170. {% if shift == None %}
  171. <td class="shift-none" onclick="window.location.href='{% url 'create_multiple_shifts' %}?date={{ date }}'">
  172. F
  173. </td>
  174. {% else %}
  175. <td class="
  176. {% if shift.start and shift.end %}
  177. shift-none
  178. {% elif shift.shifttype == 'U' %}
  179. shift-vacation
  180. {% elif shift.shifttype == 'K' %}
  181. shift-sick
  182. {% else %}
  183. shift-other
  184. {% endif %}
  185. " onclick="window.location.href='{% url 'edit_shift' pk=shift.id %}'">
  186. {% if shift.start and shift.end %}
  187. {{ shift.start|time:"H:i" }} - {{ shift.end|time:"H:i" }}
  188. {% else %}
  189. {{ shift.get_shifttype_display }}
  190. {% endif %}
  191. </td>
  192. {% endif %}
  193. {% endwith %}
  194. {% endfor %}
  195. </tr>
  196. {% endfor %}
  197. </tbody>
  198. </table>
  199. </div>
  200. </div>
  201. {% bootstrap_javascript %}
  202. <script>
  203. // Initialize all tooltips on the page
  204. var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  205. var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  206. return new bootstrap.Tooltip(tooltipTriggerEl)
  207. })
  208. </script>
  209. </body>
  210. </html>