livescreen upddates

This commit is contained in:
Adam 2024-11-24 13:48:43 +01:00
parent 36fba42ae7
commit 8df88d9ebf
9 changed files with 252 additions and 144 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 797 KiB

View File

@ -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,
"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-info').css("background-color", "#008080");
var liveScreen = document.getElementById("auctionProductLiveScreenBox");
if (!liveScreen) {
toastr.info(`<div class="item announcemantToast">${myObject.message}</div>`, myObject.title, {
"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-info').css("background-color", "#008080");
}
},
bidNotification: function (data) {
console.log(data);
var myObject = JSON.parse(data);
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");
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",
"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];
toastr.success(`<div class="item bidToast"><p>${productToAuctionDto.auctionStatus}</p><p>${productToAuctionDto.id}</p></div>`, "Status changed", {
"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 (!liveScreen) {
toastr.success(`<div class="item bidToast"><p>${productToAuctionDto.auctionStatus}</p><p>${productToAuctionDto.id}</p></div>`, "Status changed", {
"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");
}
//if (publicProductBidBox) {
// refreshPublicBidBox(myObject);
//}
if (liveScreen) {
reloadOnUpdate();
}
// var publicProductBidBox = document.getElementById("publicProductBidBox");
// if (publicProductBidBox)

View File

@ -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;

View File

@ -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; }

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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">
<table id="bidHistoryTable" class="table table-striped bg-transparent">
<thead>
<div class="table-responsive bg-transparent">
<table id="bidHistoryTable" class="table-responsive bg-transparent">
<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>
<span>@(String.Format("{0:c}", Model.BasePrice))</span>
<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>
<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,
"ordering": true,
"searching": true,
"info": true,
"lengthChange": false,
"columns": [
{ "data": "#" },
{ "data": "Bidder" },
{ "data": "Bid Amount" },
{ "data": "Date" }
]
liveScreenPageViewModel = @Html.Raw(Json.Serialize(Model));
console.log("ViewModel:", liveScreenPageViewModel);
// Extract and preprocess table data
var tableData = liveScreenPageViewModel.CurrentProductToAuction.AuctionBidDtos
.slice(0, 6) // Get the first 6 elements
.map(item => ({
Id: item.Id,
BidPrice: item.BidPrice,
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>

View File

@ -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>
}