proper naming

2026-06-22 16:29:01 +01:00
parent d311597baa
commit 907f92aeef
1 changed files with 107 additions and 13 deletions
@@ -48,30 +48,32 @@

                <div class="min-w-0">
                    <h2 class="text-lg font-black uppercase tracking-wide">Ticket controls</h2>
+
                    <p class="text-xs font-semibold text-indigo-100">
                        Log time, assignment, status and priority
                    </p>
-                </div>
-            </div>

-            <span class="inline-flex shrink-0 items-center gap-2">
-                @if ($hasRunningTimer)
                    <span
-                        class="inline-flex items-center gap-2 rounded-xl bg-emerald-400/20 px-3 py-2 text-xs font-black text-emerald-50 ring-1 ring-emerald-200/40"
+                        class="{{ $hasRunningTimer ? 'inline-flex' : 'hidden' }} mt-2 w-fit items-center gap-2 rounded-xl bg-emerald-400/20 px-3 py-1.5 text-xs font-black text-emerald-50 ring-1 ring-emerald-200/40"
+                        data-helpdesk-running-summary-badge
                        data-dusk="ticket-running-timer-summary">
                        <span class="relative flex h-2.5 w-2.5">
                            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-200 opacity-75"></span>
                            <span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-emerald-300"></span>
                        </span>
-                        <span>Running</span>
-                        <span class="font-mono" data-dusk="ticket-running-elapsed-summary">{{ $runningTimerElapsedDisplay }}</span>
-                    </span>
-                @endif

-                <span
-                    class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-white/15 text-white ring-1 ring-white/20">
-                    <i class="fa-solid fa-chevron-right text-xs transition group-open:rotate-90" aria-hidden="true"></i>
-                </span>
+                        <span>Running</span>
+
+                        <span class="font-mono" data-helpdesk-running-summary-elapsed data-dusk="ticket-running-elapsed-summary">
+                            {{ $runningTimerElapsedDisplay }}
+                        </span>
+                    </span>
+                </div>
+            </div>
+
+            <span
+                class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white/15 text-white ring-1 ring-white/20">
+                <i class="fa-solid fa-chevron-right text-xs transition group-open:rotate-90" aria-hidden="true"></i>
            </span>
        </summary>

@@ -231,4 +233,96 @@
            </button>
        </form>
    </details>
+
+    <script>
+        (() => {
+            const root = document.querySelector('[data-helpdesk-ticket-controls]');
+
+            if (!root) {
+                return;
+            }
+
+            const badge = root.querySelector('[data-helpdesk-running-summary-badge]');
+            const elapsed = root.querySelector('[data-helpdesk-running-summary-elapsed]');
+
+            if (!badge || !elapsed) {
+                return;
+            }
+
+            let startedAt = null;
+            let interval = null;
+
+            const formatElapsed = (seconds) => {
+                const date = new Date(Math.max(0, seconds) * 1000);
+
+                return date.toISOString().substring(11, 19);
+            };
+
+            const readExistingElapsedSeconds = () => {
+                const parts = String(elapsed.textContent || '00:00:00')
+                    .trim()
+                    .split(':')
+                    .map((part) => Number.parseInt(part, 10));
+
+                if (parts.length !== 3 || parts.some(Number.isNaN)) {
+                    return 0;
+                }
+
+                return (parts[0] * 3600) + (parts[1] * 60) + parts[2];
+            };
+
+            const showBadge = () => {
+                badge.classList.remove('hidden');
+                badge.classList.add('inline-flex');
+
+                if (!startedAt) {
+                    startedAt = Date.now() - (readExistingElapsedSeconds() * 1000);
+                }
+
+                if (interval) {
+                    clearInterval(interval);
+                }
+
+                interval = setInterval(() => {
+                    elapsed.textContent = formatElapsed(Math.floor((Date.now() - startedAt) / 1000));
+                }, 1000);
+            };
+
+            const hideBadge = () => {
+                badge.classList.add('hidden');
+                badge.classList.remove('inline-flex');
+                startedAt = null;
+
+                if (interval) {
+                    clearInterval(interval);
+                    interval = null;
+                }
+            };
+
+            const syncRunningState = () => {
+                const timerPanel = root.querySelector('[data-helpdesk-running-timer]');
+                const timerText = root.textContent.toLowerCase();
+                const isRunning = Boolean(timerPanel) || timerText.includes('timer started') || timerText.includes('running');
+
+                if (isRunning) {
+                    showBadge();
+                    return;
+                }
+
+                hideBadge();
+            };
+
+            new MutationObserver(syncRunningState).observe(root, {
+                childList: true,
+                subtree: true,
+                characterData: true,
+            });
+
+            document.addEventListener('livewire:navigated', syncRunningState);
+            document.addEventListener('livewire:update', syncRunningState);
+            document.addEventListener('livewire:updated', syncRunningState);
+
+            syncRunningState();
+        })();
+    </script>
@endcan