Merge pull request #4 from knktc/feature-supports-filter-by-path

knktc · web-flow · commit 40100c7986b3 · 2025-07-25T17:10:04.000+08:00
Supports pagination
diff --git a/main.go b/main.go
@@ -41,6 +41,11 @@ type PageData struct {
 // Version information will be set during build
 var Version = "dev"
 
+// Constants for error messages
+const (
+	InternalServerError = "Internal Server Error"
+)
+
 // Global store for our requests
 // We use global variables to store requests.
 var (
@@ -112,21 +117,98 @@ func handler(w http.ResponseWriter, r *http.Request) {
 	captureRequestHandler(w, r)
 }
 
-// apiRequestsHandler handles AJAX requests for getting the list of requests
+// PaginatedResponse represents a paginated API response
+type PaginatedResponse struct {
+	Requests   []RequestInfo `json:"requests"`
+	Page       int           `json:"page"`
+	Limit      int           `json:"limit"`
+	Total      int           `json:"total"`
+	TotalPages int           `json:"total_pages"`
+	HasNext    bool          `json:"has_next"`
+	HasPrev    bool          `json:"has_prev"`
+}
+
+// parsePaginationParams extracts and validates pagination parameters from request
+func parsePaginationParams(r *http.Request) (page, limit int) {
+	page = 1
+	limit = 20 // Default limit
+
+	if pageStr := r.URL.Query().Get("page"); pageStr != "" {
+		if p, err := strconv.Atoi(pageStr); err == nil && p > 0 {
+			page = p
+		}
+	}
+
+	if limitStr := r.URL.Query().Get("limit"); limitStr != "" {
+		if l, err := strconv.Atoi(limitStr); err == nil && l > 0 && l <= 100 { // Max limit of 100
+			limit = l
+		}
+	}
+
+	return page, limit
+}
+
+// getRequestsPage returns a paginated slice of requests
+func getRequestsPage(page, limit, total int) []RequestInfo {
+	if total == 0 {
+		return make([]RequestInfo, 0)
+	}
+
+	// Calculate pagination
+	offset := (page - 1) * limit
+	start := offset
+	end := offset + limit
+	if end > total {
+		end = total
+	}
+
+	requests := make([]RequestInfo, end-start)
+	for i := start; i < end; i++ {
+		id := requestIDs[total-1-i] // Reverse order to show newest first
+		requests[i-start] = requestsStore[id]
+	}
+
+	return requests
+}
+
+// apiRequestsHandler handles AJAX requests for getting the list of requests with pagination support
 func apiRequestsHandler(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Content-Type", "application/json")
 
+	// Parse pagination parameters
+	page, limit := parsePaginationParams(r)
+
 	mutex.RLock()
-	// Create a list of requests based on the ordered ID list.
-	// To have the newest requests shown at the top, we traverse the ID list in reverse order.
-	requests := make([]RequestInfo, len(requestIDs))
-	for i := 0; i < len(requestIDs); i++ {
-		id := requestIDs[len(requestIDs)-1-i]
-		requests[i] = requestsStore[id]
+	total := len(requestIDs)
+
+	// Calculate pagination
+	totalPages := (total + limit - 1) / limit // Ceiling division
+	if totalPages == 0 {
+		totalPages = 1
+	}
+
+	// Validate page number
+	if page > totalPages {
+		page = totalPages
 	}
+
+	// Get paginated requests
+	requests := getRequestsPage(page, limit, total)
+
 	mutex.RUnlock()
 
-	if err := json.NewEncoder(w).Encode(requests); err != nil {
+	// Create paginated response
+	response := PaginatedResponse{
+		Requests:   requests,
+		Page:       page,
+		Limit:      limit,
+		Total:      total,
+		TotalPages: totalPages,
+		HasNext:    page < totalPages,
+		HasPrev:    page > 1,
+	}
+
+	if err := json.NewEncoder(w).Encode(response); err != nil {
 		http.Error(w, "Failed to encode requests", http.StatusInternalServerError)
 		return
 	}
@@ -230,7 +312,7 @@ func renderTemplate(w http.ResponseWriter, tmplName string, data interface{}) {
 	tmplContent, err := templateFS.ReadFile("templates/main.tmpl")
 	if err != nil {
 		log.Printf("Error reading template file: %v", err)
-		http.Error(w, "Internal Server Error", http.StatusInternalServerError)
+		http.Error(w, InternalServerError, http.StatusInternalServerError)
 		return
 	}
 
@@ -255,15 +337,15 @@ func renderTemplate(w http.ResponseWriter, tmplName string, data interface{}) {
 
 	if err != nil {
 		log.Printf("Error parsing template %s: %v", tmplName, err)
-		http.Error(w, "Internal Server Error", http.StatusInternalServerError)
+		http.Error(w, InternalServerError, http.StatusInternalServerError)
 		return
 	}
 
 	buf := &bytes.Buffer{}
 	err = tmpl.Execute(buf, data)
 	if err != nil {
 		log.Printf("Error executing template %s: %v", tmplName, err)
-		http.Error(w, "Internal Server Error", http.StatusInternalServerError)
+		http.Error(w, InternalServerError, http.StatusInternalServerError)
 		return
 	}
 
diff --git a/templates/main.tmpl b/templates/main.tmpl
@@ -130,9 +130,9 @@
             </div>
             <div class="overflow-y-auto flex-1">
                 {{if .AllRequests}}
-                <ul class="divide-y">
+                <ul class="divide-y" id="requestList">
                     {{range .AllRequests}}
-                    <a href="/?view_id={{.ID}}" class="block p-4 hover:bg-gray-50 {{if isCurrent .ID $.SelectedRequest}}bg-indigo-50 border-l-4 border-indigo-500{{end}}">
+                    <a href="#" data-request-id="{{.ID}}" class="request-link block p-4 hover:bg-gray-50 {{if isCurrent .ID $.SelectedRequest}}bg-indigo-50 border-l-4 border-indigo-500{{end}}">
                         <div class="flex justify-between items-center mb-1">
                             <div class="font-bold truncate {{if isCurrent .ID $.SelectedRequest}}text-indigo-700{{else}}text-gray-800{{end}}">
                                 <span class="px-2 mr-2 text-xs leading-5 font-semibold rounded-full 
@@ -156,6 +156,22 @@
                 </div>
                 {{end}}
             </div>
+            <!-- Pagination Controls -->
+            <div id="paginationControls" class="p-4 border-t bg-gray-50">
+                <div class="flex items-center justify-between text-sm">
+                    <div class="text-gray-600">
+                        <span id="paginationInfo">第 1 页，共 1 页 (总计 {{len .AllRequests}} 个请求)</span>
+                    </div>
+                    <div class="flex space-x-2">
+                        <button id="prevPageBtn" class="px-3 py-1 text-sm bg-gray-200 text-gray-600 rounded hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                            上一页
+                        </button>
+                        <button id="nextPageBtn" class="px-3 py-1 text-sm bg-gray-200 text-gray-600 rounded hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed">
+                            下一页
+                        </button>
+                    </div>
+                </div>
+            </div>
         </aside>
 
         <!-- Right Column: Request Details -->
@@ -244,12 +260,23 @@
             // Initialize language first
             initLanguage();
             
+            // --- Pagination variables ---
+            let currentPage = 1;
+            let totalPages = 1;
+            let isUpdating = false;
+            
             // --- Auto-refresh logic ---
             const checkbox = document.getElementById('autoRefreshCheckbox');
             const intervalInput = document.getElementById('refreshIntervalInput');
             const manualRefreshButton = document.getElementById('manualRefreshButton');
             let refreshInterval;
 
+            // --- Pagination controls ---
+            const prevPageBtn = document.getElementById('prevPageBtn');
+            const nextPageBtn = document.getElementById('nextPageBtn');
+            const paginationInfo = document.getElementById('paginationInfo');
+            const paginationControls = document.getElementById('paginationControls');
+
             function startRefresh() {
                 if (refreshInterval) clearInterval(refreshInterval);
                 let interval = parseInt(intervalInput.value, 10);
@@ -273,22 +300,48 @@
                 }
             }
 
+            // Function to update pagination info
+            function updatePaginationInfo(data) {
+                const { page, total_pages, total } = data;
+                paginationInfo.textContent = `第 ${page} 页，共 ${total_pages} 页 (总计 ${total} 个请求)`;
+                
+                prevPageBtn.disabled = !data.has_prev;
+                nextPageBtn.disabled = !data.has_next;
+                
+                currentPage = page;
+                totalPages = total_pages;
+                
+                // Show/hide pagination controls based on whether there are multiple pages
+                if (total_pages > 1) {
+                    paginationControls.classList.remove('hidden');
+                } else {
+                    paginationControls.classList.add('hidden');
+                }
+            }
+
             // Function to update only the request list via AJAX
-            function updateRequestList() {
-                return fetch('/api/requests')
+            function updateRequestList(page = currentPage) {
+                if (isUpdating) return;
+                isUpdating = true;
+                
+                return fetch(`/api/requests?page=${page}&limit=20`)
                     .then(response => response.json())
-                    .then(requests => {
+                    .then(data => {
                         const requestList = document.querySelector('aside .overflow-y-auto');
                         const currentViewId = new URLSearchParams(window.location.search).get('view_id');
                         
-                        if (requests && requests.length > 0) {
+                        updatePaginationInfo(data);
+                        
+                        if (data.requests && data.requests.length > 0) {
                             const ul = document.createElement('ul');
                             ul.className = 'divide-y';
+                            ul.id = 'requestList';
                             
-                            requests.forEach(request => {
+                            data.requests.forEach(request => {
                                 const li = document.createElement('a');
-                                li.href = `/?view_id=${request.ID}`;
-                                li.className = `block p-4 hover:bg-gray-50 ${currentViewId == request.ID ? 'bg-indigo-50 border-l-4 border-indigo-500' : ''}`;
+                                li.href = '#';
+                                li.setAttribute('data-request-id', request.ID);
+                                li.className = `request-link block p-4 hover:bg-gray-50 ${currentViewId == request.ID ? 'bg-indigo-50 border-l-4 border-indigo-500' : ''}`;
                                 
                                 const methodColor = getMethodColor(request.Method);
                                 const timestamp = new Date(request.Timestamp).toLocaleString();
@@ -305,6 +358,9 @@
                                     <div class="text-xs text-gray-500">${timestamp}</div>
                                 `;
                                 
+                                // Add click event listener
+                                li.addEventListener('click', handleRequestClick);
+                                
                                 ul.appendChild(li);
                             });
                             
@@ -320,6 +376,9 @@
                     })
                     .catch(error => {
                         console.error('Error updating request list:', error);
+                    })
+                    .finally(() => {
+                        isUpdating = false;
                     });
             }
 
@@ -334,6 +393,19 @@
                 }
             }
 
+            // Pagination button event listeners
+            prevPageBtn.addEventListener('click', () => {
+                if (currentPage > 1) {
+                    updateRequestList(currentPage - 1);
+                }
+            });
+
+            nextPageBtn.addEventListener('click', () => {
+                if (currentPage < totalPages) {
+                    updateRequestList(currentPage + 1);
+                }
+            });
+
             checkbox.addEventListener('change', () => {
                 localStorage.setItem('autoRefreshInterval', intervalInput.value);
                 if (checkbox.checked) {
@@ -398,6 +470,36 @@
             }
             toggleManualRefreshButton(); // Initialize manual refresh button visibility
 
+            // Initialize pagination and request list
+            updateRequestList();
+
+            // Handle request link clicks
+            function handleRequestClick(event) {
+                event.preventDefault();
+                const requestId = event.currentTarget.getAttribute('data-request-id');
+                if (requestId) {
+                    // Update URL without page reload
+                    const newUrl = new URL(window.location);
+                    newUrl.searchParams.set('view_id', requestId);
+                    window.history.pushState({}, '', newUrl);
+                    
+                    // Update the display
+                    loadRequestDetails(requestId);
+                }
+            }
+
+            // Add click event listeners to existing request links
+            document.querySelectorAll('.request-link').forEach(link => {
+                link.addEventListener('click', handleRequestClick);
+            });
+
+            // Function to load request details via AJAX
+            function loadRequestDetails(requestId) {
+                // You can implement this to load request details via AJAX
+                // For now, just reload the page
+                window.location.href = `/?view_id=${requestId}`;
+            }
+
             // --- Collapsible sections logic ---
             const sections = ['headers', 'body'];
 
