steve07s
/
maa-test-issues


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
							<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MAA測試問題追蹤系統</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 標題列 -->
        <header class="header">
            <h1><i class="fas fa-bug"></i> MAA測試問題追蹤系統</h1>
            <div class="header-actions">
                <button class="btn btn-primary" onclick="showCreateIssueModal()">
                    <i class="fas fa-plus"></i> 新增問題
                </button>
                <button class="btn btn-secondary" onclick="showCreateProjectModal()">
                    <i class="fas fa-folder-plus"></i> 新增專案
                </button>
            </div>
        </header>

        <!-- 統計卡片 -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon open">
                    <i class="fas fa-exclamation-circle"></i>
                </div>
                <div class="stat-content">
                    <h3 id="openCount">0</h3>
                    <p>待處理問題</p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon progress">
                    <i class="fas fa-clock"></i>
                </div>
                <div class="stat-content">
                    <h3 id="progressCount">0</h3>
                    <p>處理中問題</p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon closed">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="stat-content">
                    <h3 id="closedCount">0</h3>
                    <p>已完成問題</p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon total">
                    <i class="fas fa-list"></i>
                </div>
                <div class="stat-content">
                    <h3 id="totalCount">0</h3>
                    <p>總問題數</p>
                </div>
            </div>
        </div>

        <!-- 篩選器 -->
        <div class="filters">
            <div class="filter-group">
                <label for="projectFilter">專案：</label>
                <select id="projectFilter" onchange="loadIssues()">
                    <option value="">全部專案</option>
                </select>
            </div>
            <div class="filter-group">
                <label for="statusFilter">狀態：</label>
                <select id="statusFilter" onchange="loadIssues()">
                    <option value="">全部狀態</option>
                    <option value="open">待處理</option>
                    <option value="in_progress">處理中</option>
                    <option value="closed">已完成</option>
                </select>
            </div>
            <div class="filter-group">
                <label for="priorityFilter">優先級：</label>
                <select id="priorityFilter" onchange="loadIssues()">
                    <option value="">全部優先級</option>
                    <option value="high">高</option>
                    <option value="medium">中</option>
                    <option value="low">低</option>
                </select>
            </div>
            <div class="filter-group">
                <button class="btn btn-outline" onclick="loadIssues()">
                    <i class="fas fa-refresh"></i> 重新整理
                </button>
            </div>
        </div>

        <!-- 問題列表 -->
        <div class="issues-container">
            <div class="issues-header">
                <h2>問題列表</h2>
                <div class="view-toggle">
                    <button class="btn btn-sm active" onclick="toggleView('list', this)">
                        <i class="fas fa-list"></i> 列表
                    </button>
                    <button class="btn btn-sm" onclick="toggleView('grid', this)">
                        <i class="fas fa-th"></i> 網格
                    </button>
                </div>
            </div>
            <div id="issuesList" class="issues-list">
                <!-- 問題項目將在這裡動態載入 -->
            </div>
            <div id="loadingIndicator" class="loading" style="display: none;">
                <i class="fas fa-spinner fa-spin"></i> 載入中...
            </div>
        </div>

        <!-- 分頁 -->
        <div id="pagination" class="pagination">
            <!-- 分頁按鈕將在這裡動態生成 -->
        </div>
    </div>

    <!-- 新增問題模態框 -->
    <div id="createIssueModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>新增問題</h3>
                <span class="close" onclick="closeModal('createIssueModal')">&times;</span>
            </div>
            <div class="modal-body">
                <form id="createIssueForm">
                    <div class="form-group">
                        <label for="issueTitle">標題 *</label>
                        <input type="text" id="issueTitle" name="title" required>
                    </div>
                    <div class="form-group">
                        <label for="issueProject">專案</label>
                        <select id="issueProject" name="project_id">
                            <option value="">選擇專案</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="issueDescription">描述</label>
                        <textarea id="issueDescription" name="description" rows="4"></textarea>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="issuePriority">優先級</label>
                            <select id="issuePriority" name="priority">
                                <option value="low">低</option>
                                <option value="medium" selected>中</option>
                                <option value="high">高</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="issueAssignee">指派給</label>
                            <input type="text" id="issueAssignee" name="assignee" placeholder="指派給誰">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="issueReporter">回報者</label>
                        <input type="text" id="issueReporter" name="reporter" placeholder="回報者姓名">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal('createIssueModal')">取消</button>
                <button class="btn btn-primary" onclick="createIssue()">建立問題</button>
            </div>
        </div>
    </div>

    <!-- 新增專案模態框 -->
    <div id="createProjectModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>新增專案</h3>
                <span class="close" onclick="closeModal('createProjectModal')">&times;</span>
            </div>
            <div class="modal-body">
                <form id="createProjectForm">
                    <div class="form-group">
                        <label for="projectName">專案名稱 *</label>
                        <input type="text" id="projectName" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="projectDescription">描述</label>
                        <textarea id="projectDescription" name="description" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="projectStatus">狀態</label>
                        <select id="projectStatus" name="status">
                            <option value="active">啟用</option>
                            <option value="inactive">停用</option>
                            <option value="planning">規劃中</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal('createProjectModal')">取消</button>
                <button class="btn btn-primary" onclick="createProject()">建立專案</button>
            </div>
        </div>
    </div>

    <!-- 問題詳情模態框 -->
    <div id="issueDetailModal" class="modal">
        <div class="modal-content large">
            <div class="modal-header">
                <h3 id="issueDetailTitle">問題詳情</h3>
                <span class="close" onclick="closeModal('issueDetailModal')">&times;</span>
            </div>
            <div class="modal-body">
                <div id="issueDetailContent">
                    <!-- 問題詳情將在這裡動態載入 -->
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>