[FEAT] We now have a functional APP

This commit is contained in:
NADAL Jean-Baptiste
2026-02-18 12:52:15 +01:00
parent bc6e603af4
commit 1fb0072fc7
30 changed files with 174 additions and 77 deletions

View File

@@ -86,8 +86,11 @@ export const apiService = {
return response.data.score;
},
async getInstruments(scoreId: string): Promise<Instrument[]> {
const response = await api.get(`/scores/${scoreId}/instruments`);
async getInstruments(scoreId: string, pieceId?: number): Promise<Instrument[]> {
const url = pieceId
? `/scores/${scoreId}/instruments?piece=${pieceId}`
: `/scores/${scoreId}/instruments`;
const response = await api.get(url);
return response.data.instruments;
},

View File

@@ -28,6 +28,7 @@
let loading = $state(true);
let error = $state('');
let rendering = $state(false);
let isFullscreen = $state(false);
async function loadPdf() {
loading = true;
@@ -102,8 +103,14 @@
renderPage(currentPage);
}
function toggleFullscreen() {
isFullscreen = !isFullscreen;
}
function handleKeydown(e: KeyboardEvent) {
if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
if (e.key === 'Escape' && isFullscreen) {
isFullscreen = false;
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
prevPage();
} else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
nextPage();
@@ -129,8 +136,8 @@
});
</script>
<div class="flex flex-col h-full">
<div class="bg-ohmj-dark text-white px-4 py-2 flex items-center justify-between">
<div class="flex flex-col h-full" class:fixed={isFullscreen} class:inset-0={isFullscreen} class:z-50={isFullscreen} class:bg-gray-900={isFullscreen}>
<div class="bg-ohmj-dark text-white px-4 py-2 flex items-center justify-between border-b border-gray-700">
<div class="flex items-center gap-2">
<span class="font-semibold">{title}</span>
{#if totalPages > 0}
@@ -143,7 +150,9 @@
class="px-2 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm"
title="Zoom -"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
</svg>
</button>
<span class="text-sm w-16 text-center">{Math.round(scale * 100)}%</span>
<button
@@ -151,7 +160,24 @@
class="px-2 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm"
title="Zoom +"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</button>
<button
onclick={toggleFullscreen}
class="px-2 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm ml-2"
title={isFullscreen ? 'Quitter plein écran' : 'Plein écran'}
>
{#if isFullscreen}
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25" />
</svg>
{:else}
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
</svg>
{/if}
</button>
</div>
</div>
@@ -172,7 +198,7 @@
{/if}
</div>
<div class="bg-ohmj-dark text-white px-4 py-3 flex items-center justify-center gap-4">
<div class="bg-ohmj-dark text-white px-4 py-3 flex items-center justify-center gap-4 border-t border-gray-700">
<button
onclick={prevPage}
disabled={currentPage <= 1}