ohmj/ohmj2
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

[FEAT] Full function and deployed version

Browse Source
This commit is contained in:
NADAL Jean-Baptiste
2026-02-19 15:15:58 +01:00
parent e7c4768589
commit cf0db69f2d
24 changed files with 6949 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
partitions/.env Normal file
View File

@@ -0,0 +1 @@
VITE_API_URL=https://ohmj-api.c.nadal-fr.com

35
partitions/nginx.conf Normal file
View File

@@ -0,0 +1,35 @@
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
# Gzip compression
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
# Cache static assets (including .mjs)
location ~* \.(js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# Force correct MIME type for .mjs files
location ~* \.mjs$ {
add_header Content-Type application/javascript;
expires 1y;
add_header Cache-Control "public, immutable";
}
# All routes should serve index.html (SPA)
location / {
try_files $uri $uri/ /index.html;
}
# Security headers
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
}

25
partitions/src/lib/api.ts
View File

@@ -3,10 +3,10 @@ import { auth } from '$lib/stores/auth';
import { browser } from '$app/environment';
import { get } from 'svelte/store';
// Use environment variable or default to localhost
const API_BASE_URL = browser
? (import.meta.env.VITE_API_URL || 'http://localhost:8000')
: (import.meta.env.VITE_API_URL || 'http://localhost:8000');
const API_BASE_URL_LOCAL = 'http://localhost:8000';
const API_BASE_URL_PROD = 'https://ohmj-api.c.nadal-fr.com';
const API_BASE_URL = browser ? API_BASE_URL_PROD : API_BASE_URL_LOCAL;
const api = axios.create({
baseURL: API_BASE_URL,
@@ -28,7 +28,8 @@ api.interceptors.request.use((config) => {
api.interceptors.response.use(
(response) => response,
(error: AxiosError) => {
if (error.response?.status === 401) {
// Only logout on actual 401 from the server, not network/CORS errors
if (error.response?.status === 401 && !error.message?.includes('Network Error')) {
auth.logout();
if (browser) {
window.location.href = '/';
@@ -110,9 +111,11 @@ export const apiService = {
},
getDownloadUrl(path: string): string {
// Security: Token is now passed via Authorization header, not URL
// The backend will read the token from the header in the request
return `${API_BASE_URL}/download/${path}`;
// Pass token in URL for direct browser access (PDF viewer, iframe, etc.)
// Safe over HTTPS
const authState = get(auth);
const token = authState.token ? encodeURIComponent(authState.token) : '';
return `${API_BASE_URL}/download/${path}?token=${token}`;
},
// New method to download with proper auth header
@@ -128,8 +131,8 @@ export const apiService = {
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 });
async updateScore(id: string, name: string, compositor: string, ressource: string = ''): Promise<{ success: boolean; error?: string }> {
const response = await api.put(`/admin/scores/${id}`, { name, compositor, ressource });
return response.data;
},
@@ -151,7 +154,7 @@ export const apiService = {
const response = await api.post(`/admin/scores/${scoreId}/upload`, formData, {
headers: {
'Content-Type': 'multipart/form-data'
'Content-Type': undefined
}
});
return response.data;

8
partitions/src/lib/components/PdfViewer.svelte
View File

@@ -3,7 +3,7 @@
import * as pdfjsLib from 'pdfjs-dist';
import { api } from '$lib/api';
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs';
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.js';
interface Props {
pdfUrl: string;
@@ -34,9 +34,9 @@
loading = true;
error = '';
try {
// Load PDF via axios to include auth token
const path = pdfUrl.split('/download/')[1];
const response = await api.get(`/download/${path}`, {
// pdfUrl already contains the full URL with token
// Use it directly with axios
const response = await api.get(pdfUrl, {
responseType: 'blob'
});
const blob = new Blob([response.data], { type: 'application/pdf' });

11
partitions/src/routes/admin/+page.svelte
View File

@@ -38,6 +38,7 @@
let showForm = $state(false);
let newName = $state('');
let newCompositor = $state('');
let newRessource = $state('');
let newPieceCount = $state(1);
let newPieceNames = $state<string[]>(['']);
let saving = $state(false);
@@ -139,11 +140,12 @@
number: i + 1,
name: name.trim() || `Partie ${i + 1}`
}));
const result = await apiService.createScore(newName, newCompositor, pieces);
const result = await apiService.createScore(newName, newCompositor, pieces, newRessource);
if (result.success) {
showForm = false;
newName = '';
newCompositor = '';
newRessource = '';
newPieceCount = 1;
newPieceNames = [''];
await loadScores();
@@ -341,9 +343,12 @@
</a>
<button
onclick={() => deleteConfirmId = score.id}
class="text-red-600 hover:text-red-800"
class="text-red-600 hover:text-red-800 p-1 rounded-full hover:bg-red-50"
title="Supprimer"
>
Supprimer
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.997-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
</svg>
</button>
</div>
</td>

225
partitions/src/routes/admin/[id]/+page.svelte
View File

@@ -31,11 +31,18 @@
let scoreId = $derived($page.params.id || '');
let scoreName = $state('');
let scoreCompositor = $state('');
let scoreRessource = $state('');
let loading = $state(true);
let error = $state('');
let userRole = $state('');
let isAdmin = $derived(userRole === 'admin');
// Edit mode
let editingField = $state<string | null>(null);
let editValue = $state('');
let saving = $state(false);
// Upload form
let uploadPiece = $state('1');
let uploadInstrument = $state('');
@@ -52,6 +59,16 @@
let uploadVariant = $state('');
let uploadPart = $state('1');
// Auto-set default key when instrument changes
$effect(() => {
if (uploadInstrument) {
const inst = INSTRUMENTS.find(i => i.code === uploadInstrument);
if (inst?.defaultKey) {
uploadKey = inst.defaultKey;
}
}
});
// File tree
let files: any[] = $state([]);
@@ -63,6 +80,8 @@
try {
const score = await apiService.getScore(scoreId);
scoreName = score.name;
scoreCompositor = score.compositor || '';
scoreRessource = score.ressource || '';
} catch (err) {
console.error(err);
error = 'Partition non trouvée';
@@ -210,21 +229,155 @@
deletingFile = false;
}
}
function startEdit(field: string, value: string) {
editingField = field;
editValue = value;
}
function cancelEdit() {
editingField = null;
editValue = '';
}
async function saveEdit(field: string) {
saving = true;
try {
if (field === 'name') {
scoreName = editValue;
} else if (field === 'compositor') {
scoreCompositor = editValue;
} else if (field === 'ressource') {
scoreRessource = editValue;
}
const result = await apiService.updateScore(scoreId, scoreName, scoreCompositor, scoreRessource);
if (!result.success) {
error = result.error || 'Erreur lors de la mise à jour';
await loadScoreInfo();
}
} catch (err) {
error = 'Erreur lors de la mise à jour';
console.error(err);
await loadScoreInfo();
} finally {
editingField = null;
editValue = '';
saving = false;
}
}
</script>
<div class="max-w-6xl mx-auto p-6">
<div class="mb-6 flex justify-between items-center">
<h1 class="text-3xl font-bold text-ohmj-primary">
{scoreName || 'Chargement...'}
</h1>
<a href="/admin" class="text-ohmj-primary hover:underline">← Retour à l'admin</a>
<div class="mb-6">
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-bold text-gray-400">№ {scoreId}</span>
<a href="/admin" class="text-ohmj-primary hover:underline">← Retour à l'admin</a>
</div>
<!-- Info Card -->
<div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden mb-6">
<div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
<h2 class="text-lg font-semibold text-ohmj-primary">Informations de la partition</h2>
</div>
<div class="p-4">
<!-- Name -->
<div class="flex items-center gap-4 py-3 border-b border-gray-100">
<label class="w-32 text-sm font-semibold text-gray-600 flex-shrink-0">Nom</label>
{#if editingField === 'name'}
<input
type="text"
bind:value={editValue}
autofocus
onkeydown={(e) => { if (e.key === 'Enter') saveEdit('name'); if (e.key === 'Escape') cancelEdit(); }}
class="flex-1 text-xl font-bold text-ohmj-primary border-b-2 border-ohmj-primary bg-transparent px-3 py-2 focus:outline-none"
/>
<button onclick={() => saveEdit('name')} disabled={saving} class="text-green-600 hover:text-green-800 p-2 rounded-full hover:bg-green-50" title="Enregistrer">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
</button>
<button onclick={() => cancelEdit()} disabled={saving} class="text-red-600 hover:text-red-800 p-2 rounded-full hover:bg-red-50" title="Annuler">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
{:else}
<span class="flex-1 text-xl font-bold text-ohmj-primary cursor-pointer hover:text-ohmj-secondary px-3 py-2 rounded-lg hover:bg-gray-50" onclick={() => startEdit('name', scoreName)} title="Cliquer pour modifier">
{scoreName || 'Sans titre'}
</span>
<button onclick={() => startEdit('name', scoreName)} class="text-gray-400 hover:text-ohmj-primary p-2 rounded-full hover:bg-gray-100" title="Modifier">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
</button>
{/if}
</div>
<!-- Compositor -->
<div class="flex items-center gap-4 py-3 border-b border-gray-100">
<label class="w-32 text-sm font-semibold text-gray-600 flex-shrink-0">Compositeur</label>
{#if editingField === 'compositor'}
<input
type="text"
bind:value={editValue}
autofocus
placeholder="Compositeur"
onkeydown={(e) => { if (e.key === 'Enter') saveEdit('compositor'); if (e.key === 'Escape') cancelEdit(); }}
class="flex-1 text-lg text-gray-700 border-b-2 border-ohmj-primary bg-transparent px-3 py-2 focus:outline-none"
/>
<button onclick={() => saveEdit('compositor')} disabled={saving} class="text-green-600 hover:text-green-800 p-2 rounded-full hover:bg-green-50" title="Enregistrer">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
</button>
<button onclick={() => cancelEdit()} disabled={saving} class="text-red-600 hover:text-red-800 p-2 rounded-full hover:bg-red-50" title="Annuler">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
{:else}
<span class="flex-1 text-lg text-gray-700 cursor-pointer hover:text-ohmj-primary px-3 py-2 rounded-lg hover:bg-gray-50" onclick={() => startEdit('compositor', scoreCompositor)} title="Cliquer pour modifier">
{scoreCompositor || 'Aucun compositeur'}
</span>
<button onclick={() => startEdit('compositor', scoreCompositor)} class="text-gray-400 hover:text-ohmj-primary p-2 rounded-full hover:bg-gray-100" title="Modifier">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
</button>
{/if}
</div>
<!-- Ressource -->
<div class="flex items-center gap-4 py-3">
<label class="w-32 text-sm font-semibold text-gray-600 flex-shrink-0">Ressource</label>
{#if editingField === 'ressource'}
<input
type="url"
bind:value={editValue}
autofocus
placeholder="URL (YouTube, Google Drive, etc.)"
onkeydown={(e) => { if (e.key === 'Enter') saveEdit('ressource'); if (e.key === 'Escape') cancelEdit(); }}
class="flex-1 text-sm text-blue-600 border-b-2 border-ohmj-primary bg-transparent px-3 py-2 focus:outline-none"
/>
<button onclick={() => saveEdit('ressource')} disabled={saving} class="text-green-600 hover:text-green-800 p-2 rounded-full hover:bg-green-50" title="Enregistrer">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
</button>
<button onclick={() => cancelEdit()} disabled={saving} class="text-red-600 hover:text-red-800 p-2 rounded-full hover:bg-red-50" title="Annuler">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
{:else}
{#if scoreRessource}
<span class="flex-1 text-sm text-blue-600 cursor-pointer hover:text-blue-800 px-3 py-2 rounded-lg hover:bg-gray-50" onclick={() => startEdit('ressource', scoreRessource)} title="Cliquer pour modifier">
🔗 {scoreRessource}
</span>
{:else}
<span class="flex-1 text-sm text-gray-400 cursor-pointer hover:text-gray-600 px-3 py-2 rounded-lg hover:bg-gray-50" onclick={() => startEdit('ressource', '')} title="Cliquer pour ajouter">
Aucune ressource
</span>
{/if}
<button onclick={() => startEdit('ressource', scoreRessource)} class="text-gray-400 hover:text-ohmj-primary p-2 rounded-full hover:bg-gray-100" title="Modifier">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
</button>
{/if}
</div>
</div>
</div>
</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}
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
{error}
</div>
{/if}
{#if !isAdmin}
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
@@ -232,8 +385,11 @@
</div>
{:else}
<!-- 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>
<div class="mb-8 p-0 bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
<h2 class="text-lg font-semibold text-ohmj-primary">Ajouter une partition</h2>
</div>
<div class="p-6">
<form onsubmit={(e) => { e.preventDefault(); uploadPdf(); }} class="space-y-4">
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div>
@@ -366,11 +522,12 @@
</button>
</form>
</div>
</div>
<!-- File Tree -->
<!-- File Tree -->
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="p-4 border-b bg-gray-50">
<h2 class="text-lg font-semibold text-gray-700">Fichiers</h2>
<h2 class="text-lg font-semibold text-ohmj-primary">Fichiers</h2>
</div>
<div class="p-4">
{#if files.length === 0}
@@ -393,25 +550,29 @@
{@const isLast = fileIndex === version.children.length - 1}
<div class="ml-4">
{#if isLast}
<span class="text-gray-500">└─ 📄 {file.name}</span>
<button
onclick={() => deleteFilePath = file.path}
class="ml-2 text-red-500 hover:text-red-700"
title="Supprimer"
>
✕
</button>
{:else}
<span class="text-gray-500">├─ 📄 {file.name}</span>
<button
onclick={() => deleteFilePath = file.path}
class="ml-2 text-red-500 hover:text-red-700"
title="Supprimer"
>
✕
</button>
{/if}
{#if isLast}
<span class="text-gray-500">└─ 📄 {file.name}</span>
<button
onclick={() => deleteFilePath = file.path}
class="ml-2 text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-50"
title="Supprimer"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.997-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
</svg>
</button>
{:else}
<span class="text-gray-500">├─ 📄 {file.name}</span>
<button
onclick={() => deleteFilePath = file.path}
class="ml-2 text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-50"
title="Supprimer"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.997-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
</svg>
</button>
{/if}
</div>
{/each}
{/if}

6
partitions/svelte.config.js
View File

@@ -19,10 +19,12 @@ const config = {
csp: {
directives: {
'default-src': ['self'],
'script-src': ['self', 'unsafe-inline'],
'script-src': ['self', 'unsafe-inline', 'blob:'],
'script-src-elem': ['self', 'blob:'],
'worker-src': ['self', 'blob:'],
'style-src': ['self', 'unsafe-inline'],
'img-src': ['self', 'data:', 'blob:'],
'connect-src': ['self', 'http://localhost:8000', 'https://*.ohmj.fr', 'blob:'],
'connect-src': ['self', 'http://localhost:8000', 'https://ohmj-api.c.nadal-fr.com', 'blob:'],
'font-src': ['self'],
'object-src': ['none'],
'frame-ancestors': ['none'],

3
partitions/vite.config.ts
View File

@@ -5,5 +5,8 @@ export default defineConfig({
plugins: [sveltekit()],
server: {
port: 5173
},
define: {
'import.meta.env.VITE_API_URL': JSON.stringify(process.env.VITE_API_URL || 'http://localhost:8000')
}
});