drag and drop

This commit is contained in:
guillaume91 2024-05-17 17:14:40 +02:00
parent 59155d1ad5
commit 54367dc8d4
11 changed files with 147 additions and 145 deletions

View file

@ -19,6 +19,11 @@ public function run(): void
'email' => 'martin@sobit.nl',
'password' => '$2y$10$hZZaAaiv1KXmCqq5vZ6PEeRWzvwGbaHKcfqeEMlTn.y22EEPVtofi',
]);
\App\Models\User::factory()->create([
'name' => 'Guillaume Marteau',
'email' => 'guillaume@sobit.nl',
'password' => '$2y$10$Y8RSnCdZp1ye/Qp6k6NGzOGcyO5VzxKUilFG6cczzTZ3d3cJp7iYC',
]);
$this->createChembaProject();
$this->createXinavaneProject();

View file

@ -9,6 +9,7 @@
"@alpinejs/focus": "^3.13.3",
"@alpinejs/intersect": "^3.13.3",
"@alpinejs/ui": "^3.13.3-beta.4",
"@fortawesome/fontawesome-free": "^6.5.2",
"@ryangjchandler/alpine-clipboard": "^2.3.0",
"@tailwindcss/aspect-ratio": "^0.4.2",
"alpinejs": "^3.13.3",
@ -413,6 +414,15 @@
"node": ">=12"
}
},
"node_modules/@fortawesome/fontawesome-free": {
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
"integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",

View file

@ -20,6 +20,7 @@
"@alpinejs/focus": "^3.13.3",
"@alpinejs/intersect": "^3.13.3",
"@alpinejs/ui": "^3.13.3-beta.4",
"@fortawesome/fontawesome-free": "^6.5.2",
"@ryangjchandler/alpine-clipboard": "^2.3.0",
"@tailwindcss/aspect-ratio": "^0.4.2",
"alpinejs": "^3.13.3",

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,11 +1,43 @@
{
"node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf": {
"file": "assets/fa-brands-400-e28096fa.ttf",
"src": "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf"
},
"node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2": {
"file": "assets/fa-brands-400-232c6f6a.woff2",
"src": "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2"
},
"node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf": {
"file": "assets/fa-regular-400-9174757e.ttf",
"src": "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf"
},
"node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2": {
"file": "assets/fa-regular-400-c27da6f8.woff2",
"src": "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2"
},
"node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf": {
"file": "assets/fa-solid-900-b4990d0d.ttf",
"src": "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf"
},
"node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2": {
"file": "assets/fa-solid-900-ae17c16a.woff2",
"src": "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2"
},
"node_modules/@fortawesome/fontawesome-free/webfonts/fa-v4compatibility.ttf": {
"file": "assets/fa-v4compatibility-ff8f525f.ttf",
"src": "node_modules/@fortawesome/fontawesome-free/webfonts/fa-v4compatibility.ttf"
},
"node_modules/@fortawesome/fontawesome-free/webfonts/fa-v4compatibility.woff2": {
"file": "assets/fa-v4compatibility-c7a869fa.woff2",
"src": "node_modules/@fortawesome/fontawesome-free/webfonts/fa-v4compatibility.woff2"
},
"resources/css/app.css": {
"file": "assets/app-f1962042.css",
"file": "assets/app-0124dd11.css",
"isEntry": true,
"src": "resources/css/app.css"
},
"resources/js/alpine.js": {
"file": "assets/alpine-306471eb.js",
"file": "assets/alpine-d6afa966.js",
"isDynamicEntry": true,
"src": "resources/js/alpine.js"
},
@ -13,7 +45,7 @@
"dynamicImports": [
"resources/js/alpine.js"
],
"file": "assets/app-3941bdf3.js",
"file": "assets/app-28a1138a.js",
"isEntry": true,
"src": "resources/js/app.js"
}

View file

@ -1,5 +1,6 @@
@import 'flatpickr/dist/flatpickr.css';
@import url('https://rsms.me/inter/inter.css');
@import '@fortawesome/fontawesome-free/css/all.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

View file

@ -1,6 +1,6 @@
@props(['submit'])
<div {{ $attributes->merge(['class' => 'md:grid md:grid-cols-1 md:gap-6']) }}>
<div {{ $attributes->merge(['class' => '']) }}>
<div class="mt-5 px-6">
<h2>{{ $title }}</h2>
@ -10,7 +10,7 @@
<div class="mt-5 md:mt-0 md:col-span-1">
<form wire:submit="{{ $submit }}">
<div class="px-4 py-5 bg-white sm:p-6 shadow {{ isset($actions) ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md' }}">
<div class="grid grid-cols-6 gap-6">
<div class="flex flex-col">
{{ $form }}
</div>
</div>

View file

@ -31,7 +31,7 @@ class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto"
</svg>
</template>
<template x-if="message.type == 'error'">
<div class="fraud-detection rounded-full bg-all-red text-white flex justify-center items-center"
<div class="rounded-full bg-red-600 text-white flex justify-center items-center"
style="width:30px;height:30px">
<x-icon.exclamation style="transform: scale(1.5)"/>
</div>

View file

@ -16,22 +16,99 @@
<x-slot name="form">
<!-- Token Name -->
<div class="col-span-6 sm:col-span-4">
<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="col-span-6 sm:col-span-4">
<label for="pivot_json_path">Pivot geojson File</label>
<input type="file" id="pivot_json_path" wire:model="formData.pivot_json_path">
<x-input-error for="pivot_json_path" class="mt-2"/>
<label>{{ $projectManager->pivot_json_path }}</label>
<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="col-span-6 sm:col-span-4">
<label for="span_json_path">Span geojson File</label>
<input type="file" id="span_json_path" wire:model="formData.span_json_path">
<x-input-error for="span_json_path" class="mt-2"/>
<label>{{ $projectManager->span_json_path }}</label>
<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 }}">--}}
@ -39,10 +116,10 @@
{{ __('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?') }}"
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>