ODXProxyClient-PHP-demo/products.php at main · terrakernel/ODXProxyClient-PHP-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Odoo Products</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-white">

<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>📦 Product Inventory</h2>
        <a href="index.php" class="btn btn-outline-secondary">Back to Home</a>
    </div>

    <div id="loading" class="text-center py-5">
        <div class="spinner-border text-primary" role="status"></div>
        <p class="mt-2">Fetching data from Odoo via ODX...</p>
    </div>

    <div id="error-alert" class="alert alert-danger d-none"></div>

    <div class="table-responsive d-none" id="table-container">
        <table class="table table-hover align-middle">
            <thead class="table-dark">
                <tr>
                    <th>Ref</th>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>On Hand</th>
                </tr>
            </thead>
            <tbody id="product-list">
                </tbody>
        </table>
    </div>
</div>

<script>
async function loadProducts() {
    try {
        const response = await fetch('api.php?action=fetchProducts');
        const data = await response.json();

        if (data.error) throw new Error(data.message || 'API Error');

        const list = document.getElementById('product-list');
        list.innerHTML = data.map(p => `
            <tr>
                <td><code class="text-primary">${p.default_code || 'N/A'}</code></td>
                <td><strong>${p.name}</strong></td>
                <td class="text-success fw-bold">$${parseFloat(p.list_price).toFixed(2)}</td>
                <td><span class="badge bg-info text-dark">${p.qty_available || 0}</span></td>
            </tr>
        `).join('');

        document.getElementById('loading').classList.add('d-none');
        document.getElementById('table-container').classList.remove('d-none');
    } catch (err) {
        document.getElementById('loading').classList.add('d-none');
        const errorEl = document.getElementById('error-alert');
        errorEl.textContent = 'Error: ' + err.message;
        errorEl.classList.remove('d-none');
    }
}

// Start loading immediately
loadProducts();
</script>

</body>
</html>