implement dropzones

baloise-incubator · Oct 20, 2023 · 6096bfb · 6096bfb
1 parent 610635e
commit 6096bfb
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 8 deletions.
diff --git a/angular-frontend/src/app/components/inventory-item/inventory-item.component.scss b/angular-frontend/src/app/components/inventory-item/inventory-item.component.scss
@@ -25,4 +25,14 @@
 
 .danger {
   background-color:#fce8e6;
+}
+
+.ghost-item {
+  width:50px;
+  height:50px;
+  border-radius:9px;
+  margin:3px;
+  border-width:2px;
+  border-style: dashed;
+  border-color: gray;
 }
diff --git a/angular-frontend/src/app/components/inventory/inventory.component.html b/angular-frontend/src/app/components/inventory/inventory.component.html
@@ -3,11 +3,12 @@
         Inventory {{inventory.owner}}
     </bal-card-title>
     <bal-card-content>
-        <div class="inventory-grid" (drop)="onDrop($event)" (dragenter)="onDragEnter($event)" (dragover)="onDragOver($event)">
+        <div class="inventory-grid" (dragenter)="onDragEnter()">
             <app-inventory-item [item]="item" (mouseenter)="onHoverOverItem(item)" (mouseleave)="onExitItem(item)" *ngFor="let item of inventory.items"></app-inventory-item>
             <div class="inventory-add-button">
                 <bal-button square="" inverted="" icon="plus" (click)="onCreateNew()"></bal-button>
             </div>
+            <div class="dropzone" *ngIf="dropzone" (drop)="onDropzoneDrop($event)" (dragenter)="onDropzoneDragEnter($event)" (dragover)="onDropzoneDragOver($event)" (dragleave)="onDragLeave($event)"></div>
         </div>
     </bal-card-content>
 </bal-card>
diff --git a/angular-frontend/src/app/components/inventory/inventory.component.scss b/angular-frontend/src/app/components/inventory/inventory.component.scss
@@ -1,6 +1,7 @@
 .inventory-grid {
   display:flex;
   flex-wrap: wrap;
+  position:relative;
 }
 .inventory {
 }
@@ -14,4 +15,15 @@
   display:flex;
   justify-content: center;
   align-items: center;
+}
+.dropzone {
+  position:absolute;
+  width:100%;
+  height:100%;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-width: 2px;
+  border-style:dashed;
+  border-radius:9px;
+  border-color:gray;
+
 }
diff --git a/angular-frontend/src/app/components/inventory/inventory.component.ts b/angular-frontend/src/app/components/inventory/inventory.component.ts
@@ -26,6 +26,8 @@ export class InventoryComponent implements OnInit {
   @Output()
   moveItem = new EventEmitter<ItemTransferMessage>
 
+  dropzone: boolean = false;
+
   constructor(private modalService: BalModalService) {}
 
   ngOnInit(): void {
@@ -49,24 +51,35 @@ export class InventoryComponent implements OnInit {
     this.itemCreated.emit({ name: base.name })
   }
 
-  onDrop(event: DragEvent) {
-    if (event.dataTransfer) {
-      const data = JSON.parse(event.dataTransfer.getData("application/json")) as Item
+  onDropzoneDrop(event: DragEvent) {
+    const data = this.getItemFromEvent(event)
+    if (data) {
       this.moveItem.emit({
         id: data.id,
         targetInventoryId: this.inventory.id
       })
     }
+    this.dropzone = false;
   }
 
-  onDragOver(event: DragEvent) {
+  private getItemFromEvent(event: DragEvent): Item | undefined {
+    if (!event.dataTransfer) {
+      return undefined;
+    }
+    return JSON.parse(event.dataTransfer.getData("application/json")) as Item;
+  }
+
+  onDropzoneDragOver(event: DragEvent) {
     event.preventDefault();
-    console.log("over");
   }
 
-  onDragEnter(event: DragEvent) {
+  onDropzoneDragEnter(event: DragEvent) {
     event.preventDefault();
-    console.log("enter");
+  }
+
+  onDragEnter() {
+    this.dropzone = true;
+    console.log("dzone")
   }
 
   onHoverOverItem(item: Item) {
@@ -76,4 +89,10 @@ export class InventoryComponent implements OnInit {
   onExitItem(item: Item) {
     this.exitItem.emit(item)
   }
+
+  onDragLeave(event: DragEvent) {
+    event.preventDefault();
+    this.dropzone = false;
+    console.log("no dzone");
+  }
 }