added yoga stuff, i18n, workout tracking and a dashboard to track progress
This commit is contained in:
@@ -0,0 +1,125 @@
|
||||
<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 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->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
|
||||
</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.');
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
@endpush
|
||||
</x-app-layout>
|
||||
Reference in New Issue
Block a user