32/12/2023

2023-12-23 10:55:02 +07:00
commit dac87c3a2b
17 changed files with 3036 additions and 0 deletions
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,140 @@
+
+async function goi_sp_tu_api(): Promise<ProductInfo[]> {
+    return new Promise((resolve, reject) => {
+        return resolve(listproduct_mau);
+    })
+}
+
+
+async function hienthi_sp() {
+    const lay_sp_tu_api: ProductInfo[] = await goi_sp_tu_api();
+
+    // code hien thi danh sach dang dien ra
+    // Usage example:
+    showListProductHome(lay_sp_tu_api, 'started', 'js-holder-list-started');
+    showListProductHome(lay_sp_tu_api, 'coming', 'js-holder-list-coming');
+    showListProductHome(lay_sp_tu_api, 'ended', 'js-holder-list-ended');
+}
+
+function showListProductHome(lay_sp_tu_api: ProductInfo[], status: string, holderId: string) {
+    const html: string[] = [];
+    const holder = document.getElementById(holderId);
+
+    lay_sp_tu_api
+        .filter((product: ProductInfo) => product.status == status)
+        .forEach(function (product, keyIndex) {
+            html.push(
+                xayhtml(product)
+            );
+            if (status != 'ended' || product.to_time > product.from_time) {
+                const countdownTime = (status == 'started') ? product.to_time : product.from_time;
+                countDown(`js-deal-time-${product.productId}`, countdownTime);
+            }
+        });
+
+    if (holder) {
+        holder.innerHTML = html.join('');
+    }
+}
+
+function xayhtml(product: ProductInfo) {
+    var Htmlcheckstatus: string = ''
+    if (product.status == 'started') {
+        Htmlcheckstatus = `<div class="deal-time-holder d-flex align-items space-center">
+                    <div class="txt">Còn lại:</div>
+                    <div class="product-time-holder js-deal-time-${product.productId}" data-time="${product.to_time}">
+                    </div>
+                </div>
+                <a href="/auction_program/product-detail.html?id=${product.productId}" class="btn-auction">Đấu giá ngay</a>`;
+    } else if (product.status == 'coming') {
+        Htmlcheckstatus = `<div class="deal-time-holder d-flex align-items space-center">
+                        <div class="txt">Bắt đầu sau:</div>
+                        <div class="product-time-holder js-deal-time-${product.productId}" data-time="${product.from_time}">
+                        </div>
+                    </div>
+                    <a href="/auction_program/product-detail.html?id=${product.productId}" class="btn-auction">Xem chi tiết</a>`;
+    } else if (product.to_time < Date.now()) {
+        Htmlcheckstatus = `<div class="starting-price">Thắng cuộc ${formatPrice(product.starting_price)}<u>đ</u></div>
+<div class="deal-time-holder d-flex align-items space-center end">
+    <div class="txt">Đã kết thúc</div>
+</div>
+<a href="/auction_program/product-detail.html?id=${product.productId}" class="btn-auction">Xem chi tiết</a>`;
+    }
+    return `<div class="product-item">
+                <a href="/product-detail.html?id=${product.productId}" class="product-image">
+                    <img src="${product.image}" alt="${product.product_name}">
+                </a>
+                <div class="info-product">
+                    <a href="" class="product-name line-clamp-2">${product.product_name}</a>
+                    <div class="product-cost">
+                        Giá gốc: ${formatPrice(product.price)}đ
+                    </div>
+                    ${Htmlcheckstatus}
+                </div>
+            </div>
+        `;
+}
+
+function formatPrice(price: number) {
+    var b = price.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
+    var len = b.length;
+    b = b.substring(0, len - 3);
+    return b;
+}
+
+function countDown(iid: string, endTime: number): void {
+
+    const updateCountdown = () => {
+        const now: number = Date.now();
+        const distance: number = endTime - now;
+
+        if (distance > 0) {
+            const [days, hours, minutes, seconds] = getTimeComponents(distance);
+            displayCountdown(iid, days, hours, minutes, seconds);
+        } else {
+            clearInterval(timer);
+        }
+    };
+
+    // Initial update to avoid delay
+    updateCountdown();
+
+    const timer: NodeJS.Timeout = setInterval(updateCountdown, 1000);
+}
+
+function getTimeComponents(distance: number): [number, number, number, number] {
+    const days: number = Math.floor(distance / (1000 * 60 * 60 * 24));
+    const hours: number = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes: number = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds: number = Math.floor((distance % (1000 * 60)) / 1000);
+
+    return [days, hours, minutes, seconds];
+}
+
+function displayCountdown(iid: string, days: number, hours: number, minutes: number, seconds: number): void {
+    const element: HTMLElement | null = document.querySelector(`.${iid}`);
+    if (element) {
+        if (days > 0) {
+            element.innerHTML = `
+            <div class='item-time'><b>${formatTimeComponent(days)}</b></div>
+            <div class='item-time'><b>${formatTimeComponent(hours)}</b></div>
+            <div class='item-time'><b>${formatTimeComponent(minutes)}</b></div>
+            <div class='item-time'><b>${formatTimeComponent(seconds)}</b></div>`;
+        } else {
+            element.innerHTML = `
+            <div class='item-time'><b>${formatTimeComponent(hours)}</b></div>
+            <div class='item-time'><b>${formatTimeComponent(minutes)}</b></div>
+            <div class='item-time'><b>${formatTimeComponent(seconds)}</b></div>`;
+        }
+    }
+}
+
+function formatTimeComponent(component: number): string {
+    return component <= 9 ? '0' + component : component.toString();
+}
+
+
+hienthi_sp();
+
+
+