feat: per-task image/annotations, annotation editor toolbar, Tailwind compiled
- Add per-task file upload with image preview in task editor - Add dedicated annotation editor page (task_drawing.html) with Fabric.js - Add color picker, stroke width, and line dash controls to annotation toolbar - Apply property changes to selected objects in real-time - Disable style controls until a drawing tool or object is selected - Remove zoom/pan from annotation toolbar (simplified UX) - Auto-switch to select mode after placing annotation elements - Show annotation overlay on task image previews (read-only canvas) - Add file proxy route in measure blueprint for task file access - Add file_path/file_type fields to TaskCreate/TaskUpdate Pydantic schemas - Replace Tailwind CDN with compiled CSS (tailwind.config.js with full shades) - Fix Alpine.js x-init crash: extract annotations JSON to <script> tags (recipe_preview.html, task_execute.html) to avoid HTML attribute breakage Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Adriano
@@ -10,7 +10,6 @@
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
/* Drag-and-drop overlay */
|
||||
.drop-zone {
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
@@ -23,50 +22,6 @@
|
||||
.dark .drop-zone.drag-over {
|
||||
background-color: rgba(59, 130, 246, 0.08);
|
||||
}
|
||||
|
||||
/* Annotation toolbar button */
|
||||
.anno-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.375rem 0.625rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-card);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.anno-btn:hover {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--text-muted);
|
||||
}
|
||||
.anno-btn.active {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.anno-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Canvas container */
|
||||
.canvas-container {
|
||||
position: relative;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
min-height: 400px;
|
||||
}
|
||||
.canvas-container canvas {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@@ -131,7 +86,7 @@
|
||||
<p class="text-sm text-[var(--text-secondary)]" x-text="name"></p>
|
||||
{% else %}
|
||||
<p class="text-sm text-[var(--text-secondary)]">
|
||||
{{ _('Compila i dati della ricetta e carica il disegno tecnico') }}
|
||||
{{ _('Compila i dati della ricetta') }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -281,7 +236,7 @@
|
||||
</div>
|
||||
|
||||
<!-- ============================================================
|
||||
2. Card: Upload / Annotazioni (Canvas Fabric.js)
|
||||
2. Card: Immagine Anteprima (thumbnail ricetta)
|
||||
============================================================ -->
|
||||
<div class="tmf-card mb-6">
|
||||
<div class="tmf-card-header flex items-center justify-between">
|
||||
@@ -290,151 +245,36 @@
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
{{ _('Disegno Tecnico e Annotazioni') }}
|
||||
{{ _('Immagine Anteprima') }}
|
||||
</div>
|
||||
<!-- File indicator -->
|
||||
<template x-if="currentFilePath">
|
||||
<span class="badge badge-pass text-xs">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
{{ _('Immagine caricata') }}
|
||||
</span>
|
||||
</template>
|
||||
<span x-show="currentFilePath" class="badge badge-pass text-xs">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
{{ _('Immagine caricata') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="tmf-card-body space-y-4">
|
||||
|
||||
<!-- Annotation Toolbar -->
|
||||
<!-- Current image preview -->
|
||||
<div x-show="currentFilePath"
|
||||
x-transition
|
||||
class="flex flex-wrap items-center gap-1.5 p-2 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]">
|
||||
|
||||
<!-- Select Tool -->
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
:class="{ 'active': annoTool === 'select' }"
|
||||
@click="setAnnoTool('select')"
|
||||
title="{{ _('Seleziona') }}">
|
||||
class="relative rounded-lg overflow-hidden bg-[var(--bg-secondary)] border border-[var(--border-color)]">
|
||||
<img x-bind:src="currentFilePath ? ('/maker/api/files/' + currentFilePath) : ''"
|
||||
class="block mx-auto max-h-64 object-contain p-2"
|
||||
loading="lazy">
|
||||
<!-- Remove button -->
|
||||
<button @click.stop="currentFilePath = ''"
|
||||
type="button"
|
||||
class="absolute top-2 right-2 p-1.5 rounded-full bg-red-500/80 hover:bg-red-600 text-white transition-colors"
|
||||
title="{{ _('Rimuovi immagine') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 15l-2 5L9 9l11 4-5 2z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{{ _('Seleziona') }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Marker Tool -->
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
:class="{ 'active': annoTool === 'marker' }"
|
||||
@click="setAnnoTool('marker')"
|
||||
title="{{ _('Marker numerato') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{{ _('Marker') }} #</span>
|
||||
</button>
|
||||
|
||||
<!-- Arrow Tool -->
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
:class="{ 'active': annoTool === 'arrow' }"
|
||||
@click="setAnnoTool('arrow')"
|
||||
title="{{ _('Freccia') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{{ _('Freccia') }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Rectangle Tool -->
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
:class="{ 'active': annoTool === 'rect' }"
|
||||
@click="setAnnoTool('rect')"
|
||||
title="{{ _('Rettangolo') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{{ _('Rettangolo') }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="w-px h-6 bg-[var(--border-color)] mx-1"></div>
|
||||
|
||||
<!-- Delete -->
|
||||
<button type="button"
|
||||
class="anno-btn text-red-500 hover:text-red-600"
|
||||
@click="deleteAnnotation()"
|
||||
:disabled="!annoSelected"
|
||||
title="{{ _('Elimina selezionato') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{{ _('Elimina') }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="w-px h-6 bg-[var(--border-color)] mx-1"></div>
|
||||
|
||||
<!-- Zoom Controls -->
|
||||
<span class="text-xs text-[var(--text-muted)] hidden sm:inline mr-1">{{ _('Zoom') }}:</span>
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
@click="zoomCanvas(-0.1)"
|
||||
title="{{ _('Zoom indietro') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
@click="zoomCanvas(0.1)"
|
||||
title="{{ _('Zoom avanti') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
@click="resetZoom()"
|
||||
title="{{ _('Reset zoom') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="w-px h-6 bg-[var(--border-color)] mx-1"></div>
|
||||
|
||||
<!-- Pan Mode -->
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
:class="{ 'active': annoTool === 'pan' }"
|
||||
@click="setAnnoTool('pan')"
|
||||
title="{{ _('Trascina') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-2V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11"/>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{{ _('Pan') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Canvas Area (shown when image loaded) -->
|
||||
<div x-show="currentFilePath"
|
||||
x-transition
|
||||
x-data="annotationEditor()"
|
||||
class="canvas-container"
|
||||
id="annotationCanvasContainer">
|
||||
<canvas id="annotationCanvas" x-ref="fabricCanvas"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Drop Zone (always visible for uploading/replacing) -->
|
||||
<!-- Upload area -->
|
||||
<div class="drop-zone p-6 text-center cursor-pointer relative"
|
||||
:class="{ 'drag-over': dragOver }"
|
||||
@dragover.prevent="dragOver = true"
|
||||
@@ -449,40 +289,37 @@
|
||||
class="hidden">
|
||||
|
||||
<!-- Uploading spinner -->
|
||||
<template x-if="uploadingFile">
|
||||
<div class="flex flex-col items-center gap-3 py-4">
|
||||
<svg class="w-8 h-8 animate-spin text-primary" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
|
||||
</svg>
|
||||
<p class="text-sm text-[var(--text-secondary)]">{{ _('Caricamento in corso...') }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<div x-show="uploadingFile" class="flex flex-col items-center gap-3 py-4">
|
||||
<svg class="w-8 h-8 animate-spin text-primary" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
|
||||
</svg>
|
||||
<span class="text-sm text-[var(--text-secondary)]">{{ _('Caricamento in corso...') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Upload prompt -->
|
||||
<template x-if="!uploadingFile">
|
||||
<div class="flex flex-col items-center gap-3 py-4">
|
||||
<div class="w-12 h-12 rounded-full bg-primary-50 dark:bg-primary-900/30 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-[var(--text-primary)]">
|
||||
<template x-if="!currentFilePath">
|
||||
<span>{{ _('Trascina qui il disegno tecnico oppure clicca per selezionare') }}</span>
|
||||
</template>
|
||||
<template x-if="currentFilePath">
|
||||
<span>{{ _('Trascina qui per sostituire il disegno tecnico') }}</span>
|
||||
</template>
|
||||
</p>
|
||||
<p class="text-xs text-[var(--text-muted)] mt-1">
|
||||
{{ _('Formati supportati: PNG, JPG, PDF') }}
|
||||
</p>
|
||||
</div>
|
||||
<div x-show="!uploadingFile" class="flex flex-col items-center gap-3 py-4">
|
||||
<div class="w-12 h-12 rounded-full bg-primary-50 dark:bg-primary-900/30 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
<div class="text-center">
|
||||
<span x-show="!currentFilePath" class="inline-block px-4 py-2 rounded-lg bg-primary text-white text-sm font-semibold mb-2">
|
||||
{{ _('Carica Immagine o PDF') }}
|
||||
</span>
|
||||
<span x-show="currentFilePath" class="inline-block px-4 py-2 rounded-lg bg-[var(--bg-tertiary)] text-[var(--text-primary)] text-sm font-semibold mb-2 border border-[var(--border-color)]">
|
||||
{{ _('Sostituisci Immagine') }}
|
||||
</span>
|
||||
<p class="text-xs text-[var(--text-muted)]">
|
||||
{{ _('Trascina qui oppure clicca. Formati: PNG, JPG, WebP, PDF (max 50MB)') }}
|
||||
</p>
|
||||
<p class="text-xs text-[var(--text-muted)] mt-1">
|
||||
{{ _('Usata come thumbnail nella lista ricette') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -549,7 +386,7 @@
|
||||
{% endif %}
|
||||
|
||||
<!-- ============================================================
|
||||
4. Footer Action Buttons
|
||||
3. Footer Action Buttons
|
||||
============================================================ -->
|
||||
<div class="flex flex-col sm:flex-row items-center gap-3 pt-4 pb-8">
|
||||
<button @click="saveRecipe()"
|
||||
@@ -579,12 +416,6 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||||
<script>
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
|
||||
</script>
|
||||
<script src="{{ url_for('static', filename='js/annotation-editor.js') }}?v=5"></script>
|
||||
<script>
|
||||
function recipeEditor() {
|
||||
return {
|
||||
@@ -598,16 +429,6 @@ function recipeEditor() {
|
||||
description: {{ (recipe.description if recipe and recipe.description else '')|tojson }},
|
||||
changeNotes: '',
|
||||
|
||||
// ---- File upload ----
|
||||
currentFilePath: {{ (recipe.current_version.tasks[0].file_path if recipe and recipe.current_version and recipe.current_version.tasks and recipe.current_version.tasks|length > 0 else None)|tojson }},
|
||||
uploadingFile: false,
|
||||
dragOver: false,
|
||||
|
||||
// ---- Annotation state (managed by annotation-editor.js) ----
|
||||
annotationsJson: {{ (recipe.current_version.tasks[0].annotations_json if recipe and recipe.current_version and recipe.current_version.tasks and recipe.current_version.tasks|length > 0 and recipe.current_version.tasks[0].annotations_json else None)|tojson }},
|
||||
annoTool: 'select',
|
||||
annoSelected: false,
|
||||
|
||||
// ---- Save state ----
|
||||
saving: false,
|
||||
saved: false,
|
||||
@@ -617,20 +438,10 @@ function recipeEditor() {
|
||||
versions: {{ (recipe.versions if recipe and recipe.versions else [])|tojson }},
|
||||
currentVersion: {{ (recipe.current_version.version_number if recipe and recipe.current_version else 0)|tojson }},
|
||||
|
||||
// ============================================================
|
||||
// Init
|
||||
// ============================================================
|
||||
init() {
|
||||
// Listen for annotation selection events from annotation-editor.js
|
||||
window.addEventListener('annotation-selected', (e) => {
|
||||
this.annoSelected = e.detail.selected;
|
||||
});
|
||||
|
||||
// Listen for annotation data changes
|
||||
window.addEventListener('annotations-changed', (e) => {
|
||||
this.annotationsJson = e.detail.json;
|
||||
});
|
||||
},
|
||||
// ---- File upload (thumbnail) ----
|
||||
currentFilePath: {{ (recipe.current_version.tasks[0].file_path if recipe and recipe.current_version and recipe.current_version.tasks and recipe.current_version.tasks|length > 0 and recipe.current_version.tasks[0].file_path else '')|tojson }},
|
||||
uploadingFile: false,
|
||||
dragOver: false,
|
||||
|
||||
// ============================================================
|
||||
// Save Recipe
|
||||
@@ -648,23 +459,16 @@ function recipeEditor() {
|
||||
description: this.description.trim(),
|
||||
};
|
||||
|
||||
// Include file_path for thumbnail
|
||||
if (this.currentFilePath) {
|
||||
payload.file_path = this.currentFilePath;
|
||||
}
|
||||
|
||||
// Include change notes if editing
|
||||
if (!this.isNew && this.changeNotes.trim()) {
|
||||
payload.change_notes = this.changeNotes.trim();
|
||||
}
|
||||
|
||||
// Include annotations if available (may be a JSON string or an object)
|
||||
if (this.annotationsJson) {
|
||||
payload.annotations_json = (typeof this.annotationsJson === 'string')
|
||||
? JSON.parse(this.annotationsJson)
|
||||
: this.annotationsJson;
|
||||
}
|
||||
|
||||
// Include file path if uploaded
|
||||
if (this.currentFilePath) {
|
||||
payload.file_path = this.currentFilePath;
|
||||
}
|
||||
|
||||
const url = this.isNew
|
||||
? '/maker/api/recipes'
|
||||
: '/maker/api/recipes/' + this.recipeId;
|
||||
@@ -683,7 +487,7 @@ function recipeEditor() {
|
||||
const data = await resp.json();
|
||||
|
||||
if (data.error) {
|
||||
var detail = data.detail || data.error || '{{ _("Errore nel salvataggio") }}';
|
||||
var detail = data.detail || data.error || {{ _("Errore nel salvataggio")|tojson }};
|
||||
this.errorMessage = (typeof detail === 'string') ? detail : JSON.stringify(detail);
|
||||
this.saving = false;
|
||||
return;
|
||||
@@ -711,108 +515,12 @@ function recipeEditor() {
|
||||
|
||||
} catch (err) {
|
||||
console.error('Save error:', err);
|
||||
this.errorMessage = '{{ _("Errore di connessione al server") }}';
|
||||
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
||||
}
|
||||
|
||||
this.saving = false;
|
||||
},
|
||||
|
||||
// ============================================================
|
||||
// File Upload
|
||||
// ============================================================
|
||||
async uploadFile(file) {
|
||||
if (!file) return;
|
||||
|
||||
// Validate file type
|
||||
const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp', 'application/pdf'];
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
this.errorMessage = '{{ _("Formato file non supportato. Usa PNG, JPG o PDF.") }}';
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file size (max 20MB)
|
||||
const maxSize = 20 * 1024 * 1024;
|
||||
if (file.size > maxSize) {
|
||||
this.errorMessage = '{{ _("File troppo grande. Dimensione massima: 20MB.") }}';
|
||||
return;
|
||||
}
|
||||
|
||||
this.uploadingFile = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
if (this.recipeId) {
|
||||
formData.append('recipe_id', this.recipeId);
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await fetch('/maker/api/upload', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-CSRFToken': csrfToken || ''
|
||||
},
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await resp.json();
|
||||
|
||||
if (data.error) {
|
||||
this.errorMessage = data.detail || '{{ _("Errore durante il caricamento del file") }}';
|
||||
} else {
|
||||
this.currentFilePath = data.file_path;
|
||||
// Notify annotation-editor to load the new image
|
||||
window.dispatchEvent(new CustomEvent('image-loaded', {
|
||||
detail: { path: data.file_path, annotations: null }
|
||||
}));
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error('Upload error:', err);
|
||||
this.errorMessage = '{{ _("Errore di connessione durante il caricamento") }}';
|
||||
}
|
||||
|
||||
this.uploadingFile = false;
|
||||
this.dragOver = false;
|
||||
},
|
||||
|
||||
// ============================================================
|
||||
// Drag & Drop
|
||||
// ============================================================
|
||||
handleDrop(event) {
|
||||
this.dragOver = false;
|
||||
const files = event.dataTransfer?.files;
|
||||
if (files && files.length > 0) {
|
||||
this.uploadFile(files[0]);
|
||||
}
|
||||
},
|
||||
|
||||
// ============================================================
|
||||
// Annotation Tools (delegates to annotation-editor.js)
|
||||
// ============================================================
|
||||
setAnnoTool(tool) {
|
||||
this.annoTool = tool;
|
||||
window.dispatchEvent(new CustomEvent('anno-tool-change', {
|
||||
detail: { tool }
|
||||
}));
|
||||
},
|
||||
|
||||
deleteAnnotation() {
|
||||
window.dispatchEvent(new CustomEvent('anno-delete-selected'));
|
||||
},
|
||||
|
||||
zoomCanvas(delta) {
|
||||
window.dispatchEvent(new CustomEvent('anno-zoom', {
|
||||
detail: { delta }
|
||||
}));
|
||||
},
|
||||
|
||||
resetZoom() {
|
||||
window.dispatchEvent(new CustomEvent('anno-zoom-reset'));
|
||||
},
|
||||
|
||||
// ============================================================
|
||||
// Navigation
|
||||
// ============================================================
|
||||
@@ -826,6 +534,69 @@ function recipeEditor() {
|
||||
if (this.recipeId) {
|
||||
window.location.href = '/maker/recipes/' + this.recipeId + '/tasks';
|
||||
}
|
||||
},
|
||||
|
||||
// ============================================================
|
||||
// File Upload (thumbnail)
|
||||
// ============================================================
|
||||
handleDrop(event) {
|
||||
this.dragOver = false;
|
||||
const files = event.dataTransfer?.files;
|
||||
if (files && files.length > 0) {
|
||||
this.uploadFile(files[0]);
|
||||
}
|
||||
},
|
||||
|
||||
async uploadFile(file) {
|
||||
if (!file) return;
|
||||
|
||||
// Validate file type
|
||||
const allowed = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'application/pdf'];
|
||||
if (!allowed.includes(file.type)) {
|
||||
this.errorMessage = {{ _("Formato file non supportato. Usa PNG, JPG, GIF, WebP o PDF.")|tojson }};
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate size (50MB)
|
||||
if (file.size > 50 * 1024 * 1024) {
|
||||
this.errorMessage = {{ _("File troppo grande. Massimo 50MB.")|tojson }};
|
||||
return;
|
||||
}
|
||||
|
||||
this.uploadingFile = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
const csrfToken = document.querySelector('meta[name=csrf-token]')?.content;
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
if (this.recipeId) {
|
||||
formData.append('recipe_id', this.recipeId);
|
||||
}
|
||||
|
||||
const resp = await fetch('/maker/api/upload', {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRFToken': csrfToken || '' },
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await resp.json();
|
||||
|
||||
if (data.error) {
|
||||
this.errorMessage = data.detail || {{ _("Errore nel caricamento del file")|tojson }};
|
||||
this.uploadingFile = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentFilePath = data.file_path;
|
||||
|
||||
} catch (err) {
|
||||
console.error('Upload error:', err);
|
||||
this.errorMessage = {{ _("Errore di connessione durante l'upload")|tojson }};
|
||||
}
|
||||
|
||||
this.uploadingFile = false;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user