Scripts/resources/[qb]/[qb_shops]/qb-vehiclesales/html/ui.js

var app = new Vue({
    el: "#app",
    data: {
        mode: "",
        bizName: "",
        sellerName: "",
        bankAccount: "",
        phoneNumber: "",
        licensePlate: "",
        vehicleDescription: "",
        sellPrice: "",
        showTakeBackOption: false,
        errors: []
    },
    methods: {
        sell(sellPrice) {
            this.errors = [];
            if (this.sellPrice != "") {
                if (!isNaN(sellPrice)) {
                    const requestOptions = {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({
                            price: this.sellPrice,
                            desc: this.vehicleDescription
                        })
                    };
                    fetch("https://qb-vehiclesales/sellVehicle", requestOptions);
                    this.close();
                } else {
                    this.errors.push("Du må kun bruge tal i salgsprisen.");
                }
            } else {
                this.errors.push("Du skal udfylde salgsprisen.")
            }
        },
        buy() {
            const requestOptions = {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({})
            };
            fetch("https://qb-vehiclesales/buyVehicle", requestOptions);
            this.close();
        },
        takeBack() {
            const requestOptions = {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({})
            };
            fetch("https://qb-vehiclesales/takeVehicleBack", requestOptions);
            this.close();
        },
        close() {
            const requestOptions = {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({})
            };
            fetch("https://qb-vehiclesales/close", requestOptions);

            this.resetForm();
            this.hideForm();

        },
        resetForm() {
            this.sellerName = "";
            this.bankAccount = "";
            this.phoneNumber = "";
            this.licensePlate = "";
            this.vehicleDescription = "";
            this.sellPrice = "";
            this.errors = [];
        },
        hideForm() {
            document.body.style.display = "none";
        }

    },
    computed: {
        tax() {
            return (this.sellPrice / 100 * 19).toFixed(0);
        },
        mosleys() {
            return (this.sellPrice / 100 * 4).toFixed(0);
        },
        total() {
            return (this.sellPrice / 100 * 77).toFixed(0);
        }
    }

});

function setupForm(data) {
    if(data.action === "sellVehicle" || data.action === "buyVehicle") {
        document.body.style.display = "block";
    }

    app.mode = data.action;

    app.showTakeBackOption = data.showTakeBackOption;

    app.bizName = data.bizName;

    app.sellerName = data.sellerData.firstname + " " + data.sellerData.lastname;
    app.bankAccount = data.sellerData.account;
    app.phoneNumber = data.sellerData.phone;
    app.licensePlate = data.plate;

    if (data.action === "buyVehicle") {
        app.vehicleDescription = data.vehicleData.desc;
        app.sellPrice = data.vehicleData.price;
    }
}

document.onreadystatechange = () => {
    if (document.readyState === "complete") {
        window.addEventListener("message", (event) => {
            this.setupForm(event.data);
        });
    }
};

/* Handle escape key press to close the menu */
document.onkeyup = function (data) {
    if (data.key != "Escape") return;

    app.close();
};