294 lines
15 KiB
PHP
294 lines
15 KiB
PHP
<div class="flex flex-col divide-y space-y-4 m-2"
|
|
x-data="{
|
|
processFile(file,type) {
|
|
let filetype = ['json','geojson'];
|
|
if(!filetype.includes(file.name.split('.').pop())) return;
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
const data = event.target.result;
|
|
try {
|
|
this.showMap(JSON.parse(data),type);
|
|
} catch (error) {
|
|
console.error('Error parsing GeoJSON:', error);
|
|
}
|
|
};
|
|
reader.readAsText(file);
|
|
},
|
|
initMap(){
|
|
window.map.style.height = '300px';
|
|
if(window.geoJsonMap) return;
|
|
try{
|
|
window.geoJsonMap = L.map('map').setView([51.505, -0.09], 13);
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <a href=`http://www.openstreetmap.org/copyright`>OpenStreetMap</a>'
|
|
}).addTo(window.geoJsonMap);
|
|
}catch(err){
|
|
console.log(err);
|
|
}
|
|
},
|
|
initMapLayer(){
|
|
if(window.geoJsonMap && window.geoJsonLayer) return;
|
|
window.geoJsonLayer = L.geoJSON();
|
|
window.geoJsonLayer.addTo(window.geoJsonMap);
|
|
window.mapLayers=[];
|
|
},
|
|
showMap(data,type){
|
|
this.initMap();
|
|
this.initMapLayer();
|
|
this.addLayer(data,type);
|
|
console.log('GeoJson loaded on the map.');
|
|
},
|
|
addLayer(layerData,type){
|
|
switch(type){
|
|
case 'pivot_file':
|
|
window.mapLayers.unshift(layerData);
|
|
break;
|
|
case 'span_file':
|
|
window.mapLayers.push(layerData);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
this.updateLayer(layerData);
|
|
window.map.focus();
|
|
},
|
|
updateLayer(layerData){
|
|
var basicColors = ['red', 'blue', 'orange', 'purple'];
|
|
var randomIndex = Math.floor(Math.random() * basicColors.length);
|
|
window.geoJsonLayer.addData(layerData);
|
|
window.geoJsonLayer.setStyle(function(feature) {
|
|
return {
|
|
color: basicColors[randomIndex],
|
|
weight: 2,
|
|
opacity: 0.5,
|
|
fillOpacity: 0.5
|
|
};
|
|
});
|
|
window.geoJsonMap.fitBounds(geoJsonLayer.getBounds());
|
|
|
|
},
|
|
removeLayer(type){
|
|
window.geoJsonLayer.clearLayers();
|
|
switch(type){
|
|
case 'pivot_file':
|
|
window.mapLayers.shift();
|
|
break;
|
|
case 'span_file':
|
|
window.mapLayers.pop();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
if(window.mapLayers.length == 0) window.map.style.height='0px';
|
|
window.mapLayers.forEach((data) => this.updateLayer(data));
|
|
window.map.focus();
|
|
|
|
}
|
|
}"
|
|
x-on:livewire-upload-finish.document="processFile($event.target.files[0],$event.target.closest('[id]').id);"
|
|
>
|
|
<div id="edit" class="flex flex-col md:flex-row gap-2">
|
|
<div class="flex flex-col md:w-1/3">
|
|
<div class="text-xl font-bold ">
|
|
{{ __('General') }}
|
|
</div>
|
|
<div class="text-gray-500 text-md">
|
|
{{__('Manage the general settings of this project and the reports.')}}
|
|
</div>
|
|
</div>
|
|
<div class="md:w-2/3">
|
|
<form>
|
|
<div id="map">
|
|
|
|
</div>
|
|
<!-- 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'"
|
|
wire: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'"
|
|
wire: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'"
|
|
wire:key="'harvest_file'"
|
|
/>
|
|
</div>
|
|
@error('harvest_file')
|
|
<span class="bg-red-100 text-red-400 p-1 rounded">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div id="scheduling"
|
|
class="flex flex-col md:flex-row">
|
|
<div class="flex flex-col my-4 md:w-1/3">
|
|
<span class="text-xl font-bold dark:text-gray-300">{{__('Schedule')}}</span>
|
|
<div class="text-gray-500 text-md">
|
|
{{ __('Schedule an action for this project') }}
|
|
</div>
|
|
</div>
|
|
<div id="mail"
|
|
class="flex flex-col md:w-2/3"
|
|
x-data="{showMail: null}"
|
|
x-init="showMail = $wire.formData['mail_scheduled']"
|
|
> {{-- flex col--}}
|
|
<div class="flex justify-between my-4">
|
|
<div class="inline-flex items-center gap-2">
|
|
{{-- <span class="text-lg font-semibold dark:text-gray-300">{{__('Mail')}}</span>---}}
|
|
<div class=" text-md font-bold">
|
|
{{ __('Send a mail to recipients periodically') }}
|
|
</div>
|
|
</div>
|
|
<label class="inline-flex items-center cursor-pointer gap-4">
|
|
<input type="checkbox" class="sr-only peer" wire:model.live="formData.mail_scheduled"
|
|
@click="showMail = $el.checked">
|
|
<div
|
|
class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"></div>
|
|
</label>
|
|
</div>
|
|
<div class="flex w-full ">
|
|
<form submit="saveMailSettings">
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<x-label for="email_subject" value="{{ __('Subject') }}"/>
|
|
<x-input id="email_subject" type="text"
|
|
class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
|
|
wire:model="formData.mail_subject"
|
|
x-bind:disabled="!showMail"
|
|
autofocus/>
|
|
<x-input-error for="mail_subject" class="mt-2"/>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<x-label for="email_template" value="{{ __('Template') }}"/>
|
|
<textarea id="email_template" type="text"
|
|
class="mt-1 block w-full h-[200px] border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:bg-gray-50 disabled:text-gray-500"
|
|
wire:model="formData.mail_template"
|
|
x-bind:disabled="!showMail"
|
|
>
|
|
</textarea>
|
|
<x-input-error for="mail_template" class="mt-2"/>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<x-label for="email_frequency" value="{{ __('Frequency') }}"/>
|
|
<select id="email_frequency"
|
|
class="mt-1 block w-full rounded-md border-gray-300 disabled:bg-gray-50 disabled:text-gray-500"
|
|
wire:model="formData.mail_frequency"
|
|
x-bind:disabled="!showMail"
|
|
>
|
|
@foreach(App\Helper::getMailFrequencies() as $frequency)
|
|
<option value="{{ $frequency }}">{{ $frequency }}</option>
|
|
@endforeach
|
|
</select>
|
|
<x-input-error for="mail_frequency" class="mt-2"/>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<x-label for="mail_day" value="{{ __('Day') }}"/>
|
|
<select id="mail_day"
|
|
wire:model="formData.mail_day"
|
|
x-bind:disabled="!showMail"
|
|
class="mt-1 block w-full rounded-md border-gray-300 disabled:bg-gray-50 disabled:text-gray-500">
|
|
@foreach(App\Helper::getDays() as $day)
|
|
<option value="{{ $day }}">{{ $day }}</option>
|
|
@endforeach
|
|
</select>
|
|
<x-input-error for="mail_day" class="mt-2"/>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-4 text-lg my-2 font-semibold">
|
|
{{ __('Recipients') }}
|
|
</div>
|
|
<div class="divide-y divide-indigo-200 divide-dashed">
|
|
@foreach($formData['mail_recipients'] as $key => $email_recipient)
|
|
<div class="gap-1 my-1 py-2 flex flex-col md:flex-row justify-between">
|
|
<div class="">
|
|
<x-label for="mail_recipient_{{ $key }}_name" value="{{ __('Name') }}"/>
|
|
<x-input id="mail_recipient_{{ $key }}_name" type="text"
|
|
class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
|
|
x-bind:disabled="!showMail"
|
|
wire:model="formData.mail_recipients.{{ $key }}.name" autofocus/>
|
|
<x-input-error for="mail_recipients.{{ $key }}.name" class="mt-2"/>
|
|
</div>
|
|
|
|
<div class="">
|
|
<x-label for="bounding_box_{{ $key }}_top_left_latitude"
|
|
value="{{ __('Email') }}"/>
|
|
<x-input id="bounding_box_{{ $key }}_top_left_latitude" type="text"
|
|
class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
|
|
x-bind:disabled="!showMail"
|
|
wire:model="formData.mail_recipients.{{ $key }}.email"
|
|
autofocus/>
|
|
<x-input-error for="mail_recipients.{{ $key }}.email" class="mt-2"/>
|
|
</div>
|
|
<div class="flex">
|
|
@if( count($formData['mail_recipients']) > 1)
|
|
<button
|
|
class="cursor-pointer text-sm text-red-500 disabled:cursor-default disabled:opacity-0 py-3 mx-2 self-end"
|
|
type="button"
|
|
x-bind:disabled="!showMail"
|
|
wire:click="deleteEmailRecipient({{ $key }})"
|
|
wire:confirm="{{ __('Are you sure you want to delete this Recipient?') }}"
|
|
>
|
|
Delete
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<div x-show="showMail" class="flex">
|
|
<x-secondary-button class="mr-3"
|
|
type="button"
|
|
wire:click="addEmailRecipient"
|
|
>
|
|
{{ __('Add recipient') }}
|
|
</x-secondary-button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end items-center py-4">
|
|
<span>
|
|
<x-action-message class="mr-3 text-indigo-500 font-semibold rounded p-2" on="saved">
|
|
{{ __('Saved.') }}
|
|
</x-action-message>
|
|
</span>
|
|
<x-button type="button"
|
|
wire:click="saveSettings">
|
|
{{__('Save settings')}}
|
|
</x-button>
|
|
</div>
|
|
</div>
|