Default page

Edit File: employee.php

<!DOCTYPE html>
<html lang="zxx">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Fully Responsive Admin & Dashboard Template"
    />
    <meta name="keyword" content="" />
    <meta name="author" content="WRAPCODERS" />

<link
      rel="preconnect"
      href="https://fonts.googleapis.com"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"/>

<link
      rel="shortcut icon"
      type="image/x-icon"
      href="./../assets/images/favicon.ico"
    />

<title>works</title>

<link
      rel="stylesheet"
      href="./../assets/vendors/bootstrap-table/bootstrap-table.min.css"
    />
    <link
      rel="stylesheet"
      href="./../assets/vendors/bootstrap-icons/font/bootstrap-icons.min.css"
    />

<link rel="stylesheet" href="./../assets/vendors/metismenu/metisMenu.min.css">

<link rel="stylesheet" href="./../assets/vendors/@flaticon/flaticon-uicons/css/all/all.css">

<link rel="stylesheet" type="text/css" href="./../assets/css/theme.min.css">

<script src="./../assets/js/color-modes.min.js"></script>

<style>
    /* 默认隐藏模态框 */
    #addBoardModal {
      display: none;
    }
  </style>

</head>

<?php
// Database connection details
$servername = "localhost";
$username = "t001";
$password = "ZRTsRb6Ycp585AEC"; // Your database password
$dbname = "t001"; // Replace with your database name

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Fetch employee names and their daily records
$sql = "SELECT e.name, d.id AS day_id, d.day_of_month, d.status 
        FROM employees e
        JOIN employee_days d ON e.id = d.employee_id
        ORDER BY e.name, d.day_of_month";

$result = $conn->query($sql);

$currentEmployee = null;
?>

<?php
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $name = htmlspecialchars($row['name']);
        $day = htmlspecialchars($row['day_of_month']);
        $status = htmlspecialchars($row['status']);
        $dayId = htmlspecialchars($row['day_id']); // Unique ID for the day

// Start a new card for each employee
        if ($currentEmployee !== $name) {
            if ($currentEmployee !== null) {
                   // Close previous card
            }

echo '
<div class="col-12">
    <div class="card">
        <div class="card-header d-flex justify-content-between">
            <h4 class="card-title">' . $name . '</h4>
            <form method="POST" action="delete_employee.php" onsubmit="return confirm(\'Are you sure you want to delete ' . $name . '?\')">
                <input type="hidden" name="employee_name" value="' . $name . '">
                
            </form>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <div class="d-flex flex-wrap align-items-center gap-1">';

$currentEmployee = $name;
        }

// Directly map the database status to button classes
        $statusToClassMap = [
            'v' => 'btn-primary', // Blue for 'v'
            'x' => 'btn-light',   // White for 'x'
            'Off' => 'btn-danger' // Red for 'off'
        ];

// Get the badge class from the map, default to 'btn-secondary' if status is unknown
        $badgeClass = $statusToClassMap[$status] ?? 'btn-danfer';

// Display button
        echo '<button type="button" class="btn rounded-circle ' . $badgeClass . ' btn-icon" 
                     data-day-id="' . $dayId . '" 
                     data-status="' . $status . '" 
                     data-day="' . $day . '" 
                     data-bs-toggle="modal" 
                     data-bs-target="#editModal">';
        echo $day;
        echo '</button>';
    }

// Close the last card
    echo '</div></div></div></div></div>';
} else {
    echo '<p>No data available.</p>';
}
?>

editModal.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        const dayId = button.getAttribute('data-day-id');
        const status = button.getAttribute('data-status');

// Fill form fields
        document.getElementById('dayId').value = dayId;
        document.getElementById('status').value = status;
    });

saveChanges.addEventListener('click', function () {
    const formData = new FormData(editForm);

fetch('update_status.php', {
        method: 'POST',
        body: formData
    })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const dayId = document.getElementById('dayId').value;
                const newStatus = document.getElementById('status').value;
                const button = document.querySelector(`[data-day-id="${dayId}"]`);

// Status to class mapping
                const statusToClassMap = {
                    'v': 'btn-primary',
                    'x': 'btn-light',
                    'off': 'btn-danger'
                };

// Get the badge class, default to 'btn-secondary'
                const newClass = statusToClassMap[newStatus] || 'btn-danger';

// Update button text and class
                button.textContent = newStatus;
                button.className = 'btn rounded-circle btn-icon ' + newClass;

// Close modal
                const bootstrapModal = bootstrap.Modal.getInstance(editModal);
                bootstrapModal.hide();
            } else {
                alert('Error updating status: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while updating the status.');
        });
});

});
</script>

</div>
          
        </div>
        
        
        
        
        
       <div class="modal fade" id="addBoardModal" role="dialog" aria-labelledby="addBoardModalTitle" aria-modal="false">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title add-list-title" id="addBoardModalTitleLabel1">Add Name</h5>
         
        </div>
        <div class="modal-body">
            
    <form action="add_ws.php" method="POST">
    <div class="list-title d-flex align-items-center">
        <input type="text" name="name" class="form-control" placeholder="Add name...." required>
    </div>
    <div class="d-grid mt-4">
        <button type="submit" class="btn add-list btn-primary w-100">Submit</button>
    </div>
</form>
          
         
        </div>
      </div>
    </div>
  </div>
        
        
        
        
        <footer
          class="edash-footer-container container-xxl d-flex align-items-center justify-content-between rounded-3 p-4 mx-auto mb-3 ht-64 bg-body-tertiary"
          id="edash-footer-container"
        >
          <div class="hstack">
            <span class="text-danger">
              <script>
                const now = new Date();

// 获取星期名称
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const dayName = days[now.getDay()];

// 获取月份名称
const months = [
    'January', 'February', 'March', 'April', 'May', 'June', 
    'July', 'August', 'September', 'October', 'November', 'December'
];
const monthName = months[now.getMonth()];

// 获取日期和年份
const date = now.getDate();
const year = now.getFullYear();

// 拼接成需要的格式
const formattedDate = `${dayName}, ${monthName} ${date}, ${year}`;

// 输出
document.write(formattedDate);
              </script>
              ©
            </span>
            
          </div>
         
        </footer>

</main>
      
      
      
      <div class="edash-menu-backdrop" id="edash-menu-hide"></div>
    </div>
    
    
    
    
    
    
    
  <script>
    // 等待 DOM 加载完成
    document.addEventListener("DOMContentLoaded", function () {
      const modal = document.getElementById("addBoardModal"); // 获取模态框
      const addButton = document.getElementById("addKanbanBoard"); // 获取按钮

// 点击按钮时显示模态框
      addButton.addEventListener("click", function () {
        modal.style.display = "block"; // 显示模态框
        modal.classList.add("show"); // 添加 Bootstrap 的 'show' 类
        modal.setAttribute("aria-modal", "true"); // 确保无障碍支持
      });

// 点击关闭按钮时隐藏模态框
      modal.querySelector(".btn-close").addEventListener("click", function () {
        modal.style.display = "none"; // 隐藏模态框
        modal.classList.remove("show"); // 移除 'show' 类
        modal.setAttribute("aria-modal", "false"); // 更新无障碍支持
      });
    });
    
    
    
    
    
    
    document.addEventListener('DOMContentLoaded', () => {
    const editShiftModal = document.getElementById('editShiftModal');

editShiftModal.addEventListener('show.bs.modal', function (event) {
        const link = event.relatedTarget; // 获取触发模态框的 <a> 标签
        const employeeName = link.getAttribute('data-employee');
        const day = link.getAttribute('data-day');
        const status = link.getAttribute('data-status');

// 填充模态框表单
        document.getElementById('employeeName').value = employeeName;
        document.getElementById('day').value = day;
        document.getElementById('shiftStatus').value = status;
    });
});

function saveShift() {
    const form = document.getElementById('editShiftForm');
    const formData = new FormData(form);

fetch('update_shift.php', {
        method: 'POST',
        body: formData,
    })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const employeeName = formData.get('employee_name');
                const day = formData.get('day');
                const newStatus = formData.get('shift_status');

// 更新表格中的 <a> 标签内容
                const link = document.querySelector(
                    `a[data-employee="${employeeName}"][data-day="${day}"]`
                );
                link.textContent = newStatus;
                link.className = 'badge ' + 
                    (newStatus === 'AM' ? 'bg-primary-subtle text-primary' : 
                    (newStatus === 'PM' ? 'bg-secondary-subtle text-secondary' : 
                    'bg-danger-subtle text-danger'));

// 关闭模态框
                const modal = bootstrap.Modal.getInstance(document.getElementById('editShiftModal'));
                modal.hide();
            } else {
                alert('Failed to update shift: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while updating the shift.');
        });
}

</script>

<script src="./../assets/js/vendors.min.js"></script>

<script src="./../assets/js/common-init.min.js"></script>

</body>
</html>