added the /files view and auth for api and files

2025-03-26 02:51:49 +01:00
parent f754b25c76
commit 48fce5d661
3 changed files with 159 additions and 10 deletions
@@ -0,0 +1,84 @@
+{% extends "base.html" %}
+{% block title %}Files{% endblock %}
+
+{% block content %}
+<div class="max-w-7xl mx-auto px-4 py-8">
+  <h2 class="text-3xl font-bold mb-6">File Records</h2>
+
+  <!-- Placeholder for the table -->
+  <div id="fileTableContainer" class="overflow-x-auto bg-white shadow-md rounded">
+    <!-- We’ll fill this via JS -->
+    <table id="fileTable" class="min-w-full text-left border-collapse hidden">
+      <thead>
+        <tr class="border-b bg-gray-100">
+          <th class="py-3 px-4">ID</th>
+          <th class="py-3 px-4">Original Filename</th>
+          <th class="py-3 px-4">Size</th>
+          <th class="py-3 px-4">Mime Type</th>
+          <th class="py-3 px-4">Created At</th>
+        </tr>
+      </thead>
+      <tbody id="fileTableBody">
+        <!-- Rows inserted by JS -->
+      </tbody>
+    </table>
+  </div>
+
+  <p id="noFilesMsg" class="text-gray-600 hidden">
+    No files found.
+  </p>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  // Once the DOM is ready, fetch from /api/files
+  document.addEventListener("DOMContentLoaded", async () => {
+    const table = document.getElementById("fileTable");
+    const tableBody = document.getElementById("fileTableBody");
+    const noFilesMsg = document.getElementById("noFilesMsg");
+
+    try {
+      const resp = await fetch("/api/files");
+      if (!resp.ok) {
+        // e.g. 401 => not logged in, or 403 => forbidden
+        if (resp.status === 401) {
+          // Could redirect to /login
+          window.location.href = "/login";
+          return;
+        }
+        throw new Error(`HTTP ${resp.status} - ${resp.statusText}`);
+      }
+      const data = await resp.json(); // array of file objects
+
+      // If empty, show "No files" message
+      if (!data || data.length === 0) {
+        noFilesMsg.classList.remove("hidden");
+        return;
+      }
+
+      // Otherwise, fill the table
+      data.forEach(file => {
+        const row = document.createElement("tr");
+        row.className = "border-b hover:bg-gray-50";
+
+        row.innerHTML = `
+          <td class="py-3 px-4">${file.id}</td>
+          <td class="py-3 px-4">${file.original_filename ?? ""}</td>
+          <td class="py-3 px-4">${file.file_size}</td>
+          <td class="py-3 px-4">${file.mime_type}</td>
+          <td class="py-3 px-4">${file.created_at ? file.created_at : ""}</td>
+        `;
+
+        tableBody.appendChild(row);
+      });
+
+      // Show the table now that we have data
+      table.classList.remove("hidden");
+    } catch (err) {
+      console.error("Failed to load file records:", err);
+      alert("Could not load files from /api/files. Check console for details.");
+    }
+  });
+</script>
+{% endblock %}