Default page

Edit File: index.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>

<div
          class="edash-page-container container-xxl"
          id="edash-page-container"
        >
          
          <div class="edash-content-breadcumb row mb-4 mb-md-6 pt-md-2">
            <div class="col-12">
              <div class="d-flex align-items-center justify-content-between">
                <div>
                  
                 
                </div>
                <div class="d-flex align-items-center gap-2">

</div>
              </div>
            </div>
          </div>
          
          
          <div class="edash-content-section row g-3 g-md-4">
            
            
            
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Schedule</h4>
                </div>
                <div class="card-body p-0">
                  <div class="table-responsive">
                    <table
                      class="table-gap-hover table table-hover overflow-hidden mb-0 px-4"
                      style="
                        border-spacing: 0 0.75rem;
                        border-collapse: separate;
                      "
                    >
                      <thead>
                        <tr>
                          <th scope="col" class="border-top border-start">Monday</th>
                          <th scope="col" class="border-top">Tuesday</th>
                          <th scope="col" class="border-top">Wednesday</th>
                          <th scope="col" class="border-top">Thursday</th>
                          <th scope="col" class="border-top">Friday</th>
                          <th scope="col" class="border-top">Saturday</th>
                          <th scope="col" class="border-top border-end">Sunday</th>
                          
                          
                        </tr>
                      </thead>
                      <tbody>

<?php
// 数据库连接配置
$host = "localhost";
$dbname = "t001";
$username = "t001";
$password = "ZRTsRb6Ycp585AEC";

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die('数据库连接失败: ' . $e->getMessage());
}

// 查询员工班次数据
$stmt = $pdo->prepare("SELECT * FROM employee_schedule");
$stmt->execute();
$schedules = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<?php foreach ($schedules as $schedule): ?>
    <tr>
        
        <td class="border-top border-start">
            <a><?php echo htmlspecialchars($schedule['employee_name']); ?></a>
            <a href="javascript:void(0)" 
               class="badge <?php echo $schedule['monday_status'] === 'AM' ? 'bg-primary-subtle text-primary' : 
                           ($schedule['monday_status'] === 'PM' ? 'bg-secondary-subtle text-secondary' : 
                           'bg-danger-subtle text-danger'); ?>"
               data-bs-toggle="modal" 
               data-bs-target="#editShiftModal"
               data-employee="<?php echo htmlspecialchars($schedule['employee_name']); ?>"
               data-day="Monday"
               data-status="<?php echo htmlspecialchars($schedule['monday_status']); ?>">
                <?php echo htmlspecialchars($schedule['monday_status']); ?>
            </a>
        </td>
        
        <?php 
        $days = ['Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
        foreach ($days as $day): 
            $day_status = strtolower($day) . '_status'; // 动态获取字段名
        ?>
        <td class="border-top">
            <a><?php echo htmlspecialchars($schedule['employee_name']); ?></a>
            <a href="javascript:void(0)" 
               class="badge <?php echo $schedule[$day_status] === 'AM' ? 'bg-primary-subtle text-primary' : 
                           ($schedule[$day_status] === 'PM' ? 'bg-secondary-subtle text-secondary' : 
                           'bg-danger-subtle text-danger'); ?>"
               data-bs-toggle="modal" 
               data-bs-target="#editShiftModal"
               data-employee="<?php echo htmlspecialchars($schedule['employee_name']); ?>"
               data-day="<?php echo $day; ?>"
               data-status="<?php echo htmlspecialchars($schedule[$day_status]); ?>">
                <?php echo htmlspecialchars($schedule[$day_status]); ?>
            </a>
        </td>
        <?php endforeach; ?>
        <td class="text-end border-top border-end">
            
        </td>
    </tr>
<?php endforeach; ?>

</tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>

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-muted">
              <script>
                document.write(new Date().getFullYear());
              </script>
              ©
            </span>
            <span class="vr mx-2 bg-body-secondary"></span>
            <a href="mailto:wrapcoders@gmail.com">Expodash</a>
          </div>
          <div class="d-flex align-items-center gap-3">
            <a
              href="./../../docs/documentation.html"
              target="_blank"
              class="d-none d-sm-block"
              >Docs</a
            >
            <a href="wrapcoders@gmail.com" target="_blank" class="d-none d-sm-block"
              >About</a
            >
            <a href="wrapcoders@gmail.com" target="_blank">Support</a>
            <a
              href="https://codecanyon.net/item/expodash-bootstrap-5-admin-dashboard-template/52160996"
              target="_blank"
              >Purchase</a
            >
          </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"); // 更新无障碍支持
      });
    });
    
    
    
    
    
    
   
}

</script>

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

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

</body>
</html>