drag and drop

laravel_app/database/seeders/DatabaseSeeder.php

@@ -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();

laravel_app/package-lock.json

@@ -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",

laravel_app/package.json

@@ -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",

laravel_app/public/build/manifest.json

@@ -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"
   }

laravel_app/resources/css/app.css

@@ -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;

laravel_app/resources/views/components/form-modal.blade.php

@@ -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>

laravel_app/resources/views/components/notification.blade.php

@@ -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>

laravel_app/resources/views/components/project-manager-properties-modal.blade.php

@@ -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">
+            <div class="flex flex-col mb-2">
-                <label for="pivot_json_path">Pivot geojson File</label>
+                <label for="pivot_json_path"
-                <input type="file" id="pivot_json_path" wire:model="formData.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-input-error for="pivot_json_path" class="mt-2"/>
+                       x-data="{pivot_file:null}">
-                <label>{{ $projectManager->pivot_json_path }}</label>
+                    <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>
+            <div class="flex flex-col mb-2">
-                <input type="file" id="span_json_path" wire:model="formData.span_json_path">
+                <label for="span_json_path"
-                <x-input-error for="span_json_path" class="mt-2"/>
+                       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"
-                    <label>{{ $projectManager->span_json_path }}</label>
+                       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"
+                            class="cursor-pointer ml-6 text-sm text-red-500"
-                                type="button"
+                            type="button"
-                                wire:click="deleteBoundingBox({{ $key }})"
+                            wire:click="deleteBoundingBox({{ $key }})"
-                                wire:confirm="{{ __('Are you sure you want to delete this BoundingBox?') }}"
+                            wire:confirm="{{ __('Are you sure you want to delete this BoundingBox?') }}"
                         >
                             Delete
                         </button>