feat: FASE 4 - Editor Maker (Fabric.js) con annotazioni, task editor, preview e storico versioni
- recipe_list.html: lista ricette con filtri, paginazione, cards Alpine.js - recipe_editor.html: form metadati, upload drag-and-drop, canvas Fabric.js per annotazioni - annotation-editor.js: editor annotazioni Fabric.js (marker, frecce, rettangoli, zoom, pan) - task_editor.html: editor task/subtask inline con drag-and-drop reorder e tolleranze - recipe_preview.html: anteprima ricetta come MeasurementTec - version_history.html: timeline versioni con conteggio misurazioni AJAX - maker.py: 6 route pagina + 13 proxy AJAX, gestione sicura risposte lista API - i18n: 170+ stringhe tradotte IT/EN per tutti i template Maker Architect review: 3 CRITICO + 5 MEDIO + 3 NEW risolti, 2 BASSO differiti Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Adriano
@@ -0,0 +1,826 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}
|
||||
{% if recipe %}
|
||||
{{ recipe.code }} — {{ _('Modifica Ricetta') }}
|
||||
{% else %}
|
||||
{{ _('Nuova Ricetta') }}
|
||||
{% endif %}
|
||||
— TieMeasureFlow
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
/* Drag-and-drop overlay */
|
||||
.drop-zone {
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
transition: border-color 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
.drop-zone.drag-over {
|
||||
border-color: var(--color-primary);
|
||||
background-color: rgba(37, 99, 235, 0.05);
|
||||
}
|
||||
.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 %}
|
||||
|
||||
{% block content %}
|
||||
{# ——— Determine mode flags ——— #}
|
||||
{% set is_new = (recipe is none) %}
|
||||
{% set recipe_id = recipe.id if recipe else None %}
|
||||
{% set current_version = recipe.current_version if recipe and recipe.current_version else None %}
|
||||
{% set versions = recipe.versions if recipe and recipe.versions else [] %}
|
||||
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-4xl"
|
||||
x-data="recipeEditor()"
|
||||
x-cloak>
|
||||
|
||||
<!-- ============================================================
|
||||
Breadcrumb
|
||||
============================================================ -->
|
||||
<nav class="mb-6" aria-label="Breadcrumb">
|
||||
<ol class="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
|
||||
<li>
|
||||
<a href="{{ url_for('maker.recipe_list') }}"
|
||||
class="hover:text-primary transition-colors inline-flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
{{ _('Ricette') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</li>
|
||||
<li class="font-medium text-[var(--text-primary)]">
|
||||
{% if is_new %}
|
||||
{{ _('Nuova Ricetta') }}
|
||||
{% else %}
|
||||
{{ recipe.code }}
|
||||
{% endif %}
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- ============================================================
|
||||
Header + Action Buttons
|
||||
============================================================ -->
|
||||
<div class="mb-8">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-3">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-[var(--text-primary)] mb-1">
|
||||
{% if is_new %}
|
||||
{{ _('Nuova Ricetta') }}
|
||||
{% else %}
|
||||
<span class="font-mono text-primary">{{ recipe.code }}</span>
|
||||
<span class="text-[var(--text-muted)] text-lg font-normal ml-2">
|
||||
(v<span x-text="currentVersion"></span>)
|
||||
</span>
|
||||
{% endif %}
|
||||
</h1>
|
||||
{% if not is_new %}
|
||||
<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') }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Top action buttons -->
|
||||
<div class="flex items-center gap-2 shrink-0 flex-wrap">
|
||||
<button @click="saveRecipe()"
|
||||
:disabled="saving || !name.trim() || (isNew && !code.trim())"
|
||||
class="btn btn-primary gap-1.5">
|
||||
<svg x-show="!saving" 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="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
<svg x-show="saving" class="w-4 h-4 animate-spin" 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 x-text="saving ? '{{ _('Salvataggio...') }}' : '{{ _('Salva') }}'"></span>
|
||||
</button>
|
||||
|
||||
{% if not is_new %}
|
||||
<a href="{{ url_for('maker.recipe_preview', recipe_id=recipe_id) }}"
|
||||
class="btn btn-secondary gap-1.5">
|
||||
<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 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
||||
</svg>
|
||||
{{ _('Anteprima') }}
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('maker.task_editor', recipe_id=recipe_id) }}"
|
||||
class="btn btn-secondary gap-1.5">
|
||||
<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
|
||||
</svg>
|
||||
{{ _('Task') }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<a href="{{ url_for('maker.recipe_list') }}"
|
||||
class="btn btn-secondary gap-1.5">
|
||||
<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="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
{{ _('Annulla') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================
|
||||
Error Banner
|
||||
============================================================ -->
|
||||
<div x-show="errorMessage"
|
||||
x-transition
|
||||
class="mb-6 flex items-center gap-3 px-4 py-3 rounded-lg
|
||||
bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800
|
||||
text-red-800 dark:text-red-200 text-sm">
|
||||
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span x-text="errorMessage"></span>
|
||||
<button @click="errorMessage = ''" class="ml-auto shrink-0 hover:opacity-70">
|
||||
<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="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================
|
||||
Success Banner
|
||||
============================================================ -->
|
||||
<div x-show="saved"
|
||||
x-transition
|
||||
x-init="$watch('saved', v => { if (v) setTimeout(() => saved = false, 4000) })"
|
||||
class="mb-6 flex items-center gap-3 px-4 py-3 rounded-lg
|
||||
bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-800
|
||||
text-emerald-800 dark:text-emerald-200 text-sm">
|
||||
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span>{{ _('Ricetta salvata con successo') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================
|
||||
1. Card: Metadati Ricetta
|
||||
============================================================ -->
|
||||
<div class="tmf-card mb-6">
|
||||
<div class="tmf-card-header flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
{{ _('Metadati Ricetta') }}
|
||||
</div>
|
||||
<div class="tmf-card-body">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
<!-- Codice -->
|
||||
<div>
|
||||
<label class="tmf-label" for="recipe-code">
|
||||
{{ _('Codice') }} <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input id="recipe-code"
|
||||
type="text"
|
||||
x-model="code"
|
||||
class="tmf-input font-mono tracking-wide"
|
||||
:disabled="!isNew"
|
||||
:class="{ 'opacity-60 cursor-not-allowed': !isNew }"
|
||||
placeholder="{{ _('Es. COUPLING-256') }}"
|
||||
required>
|
||||
<p x-show="!isNew" class="text-xs text-[var(--text-muted)] mt-1">
|
||||
{{ _('Il codice non puo essere modificato dopo la creazione') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Nome -->
|
||||
<div>
|
||||
<label class="tmf-label" for="recipe-name">
|
||||
{{ _('Nome') }} <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input id="recipe-name"
|
||||
type="text"
|
||||
x-model="name"
|
||||
class="tmf-input"
|
||||
placeholder="{{ _('Es. Coupling Assembly 256') }}"
|
||||
required>
|
||||
</div>
|
||||
|
||||
<!-- Descrizione -->
|
||||
<div class="sm:col-span-2">
|
||||
<label class="tmf-label" for="recipe-description">
|
||||
{{ _('Descrizione') }}
|
||||
</label>
|
||||
<textarea id="recipe-description"
|
||||
x-model="description"
|
||||
class="tmf-input"
|
||||
rows="3"
|
||||
placeholder="{{ _('Descrizione opzionale della ricetta...') }}"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================
|
||||
2. Card: Upload / Annotazioni (Canvas Fabric.js)
|
||||
============================================================ -->
|
||||
<div class="tmf-card mb-6">
|
||||
<div class="tmf-card-header flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<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') }}
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="tmf-card-body space-y-4">
|
||||
|
||||
<!-- Annotation Toolbar -->
|
||||
<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') }}">
|
||||
<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"/>
|
||||
</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) -->
|
||||
<div class="drop-zone p-6 text-center cursor-pointer relative"
|
||||
:class="{ 'drag-over': dragOver }"
|
||||
@dragover.prevent="dragOver = true"
|
||||
@dragleave.prevent="dragOver = false"
|
||||
@drop.prevent="handleDrop($event)"
|
||||
@click="$refs.fileInput.click()">
|
||||
|
||||
<input type="file"
|
||||
x-ref="fileInput"
|
||||
@change="uploadFile($event.target.files[0]); $event.target.value = ''"
|
||||
accept="image/*,application/pdf"
|
||||
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>
|
||||
|
||||
<!-- 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>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================
|
||||
3. Card: Versioning (solo in modifica)
|
||||
============================================================ -->
|
||||
{% if not is_new %}
|
||||
<div class="tmf-card mb-6">
|
||||
<div class="tmf-card-header flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
{{ _('Versioning') }}
|
||||
</div>
|
||||
<div class="tmf-card-body space-y-4">
|
||||
<!-- Current version info -->
|
||||
<div class="flex items-center gap-3 flex-wrap">
|
||||
<span class="text-sm text-[var(--text-secondary)]">
|
||||
{{ _('Versione corrente:') }}
|
||||
</span>
|
||||
<span class="badge badge-neutral font-mono font-semibold"
|
||||
x-text="'v' + currentVersion">
|
||||
</span>
|
||||
<template x-if="versions.length > 1">
|
||||
<a href="{{ url_for('maker.version_history', recipe_id=recipe_id) }}"
|
||||
class="text-xs text-primary hover:underline">
|
||||
{{ _('Vedi cronologia') }} (<span x-text="versions.length"></span> {{ _('versioni') }})
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Auto-version notice -->
|
||||
<div class="flex items-start gap-2 p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
|
||||
<svg class="w-5 h-5 text-blue-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<p class="text-xs text-blue-700 dark:text-blue-300">
|
||||
{{ _('Se modifichi questa ricetta verra creata automaticamente la versione') }}
|
||||
<strong x-text="'v' + (currentVersion + 1)"></strong>.
|
||||
{{ _('Le misure esistenti resteranno associate alla versione corrente.') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Change notes -->
|
||||
<div>
|
||||
<label class="tmf-label" for="change-notes">
|
||||
{{ _('Motivo della modifica') }}
|
||||
</label>
|
||||
<input id="change-notes"
|
||||
type="text"
|
||||
x-model="changeNotes"
|
||||
class="tmf-input"
|
||||
placeholder="{{ _('Es. Aggiornate tolleranze foro centrale...') }}">
|
||||
<p class="text-xs text-[var(--text-muted)] mt-1">
|
||||
{{ _('Opzionale. Verra registrato nella cronologia versioni.') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- ============================================================
|
||||
4. Footer Action Buttons
|
||||
============================================================ -->
|
||||
<div class="flex flex-col sm:flex-row items-center gap-3 pt-4 pb-8">
|
||||
<button @click="saveRecipe()"
|
||||
:disabled="saving || !name.trim() || (isNew && !code.trim())"
|
||||
class="btn btn-primary gap-2 w-full sm:w-auto justify-center">
|
||||
<svg x-show="!saving" class="w-5 h-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>
|
||||
<svg x-show="saving" class="w-5 h-5 animate-spin" 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 x-text="saving ? '{{ _('Salvataggio...') }}' : '{{ _('Salva Ricetta') }}'"></span>
|
||||
</button>
|
||||
|
||||
<a href="{{ url_for('maker.recipe_list') }}"
|
||||
class="btn btn-secondary gap-2 w-full sm:w-auto justify-center">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
{{ _('Annulla') }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
|
||||
<script src="{{ url_for('static', filename='js/annotation-editor.js') }}"></script>
|
||||
<script>
|
||||
function recipeEditor() {
|
||||
return {
|
||||
// ---- Mode ----
|
||||
isNew: {{ 'true' if is_new else 'false' }},
|
||||
recipeId: {{ recipe_id|tojson if recipe_id else 'null' }},
|
||||
|
||||
// ---- Form data ----
|
||||
code: {{ (recipe.code if recipe else '')|tojson }},
|
||||
name: {{ (recipe.name if recipe else '')|tojson }},
|
||||
description: {{ (recipe.description if recipe and recipe.description else '')|tojson }},
|
||||
changeNotes: '',
|
||||
|
||||
// ---- File upload ----
|
||||
currentFilePath: {{ (current_version.tasks[0].file_path if current_version and current_version.tasks and current_version.tasks|length > 0 else None)|tojson }},
|
||||
uploadingFile: false,
|
||||
dragOver: false,
|
||||
|
||||
// ---- Annotation state (managed by annotation-editor.js) ----
|
||||
annotationsJson: {{ (current_version.tasks[0].annotations_json if current_version and current_version.tasks and current_version.tasks|length > 0 and current_version.tasks[0].annotations_json else None)|tojson }},
|
||||
annoTool: 'select',
|
||||
annoSelected: false,
|
||||
|
||||
// ---- Save state ----
|
||||
saving: false,
|
||||
saved: false,
|
||||
errorMessage: '',
|
||||
|
||||
// ---- Versioning ----
|
||||
versions: {{ versions|tojson }},
|
||||
currentVersion: {{ (current_version.version_number if 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;
|
||||
});
|
||||
},
|
||||
|
||||
// ============================================================
|
||||
// Save Recipe
|
||||
// ============================================================
|
||||
async saveRecipe() {
|
||||
this.saving = true;
|
||||
this.errorMessage = '';
|
||||
this.saved = false;
|
||||
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
|
||||
|
||||
const payload = {
|
||||
code: this.code.trim(),
|
||||
name: this.name.trim(),
|
||||
description: this.description.trim(),
|
||||
};
|
||||
|
||||
// Include change notes if editing
|
||||
if (!this.isNew && this.changeNotes.trim()) {
|
||||
payload.change_notes = this.changeNotes.trim();
|
||||
}
|
||||
|
||||
// Include annotations if available
|
||||
if (this.annotationsJson) {
|
||||
payload.annotations_json = 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;
|
||||
const method = this.isNew ? 'POST' : 'PUT';
|
||||
|
||||
try {
|
||||
const resp = await fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': csrfToken || ''
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await resp.json();
|
||||
|
||||
if (data.error) {
|
||||
this.errorMessage = data.detail || data.error || '{{ _("Errore nel salvataggio") }}';
|
||||
this.saving = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isNew) {
|
||||
// Redirect to task editor after creating a new recipe
|
||||
window.location.href = '/maker/recipes/' + data.id + '/tasks';
|
||||
return;
|
||||
}
|
||||
|
||||
// Update local state on successful edit
|
||||
this.saved = true;
|
||||
this.changeNotes = '';
|
||||
|
||||
// Update version info if server returned it
|
||||
if (data.current_version) {
|
||||
this.currentVersion = data.current_version.version_number;
|
||||
}
|
||||
|
||||
// Refresh versions list if available
|
||||
if (data.versions) {
|
||||
this.versions = data.versions;
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error('Save error:', err);
|
||||
this.errorMessage = '{{ _("Errore di connessione al server") }}';
|
||||
}
|
||||
|
||||
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
|
||||
// ============================================================
|
||||
goToPreview() {
|
||||
if (this.recipeId) {
|
||||
window.location.href = '/maker/recipes/' + this.recipeId + '/preview';
|
||||
}
|
||||
},
|
||||
|
||||
goToTasks() {
|
||||
if (this.recipeId) {
|
||||
window.location.href = '/maker/recipes/' + this.recipeId + '/tasks';
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,385 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ _('Gestione Ricette') }} — TieMeasureFlow{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-6xl"
|
||||
x-data="{
|
||||
recipes: {{ recipes|tojson }},
|
||||
search: '{{ search or '' }}',
|
||||
filter: 'all',
|
||||
deleteModal: false,
|
||||
deleteTarget: null,
|
||||
|
||||
get filteredRecipes() {
|
||||
let filtered = this.recipes;
|
||||
|
||||
// Apply search filter
|
||||
if (this.search.trim()) {
|
||||
const term = this.search.toLowerCase().trim();
|
||||
filtered = filtered.filter(r =>
|
||||
r.name.toLowerCase().includes(term) ||
|
||||
r.code.toLowerCase().includes(term) ||
|
||||
(r.description && r.description.toLowerCase().includes(term))
|
||||
);
|
||||
}
|
||||
|
||||
// Apply status filter
|
||||
if (this.filter === 'active') {
|
||||
filtered = filtered.filter(r => r.active);
|
||||
} else if (this.filter === 'inactive') {
|
||||
filtered = filtered.filter(r => !r.active);
|
||||
}
|
||||
|
||||
return filtered;
|
||||
},
|
||||
|
||||
async deleteRecipe(id) {
|
||||
const csrfToken = document.querySelector('meta[name=\"csrf-token\"]')?.content;
|
||||
try {
|
||||
const resp = await fetch(`/maker/api/recipes/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'X-CSRFToken': csrfToken || '' }
|
||||
});
|
||||
|
||||
if (resp.ok) {
|
||||
this.recipes = this.recipes.filter(r => r.id !== id);
|
||||
this.deleteModal = false;
|
||||
this.deleteTarget = null;
|
||||
} else {
|
||||
const data = await resp.json();
|
||||
alert(data.error || '{{ _('Errore durante eliminazione') }}');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('{{ _('Errore di connessione') }}');
|
||||
}
|
||||
},
|
||||
|
||||
openDeleteModal(recipe) {
|
||||
this.deleteTarget = recipe;
|
||||
this.deleteModal = true;
|
||||
}
|
||||
}">
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<nav class="mb-6" aria-label="Breadcrumb">
|
||||
<ol class="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
|
||||
<li>
|
||||
<a href="{{ url_for('maker.recipe_list') }}"
|
||||
class="hover:text-primary transition-colors inline-flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
|
||||
</svg>
|
||||
{{ _('Dashboard') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</li>
|
||||
<li class="font-medium text-[var(--text-primary)]">
|
||||
{{ _('Ricette') }}
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- Header Section -->
|
||||
<div class="mb-8">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-3">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-[var(--text-primary)] mb-1">
|
||||
{{ _('Gestione Ricette') }}
|
||||
</h1>
|
||||
<p class="text-sm text-[var(--text-secondary)]">
|
||||
{{ _('Crea e gestisci le ricette di misura') }}
|
||||
</p>
|
||||
</div>
|
||||
<a href="{{ url_for('maker.recipe_new') }}"
|
||||
class="btn btn-primary gap-2 shrink-0 w-full sm:w-auto justify-center">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
|
||||
</svg>
|
||||
{{ _('Nuova Ricetta') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="tmf-card mb-6">
|
||||
<div class="p-4">
|
||||
<div class="flex flex-col sm:flex-row gap-3">
|
||||
<!-- Search Input -->
|
||||
<div class="flex-1">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-[var(--text-muted)]" 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>
|
||||
</div>
|
||||
<input type="text"
|
||||
x-model="search"
|
||||
class="tmf-input pl-10"
|
||||
:placeholder="'{{ _('Cerca per nome, codice o descrizione...') }}'">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Filter -->
|
||||
<div class="sm:w-48">
|
||||
<select x-model="filter" class="tmf-input">
|
||||
<option value="all">{{ _('Tutti') }}</option>
|
||||
<option value="active">{{ _('Attive') }}</option>
|
||||
<option value="inactive">{{ _('Disattivate') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results Count -->
|
||||
<div class="mb-5">
|
||||
<p class="text-sm text-[var(--text-secondary)]">
|
||||
<span x-text="filteredRecipes.length"></span>
|
||||
<span x-text="filteredRecipes.length === 1 ? '{{ _('ricetta trovata') }}' : '{{ _('ricette trovate') }}'"></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Recipe Cards -->
|
||||
<div class="space-y-4" x-show="filteredRecipes.length > 0">
|
||||
<template x-for="recipe in filteredRecipes" :key="recipe.id">
|
||||
<div class="tmf-card hover:border-primary/30 transition-all duration-200 group">
|
||||
<div class="p-5 sm:p-6">
|
||||
<!-- Card Header -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-start gap-4 mb-4">
|
||||
<!-- Left: Recipe Info -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Badges Row -->
|
||||
<div class="flex items-center gap-2 mb-3 flex-wrap">
|
||||
<!-- Code Badge -->
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-md text-sm font-semibold
|
||||
bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300
|
||||
border border-primary-200 dark:border-primary-800 font-mono tracking-wide"
|
||||
x-text="recipe.code">
|
||||
</span>
|
||||
|
||||
<!-- Version Badge -->
|
||||
<template x-if="recipe.current_version">
|
||||
<span class="badge badge-neutral font-mono"
|
||||
x-text="'v' + recipe.current_version.version_number">
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<!-- Status Badge -->
|
||||
<span class="badge"
|
||||
:class="recipe.active ? 'badge-pass' : 'badge-fail'"
|
||||
x-text="recipe.active ? '{{ _('Attiva') }}' : '{{ _('Disattivata') }}'">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Recipe Name -->
|
||||
<h3 class="text-xl font-bold text-[var(--text-primary)] mb-2"
|
||||
x-text="recipe.name">
|
||||
</h3>
|
||||
|
||||
<!-- Description -->
|
||||
<template x-if="recipe.description">
|
||||
<p class="text-sm text-[var(--text-secondary)] leading-relaxed line-clamp-2 mb-3"
|
||||
x-text="recipe.description">
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<!-- Meta Information -->
|
||||
<div class="flex items-center gap-4 flex-wrap text-xs text-[var(--text-secondary)]">
|
||||
<!-- Task Count -->
|
||||
<template x-if="recipe.current_version && recipe.current_version.task_count">
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
|
||||
</svg>
|
||||
<span x-text="recipe.current_version.task_count"></span>
|
||||
<span>{{ _('task') }}</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<!-- Updated Date -->
|
||||
<template x-if="recipe.current_version && recipe.current_version.created_at">
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span>{{ _('Aggiornata') }}</span>
|
||||
<span class="font-medium" x-text="new Date(recipe.current_version.created_at).toLocaleDateString('{{ current_language or 'it' }}')"></span>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex items-center gap-2 flex-wrap pt-4 border-t border-[var(--border-color)]">
|
||||
<!-- Modifica -->
|
||||
<a :href="'/maker/recipes/' + recipe.id + '/edit'"
|
||||
class="btn btn-secondary gap-1.5 text-xs">
|
||||
<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
|
||||
</svg>
|
||||
{{ _('Modifica') }}
|
||||
</a>
|
||||
|
||||
<!-- Task -->
|
||||
<a :href="'/maker/recipes/' + recipe.id + '/tasks'"
|
||||
class="btn btn-secondary gap-1.5 text-xs">
|
||||
<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
|
||||
</svg>
|
||||
{{ _('Task') }}
|
||||
</a>
|
||||
|
||||
<!-- Anteprima -->
|
||||
<a :href="'/maker/recipes/' + recipe.id + '/preview'"
|
||||
class="btn btn-secondary gap-1.5 text-xs">
|
||||
<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 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
||||
</svg>
|
||||
{{ _('Anteprima') }}
|
||||
</a>
|
||||
|
||||
<!-- Versioni -->
|
||||
<a :href="'/maker/recipes/' + recipe.id + '/versions'"
|
||||
class="btn btn-secondary gap-1.5 text-xs">
|
||||
<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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
{{ _('Versioni') }}
|
||||
</a>
|
||||
|
||||
<!-- Spacer -->
|
||||
<div class="flex-1"></div>
|
||||
|
||||
<!-- Elimina -->
|
||||
<button @click="openDeleteModal(recipe)"
|
||||
class="btn btn-danger gap-1.5 text-xs">
|
||||
<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>
|
||||
{{ _('Elimina') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div x-show="filteredRecipes.length === 0"
|
||||
x-cloak
|
||||
class="text-center py-16">
|
||||
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full
|
||||
bg-[var(--bg-secondary)] mb-5">
|
||||
<svg class="w-10 h-10 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
||||
<span x-show="search.trim() || filter !== 'all'">
|
||||
{{ _('Nessuna ricetta trovata') }}
|
||||
</span>
|
||||
<span x-show="!search.trim() && filter === 'all'">
|
||||
{{ _('Nessuna ricetta disponibile') }}
|
||||
</span>
|
||||
</h3>
|
||||
<p class="text-sm text-[var(--text-secondary)] max-w-md mx-auto mb-6">
|
||||
<span x-show="search.trim() || filter !== 'all'">
|
||||
{{ _('Prova a modificare i filtri di ricerca') }}
|
||||
</span>
|
||||
<span x-show="!search.trim() && filter === 'all'">
|
||||
{{ _('Inizia creando la tua prima ricetta di misura') }}
|
||||
</span>
|
||||
</p>
|
||||
<a href="{{ url_for('maker.recipe_new') }}"
|
||||
x-show="!search.trim() && filter === 'all'"
|
||||
class="btn btn-primary gap-2 inline-flex">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
|
||||
</svg>
|
||||
{{ _('Crea Prima Ricetta') }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div x-show="deleteModal"
|
||||
x-cloak
|
||||
@keydown.escape.window="deleteModal = false"
|
||||
class="fixed inset-0 z-50 overflow-y-auto"
|
||||
aria-labelledby="modal-title"
|
||||
role="dialog"
|
||||
aria-modal="true">
|
||||
|
||||
<!-- Backdrop -->
|
||||
<div x-show="deleteModal"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="deleteModal = false"
|
||||
class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity">
|
||||
</div>
|
||||
|
||||
<!-- Modal Content -->
|
||||
<div class="flex min-h-full items-center justify-center p-4">
|
||||
<div x-show="deleteModal"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
||||
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
class="tmf-card max-w-lg w-full relative">
|
||||
|
||||
<div class="p-6">
|
||||
<!-- Icon -->
|
||||
<div class="mx-auto flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/30 mb-4">
|
||||
<svg class="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h3 class="text-lg font-semibold text-[var(--text-primary)] text-center mb-2">
|
||||
{{ _('Conferma Eliminazione') }}
|
||||
</h3>
|
||||
|
||||
<!-- Message -->
|
||||
<template x-if="deleteTarget">
|
||||
<div>
|
||||
<p class="text-sm text-[var(--text-secondary)] text-center mb-4">
|
||||
{{ _('Sei sicuro di voler disattivare la ricetta') }}
|
||||
<span class="font-semibold text-[var(--text-primary)]" x-text="deleteTarget.name"></span>?
|
||||
</p>
|
||||
<p class="text-xs text-[var(--text-muted)] text-center mb-6">
|
||||
{{ _('Le misure esistenti non verranno eliminate') }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex flex-col sm:flex-row gap-3">
|
||||
<button @click="deleteModal = false"
|
||||
class="btn btn-secondary flex-1 justify-center">
|
||||
{{ _('Annulla') }}
|
||||
</button>
|
||||
<button @click="deleteRecipe(deleteTarget.id)"
|
||||
class="btn btn-danger flex-1 justify-center">
|
||||
{{ _('Elimina') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,445 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ recipe.code }} — {{ _('Anteprima Ricetta') }} — TieMeasureFlow{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
/* Annotation viewer container */
|
||||
.annotation-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.annotation-container canvas {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Tolerance bar gradient */
|
||||
.tolerance-bar-bg {
|
||||
background: linear-gradient(to right,
|
||||
rgba(220, 38, 38, 0.15) 0%,
|
||||
rgba(217, 119, 6, 0.15) 15%,
|
||||
rgba(5, 150, 105, 0.15) 30%,
|
||||
rgba(5, 150, 105, 0.15) 70%,
|
||||
rgba(217, 119, 6, 0.15) 85%,
|
||||
rgba(220, 38, 38, 0.15) 100%
|
||||
);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-5xl"
|
||||
x-data="recipePreview()"
|
||||
x-cloak>
|
||||
|
||||
{# ================================================================
|
||||
BREADCRUMB
|
||||
================================================================ #}
|
||||
<nav class="mb-6" aria-label="Breadcrumb">
|
||||
<ol class="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
|
||||
<li>
|
||||
<a href="{{ url_for('maker.recipe_list') }}"
|
||||
class="hover:text-primary transition-colors inline-flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
{{ _('Ricette') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url_for('maker.recipe_edit', recipe_id=recipe.id) }}"
|
||||
class="hover:text-primary transition-colors">
|
||||
{{ recipe.code }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</li>
|
||||
<li class="font-medium text-[var(--text-primary)]">
|
||||
{{ _('Anteprima') }}
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
{# ================================================================
|
||||
HEADER
|
||||
================================================================ #}
|
||||
<div class="mb-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-3">
|
||||
<div class="flex items-center gap-3 flex-wrap">
|
||||
{# Preview badge #}
|
||||
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider
|
||||
bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300
|
||||
border border-amber-300 dark:border-amber-700">
|
||||
<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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
||||
</svg>
|
||||
{{ _('Anteprima') }}
|
||||
</span>
|
||||
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-[var(--text-primary)]">
|
||||
<span class="font-mono text-primary">{{ recipe.code }}</span>
|
||||
<span class="text-[var(--text-muted)] text-lg font-normal ml-1">
|
||||
— {{ recipe.name }}
|
||||
</span>
|
||||
</h1>
|
||||
{% if recipe.current_version %}
|
||||
<p class="text-xs text-[var(--text-secondary)] mt-0.5">
|
||||
{{ _('Versione') }} <span class="font-mono font-semibold">v{{ recipe.current_version.version_number }}</span>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Action buttons #}
|
||||
<div class="flex items-center gap-2 shrink-0 flex-wrap">
|
||||
<a href="{{ url_for('maker.recipe_edit', recipe_id=recipe.id) }}"
|
||||
class="btn btn-secondary gap-1.5 text-sm">
|
||||
<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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
||||
</svg>
|
||||
{{ _('Torna a Ricetta') }}
|
||||
</a>
|
||||
<a href="{{ url_for('maker.task_editor', recipe_id=recipe.id) }}"
|
||||
class="btn btn-secondary gap-1.5 text-sm">
|
||||
<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
|
||||
</svg>
|
||||
{{ _('Modifica Task') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ================================================================
|
||||
PREVIEW BANNER
|
||||
================================================================ #}
|
||||
<div class="mb-6 flex items-start gap-3 px-4 py-3 rounded-lg
|
||||
bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
|
||||
<svg class="w-5 h-5 text-amber-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-amber-800 dark:text-amber-200">
|
||||
{{ _('Modalita Anteprima') }}
|
||||
</p>
|
||||
<p class="text-xs text-amber-700 dark:text-amber-300 mt-0.5">
|
||||
{{ _('Stai vedendo la ricetta come la vedra il Tecnico di Misura. Tutti i campi sono in sola lettura.') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ================================================================
|
||||
RECIPE DESCRIPTION (if present)
|
||||
================================================================ #}
|
||||
{% if recipe.description %}
|
||||
<div class="tmf-card mb-6">
|
||||
<div class="tmf-card-body">
|
||||
<p class="text-sm text-[var(--text-secondary)] leading-relaxed">{{ recipe.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ================================================================
|
||||
TASKS LOOP
|
||||
================================================================ #}
|
||||
{% if recipe.tasks %}
|
||||
{% for task in recipe.tasks %}
|
||||
<div class="tmf-card mb-6">
|
||||
|
||||
{# ---- Task Header ---- #}
|
||||
<div class="tmf-card-header flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="inline-flex items-center justify-center w-8 h-8 rounded-lg
|
||||
bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300
|
||||
border border-primary-200 dark:border-primary-800
|
||||
text-sm font-bold">
|
||||
{{ loop.index }}
|
||||
</span>
|
||||
<div>
|
||||
<h2 class="font-semibold text-[var(--text-primary)]">{{ task.title }}</h2>
|
||||
{% if task.directive or task.description %}
|
||||
<p class="text-xs text-[var(--text-secondary)] mt-0.5">
|
||||
{{ task.directive or task.description }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% if task.subtasks %}
|
||||
<span class="badge badge-neutral text-xs font-mono">
|
||||
{{ task.subtasks|length }} {{ _('misure') }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="tmf-card-body space-y-5">
|
||||
|
||||
{# ---- Technical Drawing / Annotations ---- #}
|
||||
{% if task.file_path and task.file_type == 'image' %}
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-2 text-xs font-medium text-[var(--text-secondary)]">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
|
||||
<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') }}
|
||||
</div>
|
||||
<div class="annotation-container"
|
||||
x-data="annotationViewer()"
|
||||
x-init="
|
||||
imageUrl = '/api/files/{{ task.file_path }}';
|
||||
annotations = {{ task.annotations_json|default('null')|tojson }};
|
||||
$nextTick(() => init());
|
||||
">
|
||||
<canvas x-ref="annotationCanvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% elif task.file_path and task.file_type == 'pdf' %}
|
||||
<div class="flex items-center gap-3 p-4 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]">
|
||||
<svg class="w-10 h-10 text-red-400 shrink-0" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-[var(--text-primary)]">{{ _('Documento PDF allegato') }}</p>
|
||||
<p class="text-xs text-[var(--text-muted)]">{{ task.file_path }}</p>
|
||||
</div>
|
||||
<a href="/api/files/{{ task.file_path }}"
|
||||
target="_blank"
|
||||
class="btn btn-secondary text-xs gap-1.5">
|
||||
<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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
{{ _('Apri PDF') }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div class="flex items-center justify-center p-6 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]">
|
||||
<div class="text-center">
|
||||
<svg class="w-10 h-10 mx-auto text-[var(--text-muted)] mb-2" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24">
|
||||
<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>
|
||||
<p class="text-sm text-[var(--text-muted)]">{{ _('Nessuna immagine allegata') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ---- Subtask List ---- #}
|
||||
{% if task.subtasks %}
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-3 text-xs font-medium text-[var(--text-secondary)]">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
||||
</svg>
|
||||
{{ _('Punti di Misura') }}
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
{% for subtask in task.subtasks %}
|
||||
<div class="p-4 rounded-lg border border-[var(--border-color)] bg-[var(--bg-card)]
|
||||
hover:border-primary/30 transition-colors">
|
||||
{# Subtask header: marker badge + description #}
|
||||
<div class="flex items-start gap-3 mb-3">
|
||||
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full shrink-0
|
||||
bg-primary text-white font-bold text-sm shadow-sm">
|
||||
{{ subtask.marker_number }}
|
||||
</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="font-medium text-sm text-[var(--text-primary)]">{{ subtask.description }}</p>
|
||||
<div class="flex items-center gap-2 mt-0.5 text-xs text-[var(--text-muted)]">
|
||||
{% if subtask.measurement_type %}
|
||||
<span>{{ subtask.measurement_type }}</span>
|
||||
<span>·</span>
|
||||
{% endif %}
|
||||
<span>{{ subtask.unit or 'mm' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Tolerance parameters grid #}
|
||||
<div class="grid grid-cols-2 sm:grid-cols-5 gap-2">
|
||||
{# Nominal #}
|
||||
<div class="col-span-2 sm:col-span-1 flex items-center justify-between sm:flex-col sm:items-center
|
||||
py-2 px-3 rounded-lg bg-primary-50 dark:bg-primary-900/20
|
||||
border border-primary-100 dark:border-primary-800">
|
||||
<span class="text-[10px] font-medium text-primary-600 dark:text-primary-400 uppercase tracking-wider">
|
||||
{{ _('Nominale') }}
|
||||
</span>
|
||||
<span class="measure-value text-sm font-bold text-primary">
|
||||
{% if subtask.nominal is not none %}{{ "%.3f"|format(subtask.nominal) }}{% else %}—{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{# LTL #}
|
||||
<div class="flex items-center justify-between sm:flex-col sm:items-center
|
||||
py-2 px-3 rounded-lg bg-red-50/50 dark:bg-red-900/10">
|
||||
<span class="text-[10px] font-medium text-measure-fail uppercase tracking-wider">LTL</span>
|
||||
<span class="measure-value text-xs font-semibold text-measure-fail">
|
||||
{% if subtask.ltl is not none %}{{ "%.3f"|format(subtask.ltl) }}{% else %}—{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{# LWL #}
|
||||
<div class="flex items-center justify-between sm:flex-col sm:items-center
|
||||
py-2 px-3 rounded-lg bg-amber-50/50 dark:bg-amber-900/10">
|
||||
<span class="text-[10px] font-medium text-measure-warning uppercase tracking-wider">LWL</span>
|
||||
<span class="measure-value text-xs font-semibold text-measure-warning">
|
||||
{% if subtask.lwl is not none %}{{ "%.3f"|format(subtask.lwl) }}{% else %}—{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{# UWL #}
|
||||
<div class="flex items-center justify-between sm:flex-col sm:items-center
|
||||
py-2 px-3 rounded-lg bg-amber-50/50 dark:bg-amber-900/10">
|
||||
<span class="text-[10px] font-medium text-measure-warning uppercase tracking-wider">UWL</span>
|
||||
<span class="measure-value text-xs font-semibold text-measure-warning">
|
||||
{% if subtask.uwl is not none %}{{ "%.3f"|format(subtask.uwl) }}{% else %}—{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{# UTL #}
|
||||
<div class="flex items-center justify-between sm:flex-col sm:items-center
|
||||
py-2 px-3 rounded-lg bg-red-50/50 dark:bg-red-900/10">
|
||||
<span class="text-[10px] font-medium text-measure-fail uppercase tracking-wider">UTL</span>
|
||||
<span class="measure-value text-xs font-semibold text-measure-fail">
|
||||
{% if subtask.utl is not none %}{{ "%.3f"|format(subtask.utl) }}{% else %}—{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Visual tolerance bar #}
|
||||
{% if subtask.ltl is not none and subtask.utl is not none %}
|
||||
<div class="mt-2">
|
||||
<div class="tolerance-bar-bg h-2 rounded-full relative overflow-hidden border border-[var(--border-color)]">
|
||||
{# Nominal center line #}
|
||||
<div class="absolute top-0 bottom-0 w-px bg-primary/40" style="left: 50%;"></div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-0.5 text-[9px] font-mono text-[var(--text-muted)]">
|
||||
<span>{{ "%.2f"|format(subtask.ltl) }}</span>
|
||||
<span>{{ "%.2f"|format(subtask.nominal or 0) }}</span>
|
||||
<span>{{ "%.2f"|format(subtask.utl) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-4">
|
||||
<p class="text-sm text-[var(--text-muted)]">{{ _('Nessun punto di misura definito per questo task') }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% else %}
|
||||
{# ---- Empty state: no tasks ---- #}
|
||||
<div class="tmf-card">
|
||||
<div class="p-12 text-center">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full
|
||||
bg-[var(--bg-secondary)] mb-4">
|
||||
<svg class="w-8 h-8 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
||||
{{ _('Nessun task definito') }}
|
||||
</h3>
|
||||
<p class="text-sm text-[var(--text-secondary)] mb-4">
|
||||
{{ _('Questa ricetta non contiene ancora task di misurazione.') }}
|
||||
</p>
|
||||
<a href="{{ url_for('maker.task_editor', recipe_id=recipe.id) }}"
|
||||
class="btn btn-primary gap-2 inline-flex">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
|
||||
</svg>
|
||||
{{ _('Aggiungi Task') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ================================================================
|
||||
FOOTER NAVIGATION
|
||||
================================================================ #}
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-3 pt-6 pb-8">
|
||||
<a href="{{ url_for('maker.recipe_edit', recipe_id=recipe.id) }}"
|
||||
class="btn btn-secondary gap-2 w-full sm:w-auto justify-center">
|
||||
<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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
||||
</svg>
|
||||
{{ _('Torna a Ricetta') }}
|
||||
</a>
|
||||
|
||||
<div class="flex items-center gap-2 w-full sm:w-auto">
|
||||
<a href="{{ url_for('maker.task_editor', recipe_id=recipe.id) }}"
|
||||
class="btn btn-primary gap-2 flex-1 sm:flex-initial justify-center">
|
||||
<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
|
||||
</svg>
|
||||
{{ _('Modifica Task') }}
|
||||
</a>
|
||||
<a href="{{ url_for('maker.version_history', recipe_id=recipe.id) }}"
|
||||
class="btn btn-secondary gap-2 flex-1 sm:flex-initial justify-center">
|
||||
<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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
{{ _('Storico Versioni') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="{{ url_for('static', filename='js/annotation-viewer.js') }}"></script>
|
||||
<script>
|
||||
/**
|
||||
* Recipe Preview - Minimal Alpine.js component
|
||||
* Read-only preview mode, no editing capabilities.
|
||||
*/
|
||||
function recipePreview() {
|
||||
return {
|
||||
recipe: {{ recipe|tojson }},
|
||||
tasks: {{ recipe.tasks|tojson if recipe.tasks else '[]' }},
|
||||
|
||||
init() {
|
||||
// Nothing to do - this is a read-only preview.
|
||||
// annotation-viewer.js components are initialized inline via x-init.
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,409 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ recipe.code }} — {{ _('Storico Versioni') }} — TieMeasureFlow{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
/* Timeline vertical connector */
|
||||
.timeline-connector {
|
||||
position: absolute;
|
||||
left: 1.25rem;
|
||||
top: 2.5rem;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: var(--border-color);
|
||||
}
|
||||
.timeline-connector::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: -3px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
/* Timeline dot */
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
top: 0.875rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 700;
|
||||
z-index: 1;
|
||||
border: 2px solid var(--bg-primary);
|
||||
box-shadow: 0 0 0 2px var(--border-color);
|
||||
}
|
||||
.timeline-dot.current {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
box-shadow: 0 0 0 2px var(--color-primary), 0 0 8px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
.timeline-dot.past {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-4xl"
|
||||
x-data="versionHistory()"
|
||||
x-init="loadMeasurementCounts()"
|
||||
x-cloak>
|
||||
|
||||
{# ================================================================
|
||||
BREADCRUMB
|
||||
================================================================ #}
|
||||
<nav class="mb-6" aria-label="Breadcrumb">
|
||||
<ol class="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
|
||||
<li>
|
||||
<a href="{{ url_for('maker.recipe_list') }}"
|
||||
class="hover:text-primary transition-colors inline-flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
{{ _('Ricette') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url_for('maker.recipe_edit', recipe_id=recipe.id) }}"
|
||||
class="hover:text-primary transition-colors">
|
||||
{{ recipe.code }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</li>
|
||||
<li class="font-medium text-[var(--text-primary)]">
|
||||
{{ _('Storico Versioni') }}
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
{# ================================================================
|
||||
HEADER
|
||||
================================================================ #}
|
||||
<div class="mb-8">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-3">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-[var(--text-primary)] mb-1">
|
||||
<span class="font-mono text-primary">{{ recipe.code }}</span>
|
||||
<span class="text-[var(--text-muted)] text-lg font-normal ml-2">
|
||||
— {{ recipe.name }}
|
||||
</span>
|
||||
</h1>
|
||||
<div class="flex items-center gap-3 mt-1.5">
|
||||
<p class="text-sm text-[var(--text-secondary)]">
|
||||
{{ _('Storico Versioni') }}
|
||||
</p>
|
||||
{% if recipe.current_version %}
|
||||
<span class="badge badge-pass font-mono text-xs">
|
||||
{{ _('Corrente:') }} v{{ recipe.current_version.version_number }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="{{ url_for('maker.recipe_edit', recipe_id=recipe.id) }}"
|
||||
class="btn btn-secondary gap-1.5 shrink-0">
|
||||
<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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
||||
</svg>
|
||||
{{ _('Torna a Ricetta') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ================================================================
|
||||
VERSION TIMELINE
|
||||
================================================================ #}
|
||||
<template x-if="versions.length > 0">
|
||||
<div class="relative pl-12">
|
||||
|
||||
{# Vertical connector line #}
|
||||
<div class="absolute left-5 top-6 bottom-6 w-0.5 bg-[var(--border-color)]"></div>
|
||||
|
||||
<template x-for="(version, idx) in sortedVersions" :key="version.id">
|
||||
<div class="relative mb-6 last:mb-0">
|
||||
|
||||
{# Timeline dot #}
|
||||
<div class="absolute -left-7 top-4 w-6 h-6 rounded-full flex items-center justify-center
|
||||
text-[10px] font-bold z-10 border-2"
|
||||
:class="version.version_number === currentVersionNumber
|
||||
? 'bg-primary text-white border-primary shadow-md shadow-primary/30'
|
||||
: 'bg-[var(--bg-card)] text-[var(--text-muted)] border-[var(--border-color)]'"
|
||||
x-text="'v' + version.version_number">
|
||||
</div>
|
||||
|
||||
{# Version card #}
|
||||
<div class="tmf-card transition-all duration-200"
|
||||
:class="version.version_number === currentVersionNumber ? 'border-primary/40 shadow-md' : ''">
|
||||
<div class="p-5">
|
||||
|
||||
{# Card header row #}
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3">
|
||||
<div class="flex items-center gap-2.5 flex-wrap">
|
||||
{# Version badge #}
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-md text-sm font-bold font-mono"
|
||||
:class="version.version_number === currentVersionNumber
|
||||
? 'bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 border border-primary-200 dark:border-primary-800'
|
||||
: 'bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-color)]'"
|
||||
x-text="'v' + version.version_number">
|
||||
</span>
|
||||
|
||||
{# Current badge #}
|
||||
<template x-if="version.version_number === currentVersionNumber">
|
||||
<span class="badge badge-pass text-xs">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
{{ _('Corrente') }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
{# Measurement count badge #}
|
||||
<template x-if="measurementCounts[version.id] !== undefined">
|
||||
<span class="badge text-xs"
|
||||
:class="measurementCounts[version.id] > 0 ? 'badge-pass' : 'badge-neutral'">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span x-text="measurementCounts[version.id]"></span>
|
||||
{{ _('misurazioni') }}
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="measurementCounts[version.id] === undefined && loadingCounts">
|
||||
<span class="badge badge-neutral text-xs">
|
||||
<svg class="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
|
||||
</svg>
|
||||
{{ _('Caricamento...') }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
{# View button #}
|
||||
<a :href="'/maker/recipes/' + recipeId + '/edit?version=' + version.id"
|
||||
class="btn btn-secondary text-xs gap-1.5 shrink-0">
|
||||
<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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
||||
</svg>
|
||||
{{ _('Visualizza') }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{# Version details #}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 text-sm">
|
||||
|
||||
{# Created at #}
|
||||
<div class="flex items-center gap-2 text-[var(--text-secondary)]">
|
||||
<svg class="w-4 h-4 text-[var(--text-muted)] shrink-0" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span x-text="formatDate(version.created_at)"></span>
|
||||
</div>
|
||||
|
||||
{# Created by #}
|
||||
<template x-if="version.created_by_user">
|
||||
<div class="flex items-center gap-2 text-[var(--text-secondary)]">
|
||||
<svg class="w-4 h-4 text-[var(--text-muted)] shrink-0" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||
</svg>
|
||||
<span x-text="version.created_by_user.display_name || version.created_by_user.username"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
{# Task count (if available) #}
|
||||
<template x-if="version.tasks && version.tasks.length > 0">
|
||||
<div class="flex items-center gap-2 text-[var(--text-secondary)]">
|
||||
<svg class="w-4 h-4 text-[var(--text-muted)] shrink-0" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
|
||||
</svg>
|
||||
<span x-text="version.tasks.length + ' task'"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
{# Change notes #}
|
||||
<template x-if="version.change_notes">
|
||||
<div class="mt-3 p-3 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]">
|
||||
<div class="flex items-start gap-2">
|
||||
<svg class="w-4 h-4 text-[var(--text-muted)] shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
|
||||
</svg>
|
||||
<p class="text-sm text-[var(--text-secondary)] leading-relaxed" x-text="version.change_notes"></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
{# ================================================================
|
||||
EMPTY STATE
|
||||
================================================================ #}
|
||||
<template x-if="versions.length === 0">
|
||||
<div class="tmf-card">
|
||||
<div class="p-12 text-center">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full
|
||||
bg-[var(--bg-secondary)] mb-4">
|
||||
<svg class="w-8 h-8 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
||||
{{ _('Nessuna versione trovata') }}
|
||||
</h3>
|
||||
<p class="text-sm text-[var(--text-secondary)] max-w-md mx-auto">
|
||||
{{ _('Questa ricetta non ha ancora versioni registrate. La prima versione verra creata automaticamente al salvataggio.') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
{# ================================================================
|
||||
FOOTER
|
||||
================================================================ #}
|
||||
<div class="flex items-center justify-between gap-3 pt-6 pb-8">
|
||||
<a href="{{ url_for('maker.recipe_edit', recipe_id=recipe.id) }}"
|
||||
class="btn btn-secondary gap-2">
|
||||
<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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
||||
</svg>
|
||||
{{ _('Torna a Ricetta') }}
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('maker.recipe_preview', recipe_id=recipe.id) }}"
|
||||
class="btn btn-secondary gap-2">
|
||||
<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 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
||||
</svg>
|
||||
{{ _('Anteprima') }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
/**
|
||||
* Version History - Alpine.js component
|
||||
* Loads and displays recipe version timeline with AJAX measurement counts.
|
||||
*/
|
||||
function versionHistory() {
|
||||
return {
|
||||
recipeId: {{ recipe.id|tojson }},
|
||||
currentVersionNumber: {{ (recipe.current_version.version_number if recipe.current_version else 0)|tojson }},
|
||||
versions: {{ versions|tojson }},
|
||||
measurementCounts: {},
|
||||
loadingCounts: true,
|
||||
|
||||
/**
|
||||
* Sorted versions: most recent first.
|
||||
*/
|
||||
get sortedVersions() {
|
||||
return [...this.versions].sort((a, b) => b.version_number - a.version_number);
|
||||
},
|
||||
|
||||
/**
|
||||
* Load measurement counts for all versions via AJAX.
|
||||
* Calls the proxy API endpoint for each version.
|
||||
*/
|
||||
async loadMeasurementCounts() {
|
||||
this.loadingCounts = true;
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';
|
||||
|
||||
const promises = this.versions.map(async (version) => {
|
||||
try {
|
||||
const resp = await fetch(
|
||||
'/maker/api/recipes/' + this.recipeId + '/versions/' + version.version_number + '/measurement-count',
|
||||
{
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'X-CSRFToken': csrfToken
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (resp.ok) {
|
||||
const data = await resp.json();
|
||||
this.measurementCounts[version.id] = data.measurement_count || 0;
|
||||
} else {
|
||||
this.measurementCounts[version.id] = 0;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error loading measurement count for version', version.version_number, err);
|
||||
this.measurementCounts[version.id] = 0;
|
||||
}
|
||||
});
|
||||
|
||||
await Promise.all(promises);
|
||||
this.loadingCounts = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Format ISO date string to a localized display format.
|
||||
* Example output: "15 Gen 2026, 14:30"
|
||||
* @param {string} isoString - ISO 8601 date string
|
||||
* @returns {string} Formatted date
|
||||
*/
|
||||
formatDate(isoString) {
|
||||
if (!isoString) return '—';
|
||||
|
||||
try {
|
||||
const date = new Date(isoString);
|
||||
if (isNaN(date.getTime())) return isoString;
|
||||
|
||||
const months = [
|
||||
'Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu',
|
||||
'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'
|
||||
];
|
||||
|
||||
const day = date.getDate();
|
||||
const month = months[date.getMonth()];
|
||||
const year = date.getFullYear();
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
|
||||
return day + ' ' + month + ' ' + year + ', ' + hours + ':' + minutes;
|
||||
} catch (e) {
|
||||
return isoString;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user