[FEAT] We now have a functional APP
This commit is contained in:
@@ -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;
|
||||
},
|
||||
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user