Embed

<div style="max-width:900px; margin:0 auto; padding:20px; font-family:Arial;">
  <h1 style="font-size:28px; margin-bottom:15px;">Garage Admin</h1>
  <p>Manage your vehicle list for the 4-wheel alignment estimator.</p>

  <hr style="margin:20px 0;">

  <h2>Add / Edit Vehicle</h2>

  <form id="vehicleForm" style="display:grid; grid-template-columns:1fr 1fr; gap:15px;">
    <div>
      <label>Vehicle Make</label>
      <input id="name" required style="width:100%; padding:8px; margin-top:4px;">
    </div>

    <div>
      <label>Base Price (£)</label>
      <input id="price" type="number" required style="width:100%; padding:8px; margin-top:4px;">
    </div>

    <div style="grid-column: span 2;">
      <button type="submit" style="padding:10px 20px;">Save</button>
      <button id="resetBtn" type="button" style="padding:10px 20px; margin-left:10px;">Reset</button>
    </div>
  </form>

  <hr style="margin:20px 0;">

  <h2>Vehicle List</h2>
  <table border="1" cellpadding="10" width="100%">
    <thead>
      <tr>
        <th>Make</th>
        <th>Price</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody id="vehicleTable"></tbody>
  </table>
</div>

<script type="module">
  // ------------------------------
  // 1. Firebase SDK Imports
  // ------------------------------
  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
  import {
    getFirestore,
    collection,
    addDoc,
    getDocs,
    updateDoc,
    deleteDoc,
    doc
  } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js";

  // ------------------------------
  // 2. Your Firebase Config
  // ------------------------------
  const firebaseConfig = {
    apiKey: "AIzaSyBDGA12JyqJEBFmChu_V63VqkzULkMpCxI",
    authDomain: "wheel-alignment-18a47.firebaseapp.com",
    projectId: "wheel-alignment-18a47",
    storageBucket: "wheel-alignment-18a47.appspot.com",
    messagingSenderId: "6872046246",
    appId: "1:6872046246:web:72b88b48a70dc848897267"
  };

  // ------------------------------
  // 3. Init Firebase
  // ------------------------------
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);
  const vehicleRef = collection(db, "vehicles");

  // Track which ID is being edited
  let editId = null;

  // ------------------------------
  // 4. Submit (Add or Update)
  // ------------------------------
  document.getElementById("vehicleForm").addEventListener("submit", async (e) => {
    e.preventDefault();

    const name = document.getElementById("name").value.trim();
    const price = Number(document.getElementById("price").value);

    if (!name || !price) {
      alert("Please enter vehicle make and price.");
      return;
    }

    if (editId) {
      await updateDoc(doc(db, "vehicles", editId), {
        name,
        price
      });
      editId = null;
    } else {
      await addDoc(vehicleRef, {
        name,
        price
      });
    }

    document.getElementById("vehicleForm").reset();
    loadVehicles();
  });

  // ------------------------------
  // 5. Load All Vehicles
  // ------------------------------
  async function loadVehicles() {
    const snapshot = await getDocs(vehicleRef);
    const table = document.getElementById("vehicleTable");
    table.innerHTML = "";

    snapshot.forEach(docSnap => {
      const v = docSnap.data();
      const row = document.createElement("tr");

      row.innerHTML = `
        <td>${v.name}</td>
        <td>£${v.price}</td>
        <td>
          <button onclick="editVehicle('${docSnap.id}', '${v.name}', '${v.price}')">Edit</button>
          <button onclick="deleteVehicle('${docSnap.id}')">Delete</button>
        </td>
      `;

      table.appendChild(row);
    });
  }

  // ------------------------------
  // 6. Edit
  // ------------------------------
  window.editVehicle = (id, name, price) => {
    editId = id;
    document.getElementById("name").value = name;
    document.getElementById("price").value = price;
  };

  // ------------------------------
  // 7. Delete
  // ------------------------------
  window.deleteVehicle = async (id) => {
    if (!confirm("Are you sure you want to delete this vehicle?")) return;
    await deleteDoc(doc(db, "vehicles", id));
    loadVehicles();
  };

  // ------------------------------
  // 8. Reset Button
  // ------------------------------
  document.getElementById("resetBtn").addEventListener("click", () => {
    editId = null;
    document.getElementById("vehicleForm").reset();
  });

  // Initial load
  loadVehicles();
</script>


Wheel Alignment and Balljoint Centre Ltd

We specialise in the following services in Liverpool UK :

1. Computerised 3D 4 Wheel alignment on the latest Hunter machine. 
2. We are also an 100% Impartial, Test-Only MOT Centre on class 4 , 5 and 7 vehicles.
3. We specialise in Digital ADAS calibration and module coding.