218 lines
15 KiB
PHP
218 lines
15 KiB
PHP
<x-app-layout>
|
|
<section class="bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800">
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<a href="{{ route('workouts.show', $workout) }}" class="text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">← {{ __('app.sessions.back_to_workout') }}</a>
|
|
<h1 class="mt-2 text-2xl sm:text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">{{ $workout->title }}</h1>
|
|
<p class="mt-1 text-gray-600 dark:text-gray-300">{{ __('app.sessions.progress') }}: {{ $doneByItemId->where('done', true)->count() }} / {{ $workout->items->count() }}</p>
|
|
</div>
|
|
<form method="POST" action="{{ route('sessions.complete', $session) }}" onsubmit="return confirm('{{ __('app.sessions.mark_complete_confirm') }}');">
|
|
@csrf
|
|
<button type="submit" class="inline-flex items-center rounded-xl bg-gradient-to-r from-indigo-600 to-fuchsia-600 px-4 py-2 text-sm font-semibold text-white shadow hover:from-indigo-500 hover:to-fuchsia-500" title="{{ __('app.sessions.mark_complete') }}" aria-label="{{ __('app.sessions.mark_complete') }}">{{ __('app.sessions.mark_complete') }}</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
|
|
<div class="rounded-2xl ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 p-5">
|
|
@if($workout->items->count() === 0)
|
|
<div class="mt-3 rounded-xl border border-dashed border-gray-300 dark:border-gray-700 p-6 text-sm text-gray-600 dark:text-gray-300">{{ __('app.sessions.no_items') }}</div>
|
|
@else
|
|
<ul class="mt-1 space-y-3">
|
|
@foreach($workout->items as $item)
|
|
@php $si = $doneByItemId->get($item->id); $isDone = $si && $si->done; @endphp
|
|
<li class="rounded-xl ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-900 p-4" data-session-id="{{ $session->id }}" data-item-id="{{ $item->id }}" data-rest-seconds="{{ $item->rest_seconds ?? 60 }}">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex items-start gap-3">
|
|
<form method="POST" action="{{ route('sessions.items.toggle', [$session, $item]) }}" class="session-toggle-form" data-item-id="{{ $item->id }}" data-initial-done="{{ $isDone ? '1' : '0' }}">
|
|
@csrf
|
|
@method('PATCH')
|
|
<button type="submit" class="h-6 w-6 rounded-md border flex items-center justify-center transition-colors duration-150"
|
|
aria-pressed="{{ $isDone ? 'true' : 'false' }}"
|
|
title="{{ $isDone ? __('app.sessions.mark_complete') : __('app.sessions.progress') }}">
|
|
<span class="sr-only">Toggle</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4 {{ $isDone ? 'text-white' : 'text-transparent' }}">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-7.5 7.5a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L8.5 12.086l6.793-6.793a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
<div>
|
|
<div class="exercise-title text-base font-semibold {{ $isDone ? 'line-through text-gray-500 dark:text-gray-400' : 'text-gray-900 dark:text-white' }}">{{ $item->exercise->display_name }}</div>
|
|
<div class="mt-1 text-sm text-gray-600 dark:text-gray-300">
|
|
@if($item->sets) {{ $item->sets }} {{ __('app.sessions.sets') }} @endif
|
|
@if($item->reps) · {{ $item->reps }} {{ __('app.sessions.reps') }} @endif
|
|
@if($item->weight) · {{ $item->weight }} kg @endif
|
|
@if($item->rest_seconds) · {{ $item->rest_seconds }}s {{ __('app.sessions.rest') }} @endif
|
|
</div>
|
|
@if($item->notes)
|
|
<div class="mt-2 text-sm text-gray-600 dark:text-gray-300">{{ $item->notes }}</div>
|
|
@endif
|
|
|
|
<!-- Timers -->
|
|
<div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<!-- Exercise timer (count-up) -->
|
|
<div class="rounded-lg bg-gray-50 dark:bg-gray-800/60 ring-1 ring-gray-200 dark:ring-gray-700 p-3 flex items-center justify-between">
|
|
<div>
|
|
<div class="text-xs text-gray-500">{{ __('app.sessions.exercise_timer') }}</div>
|
|
<div class="exercise-timer-display text-sm font-semibold text-gray-900 dark:text-white">00:00</div>
|
|
</div>
|
|
<button type="button" class="exercise-timer-toggle inline-flex items-center rounded-md px-3 py-1.5 text-xs font-semibold text-white bg-emerald-600 hover:bg-emerald-500">{{ __('app.sessions.start_timer') }}</button>
|
|
</div>
|
|
|
|
<!-- Rest timer (countdown) -->
|
|
<div class="rounded-lg bg-gray-50 dark:bg-gray-800/60 ring-1 ring-gray-200 dark:ring-gray-700 p-3 flex items-center justify-between">
|
|
<div>
|
|
<div class="text-xs text-gray-500">{{ __('app.sessions.rest_timer') }}</div>
|
|
<div class="rest-timer-display text-sm font-semibold text-gray-900 dark:text-white">00:00</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button type="button" class="rest-start inline-flex items-center rounded-md px-2.5 py-1.5 text-xs font-semibold text-white bg-indigo-600 hover:bg-indigo-500">{{ __('app.sessions.start_rest') }}</button>
|
|
<button type="button" class="rest-pause inline-flex items-center rounded-md px-2.5 py-1.5 text-xs font-semibold text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600">{{ __('app.sessions.pause_rest') }}</button>
|
|
<button type="button" class="rest-reset inline-flex items-center rounded-md px-2.5 py-1.5 text-xs font-semibold text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700">{{ __('app.sessions.reset_rest') }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
@endif
|
|
</div>
|
|
</section>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
(function(){
|
|
function updateBtnState(btn, done) {
|
|
btn.setAttribute('aria-pressed', done ? 'true' : 'false');
|
|
// Background/border colors
|
|
if (done) {
|
|
btn.classList.add('bg-emerald-500','border-emerald-600','text-white');
|
|
btn.classList.remove('border-gray-300','dark:border-gray-700');
|
|
} else {
|
|
btn.classList.remove('bg-emerald-500','border-emerald-600','text-white');
|
|
btn.classList.add('border-gray-300','dark:border-gray-700');
|
|
}
|
|
const icon = btn.querySelector('svg');
|
|
if (icon) {
|
|
icon.classList.toggle('text-white', !!done);
|
|
icon.classList.toggle('text-transparent', !done);
|
|
}
|
|
// Also toggle line-through for exercise name in the same item row
|
|
const row = btn.closest('li');
|
|
if (row) {
|
|
const titleEl = row.querySelector('.exercise-title');
|
|
if (titleEl) {
|
|
if (done) {
|
|
titleEl.classList.add('line-through','text-gray-500','dark:text-gray-400');
|
|
titleEl.classList.remove('text-gray-900','dark:text-white');
|
|
} else {
|
|
titleEl.classList.remove('line-through','text-gray-500','dark:text-gray-400');
|
|
titleEl.classList.add('text-gray-900','dark:text-white');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
document.addEventListener('click', function(e){
|
|
const btn = e.target.closest('.session-toggle-form button[type="submit"]');
|
|
if (!btn) return;
|
|
const form = btn.closest('form.session-toggle-form');
|
|
if (!form) return;
|
|
e.preventDefault();
|
|
|
|
// Optimistically toggle UI
|
|
const wasDone = btn.getAttribute('aria-pressed') === 'true';
|
|
const next = !wasDone;
|
|
updateBtnState(btn, next);
|
|
|
|
fetch(form.action, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'X-CSRF-TOKEN': form.querySelector('input[name="_token"]').value,
|
|
'Accept': 'text/html',
|
|
},
|
|
body: new URLSearchParams(new FormData(form))
|
|
}).then(function(res){
|
|
if (!res.ok) throw new Error('Network response was not ok');
|
|
}).catch(function(){
|
|
// Revert on error
|
|
updateBtnState(btn, wasDone);
|
|
alert('Failed to update. Please try again.');
|
|
});
|
|
});
|
|
|
|
// --- Timers ---
|
|
function pad(n){ return n < 10 ? '0'+n : ''+n; }
|
|
function fmt(ms){ ms = Math.max(0, ms|0); const s = Math.floor(ms/1000); const m = Math.floor(s/60); const rs = s%60; return pad(m)+':'+pad(rs); }
|
|
|
|
function storageGet(key){ try { return JSON.parse(localStorage.getItem(key) || 'null'); } catch(e){ return null; } }
|
|
function storageSet(key, val){ try { localStorage.setItem(key, JSON.stringify(val)); } catch(e){} }
|
|
|
|
const intervals = new Map(); // key -> interval id
|
|
|
|
function setupExerciseTimer(row){
|
|
const sessionId = row.getAttribute('data-session-id');
|
|
const itemId = row.getAttribute('data-item-id');
|
|
const key = `sess:${sessionId}:item:${itemId}:ex`;
|
|
const display = row.querySelector('.exercise-timer-display');
|
|
const toggle = row.querySelector('.exercise-timer-toggle');
|
|
if (!display || !toggle) return;
|
|
|
|
let state = storageGet(key) || { running:false, elapsedMs:0, startedAt: null };
|
|
|
|
function render(){ display.textContent = fmt(state.running ? (Date.now() - (state.startedAt||Date.now()) + (state.elapsedMs||0)) : (state.elapsedMs||0)); toggle.textContent = state.running ? (toggle.getAttribute('data-stop-label') || '{{ __('app.sessions.stop_timer') }}') : (toggle.getAttribute('data-start-label') || '{{ __('app.sessions.start_timer') }}'); }
|
|
|
|
function start(){ if (state.running) return; state.running = true; state.startedAt = Date.now(); storageSet(key, state); render(); const iid = setInterval(render, 500); intervals.set(key, iid); }
|
|
function stop(){ if (!state.running) return; state.elapsedMs = (Date.now() - (state.startedAt||Date.now())) + (state.elapsedMs||0); state.running = false; state.startedAt = null; storageSet(key, state); render(); const iid = intervals.get(key); if (iid) { clearInterval(iid); intervals.delete(key); } }
|
|
|
|
toggle.addEventListener('click', function(){ state.running ? stop() : start(); });
|
|
|
|
// resume
|
|
if (state.running && state.startedAt){ const iid = setInterval(render, 500); intervals.set(key, iid); }
|
|
render();
|
|
}
|
|
|
|
function setupRestTimer(row){
|
|
const sessionId = row.getAttribute('data-session-id');
|
|
const itemId = row.getAttribute('data-item-id');
|
|
const defSeconds = parseInt(row.getAttribute('data-rest-seconds')||'60', 10);
|
|
const key = `sess:${sessionId}:item:${itemId}:rest`;
|
|
const display = row.querySelector('.rest-timer-display');
|
|
const btnStart = row.querySelector('.rest-start');
|
|
const btnPause = row.querySelector('.rest-pause');
|
|
const btnReset = row.querySelector('.rest-reset');
|
|
if (!display || !btnStart || !btnPause || !btnReset) return;
|
|
|
|
let state = storageGet(key) || { running:false, remainingMs: defSeconds*1000, targetAt: null, defaultMs: defSeconds*1000 };
|
|
|
|
function render(){ const ms = state.running ? Math.max(0, (state.targetAt||Date.now()) - Date.now()) : (state.remainingMs||0); display.textContent = fmt(ms); if (ms <= 0 && state.running){ // auto-stop when finished
|
|
state.running = false; state.remainingMs = 0; state.targetAt = null; storageSet(key, state); const iid = intervals.get(key); if (iid) { clearInterval(iid); intervals.delete(key); } try{ display.classList.add('text-emerald-600'); setTimeout(()=>display.classList.remove('text-emerald-600'), 2000);}catch(e){}
|
|
} }
|
|
function start(){ if (state.running) return; const ms = (state.remainingMs==null ? state.defaultMs : state.remainingMs); state.running = true; state.targetAt = Date.now() + Math.max(0, ms); storageSet(key, state); render(); const iid = setInterval(render, 500); intervals.set(key, iid); }
|
|
function pause(){ if (!state.running) return; state.remainingMs = Math.max(0, (state.targetAt||Date.now()) - Date.now()); state.running = false; state.targetAt = null; storageSet(key, state); render(); const iid = intervals.get(key); if (iid) { clearInterval(iid); intervals.delete(key); } }
|
|
function reset(){ state.running = false; state.remainingMs = state.defaultMs; state.targetAt = null; storageSet(key, state); render(); const iid = intervals.get(key); if (iid) { clearInterval(iid); intervals.delete(key); } }
|
|
|
|
btnStart.addEventListener('click', start);
|
|
btnPause.addEventListener('click', pause);
|
|
btnReset.addEventListener('click', reset);
|
|
|
|
// resume
|
|
if (state.running && state.targetAt){ const iid = setInterval(render, 500); intervals.set(key, iid); }
|
|
render();
|
|
}
|
|
|
|
document.querySelectorAll('li[data-session-id][data-item-id]').forEach(function(row){
|
|
setupExerciseTimer(row);
|
|
setupRestTimer(row);
|
|
});
|
|
})();
|
|
</script>
|
|
@endpush
|
|
</x-app-layout>
|