updating publicInfo dinamycally

Nop.Plugin.Misc.AuctionPlugin/Components/AuctionPublicViewComponent.cs

@@ -178,8 +178,6 @@ public class AuctionPublicViewComponent : NopViewComponent
             lastProductToAuction = null;
         }
 
-        
-
 
         productBidBoxViewModel.IsAdmin = await _customerService.IsAdminAsync(customer);
         productBidBoxViewModel.IsGuest = await _customerService.IsGuestAsync(customer);

Nop.Plugin.Misc.AuctionPlugin/Content/Js/MgMessageHandler.js

@@ -9,7 +9,7 @@
             if (!liveScreen) {
                 toastr.info(`<div class="item announcemantToast">${myObject.message}</div>`, myObject.title, {
                     "closeButton": true,
-                    "positionClass": "toast-top-right",
+                    "positionClass": "toast-bottom-left",
                     "newestOnTop": true,
                     "progressBar": true,
                     "preventDuplicates": false,
@@ -47,7 +47,7 @@
             if (!liveScreen) {
                 toastr.success(`<div class="item bidToast"><p>${myObject.currentPrice}</p><p>${myObject.productName}</p></div>`, "New bid arrived", {
                     "closeButton": true,
-                    "positionClass": "toast-top-right",
+                    "positionClass": "toast-bottom-left",
                     "newestOnTop": true,
                     "progressBar": true,
                     "preventDuplicates": false,
@@ -71,6 +71,7 @@
 	        var productToAuctionDto = myObject.auctionDto.productToAuctionDtos[0];
             var publicProductBidBox = document.getElementById("publicProductBidBox");
             var liveScreen = document.getElementById("auctionProductLiveScreenBox");
+            var publicInfo = document.getElementById("publicInfoOverlay" + productToAuctionDto.productId);
             if (!liveScreen) {
                 var messageTitle = "";
                 var messageText = "";
@@ -78,12 +79,12 @@
                 switch (productToAuctionDto.auctionStatus) {
                     case AuctionStatus.None:
                         messageTitle = `Item reset`;
-                        messageText = `The bids on item with index ${myObject.auctionDto.productToAuctionDtos[0].SortIndex} has been resetted`;
+                        messageText = `The bids on item with index ${productToAuctionDto.sortIndex} has been resetted`;
                         messageColor = "#6c757d";
                         break;
                     case AuctionStatus.Active:
                         messageTitle = `Item activated`;
-                        messageText = `The bids on item with index ${myObject.auctionDto.productToAuctionDtos[0].SortIndex} has been activated`;
+                        messageText = `The bids on item with index ${productToAuctionDto.sortIndex} has been activated`;
                         messageColor = "#4caf50";
                         break;
                     case AuctionStatus.FirstWarning:
@@ -118,7 +119,7 @@
 
                 toastr.success(`<div class="item bidToast"><p>${messageText}</p></div>`, messageTitle, {
                     "closeButton": true,
-                    "positionClass": "toast-top-right",
+                    "positionClass": "toast-bottom-left",
                     "newestOnTop": true,
                     "progressBar": true,
                     "preventDuplicates": false,
@@ -140,6 +141,14 @@
             if (liveScreen) {
                 reloadOnUpdate();
             }
+            if (publicInfo) {
+                var functionName = "refreshPublicInfo" + productToAuctionDto.productId;
+                /*if (typeof window[functionName] === "function" + productToAuctionDto.productId) {*/
+                    window[functionName](myObject); // Dynamically call the function
+                //} else {
+                    //console.error("Function " + functionName + " does not exist.");
+                //}
+            }
 
 	       // var publicProductBidBox = document.getElementById("publicProductBidBox");
 	       // if (publicProductBidBox) 
@@ -147,32 +156,32 @@
 		      //  refreshPublicBidBox(myObject);
 	       // }
         },
-        openItemMessage: function (data) {
+        //openItemMessage: function (data) {
-            var myObject = JSON.parse(data);
+        //    var myObject = JSON.parse(data);
-            toastr.success(`<div class="item bidToast"><p>${myObject.nextBidPrice}</p><p>${myObject.productName}</p></div>`, "Item auction is OPENED!", {
+        //    toastr.success(`<div class="item bidToast"><p>${myObject.nextBidPrice}</p><p>${myObject.productName}</p></div>`, "Item auction is OPENED!", {
-                "closeButton": true,
+        //        "closeButton": true,
-                "positionClass": "toast-top-right",
+        //        "positionClass": "toast-top-right",
-                "newestOnTop": true,
+        //        "newestOnTop": true,
-                "progressBar": true,
+        //        "progressBar": true,
-                "preventDuplicates": false,
+        //        "preventDuplicates": false,
-                "onclick": null,
+        //        "onclick": null,
-                "showDuration": "30000",
+        //        "showDuration": "30000",
-                "hideDuration": "1000",
+        //        "hideDuration": "1000",
-                "timeOut": "5000",
+        //        "timeOut": "5000",
-                "extendedTimeOut": "1000",
+        //        "extendedTimeOut": "1000",
-                "showEasing": "swing",
+        //        "showEasing": "swing",
-                "hideEasing": "linear",
+        //        "hideEasing": "linear",
-                "showMethod": animation,
+        //        "showMethod": animation,
-                "hideMethod": "fadeOut"
+        //        "hideMethod": "fadeOut"
-            });
+        //    });
-            $('.toast-success').css("background-color", "#4caf50");
+        //    $('.toast-success').css("background-color", "#4caf50");
 
-            var publicProductBidBox = document.getElementById("publicProductBidBox");
+        //    var publicProductBidBox = document.getElementById("publicProductBidBox");
-            if (publicProductBidBox) {
+        //    if (publicProductBidBox) {
-                refreshPublicBidBox(myObject);
+        //        refreshPublicBidBox(myObject);
-            }
+        //    }
 
-        },
+        //},
 
         // Add more handlers as needed
         default: function (data) {

Nop.Plugin.Misc.AuctionPlugin/Views/PublicInfo.cshtml

@@ -4,6 +4,7 @@
 
 <script asp-location="Footer">
     var pageViewModel;
+    var isActive;
 
     $(document).ready(function () {
         // Deserialize the server-side model
@@ -12,33 +13,60 @@
         console.log(pageViewModel.ProductId);
         console.log(pageViewModel.ProductToAuctionMappingId);
         // Get the element with data-productid
+        isActive = pageViewModel.IsActive;
+        initialize();
+    });
+
+    function initialize() {
+        console.log("isActive = " + isActive);
         var productItem = $('.product-item[data-productid="' + pageViewModel.ProductId + '"]');
 
+        var existingOverlay = document.getElementById(`publicInfoOverlay${pageViewModel.ProductId}`);
+        if (existingOverlay) {
+            console.log("remove because it exists");
+            existingOverlay.remove();
+        }
+
         // Check if element exists
         if (productItem.length > 0 && pageViewModel.ProductToAuctionMappingId > 0) {
             console.log("Product item found:", productItem);
             // Add a new div as the first child
-            if (pageViewModel.IsActive) {
+            if (isActive) {
-                productItem.prepend('<div class="bg-success p-1 text-white fs-6 text-center" style="position: absolute; width: calc(100% - 1rem); height: 40px; z-index: 1;"><i class="fa-solid fa-gavel"> '
+                console.log("isActive: " + isActive);
+                productItem.prepend(`<div id="publicInfoOverlay${pageViewModel.ProductId}" class="bg-success p-1 text-white fs-6 text-center" style="position: absolute; width: calc(100% - 1rem); height: 40px; z-index: 1;"><i class="fa-solid fa-gavel"> `
                     + 'LIVE RIGTH NOW' +
                     '</i></div>');
             }
             else {
-                productItem.prepend('<div class="bg-primary p-1 text-white fs-6 text-center" style="position: absolute; width: calc(100% - 1rem); height: 40px; z-index: 1;"><i class="fa-solid fa-gavel"> '
+                console.log("isActive: " + isActive);
+                productItem.prepend(`<div id="publicInfoOverlay${pageViewModel.ProductId}" class="bg-primary p-1 text-white fs-6 text-center" style="position: absolute; width: calc(100% - 1rem); height: 40px; z-index: 1;"><i class="fa-solid fa-gavel"> `
                     + pageViewModel.StartDate +
                     '</i></div>');
             }
-            
+
         } else {
             console.error("Product item not found with productId:", pageViewModel.ProductId);
         }
-    });
-
-
-    function refreshPublicInfo@(Model.ProductId)(data) {
-
-	    console.log('function called: refreshPublicInfo' + @(Model.ProductId));
     }
+    
 
+    window[`refreshPublicInfo${@Model.ProductId}`] = function (data) {
+
+        var status = data.auctionDto.productToAuctionDtos[0].auctionStatus;
+        if (status == AuctionStatus.Active) {
+            console.log(data.auctionDto);
+            isActive = true;
+            console.log("setting active to " + isActive);
+        }
+        else {
+            isActive = false;
+            console.log("setting active to " + isActive);
+        }
+
+        initialize();
+        console.log('Function called: refreshPublicInfo' + @Model.ProductId);
+    };
+    console.log(`Function refreshPublicInfo${@Model.ProductId} added to DOM:`, window[`refreshPublicInfo${@Model.ProductId}`]);
+    
 </script>