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

@@ -4,9 +4,6 @@
     const handlers = {
         announcement: function (data) {
             var myObject = JSON.parse(data);
-            
-            var liveScreen = document.getElementById("auctionProductLiveScreenBox");
-            if (!liveScreen) {
             toastr.info(`<div class="item announcemantToast">${myObject.message}</div>`, myObject.title, {
                 "closeButton": true,
                 "positionClass": "toast-bottom-right",
@@ -24,24 +21,10 @@
                 "hideMethod": "fadeOut"
             });
             $('.toast-info').css("background-color", "#008080");
-            }
-            
         },
         bidNotification: function (data) {
             console.log(data);
             var myObject = JSON.parse(data);
-            console.log(myObject);
-            var publicProductBidBox = document.getElementById("publicProductBidBox");
-            var liveScreen = document.getElementById("auctionProductLiveScreenBox");
-            if (publicProductBidBox) 
-            {
-                refreshPublicBidBox(myObject);
-            }
-            if (liveScreen) 
-            {
-                reloadOnUpdate();
-            }
-            if (!liveScreen) {
             toastr.success(`<div class="item bidToast"><p>${myObject.currentPrice}</p><p>${myObject.productName}</p></div>`, "New bid arrived", {
                 "closeButton": true,
                 "positionClass": "toast-bottom-right",
@@ -59,6 +42,11 @@
                 "hideMethod": "fadeOut"
             });
             $('.toast-success').css("background-color", "#4caf50");
+
+            var publicProductBidBox = document.getElementById("publicProductBidBox");
+            if (publicProductBidBox) 
+            {
+                refreshPublicBidBox(myObject);
             }
         },
         ProductToAuctionStatusNotification: function (data) {
@@ -66,9 +54,7 @@
 	        var myObject = JSON.parse(data);
 	        var auctionDto = myObject.auctionDto;
 	        var productToAuctionDto = myObject.auctionDto.productToAuctionDtos[0];
-            var publicProductBidBox = document.getElementById("publicProductBidBox");
+
-            var liveScreen = document.getElementById("auctionProductLiveScreenBox");
-            if (!liveScreen) {
 	        toastr.success(`<div class="item bidToast"><p>${productToAuctionDto.auctionStatus}</p><p>${productToAuctionDto.id}</p></div>`, "Status changed", {
 		        "closeButton": true,
 		        "positionClass": "toast-bottom-right",
@@ -86,13 +72,6 @@
 		        "hideMethod": "fadeOut"
 	        });
 	        $('.toast-success').css("background-color", "#4caf50");
-            }
-            //if (publicProductBidBox) {
-            //    refreshPublicBidBox(myObject);
-            //}
-            if (liveScreen) {
-                reloadOnUpdate();
-            }
 
 	       // var publicProductBidBox = document.getElementById("publicProductBidBox");
 	       // if (publicProductBidBox) 

Nop.Plugin.Misc.AuctionPlugin/Controllers/AuctionController.cs

@@ -77,15 +77,18 @@ public class AuctionController : BasePluginController
     public async Task<IActionResult> LiveScreen(int auctionId)
     {
 
-        var auctionDto = await _auctionService.GetAuctionDtoWithAuctionBids(auctionId, true);
+        var auctionDto = await _auctionService.GetAuctionDtoByIdAsync(auctionId, true);
-        var activeMapping = auctionDto?.ProductToAuctionDtos.MinBy(x => x.SortIndex);
-        var isAnyItemLive = activeMapping != null;
 
+        //var auctionDto = _auctionService.GetAuctionDtoWithAuctionBids(int auctionId, bool activeProductOnly)
+
+        //auctionDto.ProductToAuctionDtos.AddRange(productToAuctionDtoMappings);
+
+        bool isAnyItemLive = auctionDto.ProductToAuctionDtos.Any(x  => x.AuctionStatus == AuctionStatus.Active);
         
         var model = new LiveScreenViewModel(auctionDto);
         Product product;
         ProductDetailsModel productDetailsModel;
-        
+        ProductToAuctionDto activeMapping;
         int activeProductId = 0;
         int activeProductToAuctionId = 0;
         decimal basePrice = 0;

Nop.Plugin.Misc.AuctionPlugin/Models/LiveScreenViewModel.cs

@@ -8,7 +8,13 @@ namespace Nop.Plugin.Misc.AuctionPlugin.Models
 {
     public record LiveScreenViewModel : BaseNopModel
     {
+
+        [JsonIgnore]
+        [System.Text.Json.Serialization.JsonIgnore]
         public AuctionDto AuctionDto { get; set; }
+
+        [JsonIgnore]
+        [System.Text.Json.Serialization.JsonIgnore]
         public ProductToAuctionDto CurrentProductToAuction { get; set; }
 
         public ProductDetailsModel ActiveProductDetails { get; set; }

Nop.Plugin.Misc.AuctionPlugin/Nop.Plugin.Misc.AuctionPlugin.csproj

@@ -27,7 +27,6 @@
     <None Remove="Views\Configure.cshtml" />
     <None Remove="Views\LiveAnnouncement.cshtml" />
     <None Remove="Views\LiveScreen.cshtml" />
-    <None Remove="Views\Product\_ProductSpecifications.cshtml" />
     <None Remove="Views\PublicInfo - Copy.cshtml" />
     <None Remove="Views\PublicInfo.cshtml" />
     <None Remove="Views\PublicProductBidBox.cshtml" />
@@ -81,11 +80,6 @@
     <Content Include="Views\Auction\_LiveScreenLayout.cshtml">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
-    <Content Include="Views\Product\_ProductSpecifications.cshtml">
-      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
-      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
-      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
-    </Content>
     <Content Include="Views\PublicInfo.cshtml">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
@@ -130,9 +124,6 @@
     <None Update="Content\Css\toastr.min.css">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </None>
-    <None Update="Content\Images\wallpaper.jpg">
-      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
-    </None>
     <None Update="Content\Js\MgMessageHandler.js">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </None>

Nop.Plugin.Misc.AuctionPlugin/Views/Auction/LiveScreenRoot.cshtml

@@ -13,7 +13,7 @@
     
    
     <section>
-        <div id="auctionProductLiveScreenBox" class="container-fluid" style="min-height: 100vh; overflow-y: hidden; background-image: url('../../Plugins/Misc.AuctionPlugin/Content/Images/wallpaper.jpg'); background-attachment: fixed; background-size: cover;">
+        <div class="container-fluid bg-primary" style="height: 100vh;">
             @RenderBody()
         </div>
     </section>

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

@@ -11,17 +11,41 @@
     IStoreContext _storeContext = EngineContext.Current.Resolve<IStoreContext>();
 
     NopHtml.AddScriptParts(ResourceLocation.Head, "~/Plugins/Misc.AuctionPlugin/Content/Js/signalr.js");
-    NopHtml.AddScriptParts(ResourceLocation.Footer, "https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.js");
-    // NopHtml.AddScriptParts(ResourceLocation.Footer, "https://cdn.datatables.net/scroller/2.4.3/js/dataTables.scroller.js");
-    // NopHtml.AddScriptParts(ResourceLocation.Footer, "https://cdn.datatables.net/scroller/2.4.3/js/scroller.dataTables.js");
     NopHtml.AddScriptParts(ResourceLocation.Footer, "~/Plugins/Misc.AuctionPlugin/Content/Js/MgMessageHandler.js");
     NopHtml.AddScriptParts(ResourceLocation.Footer, "~/Plugins/Misc.AuctionPlugin/Content/Js/LiveAnnouncement.js");
     NopHtml.AddCssFileParts("~/Plugins/Misc.AuctionPlugin/Content/Css/toastr.min.css");
-    NopHtml.AddCssFileParts("https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css");
     NopHtml.AddScriptParts(ResourceLocation.Footer, "~/Plugins/Misc.AuctionPlugin/Content/Js/toastr.js");
 
 }
 
+@* <button id="showToast">Show Toast</button> *@
+
+@* <script>
+    // Basic Toastr Test
+    $(document).ready(function () {
+        toastr.options = {
+            "closeButton": true,
+            "debug": false,
+            "newestOnTop": false,
+            "progressBar": true,
+            "positionClass": "toast-bottom-right",
+            "preventDuplicates": false,
+            "showDuration": "300",
+            "hideDuration": "1000",
+            "timeOut": "50000",
+            "extendedTimeOut": "1000",
+            "showEasing": "swing",
+            "hideEasing": "linear",
+            "showMethod": "fadeIn",
+            "hideMethod": "fadeOut"
+        };
+
+        // Show toast on button click
+        $('#showToast').click(function () {
+            toastr.warning('This is a test notification!');
+        });
+    });
+</script> *@
 
 <div class="announcementPage">
 </div>

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

@@ -1,7 +1,6 @@
 @model LiveScreenViewModel
 @using Nop.Core.Infrastructure
 @using Nop.Web.Framework
-@using Nop.Plugin.Misc.AuctionPlugin.Domains.Dtos;
 
 @{
     var defaultGridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().DefaultGridPageSize;
@@ -15,7 +14,7 @@
     if (Model.IsAnyItemActive)
     {
 
-        <div class="row py-3">
+        <div id="auctionProductLiveScreenBox" class="row py-3">
             <!-- Item Image -->
             <div class="col-lg-4 col-md-6 mb-4">
                 <div class="card border-0">
@@ -24,16 +23,17 @@
                 <div class="card bg-transparent">
                     <div class="card-body">
                         <h5 class="card-title mb-3">Bid History</h5>
-                        <div class="table-responsive bg-transparent">
+                        <div class="table-responsive">
-                            <table id="bidHistoryTable" class="table-responsive bg-transparent">
+                            <table id="bidHistoryTable" class="table table-striped bg-transparent">
-                                <thead class="bg-transparent">
+                                <thead>
                                     <tr>
                                         <th>#</th>
+                                        <th>Bidder</th>
                                         <th>Bid Amount</th>
-                                        <th>Account</th>
+                                        <th>Date</th>
                                     </tr>
                                 </thead>
-                                <tbody class="bg-transparent">
+                                <tbody>
                                     <!-- Dynamic Data Populated by DataTable -->
                                 </tbody>
                             </table>
@@ -44,35 +44,34 @@
             <!-- Item Details -->
             <div class="col-lg-8 col-md-6" style="height: 100vh;">
                 <div class="card border-0 bg-transparent h-100">
-                    <div class="card-header border-0 bg-transparent">
+                    <div class="card-body border-0">
-                        <div class="row">
-                            <div class="col-md-8 col-12">
                         <h1 class="card-title">@Model.ActiveProductDetails.Name</h1>
                         <h2 class="text-muted mb-3">Created by: <span class="font-weight-bold">@Model.ActiveProductDetails.ProductManufacturers.FirstOrDefault().Name</span></h2>
-                            </div>
+                        <h3> Item no.: @Model.CurrentProductToAuction.SortIndex </h3>
-                            <div class="col-md-4 col-12">
-                                <h3 class="text-end"> Item no.: @Model.CurrentProductToAuction.SortIndex </h3>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="card-body border-0">
-
                         <!-- Item Information -->
                         <ul class="list-group mb-3 border-0">
                             <li class="bg-transparent border-0 list-group-item d-flex justify-content-between align-items-center">
-                                <div>
-                                    @await Html.PartialAsync("Product/_ProductSpecifications.cshtml", Model.ActiveProductDetails.ProductSpecificationModel)
-                                </div>
-                                <div>
                                 <span>Base price</span>
                                 <span>@(String.Format("{0:c}", Model.BasePrice))</span>
-                                </div>
+                            </li>
-                                <div>
+                            <li class="bg-transparent border-0 list-group-item d-flex justify-content-between align-items-center">
                                 <span>Actual licit step</span>
                                 <span>@(String.Format("{0:c}", Model.LicitStep))</span>
-                                </div>
                             </li>
+                            <li class="bg-transparent border-0 list-group-item d-flex justify-content-between align-items-center">
+                                @await Html.PartialAsync("../../../Views/Product/_ProductSpecifications.cshtml", Model.ActiveProductDetails.ProductSpecificationModel)
+                                @*  @{
 
+                        var dataDictAttributes = new ViewDataDictionary(ViewData);
+                        dataDictAttributes.TemplateInfo.HtmlFieldPrefix = $"attributes_{Model.ProductDetails.Id}";
+                        @await Html.PartialAsync("../../../Views/Product/_ProductAttributes.cshtml", Model.ProductDetails, dataDictAttributes)
+                        }
+                        *@
+                            </li>
+                            @* <li class="list-group-item d-flex justify-content-between align-items-center">
+                    <span>Material</span>
+                    <span>Oil on Canvas</span>
+                    </li> *@
                             <li class="bg-transparent border-0 list-group-item">
                                 <span class="font-weight-bold">Description:</span>
                                 <p class="mb-0 mt-2 text-muted">
@@ -81,11 +80,9 @@
                             </li>
                         </ul>
                     </div>
-                    <div class="card-footer h-50 border-0 align-items-center text-center bg-transparent">
+                    <div class="card-footer border-0 d-flex justify-content-between align-items-center ">
                         <span>Current state price</span>
-                        <h3 style="font-size: 72px;">
+                        <h3>@(String.Format("{0:c}", Model.CurrentPrice))</h3>
-                            @(String.Format("{0:c}", Model.CurrentPrice))
-                        </h3>
 
                     </div>
                 </div>
@@ -105,60 +102,25 @@
 }
 
 
+
+
 <!-- Initialize DataTable -->
-<script asp-location="Footer">
+<script>
-
     $(document).ready(function () {
-
+        $('#bidHistoryTable').DataTable({
-        liveScreenPageViewModel = @Html.Raw(Json.Serialize(Model));
+            "pageLength": 10,
-        console.log("ViewModel:", liveScreenPageViewModel);
+            "ordering": true,
-
+            "searching": true,
-        // Extract and preprocess table data
+            "info": true,
-        var tableData = liveScreenPageViewModel.CurrentProductToAuction.AuctionBidDtos
+            "lengthChange": false,
-            .slice(0, 6) // Get the first 6 elements
+            "columns": [
-            .map(item => ({
+                { "data": "#" },
-                Id: item.Id,
+                { "data": "Bidder" },
-                BidPrice: item.BidPrice,
+                { "data": "Bid Amount" },
-                CustomerId: item.CustomerId
+                { "data": "Date" }
-            }));
+            ]
-        console.log("Table Data:", tableData);
+        });
-
-        tableData.forEach((element) => console.log(element));
-        tableData.forEach((element) => addRowToTable(element));       
-
-            // // Initialize DataTable
-            // $('#bidHistoryTable').DataTable({               
-            //     "pageLength": 5,
-            //     "ordering": false,
-            //     "searching": false,
-            //     "info": true,
-            //     "lengthChange": false,
-            //     "columns": [
-            //         { "data": "Id" },
-            //         { "data": "BidPrice" },
-            //         { "data": "CustomerId" }
-            //     ]
-            // });
     });
-
-    function addRowToTable(tableRow) {
-        const table = document.getElementById("bidHistoryTable");
-        const row = table.insertRow();
-
-        const cell1 = row.insertCell();
-        cell1.textContent = tableRow.Id;
-
-        const cell2 = row.insertCell();
-        cell2.textContent = tableRow.BidPrice;
-
-        const cell3 = row.insertCell();
-        cell3.textContent = tableRow.CustomerId;
-
-    }
-
-    function reloadOnUpdate() {
-        location.reload()
-    }
 </script>
 
 

Nop.Plugin.Misc.AuctionPlugin/Views/Product/_ProductSpecifications.cshtml

@@ -1,73 +0,0 @@
-@model ProductSpecificationModel
-
-@using Nop.Core.Domain.Catalog;
-@using Nop.Web.Models.Catalog
-
-@if (Model.Groups.SelectMany(g => g.Attributes).ToList().Count > 0)
-{
-    <div class="product-specs-box">
-        <div class="title">
-            <strong>@T("Products.Specs")</strong>
-        </div>
-        <div class="table-wrapper">
-            <table class="data-table table-responsive">
-                @* <thead>
-                    <tr class="hidden-row">
-                        <th width="25%"><span>@T("Products.Specs.AttributeName")</span></th>
-                        <th><span>@T("Products.Specs.AttributeValue")</span></th>
-                    </tr>
-                </thead> *@
-                <tbody>
-                    @foreach (var group in Model.Groups)
-                    {
-                        @if (group.Attributes.Count > 0)
-                        {
-                            @if (group.Id > 0)
-                            {
-                                <tr class="spec-header">
-                                    <td class="spec-group-name" colspan="2">
-                                        @group.Name
-                                    </td>
-                                </tr>
-                            }
-
-                            @for (int i = 0; i < group.Attributes.Count; i++)
-                            {
-                                var attr = group.Attributes[i];
-
-                                <tr @(i % 2 == 0 ? Html.Raw(" class=\"odd\"") : Html.Raw(" class=\"even\""))>
-                                    <td class="spec-name">
-                                        @attr.Name
-                                    </td>
-                                    <td class="spec-value">
-                                        @for (int j = 0; j < attr.Values.Count; j++)
-                                        {
-                                            var value = attr.Values[j];
-
-                                            @if (!string.IsNullOrEmpty(value.ColorSquaresRgb) && (value.AttributeTypeId == (int)SpecificationAttributeType.Option))
-                                            {
-                                                <div class="attribute-squares color-squares attribute-squares-padding">
-                                                    <span class="attribute-square-container" title="@Html.Raw(value.ValueRaw)">
-                                                        <span class="attribute-square" style="background-color: @(value.ColorSquaresRgb);">&nbsp;</span>
-                                                    </span>
-                                                </div>
-                                            }
-                                            else
-                                            {
-                                                @Html.Raw(value.ValueRaw)
-                                                if (j != attr.Values.Count - 1)
-                                                {
-                                                    <text>,&nbsp;</text>
-                                                }
-                                            }
-                                        }
-                                    </td>
-                                </tr>
-                            }
-                        }
-                    }
-                </tbody>
-            </table>
-        </div>
-    </div>
-}