Merge pull request #4 from kougen/feat/error-support-and-better-templ…

…ating feat: working error handling and templates
kougen · Feb 2, 2025 · f57626c · f57626c
2 parents 0d41a1a + 119c0c2
commit f57626c
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 19 deletions.
diff --git a/main.py b/main.py
@@ -32,6 +32,17 @@ async def add_row(request: Request):
     return templates.TemplateResponse("row.html", {"request": request})
 
 
+@app.get("/error", response_class=HTMLResponse)
+async def error(request: Request, error_type: int | None = None):
+    if error_type == 404:
+        file_name = request.query_params.get("file_name")
+        return templates.TemplateResponse("error/file_404.html",
+                                          {"request": request, "file_name": file_name})
+
+    error_message = request.query_params.get("error_message") or "An error occurred"
+    return templates.TemplateResponse("error.html", {"request": request, "error_message": error_message})
+
+
 @app.post("/generate-pdf", response_class=HTMLResponse)
 async def generate_pdf(
         request: Request,
@@ -93,12 +104,11 @@ async def generate_pdf(
 
 @app.get("/uploads/{file_name}")
 async def get_upload(request: Request, file_name: str):
-    # Check if the file exists or not
-
     if not (UPLOAD_DIR / file_name).exists():
-        return templates.TemplateResponse("error.html", {
+        return templates.TemplateResponse("index.html", {
             "request": request,
-            "error": f"File {file_name} not found!"
+            "error_type": 404,
+            "file_name": file_name
         })
     return FileResponse(UPLOAD_DIR / file_name)
 

diff --git a/static/js/utility.js b/static/js/utility.js
@@ -1,5 +1,9 @@
 let activeRow = null;
 
+document.getElementById('excludeImages').addEventListener('change', function() {
+    document.getElementById('image-column').style.display = this.checked ? 'none' : '';
+});
+
 document.addEventListener("click", (event) => {
     const row = event.target.closest("tr");
     if (row && row.classList.contains("editable")) {

diff --git a/templates/error.html b/templates/error.html
@@ -1,14 +1,3 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <script src="https://unpkg.com/htmx.org@1.9.2"></script>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <title>Flashcard Generator - Error</title>
-</head>
-<body>
-    <h1 class="text-2xl font-bold mb-4 text-red-500">Something went wrong!</h1>
-    <p>{{ error }}</p>
-    <a href="/">Back to home</a>
-</body>
-</html>
+<h1 class="text-xl font-bold mb-4 text-red-500">Something went wrong!</h1>
+<p class="border border-red p-4 rounded-md mb-2 bg-red-200">{{ error_message }}</p>
+<a class="px-6 py-2 bg-black text-white rounded-lg font-bold transform hover:-translate-y-1 transition duration-400" href="/">Back to home</a>
diff --git a/templates/error/file_404.html b/templates/error/file_404.html
@@ -0,0 +1,5 @@
+<div class="relative">
+    <h1 class="text-xl font-bold mb-4 text-red-500">Uh oh...</h1>
+    <p class="border border-red p-4 rounded-md mb-4 bg-red-200">File <span class="font-mono">{{ file_name }}</span> not found!</p>
+    <a class="px-6 py-2 bg-black text-white rounded-lg font-bold transform hover:-translate-y-1 transition duration-400" href="/">Back to home</a>
+</div>
diff --git a/templates/form.html b/templates/form.html
@@ -0,0 +1,21 @@
+<h1 class="text-2xl font-bold mb-4">Flashcard Generator</h1>
+<form id="flashcard-form" hx-post="/generate-pdf" hx-target="#pdf-link" enctype="multipart/form-data">
+    <table class="w-full border-collapse border border-gray-300" id="flashcard-table">
+        <thead>
+        <tr>
+            <th class="border p-2">Image</th>
+            <th class="border p-2">Word</th>
+            <th class="border p-2">Actions</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr hx-get="/add-row" hx-trigger="load"></tr>
+        </tbody>
+    </table>
+    <button type="button" class="mt-4 bg-blue-500 text-white px-4 py-2"
+            hx-post="/add-row" hx-target="#flashcard-table tbody" hx-swap="beforeend">
+        Add Row
+    </button>
+    <button type="submit" class="mt-4 bg-green-500 text-white px-4 py-2">Generate PDF</button>
+</form>
+<div id="pdf-link" class="mt-4"></div>
diff --git a/templates/index.html b/templates/index.html
@@ -11,11 +11,24 @@
 <body class="p-10 bg-gray-100">
 <div class="max-w-4xl mx-auto bg-white p-6 shadow-md rounded-lg">
     <h1 class="text-2xl font-bold mb-4">Flashcard Generator</h1>
+
+    {% if error_type == 404 %}
+    <div hx-get="/error" hx-swap="outerHTML" hx-trigger="load"
+         hx-vals='{"error_type": "404", "file_name": "{{ file_name }}"}'></div>
+    {% elif error_message %}
+    <div hx-get="/error" hx-swap="outerHTML" hx-trigger="load"
+         hx-vals='{"error_message": "{{ error_message }}"}'></div>
+    {% else %}
     <form id="flashcard-form" hx-post="/generate-pdf" hx-target="#pdf-link" enctype="multipart/form-data">
+        <label>
+            <input type="checkbox" id="excludeImages" name="exclude_images">
+            Exclude Images
+        </label>
+
         <table class="w-full border-collapse border border-gray-300" id="flashcard-table">
             <thead>
             <tr>
-                <th class="border p-2">Image</th>
+                <th class="border p-2" id="image-column">Image</th>
                 <th class="border p-2">Word</th>
                 <th class="border p-2">Actions</th>
             </tr>
@@ -24,6 +37,7 @@ <h1 class="text-2xl font-bold mb-4">Flashcard Generator</h1>
             <tr hx-get="/add-row" hx-trigger="load"></tr>
             </tbody>
         </table>
+
         <button type="button" class="mt-4 bg-blue-500 text-white px-4 py-2"
                 hx-post="/add-row" hx-target="#flashcard-table tbody" hx-swap="beforeend">
             Add Row
@@ -32,5 +46,7 @@ <h1 class="text-2xl font-bold mb-4">Flashcard Generator</h1>
     </form>
     <div id="pdf-link" class="mt-4"></div>
 </div>
+{% endif %}
+
 </body>
 </html>