[Done] Added new font-gis icons in the dropzone.
This commit is contained in:
parent
8fe00b55d7
commit
aa477268ec
10
laravel_app/app/Livewire/Components/CustomDropzone.php
Normal file
10
laravel_app/app/Livewire/Components/CustomDropzone.php
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Livewire\Components;
|
||||||
|
|
||||||
|
use Dasundev\LivewireDropzone\Http\Livewire\Dropzone;
|
||||||
|
|
||||||
|
class CustomDropzone extends Dropzone
|
||||||
|
{
|
||||||
|
public $type = '';
|
||||||
|
}
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
@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 gap-2">
|
|
||||||
<p>{{__('Pivot GeoJSON file.')}}</p>
|
|
||||||
<div id="pivot_file">
|
|
||||||
<livewire:dropzone
|
|
||||||
wire:model="pivotFiles"
|
|
||||||
:rules="['extensions:json,geojson','mimes:json,geojson']"
|
|
||||||
:key="'pivotFiles'"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
@error('pivotFiles')
|
|
||||||
<span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
|
|
||||||
@enderror
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col mb-2 gap-2">
|
|
||||||
<p>{{__('Span GeoJSON file.')}}</p>
|
|
||||||
<div id="span_file">
|
|
||||||
<livewire:dropzone
|
|
||||||
wire:model="spanFiles"
|
|
||||||
:rules="['extensions:json,geojson','mimes:json,geojson']"
|
|
||||||
:key="'spanFiles'"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
@error('spanFiles')
|
|
||||||
<span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
|
|
||||||
@enderror
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col mb-2 gap-2">
|
|
||||||
<p>{{__('Harvested Data file.')}}</p>
|
|
||||||
<div id="harvest_file">
|
|
||||||
<livewire:dropzone
|
|
||||||
wire:model="harvestDataFiles"
|
|
||||||
:rules="['extensions:xls,xlsx,ods','mimes:xls,xlsx,ods','required']"
|
|
||||||
:key="'harvest_file'"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
@error('harvest_file')
|
|
||||||
<span class="bg-red-100 text-red-400 p-1 rounded">{{ $message }}</span>
|
|
||||||
@enderror
|
|
||||||
</div>
|
|
||||||
</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"
|
|
||||||
x-on:click="$wire.showProjectModal = false"
|
|
||||||
>
|
|
||||||
{{ __('Cancel') }}
|
|
||||||
</x-secondary-button>
|
|
||||||
<x-button>
|
|
||||||
{{ __('Save') }}
|
|
||||||
</x-button>
|
|
||||||
|
|
||||||
</x-slot>
|
|
||||||
</x-form-modal>
|
|
||||||
</x-modal>
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<div>
|
<div>
|
||||||
<x-project-manager-mail-settings-modal :projectManager="$this"/>
|
<x-project-manager-mail-settings-modal :projectManager="$this"/>
|
||||||
<x-project-manager-properties-modal :projectManager="$this"/>
|
{{-- <x-project-manager-properties-modal :projectManager="$this"/>--}}
|
||||||
<x-project-manager-grid :projectManager="$this"/>
|
<x-project-manager-grid :projectManager="$this"/>
|
||||||
<x-project-manager-delete-confirmation-modal/>
|
<x-project-manager-delete-confirmation-modal/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -3,5 +3,5 @@
|
||||||
<a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'mosaics') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'mosaics'])}}"><i class="group-hover:text-indigo-600 w-6 text-gray-400 fg-mosaic fg-lg"></i>Mosaics</a>
|
<a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'mosaics') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'mosaics'])}}"><i class="group-hover:text-indigo-600 w-6 text-gray-400 fg-mosaic fg-lg"></i>Mosaics</a>
|
||||||
<a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'reports') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'reports'])}}"><i class="group-hover:text-indigo-600 w-6 text-gray-400 fg-map-stat fg-lg"></i>Reports</a>
|
<a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'reports') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'reports'])}}"><i class="group-hover:text-indigo-600 w-6 text-gray-400 fg-map-stat fg-lg"></i>Reports</a>
|
||||||
<a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'mailings') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'mailings'])}}"><i class="group-hover:text-indigo-600 w-6 text-gray-400 fa-regular fa-envelope"></i>Mailings</a>
|
<a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'mailings') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'mailings'])}}"><i class="group-hover:text-indigo-600 w-6 text-gray-400 fa-regular fa-envelope"></i>Mailings</a>
|
||||||
<a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'settings') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'settings'])}}"><i class="group-hover:text-indigo-600 w-6 text-gray-400 fa-regular fg-earth-gear fg-lg"></i>Settings</a>
|
<a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'settings') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'settings'])}}"><i class="group-hover:text-indigo-600 w-6 text-gray-400 fa-solid fa-gear"></i>Settings</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -114,9 +114,10 @@
|
||||||
<div class="flex flex-col mb-2 gap-2">
|
<div class="flex flex-col mb-2 gap-2">
|
||||||
<p>{{__('Pivot GeoJSON file.')}}</p>
|
<p>{{__('Pivot GeoJSON file.')}}</p>
|
||||||
<div id="pivot_file">
|
<div id="pivot_file">
|
||||||
<livewire:dropzone
|
<livewire:components.custom-dropzone
|
||||||
wire:model="pivotFiles"
|
wire:model="pivotFiles"
|
||||||
wire:key="'pivotFiles'"
|
wire:key="'pivotFiles'"
|
||||||
|
:type="'pivot'"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@error('pivotFiles')
|
@error('pivotFiles')
|
||||||
|
|
@ -136,9 +137,10 @@
|
||||||
<div class="flex flex-col mb-2 gap-2">
|
<div class="flex flex-col mb-2 gap-2">
|
||||||
<p>{{__('Span GeoJSON file.')}}</p>
|
<p>{{__('Span GeoJSON file.')}}</p>
|
||||||
<div id="span_file">
|
<div id="span_file">
|
||||||
<livewire:dropzone
|
<livewire:components.custom-dropzone
|
||||||
wire:model="spanFiles"
|
wire:model="spanFiles"
|
||||||
wire:key="'spanFiles'"
|
wire:key="'spanFiles'"
|
||||||
|
:type="'span'"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@error('spanFiles')
|
@error('spanFiles')
|
||||||
|
|
@ -158,11 +160,11 @@
|
||||||
<div class="flex flex-col mb-2 gap-2">
|
<div class="flex flex-col mb-2 gap-2">
|
||||||
<p>{{__('Harvested Data file.')}}</p>
|
<p>{{__('Harvested Data file.')}}</p>
|
||||||
<div id="harvest_file">
|
<div id="harvest_file">
|
||||||
<livewire:dropzone
|
<livewire:components.custom-dropzone
|
||||||
wire:model="harvestDataFiles"
|
wire:model="harvestDataFiles"
|
||||||
:rules="['extensions:xls,xlsx,ods','mimes:xls,xlsx,ods','required']"
|
:rules="['extensions:xls,xlsx,ods','mimes:xls,xlsx,ods','required']"
|
||||||
:key="'harvest_file'"
|
|
||||||
wire:key="'harvest_file'"
|
wire:key="'harvest_file'"
|
||||||
|
:type="'harvest'"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@error('harvest_file')
|
@error('harvest_file')
|
||||||
|
|
|
||||||
|
|
@ -37,8 +37,14 @@ class="w-full antialiased"
|
||||||
<div x-show="!isDragging" class="flex flex-col items-center justify-center gap-2 py-8 h-full ">
|
<div x-show="!isDragging" class="flex flex-col items-center justify-center gap-2 py-8 h-full ">
|
||||||
<div class="flex items-center justify-center gap-2">
|
<div class="flex items-center justify-center gap-2">
|
||||||
{{-- TODO change depending on the file type props etc--}}
|
{{-- TODO change depending on the file type props etc--}}
|
||||||
<i class="fg-geojson-file fg-3x"></i>
|
<i class="@php
|
||||||
<p class="text-md ">Drop here or <span class="font-semibold text-black dark:text-white">Browse file</span>
|
echo match ($type){
|
||||||
|
'pivot','span' => 'fg-geojson-file fg-3x',
|
||||||
|
'harvest' => 'fg-map-stat fg-3x',
|
||||||
|
default => 'fa-solid fa-file-arrow-down'
|
||||||
|
}
|
||||||
|
@endphp fill-red-100"></i>
|
||||||
|
<p class="text-md ">Drop here or <span class="font-semibold text-black dark:text-white">Browse file </span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
|
<div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue