Adriano
6ea94cca47
- 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>
1740 lines
73 KiB
HTML
1740 lines
73 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ recipe.code }} — {{ _('Editor Task') }} — TieMeasureFlow{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<style>
|
|
/* ---- Drag & Drop visual feedback ---- */
|
|
.task-card.dragging {
|
|
opacity: 0.5;
|
|
transform: scale(0.98);
|
|
}
|
|
.task-card.drag-over-above {
|
|
border-top: 3px solid var(--color-primary);
|
|
}
|
|
.task-card.drag-over-below {
|
|
border-bottom: 3px solid var(--color-primary);
|
|
}
|
|
|
|
/* ---- Drag handle cursor ---- */
|
|
.drag-handle {
|
|
cursor: grab;
|
|
user-select: none;
|
|
touch-action: none;
|
|
}
|
|
.drag-handle:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* ---- Tolerance bar mini-visualization ---- */
|
|
.tolerance-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
min-width: 120px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.tolerance-bar .seg-fail-low {
|
|
background: var(--color-fail);
|
|
opacity: 0.6;
|
|
}
|
|
.tolerance-bar .seg-warn-low {
|
|
background: var(--color-warning);
|
|
opacity: 0.6;
|
|
}
|
|
.tolerance-bar .seg-nominal {
|
|
background: var(--color-pass);
|
|
}
|
|
.tolerance-bar .seg-warn-high {
|
|
background: var(--color-warning);
|
|
opacity: 0.6;
|
|
}
|
|
.tolerance-bar .seg-fail-high {
|
|
background: var(--color-fail);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* ---- Marker badge (coerente con annotation-editor.js) ---- */
|
|
.marker-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
background: #2563EB;
|
|
color: #FFFFFF;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ---- Subtask inline editing row ---- */
|
|
.subtask-edit-row input,
|
|
.subtask-edit-row select {
|
|
font-size: 0.8125rem;
|
|
padding: 0.3rem 0.5rem;
|
|
}
|
|
|
|
/* ---- Subtask table horizontal scroll on mobile ---- */
|
|
.subtask-table-wrap {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.subtask-table-wrap::-webkit-scrollbar {
|
|
height: 4px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-5xl"
|
|
x-data="taskEditor()"
|
|
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)]">
|
|
{{ _('Task') }}
|
|
</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">
|
|
<span class="font-mono text-primary">{{ recipe.code }}</span>
|
|
<span class="text-[var(--text-muted)] text-lg font-normal ml-2">
|
|
{{ _('Task e Misurazioni') }}
|
|
</span>
|
|
</h1>
|
|
<p class="text-sm text-[var(--text-secondary)]">
|
|
{{ recipe.name }}
|
|
{% if recipe.current_version %}
|
|
<span class="ml-2 badge badge-neutral font-mono text-xs">v{{ recipe.current_version.version_number }}</span>
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Top 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">
|
|
<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 17l-5-5m0 0l5-5m-5 5h12"/>
|
|
</svg>
|
|
{{ _('Torna a Ricetta') }}
|
|
</a>
|
|
|
|
<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>
|
|
</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="successMessage"
|
|
x-transition
|
|
x-init="$watch('successMessage', v => { if (v) setTimeout(() => successMessage = '', 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 x-text="successMessage"></span>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
Add Task Button (top)
|
|
============================================================ -->
|
|
<div class="mb-4 flex items-center justify-between">
|
|
<p class="text-sm text-[var(--text-secondary)]">
|
|
<span x-text="tasks.length"></span>
|
|
<span x-text="tasks.length === 1 ? '{{ _('task') }}' : '{{ _('task') }}'"></span>
|
|
</p>
|
|
<button @click="showAddTask = true; $nextTick(() => $refs.newTaskTitle && $refs.newTaskTitle.focus())"
|
|
x-show="!showAddTask"
|
|
class="btn btn-primary 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="M12 4v16m8-8H4"/>
|
|
</svg>
|
|
{{ _('Aggiungi Task') }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
Add Task Form (inline)
|
|
============================================================ -->
|
|
<div x-show="showAddTask"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 -translate-y-2"
|
|
x-transition:enter-end="opacity-100 translate-y-0"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
x-transition:leave-end="opacity-0 -translate-y-2"
|
|
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 4v16m8-8H4"/>
|
|
</svg>
|
|
{{ _('Nuovo Task') }}
|
|
</div>
|
|
<div class="tmf-card-body">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<!-- Titolo -->
|
|
<div class="sm:col-span-2">
|
|
<label class="tmf-label">{{ _('Titolo') }} <span class="text-red-500">*</span></label>
|
|
<input type="text"
|
|
x-ref="newTaskTitle"
|
|
x-model="newTask.title"
|
|
@keydown.enter.prevent="addTask()"
|
|
class="tmf-input"
|
|
placeholder="{{ _('Es. Controllo dimensionale flangia') }}">
|
|
</div>
|
|
<!-- Direttiva -->
|
|
<div>
|
|
<label class="tmf-label">{{ _('Direttiva') }}</label>
|
|
<input type="text"
|
|
x-model="newTask.directive"
|
|
class="tmf-input"
|
|
placeholder="{{ _('Es. Seguire procedura ISO 2768') }}">
|
|
</div>
|
|
<!-- Descrizione -->
|
|
<div>
|
|
<label class="tmf-label">{{ _('Descrizione') }}</label>
|
|
<input type="text"
|
|
x-model="newTask.description"
|
|
class="tmf-input"
|
|
placeholder="{{ _('Descrizione opzionale...') }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tmf-card-footer flex items-center gap-2 justify-end">
|
|
<button @click="showAddTask = false; resetNewTask()"
|
|
class="btn btn-secondary">
|
|
{{ _('Annulla') }}
|
|
</button>
|
|
<button @click="addTask()"
|
|
:disabled="!newTask.title.trim() || saving"
|
|
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>
|
|
{{ _('Crea Task') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
Task List
|
|
============================================================ -->
|
|
<div class="space-y-4">
|
|
<template x-for="(task, taskIndex) in tasks" :key="task.id">
|
|
<div class="tmf-card task-card transition-all duration-200"
|
|
:class="{
|
|
'dragging': dragState.dragging === task.id,
|
|
'drag-over-above': dragState.over === task.id && dragState.position === 'above',
|
|
'drag-over-below': dragState.over === task.id && dragState.position === 'below'
|
|
}"
|
|
draggable="true"
|
|
@dragstart="handleDragStart($event, task)"
|
|
@dragend="handleDragEnd($event)"
|
|
@dragover.prevent="handleDragOver($event, task)"
|
|
@dragleave="handleDragLeave($event, task)"
|
|
@drop.prevent="handleDrop($event, task)">
|
|
|
|
<!-- ========== Task Card Header ========== -->
|
|
<div class="tmf-card-header flex items-center gap-3 cursor-pointer select-none"
|
|
@click="toggleExpand(task.id)">
|
|
|
|
<!-- Drag Handle -->
|
|
<span class="drag-handle text-[var(--text-muted)] hover:text-[var(--text-secondary)] px-1"
|
|
@click.stop
|
|
title="{{ _('Trascina per riordinare') }}">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<circle cx="9" cy="5" r="1.5"/>
|
|
<circle cx="15" cy="5" r="1.5"/>
|
|
<circle cx="9" cy="12" r="1.5"/>
|
|
<circle cx="15" cy="12" r="1.5"/>
|
|
<circle cx="9" cy="19" r="1.5"/>
|
|
<circle cx="15" cy="19" r="1.5"/>
|
|
</svg>
|
|
</span>
|
|
|
|
<!-- Order Number -->
|
|
<span class="text-xs font-mono text-[var(--text-muted)] w-6 text-center"
|
|
x-text="taskIndex + 1">
|
|
</span>
|
|
|
|
<!-- Task Title (view mode) -->
|
|
<template x-if="editingTask !== task.id">
|
|
<span class="flex-1 font-semibold text-[var(--text-primary)] truncate"
|
|
x-text="task.title">
|
|
</span>
|
|
</template>
|
|
|
|
<!-- Task Title (edit mode) -->
|
|
<template x-if="editingTask === task.id">
|
|
<input type="text"
|
|
x-model="editTaskData.title"
|
|
@click.stop
|
|
@keydown.enter.prevent="updateTask(task.id)"
|
|
@keydown.escape.prevent="cancelEditTask()"
|
|
class="tmf-input flex-1 text-sm font-semibold"
|
|
x-ref="editTaskTitleInput">
|
|
</template>
|
|
|
|
<!-- Badge: N misurazioni -->
|
|
<span class="badge badge-neutral text-xs shrink-0"
|
|
x-text="(task.subtasks ? task.subtasks.length : 0) + ' {{ _('misurazioni') }}'">
|
|
</span>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex items-center gap-1 shrink-0" @click.stop>
|
|
|
|
<!-- Edit Task -->
|
|
<template x-if="editingTask !== task.id">
|
|
<button @click="startEditTask(task)"
|
|
class="p-2 rounded-md text-[var(--text-muted)] hover:text-primary hover:bg-[var(--bg-secondary)] transition-colors"
|
|
title="{{ _('Modifica task') }}">
|
|
<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>
|
|
</button>
|
|
</template>
|
|
|
|
<!-- Save / Cancel (edit mode) -->
|
|
<template x-if="editingTask === task.id">
|
|
<div class="flex items-center gap-1">
|
|
<button @click="updateTask(task.id)"
|
|
:disabled="!editTaskData.title.trim() || saving"
|
|
class="p-2 rounded-md text-emerald-600 hover:bg-emerald-50 dark:hover:bg-emerald-900/30 transition-colors"
|
|
title="{{ _('Salva') }}">
|
|
<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="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
</button>
|
|
<button @click="cancelEditTask()"
|
|
class="p-2 rounded-md text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)] transition-colors"
|
|
title="{{ _('Annulla') }}">
|
|
<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>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Expand/Collapse -->
|
|
<button @click.stop="toggleExpand(task.id)"
|
|
class="p-2 rounded-md text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)] transition-colors"
|
|
title="{{ _('Espandi/Comprimi') }}">
|
|
<svg class="w-4 h-4 transition-transform duration-200"
|
|
:class="{ 'rotate-180': expandedTask === task.id }"
|
|
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Delete Task -->
|
|
<button @click="confirmDeleteTask(task)"
|
|
class="p-2 rounded-md text-[var(--text-muted)] hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
|
|
title="{{ _('Elimina task') }}">
|
|
<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>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== Task Card Body (collapsible) ========== -->
|
|
<div x-show="expandedTask === task.id"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0">
|
|
|
|
<div class="tmf-card-body space-y-4">
|
|
|
|
<!-- ========== Task File Upload / Preview ========== -->
|
|
<div class="p-3 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]">
|
|
<p class="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wide mb-2">
|
|
{{ _('Disegno Tecnico') }}
|
|
</p>
|
|
|
|
<!-- Preview if file exists -->
|
|
<template x-if="task.file_path">
|
|
<div class="space-y-2">
|
|
<div class="relative rounded-lg overflow-hidden bg-[var(--bg-secondary)] border border-[var(--border-color)]">
|
|
<canvas :id="'preview-' + task.id"
|
|
class="block mx-auto"
|
|
style="max-height: 192px;">
|
|
</canvas>
|
|
</div>
|
|
<!-- Action buttons -->
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<a :href="'/maker/recipes/' + recipeId + '/tasks/' + task.id + '/drawing'"
|
|
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="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 Disegno') }}
|
|
</a>
|
|
<label class="btn btn-secondary text-xs gap-1.5 cursor-pointer">
|
|
<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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
|
|
</svg>
|
|
{{ _('Sostituisci') }}
|
|
<input type="file"
|
|
accept="image/*,application/pdf"
|
|
class="hidden"
|
|
@change="uploadTaskFile(task.id, $event.target.files[0], task); $event.target.value = ''">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Upload zone if no file -->
|
|
<template x-if="!task.file_path">
|
|
<label class="flex flex-col items-center gap-2 p-4 rounded-lg border-2 border-dashed border-[var(--border-color)] hover:border-primary/50 cursor-pointer transition-colors">
|
|
<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="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>
|
|
<span class="text-xs text-[var(--text-secondary)]">{{ _('Carica immagine o PDF') }}</span>
|
|
<input type="file"
|
|
accept="image/*,application/pdf"
|
|
class="hidden"
|
|
@change="uploadTaskFile(task.id, $event.target.files[0], task); $event.target.value = ''">
|
|
</label>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Task Directive / Description (read-only display) -->
|
|
<template x-if="task.directive || task.description">
|
|
<div class="flex flex-col gap-2 p-3 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]">
|
|
<template x-if="task.directive">
|
|
<div class="flex items-start gap-2">
|
|
<span class="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wide shrink-0 mt-0.5">{{ _('Direttiva') }}:</span>
|
|
<span class="text-sm text-[var(--text-secondary)]" x-text="task.directive"></span>
|
|
</div>
|
|
</template>
|
|
<template x-if="task.description">
|
|
<div class="flex items-start gap-2">
|
|
<span class="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wide shrink-0 mt-0.5">{{ _('Descrizione') }}:</span>
|
|
<span class="text-sm text-[var(--text-secondary)]" x-text="task.description"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Edit Task Extra Fields (when in edit mode) -->
|
|
<template x-if="editingTask === task.id">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 p-3 rounded-lg bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800">
|
|
<div>
|
|
<label class="tmf-label">{{ _('Direttiva') }}</label>
|
|
<input type="text"
|
|
x-model="editTaskData.directive"
|
|
class="tmf-input text-sm"
|
|
placeholder="{{ _('Direttiva opzionale...') }}">
|
|
</div>
|
|
<div>
|
|
<label class="tmf-label">{{ _('Descrizione') }}</label>
|
|
<input type="text"
|
|
x-model="editTaskData.description"
|
|
class="tmf-input text-sm"
|
|
placeholder="{{ _('Descrizione opzionale...') }}">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- ========== Subtask Table ========== -->
|
|
<div class="subtask-table-wrap">
|
|
<table class="tmf-table" x-show="task.subtasks && task.subtasks.length > 0">
|
|
<thead>
|
|
<tr>
|
|
<th class="w-16 text-center">{{ _('#') }}</th>
|
|
<th>{{ _('Descrizione') }}</th>
|
|
<th class="w-24">{{ _('Tipo') }}</th>
|
|
<th class="w-20 text-right">{{ _('Nominale') }}</th>
|
|
<th class="w-20 text-right">{{ _('UTL') }}</th>
|
|
<th class="w-20 text-right">{{ _('UWL') }}</th>
|
|
<th class="w-20 text-right">{{ _('LWL') }}</th>
|
|
<th class="w-20 text-right">{{ _('LTL') }}</th>
|
|
<th class="w-16 text-center">{{ _('Unita') }}</th>
|
|
<th class="w-32">{{ _('Tolleranze') }}</th>
|
|
<th class="w-20 text-center">{{ _('Azioni') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template x-for="subtask in task.subtasks" :key="subtask.id">
|
|
<!-- ---- View Mode Row ---- -->
|
|
<tr x-show="editingSubtask !== subtask.id"
|
|
@dblclick="startEditSubtask(subtask, task.id)"
|
|
class="cursor-pointer hover:bg-[var(--bg-card-hover)]">
|
|
|
|
<!-- Marker Badge -->
|
|
<td class="text-center">
|
|
<span class="marker-badge" x-text="subtask.marker_number"></span>
|
|
</td>
|
|
|
|
<!-- Description -->
|
|
<td>
|
|
<span class="text-sm" x-text="subtask.description"></span>
|
|
</td>
|
|
|
|
<!-- Measurement Type -->
|
|
<td>
|
|
<span class="text-xs badge badge-neutral" x-text="subtask.measurement_type || '-'"></span>
|
|
</td>
|
|
|
|
<!-- Nominal -->
|
|
<td class="text-right">
|
|
<span class="measure-value text-sm" x-text="subtask.nominal != null ? subtask.nominal : '-'"></span>
|
|
</td>
|
|
|
|
<!-- UTL -->
|
|
<td class="text-right">
|
|
<span class="measure-value text-sm text-red-500" x-text="subtask.utl != null ? subtask.utl : '-'"></span>
|
|
</td>
|
|
|
|
<!-- UWL -->
|
|
<td class="text-right">
|
|
<span class="measure-value text-sm text-amber-500" x-text="subtask.uwl != null ? subtask.uwl : '-'"></span>
|
|
</td>
|
|
|
|
<!-- LWL -->
|
|
<td class="text-right">
|
|
<span class="measure-value text-sm text-amber-500" x-text="subtask.lwl != null ? subtask.lwl : '-'"></span>
|
|
</td>
|
|
|
|
<!-- LTL -->
|
|
<td class="text-right">
|
|
<span class="measure-value text-sm text-red-500" x-text="subtask.ltl != null ? subtask.ltl : '-'"></span>
|
|
</td>
|
|
|
|
<!-- Unit -->
|
|
<td class="text-center">
|
|
<span class="text-xs text-[var(--text-muted)]" x-text="subtask.unit || 'mm'"></span>
|
|
</td>
|
|
|
|
<!-- Tolerance Bar -->
|
|
<td>
|
|
<template x-if="subtask.nominal != null && subtask.ltl != null && subtask.utl != null">
|
|
<div class="tolerance-bar" :title="toleranceTitle(subtask)">
|
|
<div class="seg-fail-low h-full" :style="toleranceSegStyle(subtask, 'fail-low')"></div>
|
|
<div class="seg-warn-low h-full" :style="toleranceSegStyle(subtask, 'warn-low')"></div>
|
|
<div class="seg-nominal h-full" :style="toleranceSegStyle(subtask, 'nominal')"></div>
|
|
<div class="seg-warn-high h-full" :style="toleranceSegStyle(subtask, 'warn-high')"></div>
|
|
<div class="seg-fail-high h-full" :style="toleranceSegStyle(subtask, 'fail-high')"></div>
|
|
</div>
|
|
</template>
|
|
<template x-if="subtask.nominal == null || subtask.ltl == null || subtask.utl == null">
|
|
<span class="text-xs text-[var(--text-muted)]">-</span>
|
|
</template>
|
|
</td>
|
|
|
|
<!-- Actions -->
|
|
<td class="text-center">
|
|
<div class="flex items-center justify-center gap-1">
|
|
<button @click.stop="startEditSubtask(subtask, task.id)"
|
|
class="p-1.5 rounded text-[var(--text-muted)] hover:text-primary hover:bg-[var(--bg-secondary)] transition-colors"
|
|
title="{{ _('Modifica') }}">
|
|
<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="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>
|
|
</button>
|
|
<button @click.stop="confirmDeleteSubtask(subtask, task.id)"
|
|
class="p-1.5 rounded text-[var(--text-muted)] hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
|
|
title="{{ _('Elimina') }}">
|
|
<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="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>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- ---- Edit Mode Row ---- -->
|
|
<tr x-show="editingSubtask === subtask.id"
|
|
class="subtask-edit-row bg-blue-50/50 dark:bg-blue-900/10">
|
|
|
|
<!-- Marker -->
|
|
<td class="text-center">
|
|
<input type="number"
|
|
x-model.number="editSubtaskData.marker_number"
|
|
min="1"
|
|
class="tmf-input text-center measure-value w-14">
|
|
</td>
|
|
|
|
<!-- Description -->
|
|
<td>
|
|
<input type="text"
|
|
x-model="editSubtaskData.description"
|
|
class="tmf-input w-full"
|
|
@keydown.enter.prevent="updateSubtask(subtask.id, task.id)">
|
|
</td>
|
|
|
|
<!-- Measurement Type -->
|
|
<td>
|
|
<select x-model="editSubtaskData.measurement_type"
|
|
class="tmf-input">
|
|
<option value="">-</option>
|
|
<option value="linear">{{ _('Lineare') }}</option>
|
|
<option value="diameter">{{ _('Diametro') }}</option>
|
|
<option value="radius">{{ _('Raggio') }}</option>
|
|
<option value="angle">{{ _('Angolo') }}</option>
|
|
<option value="roughness">{{ _('Rugosita') }}</option>
|
|
<option value="torque">{{ _('Coppia') }}</option>
|
|
<option value="force">{{ _('Forza') }}</option>
|
|
<option value="weight">{{ _('Peso') }}</option>
|
|
<option value="other">{{ _('Altro') }}</option>
|
|
</select>
|
|
</td>
|
|
|
|
<!-- Nominal -->
|
|
<td>
|
|
<input type="number" step="any"
|
|
x-model.number="editSubtaskData.nominal"
|
|
class="tmf-input measure-value text-right w-full">
|
|
</td>
|
|
|
|
<!-- UTL -->
|
|
<td>
|
|
<input type="number" step="any"
|
|
x-model.number="editSubtaskData.utl"
|
|
class="tmf-input measure-value text-right w-full">
|
|
</td>
|
|
|
|
<!-- UWL -->
|
|
<td>
|
|
<input type="number" step="any"
|
|
x-model.number="editSubtaskData.uwl"
|
|
class="tmf-input measure-value text-right w-full">
|
|
</td>
|
|
|
|
<!-- LWL -->
|
|
<td>
|
|
<input type="number" step="any"
|
|
x-model.number="editSubtaskData.lwl"
|
|
class="tmf-input measure-value text-right w-full">
|
|
</td>
|
|
|
|
<!-- LTL -->
|
|
<td>
|
|
<input type="number" step="any"
|
|
x-model.number="editSubtaskData.ltl"
|
|
class="tmf-input measure-value text-right w-full">
|
|
</td>
|
|
|
|
<!-- Unit -->
|
|
<td>
|
|
<select x-model="editSubtaskData.unit"
|
|
class="tmf-input text-center">
|
|
<option value="mm">mm</option>
|
|
<option value="cm">cm</option>
|
|
<option value="m">m</option>
|
|
<option value="μm">μm</option>
|
|
<option value="in">in</option>
|
|
<option value="°">°</option>
|
|
<option value="g">g</option>
|
|
<option value="kg">kg</option>
|
|
<option value="N">N</option>
|
|
<option value="Nm">Nm</option>
|
|
</select>
|
|
</td>
|
|
|
|
<!-- Tolerance (empty in edit) -->
|
|
<td></td>
|
|
|
|
<!-- Actions: Save / Cancel -->
|
|
<td class="text-center">
|
|
<div class="flex items-center justify-center gap-1">
|
|
<button @click="updateSubtask(subtask.id, task.id)"
|
|
:disabled="!editSubtaskData.description.trim() || saving"
|
|
class="p-1.5 rounded text-emerald-600 hover:bg-emerald-50 dark:hover:bg-emerald-900/30 transition-colors"
|
|
title="{{ _('Salva') }}">
|
|
<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>
|
|
</button>
|
|
<button @click="cancelEditSubtask()"
|
|
class="p-1.5 rounded text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)] transition-colors"
|
|
title="{{ _('Annulla') }}">
|
|
<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="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- ========== Empty Subtask State ========== -->
|
|
<div x-show="!task.subtasks || task.subtasks.length === 0"
|
|
class="text-center py-8">
|
|
<div class="inline-flex items-center justify-center w-14 h-14 rounded-full
|
|
bg-[var(--bg-secondary)] mb-3">
|
|
<svg class="w-7 h-7 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 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>
|
|
</div>
|
|
<p class="text-sm text-[var(--text-secondary)] mb-1">
|
|
{{ _('Nessuna misurazione definita') }}
|
|
</p>
|
|
<p class="text-xs text-[var(--text-muted)]">
|
|
{{ _('Aggiungi la prima misurazione per questo task') }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- ========== Add Subtask Inline Form ========== -->
|
|
<div x-show="addingSubtaskForTask === task.id"
|
|
x-transition
|
|
class="p-3 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]">
|
|
<p class="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wide mb-3">
|
|
{{ _('Nuova Misurazione') }}
|
|
</p>
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-3">
|
|
<!-- Marker Number -->
|
|
<div>
|
|
<label class="tmf-label text-xs">{{ _('Marker #') }}</label>
|
|
<input type="number"
|
|
x-model.number="newSubtask.marker_number"
|
|
min="1"
|
|
class="tmf-input measure-value text-center">
|
|
</div>
|
|
<!-- Description -->
|
|
<div class="col-span-2 sm:col-span-3 lg:col-span-2">
|
|
<label class="tmf-label text-xs">{{ _('Descrizione') }} <span class="text-red-500">*</span></label>
|
|
<input type="text"
|
|
x-model="newSubtask.description"
|
|
@keydown.enter.prevent="addSubtask(task.id)"
|
|
class="tmf-input"
|
|
placeholder="{{ _('Es. Diametro foro principale') }}">
|
|
</div>
|
|
<!-- Measurement Type -->
|
|
<div>
|
|
<label class="tmf-label text-xs">{{ _('Tipo') }}</label>
|
|
<select x-model="newSubtask.measurement_type"
|
|
class="tmf-input">
|
|
<option value="">-</option>
|
|
<option value="linear">{{ _('Lineare') }}</option>
|
|
<option value="diameter">{{ _('Diametro') }}</option>
|
|
<option value="radius">{{ _('Raggio') }}</option>
|
|
<option value="angle">{{ _('Angolo') }}</option>
|
|
<option value="roughness">{{ _('Rugosita') }}</option>
|
|
<option value="torque">{{ _('Coppia') }}</option>
|
|
<option value="force">{{ _('Forza') }}</option>
|
|
<option value="weight">{{ _('Peso') }}</option>
|
|
<option value="other">{{ _('Altro') }}</option>
|
|
</select>
|
|
</div>
|
|
<!-- Nominal -->
|
|
<div>
|
|
<label class="tmf-label text-xs">{{ _('Nominale') }}</label>
|
|
<input type="number" step="any"
|
|
x-model.number="newSubtask.nominal"
|
|
class="tmf-input measure-value text-right"
|
|
placeholder="0.000">
|
|
</div>
|
|
<!-- Unit -->
|
|
<div>
|
|
<label class="tmf-label text-xs">{{ _('Unita') }}</label>
|
|
<select x-model="newSubtask.unit"
|
|
class="tmf-input">
|
|
<option value="mm">mm</option>
|
|
<option value="cm">cm</option>
|
|
<option value="m">m</option>
|
|
<option value="μm">μm</option>
|
|
<option value="in">in</option>
|
|
<option value="°">°</option>
|
|
<option value="g">g</option>
|
|
<option value="kg">kg</option>
|
|
<option value="N">N</option>
|
|
<option value="Nm">Nm</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tolerance Fields -->
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-3">
|
|
<div>
|
|
<label class="tmf-label text-xs text-red-500">{{ _('LTL') }}</label>
|
|
<input type="number" step="any"
|
|
x-model.number="newSubtask.ltl"
|
|
class="tmf-input measure-value text-right"
|
|
placeholder="{{ _('Lim. Tol. Inf.') }}">
|
|
</div>
|
|
<div>
|
|
<label class="tmf-label text-xs text-amber-500">{{ _('LWL') }}</label>
|
|
<input type="number" step="any"
|
|
x-model.number="newSubtask.lwl"
|
|
class="tmf-input measure-value text-right"
|
|
placeholder="{{ _('Lim. Warn. Inf.') }}">
|
|
</div>
|
|
<div>
|
|
<label class="tmf-label text-xs text-amber-500">{{ _('UWL') }}</label>
|
|
<input type="number" step="any"
|
|
x-model.number="newSubtask.uwl"
|
|
class="tmf-input measure-value text-right"
|
|
placeholder="{{ _('Lim. Warn. Sup.') }}">
|
|
</div>
|
|
<div>
|
|
<label class="tmf-label text-xs text-red-500">{{ _('UTL') }}</label>
|
|
<input type="number" step="any"
|
|
x-model.number="newSubtask.utl"
|
|
class="tmf-input measure-value text-right"
|
|
placeholder="{{ _('Lim. Tol. Sup.') }}">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="flex items-center gap-2 justify-end mt-4">
|
|
<button @click="addingSubtaskForTask = null; resetNewSubtask(task.id)"
|
|
class="btn btn-secondary text-xs">
|
|
{{ _('Annulla') }}
|
|
</button>
|
|
<button @click="addSubtask(task.id)"
|
|
:disabled="!newSubtask.description.trim() || saving"
|
|
class="btn btn-primary text-xs gap-1.5">
|
|
<svg x-show="!saving" 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>
|
|
<svg x-show="saving" class="w-3.5 h-3.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>
|
|
{{ _('Aggiungi Misurazione') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== Task Card Footer ========== -->
|
|
<div class="tmf-card-footer flex items-center justify-end">
|
|
<button @click="openAddSubtask(task)"
|
|
x-show="addingSubtaskForTask !== task.id"
|
|
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="M12 4v16m8-8H4"/>
|
|
</svg>
|
|
{{ _('Aggiungi Misurazione') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
Empty State (no tasks)
|
|
============================================================ -->
|
|
<div x-show="tasks.length === 0 && !showAddTask"
|
|
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 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>
|
|
</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)] max-w-md mx-auto mb-6">
|
|
{{ _('Inizia aggiungendo il primo task di misurazione per questa ricetta') }}
|
|
</p>
|
|
<button @click="showAddTask = true; $nextTick(() => $refs.newTaskTitle && $refs.newTaskTitle.focus())"
|
|
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 Primo Task') }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
Delete Task Confirmation Modal
|
|
============================================================ -->
|
|
<div x-show="deleteTaskModal"
|
|
x-cloak
|
|
@keydown.escape.window="deleteTaskModal = false"
|
|
class="fixed inset-0 z-50 overflow-y-auto"
|
|
role="dialog"
|
|
aria-modal="true">
|
|
<!-- Backdrop -->
|
|
<div x-show="deleteTaskModal"
|
|
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="deleteTaskModal = 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="deleteTaskModal"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-y-4 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: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>
|
|
<h3 class="text-lg font-semibold text-[var(--text-primary)] text-center mb-2">
|
|
{{ _('Conferma Eliminazione Task') }}
|
|
</h3>
|
|
<template x-if="deleteTargetTask">
|
|
<div>
|
|
<p class="text-sm text-[var(--text-secondary)] text-center mb-2">
|
|
{{ _('Sei sicuro di voler eliminare il task') }}
|
|
<span class="font-semibold text-[var(--text-primary)]" x-text="deleteTargetTask.title"></span>?
|
|
</p>
|
|
<p class="text-xs text-[var(--text-muted)] text-center mb-6"
|
|
x-show="deleteTargetTask.subtasks && deleteTargetTask.subtasks.length > 0">
|
|
{{ _('Verranno eliminate anche') }}
|
|
<span class="font-semibold" x-text="deleteTargetTask.subtasks.length"></span>
|
|
{{ _('misurazioni associate.') }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
|
<button @click="deleteTaskModal = false"
|
|
class="btn btn-secondary flex-1 justify-center">
|
|
{{ _('Annulla') }}
|
|
</button>
|
|
<button @click="deleteTask(deleteTargetTask.id)"
|
|
class="btn btn-danger flex-1 justify-center">
|
|
{{ _('Elimina Task') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
Delete Subtask Confirmation Modal
|
|
============================================================ -->
|
|
<div x-show="deleteSubtaskModal"
|
|
x-cloak
|
|
@keydown.escape.window="deleteSubtaskModal = false"
|
|
class="fixed inset-0 z-50 overflow-y-auto"
|
|
role="dialog"
|
|
aria-modal="true">
|
|
<!-- Backdrop -->
|
|
<div x-show="deleteSubtaskModal"
|
|
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="deleteSubtaskModal = 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="deleteSubtaskModal"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-y-4 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: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="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>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-[var(--text-primary)] text-center mb-2">
|
|
{{ _('Conferma Eliminazione Misurazione') }}
|
|
</h3>
|
|
<template x-if="deleteTargetSubtask">
|
|
<p class="text-sm text-[var(--text-secondary)] text-center mb-6">
|
|
{{ _('Sei sicuro di voler eliminare la misurazione') }}
|
|
<span class="font-semibold text-[var(--text-primary)]">
|
|
#<span x-text="deleteTargetSubtask.marker_number"></span>
|
|
</span>
|
|
— <span x-text="deleteTargetSubtask.description"></span>?
|
|
</p>
|
|
</template>
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
|
<button @click="deleteSubtaskModal = false"
|
|
class="btn btn-secondary flex-1 justify-center">
|
|
{{ _('Annulla') }}
|
|
</button>
|
|
<button @click="deleteSubtask(deleteTargetSubtask.id, deleteSubtaskParentId)"
|
|
class="btn btn-danger flex-1 justify-center">
|
|
{{ _('Elimina Misurazione') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
|
<script>if(typeof pdfjsLib!=='undefined')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-viewer.js') }}?v=3"></script>
|
|
<script>
|
|
function taskEditor() {
|
|
return {
|
|
// ---- Recipe context ----
|
|
recipeId: {{ recipe.id|tojson }},
|
|
|
|
// ---- Task list ----
|
|
tasks: {{ recipe.tasks|tojson }},
|
|
|
|
// ---- UI state ----
|
|
expandedTask: null,
|
|
showAddTask: false,
|
|
saving: false,
|
|
errorMessage: '',
|
|
successMessage: '',
|
|
|
|
// ---- Task CRUD state ----
|
|
editingTask: null,
|
|
editTaskData: { title: '', directive: '', description: '' },
|
|
newTask: { title: '', directive: '', description: '' },
|
|
|
|
// ---- Subtask CRUD state ----
|
|
editingSubtask: null,
|
|
editSubtaskData: {
|
|
marker_number: 1, description: '', measurement_type: '',
|
|
nominal: null, utl: null, uwl: null, lwl: null, ltl: null, unit: 'mm'
|
|
},
|
|
addingSubtaskForTask: null,
|
|
newSubtask: {
|
|
marker_number: 1, description: '', measurement_type: '',
|
|
nominal: null, utl: null, uwl: null, lwl: null, ltl: null, unit: 'mm'
|
|
},
|
|
|
|
// ---- Delete modals ----
|
|
deleteTaskModal: false,
|
|
deleteTargetTask: null,
|
|
deleteSubtaskModal: false,
|
|
deleteTargetSubtask: null,
|
|
deleteSubtaskParentId: null,
|
|
|
|
// ---- Drag & Drop state ----
|
|
dragState: { dragging: null, over: null, position: null },
|
|
|
|
// ============================================================
|
|
// Init
|
|
// ============================================================
|
|
init() {
|
|
// Sort tasks by order_index on load
|
|
this.tasks.sort((a, b) => (a.order_index || 0) - (b.order_index || 0));
|
|
|
|
// Auto-expand the first task if there is only one
|
|
if (this.tasks.length === 1) {
|
|
this.expandedTask = this.tasks[0].id;
|
|
this.renderTaskPreview(this.tasks[0]);
|
|
}
|
|
},
|
|
|
|
// ============================================================
|
|
// CSRF Helper
|
|
// ============================================================
|
|
csrfToken() {
|
|
return document.querySelector('meta[name="csrf-token"]')?.content || '';
|
|
},
|
|
|
|
// ============================================================
|
|
// Render Task Preview (deferred)
|
|
// ============================================================
|
|
renderTaskPreview(task) {
|
|
if (!task || !task.file_path) return;
|
|
if (typeof renderAnnotationPreview !== 'function') {
|
|
// Fallback: show image via <img> tag if viewer script not loaded
|
|
this.$nextTick(() => {
|
|
const canvas = document.getElementById('preview-' + task.id);
|
|
if (canvas && canvas.parentElement) {
|
|
const img = document.createElement('img');
|
|
img.src = '/maker/api/files/' + task.file_path;
|
|
img.className = 'block mx-auto max-h-48 object-contain';
|
|
img.loading = 'lazy';
|
|
canvas.parentElement.replaceChild(img, canvas);
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
this.$nextTick(() => {
|
|
setTimeout(() => {
|
|
const canvas = document.getElementById('preview-' + task.id);
|
|
if (canvas) {
|
|
renderAnnotationPreview(canvas, '/maker/api/files/' + task.file_path, task.annotations_json);
|
|
}
|
|
}, 50);
|
|
});
|
|
},
|
|
|
|
// ============================================================
|
|
// Toggle Expand
|
|
// ============================================================
|
|
toggleExpand(taskId) {
|
|
this.expandedTask = this.expandedTask === taskId ? null : taskId;
|
|
// Render preview when expanding
|
|
if (this.expandedTask === taskId) {
|
|
const task = this.tasks.find(t => t.id === taskId);
|
|
if (task) this.renderTaskPreview(task);
|
|
}
|
|
// Reset inline editors when collapsing
|
|
if (this.expandedTask !== taskId) {
|
|
this.editingSubtask = null;
|
|
this.addingSubtaskForTask = null;
|
|
}
|
|
},
|
|
|
|
// ============================================================
|
|
// TASK CRUD
|
|
// ============================================================
|
|
|
|
resetNewTask() {
|
|
this.newTask = { title: '', directive: '', description: '' };
|
|
},
|
|
|
|
async addTask() {
|
|
if (!this.newTask.title.trim()) return;
|
|
this.saving = true;
|
|
this.errorMessage = '';
|
|
|
|
try {
|
|
const resp = await fetch(`/maker/api/recipes/${this.recipeId}/tasks`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': this.csrfToken()
|
|
},
|
|
body: JSON.stringify({
|
|
title: this.newTask.title.trim(),
|
|
directive: this.newTask.directive.trim() || null,
|
|
description: this.newTask.description.trim() || null
|
|
})
|
|
});
|
|
|
|
const data = await resp.json();
|
|
|
|
if (data.error) {
|
|
this.errorMessage = data.detail || {{ _("Errore nella creazione del task")|tojson }};
|
|
} else {
|
|
// Ensure subtasks array exists
|
|
if (!data.subtasks) data.subtasks = [];
|
|
this.tasks.push(data);
|
|
this.resetNewTask();
|
|
this.showAddTask = false;
|
|
this.expandedTask = data.id;
|
|
this.successMessage = {{ _("Task creato con successo")|tojson }};
|
|
}
|
|
} catch (err) {
|
|
console.error('addTask error:', err);
|
|
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
|
}
|
|
|
|
this.saving = false;
|
|
},
|
|
|
|
startEditTask(task) {
|
|
this.editingTask = task.id;
|
|
this.editTaskData = {
|
|
title: task.title,
|
|
directive: task.directive || '',
|
|
description: task.description || ''
|
|
};
|
|
// Ensure expanded
|
|
this.expandedTask = task.id;
|
|
},
|
|
|
|
cancelEditTask() {
|
|
this.editingTask = null;
|
|
this.editTaskData = { title: '', directive: '', description: '' };
|
|
},
|
|
|
|
async updateTask(taskId) {
|
|
if (!this.editTaskData.title.trim()) return;
|
|
this.saving = true;
|
|
this.errorMessage = '';
|
|
|
|
try {
|
|
const resp = await fetch(`/maker/api/tasks/${taskId}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': this.csrfToken()
|
|
},
|
|
body: JSON.stringify({
|
|
title: this.editTaskData.title.trim(),
|
|
directive: this.editTaskData.directive.trim() || null,
|
|
description: this.editTaskData.description.trim() || null
|
|
})
|
|
});
|
|
|
|
const data = await resp.json();
|
|
|
|
if (data.error) {
|
|
this.errorMessage = data.detail || {{ _("Errore nel salvataggio del task")|tojson }};
|
|
} else {
|
|
// Update local state
|
|
const idx = this.tasks.findIndex(t => t.id === taskId);
|
|
if (idx !== -1) {
|
|
// Preserve subtasks from local state since PUT may not return them
|
|
const existingSubtasks = this.tasks[idx].subtasks;
|
|
this.tasks[idx] = { ...this.tasks[idx], ...data };
|
|
if (!this.tasks[idx].subtasks) {
|
|
this.tasks[idx].subtasks = existingSubtasks || [];
|
|
}
|
|
}
|
|
this.cancelEditTask();
|
|
this.successMessage = {{ _("Task aggiornato")|tojson }};
|
|
}
|
|
} catch (err) {
|
|
console.error('updateTask error:', err);
|
|
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
|
}
|
|
|
|
this.saving = false;
|
|
},
|
|
|
|
confirmDeleteTask(task) {
|
|
this.deleteTargetTask = task;
|
|
this.deleteTaskModal = true;
|
|
},
|
|
|
|
async deleteTask(taskId) {
|
|
this.saving = true;
|
|
this.errorMessage = '';
|
|
|
|
try {
|
|
const resp = await fetch(`/maker/api/tasks/${taskId}`, {
|
|
method: 'DELETE',
|
|
headers: { 'X-CSRFToken': this.csrfToken() }
|
|
});
|
|
|
|
if (resp.ok || resp.status === 204) {
|
|
this.tasks = this.tasks.filter(t => t.id !== taskId);
|
|
this.deleteTaskModal = false;
|
|
this.deleteTargetTask = null;
|
|
if (this.expandedTask === taskId) this.expandedTask = null;
|
|
this.successMessage = {{ _("Task eliminato")|tojson }};
|
|
} else {
|
|
const data = await resp.json();
|
|
this.errorMessage = data.detail || {{ _("Errore nell'eliminazione del task")|tojson }};
|
|
}
|
|
} catch (err) {
|
|
console.error('deleteTask error:', err);
|
|
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
|
}
|
|
|
|
this.saving = false;
|
|
},
|
|
|
|
// ============================================================
|
|
// DRAG & DROP REORDER
|
|
// ============================================================
|
|
|
|
handleDragStart(event, task) {
|
|
this.dragState.dragging = task.id;
|
|
event.dataTransfer.effectAllowed = 'move';
|
|
// Required for Firefox
|
|
event.dataTransfer.setData('text/plain', String(task.id));
|
|
},
|
|
|
|
handleDragEnd(event) {
|
|
this.dragState = { dragging: null, over: null, position: null };
|
|
},
|
|
|
|
handleDragOver(event, task) {
|
|
if (this.dragState.dragging === task.id) return;
|
|
event.dataTransfer.dropEffect = 'move';
|
|
|
|
// Determine above/below based on mouse position
|
|
const rect = event.currentTarget.getBoundingClientRect();
|
|
const midY = rect.top + rect.height / 2;
|
|
this.dragState.over = task.id;
|
|
this.dragState.position = event.clientY < midY ? 'above' : 'below';
|
|
},
|
|
|
|
handleDragLeave(event, task) {
|
|
// Only clear if leaving the card entirely
|
|
if (!event.currentTarget.contains(event.relatedTarget)) {
|
|
if (this.dragState.over === task.id) {
|
|
this.dragState.over = null;
|
|
this.dragState.position = null;
|
|
}
|
|
}
|
|
},
|
|
|
|
async handleDrop(event, targetTask) {
|
|
const draggedId = this.dragState.dragging;
|
|
const targetId = targetTask.id;
|
|
|
|
if (draggedId === targetId) {
|
|
this.dragState = { dragging: null, over: null, position: null };
|
|
return;
|
|
}
|
|
|
|
// Reorder locally
|
|
const draggedIdx = this.tasks.findIndex(t => t.id === draggedId);
|
|
const targetIdx = this.tasks.findIndex(t => t.id === targetId);
|
|
|
|
if (draggedIdx === -1 || targetIdx === -1) return;
|
|
|
|
// Remove dragged task
|
|
const [dragged] = this.tasks.splice(draggedIdx, 1);
|
|
|
|
// Recalculate target index after removal
|
|
let insertIdx = this.tasks.findIndex(t => t.id === targetId);
|
|
if (this.dragState.position === 'below') insertIdx += 1;
|
|
|
|
// Insert at new position
|
|
this.tasks.splice(insertIdx, 0, dragged);
|
|
|
|
this.dragState = { dragging: null, over: null, position: null };
|
|
|
|
// Persist to server
|
|
await this.reorderTasks();
|
|
},
|
|
|
|
async reorderTasks() {
|
|
this.errorMessage = '';
|
|
|
|
const taskIds = this.tasks.map(t => t.id);
|
|
|
|
try {
|
|
const resp = await fetch('/maker/api/tasks/reorder', {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': this.csrfToken()
|
|
},
|
|
body: JSON.stringify({ task_ids: taskIds })
|
|
});
|
|
|
|
const data = await resp.json();
|
|
|
|
if (data.error) {
|
|
this.errorMessage = data.detail || {{ _("Errore nel riordinamento")|tojson }};
|
|
}
|
|
} catch (err) {
|
|
console.error('reorderTasks error:', err);
|
|
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
|
}
|
|
},
|
|
|
|
// ============================================================
|
|
// SUBTASK CRUD
|
|
// ============================================================
|
|
|
|
nextMarkerNumber(task) {
|
|
if (!task.subtasks || task.subtasks.length === 0) return 1;
|
|
return Math.max(...task.subtasks.map(s => s.marker_number || 0)) + 1;
|
|
},
|
|
|
|
resetNewSubtask(taskId) {
|
|
const task = this.tasks.find(t => t.id === taskId);
|
|
this.newSubtask = {
|
|
marker_number: task ? this.nextMarkerNumber(task) : 1,
|
|
description: '',
|
|
measurement_type: '',
|
|
nominal: null,
|
|
utl: null,
|
|
uwl: null,
|
|
lwl: null,
|
|
ltl: null,
|
|
unit: 'mm'
|
|
};
|
|
},
|
|
|
|
openAddSubtask(task) {
|
|
this.editingSubtask = null;
|
|
this.addingSubtaskForTask = task.id;
|
|
this.resetNewSubtask(task.id);
|
|
},
|
|
|
|
async addSubtask(taskId) {
|
|
if (!this.newSubtask.description.trim()) return;
|
|
this.saving = true;
|
|
this.errorMessage = '';
|
|
|
|
const payload = {
|
|
marker_number: this.newSubtask.marker_number || 1,
|
|
description: this.newSubtask.description.trim(),
|
|
measurement_type: this.newSubtask.measurement_type || null,
|
|
nominal: this.newSubtask.nominal,
|
|
utl: this.newSubtask.utl,
|
|
uwl: this.newSubtask.uwl,
|
|
lwl: this.newSubtask.lwl,
|
|
ltl: this.newSubtask.ltl,
|
|
unit: this.newSubtask.unit || 'mm'
|
|
};
|
|
|
|
try {
|
|
const resp = await fetch(`/maker/api/tasks/${taskId}/subtasks`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': this.csrfToken()
|
|
},
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
const data = await resp.json();
|
|
|
|
if (data.error) {
|
|
this.errorMessage = data.detail || {{ _("Errore nella creazione della misurazione")|tojson }};
|
|
} else {
|
|
const task = this.tasks.find(t => t.id === taskId);
|
|
if (task) {
|
|
if (!task.subtasks) task.subtasks = [];
|
|
task.subtasks.push(data);
|
|
}
|
|
this.resetNewSubtask(taskId);
|
|
this.successMessage = {{ _("Misurazione aggiunta")|tojson }};
|
|
}
|
|
} catch (err) {
|
|
console.error('addSubtask error:', err);
|
|
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
|
}
|
|
|
|
this.saving = false;
|
|
},
|
|
|
|
startEditSubtask(subtask, taskId) {
|
|
this.addingSubtaskForTask = null;
|
|
this.editingSubtask = subtask.id;
|
|
this.editSubtaskData = {
|
|
marker_number: subtask.marker_number,
|
|
description: subtask.description || '',
|
|
measurement_type: subtask.measurement_type || '',
|
|
nominal: subtask.nominal,
|
|
utl: subtask.utl,
|
|
uwl: subtask.uwl,
|
|
lwl: subtask.lwl,
|
|
ltl: subtask.ltl,
|
|
unit: subtask.unit || 'mm'
|
|
};
|
|
},
|
|
|
|
cancelEditSubtask() {
|
|
this.editingSubtask = null;
|
|
this.editSubtaskData = {
|
|
marker_number: 1, description: '', measurement_type: '',
|
|
nominal: null, utl: null, uwl: null, lwl: null, ltl: null, unit: 'mm'
|
|
};
|
|
},
|
|
|
|
async updateSubtask(subtaskId, taskId) {
|
|
if (!this.editSubtaskData.description.trim()) return;
|
|
this.saving = true;
|
|
this.errorMessage = '';
|
|
|
|
const payload = {
|
|
marker_number: this.editSubtaskData.marker_number || 1,
|
|
description: this.editSubtaskData.description.trim(),
|
|
measurement_type: this.editSubtaskData.measurement_type || null,
|
|
nominal: this.editSubtaskData.nominal,
|
|
utl: this.editSubtaskData.utl,
|
|
uwl: this.editSubtaskData.uwl,
|
|
lwl: this.editSubtaskData.lwl,
|
|
ltl: this.editSubtaskData.ltl,
|
|
unit: this.editSubtaskData.unit || 'mm'
|
|
};
|
|
|
|
try {
|
|
const resp = await fetch(`/maker/api/subtasks/${subtaskId}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': this.csrfToken()
|
|
},
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
const data = await resp.json();
|
|
|
|
if (data.error) {
|
|
this.errorMessage = data.detail || {{ _("Errore nel salvataggio della misurazione")|tojson }};
|
|
} else {
|
|
// Update local state
|
|
const task = this.tasks.find(t => t.id === taskId);
|
|
if (task && task.subtasks) {
|
|
const idx = task.subtasks.findIndex(s => s.id === subtaskId);
|
|
if (idx !== -1) {
|
|
task.subtasks[idx] = { ...task.subtasks[idx], ...data };
|
|
}
|
|
}
|
|
this.cancelEditSubtask();
|
|
this.successMessage = {{ _("Misurazione aggiornata")|tojson }};
|
|
}
|
|
} catch (err) {
|
|
console.error('updateSubtask error:', err);
|
|
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
|
}
|
|
|
|
this.saving = false;
|
|
},
|
|
|
|
confirmDeleteSubtask(subtask, taskId) {
|
|
this.deleteTargetSubtask = subtask;
|
|
this.deleteSubtaskParentId = taskId;
|
|
this.deleteSubtaskModal = true;
|
|
},
|
|
|
|
async deleteSubtask(subtaskId, taskId) {
|
|
this.saving = true;
|
|
this.errorMessage = '';
|
|
|
|
try {
|
|
const resp = await fetch(`/maker/api/subtasks/${subtaskId}`, {
|
|
method: 'DELETE',
|
|
headers: { 'X-CSRFToken': this.csrfToken() }
|
|
});
|
|
|
|
if (resp.ok || resp.status === 204) {
|
|
const task = this.tasks.find(t => t.id === taskId);
|
|
if (task && task.subtasks) {
|
|
task.subtasks = task.subtasks.filter(s => s.id !== subtaskId);
|
|
}
|
|
this.deleteSubtaskModal = false;
|
|
this.deleteTargetSubtask = null;
|
|
this.deleteSubtaskParentId = null;
|
|
this.successMessage = {{ _("Misurazione eliminata")|tojson }};
|
|
} else {
|
|
const data = await resp.json();
|
|
this.errorMessage = data.detail || {{ _("Errore nell'eliminazione della misurazione")|tojson }};
|
|
}
|
|
} catch (err) {
|
|
console.error('deleteSubtask error:', err);
|
|
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
|
}
|
|
|
|
this.saving = false;
|
|
},
|
|
|
|
// ============================================================
|
|
// TASK FILE UPLOAD
|
|
// ============================================================
|
|
|
|
async uploadTaskFile(taskId, file, task) {
|
|
if (!file) return;
|
|
|
|
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.")|tojson }};
|
|
return;
|
|
}
|
|
|
|
if (file.size > 20 * 1024 * 1024) {
|
|
this.errorMessage = {{ _("File troppo grande. Dimensione massima: 20MB.")|tojson }};
|
|
return;
|
|
}
|
|
|
|
this.saving = true;
|
|
this.errorMessage = '';
|
|
|
|
try {
|
|
// 1. Upload file
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
formData.append('recipe_id', this.recipeId);
|
|
|
|
const uploadResp = await fetch('/maker/api/upload', {
|
|
method: 'POST',
|
|
headers: { 'X-CSRFToken': this.csrfToken() },
|
|
body: formData
|
|
});
|
|
|
|
const uploadData = await uploadResp.json();
|
|
if (uploadData.error) {
|
|
this.errorMessage = uploadData.detail || {{ _("Errore durante il caricamento del file")|tojson }};
|
|
this.saving = false;
|
|
return;
|
|
}
|
|
|
|
// Determine file type
|
|
const fileType = file.type === 'application/pdf' ? 'pdf' : 'image';
|
|
|
|
// 2. Update task with file_path
|
|
const updateResp = await fetch(`/maker/api/tasks/${taskId}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': this.csrfToken()
|
|
},
|
|
body: JSON.stringify({
|
|
file_path: uploadData.file_path,
|
|
file_type: fileType
|
|
})
|
|
});
|
|
|
|
const updateData = await updateResp.json();
|
|
if (updateData.error) {
|
|
this.errorMessage = updateData.detail || {{ _("Errore nel salvataggio del task")|tojson }};
|
|
this.saving = false;
|
|
return;
|
|
}
|
|
|
|
// 3. Update local state
|
|
task.file_path = uploadData.file_path;
|
|
task.file_type = fileType;
|
|
this.successMessage = {{ _("File caricato con successo")|tojson }};
|
|
|
|
// Re-render preview canvas with new image
|
|
this.renderTaskPreview(task);
|
|
|
|
} catch (err) {
|
|
console.error('uploadTaskFile error:', err);
|
|
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
|
}
|
|
|
|
this.saving = false;
|
|
},
|
|
|
|
// ============================================================
|
|
// TOLERANCE BAR VISUALIZATION
|
|
// ============================================================
|
|
|
|
toleranceTitle(s) {
|
|
return `LTL: ${s.ltl} | LWL: ${s.lwl ?? '-'} | Nom: ${s.nominal} | UWL: ${s.uwl ?? '-'} | UTL: ${s.utl}`;
|
|
},
|
|
|
|
toleranceSegStyle(s, segment) {
|
|
// Compute proportional widths for tolerance bar segments.
|
|
// Full range: LTL to UTL. Nominal sits in the middle.
|
|
const ltl = s.ltl ?? s.nominal;
|
|
const utl = s.utl ?? s.nominal;
|
|
const lwl = s.lwl ?? ltl;
|
|
const uwl = s.uwl ?? utl;
|
|
const nom = s.nominal;
|
|
const range = utl - ltl;
|
|
|
|
if (range <= 0) return 'width: 20%';
|
|
|
|
const pct = (v) => ((v - ltl) / range) * 100;
|
|
|
|
switch (segment) {
|
|
case 'fail-low':
|
|
return `width: ${pct(lwl)}%`;
|
|
case 'warn-low':
|
|
return `width: ${pct(nom) - pct(lwl)}%`;
|
|
case 'nominal':
|
|
// Small central band around nominal
|
|
return `width: ${Math.max(pct(uwl) - pct(nom), 0)}%`;
|
|
case 'warn-high':
|
|
// From UWL towards nominal already covered; this is UWL to UTL gap
|
|
// Re-compute: fail-low = 0..lwl, warn-low = lwl..nom, nominal = nom..uwl, warn-high = uwl..utl, fail-high = utl..end
|
|
// Since range = utl-ltl and pct(utl)=100, we use:
|
|
return `width: ${100 - pct(uwl)}%`;
|
|
case 'fail-high':
|
|
// Already at utl which is 100%, so no extra fail-high in simple model.
|
|
// Instead, restructure: LTL..LWL | LWL..NOM | NOM..UWL | UWL..UTL
|
|
return 'width: 0%';
|
|
default:
|
|
return 'width: 0%';
|
|
}
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
{% endblock %}
|