livescreen upddates

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

@@ -4,74 +4,95 @@
     const handlers = {
         announcement: function (data) {
             var myObject = JSON.parse(data);
-            toastr.info(`<div class="item announcemantToast">${myObject.message}</div>`, myObject.title, {
+            
-                "closeButton": true,
+            var liveScreen = document.getElementById("auctionProductLiveScreenBox");
-                "positionClass": "toast-bottom-right",
+            if (!liveScreen) {
-                "newestOnTop": true,
+                toastr.info(`<div class="item announcemantToast">${myObject.message}</div>`, myObject.title, {
-                "progressBar": true,
+                    "closeButton": true,
-                "preventDuplicates": false,
+                    "positionClass": "toast-bottom-right",
-                "onclick": null,
+                    "newestOnTop": true,
-                "showDuration": "30000",
+                    "progressBar": true,
-                "hideDuration": "1000",
+                    "preventDuplicates": false,
-                "timeOut": "5000",
+                    "onclick": null,
-                "extendedTimeOut": "1000",
+                    "showDuration": "30000",
-                "showEasing": "swing",
+                    "hideDuration": "1000",
-                "hideEasing": "linear",
+                    "timeOut": "5000",
-                "showMethod": animation,
+                    "extendedTimeOut": "1000",
-                "hideMethod": "fadeOut"
+                    "showEasing": "swing",
-            });
+                    "hideEasing": "linear",
-            $('.toast-info').css("background-color", "#008080");
+                    "showMethod": animation,
+                    "hideMethod": "fadeOut"
+                });
+                $('.toast-info').css("background-color", "#008080");
+            }
+            
         },
         bidNotification: function (data) {
             console.log(data);
-            var myObject = JSON.parse(data);
+            var myObject = JSON.parse(data);            
-            toastr.success(`<div class="item bidToast"><p>${myObject.currentPrice}</p><p>${myObject.productName}</p></div>`, "New bid arrived", {
+            console.log(myObject);
-                "closeButton": true,
-                "positionClass": "toast-bottom-right",
-                "newestOnTop": true,
-                "progressBar": true,
-                "preventDuplicates": false,
-                "onclick": null,
-                "showDuration": "30000",
-                "hideDuration": "1000",
-                "timeOut": "5000",
-                "extendedTimeOut": "1000",
-                "showEasing": "swing",
-                "hideEasing": "linear",
-                "showMethod": animation,
-                "hideMethod": "fadeOut"
-            });
-            $('.toast-success').css("background-color", "#4caf50");
-
             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",
+                    "newestOnTop": true,
+                    "progressBar": true,
+                    "preventDuplicates": false,
+                    "onclick": null,
+                    "showDuration": "30000",
+                    "hideDuration": "1000",
+                    "timeOut": "5000",
+                    "extendedTimeOut": "1000",
+                    "showEasing": "swing",
+                    "hideEasing": "linear",
+                    "showMethod": animation,
+                    "hideMethod": "fadeOut"
+                });
+                $('.toast-success').css("background-color", "#4caf50");
+            }
         },
         ProductToAuctionStatusNotification: function (data) {
 	        console.log(data);
 	        var myObject = JSON.parse(data);
 	        var auctionDto = myObject.auctionDto;
 	        var productToAuctionDto = myObject.auctionDto.productToAuctionDtos[0];
-
+            var publicProductBidBox = document.getElementById("publicProductBidBox");
-	        toastr.success(`<div class="item bidToast"><p>${productToAuctionDto.auctionStatus}</p><p>${productToAuctionDto.id}</p></div>`, "Status changed", {
+            var liveScreen = document.getElementById("auctionProductLiveScreenBox");
-		        "closeButton": true,
+            if (!liveScreen) {
-		        "positionClass": "toast-bottom-right",
+                toastr.success(`<div class="item bidToast"><p>${productToAuctionDto.auctionStatus}</p><p>${productToAuctionDto.id}</p></div>`, "Status changed", {
-		        "newestOnTop": true,
+                    "closeButton": true,
-		        "progressBar": true,
+                    "positionClass": "toast-bottom-right",
-		        "preventDuplicates": false,
+                    "newestOnTop": true,
-		        "onclick": null,
+                    "progressBar": true,
-		        "showDuration": "30000",
+                    "preventDuplicates": false,
-		        "hideDuration": "1000",
+                    "onclick": null,
-		        "timeOut": "5000",
+                    "showDuration": "30000",
-		        "extendedTimeOut": "1000",
+                    "hideDuration": "1000",
-		        "showEasing": "swing",
+                    "timeOut": "5000",
-		        "hideEasing": "linear",
+                    "extendedTimeOut": "1000",
-		        "showMethod": animation,
+                    "showEasing": "swing",
-		        "hideMethod": "fadeOut"
+                    "hideEasing": "linear",
-	        });
+                    "showMethod": animation,
-	        $('.toast-success').css("background-color", "#4caf50");
+                    "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,18 +77,15 @@ public class AuctionController : BasePluginController
     public async Task<IActionResult> LiveScreen(int auctionId)
     {
 
-        var auctionDto = await _auctionService.GetAuctionDtoByIdAsync(auctionId, true);
+        var auctionDto = await _auctionService.GetAuctionDtoWithAuctionBids(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,13 +8,7 @@ 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,6 +27,7 @@
     <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" />
@@ -80,6 +81,11 @@
     <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>
@@ -124,6 +130,9 @@
     <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 class="container-fluid bg-primary" style="height: 100vh;">
+        <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;">
             @RenderBody()
         </div>
     </section>

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

@@ -11,41 +11,17 @@
     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,6 +1,7 @@
 @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;
@@ -14,7 +15,7 @@
     if (Model.IsAnyItemActive)
     {
 
-        <div id="auctionProductLiveScreenBox" class="row py-3">
+        <div class="row py-3">
             <!-- Item Image -->
             <div class="col-lg-4 col-md-6 mb-4">
                 <div class="card border-0">
@@ -23,17 +24,16 @@
                 <div class="card bg-transparent">
                     <div class="card-body">
                         <h5 class="card-title mb-3">Bid History</h5>
-                        <div class="table-responsive">
+                        <div class="table-responsive bg-transparent">
-                            <table id="bidHistoryTable" class="table table-striped bg-transparent">
+                            <table id="bidHistoryTable" class="table-responsive bg-transparent">
-                                <thead>
+                                <thead class="bg-transparent">
                                     <tr>
                                         <th>#</th>
-                                        <th>Bidder</th>
                                         <th>Bid Amount</th>
-                                        <th>Date</th>
+                                        <th>Account</th>
                                     </tr>
                                 </thead>
-                                <tbody>
+                                <tbody class="bg-transparent">
                                     <!-- Dynamic Data Populated by DataTable -->
                                 </tbody>
                             </table>
@@ -44,34 +44,35 @@
             <!-- 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="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>
+                            <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">
-                        <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>
-                        <h3> Item no.: @Model.CurrentProductToAuction.SortIndex </h3>
                         <!-- 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">
-                                <span>Base price</span>
+                                <div>
-                                <span>@(String.Format("{0:c}", Model.BasePrice))</span>
+                                    @await Html.PartialAsync("Product/_ProductSpecifications.cshtml", Model.ActiveProductDetails.ProductSpecificationModel)
+                                </div>
+                                <div>
+                                    <span>Base price</span>
+                                    <span>@(String.Format("{0:c}", Model.BasePrice))</span>
+                                </div>
+                                <div>
+                                    <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">
-                                <span>Actual licit step</span>
-                                <span>@(String.Format("{0:c}", Model.LicitStep))</span>
-                            </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">
@@ -80,9 +81,11 @@
                             </li>
                         </ul>
                     </div>
-                    <div class="card-footer border-0 d-flex justify-content-between align-items-center ">
+                    <div class="card-footer h-50 border-0 align-items-center text-center bg-transparent">
                         <span>Current state price</span>
-                        <h3>@(String.Format("{0:c}", Model.CurrentPrice))</h3>
+                        <h3 style="font-size: 72px;">
+                            @(String.Format("{0:c}", Model.CurrentPrice))
+                        </h3>
 
                     </div>
                 </div>
@@ -94,7 +97,7 @@
         <div class="row mt-4">
             <!-- Bid History Table -->
             <div class="col-12">
-            <h1>@Model.AuctionDto.AuctionName</h1>
+                <h1>@Model.AuctionDto.AuctionName</h1>
             </div>
         </div>
 
@@ -102,25 +105,60 @@
 }
 
 
-
-
 <!-- Initialize DataTable -->
-<script>
+<script asp-location="Footer">
+
     $(document).ready(function () {
-        $('#bidHistoryTable').DataTable({
+
-            "pageLength": 10,
+        liveScreenPageViewModel = @Html.Raw(Json.Serialize(Model));
-            "ordering": true,
+        console.log("ViewModel:", liveScreenPageViewModel);
-            "searching": true,
+
-            "info": true,
+        // Extract and preprocess table data
-            "lengthChange": false,
+        var tableData = liveScreenPageViewModel.CurrentProductToAuction.AuctionBidDtos
-            "columns": [
+            .slice(0, 6) // Get the first 6 elements
-                { "data": "#" },
+            .map(item => ({
-                { "data": "Bidder" },
+                Id: item.Id,
-                { "data": "Bid Amount" },
+                BidPrice: item.BidPrice,
-                { "data": "Date" }
+                CustomerId: item.CustomerId
-            ]
+            }));
+        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

@@ -0,0 +1,73 @@
+@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>
+}