Merge pull request '✨ Implement action tracking in browser with JS' (#6) from feat/implement-action-logging into main

Reviewed-on: #6

blazor_lab/Components/Inventory.razor

@@ -26,4 +26,6 @@
 
     </div>
 
+    <div class="actions" id="actions"></div>
+
 </CascadingValue>

blazor_lab/Components/Inventory.razor.cs

@@ -1,6 +1,9 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;
+using Microsoft.JSInterop;
 using Minecraft.Crafting.Api.Models;
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
 using Item = blazor_lab.Models.Item;
 
 namespace blazor_lab.Components
@@ -9,9 +12,24 @@ namespace blazor_lab.Components
     {
         [Inject]
         public IStringLocalizer<Inventory> Localizer { get; set; }
+        [Inject]
+        internal IJSRuntime JavaScriptRuntime { get; set; }
         [Parameter]
         public List<Item> Items { get; set; }
         public InventoryModel? CurrentDragItem { get; set; } = new();
         public List<InventoryModel> InventoryContent { get; set; } = Enumerable.Range(1, 18).Select(_ => new InventoryModel()).ToList();
+
+        public Inventory()
+        {
+            Actions = new ObservableCollection<InventoryAction>();
+            Actions.CollectionChanged += OnActionsCollectionChanged;
+        }
+
+        public ObservableCollection<InventoryAction> Actions { get; set; }
+
+        private void OnActionsCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
+        {
+            JavaScriptRuntime.InvokeVoidAsync("Inventory.AddActions", e.NewItems);
+        }
     }
 }

blazor_lab/Components/Inventory.razor.css

@@ -23,3 +23,9 @@
     align-items: center;
     overflow: hidden;
 }
+
+.actions {
+    border: 1px solid black;
+    height: 250px;
+    overflow: scroll;
+}

blazor_lab/Components/Inventory.razor.js

@@ -0,0 +1,16 @@
+window.Inventory =
+{
+    AddActions: function (data) {
+
+        data.forEach(element => {
+            const div = document.createElement('div');
+            div.innerHTML = 'Action: ' + element.action + ' - Position: ' + element.position;
+
+            if (element.inventoryModel) {
+                div.innerHTML += ' - Item Name: ' + element.inventoryModel.itemName;
+            }
+
+            document.getElementById('actions').appendChild(div);
+        });
+    }
+}

blazor_lab/Components/InventoryAction.cs

@@ -0,0 +1,11 @@
+using Minecraft.Crafting.Api.Models;
+
+namespace blazor_lab.Components
+{
+    public class InventoryAction
+    {
+        public string? Action { get; set; }
+        public int Position { get; set; }
+        public InventoryModel? InventoryModel { get; set; }
+    }
+}

blazor_lab/Components/InventoryItem.razor.cs

@@ -1,4 +1,5 @@
-using Blazorise.Extensions;
+using Blazorise;
+using Blazorise.Extensions;
 using Microsoft.AspNetCore.Components;
 using Minecraft.Crafting.Api.Models;
 using Item = blazor_lab.Models.Item;
@@ -43,6 +44,12 @@ namespace blazor_lab.Components
             if (IsInList)
             {
                 ListParent!.Parent.CurrentDragItem = null;
+                ListParent.Parent.Actions.Add(new InventoryAction
+                {
+                    Action = "Tried to drop on list",
+                    InventoryModel = null,
+                    Position = -1
+                });
                 return;
             }
 
@@ -56,6 +63,12 @@ namespace blazor_lab.Components
                     InventoryModel.Position = Position;
                     InventoryModel.NumberItem = 1;
                     InventoryParent.InventoryContent.Insert(Position, InventoryModel);
+                    InventoryParent.Actions.Add(new InventoryAction
+                    {
+                        Action = "Drop on inventory -- successful",
+                        InventoryModel = InventoryModel,
+                        Position = Position
+                    });
                 }
                 else
                 {
@@ -63,7 +76,21 @@ namespace blazor_lab.Components
                     {
                         InventoryModel.NumberItem += 1;
                     }
+                    InventoryParent.Actions.Add(new InventoryAction
+                    {
+                        Action = "Drop on inventory -- successful",
+                        InventoryModel = InventoryModel,
+                        Position = Position
+                    });
                 }
+
+                InventoryParent.Actions.Add(new InventoryAction
+                {
+                    Action = "Drop on inventory -- unsuccessful",
+                    InventoryModel = null,
+                    Position = Position
+                });
+
                 InventoryParent!.CurrentDragItem = null;
             }
         }
@@ -79,17 +106,24 @@ namespace blazor_lab.Components
                     NumberItem = 1,
                     Position = -1
                 };
+                ListParent.Parent.Actions.Add(new InventoryAction
+                {
+                    Action = "Drag from list",
+                    InventoryModel = ListParent.Parent.CurrentDragItem,
+                    Position = ListParent.Parent.CurrentDragItem.Position
+                });
             }
-            else if (IsInInventory) // delete item stack if it is dragged from inventory
+            else if (IsInInventory && InventoryParent!.CurrentDragItem is not null && InventoryModel is not null) 
+                // delete item stack if it is dragged from inventory
             {
-                InventoryModel = new InventoryModel
+                InventoryParent.Actions.Add(new InventoryAction
                 {
-                    ImageBase64 = null,
-                    ItemName = "",
-                    NumberItem = 0,
-                    Position = Position
-                };
-                InventoryParent!.CurrentDragItem = null;
+                    Action = "Drag from inventory (deleting)",
+                    InventoryModel = InventoryParent.CurrentDragItem,
+                    Position = InventoryParent.CurrentDragItem.Position
+                });
+                InventoryParent.CurrentDragItem = null;
+                InventoryModel = null;
             }
         }
     }

blazor_lab/Pages/_Layout.cshtml

@@ -30,6 +30,7 @@
     <script src="_framework/blazor.server.js"></script>
     <script src="_content/Blazored.Modal/blazored.modal.js"></script>
     <script src="Components/Crafting.razor.js"></script>
+    <script src="Components/Inventory.razor.js"></script>
     <link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
     <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />