196 lines
11 KiB
PHP
196 lines
11 KiB
PHP
@props([
|
|
'formData',
|
|
/** @var \App\Livewire\Projects\ProjectManager */
|
|
'projectManager'
|
|
])
|
|
|
|
<x-modal wire:model.live="showProjectModal" {{ $attributes }}>
|
|
<x-form-modal submit="saveProject">
|
|
<x-slot name="title">
|
|
{{ __('Project') }}
|
|
</x-slot>
|
|
|
|
<x-slot name="description">
|
|
{{ __('Report generator for generating reports') }}
|
|
</x-slot>
|
|
|
|
<x-slot name="form">
|
|
<!-- Token Name -->
|
|
<div class="mb-2">
|
|
<x-label for="name" value="{{ __('Name') }}"/>
|
|
<x-input id="name" type="text" class="mt-1 block w-full" wire:model="formData.name" autofocus/>
|
|
<x-input-error for="name" class="mt-2"/>
|
|
</div>
|
|
<div class="flex flex-col mb-2">
|
|
<label for="pivot_json_path"
|
|
class="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 w-full bg-gray-50 hover:bg-gray-100 hover:border-gray-300 hover:cursor-pointer p-4 rounded"
|
|
x-data="{pivot_file:null}">
|
|
<div class="flex flex-col items-center justify-center text-gray-500 text-sm">
|
|
<span>
|
|
<i class="fa-solid fa-file-arrow-up fa-lg"></i>
|
|
</span>
|
|
<div class="flex flex-col items-center" id="geo_label">
|
|
<span x-text="pivot_file?.name ?? 'Click to upload a Span GeoJSON File.'"></span>
|
|
<span x-text="pivot_file?.name ? '': 'JSON.' " class="text-gray-400 text-xs"></span>
|
|
</div>
|
|
</div>
|
|
<input type="file" id="pivot_json_path" wire:model="formData.pivot_json_path" accept=".json"
|
|
class="hidden" @change="pivot_file = $event.target.files[0]"/>
|
|
<x-input-error for="pivot_json_path" class="mt-2"/>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex flex-col mb-2">
|
|
<label for="span_json_path"
|
|
class="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 w-full bg-gray-50 hover:bg-gray-100 hover:border-gray-300 hover:cursor-pointer p-4 rounded"
|
|
x-data="{span_file:null}" x-init="span_file=null">
|
|
<div class="flex flex-col items-center justify-center text-gray-500 text-sm">
|
|
<span><i class="fa-solid fa-file-arrow-up fa-lg"></i></span>
|
|
<div class="flex flex-col items-center">
|
|
<span x-text="span_file?.name ?? 'Click to upload a Span GeoJSON File.'"></span>
|
|
<span x-text="span_file?.name ? '': 'JSON.' " class="text-gray-400 text-xs"></span>
|
|
</div>
|
|
</div>
|
|
<input type="file" id="span_json_path" wire:model="formData.span_json_path" accept=".json"
|
|
class="hidden" @change="span_file = $event.target.files[0]"/>
|
|
<x-input-error for="span_json_path" class="mt-2"/>
|
|
</label>
|
|
</div>
|
|
{{-- <div class="">--}}
|
|
{{-- <label for="harvest_data"--}}
|
|
{{-- class="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 w-full bg-gray-50 hover:bg-gray-100 hover:border-gray-300 hover:cursor-pointer p-4 rounded"--}}
|
|
{{-- x-data="{excel_file:null}"--}}
|
|
{{-- >--}}
|
|
{{-- <div class="flex flex-col items-center justify-center text-gray-500 text-sm">--}}
|
|
{{-- <span><i class=" fa-solid fa-file-excel fa-lg"></i></span>--}}
|
|
{{-- <div class="flex flex-col items-center">--}}
|
|
{{-- <span x-text="excel_file?.name ?? 'Click to upload a SpreadSheet File.'"></span>--}}
|
|
{{-- <span x-text="excel_file?.name ? '': 'XLS, XLSX or ODS.' "--}}
|
|
{{-- class="text-gray-400 text-xs"></span>--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
{{-- <input type="file" id="harvest_data" wire:model="formData.harvest_data" accept=".xlsx,.xls,.ods"--}}
|
|
{{-- class="hidden" @change="excel_file = $event.target.files[0]" @drop="excel_file = $event.dataTransfer.files[0];console.log(excel_file);"/>--}}
|
|
{{-- <x-input-error for="harvest_data" class="mt-2"/>--}}
|
|
{{-- </label>--}}
|
|
{{-- </div>--}}
|
|
<div x-data="{ fileName: '',
|
|
isAccepted(file){
|
|
acceptedFormats = [
|
|
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
|
];
|
|
return acceptedFormats.includes(file.type);
|
|
},
|
|
handleFile(file){
|
|
if(!this.isAccepted(file)){
|
|
console.log('Wrong file.');
|
|
$dispatch('notify',{message:'Wrong File',type:'error'});
|
|
$refs.harvest_data.files=[];
|
|
return;
|
|
}
|
|
console.log(file.type,file.name);
|
|
this.fileName = file.name;
|
|
$wire.set('formData.harvest_data',file);
|
|
console.log(this.fileName);
|
|
},
|
|
|
|
}" class=" bg-gray-50 hover:bg-gray-100 w-full relative rounded-md shadow-sm">
|
|
<div x-ref="dnd" class="relative text-gray-500 text-sm border-2 border-gray-300 border-dashed rounded cursor-pointer">
|
|
<input accept=".xlsx,.xls,.ods" type="file" x-ref="harvest_data" name="file" title="" @change="if($el.files) handleFile($el.files[0])" wire:model="formData.harvest_data"
|
|
class="absolute inset-0 z-50 w-full h-full p-0 m-0 outline-none opacity-0 cursor-pointer"
|
|
@dragover="$refs.dnd.classList.add('bg-indigo-50')"
|
|
@dragleave="$refs.dnd.classList.remove('bg-indigo-50')"
|
|
@drop="$refs.dnd.classList.remove('bg-indigo-50')"
|
|
/>
|
|
<div class="flex flex-col items-center justify-center py-10 text-center">
|
|
<span><i class=" fa-solid fa-file-excel fa-lg"></i></span>
|
|
<p class="mt-1">Drag or Click to upload a SpreadSheet File.</p>
|
|
<p class="text-gray-400 text-xs"> .xlsx, .xsl or .ods</p>
|
|
<p class="mt-2 text-gray-800" x-text="fileName"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@foreach($projectManager->formData['boundingBoxes'] as $key => $boundingBox)
|
|
{{-- <div wire:key="bounding_box_{{ $key }}">--}}
|
|
<div class="col-span-6 sm:col-span-4">
|
|
{{ __('Bounding box') }}
|
|
@if( count($projectManager->formData['boundingBoxes']) > 1)
|
|
<button
|
|
class="cursor-pointer ml-6 text-sm text-red-500"
|
|
type="button"
|
|
wire:click="deleteBoundingBox({{ $key }})"
|
|
wire:confirm="{{ __('Are you sure you want to delete this BoundingBox?') }}"
|
|
>
|
|
Delete
|
|
</button>
|
|
@endif
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<x-label for="bounding_box_{{ $key }}_name" value="{{ __('Name') }}"/>
|
|
<x-input id="bounding_box_{{ $key }}_name" type="text" class="mt-1 block w-full"
|
|
wire:model="formData.boundingBoxes.{{ $key }}.name" autofocus/>
|
|
<x-input-error for="boundingBoxes.{{ $key }}.name" class="mt-2"/>
|
|
</div>
|
|
<div class="col-span-6 grid grid-cols-6 gap-1">
|
|
<div class="col-span-3">
|
|
<x-label for="bounding_box_{{ $key }}_top_left_latitude"
|
|
value="{{ __('Top left Latitude') }}"/>
|
|
<x-input id="bounding_box_{{ $key }}_top_left_latitude" type="text"
|
|
class="block w-full"
|
|
wire:model="formData.boundingBoxes.{{ $key }}.top_left_latitude"
|
|
autofocus/>
|
|
<x-input-error for="boundingBoxes.{{ $key }}.top_left_latitude" class="mt-2"/>
|
|
</div>
|
|
<div class="col-span-3">
|
|
<x-label for="bounding_box_{{ $key }}_top_left_longitude" value="{{ __('Longitude') }}"/>
|
|
<x-input id="name" type="text" class="block w-full"
|
|
wire:model="formData.boundingBoxes.{{ $key }}.top_left_longitude"
|
|
autofocus/>
|
|
<x-input-error for="boundingBoxes.{{ $key }}.top_left_longitude" class="mt-2"/>
|
|
</div>
|
|
<div class="col-span-3">
|
|
<x-label for="bounding_box_{{ $key }}_bottom_right_latitude"
|
|
value="{{ __('Bottom right Latitude') }}"/>
|
|
<x-input id="bounding_box_{{ $key }}_bottom_right_latitude" type="text"
|
|
class="block w-full"
|
|
wire:model="formData.boundingBoxes.{{ $key }}.bottom_right_latitude"
|
|
autofocus/>
|
|
<x-input-error for="boundingBoxes.{{ $key }}.bottom_right_latitude" class="mt-2"/>
|
|
</div>
|
|
<div class="col-span-3">
|
|
<x-label for="boundingBox_{{ $key }}_bottom_right_longitude" value="{{ __('Longitude') }}"/>
|
|
<x-input id="boundingBox_{{ $key }}_bottom_right_longitude" type="text"
|
|
class="block w-full"
|
|
wire:model="formData.boundingBoxes.{{ $key }}.bottom_right_longitude"
|
|
autofocus/>
|
|
<x-input-error for="boundingBoxes.{{ $key }}.bottom_right_longitude" class="mt-2"/>
|
|
</div>
|
|
</div>
|
|
{{-- </div>--}}
|
|
@endforeach
|
|
</x-slot>
|
|
|
|
<x-slot name="actions">
|
|
<x-action-message class="mr-3" on="saved">
|
|
{{ __('Saved.') }}
|
|
</x-action-message>
|
|
<x-secondary-button class="mr-3"
|
|
type="button"
|
|
wire:click="addBoundingBox"
|
|
>
|
|
{{ __('Add Bounding box') }}
|
|
</x-secondary-button>
|
|
<x-secondary-button class="mr-3"
|
|
type="button"
|
|
x-on:click="$wire.showProjectModal = false"
|
|
>
|
|
{{ __('Cancel') }}
|
|
</x-secondary-button>
|
|
<x-button>
|
|
{{ __('Save') }}
|
|
</x-button>
|
|
|
|
</x-slot>
|
|
</x-form-modal>
|
|
</x-modal>
|