Enhance API request handling and UI interaction

maesse · maesse · commit 1c4c2b6e7319 · 2025-10-24T21:58:13.000+02:00
- Added a refresh button in the sidebar to update the request list.
- Improved request selection logic to fetch detailed request data.
- Updated the API store to handle asynchronous operations for fetching requests.
- Cleaned up the main entry file by removing unnecessary CSS import.
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/public/main.css">
     <title>Vite App</title>
   </head>
   <body>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,4 +1,10 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useApiStore } from './stores/apiStore';
+
+
+const apiStore = useApiStore();
+apiStore.updateRequestList();
+</script>
 
 <template>
   <!-- Header -->
@@ -12,27 +18,40 @@
     <!-- Sidebar -->
     <aside class="w-64 bg-white shadow-md p-4 overflow-y-auto">
       <h2 class="text-lg font-semibold mb-4">Menu</h2>
+      <button class="w-full mb-4 px-3 py-2 bg-blue-500 text-white rounded hover:bg-blue-600" @click="apiStore.updateRequestList()">
+        Refresh Requests
+      </button>
       <ul class="space-y-2">
-        <li>
-          <button class="w-full text-left px-3 py-2 rounded hover:bg-blue-100">Item 1</button>
-        </li>
-        <li>
-          <button class="w-full text-left px-3 py-2 rounded hover:bg-blue-100">Item 2</button>
-        </li>
-        <li>
-          <button class="w-full text-left px-3 py-2 rounded hover:bg-blue-100">Item 3</button>
-        </li>
-        <li>
-          <button class="w-full text-left px-3 py-2 rounded hover:bg-blue-100">Item 4</button>
-        </li>
+        <template v-for="request in apiStore.requestList" :key="request.id">
+          <li :class="apiStore.selectedRequest?.id === request.id ? 'bg-blue-200' : ''">
+            <button class="w-full text-left px-3 py-2 rounded hover:bg-blue-100" @click="apiStore.selectRequest(request.id)">
+              {{ request.method }} {{ request.path }}
+            </button>
+          </li>
+        </template>
       </ul>
     </aside>
 
     <!-- Main Content -->
     <main class="flex-1 p-6 overflow-y-auto">
       <h2 class="text-2xl font-bold mb-4">Main Content</h2>
-      <p class="mb-2">This is where your main content will go. You can add text, images, tables, or any other elements here.</p>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet urna a orci elementum fermentum.</p>
+      <template v-if="apiStore.selectedRequest">
+        <div>
+          <h3 class="text-xl font-semibold mb-2">Request Details</h3>
+          <p><strong>Method:</strong> {{ apiStore.selectedRequest.method }}</p>
+          <p><strong>Path:</strong> {{ apiStore.selectedRequest.path }}</p>
+
+          <p><strong>Headers:</strong></p>
+          <pre class="bg-gray-100 p-2 rounded mb-2">{{ JSON.stringify(apiStore.selectedRequest.headers, null, 2) }}</pre>
+          <p><strong>Body:</strong></p>
+          <pre class="bg-gray-100 p-2 rounded">{{ apiStore.selectedRequest.body_text }}</pre>
+          <p><strong>Body (Base64):</strong></p>
+          <pre class="bg-gray-100 p-2 rounded">{{ apiStore.selectedRequest.body_bytes_b64 }}</pre>
+        </div>
+      </template>
+      <template v-else>
+        <p>Please select a request from the sidebar to view details.</p>
+      </template>
     </main>
 
   </div>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
@@ -1,6 +1,5 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import '../public/main.css'
 import App from './App.vue'
 import router from './router'
 
diff --git a/frontend/src/stores/apiStore.ts b/frontend/src/stores/apiStore.ts
@@ -1,16 +1,72 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 
+// from pydantic import BaseModel:
+
+// class RequestSummary(BaseModel):
+//     id: int
+//     method: str
+//     path: str
+//     ts: float
+//     ip: str
+//     content_length: int
+
+export type ApiRequestSummary = {
+  id: string
+  method: string
+  path: string
+  ts: number
+  ip: string
+  content_length: number
+}
+
+// class StoredRequest(BaseModel):
+//     id: int
+//     method: str
+//     path: str
+//     ts: float
+//     ip: str
+//     headers: Dict[str, str]
+//     query: Dict[str, str]
+//     body_text: Optional[str] = None
+//     body_bytes_b64: Optional[str] = None
+//     body_length: int = 0
+
+
+export type ApiRequest = {
+  id: string
+  method: string
+  path: string
+  ts: number
+  ip: string
+  headers: Record<string, string>
+  query: Record<string, string>
+  body_text?: string
+  body_bytes_b64?: string
+  body_length: number
+}
+
+
+
 export const useApiStore = defineStore('api', () => {
-  const requestList = ref([])
-  const selectedRequest = ref(null)
+  const requestList = ref<ApiRequestSummary[]>([])
+  const selectedRequest = ref<ApiRequest | null>(null)
 
-  function updateRequestList() {
+  async function updateRequestList() {
     // Call API to fetch updated request list
+    const response = await fetch('/api/requests')
+    if (response.ok) {
+      const data = await response.json()
+      requestList.value = data as ApiRequestSummary[]
+    }
   }
 
-  function selectRequest(requestId: string) {
-    selectedRequest.value = requestList.value.find(req => req.id === requestId) || null
+  async function selectRequest(requestId: string) {
+    const response = await fetch(`/api/requests/${requestId}`)
+    if (response.ok) {
+      const data = await response.json()
+      selectedRequest.value = data as ApiRequest
+    }
   }
 
   return { requestList, selectedRequest, updateRequestList, selectRequest }
