Photographer-website/admin.js at main · pallaviprograming02/Photographer-website · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/* admin.js */

(() => {
    const qs = s => document.querySelector(s);
    const qsa = s => Array.from(document.querySelectorAll(s));

    // --- Auth ---
    const loginSection = qs('#loginSection');
    const dashboardSection = qs('#dashboardSection');
    const loginForm = qs('#loginForm');
    const loginError = qs('#loginError');
    const logoutBtn = qs('#logoutBtn');

    // Simple "Session" (clears on refresh for security in this demo, or use sessionStorage)
    let isAdmin = false;

    loginForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const pwd = qs('#password').value;
        if (pwd === 'admin123') { // Simple hardcoded password
            isAdmin = true;
            loginSection.style.display = 'none';
            dashboardSection.style.display = 'block';
            initDashboard();
        } else {
            loginError.textContent = 'Invalid password';
        }
    });

    logoutBtn.addEventListener('click', () => {
        isAdmin = false;
        loginSection.style.display = 'flex';
        dashboardSection.style.display = 'none';
        qs('#password').value = '';
    });

    // --- Dashboard Logic ---

    // Tabs
    const tabs = qsa('.tab-btn');
    const contents = qsa('.tab-content');

    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            tabs.forEach(t => t.classList.remove('active'));
            contents.forEach(c => c.classList.remove('active'));

            tab.classList.add('active');
            const target = qs(`#${tab.dataset.tab}`);
            if (target) target.classList.add('active');
        });
    });

    function initDashboard() {
        renderOrders();
        renderPhotos();
    }

    // --- Orders ---
    const ordersBody = qs('#ordersBody');
    const noOrders = qs('#noOrders');

    function renderOrders() {
        const orders = DataManager.getOrders();
        ordersBody.innerHTML = '';

        if (orders.length === 0) {
            noOrders.style.display = 'block';
            return;
        }
        noOrders.style.display = 'none';

        orders.forEach(order => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
        <td>${order.date || '-'}</td>
        <td>${order.service}</td>
        <td>
          <strong>${order.name}</strong><br>
          <span class="muted" style="font-size:0.8rem">${order.email}</span>
        </td>
        <td>${order.phone}</td>
        <td><span class="status-badge status-${order.status}">${order.status}</span></td>
        <td>
          ${order.status === 'Pending' ? `
            <button class="btn btn-ghost" style="padding: 0.25rem 0.5rem; font-size: 0.8rem; border-color: #10b981; color: #10b981;" onclick="updateStatus(${order.id}, 'Accepted')">✓</button>
            <button class="btn btn-ghost" style="padding: 0.25rem 0.5rem; font-size: 0.8rem; border-color: #ef4444; color: #ef4444;" onclick="updateStatus(${order.id}, 'Rejected')">✕</button>
          ` : ''}
        </td>
      `;
            ordersBody.appendChild(tr);
        });
    }

    // Make available globally for inline onclicks
    window.updateStatus = (id, status) => {
        DataManager.updateOrderStatus(id, status);
        renderOrders();
    };

})();