1
0

present.php 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  1. <?php
  2. /**
  3. * Big-screen / beamer presentation view (Phase 15).
  4. *
  5. * Renders its own <!doctype html> — intentionally does NOT extend
  6. * views/layout.php. We drop the nav chrome, Arbeitstage matrix, and
  7. * capacity summary; the task-list toolbar + table get the entire
  8. * viewport. Reuses the compiled /assets/css/app.css + the jQuery
  9. * and jQuery UI CDN tags from layout.php, and /assets/js/sprint-planner.js
  10. * picks up the data-beamer="1" flag on the root to namespace its
  11. * localStorage keys and flip on vertical-header rotation when the table
  12. * overflows.
  13. *
  14. * @var \App\Domain\Sprint $sprint
  15. * @var \App\Domain\User $currentUser
  16. * @var string $csrfToken
  17. * @var list<\App\Domain\SprintWeek> $weeks
  18. * @var list<\App\Domain\SprintWorker> $sprintWorkers
  19. * @var list<\App\Domain\Task> $tasks
  20. * @var array<int, array<int, float>> $taskGrid task_id => sw_id => days
  21. * @var list<\App\Domain\Worker> $ownerChoices
  22. */
  23. use function App\Http\e;
  24. $tasks = $tasks ?? [];
  25. $taskGrid = $taskGrid ?? [];
  26. $ownerChoices = $ownerChoices ?? [];
  27. $sprintWorkers = $sprintWorkers ?? [];
  28. if (!function_exists('fmt_days')) {
  29. function fmt_days(float $x): string
  30. {
  31. if (abs($x - round($x)) < 1e-9) {
  32. return (string) (int) round($x);
  33. }
  34. return number_format($x, 1);
  35. }
  36. }
  37. ?>
  38. <!doctype html>
  39. <html lang="en">
  40. <head>
  41. <meta charset="utf-8">
  42. <meta name="viewport" content="width=device-width,initial-scale=1">
  43. <title><?= e($title ?? ($sprint->name . ' — present')) ?></title>
  44. <script src="/assets/js/theme-init.js"></script>
  45. <link rel="stylesheet" href="/assets/css/app.css">
  46. <link rel="stylesheet"
  47. href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
  48. <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  49. <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.min.js"></script>
  50. <script src="/assets/js/sprint-planner.js" defer></script>
  51. <script src="/assets/js/number-stepper.js" defer></script>
  52. </head>
  53. <body class="bg-white text-slate-900 antialiased dark:bg-slate-900 dark:text-slate-100">
  54. <main class="min-h-screen w-screen overflow-hidden beamer-root"
  55. data-sprint-root
  56. data-sprint-id="<?= (int) $sprint->id ?>"
  57. data-csrf="<?= e($csrfToken) ?>"
  58. data-reserve-fraction="<?= e(number_format($sprint->reserveFraction, 4, '.', '')) ?>"
  59. data-beamer="1">
  60. <header class="flex items-center justify-between gap-4 px-4 py-2 border-b bg-slate-50 dark:bg-slate-800 dark:border-slate-700">
  61. <div class="flex items-baseline gap-3">
  62. <h1 class="text-lg font-semibold tracking-tight"><?= e($sprint->name) ?></h1>
  63. <p class="text-slate-600 text-xs dark:text-slate-400">
  64. <?= e($sprint->startDate) ?> – <?= e($sprint->endDate) ?>
  65. <?php if ($sprint->isArchived): ?>
  66. · <span class="inline-block px-1.5 py-0.5 text-[10px] bg-slate-200 text-slate-600 rounded dark:bg-slate-700 dark:text-slate-300">archived</span>
  67. <?php endif; ?>
  68. </p>
  69. </div>
  70. <div class="flex items-center gap-3">
  71. <div data-status
  72. class="text-xs border rounded px-2 py-0.5 opacity-0 transition-opacity duration-200 border-slate-200 bg-slate-50 text-slate-700 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300">
  73. </div>
  74. <a href="/sprints/<?= (int) $sprint->id ?>"
  75. class="inline-flex items-center gap-2 rounded-md border border-slate-300 bg-white text-slate-700 px-3 py-1 text-sm hover:bg-slate-100 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
  76. Close
  77. </a>
  78. </div>
  79. </header>
  80. <?php if ($sprintWorkers === [] || $weeks === []): ?>
  81. <div class="m-4 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:bg-amber-900 dark:border-amber-800 dark:text-amber-200">
  82. <?php if ($weeks === []): ?>
  83. No weeks yet. <a href="/sprints/<?= (int) $sprint->id ?>/settings" class="underline">Open settings</a> to add some.
  84. <?php elseif ($sprintWorkers === []): ?>
  85. No workers on this sprint yet. <a href="/sprints/<?= (int) $sprint->id ?>/settings" class="underline">Open settings</a> to add some.
  86. <?php endif; ?>
  87. </div>
  88. <?php else: ?>
  89. <!-- Task list — same structure as views/sprints/show.php's
  90. [data-task-section]. sprint-planner.js wires everything from the
  91. data-* attributes, so this is essentially a copy of that block. -->
  92. <section class="rounded-lg border bg-white overflow-hidden m-2 dark:bg-slate-800 dark:border-slate-700"
  93. data-task-section>
  94. <div class="px-4 py-3 border-b bg-slate-50 flex flex-wrap items-center gap-2 dark:bg-slate-700 dark:border-slate-700">
  95. <h2 class="text-sm font-semibold text-slate-700 uppercase tracking-wider dark:text-slate-200">Tasks</h2>
  96. <!-- Toolbar -->
  97. <div class="ml-auto flex flex-wrap items-center gap-2">
  98. <!-- Reset (only visible while any filter is active — JS toggles the hidden class) -->
  99. <button type="button" data-reset-filters
  100. class="hidden rounded border border-slate-300 px-2 py-1 text-sm bg-white text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
  101. Reset
  102. </button>
  103. <input type="search" data-task-search placeholder="Search…"
  104. class="rounded border border-slate-300 px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
  105. <select data-prio-filter
  106. class="rounded border border-slate-300 px-2 py-1 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
  107. <option value="">All prios</option>
  108. <option value="1">Prio 1 only</option>
  109. <option value="2">Prio 2 only</option>
  110. </select>
  111. <!-- Multi-select owner filter -->
  112. <div class="relative" data-owner-filter-root>
  113. <button type="button" data-owner-filter-trigger
  114. class="rounded border border-slate-300 px-2 py-1 text-sm bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
  115. Owners <span data-owner-filter-count class="text-slate-500 dark:text-slate-400"></span>
  116. </button>
  117. <div data-owner-filter-dropdown
  118. class="hidden absolute right-0 z-20 mt-1 w-56 rounded-md border border-slate-200 bg-white shadow-lg dark:bg-slate-800 dark:border-slate-700">
  119. <div class="px-3 py-2 text-xs text-slate-500 flex items-center justify-between dark:text-slate-400">
  120. <span>Owner</span>
  121. <button type="button" data-owner-filter-clear
  122. class="text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300">Clear</button>
  123. </div>
  124. <div class="max-h-64 overflow-y-auto">
  125. <label class="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700">
  126. <input type="checkbox" data-owner-filter-opt value="__none__"
  127. class="rounded border-slate-300 dark:border-slate-600">
  128. <span class="text-slate-500 italic dark:text-slate-400">No owner</span>
  129. </label>
  130. <?php foreach ($ownerChoices as $ow): ?>
  131. <label class="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700">
  132. <input type="checkbox" data-owner-filter-opt value="<?= (int) $ow->id ?>"
  133. class="rounded border-slate-300 dark:border-slate-600">
  134. <span><?= e($ow->name) ?></span>
  135. </label>
  136. <?php endforeach; ?>
  137. </div>
  138. </div>
  139. </div>
  140. <!-- Focus filter -->
  141. <div class="flex items-center gap-1" data-focus-filter-root>
  142. <label for="data-focus-select" class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">Focus</label>
  143. <select id="data-focus-select" data-focus-select
  144. class="rounded border border-slate-300 px-2 py-1 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
  145. <option value="">All workers</option>
  146. <?php foreach ($sprintWorkers as $sw): ?>
  147. <option value="<?= (int) $sw->id ?>"><?= e($sw->workerName) ?></option>
  148. <?php endforeach; ?>
  149. </select>
  150. </div>
  151. <!-- Column visibility -->
  152. <div class="relative" data-columns-root>
  153. <button type="button" data-columns-trigger
  154. class="rounded border border-slate-300 px-2 py-1 text-sm bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
  155. Columns
  156. </button>
  157. <div data-columns-dropdown
  158. class="hidden absolute right-0 z-20 mt-1 w-56 rounded-md border border-slate-200 bg-white shadow-lg dark:bg-slate-800 dark:border-slate-700">
  159. <div class="px-3 py-2 text-xs text-slate-500 dark:text-slate-400">Show columns</div>
  160. <div class="max-h-64 overflow-y-auto">
  161. <label class="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700">
  162. <input type="checkbox" data-column-opt value="owner" checked class="rounded border-slate-300 dark:border-slate-600">
  163. <span>Owner</span>
  164. </label>
  165. <label class="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700">
  166. <input type="checkbox" data-column-opt value="prio" checked class="rounded border-slate-300 dark:border-slate-600">
  167. <span>Prio</span>
  168. </label>
  169. <label class="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700">
  170. <input type="checkbox" data-column-opt value="tot" checked class="rounded border-slate-300 dark:border-slate-600">
  171. <span>Tot</span>
  172. </label>
  173. <?php foreach ($sprintWorkers as $sw): ?>
  174. <label class="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700">
  175. <input type="checkbox" data-column-opt value="sw-<?= (int) $sw->id ?>" checked class="rounded border-slate-300 dark:border-slate-600">
  176. <span><?= e($sw->workerName) ?></span>
  177. </label>
  178. <?php endforeach; ?>
  179. </div>
  180. </div>
  181. </div>
  182. <?php if ($currentUser->isAdmin): ?>
  183. <button type="button" data-add-task
  184. class="rounded bg-slate-900 text-white px-3 py-1 text-sm font-medium hover:bg-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600">
  185. + Add task
  186. </button>
  187. <?php endif; ?>
  188. </div>
  189. </div>
  190. <div class="overflow-x-auto">
  191. <table class="min-w-full text-sm" data-task-table>
  192. <thead class="bg-slate-50 text-slate-600 text-xs uppercase tracking-wider dark:bg-slate-700 dark:text-slate-300">
  193. <tr>
  194. <th class="w-6 px-2 py-2"></th>
  195. <th class="text-left px-2 py-2 font-semibold cursor-pointer select-none"
  196. data-sort-col="title">Task <span class="sort-ind opacity-30">↕</span></th>
  197. <th class="text-left px-2 py-2 font-semibold cursor-pointer select-none"
  198. data-sort-col="owner" data-col="owner">Owner <span class="sort-ind opacity-30">↕</span></th>
  199. <th class="text-center px-2 py-2 font-semibold cursor-pointer select-none"
  200. data-sort-col="prio" data-col="prio">Prio <span class="sort-ind opacity-30">↕</span></th>
  201. <th class="text-center px-2 py-2 font-semibold cursor-pointer select-none"
  202. data-sort-col="tot" data-col="tot">Tot <span class="sort-ind opacity-30">↕</span></th>
  203. <?php foreach ($sprintWorkers as $sw): ?>
  204. <th class="text-center px-2 py-2 font-semibold cursor-pointer select-none whitespace-nowrap"
  205. data-sort-col="sw-<?= (int) $sw->id ?>" data-col="sw-<?= (int) $sw->id ?>">
  206. <?= e($sw->workerName) ?>
  207. <span class="sort-ind opacity-30">↕</span>
  208. </th>
  209. <?php endforeach; ?>
  210. <th class="w-8 px-2 py-2"></th>
  211. </tr>
  212. </thead>
  213. <tbody class="divide-y divide-slate-100 dark:divide-slate-700" data-task-tbody>
  214. <?php if ($tasks === []): ?>
  215. <tr data-empty-tasks>
  216. <td colspan="<?= 6 + count($sprintWorkers) ?>" class="px-3 py-8 text-center text-slate-500 text-sm dark:text-slate-400">
  217. No tasks yet.
  218. <?php if ($currentUser->isAdmin): ?>
  219. Click <b>+ Add task</b> to start.
  220. <?php endif; ?>
  221. </td>
  222. </tr>
  223. <?php else: ?>
  224. <?php foreach ($tasks as $t): ?>
  225. <?php $assign = $taskGrid[$t->id] ?? []; $tot = array_sum($assign); ?>
  226. <tr data-task-row
  227. data-task-id="<?= (int) $t->id ?>"
  228. data-prio="<?= (int) $t->priority ?>"
  229. data-owner="<?= $t->ownerWorkerId !== null ? (int) $t->ownerWorkerId : '' ?>"
  230. data-sort-order="<?= (int) $t->sortOrder ?>">
  231. <td class="px-2 py-1">
  232. <?php if ($currentUser->isAdmin): ?>
  233. <span class="handle cursor-grab text-slate-400 select-none dark:text-slate-500">&#8801;</span>
  234. <?php endif; ?>
  235. </td>
  236. <td class="px-2 py-1 min-w-[14rem]">
  237. <?php if ($currentUser->isAdmin): ?>
  238. <input type="text" data-title
  239. value="<?= e($t->title) ?>"
  240. class="w-full rounded border border-slate-200 px-2 py-1 focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
  241. <?php else: ?>
  242. <span><?= e($t->title) ?></span>
  243. <?php endif; ?>
  244. </td>
  245. <td class="px-2 py-1" data-col="owner">
  246. <?php if ($currentUser->isAdmin): ?>
  247. <select data-owner-select
  248. class="w-full rounded border border-slate-200 px-2 py-1 bg-white focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
  249. <option value="">—</option>
  250. <?php foreach ($ownerChoices as $ow): ?>
  251. <option value="<?= (int) $ow->id ?>" <?= $t->ownerWorkerId === $ow->id ? 'selected' : '' ?>>
  252. <?= e($ow->name) ?>
  253. </option>
  254. <?php endforeach; ?>
  255. </select>
  256. <?php else: ?>
  257. <?php
  258. $ownerName = '—';
  259. foreach ($ownerChoices as $ow) {
  260. if ($ow->id === $t->ownerWorkerId) { $ownerName = $ow->name; break; }
  261. }
  262. echo e($ownerName);
  263. ?>
  264. <?php endif; ?>
  265. </td>
  266. <td class="px-2 py-1 text-center" data-col="prio">
  267. <?php if ($currentUser->isAdmin): ?>
  268. <select data-prio-select
  269. class="rounded border border-slate-200 px-2 py-1 bg-white font-mono focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
  270. <option value="1" <?= $t->priority === 1 ? 'selected' : '' ?>>1</option>
  271. <option value="2" <?= $t->priority === 2 ? 'selected' : '' ?>>2</option>
  272. </select>
  273. <?php else: ?>
  274. <span class="font-mono"><?= (int) $t->priority ?></span>
  275. <?php endif; ?>
  276. </td>
  277. <td class="px-2 py-1 text-center font-mono font-semibold"
  278. data-col="tot" data-task-tot>
  279. <?= e(fmt_days($tot)) ?>
  280. </td>
  281. <?php foreach ($sprintWorkers as $sw): $d = (float) ($assign[$sw->id] ?? 0.0); ?>
  282. <td class="px-1 py-1 text-center"
  283. data-col="sw-<?= (int) $sw->id ?>"
  284. data-sort-value-sw-<?= (int) $sw->id ?>="<?= e(number_format($d, 2, '.', '')) ?>">
  285. <?php if ($currentUser->isAdmin): ?>
  286. <input type="number" min="0" step="0.5"
  287. value="<?= e(fmt_days($d)) ?>"
  288. data-assign
  289. data-sw-id="<?= (int) $sw->id ?>"
  290. data-stepper
  291. class="w-14 rounded border border-slate-200 px-1 py-1 text-center font-mono focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
  292. <?php else: ?>
  293. <span class="font-mono"><?= e(fmt_days($d)) ?></span>
  294. <?php endif; ?>
  295. </td>
  296. <?php endforeach; ?>
  297. <td class="px-1 py-1 text-right">
  298. <?php if ($currentUser->isAdmin): ?>
  299. <button type="button" data-delete-task
  300. class="text-sm text-red-600 hover:underline dark:text-red-400">×</button>
  301. <?php endif; ?>
  302. </td>
  303. </tr>
  304. <?php endforeach; ?>
  305. <?php endif; ?>
  306. </tbody>
  307. </table>
  308. </div>
  309. <div data-task-empty-filter class="hidden p-4 text-center text-slate-500 text-sm dark:text-slate-400">
  310. No tasks match the current filters.
  311. </div>
  312. </section>
  313. <?php endif; ?>
  314. </main>
  315. </body>
  316. </html>