preparing to move items to new location

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/routes/stock/Locations.svelte

@@ -5,10 +5,22 @@
 
     import LineEditor from '../../Components/LineEditor.svelte';
 
-    let { locations, parent = null, selected = $bindable(null) } = $props();
+    let { locations, move_dragged_to = new_loc => {}, selected = $bindable(null) } = $props();
 
     let show_location_form = $state(false);
     let new_location_name = $state(null);
+    let highlight = $state(null);
+
+    function drag_over(ev,location){
+        ev.stopPropagation();
+        ev.preventDefault();
+        location.highlight = true;
+        return false;
+    }
+
+    function flat(x){
+        return JSON.parse(JSON.stringify(x));
+    }
 
     async function toggleChildren(ev, location){
         ev.preventDefault();
@@ -35,8 +47,6 @@
             name: new_location_name,
             parent: parent.user ? {user:parent.user} : {company:parent.company}
         }
-
-        console.log(data);
     }
 
     function show_loc_form(ev){
@@ -47,6 +57,12 @@
     }
 </script>
 
+<style>
+    .highlight > span{
+        background: lime;
+    }
+</style>
+
 <ul>
     <li>
         {#if show_location_form}
@@ -61,10 +77,14 @@
 
     </li>
     {#each locations as location}
-    <li onclick={e => toggleChildren(e, location)} class={location.locations?'expanded':'collapsed'}>
-        {location.name}
+    <li onclick={e => toggleChildren(e, location)}
+        class="{location.locations?'expanded':'collapsed'} {location.highlight?'highlight':null}"
+        ondragover={e => drag_over(e,location)}
+        ondrop={e => move_dragged_to(location)}
+        ondragleave={e => delete location.highlight}>
+        <span class="name">{location.name}</span>
         {#if location.locations}
-        <svelte:self locations={location.locations} parent={location} bind:selected />
+        <svelte:self locations={location.locations} {move_dragged_to} bind:selected />
         {/if}
     </li>
     {/each}