Ecobuddy/Views/index.phtml

<?php 
/**
 * Main index view for the EcoBuddy application
 * 
 * This file serves as the main view for the application, displaying
 * a table of facilities with various actions depending on the user's
 * access level. It includes modals for creating, updating, deleting,
 * and viewing statuses of facilities.
 * 
 * The table is populated dynamically using JavaScript, with the data
 * stored in sessionStorage.
 */
require('template/header.phtml') 
?>

<div class="row">
    <div class="col-12 p-0" id="facilityContent">
        <!-- Main content -->
        <div class="card shadow-sm border-0 rounded-3">
            <!-- Title and add button (admins only) -->
            <div class="card-header bg-light py-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <h5 class="mb-0 fw-bold text-primary">
                            <i class="bi bi-geo-alt-fill me-2 text-success"></i>Facilities
                        </h5>
                        <!-- Badge showing the number of facilities -->
                        <span class="badge bg-success rounded-pill ms-2" id="facilityCount"></span>
                    </div>
                    <!-- Admin-only buttons -->
                    <div id="adminButtons" style="display: none;">
                        <!-- Add new facility button (admin only) -->
                        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#createModal">
                            <i class="bi bi-plus-circle me-1"></i>Add New Facility
                        </button>
                    </div>
                </div>
            </div>
            <!-- Pagination controls -->
            <div class="card-footer bg-white py-2">
                <?php require('template/pagination.phtml');?>
            </div>
            <!-- Facilities table -->
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0" id="facilityTable">
                        <thead class="table-light">
                            <tr id="tableHeaderRow">
                                <!-- Table headers will be dynamically populated by JavaScript -->
                            </tr>
                        </thead>
                        <tbody class="border-top-0">
                            <!-- Table content will be dynamically populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Include modal templates -->
<?php require('template/createModal.phtml') ?>
<?php require('template/updateModal.phtml') ?>
<?php require('template/deleteModal.phtml') ?>
<?php require('template/statusModal.phtml') ?>

<!-- Regular user view (no admin buttons) -->
<div id="regularUserView"></div>

<script>
    // Function to update UI based on user role
    async function updateRoleBasedUI() {
        const adminButtons = document.getElementById('adminButtons');
        const regularUserView = document.getElementById('regularUserView');
        const tableHeaderRow = document.getElementById('tableHeaderRow');
        
        // Validate authentication with server first
        let isAdmin = false;
        if (simpleAuth.isAuthenticated()) {
            try {
                // This will validate the token with the server and handle refresh if needed
                const isValid = await simpleAuth.validateOnLoad();
                if (isValid) {
                    isAdmin = simpleAuth.isAdmin();
                }
            } catch (error) {
                console.error('Error validating authentication:', error);
                isAdmin = false;
            }
        }
        
        // Show/hide admin buttons
        if (adminButtons) {
            adminButtons.style.display = isAdmin ? 'block' : 'none';
        }
        
        if (regularUserView) {
            regularUserView.style.display = isAdmin ? 'none' : 'block';
        }
        
        // Update table headers based on user role :DDD (it just shows the ID column for admins...)
        if (tableHeaderRow) {
            if (isAdmin) {
                // Admin view - show all columns and bigger management actions
                tableHeaderRow.innerHTML = `
                    <th class="fw-semibold" style="width: 40px;">ID</th>
                    <th class="fw-semibold" style="width: 15%;">Title</th>
                    <th class="fw-semibold text-center" style="width: 10%;">Category</th>
                    <th class="fw-semibold" style="width: 25%;">Description</th>
                    <th class="fw-semibold" style="width: 20%;">Address</th>
                    <th class="fw-semibold text-center" style="width: 12%;">Coordinates</th>
                    <th class="fw-semibold text-center" style="width: 8%;">Contributor</th>
                    <th class="fw-semibold text-center" style="width: 10%;">Actions</th>
                `;
            } else {
                // Regular user view - hide ID column and make management actions smaller
                tableHeaderRow.innerHTML = `
                    <th class="fw-semibold" style="width: 17%;">Title</th>
                    <th class="fw-semibold text-center" style="width: 11%;">Category</th>
                    <th class="fw-semibold" style="width: 27%;">Description</th>
                    <th class="fw-semibold" style="width: 20%;">Address</th>
                    <th class="fw-semibold text-center" style="width: 12%;">Coordinates</th>
                    <th class="fw-semibold text-center" style="width: 8%;">Contributor</th> 
                    <th class="fw-semibold text-center" style="width: 5%;">Actions</th>
                `;
            }
        }
    }
    
    // Update UI when the page loads
    document.addEventListener('DOMContentLoaded', updateRoleBasedUI);
    
    // Also update when auth state changes
    window.addEventListener('storage', function(e) {
        if (e.key === 'token' || e.key === 'user') {
            updateRoleBasedUI();
        }
    });
</script>

<!-- Script to update the facility count badge -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Update facility count badge based on data in sessionStorage
    const updateFacilityCount = () => {
        const facilityData = JSON.parse(sessionStorage.getItem('facilityData') || '[]');
        const countBadge = document.getElementById('facilityCount');
        if (countBadge) {
            countBadge.textContent = `${facilityData.length} facilities`;
        }
    };
    
    // Initial count update when the page loads
    updateFacilityCount();
    
    // Listen for changes in facility data to update the count
    window.addEventListener('storage', function(e) {
        if (e.key === 'facilityData') {
            updateFacilityCount();
        }
    });
});
</script>

<?php require('template/footer.phtml');?>