first
This commit is contained in:
118
resources/views/user/projects/create.blade.php
Normal file
118
resources/views/user/projects/create.blade.php
Normal file
@@ -0,0 +1,118 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Projek Baru')
|
||||
|
||||
@section('content')
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h4 class="fw-bold mb-0"><i class="bi bi-plus-circle me-2 text-primary"></i>Cipta Projek Transkripsi Baru</h4>
|
||||
<a href="{{ route('user.dashboard') }}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i>Kembali
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form method="POST" action="{{ route('user.projects.store') }}" enctype="multipart/form-data">
|
||||
@csrf
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="title" class="form-label fw-semibold">Tajuk Projek <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control @error('title') is-invalid @enderror"
|
||||
id="title" name="title" value="{{ old('title') }}"
|
||||
placeholder="cth: Mesyuarat Jabatan Mac 2025" required>
|
||||
@error('title')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="description" class="form-label fw-semibold">Penerangan</label>
|
||||
<textarea class="form-control @error('description') is-invalid @enderror"
|
||||
id="description" name="description" rows="3"
|
||||
placeholder="Penerangan ringkas tentang audio ini...">{{ old('description') }}</textarea>
|
||||
@error('description')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="language" class="form-label fw-semibold">Bahasa Audio</label>
|
||||
<select class="form-select" id="language" name="language">
|
||||
<option value="ms" {{ old('language', 'ms') === 'ms' ? 'selected' : '' }}>Bahasa Melayu</option>
|
||||
<option value="en" {{ old('language') === 'en' ? 'selected' : '' }}>English</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="audio" class="form-label fw-semibold">Fail Audio <span class="text-danger">*</span></label>
|
||||
<input type="file" class="form-control @error('audio') is-invalid @enderror"
|
||||
id="audio" name="audio" accept=".mp3,.wav,.m4a,.mp4,.aac,.ogg,.flac,.webm" required>
|
||||
<div class="form-text">
|
||||
Format disokong: MP3, WAV, M4A, MP4, AAC, OGG, FLAC, WEBM.
|
||||
Saiz maksimum: {{ config('speech2text.upload.max_mb') }}MB.
|
||||
</div>
|
||||
@error('audio')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
|
||||
{{-- Preview nama fail yang dipilih --}}
|
||||
<div id="file-info" class="mt-2 d-none">
|
||||
<span class="badge bg-light text-dark border">
|
||||
<i class="bi bi-file-earmark-music me-1"></i>
|
||||
<span id="file-name"></span>
|
||||
— <span id="file-size"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2">
|
||||
<button type="submit" class="btn btn-primary" id="submit-btn">
|
||||
<i class="bi bi-upload me-1"></i>Muat Naik & Mulakan Transkripsi
|
||||
</button>
|
||||
<a href="{{ route('user.dashboard') }}" class="btn btn-outline-secondary">Batal</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="card bg-light border-0">
|
||||
<div class="card-body">
|
||||
<h6 class="fw-semibold mb-3"><i class="bi bi-info-circle me-2 text-info"></i>Maklumat</h6>
|
||||
<ul class="small text-muted mb-0">
|
||||
<li class="mb-2">Audio akan diproses secara automatik dalam barisan antrian.</li>
|
||||
<li class="mb-2">Masa pemprosesan bergantung pada panjang audio dan saiz model.</li>
|
||||
<li class="mb-2">Anda boleh menutup halaman ini — pemprosesan akan terus berjalan.</li>
|
||||
<li class="mb-2">Notifikasi status akan dikemaskini dalam halaman projek.</li>
|
||||
<li>Fail audio disimpan secara selamat dan tidak boleh diakses umum.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
$(function () {
|
||||
$('#audio').on('change', function () {
|
||||
const file = this.files[0];
|
||||
if (file) {
|
||||
const mb = (file.size / 1048576).toFixed(2);
|
||||
$('#file-name').text(file.name);
|
||||
$('#file-size').text(mb + ' MB');
|
||||
$('#file-info').removeClass('d-none');
|
||||
}
|
||||
});
|
||||
|
||||
$('form').on('submit', function () {
|
||||
$('#submit-btn').prop('disabled', true).html(
|
||||
'<span class="spinner-border spinner-border-sm me-2"></span>Sedang dimuat naik...'
|
||||
);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
465
resources/views/user/projects/show.blade.php
Normal file
465
resources/views/user/projects/show.blade.php
Normal file
@@ -0,0 +1,465 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', $project->title)
|
||||
|
||||
@section('content')
|
||||
|
||||
{{-- Header --}}
|
||||
<div class="d-flex justify-content-between align-items-start mb-4">
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1">{{ $project->title }}</h4>
|
||||
@if($project->description)
|
||||
<p class="text-muted mb-0">{{ $project->description }}</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="{{ route('user.dashboard') }}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i>Dashboard
|
||||
</a>
|
||||
@if($project->isOwnedBy(auth()->user()))
|
||||
<form method="POST" action="{{ route('user.projects.destroy', $project) }}"
|
||||
onsubmit="return confirm('Padam projek ini? Tindakan ini tidak boleh dibatalkan.')">
|
||||
@csrf @method('DELETE')
|
||||
<button class="btn btn-outline-danger">
|
||||
<i class="bi bi-trash me-1"></i>Padam Projek
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
|
||||
{{-- Lajur Kiri: Audio + Transcript + Komen --}}
|
||||
<div class="col-lg-8">
|
||||
|
||||
{{-- Status Badge --}}
|
||||
@php
|
||||
$statusConfig = [
|
||||
'pending' => ['secondary', 'bi-hourglass', 'Menunggu dalam barisan...'],
|
||||
'processing' => ['warning', 'bi-gear-wide-connected', 'Sedang ditranskripkan...'],
|
||||
'completed' => ['success', 'bi-check-circle', 'Transkripsi selesai'],
|
||||
'failed' => ['danger', 'bi-x-circle', 'Transkripsi gagal'],
|
||||
];
|
||||
[$sc, $si, $sl] = $statusConfig[$project->transcription_status] ?? ['secondary', 'bi-question', 'Tidak diketahui'];
|
||||
@endphp
|
||||
|
||||
<div id="status-alert" class="alert alert-{{ $sc }} d-flex align-items-center justify-content-between mb-3 py-2">
|
||||
<span id="status-text"><i class="bi {{ $si }} me-2"></i>{{ $sl }}</span>
|
||||
@if($project->isFailed() && $project->isOwnedBy(auth()->user()))
|
||||
<form method="POST" action="{{ route('user.projects.retry', $project) }}" id="retry-form">
|
||||
@csrf
|
||||
<button class="btn btn-sm btn-danger">
|
||||
<i class="bi bi-arrow-clockwise me-1"></i>Cuba Semula
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
@if($project->isProcessing() || $project->isPending())
|
||||
<span id="status-spinner" class="spinner-border spinner-border-sm text-{{ $sc }}"></span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Audio Player --}}
|
||||
<div class="card mb-3">
|
||||
<div class="card-header bg-white fw-semibold">
|
||||
<i class="bi bi-music-note-beamed me-2 text-primary"></i>Audio Asal
|
||||
<span class="text-muted fw-normal small ms-2">{{ $project->original_filename }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<audio controls class="w-100"
|
||||
src="{{ route('user.projects.audio.stream', $project) }}"
|
||||
preload="metadata">
|
||||
Pelayar anda tidak menyokong audio HTML5.
|
||||
</audio>
|
||||
<div class="mt-2 small text-muted">
|
||||
<i class="bi bi-hdd me-1"></i>{{ $project->fileSizeForHumans() }}
|
||||
@if($project->durationForHumans())
|
||||
• <i class="bi bi-clock me-1"></i>{{ $project->durationForHumans() }}
|
||||
@endif
|
||||
• <i class="bi bi-calendar me-1"></i>{{ $project->created_at->format('d/m/Y H:i') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Transcript Card --}}
|
||||
<div class="card mb-3">
|
||||
<div class="card-header bg-white d-flex justify-content-between align-items-center">
|
||||
<span class="fw-semibold"><i class="bi bi-file-text me-2 text-primary"></i>Teks Transkripsi</span>
|
||||
<div class="d-flex gap-2">
|
||||
@if($project->transcriptVersions->count() > 0)
|
||||
<a href="{{ route('user.projects.versions.index', $project) }}"
|
||||
class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-clock-history me-1"></i>Sejarah Versi
|
||||
<span class="badge bg-secondary ms-1">{{ $project->transcriptVersions->count() }}</span>
|
||||
</a>
|
||||
@endif
|
||||
@can('editTranscript', $project)
|
||||
@if($project->isCompleted() && $project->transcript_text)
|
||||
<button class="btn btn-sm btn-outline-primary" id="btn-edit-toggle"
|
||||
onclick="toggleEditor()">
|
||||
<i class="bi bi-pencil me-1"></i>Edit
|
||||
</button>
|
||||
@endif
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
{{-- Read mode --}}
|
||||
<div id="transcript-read">
|
||||
@if($project->isCompleted() && $project->transcript_text)
|
||||
<div class="p-3 bg-light rounded" style="white-space: pre-wrap; font-size: 0.95rem; line-height: 1.8;">{{ $project->transcript_text }}</div>
|
||||
@if($project->transcript_confidence)
|
||||
<div class="mt-2 small text-muted">
|
||||
<i class="bi bi-bar-chart me-1"></i>
|
||||
Keyakinan: {{ number_format($project->transcript_confidence * 100, 1) }}%
|
||||
• Enjin: {{ $project->transcription_engine ?? '—' }}
|
||||
</div>
|
||||
@endif
|
||||
@elseif($project->isFailed())
|
||||
<div class="text-danger small">
|
||||
<i class="bi bi-exclamation-triangle me-1"></i>
|
||||
{{ $project->error_message ?? 'Ralat tidak diketahui.' }}
|
||||
</div>
|
||||
@else
|
||||
<p class="text-muted mb-0 text-center py-3">
|
||||
<i class="bi bi-hourglass-split fs-4 d-block mb-2"></i>
|
||||
Teks transkripsi akan dipaparkan di sini setelah pemprosesan selesai.
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Edit mode (hidden by default) --}}
|
||||
@can('editTranscript', $project)
|
||||
<div id="transcript-edit" style="display:none">
|
||||
<form method="POST" action="{{ route('user.projects.transcript.update', $project) }}">
|
||||
@csrf @method('PATCH')
|
||||
<textarea class="form-control mb-2" name="transcript_text" rows="15"
|
||||
style="font-size:0.92rem; line-height:1.7">{{ old('transcript_text', $project->transcript_text) }}</textarea>
|
||||
<div class="mb-2">
|
||||
<input type="text" class="form-control form-control-sm" name="change_summary"
|
||||
placeholder="Ringkasan perubahan (pilihan)">
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="submit" class="btn btn-sm btn-primary">
|
||||
<i class="bi bi-save me-1"></i>Simpan
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="toggleEditor()">
|
||||
Batal
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endcan
|
||||
|
||||
</div>
|
||||
|
||||
{{-- Card footer: Upload transkripsi luar --}}
|
||||
@can('editTranscript', $project)
|
||||
<div class="card-footer bg-white border-top-0 pt-0">
|
||||
<button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
|
||||
data-bs-target="#modalUploadTranscript">
|
||||
<i class="bi bi-upload me-1"></i>Muat Naik Transkripsi Luar (.txt)
|
||||
</button>
|
||||
</div>
|
||||
@endcan
|
||||
|
||||
</div>
|
||||
|
||||
{{-- Komen --}}
|
||||
@can('view', [App\Models\ProjectComment::class, $project])
|
||||
<div class="card mb-3">
|
||||
<div class="card-header bg-white fw-semibold">
|
||||
<i class="bi bi-chat-left-text me-2 text-secondary"></i>Perbincangan
|
||||
@if($project->comments->count())
|
||||
<span class="badge bg-secondary ms-1">{{ $project->comments->count() }}</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
{{-- Senarai komen --}}
|
||||
@forelse($project->comments as $comment)
|
||||
<div class="d-flex gap-2 mb-3">
|
||||
<div class="flex-shrink-0">
|
||||
<span class="badge bg-secondary rounded-circle p-2" style="font-size:0.75rem">
|
||||
{{ mb_strtoupper(mb_substr($comment->user->name, 0, 1)) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<span class="fw-semibold small">{{ $comment->user->name }}</span>
|
||||
<div class="d-flex align-items-center gap-1">
|
||||
<span class="text-muted" style="font-size:0.75rem">{{ $comment->created_at->format('d/m/Y H:i') }}</span>
|
||||
@can('delete', $comment)
|
||||
<form method="POST"
|
||||
action="{{ route('user.projects.comments.destroy', [$project, $comment]) }}"
|
||||
onsubmit="return confirm('Padam komen ini?')">
|
||||
@csrf @method('DELETE')
|
||||
<button class="btn btn-link btn-sm text-danger p-0 ms-1" title="Padam">
|
||||
<i class="bi bi-x-circle"></i>
|
||||
</button>
|
||||
</form>
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1" style="white-space:pre-wrap; font-size:0.9rem">{{ $comment->message }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-muted small mb-3">Tiada perbincangan lagi.</p>
|
||||
@endforelse
|
||||
|
||||
{{-- Form tambah komen --}}
|
||||
@can('create', [App\Models\ProjectComment::class, $project])
|
||||
<hr class="my-2">
|
||||
<form method="POST" action="{{ route('user.projects.comments.store', $project) }}">
|
||||
@csrf
|
||||
<div class="mb-2">
|
||||
<textarea class="form-control form-control-sm @error('message') is-invalid @enderror"
|
||||
name="message" rows="2" placeholder="Tulis komen..." required></textarea>
|
||||
@error('message')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<button type="submit" class="btn btn-sm btn-primary">
|
||||
<i class="bi bi-send me-1"></i>Hantar
|
||||
</button>
|
||||
</form>
|
||||
@endcan
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endcan
|
||||
|
||||
</div>
|
||||
|
||||
{{-- Lajur Kanan: Maklumat + Collaborators --}}
|
||||
<div class="col-lg-4">
|
||||
|
||||
{{-- Project Info --}}
|
||||
<div class="card mb-3">
|
||||
<div class="card-header bg-white fw-semibold">
|
||||
<i class="bi bi-info-circle me-2 text-secondary"></i>Maklumat Projek
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<table class="table table-sm mb-0">
|
||||
<tr>
|
||||
<td class="text-muted ps-3" width="40%">Pemilik</td>
|
||||
<td class="fw-semibold">{{ $project->owner->name }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted ps-3">Bahasa</td>
|
||||
<td>{{ strtoupper($project->language) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted ps-3">Enjin</td>
|
||||
<td>{{ $project->transcription_engine ?? '—' }}</td>
|
||||
</tr>
|
||||
@if($project->processed_at)
|
||||
<tr>
|
||||
<td class="text-muted ps-3">Selesai pada</td>
|
||||
<td class="small">{{ $project->processed_at->format('d/m/Y H:i') }}</td>
|
||||
</tr>
|
||||
@endif
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Collaborators --}}
|
||||
<div class="card">
|
||||
<div class="card-header bg-white fw-semibold">
|
||||
<i class="bi bi-people me-2 text-secondary"></i>Collaborators
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
@forelse($project->collaborators as $collab)
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<div>
|
||||
<span class="fw-semibold small">{{ $collab->name }}</span>
|
||||
<span class="badge bg-light text-dark ms-1" style="font-size:0.7rem">{{ $collab->pivot->role }}</span>
|
||||
<div class="text-muted" style="font-size:0.75rem">{{ $collab->email }}</div>
|
||||
</div>
|
||||
@if($project->isOwnedBy(auth()->user()))
|
||||
<form method="POST"
|
||||
action="{{ route('user.projects.collaborators.destroy', [$project, $collab]) }}"
|
||||
onsubmit="return confirm('Buang {{ $collab->name }} daripada collaborator?')">
|
||||
@csrf @method('DELETE')
|
||||
<button class="btn btn-sm btn-outline-danger py-0 px-1" title="Buang">
|
||||
<i class="bi bi-x"></i>
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-muted small mb-2">Tiada collaborator.</p>
|
||||
@endforelse
|
||||
|
||||
@if($project->isOwnedBy(auth()->user()))
|
||||
<hr class="my-2">
|
||||
<form method="POST" action="{{ route('user.projects.collaborators.store', $project) }}">
|
||||
@csrf
|
||||
<div class="input-group input-group-sm mb-2">
|
||||
<input type="email" class="form-control @error('email') is-invalid @enderror"
|
||||
name="email" placeholder="emel@mbip.my" required>
|
||||
<button class="btn btn-outline-primary" type="submit">
|
||||
<i class="bi bi-person-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
@error('email')
|
||||
<div class="text-danger small">{{ $message }}</div>
|
||||
@enderror
|
||||
<div class="mb-2">
|
||||
<select class="form-select form-select-sm" name="role">
|
||||
<option value="editor">Editor — boleh edit teks</option>
|
||||
<option value="viewer">Viewer — lihat sahaja</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Modal: Upload Transkripsi Luar --}}
|
||||
@can('editTranscript', $project)
|
||||
<div class="modal fade" id="modalUploadTranscript" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><i class="bi bi-upload me-2"></i>Muat Naik Transkripsi Luar</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<form method="POST"
|
||||
action="{{ route('user.projects.transcript.upload', $project) }}"
|
||||
enctype="multipart/form-data"
|
||||
id="form-upload-transcript"
|
||||
data-has-transcript="{{ $project->transcript_text ? 'true' : 'false' }}">
|
||||
@csrf
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-semibold">Fail Transkripsi (.txt) <span class="text-danger">*</span></label>
|
||||
<input type="file" class="form-control @error('transcript_file') is-invalid @enderror"
|
||||
name="transcript_file" accept=".txt,text/plain" required>
|
||||
<div class="form-text">Hanya fail .txt, maksimum 10 MB. Pengekodan UTF-8 disyorkan.</div>
|
||||
@error('transcript_file')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
@if(config('speech2text.ollama.enabled'))
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" name="clean_with_ollama"
|
||||
value="1" id="chkOllama">
|
||||
<label class="form-check-label" for="chkOllama">
|
||||
<i class="bi bi-stars text-warning me-1"></i>
|
||||
Bersihkan teks dengan Ollama (AI)
|
||||
</label>
|
||||
<div class="form-text">Teks akan dibaiki ejaan dan tanda baca menggunakan model {{ config('speech2text.ollama.model') }}.</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($project->transcript_text)
|
||||
<div class="alert alert-warning py-2 small mb-0">
|
||||
<i class="bi bi-exclamation-triangle me-1"></i>
|
||||
Projek ini sudah mempunyai transkripsi. Memuat naik fail baru akan <strong>menggantikan</strong> teks sedia ada dan menyimpan versi lama dalam sejarah.
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-upload me-1"></i>Muat Naik
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcan
|
||||
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
#transcript-read .bg-light { font-family: 'Segoe UI', sans-serif; }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
|
||||
{{-- AJAX status polling --}}
|
||||
@if($project->isPending() || $project->isProcessing())
|
||||
<script>
|
||||
(function () {
|
||||
const statusUrl = "{{ route('user.projects.status', $project) }}";
|
||||
const alertEl = document.getElementById('status-alert');
|
||||
const textEl = document.getElementById('status-text');
|
||||
const spinnerEl = document.getElementById('status-spinner');
|
||||
|
||||
const statusMap = {
|
||||
pending: { cls: 'warning', icon: 'bi-hourglass', label: 'Menunggu dalam barisan...', spin: true },
|
||||
processing: { cls: 'warning', icon: 'bi-gear-wide-connected', label: 'Sedang ditranskripkan...', spin: true },
|
||||
completed: { cls: 'success', icon: 'bi-check-circle', label: 'Transkripsi selesai', spin: false },
|
||||
failed: { cls: 'danger', icon: 'bi-x-circle', label: 'Transkripsi gagal', spin: false },
|
||||
};
|
||||
|
||||
let timer;
|
||||
|
||||
function poll() {
|
||||
fetch(statusUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
const cfg = statusMap[data.status] ?? statusMap.pending;
|
||||
alertEl.className = `alert alert-${cfg.cls} d-flex align-items-center justify-content-between mb-3 py-2`;
|
||||
textEl.innerHTML = `<i class="bi ${cfg.icon} me-2"></i>${cfg.label}`;
|
||||
if (spinnerEl) spinnerEl.style.display = cfg.spin ? '' : 'none';
|
||||
if (data.status === 'completed' || data.status === 'failed') {
|
||||
clearInterval(timer);
|
||||
location.reload();
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
timer = setInterval(poll, 8000);
|
||||
})();
|
||||
</script>
|
||||
@endif
|
||||
|
||||
{{-- Upload transcript modal: confirm if already has transcript --}}
|
||||
<script>
|
||||
(function () {
|
||||
const form = document.getElementById('form-upload-transcript');
|
||||
if (!form) return;
|
||||
|
||||
form.addEventListener('submit', function (e) {
|
||||
if (form.dataset.hasTranscript === 'true') {
|
||||
if (!confirm('Projek ini sudah ada transkripsi. Adakah anda pasti ingin menggantikannya? Versi lama akan disimpan dalam sejarah versi.')) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
{{-- Transcript editor toggle --}}
|
||||
<script>
|
||||
function toggleEditor() {
|
||||
const read = document.getElementById('transcript-read');
|
||||
const edit = document.getElementById('transcript-edit');
|
||||
const btnTgl = document.getElementById('btn-edit-toggle');
|
||||
if (!read || !edit) return;
|
||||
const editing = edit.style.display !== 'none';
|
||||
read.style.display = editing ? '' : 'none';
|
||||
edit.style.display = editing ? 'none' : '';
|
||||
if (btnTgl) btnTgl.innerHTML = editing
|
||||
? '<i class="bi bi-pencil me-1"></i>Edit'
|
||||
: '<i class="bi bi-eye me-1"></i>Lihat';
|
||||
}
|
||||
</script>
|
||||
|
||||
@endpush
|
||||
109
resources/views/user/projects/versions.blade.php
Normal file
109
resources/views/user/projects/versions.blade.php
Normal file
@@ -0,0 +1,109 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Sejarah Versi — ' . $project->title)
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h5 class="fw-bold mb-1"><i class="bi bi-clock-history me-2 text-secondary"></i>Sejarah Versi</h5>
|
||||
<p class="text-muted mb-0 small">{{ $project->title }}</p>
|
||||
</div>
|
||||
<a href="{{ route('user.projects.show', $project) }}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i>Kembali ke Projek
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@if($versions->isEmpty())
|
||||
<div class="alert alert-info">
|
||||
<i class="bi bi-info-circle me-2"></i>Tiada sejarah versi untuk projek ini.
|
||||
</div>
|
||||
@else
|
||||
<div class="card">
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width:60px">Versi</th>
|
||||
<th>Penyunting</th>
|
||||
<th>Ringkasan Perubahan</th>
|
||||
<th>Tarikh</th>
|
||||
<th style="width:100px">Tindakan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($versions as $version)
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-secondary">v{{ $version->version_number }}</span>
|
||||
</td>
|
||||
<td>{{ $version->editor->name ?? '—' }}</td>
|
||||
<td class="text-muted small">{{ $version->change_summary ?? '—' }}</td>
|
||||
<td class="small text-muted">{{ $version->created_at->format('d/m/Y H:i') }}</td>
|
||||
<td>
|
||||
<div class="d-flex gap-1">
|
||||
<button class="btn btn-sm btn-outline-secondary"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#modalPreview{{ $version->id }}"
|
||||
title="Lihat teks">
|
||||
<i class="bi bi-eye"></i>
|
||||
</button>
|
||||
@can('restoreVersion', $project)
|
||||
<form method="POST"
|
||||
action="{{ route('user.projects.versions.restore', [$project, $version]) }}"
|
||||
onsubmit="return confirm('Pulihkan ke versi {{ $version->version_number }}? Teks semasa akan disimpan sebagai versi baru.')">
|
||||
@csrf
|
||||
<button class="btn btn-sm btn-outline-warning" title="Pulihkan versi ini">
|
||||
<i class="bi bi-arrow-counterclockwise"></i>
|
||||
</button>
|
||||
</form>
|
||||
@endcan
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ $versions->links() }}
|
||||
|
||||
{{-- Modals: preview versi --}}
|
||||
@foreach($versions as $version)
|
||||
<div class="modal fade" id="modalPreview{{ $version->id }}" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h6 class="modal-title">
|
||||
Versi {{ $version->version_number }}
|
||||
<span class="text-muted fw-normal small ms-2">{{ $version->created_at->format('d/m/Y H:i') }}</span>
|
||||
</h6>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="p-3 bg-light rounded" style="white-space: pre-wrap; font-size: 0.9rem; line-height: 1.8; max-height: 60vh; overflow-y: auto;">{{ $version->new_text }}</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
|
||||
@can('restoreVersion', $project)
|
||||
<form method="POST"
|
||||
action="{{ route('user.projects.versions.restore', [$project, $version]) }}"
|
||||
onsubmit="return confirm('Pulihkan ke versi {{ $version->version_number }}?')">
|
||||
@csrf
|
||||
<button type="submit" class="btn btn-warning btn-sm">
|
||||
<i class="bi bi-arrow-counterclockwise me-1"></i>Pulihkan Versi Ini
|
||||
</button>
|
||||
</form>
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
@endif
|
||||
|
||||
@endsection
|
||||
Reference in New Issue
Block a user