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

259 lines
10 KiB
Plaintext

@model LiveScreenViewModel
@using Nop.Core.Infrastructure
@using Nop.Web.Framework
@using Nop.Plugin.Misc.AuctionPlugin.Domains.Dtos;
@using System.Web
@{
var defaultGridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().DefaultGridPageSize;
var gridPageSizes = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().GridPageSizes;
Layout = "Auction/LiveScreenRoot.cshtml";
//page title
}
<style>
body{
overflow-y: hidden !important;
}
</style>
@{
if (Model.IsAnyItemActive)
{
<div class="row py-3">
<!-- Item Image -->
<div class="col-lg-3 col-md-4 mb-4" style="height: calc(100vh - 300px);">
<div class="card border-0">
<img src="@Model.ActiveProductDetails.DefaultPictureModel.FullSizeImageUrl" class="card-img-top img-fluid" alt="Auction Item Image">
</div>
<div class="card border-0 bg-transparent">
<div class="card-body" style="max-height:250px; overflow-y: hidden !important;">
<h5 class="card-title mb-3">Bid History</h5>
<div class="table-responsive bg-transparent">
<table id="bidHistoryTable" class="table-responsive bg-transparent">
<thead class="bg-transparent">
<tr>
<th>#</th>
<th>Bid Amount</th>
<th>Account</th>
</tr>
</thead>
<tbody class="bg-transparent">
<!-- Dynamic Data Populated by DataTable -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Item Details -->
<div class="col-lg-9 col-md-8" style="height: calc(100vh - 300px);">
<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>
@{
//TODO: itt nem gond a ProductManufacturers.FirstOrDefault-t? - J.
var productManufacture = Model.ActiveProductDetails.ProductManufacturers?.FirstOrDefault();
if (productManufacture != null)
{
if (!string.IsNullOrEmpty(productManufacture.Name))
{
<h2 class="text-muted mb-3">Created by: <span class="font-weight-bold">@productManufacture.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">
<!-- Item Information -->
<ul class="list-group mb-3 border-0">
<li class="bg-transparent fs-4 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>@($"{Model.BasePrice:c}")</span>
</div>
<div>
<span>Actual licit step</span>
<span id="liveScreenLicitStep">@($"{Model.LicitStep:c}")</span>
</div>
</li>
<li class="bg-transparent border-0 list-group-item fs-5">
<span class="font-weight-bold">Description:</span>
<p class="mb-0 mt-2 text-muted">
@Html.Raw(HttpUtility.HtmlDecode(Model.ActiveProductDetails.FullDescription))
</p>
</li>
</ul>
</div>
<div class="card-footer h-50 border-0 align-items-center text-center bg-transparent">
<span>Current state price</span>
<h3 id="liveScreenCurrentPrice" style="font-size: 72px;">
@($"{Model.CurrentPrice:c}")
</h3>
</div>
</div>
</div>
</div>
<div class="row" style="height:300px;">
<div class="col-3 text-center">
<img src="../../Plugins/Misc.AuctionPlugin/Content/Images/logo.png" class="img-fluid rounded mx-auto p-5 d-block" />
</div>
<div class="col-9 text-center">
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductBoxAddinfoAfter, additionalData = Model.ActiveProductDetails })
</div>
</div>
}
else
{
<div class="row mt-4">
<div class="px-4 pt-5 my-5 text-center">
<h1 class="fs-1">@Model.AuctionDto.AuctionName</h1>
<div class="col-lg-6 mx-auto">
</div>
<div class="" style="max-height: 50vh;">
<div class="container position-absolute top-50 start-50 translate-middle">
<img style="height: 350px; !important" src="../../Plugins/Misc.AuctionPlugin/Content/Images/logo.png" class="img-fluid rounded mx-auto p-5 d-block" />
</div>
</div>
</div>
</div>
}
}
<!-- Initialize DataTable -->
<script asp-location="Footer">
$(document).ready(function () {
var liveScreenPageViewModel = @Html.Raw(Json.Serialize(Model));
console.log("ViewModel:", liveScreenPageViewModel);
let myUserId = liveScreenPageViewModel.UserCustomerId;
// 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) {
var thPageViewModel = @Html.Raw(Json.Serialize(Model));
let myUserId = thPageViewModel.UserCustomerId;
var table = document.getElementById("bidHistoryTable");
var row = table.insertRow();
var cell1 = row.insertCell();
cell1.textContent = "#";
var cell2 = row.insertCell();
cell2.textContent = HUFFormatter.format(tableRow.BidPrice);
if (myUserId != thPageViewModel.CurrentProductToAuction.winnerCustomerId) {
var cell3 = row.insertCell();
cell3.textContent = "Online";
}
else {
var cell3 = row.insertCell();
cell3.textContent = "Offline";
}
}
function reloadOnUpdate() {
location.reload();
}
function updateOnBid(data) {
console.log(data);
let auctionDto = data.auctionDto;
let productToAuction = auctionDto.productToAuctionDtos[0];
var liveScreenPageViewModel = @Html.Raw(Json.Serialize(Model));
console.log("ViewModel:", liveScreenPageViewModel);
let myUserId = liveScreenPageViewModel.UserCustomerId;
var liveScreenLicitStep = document.getElementById("liveScreenLicitStep");
if(liveScreenLicitStep) {
liveScreenLicitStep.textContent = data.nextStepAmount;
}
var liveScreenCurrentPrice = document.getElementById("liveScreenCurrentPrice");
if (liveScreenCurrentPrice) {
liveScreenCurrentPrice.textContent= HUFFormatter.format(productToAuction.currentPrice);
}
if (myUserId != productToAuction.winnerCustomerId) {
//ding
console.log(myUserId + ", " + productToAuction.winnerCustomerId);
var audio = new Audio('../../Plugins/Misc.AuctionPlugin/Content/ding.mp3');
audio.play();
}
console.log(productToAuction);
var table = document.getElementById("bidHistoryTable");
var row = table.insertRow(1);
var cell1 = row.insertCell();
cell1.textContent = "#";
var cell2 = row.insertCell();
cell2.textContent = HUFFormatter.format(productToAuction.currentPrice);
if (myUserId != productToAuction.winnerCustomerId) {
var cell3 = row.insertCell();
cell3.textContent = "Online";
}
else {
var cell3 = row.insertCell();
cell3.textContent = "Offline";
}
}
</script>