This commit is contained in:
Loretta 2024-11-19 17:33:47 +01:00
commit ae63aa8edc
5 changed files with 110 additions and 83 deletions

View File

@ -127,9 +127,12 @@ public class AuctionPublicViewComponent : NopViewComponent
auctionId = valami.Id; auctionId = valami.Id;
} }
var productToAuctionId = await _auctionService.GetProductToAuctionByAuctionIdAndProductIdAsync(auctionId, productDetailsModel.Id);
productBidBoxViewModel.WidgetZone = widgetZone; productBidBoxViewModel.WidgetZone = widgetZone;
productBidBoxViewModel.BasePrice = productDetailsModel.ProductPrice.OldPriceValue; productBidBoxViewModel.BasePrice = productDetailsModel.ProductPrice.OldPriceValue;
productBidBoxViewModel.CurrentPrice = productDetailsModel.ProductPrice.PriceValue; productBidBoxViewModel.CurrentPrice = productDetailsModel.ProductPrice.PriceValue;
productBidBoxViewModel.ProductToAuctionId = productToAuctionId.FirstOrDefault().Id;
productBidBoxViewModel.AuctionId = auctionId; productBidBoxViewModel.AuctionId = auctionId;
productBidBoxViewModel.CustomerId = customer.Id; productBidBoxViewModel.CustomerId = customer.Id;
productBidBoxViewModel.ProductId = productDetailsModel.Id; productBidBoxViewModel.ProductId = productDetailsModel.Id;

View File

@ -39,9 +39,16 @@
"hideMethod": "fadeOut" "hideMethod": "fadeOut"
}); });
$('.toast-success').css("background-color", "#4caf50"); $('.toast-success').css("background-color", "#4caf50");
const publicProductBidBox = document.getElementById("publicProductBidBox");
if (publicProductBidBox) {
refreshPublicBidBox(data);
}
}, },
auctionUpdateAlternate: function (data) { auctionUpdateAlternate: function (data) {
const widgetPriceElement = document.getElementById("WidgetPrice"); const widgetPriceElement = document.getElementById("WidgetPrice");
if (widgetPriceElement) { if (widgetPriceElement) {
widgetPriceElement.textContent = data.bidPrice; // Update the price widgetPriceElement.textContent = data.bidPrice; // Update the price
console.log(`WidgetPrice updated to: ${data.bidPrice}`); console.log(`WidgetPrice updated to: ${data.bidPrice}`);
@ -49,20 +56,25 @@
console.warn("Element with ID 'WidgetPrice' not found in the DOM."); console.warn("Element with ID 'WidgetPrice' not found in the DOM.");
} }
}, },
auctionUpdate: function (data) { //auctionUpdate: function (data) {
// Refresh the ViewComponent using AJAX // // Refresh the ViewComponent using AJAX
$.ajax({ // $.ajax({
url: '/Auction/RefreshAuctionWidget', // Controller endpoint // url: '/Auction/RefreshAuctionWidget', // Controller endpoint
method: 'GET', // type: 'POST',
success: function (response) { // contentType: 'application/json',
//$('#auction-widget').html(response); // Update the DOM element // data: JSON.stringify({
console.log("Auction widget refreshed!"); // WidgetZone: data.WidgetZone,
}, // ProductId: data.ProductId
error: function (error) { // }),
console.error("Error refreshing auction widget:", error); // success: function (response) {
} // //$('#auction-widget').html(response); // Update the DOM element
}); // console.log("Auction widget refreshed!");
}, // },
// error: function (error) {
// console.error("Error refreshing auction widget:", error);
// }
// });
//},
// Add more handlers as needed // Add more handlers as needed
default: function (data) { default: function (data) {

View File

@ -6,6 +6,11 @@ using System.Threading.Tasks;
namespace Nop.Plugin.Misc.AuctionPlugin.Hubs.Messages namespace Nop.Plugin.Misc.AuctionPlugin.Hubs.Messages
{ {
/// <summary>
/// this message sends update to the clients. so it sends current (the already winner) price,
/// sends the ACTUAL bidstep, so the new price, and next bid can be calculated on the client side
/// </summary>
public class BidNotificationMessage public class BidNotificationMessage
{ {
public string ProductName { get; set; } public string ProductName { get; set; }

View File

@ -9,6 +9,7 @@ namespace Nop.Plugin.Misc.AuctionPlugin.Models
{ {
public record ProductBidBoxViewModel: BaseNopModel public record ProductBidBoxViewModel: BaseNopModel
{ {
public int ProductToAuctionId { get; set; }
public int AuctionId { get; set; } public int AuctionId { get; set; }
public int ProductId { get; set; } public int ProductId { get; set; }
public int CustomerId { get; set; } public int CustomerId { get; set; }

View File

@ -2,7 +2,11 @@
@inject IJsonHelper JsonHelper; @inject IJsonHelper JsonHelper;
@* @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(myObj) as String) *@ @* @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(myObj) as String) *@
<div class="bg-dark p-3">
<style>
</style>
<div id="publicProductBidBox" class="bg-dark p-3">
<div class="d-flex justify-content-between mb-3"> <div class="d-flex justify-content-between mb-3">
<div> <div>
@ -11,78 +15,70 @@
@String.Format("{0:c}", Model.BasePrice) @String.Format("{0:c}", Model.BasePrice)
@* @(decimal?.Round(Model.BasePrice, 2, MidpointRounding.AwayFromZero)) *@ @* @(decimal?.Round(Model.BasePrice, 2, MidpointRounding.AwayFromZero)) *@
</span> </span>
</div> </div>
<div>
<strong>Current Price:</strong>
<span class="value">
@String.Format("{0:c}", Model.CurrentPrice)
@* @(decimal?.Round(Model.CurrentPrice, 2, MidpointRounding.AwayFromZero)) *@
</span>
</div>
<div> <div>
<strong>Bid Step:</strong> <strong>Bid Step:</strong>
<span class="value">@String.Format("{0:c}", Model.LicitStep)</span> <span class="value">@String.Format("{0:c}", Model.LicitStep)</span>
</div> </div>
<div> <div>
<button id="bidButton" class="btn btn-success"> <button id="signalRBidButton" class="btn btn-success">
@* Bid @(decimal?.Round(@Model.BidPrice, 2, MidpointRounding.AwayFromZero)) *@
Bid @String.Format("{0:c}", Model.BidPrice) Bid @String.Format("{0:c}", Model.BidPrice)
</button> </button>
@* <button id="bidButton" class="btn btn-success">
Bid @String.Format("{0:c}", Model.BidPrice)
</button> *@
</div> </div>
</div> </div>
<button id="signalRBidButton" class="btn btn-success">
SignalRBidButton
</button>
<button id="testButton" class="btn btn-success"> @* <button id="testButton" class="btn btn-success">
TestButton TestButton
</button> </button> *@
<div id="bidFeedback" class="mt-3"></div> <div id="bidFeedback" class="mt-3"></div>
</div> </div>
<script> <script>
var pageViewModel = undefined;
$(document).ready(function () { $(document).ready(function () {
pageViewModel = @Html.Raw(Json.Serialize(Model));
var pageViewModel = @Html.Raw(Json.Serialize(Model));
console.log(pageViewModel); console.log(pageViewModel);
console.log(pageViewModel.WidgetZone); console.log(pageViewModel.WidgetZone);
console.log(typeof sendMessageToServer); console.log(typeof sendMessageToServer);
$('#bidButton').click(function () { // $('#bidButton').click(function () {
const bidPrice = $('#bidPrice').val(); // const bidPrice = $('#bidPrice').val();
// Validate bid price // // Validate bid price
if (!bidPrice || parseInt(bidPrice) < @Model.CurrentPrice + @Model.LicitStep) { // if (!bidPrice || parseInt(bidPrice) < @Model.CurrentPrice + @Model.LicitStep) {
$('#bidFeedback').text('Bid price must be at least the current price plus the licit step.') // $('#bidFeedback').text('Bid price must be at least the current price plus the licit step.')
.addClass('text-danger'); // .addClass('text-danger');
return; // return;
} // }
// AJAX POST to send the bid // // AJAX POST to send the bid
$.ajax({ // $.ajax({
url: '/Auction/PlaceBid', // Ensure this endpoint exists in your controller // url: '/Auction/PlaceBid', // Ensure this endpoint exists in your controller
type: 'POST', // type: 'POST',
contentType: 'application/json', // contentType: 'application/json',
data: JSON.stringify({ // data: JSON.stringify({
auctionId: pageViewModel.AuctionId, // auctionId: pageViewModel.AuctionId,
bidPrice: bidPrice, // bidPrice: bidPrice,
customerId: dataObject.CustomerId, // customerId: dataObject.CustomerId,
productId: dataObject.ProductId // productId: dataObject.ProductId
}), // }),
success: function (response) { // success: function (response) {
$('#bidFeedback').text(response.message).removeClass('text-danger').addClass('text-success'); // $('#bidFeedback').text(response.message).removeClass('text-danger').addClass('text-success');
}, // },
error: function (xhr) { // error: function (xhr) {
$('#bidFeedback').text('Failed to place bid: ' + xhr.responseText) // $('#bidFeedback').text('Failed to place bid: ' + xhr.responseText)
.addClass('text-danger'); // .addClass('text-danger');
} // }
}); // });
}); // });
$("#signalRBidButton").on("click", function () { $("#signalRBidButton").on("click", function () {
var bidMessage = { var bidMessage = {
@ -93,32 +89,42 @@
}; };
sendMessageToServer("BidRequestMessage", bidMessage); sendMessageToServer("BidRequestMessage", bidMessage);
}); });
$('#testButton').click(function () {
$.ajax({
url: '/Auction/RefreshAuctionWidget', // Controller endpoint
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
WidgetZone: pageViewModel.WidgetZone,
ProductId: pageViewModel.ProductId
}),
success: function (response) {
//$('#auction-widget').html(response); // Update the DOM element
console.log("Auction widget refreshed!");
},
error: function (error) {
console.error("Error refreshing auction widget:", error);
}
});
});
}); });
function refreshPublicBidBox(data) {
// $.ajax({
// url: '/Auction/RefreshAuctionWidget', // Controller endpoint
// type: 'POST',
// contentType: 'application/json',
// data: JSON.stringify({
// WidgetZone: pageViewModel.WidgetZone,
// ProductId: pageViewModel.ProductId
// }),
// success: function (response) {
// //$('#auction-widget').html(response); // Update the DOM element
// console.log("Auction widget refreshed!");
// },
// error: function (error) {
// console.error("Error refreshing auction widget:", error);
// }
// });
const widgetPriceElement = document.getElementById("price-value-"+pageViewModel.ProductId);
const budButtonelement = document.getElementById("signalRBidButton");
if (widgetPriceElement) {
widgetPriceElement.textContent = data.bidPrice; // Update the price
budButtonElement.textContent = data.bidPrice + data.nextStep;
console.log(`WidgetPrice updated to: ${data.bidPrice}`);
} else {
console.warn("Element with ID 'WidgetPrice' not found in the DOM.");
}
}
</script> </script>