mua_hang_theo_nhom/dist/main.js

"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
function goi_sp_tu_api() {
    return __awaiter(this, void 0, void 0, function* () {
        return new Promise((resolve, reject) => {
            return resolve(List_product);
        });
    });
}
function goi_sp_user_tu_api() {
    return __awaiter(this, void 0, void 0, function* () {
        return new Promise((resolve, reject) => {
            return resolve(User);
        });
    });
}
function hienthi_nhomsp() {
    return __awaiter(this, void 0, void 0, function* () {
        const lay_sp_user_tu_api = yield goi_sp_user_tu_api();
        console.log(lay_sp_user_tu_api);
        DisplayListProductGroup(lay_sp_user_tu_api, 'js-holder-product-group');
    });
}
function hienthi_sp() {
    return __awaiter(this, void 0, void 0, function* () {
        const lay_sp_tu_api = yield goi_sp_tu_api();
        // code hien thi danh sach dang dien ra
        console.log(lay_sp_tu_api);
        showListProductHome(lay_sp_tu_api, 'out_stock', 'js-holder-list-out-stock');
        showListProductHome(lay_sp_tu_api, 'started', 'js-holder-list-started');
        showListProductHome(lay_sp_tu_api, 'coming', 'js-holder-list-coming');
    });
}
function showListProductHome(lay_sp_tu_api, status, holderId) {
    const html = [];
    const holder = document.getElementById(holderId);
    lay_sp_tu_api
        .filter((product) => product.status == status)
        .forEach(function (product, keyIndex) {
        html.push(xayhtml(product));
        if (status != 'out_stock' && 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) {
    const quantity_sold = product.quantity - product.sale_quantity;
    const line_sold = Math.ceil((quantity_sold / product.quantity) * 100);
    const HtmlSl_nhom = product.quantity > product.quantity_member
        ? `<span class="soluongnhom">${product.quantity / product.quantity_member} nhóm duy nhất</span>`
        : '';
    let HtmlProductItem = '';
    if (product.status === 'started' && product.price > product.sale_quantity) {
        let htmlCheckGroup = '';
        let HtmlListMember = '';
        let htmlBtnProduct = '';
        let addMember = '';
        let noteMember = '';
        if (product.list_group.length > 0) {
            product.list_group.forEach((item) => {
                item.list_member.forEach((user, index) => {
                    var more_qnt_member = product.quantity_member - index - 1;
                    const isLastMember = index > product.quantity_member;
                    console.log(isLastMember);
                    HtmlListMember += `
                        <a href="javascript:void(0)" class="item${isLastMember ? 'add' : ''}">
                            ${formatName(user.name_member)}
                        </a>
                    `;
                    addMember = isLastMember ? `<a href="javascript:void(0)" class="item add">+</a>` : '';
                    noteMember = isLastMember ? `Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> thành viên` : '';
                });
            });
            htmlCheckGroup = `
                <div class="box-price d-flex align-items">
                    <div class="retail_price">${formatPrice(product.retail_price)}đ</div>
                    <del class="price-old">${formatPrice(product.price)}đ</del>
                </div>
                <div class="list-memeber d-flex align-items">
                    <div class="box-memeber d-flex">${HtmlListMember} ${addMember}</div>
                    <div class="note">${noteMember}</div>
                </div>
            `;
            htmlBtnProduct = `
                <a href="javascript:void(0)" class="add-member" onclick="ShowPopupGlobal('AddMember')">
                    <i class="fa fa-plus"></i>
                    Mời thêm bạn
                </a>
            `;
        }
        else {
            htmlCheckGroup = `
                <div class="box-price d-flex align-items">
                    <div class="retail_price">${formatPrice(product.retail_price)}đ</div>
                    <span class="red">Khi mua nhóm ${product.quantity_member} người</span>
                </div>
                <div class="price-banle">Giá bán lẻ: ${formatPrice(product.price)}đ</div>
            `;
            htmlBtnProduct = `
                <a href="javascript:void(0)" class="add-group" onclick="ShowPopupGlobal('AddGroup')">
                    <i class="fa fa-angle-double-right"></i>
                    <span>Tạo nhóm ngay</span>
                    <i class="fa fa-angle-double-left"></i>
                </a>
            `;
        }
        HtmlProductItem = `
            <div class="product-item d-flex">
                <a href="${product.productUrl}" class="product-image">
                    <img src="${product.image}" alt="${product.product_name}">
                    ${HtmlSl_nhom}
                </a>
                <div class="product-info">
                    <a href="${product.productUrl}" class="product-name line-clamp-2">${product.product_name}</a>
                    ${htmlCheckGroup}
                    <div class="box-sold">
                        <i class="icon_2023 hot"></i>
                        <div class="line-deal" style="width: ${line_sold}%;"></div>
                        <span class="quantity-sold">${quantity_sold} đã bán hết</span>
                    </div>
                    <div class="box-button d-flex align-items space-between">
                        <div class="time d-flex align-items">
                            <i class="icon_2023 time"></i>
                            <div class="product-time-holder js-deal-time-${product.productId}" data-time="${product.to_time}"></div>
                        </div>
                        ${htmlBtnProduct}
                    </div>
                </div>
            </div>
        `;
    }
    else if (product.status === 'coming') {
        HtmlProductItem = `
            <div class="product-item d-flex">
                <a href="${product.productUrl}" class="product-image">
                    <img src="${product.image}" alt="${product.product_name}">
                    ${HtmlSl_nhom}
                </a>
                <div class="product-info">
                    <a href="${product.productUrl}" class="product-name line-clamp-2">${product.product_name}</a>
                    <div class="box-price d-flex align-items">
                        <div class="retail_price">${formatPrice(product.retail_price)}đ</div>
                        <span class="red">Khi mua nhóm ${product.quantity_member} người</span>
                    </div>
                    <div class="price-banle">Giá bán lẻ: ${formatPrice(product.price)}đ</div>
                    <div class="box-time d-flex align-items">
                        <i class="icon_2023 time"></i>
                        <div class="product-time-holder js-deal-time-${product.productId}" data-time="${product.from_time}"></div>
                    </div>
                </div>
            </div>
        `;
    }
    else if (product.status === 'out_stock') {
        HtmlProductItem = `
            <div class="product-item d-flex">
                <a href="${product.productUrl}" class="product-image sold">
                    <img src="${product.image}" alt="${product.product_name}">
                    ${HtmlSl_nhom}
                    <span class="icon-sold"></span>
                </a>
                <div class="product-info">
                    <a href="${product.productUrl}" class="product-name line-clamp-2">${product.product_name}</a>
                    <div class="retail_price">${formatPrice(product.retail_price)}</div>
                    <div class="total-group">
                        <i class="icon_2023 group"></i>
                        <span>5 Nhóm mua hàng thành công</span>
                    </div>
                    <div class="box-sold">
                        <i class="icon_2023 hot"></i>
                        <div class="line-deal" style="width: 100%;"></div>
                        <span class="quantity-sold">${product.quantity} đã bán hết</span>
                    </div>
                    <div class="box-time d-flex align-items">
                        <i class="icon_2023 time"></i>
                        <div class="product-time-holder">
                            <b>00</b><b>00</b><b>00</b>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
    else {
        HtmlProductItem = `<div class="d-flex align-items space-center notproduct">Sản phẩm đang được cập nhật..!</div>`;
    }
    return HtmlProductItem;
}
function DisplayListProductGroup(ProductUser, holderId) {
    const html = [];
    const holder = document.getElementById(holderId);
    ProductUser.forEach(function (product, keyIndex) {
        html.push(xayhtmlProductGroup(product));
    });
    if (holder) {
        holder.innerHTML = html.join('');
    }
}
function xayhtmlProductGroup(product) {
    var HtmlProductItem = '';
    var HtmlListMember = '';
    var addMember = '';
    var noteMember = '';
    if (product.list_group.length > 0) {
        product.list_group.forEach((Item) => {
            const quantity_sold = Item.quantity - Item.sale_quantity;
            const line_sold = Math.ceil((Item.quantity - Item.sale_quantity) / Item.quantity * 100);
            var HtmlSl_nhom = '';
            if (Item.quantity > Item.quantity_member) {
                HtmlSl_nhom = `<span class="soluongnhom">${Item.quantity / Item.quantity_member} nhóm duy nhất</span>`;
            }
            Item.list_member.forEach((user, index) => {
                if (index > Item.quantity_member) {
                    HtmlListMember += `
                            <a href="javascript:void(0)" class="item">
                                ${formatName(user.name_member)}
                            </a>
                        `;
                    addMember = ``;
                    noteMember = ``;
                }
                else {
                    var more_qnt_member = Item.quantity_member - index - 1;
                    HtmlListMember += `
                            <a href="javascript:void(0)" class="item">
                                ${formatName(user.name_member)}
                            </a>
                        `;
                    addMember = `
                            <a href="javascript:void(0)" class="item add">
                                +
                            </a>
                        `;
                    noteMember = `
                            Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> thành viên
                        `;
                }
            });
            HtmlProductItem += `
                <div class="product-item d-flex">
                    <a href="${Item.productUrl}" class="product-image">
                        <img src="${Item.product_image}" alt="${Item.product_name}">
                        ${HtmlSl_nhom}
                    </a>
                    <div class="product-info">
                        <a href="${Item.productUrl}" class="product-name line-clamp-2">${Item.product_name}</a>
                        <div class="box-price d-flex align-items">
                            <div class="retail_price">
                                ${formatPrice(Item.retail_price)}đ
                            </div>
                            <del class="price-old">${formatPrice(Item.price)}đ</del>
                        </div>

                        <div class="list-memeber d-flex align-items">
                            <div class="box-memeber d-flex">
                                ${HtmlListMember}${addMember}
                            </div>
                            <div class="note">
                                ${noteMember}
                            </div>
                        </div>

                        <div class="box-sold">
                            <i class="icon_2023 hot"></i>
                            <div class="line-deal" style="width: ${line_sold}%;"></div>
                            <span class="quantity-sold">${quantity_sold} đã bán hết</span>
                        </div>
                        <div class="box-button d-flex align-items space-between">
                            <div class="box-time d-flex align-items">
                                <i class="icon_2023 time"></i>
                                <div class="product-time-holder js-deal-time-${Item.product_id}" data-time="${Item.to_time}">
                                </div>
                            </div>
                            <a href="javascript:void(0)" class="add-member">
                                <i class="fa fa-plus"></i>
                                Mời thêm bạn
                            </a>
                        </div>
                        <div class="note-leader">
                            <i class="icon_2023 bell"></i>
                            <span>${product.leaderEmail} vừa tạo nhóm thành công</span>
                        </div>
                    </div>
                </div>
            `;
        });
    }
    return HtmlProductItem;
}
function closeBackground() {
    var eleBackground = document.getElementById('overlay');
    eleBackground.classList.remove('active');
    var eleGlobalPopup = document.getElementById('js-global-popup');
    eleGlobalPopup.classList.remove('active');
    document.body.classList.remove('active');
}
function copyLink() {
    // Get the pre element
    var preElement = document.getElementById("linkshare");
    // Check if the element exists
    if (preElement) {
        // Create a textarea element
        var textarea = document.createElement("textarea");
        textarea.value = preElement.textContent || "";
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand("copy");
        document.body.removeChild(textarea);
        alert("Copy link share thành công!");
    }
}
// them o nhap email
let emailCounter = 3;
function addEmail() {
    const contentEmail = document.getElementById('list-email-share');
    const newEmailInput = document.createElement('input');
    newEmailInput.type = 'text';
    newEmailInput.id = 'email' + emailCounter;
    newEmailInput.placeholder = 'Email ' + emailCounter;
    contentEmail === null || contentEmail === void 0 ? void 0 : contentEmail.appendChild(newEmailInput);
    emailCounter++;
}
function CountdownJoin() {
    let countdown = 10 * 60;
    const countdownElement = document.getElementById('js-time-join');
    function updateCountdown() {
        const minutes = Math.floor(countdown / 60);
        const seconds = countdown % 60;
        const formattedMinutes = minutes.toString().padStart(2, '0');
        const formattedSeconds = seconds.toString().padStart(2, '0');
        const formattedTime = `<b>${formattedMinutes}</b><b>${formattedSeconds}</b>`;
        if (countdownElement) {
            countdownElement.innerHTML = formattedTime;
        }
    }
    function decrementCountdown() {
        if (countdown > 0) {
            countdown--;
            updateCountdown();
        }
        else {
            clearInterval(intervalId);
            closeBackground();
        }
    }
    updateCountdown();
    const intervalId = setInterval(decrementCountdown, 1000);
}
function ShowPopupGlobal(key) {
    const globalPopup = document.getElementById('js-global-popup');
    globalPopup === null || globalPopup === void 0 ? void 0 : globalPopup.classList.add('active');
    const eleBackground = document.getElementById('overlay');
    eleBackground.classList.add('active');
    document.body.classList.add('active');
    const holderPupop = document.getElementById('js-content-popup');
    if (key == 'AddGroup') {
        holderPupop.innerHTML = AddGroupTemplate;
    }
    else if (key == 'AddMember') {
        holderPupop.innerHTML = ShareGroupTemplate;
    }
}
//  run function
hienthi_sp();
hienthi_nhomsp();
CountdownJoin();