current_week_shifts.html 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  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="buttons-container">
  82. <a href="?start_date={{ previous_week }}" class="btn btn-primary">Eine Woche zurück</a>
  83. <a href="/current-week-shifts/" class="btn btn-primary">Aktuelle Woche</a>
  84. <form method="post" action="{% url 'logout' %}" style="display: inline;">
  85. {% csrf_token %}
  86. <button type="submit" class="btn btn-secondary">Logout</button>
  87. </form>
  88. <a href="?start_date={{ next_week }}" class="btn btn-primary">Eine Woche vorwärts</a>
  89. </div>
  90. <div class="container-fluid">
  91. <h4 class="custom-heading">Dienstplan für KW {{ calendar_week }}</h4>
  92. <div class="table-responsive">
  93. <table class="table table-bordered table-striped table-hover w-100">
  94. <thead class="table-dark">
  95. <tr>
  96. <th class="employee-name">Veranstaltungen</th>
  97. {% for day, date in days_with_dates %}
  98. <th class="day-name">{{ day }} {{ date }}</th>
  99. {% endfor %}
  100. </tr>
  101. </thead>
  102. <tbody>
  103. {% for location, events in events_by_location.items %}
  104. <tr>
  105. <td class="employee-name">{{ location.name }}</td>
  106. {% for day, date in days_with_dates %}
  107. {% with event=events|get_item:forloop.counter0 %}
  108. {% if event == None %}
  109. <td class="shift-none" onclick="window.location.href='{% url 'create_event' %}?date={{ date }}'"></td>
  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 }}">
  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">Helfer</td>
  125. {% for day in range_days %}
  126. {% if helpers_by_date|default_if_none:None %}
  127. {% if helpers_by_date|get_item:day %}
  128. {% with helper=helpers_by_date|get_item:day %}
  129. <td align="center" class="shift-none">
  130. {{ helper.ben }}/{{ helper.best }}
  131. </td>
  132. {% endwith %}
  133. {% else %}
  134. <td class="shift-none">-/-</td>
  135. {% endif %}
  136. {% else %}
  137. <td class="shift-none">-/-</td>
  138. {% endif %}
  139. {% endfor %}
  140. </tr>
  141. </tbody>
  142. <tbody>
  143. <tr class="table-dark">
  144. <th class="employee-name">Mitarbeiter</th>
  145. {% for day, date in days_with_dates %}
  146. <th class="day-name">{{ day }} {{ date }}</th>
  147. {% endfor %}
  148. </tr>
  149. {% for employee, shifts in shifts_by_employee.items %}
  150. <tr>
  151. <td class="employee-name">{{ employee.name }}</td>
  152. {% for day, date in days_with_dates %}
  153. {% with shift=shifts|get_item:forloop.counter0 %}
  154. {% if shift == None %}
  155. <td class="shift-none" onclick="window.location.href='{% url 'create_multiple_shifts' %}?date={{ date }}'">
  156. F
  157. </td>
  158. {% else %}
  159. <td class="
  160. {% if shift.start and shift.end %}
  161. shift-none
  162. {% elif shift.shifttype == 'U' %}
  163. shift-vacation
  164. {% elif shift.shifttype == 'K' %}
  165. shift-sick
  166. {% else %}
  167. shift-other
  168. {% endif %}
  169. " onclick="window.location.href='{% url 'edit_shift' pk=shift.id %}'">
  170. {% if shift.start and shift.end %}
  171. {{ shift.start|time:"H:i" }} - {{ shift.end|time:"H:i" }}
  172. {% else %}
  173. {{ shift.get_shifttype_display }}
  174. {% endif %}
  175. </td>
  176. {% endif %}
  177. {% endwith %}
  178. {% endfor %}
  179. </tr>
  180. {% endfor %}
  181. </tbody>
  182. </table>
  183. </div>
  184. </div>
  185. {% bootstrap_javascript %}
  186. <script>
  187. // Initialize all tooltips on the page
  188. var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  189. var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  190. return new bootstrap.Tooltip(tooltipTriggerEl)
  191. })
  192. </script>
  193. </body>
  194. </html>