[WIP] Skeleton of the admin part.
This commit is contained in:
NADAL Jean-Baptiste
@@ -112,5 +112,39 @@ export const apiService = {
|
||||
token = state.token || '';
|
||||
})();
|
||||
return `${API_BASE_URL}/download/${path}?token=${token}`;
|
||||
},
|
||||
|
||||
async createScore(name: string, compositor: string): Promise<{ success: boolean; score?: any; error?: string }> {
|
||||
const response = await api.post('/admin/scores', { name, compositor });
|
||||
return response.data;
|
||||
},
|
||||
|
||||
async updateScore(id: string, name: string, compositor: string): Promise<{ success: boolean; error?: string }> {
|
||||
const response = await api.put(`/admin/scores/${id}`, { name, compositor });
|
||||
return response.data;
|
||||
},
|
||||
|
||||
async deleteScore(id: string): Promise<{ success: boolean; error?: string }> {
|
||||
const response = await api.delete(`/admin/scores/${id}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
async uploadPdf(scoreId: string, file: File, piece: string, instrument: string, version: string, key?: string, clef?: string, variant?: string, part?: string): Promise<{ success: boolean; path?: string; error?: string }> {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('piece', piece);
|
||||
formData.append('instrument', instrument);
|
||||
formData.append('version', version);
|
||||
if (key) formData.append('key', key);
|
||||
if (clef) formData.append('clef', clef);
|
||||
if (variant) formData.append('variant', variant);
|
||||
if (part) formData.append('part', part);
|
||||
|
||||
const response = await api.post(`/admin/scores/${scoreId}/upload`, formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
});
|
||||
return response.data;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -9,9 +9,11 @@
|
||||
|
||||
let isAuthenticated = false;
|
||||
let currentPath = '/';
|
||||
let userRole = '';
|
||||
|
||||
auth.subscribe((state) => {
|
||||
isAuthenticated = !!state.token;
|
||||
userRole = state.user?.role || '';
|
||||
});
|
||||
|
||||
page.subscribe(($page) => {
|
||||
@@ -48,6 +50,11 @@
|
||||
</span>
|
||||
</a>
|
||||
<nav class="flex items-center gap-4">
|
||||
{#if userRole === 'admin'}
|
||||
<a href="/admin" class="text-white hover:text-ohmj-secondary text-sm">
|
||||
Admin
|
||||
</a>
|
||||
{/if}
|
||||
<button
|
||||
onclick={logout}
|
||||
class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-sm transition-colors"
|
||||
|
||||
474
partitions/src/routes/admin/+page.svelte
Normal file
474
partitions/src/routes/admin/+page.svelte
Normal file
@@ -0,0 +1,474 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { apiService, type Score } from '$lib/api';
|
||||
import { auth } from '$lib/stores/auth';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
const INSTRUMENTS = [
|
||||
{ code: 'dir', name: 'Direction', defaultKey: '' },
|
||||
{ code: 'pic', name: 'Piccolo', defaultKey: 'do' },
|
||||
{ code: 'flu', name: 'Flûte', defaultKey: 'do' },
|
||||
{ code: 'cla', name: 'Clarinette', defaultKey: 'sib' },
|
||||
{ code: 'clb', name: 'Clarinette Basse', defaultKey: 'sib' },
|
||||
{ code: 'sax', name: 'Saxophone Alto', defaultKey: 'mib' },
|
||||
{ code: 'sat', name: 'Saxophone Ténor', defaultKey: 'sib' },
|
||||
{ code: 'sab', name: 'Saxophone Baryton', defaultKey: 'mib' },
|
||||
{ code: 'coa', name: 'Cor Anglais', defaultKey: 'fa' },
|
||||
{ code: 'htb', name: 'Hautbois', defaultKey: 'do' },
|
||||
{ code: 'bas', name: 'Basson', defaultKey: 'do' },
|
||||
{ code: 'cor', name: 'Cor', defaultKey: 'fa' },
|
||||
{ code: 'trp', name: 'Trompette', defaultKey: 'sib' },
|
||||
{ code: 'crn', name: 'Cornet', defaultKey: 'sib' },
|
||||
{ code: 'trb', name: 'Trombone', defaultKey: 'do' },
|
||||
{ code: 'eup', name: 'Euphonium', defaultKey: 'sib' },
|
||||
{ code: 'tub', name: 'Tuba', defaultKey: 'do' },
|
||||
{ code: 'cba', name: 'Contrebasse', defaultKey: 'sib' },
|
||||
{ code: 'per', name: 'Percussions', defaultKey: '' },
|
||||
{ code: 'pia', name: 'Piano', defaultKey: '' },
|
||||
{ code: 'har', name: 'Harpe', defaultKey: '' }
|
||||
];
|
||||
|
||||
let scores: Score[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let error = $state('');
|
||||
let userRole = $state('');
|
||||
let isAdmin = $derived(userRole === 'admin');
|
||||
|
||||
// Form for new score
|
||||
let showForm = $state(false);
|
||||
let newName = $state('');
|
||||
let newCompositor = $state('');
|
||||
let saving = $state(false);
|
||||
|
||||
// Upload form
|
||||
let uploadScoreId = $state('');
|
||||
let uploadPiece = $state('1');
|
||||
let uploadInstrument = $state('');
|
||||
let uploadVersion = $state('1');
|
||||
let uploadFile: File | null = $state(null);
|
||||
let uploading = $state(false);
|
||||
let uploadError = $state('');
|
||||
let uploadSuccess = $state('');
|
||||
let selectedScorePieceCount = $state(1);
|
||||
let showAdvanced = $state(false);
|
||||
let uploadKey = $state('');
|
||||
let uploadClef = $state('');
|
||||
let uploadVariant = $state('');
|
||||
let uploadPart = $state('1');
|
||||
|
||||
// When score is selected, get piece count
|
||||
async function handleScoreSelect(e: Event) {
|
||||
const target = e.target as HTMLSelectElement;
|
||||
uploadScoreId = target.value;
|
||||
if (uploadScoreId) {
|
||||
try {
|
||||
const pieces = await apiService.getPieces(uploadScoreId);
|
||||
selectedScorePieceCount = pieces.length;
|
||||
if (selectedScorePieceCount === 1) {
|
||||
uploadPiece = '1';
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
selectedScorePieceCount = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getExpectedFilename(): string {
|
||||
if (!uploadInstrument) return '';
|
||||
const inst = INSTRUMENTS.find(i => i.code === uploadInstrument);
|
||||
const instName = inst ? inst.name.toLowerCase().replace(/ /g, '_') : uploadInstrument;
|
||||
const key = uploadKey || inst?.defaultKey || '';
|
||||
const keyStr = key ? `_${key}` : '';
|
||||
const clef = uploadClef ? `_${uploadClef}` : '';
|
||||
const variant = uploadVariant ? `_${uploadVariant}` : '';
|
||||
return `${instName}${variant}${keyStr}${clef}_${uploadPart}.pdf`;
|
||||
}
|
||||
|
||||
let expectedFilename = $derived(getExpectedFilename());
|
||||
|
||||
onMount(async () => {
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
|
||||
const unsubscribe = auth.subscribe((state) => {
|
||||
userRole = state.user?.role || '';
|
||||
});
|
||||
|
||||
if (userRole !== 'admin') {
|
||||
unsubscribe();
|
||||
goto('/scores');
|
||||
return;
|
||||
}
|
||||
|
||||
await loadScores();
|
||||
});
|
||||
|
||||
async function loadScores() {
|
||||
loading = true;
|
||||
try {
|
||||
const allScores = await apiService.getScores();
|
||||
// Sort by ID descending (newest first)
|
||||
scores = allScores.sort((a, b) => parseInt(b.id) - parseInt(a.id));
|
||||
} catch (err) {
|
||||
error = 'Erreur lors du chargement';
|
||||
console.error(err);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function createScore() {
|
||||
if (!newName.trim()) return;
|
||||
saving = true;
|
||||
try {
|
||||
const result = await apiService.createScore(newName, newCompositor);
|
||||
if (result.success) {
|
||||
showForm = false;
|
||||
newName = '';
|
||||
newCompositor = '';
|
||||
await loadScores();
|
||||
} else {
|
||||
error = result.error || 'Erreur';
|
||||
}
|
||||
} catch (err) {
|
||||
error = 'Erreur lors de la création';
|
||||
console.error(err);
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteScore(id: string) {
|
||||
if (!confirm('Êtes-vous sûr de vouloir supprimer cette partition?')) return;
|
||||
try {
|
||||
const result = await apiService.deleteScore(id);
|
||||
if (result.success) {
|
||||
await loadScores();
|
||||
} else {
|
||||
error = result.error || 'Erreur';
|
||||
}
|
||||
} catch (err) {
|
||||
error = 'Erreur lors de la suppression';
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
function handleFileSelect(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
if (target.files && target.files[0]) {
|
||||
uploadFile = target.files[0];
|
||||
}
|
||||
}
|
||||
|
||||
async function uploadPdf() {
|
||||
if (!uploadFile || !uploadInstrument || !uploadScoreId) {
|
||||
uploadError = 'Veuillez remplir tous les champs';
|
||||
return;
|
||||
}
|
||||
uploading = true;
|
||||
uploadError = '';
|
||||
uploadSuccess = '';
|
||||
try {
|
||||
const result = await apiService.uploadPdf(
|
||||
uploadScoreId,
|
||||
uploadFile,
|
||||
uploadPiece,
|
||||
uploadInstrument,
|
||||
uploadVersion,
|
||||
uploadKey,
|
||||
uploadClef,
|
||||
uploadVariant,
|
||||
uploadPart
|
||||
);
|
||||
if (result.success) {
|
||||
uploadSuccess = 'Fichier uploadé avec succès!';
|
||||
uploadFile = null;
|
||||
} else {
|
||||
uploadError = result.error || 'Erreur';
|
||||
}
|
||||
} catch (err) {
|
||||
uploadError = 'Erreur lors de l\'upload';
|
||||
console.error(err);
|
||||
} finally {
|
||||
uploading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Admin - OHMJ</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<h1 class="text-3xl font-bold text-ohmj-primary">Administration</h1>
|
||||
<a href="/scores" class="text-ohmj-primary hover:underline">← Retour aux partitions</a>
|
||||
</div>
|
||||
|
||||
{#if !isAdmin}
|
||||
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
|
||||
Accès refusé. Vous devez être administrateur.
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Tabs -->
|
||||
<div class="mb-6 border-b">
|
||||
<nav class="flex gap-4">
|
||||
<button
|
||||
class="px-4 py-2 border-b-2 border-ohmj-primary text-ohmj-primary font-semibold"
|
||||
>
|
||||
Partitions
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
|
||||
{error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Create new score -->
|
||||
<div class="mb-8">
|
||||
<button
|
||||
onclick={() => showForm = !showForm}
|
||||
class="bg-ohmj-primary text-white px-4 py-2 rounded hover:bg-ohmj-secondary transition-colors"
|
||||
>
|
||||
{showForm ? 'Annuler' : '+ Nouvelle partition'}
|
||||
</button>
|
||||
|
||||
{#if showForm}
|
||||
<div class="mt-4 p-4 bg-gray-50 rounded-lg">
|
||||
<form onsubmit={(e) => { e.preventDefault(); createScore(); }} class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Nom</label>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={newName}
|
||||
required
|
||||
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-ohmj-primary focus:border-ohmj-primary"
|
||||
placeholder="Nom du morceau"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Compositeur</label>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={newCompositor}
|
||||
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-ohmj-primary focus:border-ohmj-primary"
|
||||
placeholder="Compositeur (optionnel)"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
class="bg-ohmj-primary text-white px-4 py-2 rounded hover:bg-ohmj-secondary disabled:opacity-50"
|
||||
>
|
||||
{saving ? 'Création...' : 'Créer'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Upload PDF -->
|
||||
<div class="mb-8 p-4 bg-gray-50 rounded-lg">
|
||||
<h2 class="text-xl font-semibold text-gray-700 mb-4">Uploader un PDF</h2>
|
||||
<form onsubmit={(e) => { e.preventDefault(); uploadPdf(); }} class="space-y-4">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Score</label>
|
||||
<select
|
||||
value={uploadScoreId}
|
||||
onchange={handleScoreSelect}
|
||||
required
|
||||
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white"
|
||||
>
|
||||
<option value="">Sélectionner...</option>
|
||||
{#each scores as score}
|
||||
<option value={score.id}>{score.id} - {score.name.substring(0, 20)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Instrument</label>
|
||||
<select
|
||||
bind:value={uploadInstrument}
|
||||
required
|
||||
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white"
|
||||
>
|
||||
<option value="">Sélectionner...</option>
|
||||
{#each INSTRUMENTS as inst}
|
||||
<option value={inst.code}>{inst.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
showAdvanced = !showAdvanced;
|
||||
if (showAdvanced && !uploadKey) {
|
||||
const inst = INSTRUMENTS.find(i => i.code === uploadInstrument);
|
||||
if (inst?.defaultKey) {
|
||||
uploadKey = inst.defaultKey;
|
||||
}
|
||||
}
|
||||
}}
|
||||
class="mt-6 text-sm text-ohmj-primary hover:underline"
|
||||
>
|
||||
{showAdvanced ? '▼ Masquer' : '▶ Options avancées'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if showAdvanced}
|
||||
<div class="grid grid-cols-2 md:grid-cols-7 gap-4 p-3 bg-gray-100 rounded">
|
||||
{#if selectedScorePieceCount > 1}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Pièce</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
bind:value={uploadPiece}
|
||||
required
|
||||
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm"
|
||||
placeholder="1"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Version</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
bind:value={uploadVersion}
|
||||
required
|
||||
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm"
|
||||
placeholder="1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Tonalité</label>
|
||||
<select bind:value={uploadKey} class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white">
|
||||
<option value="">-</option>
|
||||
<option value="sib">Si♭ (sib)</option>
|
||||
<option value="mib">Mi♭ (mib)</option>
|
||||
<option value="fa">Fa (fa)</option>
|
||||
<option value="do">Do (ut)</option>
|
||||
<option value="sol">Sol</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Clé</label>
|
||||
<select bind:value={uploadClef} class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white">
|
||||
<option value="">-</option>
|
||||
<option value="clesol">Sol</option>
|
||||
<option value="clefa">Fa</option>
|
||||
<option value="cleut">Ut</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Partie</label>
|
||||
<select bind:value={uploadPart} class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Variante</label>
|
||||
<select bind:value={uploadVariant} class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white">
|
||||
<option value="">-</option>
|
||||
<option value="solo">Solo</option>
|
||||
<option value="default">Default (substitut)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => showAdvanced = false}
|
||||
class="mt-1 text-sm text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
Masquer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-4 p-3 bg-blue-50 rounded border border-blue-200">
|
||||
<p class="text-sm text-blue-800">
|
||||
<strong>Nom attendu:</strong> <code class="bg-white px-2 py-1 rounded">{expectedFilename || 'Sélectionnez un instrument'}</code>
|
||||
</p>
|
||||
<p class="text-xs text-blue-600 mt-1">
|
||||
Le fichier sera renommé automatiquement lors de l'upload
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<label class="block text-sm font-medium text-gray-700">Fichier PDF</label>
|
||||
<input
|
||||
type="file"
|
||||
accept=".pdf"
|
||||
onchange={handleFileSelect}
|
||||
required
|
||||
class="mt-1 block w-full text-sm"
|
||||
/>
|
||||
</div>
|
||||
{#if uploadError}
|
||||
<p class="text-red-600 text-sm">{uploadError}</p>
|
||||
{/if}
|
||||
{#if uploadSuccess}
|
||||
<p class="text-green-600 text-sm">{uploadSuccess}</p>
|
||||
{/if}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={uploading}
|
||||
class="bg-ohmj-primary text-white px-4 py-2 rounded hover:bg-ohmj-secondary disabled:opacity-50"
|
||||
>
|
||||
{uploading ? 'Upload...' : 'Uploader'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- List of scores -->
|
||||
<div class="bg-white rounded-lg shadow overflow-hidden">
|
||||
<table class="min-w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">ID</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nom</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Compositeur</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase w-32">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
{#each scores as score}
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{score.id}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{score.name}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{score.compositor || '-'}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||||
<div class="flex justify-end gap-3">
|
||||
<a
|
||||
href="/scores/{score.id}"
|
||||
class="text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
Voir
|
||||
</a>
|
||||
<button
|
||||
onclick={() => deleteScore(score.id)}
|
||||
class="text-red-600 hover:text-red-800"
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user