Merge pull request 'ranjith-dev' (#197) from ranjith-dev into master
Some checks failed
Scan for leaked secrets using Kingfisher / kingfisher-secrets-scan (push) Has been cancelled
Some checks failed
Scan for leaked secrets using Kingfisher / kingfisher-secrets-scan (push) Has been cancelled
Reviewed-on: #197
This commit was merged in pull request #197.
This commit is contained in:
267
app/Filament/Resources/VisitorEntryResource.php
Normal file
267
app/Filament/Resources/VisitorEntryResource.php
Normal file
@@ -0,0 +1,267 @@
|
||||
<?php
|
||||
|
||||
namespace App\Filament\Resources;
|
||||
|
||||
use App\Filament\Resources\VisitorEntryResource\Pages;
|
||||
use App\Filament\Resources\VisitorEntryResource\RelationManagers;
|
||||
use App\Models\VisitorEntry;
|
||||
use Filament\Facades\Filament;
|
||||
use Filament\Forms;
|
||||
use Filament\Forms\Form;
|
||||
use Filament\Resources\Resource;
|
||||
use Filament\Tables;
|
||||
use Filament\Tables\Table;
|
||||
use Illuminate\Database\Eloquent\Builder;
|
||||
use Illuminate\Database\Eloquent\SoftDeletingScope;
|
||||
|
||||
class VisitorEntryResource extends Resource
|
||||
{
|
||||
protected static ?string $model = VisitorEntry::class;
|
||||
|
||||
protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';
|
||||
|
||||
public static function form(Form $form): Form
|
||||
{
|
||||
return $form
|
||||
->schema([
|
||||
Forms\Components\TextInput::make('mobile_number')
|
||||
->label('Mobile Number')
|
||||
->length(10)
|
||||
->reactive()
|
||||
->extraInputAttributes([
|
||||
'oninput' => 'this.value = this.value.replace(/[^0-9]/g, "").slice(0, 10)', // blocks non-numbers + limits to 10 chars
|
||||
'maxlength' => 10,
|
||||
])
|
||||
->required()
|
||||
->extraAttributes([
|
||||
'id' => 'mobile_number_input',
|
||||
'x-data' => '{ value: "" }',
|
||||
'x-model' => 'value',
|
||||
'wire:keydown.enter.prevent' => 'processMobile(value)',
|
||||
]),
|
||||
Forms\Components\TextInput::make('name')
|
||||
->label('Name')
|
||||
->required()
|
||||
->reactive()
|
||||
->extraInputAttributes([
|
||||
'oninput' => 'this.value = this.value.replace(/[^a-zA-Z\s]/g, "")',
|
||||
]),
|
||||
Forms\Components\Select::make('type')
|
||||
->label('Type')
|
||||
->reactive()
|
||||
->options([
|
||||
'Student' => 'Student',
|
||||
'Consultant' => 'Consultant',
|
||||
'Vendor' => 'Vendor',
|
||||
'Other' => 'Other',
|
||||
])
|
||||
->required()
|
||||
->dehydrateStateUsing(function ($state, callable $get) {
|
||||
return $state == 'Other'
|
||||
? $get('other_type')
|
||||
: $state;
|
||||
}),
|
||||
Forms\Components\TextInput::make('other_type')
|
||||
->label('Specify Type')
|
||||
->reactive()
|
||||
->visible(fn (callable $get) => $get('type') == 'Other')
|
||||
->required(fn (callable $get) => $get('type') == 'Other')
|
||||
->dehydrated(false),
|
||||
Forms\Components\TextInput::make('company')
|
||||
->label('Company')
|
||||
->required(),
|
||||
Forms\Components\Select::make('department')
|
||||
->label('Employee Department')
|
||||
->options(
|
||||
\App\Models\EmployeeMaster::distinct()
|
||||
->pluck('department', 'department')
|
||||
)
|
||||
->required()
|
||||
->reactive()
|
||||
->afterStateUpdated(function (callable $set) {
|
||||
$set('employee_master_id', null);
|
||||
$set('code', null);
|
||||
}),
|
||||
// Forms\Components\Select::make('employee_master_id')
|
||||
// ->label('Recipient Employee')
|
||||
// ->required()
|
||||
// ->options(function (callable $get) {
|
||||
// $department = $get('department');
|
||||
|
||||
// if (!$department) {
|
||||
// return [];
|
||||
// }
|
||||
|
||||
// return \App\Models\EmployeeMaster::where('department', $department)
|
||||
// ->pluck('name', 'id');
|
||||
// })
|
||||
// ->reactive()
|
||||
// ->afterStateUpdated(function (callable $set, callable $get, ?string $state) {
|
||||
// $department = $get('department');
|
||||
|
||||
// $employee = \App\Models\EmployeeMaster::where('id', $state)
|
||||
// ->where('department', $department)
|
||||
// ->first();
|
||||
|
||||
// $set('code', $employee ? $employee->code : '');
|
||||
// }),
|
||||
|
||||
Forms\Components\Select::make('employee_master_id')
|
||||
->label('Recipient Employee')
|
||||
->required()
|
||||
->options(function (callable $get) {
|
||||
$department = $get('department');
|
||||
// Always load ALL employees, filter by department if set
|
||||
if ($department) {
|
||||
return \App\Models\EmployeeMaster::where('department', $department)
|
||||
->pluck('name', 'id');
|
||||
}
|
||||
// Fallback: load all so fill() can always match the ID
|
||||
return \App\Models\EmployeeMaster::pluck('name', 'id');
|
||||
})
|
||||
->reactive()
|
||||
->afterStateUpdated(function (callable $set, ?string $state) {
|
||||
$employee = \App\Models\EmployeeMaster::find($state);
|
||||
$set('code', $employee?->code ?? '');
|
||||
}),
|
||||
|
||||
Forms\Components\TextInput::make('code')
|
||||
->label('Employee Code')
|
||||
->readOnly(),
|
||||
Forms\Components\Textarea::make('purpose_of_visit')
|
||||
->label('Purpose of Visit')
|
||||
->required(),
|
||||
Forms\Components\TextInput::make('number_of_person')
|
||||
->numeric()
|
||||
->default(1)
|
||||
->required(),
|
||||
Forms\Components\DateTimePicker::make('in_time')
|
||||
->label('In Time'),
|
||||
Forms\Components\DateTimePicker::make('out_time')
|
||||
->label('Out Time'),
|
||||
Forms\Components\View::make('components.webcam-field')
|
||||
->columnSpanFull(),
|
||||
Forms\Components\Hidden::make('photo'),
|
||||
Forms\Components\Hidden::make('created_by')
|
||||
->label('created_by')
|
||||
->default(Filament::auth()->user()?->name),
|
||||
Forms\Components\Hidden::make('updated_by')
|
||||
->label('updated_by')
|
||||
->default(Filament::auth()->user()?->name),
|
||||
]);
|
||||
}
|
||||
|
||||
public static function table(Table $table): Table
|
||||
{
|
||||
return $table
|
||||
->columns([
|
||||
Tables\Columns\TextColumn::make('No.')
|
||||
->label('NO')
|
||||
->alignCenter()
|
||||
->getStateUsing(function ($record, $livewire, $column, $rowLoop) {
|
||||
$paginator = $livewire->getTableRecords();
|
||||
$perPage = method_exists($paginator, 'perPage') ? $paginator->perPage() : 10;
|
||||
$currentPage = method_exists($paginator, 'currentPage') ? $paginator->currentPage() : 1;
|
||||
|
||||
return ($currentPage - 1) * $perPage + $rowLoop->iteration;
|
||||
}),
|
||||
Tables\Columns\TextColumn::make('type')
|
||||
->label('Visitor Type')
|
||||
->alignCenter()
|
||||
->sortable(),
|
||||
Tables\Columns\TextColumn::make('name')
|
||||
->label('Visitor Name')
|
||||
->sortable()
|
||||
->alignCenter()
|
||||
->searchable(),
|
||||
Tables\Columns\TextColumn::make('mobile_number')
|
||||
->label('Visitor Mobile Number')
|
||||
->alignCenter()
|
||||
->sortable(),
|
||||
Tables\Columns\TextColumn::make('employeeMaster.name')
|
||||
->label('Recipient Name')
|
||||
->alignCenter()
|
||||
->sortable(),
|
||||
Tables\Columns\TextColumn::make('employeeMaster.code')
|
||||
->label('Receipient ID')
|
||||
->alignCenter()
|
||||
->sortable(),
|
||||
Tables\Columns\TextColumn::make('employeeMaster.department')
|
||||
->label('Receipient Department')
|
||||
->alignCenter()
|
||||
->sortable(),
|
||||
Tables\Columns\TextColumn::make('number_of_person')
|
||||
->label('Number of Person')
|
||||
->numeric()
|
||||
->alignCenter()
|
||||
->sortable(),
|
||||
Tables\Columns\TextColumn::make('in_time')
|
||||
->label('In Time')
|
||||
->dateTime()
|
||||
->sortable()
|
||||
->alignCenter(),
|
||||
Tables\Columns\TextColumn::make('out_time')
|
||||
->label('Out Time')
|
||||
->dateTime()
|
||||
->sortable()
|
||||
->alignCenter(),
|
||||
Tables\Columns\TextColumn::make('created_at')
|
||||
->label('Created At')
|
||||
->dateTime()
|
||||
->sortable()
|
||||
->toggleable(isToggledHiddenByDefault: true)
|
||||
->alignCenter(),
|
||||
Tables\Columns\TextColumn::make('updated_at')
|
||||
->label('Updated At')
|
||||
->dateTime()
|
||||
->sortable()
|
||||
->toggleable(isToggledHiddenByDefault: true)
|
||||
->alignCenter(),
|
||||
Tables\Columns\TextColumn::make('deleted_at')
|
||||
->label('Deleted At')
|
||||
->dateTime()
|
||||
->sortable()
|
||||
->toggleable(isToggledHiddenByDefault: true)
|
||||
->alignCenter(),
|
||||
])
|
||||
->filters([
|
||||
Tables\Filters\TrashedFilter::make(),
|
||||
])
|
||||
->actions([
|
||||
Tables\Actions\ViewAction::make(),
|
||||
Tables\Actions\EditAction::make(),
|
||||
])
|
||||
->bulkActions([
|
||||
Tables\Actions\BulkActionGroup::make([
|
||||
Tables\Actions\DeleteBulkAction::make(),
|
||||
Tables\Actions\ForceDeleteBulkAction::make(),
|
||||
Tables\Actions\RestoreBulkAction::make(),
|
||||
]),
|
||||
]);
|
||||
}
|
||||
|
||||
public static function getRelations(): array
|
||||
{
|
||||
return [
|
||||
//
|
||||
];
|
||||
}
|
||||
|
||||
public static function getPages(): array
|
||||
{
|
||||
return [
|
||||
'index' => Pages\ListVisitorEntries::route('/'),
|
||||
'create' => Pages\CreateVisitorEntry::route('/create'),
|
||||
'view' => Pages\ViewVisitorEntry::route('/{record}'),
|
||||
'edit' => Pages\EditVisitorEntry::route('/{record}/edit'),
|
||||
];
|
||||
}
|
||||
|
||||
public static function getEloquentQuery(): Builder
|
||||
{
|
||||
return parent::getEloquentQuery()
|
||||
->withoutGlobalScopes([
|
||||
SoftDeletingScope::class,
|
||||
]);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
<?php
|
||||
|
||||
namespace App\Filament\Resources\VisitorEntryResource\Pages;
|
||||
|
||||
use App\Filament\Resources\VisitorEntryResource;
|
||||
use App\Models\EmployeeMaster;
|
||||
use App\Models\VisitorEntry;
|
||||
use Filament\Actions;
|
||||
use Filament\Resources\Pages\CreateRecord;
|
||||
use Livewire\Attributes\On;
|
||||
use Storage;
|
||||
|
||||
class CreateVisitorEntry extends CreateRecord
|
||||
{
|
||||
protected static string $resource = VisitorEntryResource::class;
|
||||
|
||||
#[On('photo-captured')]
|
||||
public function handlePhotoCapture(string $photo): void
|
||||
{
|
||||
// Puts the Base64 photo into the form's data array
|
||||
$this->data['photo'] = $photo;
|
||||
}
|
||||
|
||||
public function processMobile($mobile)
|
||||
{
|
||||
$visitor = VisitorEntry::where('mobile_number', $mobile)->latest()->first();
|
||||
|
||||
if ($visitor) {
|
||||
|
||||
$employee = EmployeeMaster::where('id', $visitor->employee_master_id)->first();
|
||||
|
||||
$this->form->fill([
|
||||
'mobile_number' => $mobile ?? '',
|
||||
'name' => $visitor->name ?? '',
|
||||
'company' => $visitor->company ?? '',
|
||||
'type' => $visitor->type ?? '',
|
||||
'department' => $employee->department ?? '',
|
||||
'employee_master_id' => $visitor->employee_master_id->name ?? '',
|
||||
'code' => $employee->code ?? '',
|
||||
]);
|
||||
}
|
||||
else {
|
||||
|
||||
$this->form->fill([
|
||||
'mobile_number' => $mobile ?? '',
|
||||
'name' => $visitor->name ?? '',
|
||||
'company' => $visitor->company ?? '',
|
||||
'type' => $visitor->type ?? '',
|
||||
'department' => $employee->department ?? '',
|
||||
'employee_master_id' => $visitor->employee_master_id->name ?? '',
|
||||
'code' => $employee->code ?? '',
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
protected function mutateFormDataBeforeCreate(array $data): array
|
||||
{
|
||||
if (
|
||||
!empty($data['photo']) &&
|
||||
str_starts_with($data['photo'], 'data:image')
|
||||
) {
|
||||
// Step A: Strip the "data:image/jpeg;base64," prefix
|
||||
$imageData = explode(',', $data['photo'])[1];
|
||||
|
||||
// Step B: Generate a unique filename
|
||||
$filename = 'visitor_' . time() . '_' . uniqid() . '.jpg';
|
||||
|
||||
// Step C: Decode Base64 and save as a real .jpg file
|
||||
$path = 'visitor-photos/' . $filename;
|
||||
Storage::disk('public')->put($path, base64_decode($imageData));
|
||||
|
||||
// Step D: Replace the Base64 string with just the file path
|
||||
$data['photo'] = $path;
|
||||
}
|
||||
|
||||
return $data;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
<?php
|
||||
|
||||
namespace App\Filament\Resources\VisitorEntryResource\Pages;
|
||||
|
||||
use App\Filament\Resources\VisitorEntryResource;
|
||||
use Filament\Actions;
|
||||
use Filament\Resources\Pages\EditRecord;
|
||||
use Livewire\Attributes\On;
|
||||
use Storage;
|
||||
|
||||
class EditVisitorEntry extends EditRecord
|
||||
{
|
||||
protected static string $resource = VisitorEntryResource::class;
|
||||
|
||||
protected function getHeaderActions(): array
|
||||
{
|
||||
return [
|
||||
Actions\ViewAction::make(),
|
||||
Actions\DeleteAction::make(),
|
||||
Actions\ForceDeleteAction::make(),
|
||||
Actions\RestoreAction::make(),
|
||||
];
|
||||
}
|
||||
|
||||
#[On('photo-captured')]
|
||||
public function handlePhotoCapture(string $photo): void
|
||||
{
|
||||
$this->data['photo'] = $photo;
|
||||
}
|
||||
|
||||
protected function mutateFormDataBeforeSave(array $data): array
|
||||
{
|
||||
if (
|
||||
!empty($data['photo']) &&
|
||||
str_starts_with($data['photo'], 'data:image')
|
||||
) {
|
||||
// Delete the old photo file if one exists
|
||||
$oldPhoto = $this->record->photo;
|
||||
if ($oldPhoto && Storage::disk('public')->exists($oldPhoto)) {
|
||||
Storage::disk('public')->delete($oldPhoto);
|
||||
}
|
||||
|
||||
// Save the new photo
|
||||
$imageData = explode(',', $data['photo'])[1];
|
||||
$filename = 'visitor_' . time() . '_' . uniqid() . '.jpg';
|
||||
$path = 'visitor-photos/' . $filename;
|
||||
Storage::disk('public')->put($path, base64_decode($imageData));
|
||||
|
||||
$data['photo'] = $path;
|
||||
}
|
||||
|
||||
return $data;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
<?php
|
||||
|
||||
namespace App\Filament\Resources\VisitorEntryResource\Pages;
|
||||
|
||||
use App\Filament\Resources\VisitorEntryResource;
|
||||
use Filament\Actions;
|
||||
use Filament\Resources\Pages\ListRecords;
|
||||
|
||||
class ListVisitorEntries extends ListRecords
|
||||
{
|
||||
protected static string $resource = VisitorEntryResource::class;
|
||||
|
||||
protected function getHeaderActions(): array
|
||||
{
|
||||
return [
|
||||
Actions\CreateAction::make(),
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
<?php
|
||||
|
||||
namespace App\Filament\Resources\VisitorEntryResource\Pages;
|
||||
|
||||
use App\Filament\Resources\VisitorEntryResource;
|
||||
use Filament\Actions;
|
||||
use Filament\Resources\Pages\ViewRecord;
|
||||
|
||||
class ViewVisitorEntry extends ViewRecord
|
||||
{
|
||||
protected static string $resource = VisitorEntryResource::class;
|
||||
|
||||
protected function getHeaderActions(): array
|
||||
{
|
||||
return [
|
||||
Actions\EditAction::make(),
|
||||
];
|
||||
}
|
||||
}
|
||||
32
app/Livewire/Webcam.php
Normal file
32
app/Livewire/Webcam.php
Normal file
@@ -0,0 +1,32 @@
|
||||
<?php
|
||||
|
||||
namespace App\Livewire;
|
||||
|
||||
use Livewire\Component;
|
||||
|
||||
class Webcam extends Component
|
||||
{
|
||||
|
||||
public string $capturedPhoto = '';
|
||||
|
||||
// Called from JavaScript when a photo is taken
|
||||
public function setPhoto(string $photo): void
|
||||
{
|
||||
$this->capturedPhoto = $photo;
|
||||
|
||||
// Fires a browser event that the Filament form will listen to
|
||||
$this->dispatch('photo-captured', photo: $photo);
|
||||
}
|
||||
|
||||
// Called from JavaScript when user clicks "Retake"
|
||||
public function clearPhoto(): void
|
||||
{
|
||||
$this->capturedPhoto = '';
|
||||
|
||||
$this->dispatch('photo-captured', photo: '');
|
||||
}
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.webcam');
|
||||
}
|
||||
}
|
||||
30
app/Models/VisitorEntry.php
Normal file
30
app/Models/VisitorEntry.php
Normal file
@@ -0,0 +1,30 @@
|
||||
<?php
|
||||
|
||||
namespace App\Models;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
use Illuminate\Database\Eloquent\Relations\BelongsTo;
|
||||
use Illuminate\Database\Eloquent\SoftDeletes;
|
||||
|
||||
class VisitorEntry extends Model
|
||||
{
|
||||
use SoftDeletes;
|
||||
|
||||
protected $fillable = [
|
||||
'mobile_number',
|
||||
'name',
|
||||
'company',
|
||||
'purpose_of_visit',
|
||||
'type',
|
||||
'in_time',
|
||||
'out_time',
|
||||
'photo',
|
||||
'employee_master_id',
|
||||
'number_of_person'
|
||||
];
|
||||
|
||||
public function employeeMaster(): BelongsTo
|
||||
{
|
||||
return $this->belongsTo(EmployeeMaster::class);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
/**
|
||||
* Run the migrations.
|
||||
*/
|
||||
public function up(): void
|
||||
{
|
||||
$sql = <<<'SQL'
|
||||
CREATE TABLE visitor_entries (
|
||||
id BIGINT GENERATED always AS IDENTITY PRIMARY KEY,
|
||||
employee_master_id BIGINT NOT NULL,
|
||||
mobile_number BIGINT NOT NULL,
|
||||
name TEXT DEFAULT NULL,
|
||||
company TEXT DEFAULT NULL,
|
||||
purpose_of_visit TEXT DEFAULT NULL,
|
||||
type TEXT DEFAULT NULL,
|
||||
number_of_person INTEGER DEFAULT NULL,
|
||||
in_time TIMESTAMP DEFAULT NULL,
|
||||
out_time TIMESTAMP DEFAULT NULL,
|
||||
photo TEXT DEFAULT NULL,
|
||||
|
||||
created_at TIMESTAMP NOT NULL DEFAULT NOW(),
|
||||
updated_at TIMESTAMP NOT NULL DEFAULT NOW(),
|
||||
created_by TEXT DEFAULT NULL,
|
||||
updated_by TEXT DEFAULT NULL,
|
||||
deleted_at TIMESTAMP,
|
||||
|
||||
FOREIGN KEY (employee_master_id) REFERENCES employee_masters (id)
|
||||
);
|
||||
SQL;
|
||||
DB::statement($sql);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse the migrations.
|
||||
*/
|
||||
public function down(): void
|
||||
{
|
||||
Schema::dropIfExists('visitor_entries');
|
||||
}
|
||||
};
|
||||
10
resources/views/components/webcam-field.blade.php
Normal file
10
resources/views/components/webcam-field.blade.php
Normal file
@@ -0,0 +1,10 @@
|
||||
<div>
|
||||
<x-filament::section>
|
||||
<x-slot name="heading">
|
||||
Visitor Photo
|
||||
</x-slot>
|
||||
|
||||
<livewire:webcam-capture />
|
||||
|
||||
</x-filament::section>
|
||||
</div>
|
||||
189
resources/views/livewire/webcam.blade.php
Normal file
189
resources/views/livewire/webcam.blade.php
Normal file
@@ -0,0 +1,189 @@
|
||||
<div
|
||||
x-data="{
|
||||
cameraActive: false,
|
||||
captured: false,
|
||||
errorMessage: '',
|
||||
|
||||
async startCamera() {
|
||||
this.errorMessage = '';
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: { width: 640, height: 480, facingMode: 'user' }
|
||||
});
|
||||
this.$refs.video.srcObject = stream;
|
||||
await this.$refs.video.play();
|
||||
this.cameraActive = true;
|
||||
} catch (err) {
|
||||
if (err.name === 'NotAllowedError') {
|
||||
this.errorMessage = 'Camera permission denied. Please allow camera access in your browser and try again.';
|
||||
} else if (err.name === 'NotFoundError') {
|
||||
this.errorMessage = 'No camera found. Please connect a webcam and try again.';
|
||||
} else {
|
||||
this.errorMessage = 'Could not access camera: ' + err.message;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
capture() {
|
||||
const canvas = this.$refs.canvas;
|
||||
const video = this.$refs.video;
|
||||
canvas.width = video.videoWidth || 640;
|
||||
canvas.height = video.videoHeight || 480;
|
||||
canvas.getContext('2d').drawImage(video, 0, 0);
|
||||
const photoData = canvas.toDataURL('image/jpeg', 0.85);
|
||||
|
||||
// Stop the camera stream after capture
|
||||
if (video.srcObject) {
|
||||
video.srcObject.getTracks().forEach(track => track.stop());
|
||||
}
|
||||
this.cameraActive = false;
|
||||
this.captured = true;
|
||||
|
||||
// Send photo data to PHP via Livewire
|
||||
$wire.setPhoto(photoData);
|
||||
},
|
||||
|
||||
retake() {
|
||||
this.captured = false;
|
||||
$wire.clearPhoto();
|
||||
this.$nextTick(() => this.startCamera());
|
||||
}
|
||||
}"
|
||||
style="font-family: inherit;"
|
||||
>
|
||||
{{-- ── Error message ── --}}
|
||||
<template x-if="errorMessage">
|
||||
<div style="
|
||||
background: #3b1a1a;
|
||||
border: 1px solid #7f2020;
|
||||
color: #f87171;
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
" x-text="errorMessage"></div>
|
||||
</template>
|
||||
|
||||
{{-- ── Live video feed (shown while camera is active) ── --}}
|
||||
<div x-show="cameraActive && !captured" style="position: relative;">
|
||||
<video
|
||||
x-ref="video"
|
||||
autoplay
|
||||
playsinline
|
||||
muted
|
||||
style="
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
background: #111;
|
||||
"
|
||||
></video>
|
||||
</div>
|
||||
|
||||
{{-- ── Captured photo preview (shown after capture) ── --}}
|
||||
<div x-show="captured" style="position: relative;">
|
||||
<img
|
||||
x-bind:src="$refs.canvas ? $refs.canvas.toDataURL('image/jpeg') : ''"
|
||||
style="
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
border: 2px solid #16a34a;
|
||||
"
|
||||
alt="Captured visitor photo"
|
||||
/>
|
||||
<div style="
|
||||
position: absolute;
|
||||
top: 10px; left: 10px;
|
||||
background: #16a34a;
|
||||
color: white;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
">✓ Photo captured</div>
|
||||
</div>
|
||||
|
||||
{{-- ── Placeholder (before camera starts) ── --}}
|
||||
<div
|
||||
x-show="!cameraActive && !captured"
|
||||
style="
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
height: 200px;
|
||||
background: #1a1a1a;
|
||||
border: 2px dashed #444;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
"
|
||||
>
|
||||
📷 Camera not started yet
|
||||
</div>
|
||||
|
||||
{{-- ── Hidden canvas used for capturing the frame ── --}}
|
||||
<canvas x-ref="canvas" style="display: none;"></canvas>
|
||||
|
||||
{{-- ── Buttons ── --}}
|
||||
<div style="display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap;">
|
||||
|
||||
{{-- Start Camera button --}}
|
||||
<button
|
||||
type="button"
|
||||
x-show="!cameraActive && !captured"
|
||||
x-on:click="startCamera()"
|
||||
style="
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 9px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
"
|
||||
>
|
||||
📷 Start Camera
|
||||
</button>
|
||||
|
||||
{{-- Capture button --}}
|
||||
<button
|
||||
type="button"
|
||||
x-show="cameraActive && !captured"
|
||||
x-on:click="capture()"
|
||||
style="
|
||||
background: #16a34a;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 9px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
"
|
||||
>
|
||||
📸 Capture Photo
|
||||
</button>
|
||||
|
||||
{{-- Retake button --}}
|
||||
<button
|
||||
type="button"
|
||||
x-show="captured"
|
||||
x-on:click="retake()"
|
||||
style="
|
||||
background: #b45309;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 9px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
"
|
||||
>
|
||||
🔄 Retake Photo
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user