before state inputswithvalue

client/src/modules/cart.ts

@@ -0,0 +1,154 @@
+import * as XMLHelper from "./xmlhelper";
+import { config } from "./config";
+import * as I from "../types/types";
+import * as UI from "./ui";
+import * as Events from "./events";
+
+export function addItem(inSeatObj: I.JSCSelectedSeat, inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) {
+    const color = `#${XMLHelper.getVenuePricescalePropertyByPricescaleID("color", inSeatObj.data.seatsObj.id[0], inVenueXML)}`;
+    const category = XMLHelper.getVenuePricescalePropertyByPricescaleID("desc", inSeatObj.data.seatsObj.id[0], inVenueXML);
+    const seat = config.state.layoutRows[inSeatObj.id][5];
+    const row = config.state.layoutRows[inSeatObj.id][4];
+    const sectionID = config.state.layoutRows[inSeatObj.id][3];
+    const sectionDesc = XMLHelper.getSectionDescBySectionID(inVenueXML, sectionID);
+    const seatStr = `${sectionDesc}<br/>Reihe ${row} Platz ${seat}`;
+    const buyerTypes: (string | undefined)[][] | undefined = getBuyerTypesByPricescaleID(inSeatObj.data.seatsObj.id[0], inVenueXML);
+    const cartId = `cartItem-${inSeatObj.id}`;
+    const dropdownBuyerTypesSelector = `#${cartId} .dropdownBuyerTypes`;
+
+    appendHTML(cartId, color, category, seatStr);
+    addDropdownBuyerTypesOptions(buyerTypes, dropdownBuyerTypesSelector);
+    Events.addCartDropdownBuyerTypes(dropdownBuyerTypesSelector, inSeatObj, inVenueXML, inInputsWithValue);
+}
+
+function appendHTML(inCartId: string, inColor: string, inCategory: string | undefined, inSeatStr: string) {
+    jQuery("#cartItemHTML .fl-html").append(`
+    <div class="cartItem" id="${inCartId}">
+        <div class="cartItemColoredSquare" style="background: ${inColor};"></div>
+        <div class="cartItemCategory">${inCategory}</div>
+        <h5 class="cartItemSeat">${inSeatStr}</h5>
+        <select name="dropdownBuyerTypes" class="dropdownBuyerTypes"></select>
+    </div>`);
+}
+
+// todo: generalize dropdown fill options
+function addDropdownBuyerTypesOptions(inBuyerTypes: (string | undefined)[][] | undefined, inSelector: string) {
+    if (!inBuyerTypes)
+        return;
+
+    const dropdownBuyerTypes = jQuery(inSelector).get(0);
+
+    inBuyerTypes.forEach(arr => {
+        if (!arr[0])
+            return;
+
+        let opt = document.createElement('option');
+        opt.value = arr[0];
+        opt.innerHTML = `${arr[2]} €${arr[1]}`;
+        dropdownBuyerTypes.appendChild(opt);
+    });
+}
+
+// function appendOptionDropdownBuyerTypesOptions() {
+//     let opt = document.createElement('option');
+//     opt.value = arr[0];
+//     opt.innerHTML = `${arr[2]} €${arr[1]}`;
+//     dropdownBuyerTypes.appendChild(opt);
+// }
+
+function getBuyerTypesByPricescaleID(inPricescaleID: string, inVenueXML: I.VenueXML) {
+    const venuePricescaleArr = inVenueXML.price_structure[0].pricescale;
+    const buyerTypesArr = venuePricescaleArr.find(obj => {
+        return obj.id[0] === inPricescaleID;
+    })?.buyer_type;
+
+    if (!buyerTypesArr)
+        return;
+
+    const buyerTypes: (string | undefined)[][] = buyerTypesArr.map(arr => {
+        const buyerTypeDesc = inVenueXML.venue[0].buyer_types[0].buyer_type.find(obj => {
+            return obj.id[0] === arr.id[0] ? obj.desc[0] : undefined;
+        })?.desc[0];
+
+        return [arr.id[0], arr.price[0], buyerTypeDesc];
+    });
+
+    return buyerTypes;
+}
+
+export function removeCartItems() {
+    jQuery("#cartItemHTML .cartItem").each(function () {
+        this.remove();
+    });
+}
+
+export function changedDropdownBuyerType(inSelect: HTMLSelectElement, inSeatObj: I.JSCSelectedSeat, inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) {
+    const index = config.state.selectedSeatsArr.findIndex(arr => {
+        return arr[0] === inSeatObj.id;
+    });
+
+    config.state.selectedSeatsArr[index][1] = inSelect.value;
+
+    const buyerTypeCode = XMLHelper.getBuyerTypeCodeByBuyerTypeID(inVenueXML, inSelect.value);
+
+    if (buyerTypeCode)
+        config.state.selectedSeatsArr[index][2] = buyerTypeCode;
+
+    calcOverallPrice(inVenueXML);
+    UI.setBtnCartText();
+
+    const url = XMLHelper.generateCheckoutUrl(inInputsWithValue);
+    console.log(url);
+    Events.addRedirectCheckout(url);
+
+    console.log(config.state);
+}
+
+export function calcOverallPrice(inVenueXML: I.VenueXML): string | undefined {
+    if (!config.state.selectedSeatsArr.length) {
+        config.state.priceOverall = "0";
+        return "0";
+    }
+
+    let overallPrice: number = 0;
+
+    config.state.selectedSeatsArr.forEach(arr => {
+        const seatID: string = arr[0];
+        const buyertypeID: string = arr[1];
+        const selectedSeat: I.JSCSelectedSeat = config.state.selectedSeatsObj[seatID];
+        const pricescaleID: string = selectedSeat.data.seatsObj.id[0];
+        const pricescaleObj: I.Pricescale5 | undefined = XMLHelper.getVenuePriceStructurePropertyByPricescaleID(inVenueXML, pricescaleID);
+
+        if (!pricescaleObj)
+            return;
+
+        const seatPrice: number | undefined = XMLHelper.getPriceByBuyertypeID(buyertypeID, pricescaleObj);
+
+        if (!seatPrice)
+            return;
+
+        overallPrice += seatPrice;
+    });
+
+    config.state.priceOverall = overallPrice.toFixed(2);
+
+    return config.state.priceOverall;
+}
+
+export function generateCartItems(inVenueXML: I.VenueXML, inInputsWithValue: I.InputsWithValue) {
+    if (!config.state.selectedSeatsArr.length)
+        return;
+
+    for (const key in config.state.selectedSeatsObj) {
+        if (Object.prototype.hasOwnProperty.call(config.state.selectedSeatsObj, key)) {
+            const element = config.state.selectedSeatsObj[key];
+            addItem(element, inVenueXML, inInputsWithValue);
+        }
+    }
+}
+
+export function initModalCart() {
+    jQuery("#modalCart-overlay").hide();
+    Events.addCartBack();
+    Events.addCartClose();
+}