Garage 2.0

qbcore-framework · Oct 31, 2023 · 8c9299f · 8c9299f
1 parent af46da4
commit 8c9299f
Show file tree

Hide file tree

Showing 28 changed files with 1,909 additions and 1,997 deletions.
diff --git a/client/main.lua b/client/main.lua
diff --git a/config.lua b/config.lua
diff --git a/database.sql b/database.sql
diff --git a/fxmanifest.lua b/fxmanifest.lua
@@ -1,8 +1,8 @@
 fx_version 'cerulean'
 game 'gta5'
-
+lua54 'yes'
 description 'QB-Garages'
-version '1.2.1'
+version '2.0.0'
 
 shared_scripts {
     'config.lua',
@@ -13,7 +13,7 @@ shared_scripts {
 
 client_scripts {
     '@PolyZone/client.lua',
-    '@PolyZone/BoxZone.lua',
+    '@PolyZone/CircleZone.lua',
     '@PolyZone/ComboZone.lua',
     'client/main.lua',
 }
@@ -23,4 +23,11 @@ server_scripts {
     'server/main.lua'
 }
 
-lua54 'yes'
+ui_page 'html/index.html'
+
+files {
+    'html/index.html',
+    'html/script.js',
+    'html/style.css',
+    'html/logo.png',
+}
diff --git a/html/index.html b/html/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Garage UI</title>
+        <link rel="stylesheet" href="style.css" />
+    </head>
+
+    <body>
+        <div class="container">
+            <div class="header">
+                <div class="garage-header" id="garage-header">Legion Square</div>
+                <img src="logo.png" id="garage-logo" alt="Garage Logo" class="garage-logo" />
+            </div>
+            <div class="vehicle-table" id="vehicle-container"></div>
+        </div>
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/html/logo.png b/html/logo.png
diff --git a/html/script.js b/html/script.js
@@ -0,0 +1,260 @@
+window.addEventListener("message", function (event) {
+    const data = event.data;
+    if (data.action === "VehicleList") {
+        const garageLabel = data.garageLabel;
+        const vehicles = data.vehicles;
+        populateVehicleList(garageLabel, vehicles);
+        displayUI();
+    }
+});
+
+document.addEventListener("keydown", function (event) {
+    if (event.key === "Escape") {
+        closeGarageMenu();
+    }
+});
+
+function closeGarageMenu() {
+    const container = document.querySelector(".container");
+    container.style.display = "none";
+
+    fetch("https://qb-garages/closeGarage", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+        },
+        body: JSON.stringify({}),
+    })
+        .then((response) => response.json())
+        .then((data) => {
+            if (data === "ok") {
+                return;
+            } else {
+                console.error("Failed to close Garage UI");
+            }
+        });
+}
+
+function displayUI() {
+    const container = document.querySelector(".container");
+    container.style.display = "block";
+}
+
+function populateVehicleList(garageLabel, vehicles) {
+    const vehicleContainerElem = document.querySelector(".vehicle-table");
+    const fragment = document.createDocumentFragment();
+
+    while (vehicleContainerElem.firstChild) {
+        vehicleContainerElem.removeChild(vehicleContainerElem.firstChild);
+    }
+
+    const garageHeader = document.getElementById("garage-header");
+    garageHeader.textContent = garageLabel;
+
+    vehicles.forEach((v) => {
+        const vehicleItem = document.createElement("div");
+        vehicleItem.classList.add("vehicle-item");
+
+        // Vehicle Info: Name, Plate & Mileage
+        const vehicleInfo = document.createElement("div");
+        vehicleInfo.classList.add("vehicle-info");
+
+        const vehicleName = document.createElement("span");
+        vehicleName.classList.add("vehicle-name");
+        vehicleName.textContent = v.vehicleLabel;
+        vehicleInfo.appendChild(vehicleName);
+
+        const plate = document.createElement("span");
+        plate.classList.add("plate");
+        plate.textContent = v.plate;
+        vehicleInfo.appendChild(plate);
+
+        const mileage = document.createElement("span");
+        mileage.classList.add("mileage");
+        mileage.textContent = `${v.distance}mi`;
+        vehicleInfo.appendChild(mileage);
+
+        vehicleItem.appendChild(vehicleInfo);
+
+        // Finance Info
+        const financeDriveContainer = document.createElement("div");
+        financeDriveContainer.classList.add("finance-drive-container");
+        const financeInfo = document.createElement("div");
+        financeInfo.classList.add("finance-info");
+
+        if (v.balance && v.balance > 0) {
+            financeInfo.textContent = "Balance: $" + v.balance.toFixed(0);
+        } else {
+            financeInfo.textContent = "Paid Off";
+        }
+
+        financeDriveContainer.appendChild(financeInfo);
+
+        // Drive Button
+        let status;
+        let isDepotPrice = false;
+
+        if (v.state === 0) {
+            if (v.depotPrice && v.depotPrice > 0) {
+                isDepotPrice = true;
+
+                if (v.type === "public") {
+                    status = "Depot";
+                } else if (v.type === "depot") {
+                    status = "$" + v.depotPrice.toFixed(0);
+                } else {
+                    status = "Out";
+                }
+            } else {
+                status = "Out";
+            }
+        } else if (v.state === 1) {
+            if (v.depotPrice && v.depotPrice > 0) {
+                isDepotPrice = true;
+
+                if (v.type === "depot") {
+                    status = "$" + v.depotPrice.toFixed(0);
+                } else if (v.type === "public") {
+                    status = "Depot";
+                } else {
+                    status = "Drive";
+                }
+            } else {
+                status = "Drive";
+            }
+        } else if (v.state === 2) {
+            status = "Impound";
+        }
+
+        const driveButton = document.createElement("button");
+        driveButton.classList.add("drive-btn");
+        driveButton.textContent = status;
+
+        if (status === "Depot" || status === "Impound") {
+            driveButton.style.backgroundColor = "#222";
+            driveButton.disabled = true;
+        }
+
+        if (status === "Out") {
+            driveButton.style.backgroundColor = "#222";
+        }
+
+        driveButton.onclick = function () {
+            if (driveButton.disabled) return;
+
+            const vehicleStats = {
+                fuel: v.fuel,
+                engine: v.engine,
+                body: v.body,
+            };
+
+            const vehicleData = {
+                vehicle: v.vehicle,
+                garage: v.garage,
+                index: v.index,
+                plate: v.plate,
+                type: v.type,
+                depotPrice: v.depotPrice,
+                stats: vehicleStats,
+            };
+
+            if (status === "Out") {
+                fetch("https://qb-garages/trackVehicle", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json; charset=UTF-8",
+                    },
+                    body: JSON.stringify(v.plate),
+                })
+                    .then((response) => response.json())
+                    .then((data) => {
+                        if (data === "ok") {
+                            closeGarageMenu();
+                        } else {
+                            return;
+                        }
+                    });
+            } else if (isDepotPrice) {
+                fetch("https://qb-garages/takeOutDepo", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json; charset=UTF-8",
+                    },
+                    body: JSON.stringify(vehicleData),
+                })
+                    .then((response) => response.json())
+                    .then((data) => {
+                        if (data === "ok") {
+                            closeGarageMenu();
+                        } else {
+                            console.error("Failed to pay depot price.");
+                        }
+                    });
+            } else {
+                fetch("https://qb-garages/takeOutVehicle", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json; charset=UTF-8",
+                    },
+                    body: JSON.stringify(vehicleData),
+                })
+                    .then((response) => response.json())
+                    .then((data) => {
+                        if (data === "ok") {
+                            closeGarageMenu();
+                        } else {
+                            console.error("Failed to close Garage UI.");
+                        }
+                    });
+            }
+        };
+
+        financeDriveContainer.appendChild(driveButton);
+        vehicleItem.appendChild(financeDriveContainer);
+
+        // Progress Bars: Fuel, Engine, Body
+        const stats = document.createElement("div");
+        stats.classList.add("stats");
+
+        const maxValues = {
+            fuel: 100,
+            engine: 1000,
+            body: 1000,
+        };
+
+        ["fuel", "engine", "body"].forEach((statLabel) => {
+            const stat = document.createElement("div");
+            stat.classList.add("stat");
+            const label = document.createElement("div");
+            label.classList.add("label");
+            label.textContent = statLabel.charAt(0).toUpperCase() + statLabel.slice(1);
+            stat.appendChild(label);
+            const progressBar = document.createElement("div");
+            progressBar.classList.add("progress-bar");
+            const progress = document.createElement("span");
+            const progressText = document.createElement("span");
+            progressText.classList.add("progress-text");
+            const percentage = (v[statLabel] / maxValues[statLabel]) * 100;
+            progress.style.width = percentage + "%";
+            progressText.textContent = Math.round(percentage) + "%";
+
+            if (percentage >= 75) {
+                progress.classList.add("bar-green");
+            } else if (percentage >= 50) {
+                progress.classList.add("bar-yellow");
+            } else {
+                progress.classList.add("bar-red");
+            }
+
+            progressBar.appendChild(progressText);
+            progressBar.appendChild(progress);
+            stat.appendChild(progressBar);
+            stats.appendChild(stat);
+            vehicleItem.appendChild(stats);
+        });
+
+        fragment.appendChild(vehicleItem);
+    });
+
+    vehicleContainerElem.appendChild(fragment);
+}