add image upload functionality with history tracking, implement processing job, and integrate Tailwind CSS
parent
35d3d609a6
commit
2225751bc8
@ -0,0 +1,15 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Http\Controllers;
|
||||||
|
|
||||||
|
use Illuminate\Http\Request;
|
||||||
|
use App\Models\ProcessHistories;
|
||||||
|
|
||||||
|
class HistoryController extends Controller
|
||||||
|
{
|
||||||
|
public function index()
|
||||||
|
{
|
||||||
|
$histories = ProcessHistories::orderBy('id','desc')->get();
|
||||||
|
return view('history.index', compact('histories'));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,95 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Http\Livewire;
|
||||||
|
|
||||||
|
use Livewire\Component;
|
||||||
|
use Livewire\WithFileUploads;
|
||||||
|
use App\Models\ProcessHistories;
|
||||||
|
use Illuminate\Support\Facades\Bus;
|
||||||
|
use Illuminate\Support\Facades\Storage;
|
||||||
|
use App\Jobs\ProcessImagesJob;
|
||||||
|
|
||||||
|
class ImageUpload extends Component
|
||||||
|
{
|
||||||
|
use WithFileUploads;
|
||||||
|
|
||||||
|
public $images = []; // Массив из 3 элементов
|
||||||
|
public $imagePreviews = [];
|
||||||
|
public $historyId;
|
||||||
|
public $status = 'idle';
|
||||||
|
// Возможные статусы: 'idle', 'uploaded', 'processing', 'done', ...
|
||||||
|
public $progressMessage = '';
|
||||||
|
public $queueJobId;
|
||||||
|
|
||||||
|
protected $rules = [
|
||||||
|
'images.*' => 'image|max:4096', // 4MB, можно изменить по желанию
|
||||||
|
];
|
||||||
|
|
||||||
|
public function updatedImages($value, $key)
|
||||||
|
{
|
||||||
|
// После обновления файла, генерируем превью
|
||||||
|
$this->validateOnly('images.*');
|
||||||
|
|
||||||
|
if ($this->images[$key]) {
|
||||||
|
$this->imagePreviews[$key] = $this->images[$key]->temporaryUrl();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public function startProcessing()
|
||||||
|
{
|
||||||
|
$this->validate();
|
||||||
|
|
||||||
|
// Сохраняем изображения
|
||||||
|
$savedImages = [];
|
||||||
|
foreach ($this->images as $uploaded) {
|
||||||
|
$path = $uploaded->store('images', 'public');
|
||||||
|
$savedImages[] = [
|
||||||
|
'path' => $path,
|
||||||
|
'original_name' => $uploaded->getClientOriginalName()
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Создаём запись в истории
|
||||||
|
$history = ProcessHistories::create([
|
||||||
|
'images' => $savedImages,
|
||||||
|
'started_at' => now(),
|
||||||
|
]);
|
||||||
|
|
||||||
|
$this->historyId = $history->id;
|
||||||
|
$this->status = 'processing';
|
||||||
|
$this->progressMessage = 'Ставим в очередь на обработку...';
|
||||||
|
|
||||||
|
// Отправляем задачу в очередь
|
||||||
|
$job = new ProcessImagesJob($history->id);
|
||||||
|
$dispatch = dispatch($job);
|
||||||
|
|
||||||
|
// Можно при желании сохранить ID задачи, если нужно
|
||||||
|
// $this->queueJobId = ... (в зависимости от драйвера очереди)
|
||||||
|
|
||||||
|
// Дальше фронт будет периодически обновлять состояние либо
|
||||||
|
// мы можем слушать события Livewire (Broadcasting) по готовности
|
||||||
|
}
|
||||||
|
|
||||||
|
public function pollStatus()
|
||||||
|
{
|
||||||
|
if ($this->historyId) {
|
||||||
|
$history = ProcessHistories::find($this->historyId);
|
||||||
|
if ($history) {
|
||||||
|
if ($history->finished_at) {
|
||||||
|
$this->status = 'done';
|
||||||
|
$this->progressMessage = 'Обработка завершена. Файл: ' . $history->step_file_name;
|
||||||
|
} else {
|
||||||
|
// Можно отобразить прогресс, если в историях где-то хранится этап
|
||||||
|
$count = $history->processed_count;
|
||||||
|
$this->progressMessage = "Обработка в процессе... {$count}/3 изображений";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public function render()
|
||||||
|
{
|
||||||
|
return view('livewire.image-upload');
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"/js/app.js": "/js/app.js",
|
||||||
|
"/css/app.css": "/css/app.css"
|
||||||
|
}
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
<x-app-layout>
|
||||||
|
<x-slot name="header">
|
||||||
|
История обработок
|
||||||
|
</x-slot>
|
||||||
|
|
||||||
|
<div class="p-4">
|
||||||
|
<h1 class="text-2xl font-bold mb-4">История обработок</h1>
|
||||||
|
<table class="min-w-full border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr class="border-b">
|
||||||
|
<th class="p-2 text-left">ID</th>
|
||||||
|
<th class="p-2 text-left">Изображения</th>
|
||||||
|
<th class="p-2 text-left">Step файл</th>
|
||||||
|
<th class="p-2 text-left">Время начала</th>
|
||||||
|
<th class="p-2 text-left">Время окончания</th>
|
||||||
|
<th class="p-2 text-left">Обработано</th>
|
||||||
|
<th class="p-2 text-left">Затраты времени (сек)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
@foreach($histories as $h)
|
||||||
|
<tr class="border-b">
|
||||||
|
<td class="p-2">{{ $h->id }}</td>
|
||||||
|
<td class="p-2">
|
||||||
|
@foreach($h->images as $img)
|
||||||
|
<div>{{ $img['original_name'] }} ({{ $img['path'] }})</div>
|
||||||
|
@endforeach
|
||||||
|
</td>
|
||||||
|
<td class="p-2">{{ $h->step_file_name }}</td>
|
||||||
|
<td class="p-2">{{ $h->started_at }}</td>
|
||||||
|
<td class="p-2">{{ $h->finished_at }}</td>
|
||||||
|
<td class="p-2">{{ $h->processed_count }}/3</td>
|
||||||
|
<td class="p-2">
|
||||||
|
@if($h->stages_timing)
|
||||||
|
Очередь: {{ $h->stages_timing['queue_wait_time'] ?? 'N/A' }}<br>
|
||||||
|
Загрузка: {{ $h->stages_timing['upload_time'] ?? 'N/A' }}<br>
|
||||||
|
Обработка: {{ $h->stages_timing['processing_time'] ?? 'N/A' }}<br>
|
||||||
|
Сохранение: {{ $h->stages_timing['saving_time'] ?? 'N/A' }}<br>
|
||||||
|
@endif
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
@endforeach
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</x-app-layout>
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
<div class="p-4 space-y-4">
|
||||||
|
<h1 class="text-2xl font-bold">Загрузка изображений</h1>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
@for($i=0; $i<3; $i++)
|
||||||
|
<div class="border-2 border-dashed border-gray-300 w-32 h-32 flex items-center justify-center">
|
||||||
|
@if(isset($imagePreviews[$i]))
|
||||||
|
<img src="{{ $imagePreviews[$i] }}" class="object-cover w-full h-full" alt="Preview">
|
||||||
|
@else
|
||||||
|
<label class="cursor-pointer text-center">
|
||||||
|
<span class="text-gray-500">Перетащите файл сюда или кликните</span>
|
||||||
|
<input type="file" class="hidden" wire:model="images.{{ $i }}">
|
||||||
|
</label>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
@endfor
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-x-2">
|
||||||
|
<button wire:click="startProcessing"
|
||||||
|
class="bg-blue-500 text-white px-4 py-2 rounded"
|
||||||
|
@disabled($status !== 'idle' && $status !== 'uploaded')>
|
||||||
|
Начать
|
||||||
|
</button>
|
||||||
|
@if($status === 'processing')
|
||||||
|
<button wire:poll.2s="pollStatus" class="hidden"></button>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if($progressMessage)
|
||||||
|
<div class="text-gray-700 mt-4">{{ $progressMessage }}</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
@if($status === 'done')
|
||||||
|
<a href="{{ route('history') }}" class="text-blue-500 underline">Посмотреть историю обработок</a>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
Loading…
Reference in new issue