23:10 27/12/2023

dist/main.js

@@ -0,0 +1,378 @@
+"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();