bookscraper/README.md

@@ -137,7 +137,7 @@ docker compose up
 
 docker compose up -d
 
-docker compose build --no-cache web && docker compose up web
+docker compose build web && docker compose up web
 
 docker compose build worker_download && docker compose up worker_download
 

bookscraper/app.py

@@ -72,18 +72,12 @@ def dashboard():
     logs_list = get_ui_logs() or []
     registered_books = get_registered_books()
     log(f"[WEB] Registered books: {registered_books}")
-    from db.repository import fetch_all_books
+    reg = [b for b in get_registered_books() if b.get("status") != "hidden"]
-    from pprint import pprint
-
-    pprint(fetch_all_books())
-    pprint(get_registered_books())
-
-    # reg = [b for b in get_registered_books() if b.get("status") != "hidden"]
 
     return render_template(
         "dashboard/dashboard.html",
         books=list_active_books(),
-        registered=registered_books,
+        registered=reg,
         logs=logs_list,
     )
 
@@ -108,86 +102,41 @@ def book_detail(book_idx):
 @app.route("/init", methods=["POST"])
 @logcall
 def init_book():
-    # -------------------------------------------------
+    url = request.form.get("url", "").strip()
-    # Accept single URL (legacy) OR multi-line URLs
-    # -------------------------------------------------
-    raw_urls = request.form.get("urls") or request.form.get("url") or ""
-
-    urls = [line.strip() for line in raw_urls.splitlines() if line.strip()]
 
-    if not urls:
+    if not url:
         return render_template(
             "dashboard/dashboard.html",
-            error="Geen URL(s) opgegeven.",
+            error="Geen URL opgegeven.",
             books=list_active_books(),
             registered=get_registered_books(),
             logs=get_ui_logs(),
         )
 
-    # -------------------------------------------------
+    try:
-    # Duplicate check: existing book_ids
+        result = InitService.execute(url)
-    # -------------------------------------------------
+        msg = f"Boek geregistreerd: {result.get('title')}"
-    existing_books = {b["book_idx"] for b in fetch_all_books()}
-    results = []
-
-    # -------------------------------------------------
-    # Process each URL independently
-    # -------------------------------------------------
-    for url in urls:
-        try:
-            book_id = InitService.derive_book_id(url)
-
-            if book_id in existing_books:
-                results.append(
-                    {
-                        "url": url,
-                        "status": "skipped",
-                        "book_id": book_id,
-                        "message": "Al geregistreerd",
-                    }
-                )
-                continue
-
-            result = InitService.execute(url)
-
-            results.append(
-                {
-                    "url": url,
-                    "status": "registered",
-                    "book_id": result.get("book_id"),
-                    "title": result.get("title"),
-                }
-            )
-
-        except Exception as e:
-            log_debug(f"[INIT] ERROR for url={url}: {e}")
-            results.append(
-                {
-                    "url": url,
-                    "status": "error",
-                    "error": str(e),
-                }
-            )
-
-    # -------------------------------------------------
-    # Summary message
-    # -------------------------------------------------
-    ok = sum(1 for r in results if r["status"] == "registered")
-    skipped = sum(1 for r in results if r["status"] == "skipped")
-    failed = sum(1 for r in results if r["status"] == "error")
 
-    message = f"Geregistreerd: {ok}, overgeslagen: {skipped}, fouten: {failed}"
+        reg = [b for b in get_registered_books() if b.get("status") != "hidden"]
 
-    reg = [b for b in get_registered_books() if b.get("status") != "hidden"]
+        return render_template(
+            "dashboard/dashboard.html",
+            message=msg,
+            books=list_active_books(),
+            registered=reg,
+            logs=get_ui_logs(),
+        )
 
-    return render_template(
+    except Exception as e:
-        "dashboard/dashboard.html",
+        log_debug(f"[INIT] ERROR: {e}")
-        message=message,
+        reg = [b for b in get_registered_books() if b.get("status") != "hidden"]
-        init_results=results,  # optioneel voor UI-weergave
+        return render_template(
-        books=list_active_books(),
+            "dashboard/dashboard.html",
-        registered=reg,
+            error=f"INIT mislukt: {e}",
-        logs=get_ui_logs(),
+            books=list_active_books(),
-    )
+            registered=reg,
+            logs=get_ui_logs(),
+        )
 
 
 @app.route("/hide/<book_idx>", methods=["POST"])
@@ -273,18 +222,6 @@ def abort_download(book_idx):
 # =====================================================
 
 
-@app.route("/api/state/all", methods=["GET"])
-@logcall
-def api_state_all():
-    """
-    Returns the merged SQL + Redis state for all books
-    (same logic as /debug/inspect_state but JSON-only).
-    """
-    from scraper.utils.state_sync import inspect_books_state
-
-    return jsonify(inspect_books_state())
-
-
 @app.route("/api/books")
 @logcall
 def api_books():

bookscraper/db/repository.py

@@ -202,18 +202,14 @@ def update_book_after_full_scrape(
 @logcall
 def get_registered_books():
     all_books = sql_fetch_all_books()
-    HIDDEN_STATES = {"hidden"}
+    return [b for b in all_books if b.get("status") == "registered"]
-    log(f"[DB] Fetched all books for registered filter, total={len(all_books)}")
-    return [b for b in all_books if b.get("status") not in HIDDEN_STATES]
 
 
 @logcall
 def get_active_books():
     all_books = sql_fetch_all_books()
-
-    HIDDEN_STATES = {"hidden", "done"}
     log(f"[DB] Fetched all books for active filter, total={len(all_books)}")
-    return [b for b in all_books if b.get("status") not in HIDDEN_STATES]
+    return [b for b in all_books if b.get("status") in ("active", "downloading")]
 
 
 # ============================================================
@@ -234,7 +230,7 @@ def set_chapters_total(book_idx, total):
     log(f"[DB] Setting chapter total for {book_idx} to {total}")
     redis_set_chapters_total(book_idx, total)
     sql_set_chapters_total(book_idx, total)
-    # _legacy_set_total(book_idx, total)
+    _legacy_set_total(book_idx, total)
 
 
 # ============================================================
@@ -244,15 +240,15 @@ def set_chapters_total(book_idx, total):
 def inc_download_done(book_idx, amount=1):
     log(f"[DB] Incrementing download done for {book_idx} by {amount}")
     redis_inc_download_done(book_idx, amount)
-    # sql_inc_downloaded(book_idx, amount)
+    sql_inc_downloaded(book_idx, amount)
-    # _legacy_inc_completed(book_idx)
+    _legacy_inc_completed(book_idx)
 
 
 @logcall
 def inc_download_skipped(book_idx, amount=1):
     log(f"[DB] Incrementing download skipped for {book_idx} by {amount}")
     redis_inc_download_skipped(book_idx, amount)
-    # _legacy_inc_skipped(book_idx)
+    _legacy_inc_skipped(book_idx)
 
 
 # ============================================================
@@ -262,7 +258,7 @@ def inc_download_skipped(book_idx, amount=1):
 def inc_parsed_done(book_idx, amount=1):
     log(f"[DB] Incrementing parsed done for {book_idx} by {amount}")
     redis_inc_parsed_done(book_idx, amount)
-    # sql_inc_parsed(book_idx, amount)
+    sql_inc_parsed(book_idx, amount)
 
 
 # ============================================================
@@ -271,7 +267,7 @@ def inc_parsed_done(book_idx, amount=1):
 @logcall
 def inc_audio_skipped(book_idx, amount=1):
     log(f"[DB] Incrementing audio skipped for {book_idx} by {amount}")
-    # sql_inc_audio_skipped(book_idx, amount)
+    sql_inc_audio_skipped(book_idx, amount)
     redis_inc_audio_skipped(book_idx, amount)
 
 
@@ -279,7 +275,7 @@ def inc_audio_skipped(book_idx, amount=1):
 def inc_audio_done(book_idx, amount=1):
     log(f"[DB] Incrementing audio done for {book_idx} by {amount}")
     redis_inc_audio_done(book_idx, amount)
-    # sql_inc_audio_done(book_idx, amount)
+    sql_inc_audio_done(book_idx, amount)
 
 
 # ============================================================
@@ -299,58 +295,3 @@ def inc_parsed(book_idx, amount=1):
 @logcall
 def inc_audio_done_legacy(book_idx, amount=1):
     return inc_audio_done(book_idx, amount)
-
-
-# ============================================================
-# READ — DERIVED BOOK STATE
-# ============================================================
-
-
-@logcall
-def get_book_state(book_idx):
-    """
-    Canonical read-model for a single book.
-
-    Responsibilities:
-    - Read SQLite snapshot (static metadata)
-    - Read Redis live state (counters / status)
-    - Compute derived fields (NO UI logic)
-
-    Invariants:
-    - downloaded = chapters_download_done + chapters_download_skipped
-    """
-
-    # --- SQLite snapshot ---
-    sqlite_row = sql_fetch_book(book_idx) or {}
-
-    # --- Redis live state ---
-    key = f"book:{book_idx}:state"
-    redis_state = _r.hgetall(key) or {}
-
-    # Normalize numeric redis values
-    def _int(v):
-        try:
-            return int(v)
-        except Exception:
-            return 0
-
-    # --- primary counters ---
-    chapters_done = _int(redis_state.get("chapters_download_done"))
-    chapters_skipped = _int(redis_state.get("chapters_download_skipped"))
-
-    # --- derived counters ---
-    downloaded = chapters_done + chapters_skipped
-
-    # --- build canonical state ---
-    state = {}
-
-    # 1) start with SQLite snapshot
-    state.update(sqlite_row)
-
-    # 2) overlay Redis live fields
-    state.update(redis_state)
-
-    # 3) enforce derived invariants
-    state["downloaded"] = downloaded
-
-    return state

bookscraper/db/state_redis.py

@@ -26,7 +26,6 @@ def _key(book_idx: str) -> str:
 # STATUS
 # ------------------------------------------------------------
 def redis_set_status(book_idx: str, status: str):
-    log(f"[DB-REDIS] Setting status for {book_idx} to {status}")
     key = _key(book_idx)
     r.hset(key, "status", status)
     r.hset(key, "last_update", int(time.time()))
@@ -45,7 +44,6 @@ def redis_set_chapters_total(book_idx: str, total: int):
 # DOWNLOAD COUNTERS
 # ------------------------------------------------------------
 def redis_inc_download_done(book_idx: str, amount: int = 1):
-    log(f"[DB-REDIS] Incrementing download done for {book_idx} by {amount}")
     key = _key(book_idx)
     r.hincrby(key, "chapters_download_done", amount)
     r.hset(key, "last_update", int(time.time()))
@@ -62,7 +60,6 @@ def redis_inc_download_skipped(book_idx: str, amount: int = 1):
 # PARSE COUNTERS
 # ------------------------------------------------------------
 def redis_inc_parsed_done(book_idx: str, amount: int = 1):
-    log(f"[DB-REDIS] Incrementing parsed done for {book_idx} by {amount}")
     key = _key(book_idx)
     r.hincrby(key, "chapters_parsed_done", amount)
     r.hset(key, "last_update", int(time.time()))
@@ -80,6 +77,10 @@ def redis_inc_audio_done(book_idx: str, amount: int = 1):
 
 def redis_inc_audio_skipped(book_idx: str, amount: int = 1):
     log(f"[DB-REDIS] Incrementing audio skipped for {book_idx} by {amount}")
+    """
+    New: Count skipped audio chapters (timeouts, pre-existing files, abort, etc.)
+    SQL does NOT track this; Redis-only metric.
+    """
     key = _key(book_idx)
     r.hincrby(key, "audio_skipped", amount)
     r.hset(key, "last_update", int(time.time()))
@@ -88,7 +89,7 @@ def redis_inc_audio_skipped(book_idx: str, amount: int = 1):
 # ------------------------------------------------------------
 # INITIALISE BOOK STATE
 # ------------------------------------------------------------
-def init_book_state(book_idx: str, title: str, url: str, chapters_total: int):
+def init_book_state(book_id: str, title: str, url: str, chapters_total: int):
     """
     Initialiseert de complete Redis state voor een nieuw boek.
     LET OP:
@@ -96,7 +97,7 @@ def init_book_state(book_idx: str, title: str, url: str, chapters_total: int):
       - Alleen missende velden worden toegevoegd.
     """
 
-    key = f"book:{book_idx}:state"
+    key = f"book:{book_id}:state"
 
     # Bestaat al? Dan vullen we alleen missende velden aan.
     exists = r.exists(key)
@@ -104,7 +105,7 @@ def init_book_state(book_idx: str, title: str, url: str, chapters_total: int):
     pipeline = r.pipeline()
 
     # Basis metadata
-    pipeline.hsetnx(key, "book_id", book_idx)
+    pipeline.hsetnx(key, "book_id", book_id)
     pipeline.hsetnx(key, "title", title or "")
     pipeline.hsetnx(key, "url", url or "")
 
@@ -125,6 +126,6 @@ def init_book_state(book_idx: str, title: str, url: str, chapters_total: int):
     pipeline.execute()
 
     if exists:
-        log(f"[DB-REDIS] init_book_state(): UPDATED existing state for {book_idx}")
+        log(f"[DB-REDIS] init_book_state(): UPDATED existing state for {book_id}")
     else:
-        log(f"[DB-REDIS] init_book_state(): CREATED new state for {book_idx}")
+        log(f"[DB-REDIS] init_book_state(): CREATED new state for {book_id}")

bookscraper/scraper/abort.py

@@ -72,11 +72,12 @@ def abort_requested(book_idx: str, redis_client=None) -> bool:
                     port = conn.get("port")
                     db = conn.get("db")
                     _debug(
-                        # f"[ABORT_DEBUG] first check book_idx={book_idx} "
+                        f"[ABORT_DEBUG] first check book_idx={book_idx} "
                         f"redis={host}:{port} db={db}"
                     )
                 except Exception:
                     _debug(f"[ABORT_DEBUG] first check book_idx={book_idx}")
+
                 _seen_debug_keys.add(key)
 
             # Log ACTIVE state

bookscraper/scraper/scriptgen.py

@@ -45,24 +45,11 @@ def detect_volumes(book_base: str):
 # ------------------------------------------------------------
 def build_merge_block(title: str, author: str, volumes):
     lines = []
-    total_vols = len(volumes)
-    if total_vols >= 100:
-        pad = 3
-    elif total_vols >= 10:
-        pad = 2
-    else:
-        pad = 0
-
     for num, dirname in volumes:
-        if pad > 0:
-            vol_num = f"{num:0{pad}d}"
-        else:
-            vol_num = str(num)
-
         line = (
             f'm4b-tool merge --jobs=4 --writer="{author}" '
             f'--albumartist="{author}" --album="{title}" '
-            f'--name="{title}" --output-file="{title}-{vol_num}.m4b" '
+            f'--name="{title}" --output-file="{title}-{num}.m4b" '
             f'"{dirname}" -vvv'
         )
         lines.append(line)

bookscraper/scraper/tasks/download_tasks.py

@@ -153,6 +153,7 @@ def download_chapter(self, payload: dict):
 
     if os.path.exists(save_path):
         log_msg(book_idx, f"[DL] SKIP {chapter_num} → {save_path}")
+
         inc_download_skipped(book_idx)
 
         payload["html"] = None
@@ -187,6 +188,8 @@ def download_chapter(self, payload: dict):
 
         log_msg(book_idx, f"[DL] OK {chapter_num}: {len(html)} bytes")
 
+        inc_download_done(book_idx)
+
         payload["html"] = html
         payload["skipped"] = False
         payload["path"] = save_path

bookscraper/scraper/utils/state_sync.py

@@ -46,7 +46,7 @@ def _build_card(sqlite_row, redis_state, merged):
 # ============================================================
 # INSPECT ONLY — NO WRITES
 # ============================================================
-def inspect_books_state_depecrated():
+def inspect_books_state():
     """
     Reads all books from SQLite and fetches Redis progress.
     Builds:
@@ -121,88 +121,6 @@ def inspect_books_state_depecrated():
     return results
 
 
-# ============================================================
-# INSPECT ONLY — NO WRITES
-# ============================================================
-def inspect_books_state():
-    """
-    Reads canonical book state from repository.
-    Builds:
-        • entry.sqlite
-        • entry.redis
-        • entry.would_merge_to
-        • entry.card  (book-card compatible)
-    """
-
-    from db.repository import get_book_state
-    from db.db import get_db
-
-    db = get_db()
-    cur = db.cursor()
-
-    # Alleen nodig om te weten *welke* books er zijn
-    cur.execute("SELECT book_idx FROM books")
-    rows = cur.fetchall()
-
-    results = []
-
-    for row in rows:
-        book_idx = row["book_idx"]
-
-        # --------------------------------
-        # Canonical state (ENIGE waarheid)
-        # --------------------------------
-        state = get_book_state(book_idx)
-
-        # SQLite-view = alleen SQLite-kolommen
-        sqlite_view = {
-            k: v
-            for k, v in state.items()
-            if k
-            in (
-                "book_idx",
-                "title",
-                "author",
-                "description",
-                "cover_path",
-                "book_url",
-                "chapters_total",
-                "status",
-                "downloaded",
-                "parsed",
-                "audio_done",
-                "created_at",
-                "processdate",
-                "last_update",
-            )
-        }
-
-        # Redis-view = alleen Redis counters/status
-        redis_view = {
-            k: v
-            for k, v in state.items()
-            if k.startswith("chapters_")
-            or k in ("status", "audio_done", "audio_skipped")
-        }
-
-        merged = state  # letterlijk de canonieke state
-
-        card = _build_card(sqlite_view, redis_view, merged)
-
-        results.append(
-            {
-                "book_idx": book_idx,
-                "title": state.get("title"),
-                "sqlite": sqlite_view,
-                "redis": redis_view,
-                "would_merge_to": merged,
-                "card": card,
-            }
-        )
-
-    return results
-
-
 # ============================================================
 # SYNC REDIS → SQLITE  (writes)
 # ============================================================

bookscraper/static/css/bookcard.css

@@ -2,11 +2,11 @@
    File: static/css/bookcard.css
    Purpose:
       All styling for registered book cards (book-card) +
-      status colors + start/abort buttons + progress bars
+      status colors + start/abort buttons.
    ======================================================================= */
 
 /* -----------------------------------------------------------------------
-   GRID WRAPPER
+   GRID WRAPPER FOR REGISTERED BOOKS
    ----------------------------------------------------------------------- */
 
 .registered-grid {
@@ -17,7 +17,7 @@
 }
 
 /* -----------------------------------------------------------------------
-   BOOK CARD
+   MAIN BOOK CARD
    ----------------------------------------------------------------------- */
 
 .book-card {
@@ -36,7 +36,7 @@
 }
 
 /* -----------------------------------------------------------------------
-   STATUS COLORS
+   BOOK STATUS COLORS
    ----------------------------------------------------------------------- */
 
 .book-card.processing {
@@ -55,8 +55,8 @@
 }
 
 .book-card.audio {
-  border-color: #34c759;
+  border-color: #e65100;
-  box-shadow: 0 0 6px rgba(52, 199, 89, 0.35);
+  box-shadow: 0 0 6px rgba(230, 81, 0, 0.35);
 }
 
 .book-card.completed {
@@ -70,7 +70,7 @@
 }
 
 /* -----------------------------------------------------------------------
-   COVER
+   COVER IMAGE
    ----------------------------------------------------------------------- */
 
 .book-cover {
@@ -94,7 +94,7 @@
 }
 
 /* -----------------------------------------------------------------------
-   META
+   META INFORMATION
    ----------------------------------------------------------------------- */
 
 .book-meta {
@@ -106,30 +106,25 @@
 .book-title {
   font-size: 16px;
   font-weight: bold;
+  margin-bottom: 4px;
 }
 
 .book-author {
   font-size: 14px;
   color: #444;
-  margin-bottom: 6px;
+  margin-bottom: 8px;
 }
 
 .book-created {
   font-size: 12px;
   color: #666;
+  margin-bottom: 10px;
 }
 
 /* -----------------------------------------------------------------------
-   ACTION BUTTONS
+   ICON BUTTONS
    ----------------------------------------------------------------------- */
 
-.book-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  margin-top: 10px;
-}
-
 .icon-btn {
   width: 34px;
   height: 34px;
@@ -147,7 +142,7 @@
   transition: background 0.15s ease, transform 0.1s ease;
 }
 
-/* Start */
+/* Start (green) */
 .icon-start {
   background: #2d8a3d;
 }
@@ -155,13 +150,15 @@
   background: #226c30;
   transform: scale(1.05);
 }
+
 .icon-start:disabled {
-  background: #9bbb9f;
+  background: #9bbb9f !important;
   cursor: not-allowed;
+  transform: none;
   opacity: 0.5;
 }
 
-/* Abort */
+/* Abort (red) */
 .icon-abort {
   background: #c62828;
 }
@@ -169,83 +166,36 @@
   background: #a31f1f;
   transform: scale(1.05);
 }
+
 .icon-abort:disabled {
-  background: #d8a0a0;
+  background: #d8a0a0 !important;
   cursor: not-allowed;
+  transform: none;
   opacity: 0.5;
 }
 
-/* Hide */
+/* Hide button (gray) */
 .hide-form {
   position: absolute;
   top: 6px;
   right: 6px;
+  margin: 0;
 }
+
 .icon-hide {
   background: #777;
 }
 .icon-hide:hover {
   background: #555;
+  transform: scale(1.05);
 }
-
 /* -----------------------------------------------------------------------
-   PROGRESS (FULL WIDTH)
+   BOOK ACTIONS (right aligned button row)
    ----------------------------------------------------------------------- */
 
-.book-progress {
+.book-actions {
-  grid-column: 1 / -1;
-  margin-top: 12px;
-  padding: 10px 12px;
-  background: #f6f6f6;
-  border-radius: 8px;
-}
-
-.progress-row {
-  margin-bottom: 10px;
-}
-
-.progress-label {
-  font-size: 12px;
-  margin-bottom: 4px;
-  color: #444;
-}
-
-/* BAR */
-.progressbar {
-  position: relative;
-  width: 100%;
-  height: 14px;
-  background: #ddd;
-  border-radius: 7px;
-  overflow: hidden;
-}
-
-.progressbar-fill {
-  height: 100%;
-  transition: width 0.4s ease;
-}
-
-/* Download = blauw */
-.progressbar-fill.download {
-  background: #2196f3;
-}
-
-/* Audio = groen */
-.progressbar-fill.audio {
-  background: #4caf50;
-}
-
-/* TEXT IN BAR */
-.progressbar-text {
-  position: absolute;
-  inset: 0;
   display: flex;
-  align-items: center;
+  justify-content: flex-end; /* rechts uitlijnen */
-  justify-content: center;
+  gap: 10px; /* ruimte tussen knoppen */
-
+  margin-top: 12px;
-  font-size: 11px;
-  font-weight: 600;
-  color: #fff;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-  pointer-events: none;
 }

bookscraper/static/js/bookcard_controller.js

@@ -1,129 +0,0 @@
-/* ============================================================
-   File: static/js/bookcard_controller.js
-   Purpose:
-     Single owner for updating book-card DOM from merged state
-     (would_merge_to)
-   ============================================================ */
-
-console.log("[BOOKCARD] controller loaded");
-
-/* ============================================================
-   ENTRY POINT (called by state_updater.js)
-   ============================================================ */
-
-function updateBookCardsFromState(stateList) {
-  console.log("[BOOKCARD] updateBookCardsFromState called");
-
-  if (!Array.isArray(stateList)) {
-    console.warn("[BOOKCARD] Invalid stateList", stateList);
-    return;
-  }
-
-  const stateById = {};
-
-  stateList.forEach((entry) => {
-    const merged = entry.would_merge_to;
-    if (!merged || merged.book_idx == null) {
-      console.warn("[BOOKCARD] entry without merged/book_idx", entry);
-      return;
-    }
-    stateById[String(merged.book_idx)] = merged;
-  });
-
-  document.querySelectorAll(".book-card").forEach((card) => {
-    const bookIdx = card.dataset.bookIdx;
-    const state = stateById[bookIdx];
-
-    if (!state) {
-      console.debug("[BOOKCARD] No state for book_idx", bookIdx);
-      return;
-    }
-
-    console.log("[BOOKCARD] Updating card", bookIdx, state.status);
-    updateSingleBookCard(card, state);
-  });
-}
-
-/* ============================================================
-   SINGLE CARD UPDATE
-   ============================================================ */
-
-function updateSingleBookCard(card, state) {
-  console.log("[BOOKCARD] updateSingleBookCard", state.book_idx);
-
-  updateStatus(card, state);
-  updateButtons(card, state);
-  updateProgress(card, state);
-}
-
-/* ============================================================
-   STATUS
-   ============================================================ */
-
-function updateStatus(card, state) {
-  console.log("[BOOKCARD][STATUS]", state.book_idx, "→", state.status);
-  card.className = `book-card ${state.status || ""}`;
-}
-
-/* ============================================================
-   BUTTONS
-   ============================================================ */
-
-function updateButtons(card, state) {
-  const startBtn = card.querySelector(".icon-start");
-  const abortBtn = card.querySelector(".icon-abort");
-
-  const busy = ["starting", "downloading", "parsing", "audio"];
-
-  console.log("[BOOKCARD][BUTTONS]", state.book_idx, "status:", state.status);
-
-  if (startBtn) {
-    // startBtn.disabled = busy.includes(state.status);
-  }
-
-  if (abortBtn) {
-    abortBtn.disabled = !busy.includes(state.status);
-  }
-}
-
-/* ============================================================
-   PROGRESS (DOWNLOAD + AUDIO)
-   ============================================================ */
-
-function updateProgress(card, s) {
-  const total = Number(s.chapters_total || 0);
-
-  // const downloadDone =
-  //   Number(s.chapters_download_done || 0) +
-  //   Number(s.chapters_download_skipped || 0);
-  const downloadDone = Number(s.downloaded || 0);
-
-  const audioDone = Number(s.audio_done || 0) + Number(s.audio_skipped || 0);
-
-  const downloadPct =
-    total > 0 ? Math.min((downloadDone / total) * 100, 100) : 0;
-
-  const audioPct = total > 0 ? Math.min((audioDone / total) * 100, 100) : 0;
-
-  console.log("[BOOKCARD][PROGRESS]", s.book_idx, {
-    total,
-    downloadDone,
-    audioDone,
-    downloadPct,
-    audioPct,
-  });
-
-  /* ---- DOWNLOAD ---- */
-  const dlBar = card.querySelector('[data-field="download_pct"]');
-  const dlText = card.querySelector('[data-field="download_text"]');
-
-  if (dlBar) dlBar.style.width = `${downloadPct}%`;
-  if (dlText) dlText.textContent = `${downloadDone} / ${total}`;
-
-  /* ---- AUDIO ---- */
-  const auBar = card.querySelector('[data-field="audio_pct"]');
-  const auText = card.querySelector('[data-field="audio_text"]');
-
-  if (auBar) auBar.style.width = `${audioPct}%`;
-  if (auText) auText.textContent = `${audioDone} / ${total}`;
-}

bookscraper/static/js/dashboard.js

@@ -1,159 +1,247 @@
 /* =======================================================================
    File: static/js/dashboard.js
    Purpose:
-     - Sidebar selectie
+       Dashboard interactions:
-     - Start / Abort acties
+         - Select active book_idx
-     - UI status updates
+         - Live logs & progress
-   NOTE:
+         - Bookcard AJAX start/abort
-     - GEEN polling
+       NOTE:
-     - state_updater.js is leidend
+         updateLogs() is provided by log_view.js
    ======================================================================= */
 
-console.log("[DASHBOARD] loaded");
-
 /* ---------------------------------------------------------
-   Helpers
+   Utility: Safe fetch wrapper
---------------------------------------------------------- */
+   --------------------------------------------------------- */
 async function apiGet(url) {
-  console.log("[DASHBOARD][API] GET", url);
   try {
-    const r = await fetch(url, { cache: "no-store" });
+    const r = await fetch(url);
-    if (!r.ok) {
+    if (!r.ok) return null;
-      console.warn("[DASHBOARD][API] GET failed", url, r.status);
-      return null;
-    }
     return await r.json();
   } catch (e) {
-    console.error("[DASHBOARD][API] GET error", url, e);
+    console.error("API GET failed:", url, e);
     return null;
   }
 }
 
-function safeUpdateLogs(data) {
-  if (typeof window.updateLogs === "function") {
-    console.log("[DASHBOARD] updateLogs()");
-    window.updateLogs(data);
-  }
-}
-
 /* ---------------------------------------------------------
-   State
+   Dashboard state
---------------------------------------------------------- */
+   --------------------------------------------------------- */
 let ACTIVE_BOOK_IDX = null;
+let REFRESH_INTERVAL = null;
+
+console.log(">>> dashboard.js LOADED");
 
 /* ---------------------------------------------------------
    DOM READY
---------------------------------------------------------- */
+   --------------------------------------------------------- */
 document.addEventListener("DOMContentLoaded", () => {
-  console.log("[DASHBOARD] DOMContentLoaded");
+  console.log(">>> dashboard.js DOMContentLoaded");
 
-  bindSidebar();
+  // Fallback: global logs when no active book_idx
-  bindBookCardButtons();
+  setInterval(() => {
+    if (!ACTIVE_BOOK_IDX) refreshBook(null);
+  }, 2000);
 
-  const first = document.querySelector(".book-list-item");
+  // Sidebar items
-  if (first) {
+  const items = $$(".book-list-item");
-    console.log("[DASHBOARD] auto-select", first.dataset.bookIdx);
+  items.forEach((item) => {
-    selectBook(first.dataset.bookIdx);
+    item.addEventListener("click", () => {
+      selectBook(item.dataset.bookIdx);
+    });
+  });
+
+  // Auto-select first book
+  if (!ACTIVE_BOOK_IDX && items[0]) {
+    selectBook(items[0].dataset.bookIdx);
   }
+
+  // Bind start/abort buttons inside cards
+  bindBookCardButtons();
+
+  // Refresh sidebar every few seconds
+  setInterval(refreshActiveBooks, 2800);
 });
 
 /* ---------------------------------------------------------
-   Sidebar
+   Select a book_idx
---------------------------------------------------------- */
+   --------------------------------------------------------- */
-function bindSidebar() {
+function selectBook(bookIdx) {
-  console.log("[DASHBOARD] bindSidebar()");
+  ACTIVE_BOOK_IDX = bookIdx;
-  document.querySelectorAll(".book-list-item").forEach((item) => {
+  console.log(">>> Selecting book_idx", bookIdx);
-    item.onclick = () => selectBook(item.dataset.bookIdx);
+
+  // Highlight sidebar
+  $$(".book-list-item").forEach((el) => {
+    el.classList.toggle("active", el.dataset.bookIdx === bookIdx);
   });
+
+  // Reset polling
+  if (REFRESH_INTERVAL) clearInterval(REFRESH_INTERVAL);
+
+  REFRESH_INTERVAL = setInterval(() => {
+    refreshBook(ACTIVE_BOOK_IDX);
+  }, 2000);
+
+  refreshBook(ACTIVE_BOOK_IDX);
 }
 
-function selectBook(bookIdx) {
+/* ---------------------------------------------------------
-  if (!bookIdx || bookIdx === ACTIVE_BOOK_IDX) return;
+   Refresh sidebar list
+   --------------------------------------------------------- */
+async function refreshActiveBooks() {
+  const books = await apiGet("/api/books");
+  if (!books) return;
 
-  ACTIVE_BOOK_IDX = bookIdx;
+  const container = $("#book-list");
-  console.log("[DASHBOARD] selectBook", bookIdx);
+  if (!container) return;
 
-  document.querySelectorAll(".book-list-item").forEach((el) => {
+  container.innerHTML = "";
-    el.classList.toggle("active", el.dataset.bookIdx === bookIdx);
+
+  books.forEach((b) => {
+    const div = document.createElement("div");
+    div.className = "book-list-item";
+    div.dataset.bookIdx = b.book_idx;
+
+    div.innerHTML = `
+      <div class="book-title">${b.title}</div>
+      <div class="book-status">${b.status}</div>
+      <div class="book-progress">
+        ${b.download_done}/${b.download_total} downloaded,
+        ${b.audio_done}/${b.audio_total} audio
+      </div>
+    `;
+
+    div.addEventListener("click", () => selectBook(b.book_idx));
+    container.appendChild(div);
   });
 
-  refreshBook(bookIdx);
+  if (!ACTIVE_BOOK_IDX && books.length > 0) {
+    selectBook(books[0].book_idx);
+  }
 }
 
 /* ---------------------------------------------------------
-   Book refresh (NO POLLING)
+   Fetch logs + progress
---------------------------------------------------------- */
+   --------------------------------------------------------- */
 async function refreshBook(bookIdx) {
-  console.log("[DASHBOARD] refreshBook", bookIdx);
+  if (!bookIdx) {
+    const data = await apiGet("/logs");
+    if (data) updateLogs(data);
+    return;
+  }
 
+  const state = await apiGet(`/api/book/${bookIdx}/status`);
   const logs = await apiGet(`/api/book/${bookIdx}/logs`);
-  if (logs) safeUpdateLogs(logs);
 
-  refreshBookCards();
+  if (state) {
+    updateProgressBars(state);
+    refreshBookCards();
+  }
+  if (logs) updateLogs(logs);
 }
 
 /* ---------------------------------------------------------
-   Bookcard buttons
+   BOOKCARD BUTTON BINDING (idempotent)
---------------------------------------------------------- */
+   --------------------------------------------------------- */
 function bindBookCardButtons() {
-  console.log("[DASHBOARD] bindBookCardButtons()");
+  console.log(">>> bindBookCardButtons() scanning…");
 
-  document.querySelectorAll(".icon-start").forEach((btn) => {
+  // START BUTTONS
-    if (btn.dataset.bound) return;
+  document.querySelectorAll(".book-card .icon-start").forEach((btn) => {
+    if (btn.dataset.bound === "1") return;
     btn.dataset.bound = "1";
 
-    btn.onclick = (e) => {
+    btn.addEventListener("click", (ev) => {
-      e.preventDefault();
+      ev.preventDefault();
+      if (btn.disabled) return;
+
       const card = btn.closest(".book-card");
-      if (!card) return;
+      const bookIdx = card?.dataset.bookIdx;
-      startBook(card.dataset.bookIdx);
+
-    };
+      console.log(">>> START clicked:", bookIdx);
+      if (!bookIdx) {
+        console.error(">>> ERROR: bookIdx missing on .book-card dataset");
+        return;
+      }
+
+      startBook(bookIdx);
+    });
   });
 
-  document.querySelectorAll(".icon-abort").forEach((btn) => {
+  // ABORT BUTTONS
-    if (btn.dataset.bound) return;
+  document.querySelectorAll(".book-card .icon-abort").forEach((btn) => {
+    if (btn.dataset.bound === "1") return;
     btn.dataset.bound = "1";
 
-    btn.onclick = (e) => {
+    btn.addEventListener("click", (ev) => {
-      e.preventDefault();
+      ev.preventDefault();
+      if (btn.disabled) return;
+
       const card = btn.closest(".book-card");
-      if (!card) return;
+      const bookIdx = card?.dataset.bookIdx;
-      abortBook(card.dataset.bookIdx);
+
-    };
+      console.log(">>> ABORT clicked:", bookIdx);
+      if (!bookIdx) {
+        console.error(">>> ERROR: bookIdx missing on .book-card dataset");
+        return;
+      }
+
+      abortBookAjax(bookIdx);
+    });
   });
 }
 
 /* ---------------------------------------------------------
-   START
+   AJAX START
---------------------------------------------------------- */
+   --------------------------------------------------------- */
 function startBook(bookIdx) {
-  console.log("[DASHBOARD] START", bookIdx);
+  console.log(">>> startBook():", bookIdx);
 
   fetch("/start", {
     method: "POST",
     headers: { "Content-Type": "application/x-www-form-urlencoded" },
-    body: `book_idx=${bookIdx}`,
+    body: `book_idx=${bookIdx}`, // backend expects field name book_idx
-  }).then(() => refreshBook(bookIdx));
+  })
+    .then(async (r) => {
+      console.log(">>> /start status:", r.status);
+
+      let data = null;
+      try {
+        data = await r.json();
+      } catch (e) {}
+
+      console.log(">>> /start response:", data);
+      refreshBookCards();
+      refreshBook(bookIdx);
+    })
+    .catch((err) => console.error("Start failed:", err));
 }
 
 /* ---------------------------------------------------------
-   ABORT
+   AJAX ABORT
---------------------------------------------------------- */
+   --------------------------------------------------------- */
-function abortBook(bookIdx) {
+function abortBookAjax(bookIdx) {
-  if (!confirm(`Abort book ${bookIdx}?`)) return;
+  if (!confirm(`Abort tasks for book ${bookIdx}?`)) return;
+
+  console.log(">>> abortBookAjax():", bookIdx);
 
-  console.log("[DASHBOARD] ABORT", bookIdx);
+  fetch(`/abort/${bookIdx}`, { method: "POST" })
+    .then(async (r) => {
+      let data = null;
+      try {
+        data = await r.json();
+      } catch (e) {}
+      console.log(">>> /abort response:", data);
 
-  fetch(`/abort/${bookIdx}`, { method: "POST" }).then(() =>
+      refreshBookCards();
-    refreshBook(bookIdx)
+      refreshBook(bookIdx);
-  );
+    })
+    .catch((err) => console.error("Abort failed:", err));
 }
 
 /* ---------------------------------------------------------
-   Bookcard UI refresh (non-progress)
+   Refresh all book-cards (status, classes, buttons)
---------------------------------------------------------- */
+   --------------------------------------------------------- */
 async function refreshBookCards() {
-  console.log("[DASHBOARD] refreshBookCards()");
   const books = await apiGet("/api/books");
   if (!books) return;
 
@@ -162,17 +250,22 @@ async function refreshBookCards() {
     const info = books.find((b) => b.book_idx === idx);
     if (!info) return;
 
-    console.log("[DASHBOARD] card status", idx, info.status);
+    // Status CSS
     card.className = `book-card ${info.status}`;
 
+    // Button states
+    const startBtn = card.querySelector(".icon-start");
     const abortBtn = card.querySelector(".icon-abort");
-    if (abortBtn) {
+
+    if (startBtn) startBtn.disabled = info.status !== "registered";
+    if (abortBtn)
       abortBtn.disabled = ![
         "processing",
         "downloading",
         "parsing",
         "audio",
       ].includes(info.status);
-    }
   });
+
+  bindBookCardButtons();
 }

bookscraper/static/js/inspect_state.js

@@ -1,101 +0,0 @@
-/* ============================================================
-   File: static/js/inspect_state.js
-   Purpose:
-     - Receive merged state via state_updater.js
-     - Update ONLY the right-side state tables
-     - NO polling, NO fetch
-   ============================================================ */
-
-console.log("[inspect_state] JS loaded (subscriber mode)");
-
-/* ------------------------------------------------------------
-   State subscription
-   ------------------------------------------------------------ */
-
-window.addEventListener("state:update", (e) => {
-  const entries = e.detail;
-
-  if (!Array.isArray(entries)) {
-    console.warn("[inspect_state] state:update payload is not array", entries);
-    return;
-  }
-
-  console.log("[inspect_state] state:update received entries:", entries.length);
-  updateInspectTables(entries);
-});
-
-/* ------------------------------------------------------------
-   Update tables
-   ------------------------------------------------------------ */
-
-function updateInspectTables(entries) {
-  console.log("[inspect_state] updating tables");
-
-  entries.forEach((entry) => {
-    const bookIdx = entry.book_idx;
-    if (bookIdx == null) {
-      console.warn("[inspect_state] entry without book_idx", entry);
-      return;
-    }
-
-    const block = document.querySelector(
-      `.state-block[data-book-idx="${bookIdx}"]`
-    );
-    if (!block) {
-      console.warn("[inspect_state] no state-block for book_idx", bookIdx);
-      return;
-    }
-
-    const table = block.querySelector(".state-table");
-    if (!table) {
-      console.warn("[inspect_state] no state-table for book_idx", bookIdx);
-      return;
-    }
-
-    console.log("[inspect_state] updating table for book_idx", bookIdx);
-
-    const sql = entry.sqlite || {};
-    const redis = entry.redis || {};
-    const merged = entry.would_merge_to || {};
-
-    table.innerHTML = `
-      <tr>
-        <th>Field</th>
-        <th>SQLite</th>
-        <th>Redis</th>
-        <th>Merged</th>
-      </tr>
-      ${row("status", sql, redis, merged)}
-      ${row("chapters_total", sql, redis, merged)}
-      ${row("downloaded", sql, redis, merged)}
-      ${row("chapters_download_done", sql, redis, merged)}
-      ${row("chapters_download_skipped", sql, redis, merged)}
-      ${row("parsed", sql, redis, merged)}
-      ${row("chapters_parsed_done", sql, redis, merged)}
-      ${row("audio_done", sql, redis, merged)}
-      ${row("audio_skipped", sql, redis, merged)}
-      ${row("last_update", sql, redis, merged)}
-    `;
-  });
-}
-
-/* ------------------------------------------------------------
-   Row helper
-   ------------------------------------------------------------ */
-
-function row(field, sql, redis, merged) {
-  const s = sql[field] ?? "";
-  const r = redis[field] ?? "";
-  const m = merged[field] ?? "";
-
-  const cls = String(s) === String(r) ? "same" : "diff";
-
-  return `
-    <tr>
-      <th>${field}</th>
-      <td class="${cls}">${s}</td>
-      <td class="${cls}">${r}</td>
-      <td>${m}</td>
-    </tr>
-  `;
-}

bookscraper/static/js/progress.js

@@ -0,0 +1,72 @@
+/* =======================================================================
+   File: static/js/progress.js
+   Purpose:
+       Update progress bars dynamically for the current book.
+       Only updates the main progress box (book_detail page).
+   ======================================================================= */
+
+console.log(">>> progress.js LOADED");
+
+function updateProgressBars(data) {
+  console.log(">>> progress.js updateProgressBars() CALLED with:", data);
+
+  if (!data) {
+    console.warn(">>> progress.js: NO DATA RECEIVED");
+    return;
+  }
+
+  // We always update inside the main progress box:
+  const container = document.querySelector("#progressSection");
+  if (!container) {
+    console.warn(">>> progress.js: #progressSection NOT FOUND");
+    return;
+  }
+
+  // Select bars ONLY inside the correct section
+  const barDL = container.querySelector(
+    ".progress-bar:not(.audio) .progress-bar-fill"
+  );
+  const barAU = container.querySelector(
+    ".progress-bar.audio .progress-bar-fill"
+  );
+
+  const pctDL =
+    data.download_total > 0
+      ? (100 * data.download_done) / data.download_total
+      : 0;
+
+  const pctAU =
+    data.audio_total > 0 ? (100 * data.audio_done) / data.audio_total : 0;
+
+  if (barDL) {
+    barDL.style.width = pctDL.toFixed(1) + "%";
+    console.log(">>> progress.js DL bar =", pctDL.toFixed(1) + "%");
+  } else {
+    console.warn(">>> progress.js: barDL NOT FOUND INSIDE #progressSection");
+  }
+
+  if (barAU) {
+    barAU.style.width = pctAU.toFixed(1) + "%";
+    console.log(">>> progress.js AU bar =", pctAU.toFixed(1) + "%");
+  } else {
+    console.warn(">>> progress.js: barAU NOT FOUND INSIDE #progressSection");
+  }
+
+  // Textual stats — only update inside progress box
+  const stats = container.querySelectorAll(".progress-stats span");
+
+  // Expected: [DL x/y, DL %, AU x/y, AU %]
+  if (stats.length >= 4) {
+    stats[0].innerText = `${data.download_done} / ${data.download_total}`;
+    stats[1].innerText = pctDL.toFixed(1) + "%";
+    stats[2].innerText = `${data.audio_done} / ${data.audio_total}`;
+    stats[3].innerText = pctAU.toFixed(1) + "%";
+
+    console.log(">>> progress.js stats updated");
+  } else {
+    console.warn(
+      ">>> progress.js: not enough stats spans in the container, found",
+      stats.length
+    );
+  }
+}

bookscraper/static/js/state_updater.js

@@ -1,98 +0,0 @@
-/* ========================================================
-   File: static/js/state_updater.js
-   Purpose:
-     - Poll /api/state/all
-     - Dispatch merged state to subscribers
-       (bookcard_controller, inspect_state, others)
-     - Pause polling when tab inactive
-   ======================================================== */
-
-console.log("[STATE-UPDATER] loaded");
-
-const STATE_POLL_INTERVAL_MS = 2500;
-const STATE_ENDPOINT = "/api/state/all";
-
-let STATE_TIMER = null;
-
-/* ========================================================
-   INIT
-   ======================================================== */
-
-document.addEventListener("DOMContentLoaded", () => {
-  initStateUpdater();
-});
-
-function initStateUpdater() {
-  const cards = document.querySelectorAll(".book-card");
-
-  if (cards.length === 0) {
-    console.log("[STATE-UPDATER] No bookcards found — skipping");
-    return;
-  }
-
-  console.log(`[STATE-UPDATER] Starting updater for ${cards.length} bookcards`);
-
-  startPolling(true);
-
-  document.addEventListener("visibilitychange", () => {
-    document.hidden ? stopPolling() : startPolling(true);
-  });
-}
-
-/* ========================================================
-   DISPATCH
-   ======================================================== */
-
-function dispatchState(entries) {
-  console.debug("[STATE] dispatch", entries.length);
-
-  // 1. Bookcards
-  if (typeof window.updateBookCardsFromState === "function") {
-    window.updateBookCardsFromState(entries);
-  }
-
-  // 2. Inspect state tables / other subscribers
-  window.dispatchEvent(new CustomEvent("state:update", { detail: entries }));
-}
-
-/* ========================================================
-   POLLING CONTROL
-   ======================================================== */
-
-function startPolling(immediate = false) {
-  if (STATE_TIMER) return;
-
-  console.log("[STATE-UPDATER] Start polling");
-
-  if (immediate) pollState();
-
-  STATE_TIMER = setInterval(pollState, STATE_POLL_INTERVAL_MS);
-}
-
-function stopPolling() {
-  if (!STATE_TIMER) return;
-
-  console.log("[STATE-UPDATER] Stop polling (tab inactive)");
-  clearInterval(STATE_TIMER);
-  STATE_TIMER = null;
-}
-
-/* ========================================================
-   POLL API
-   ======================================================== */
-
-async function pollState() {
-  if (document.hidden) return;
-
-  try {
-    const resp = await fetch(STATE_ENDPOINT, { cache: "no-store" });
-    if (!resp.ok) return;
-
-    const entries = await resp.json();
-    if (!Array.isArray(entries)) return;
-
-    dispatchState(entries);
-  } catch (e) {
-    console.error("[STATE-UPDATER] poll error", e);
-  }
-}

bookscraper/templates/base.html

@@ -20,16 +20,7 @@
     <!-- JS -->
     <script src="/static/js/app.js"></script>
     <script src="/static/js/log_view.js"></script>
+    <script src="/static/js/progress.js"></script>
     <script src="/static/js/dashboard.js"></script>
-
-    <!-- GLOBAL STATE UPDATER -->
-    <script src="/static/js/state_updater.js"></script>
-    <script>
-      document.addEventListener("DOMContentLoaded", () => {
-        if (typeof initStateUpdater === "function") {
-          initStateUpdater();
-        }
-      });
-    </script>
   </body>
 </html>

bookscraper/templates/components/bookcard.html

@@ -1,48 +1,63 @@
-{# ============================================================ File:
+{# ============================================================
-templates/components/bookcard.html Purpose: Eén enkele boekkaart (dumb
+   File: templates/components/bookcard.html
-component) ============================================================ #}
+   Purpose:
+     Eén enkele boekkaart met:
+       - status styles
+       - cover
+       - metadata
+       - hide button
+       - start (play)
+       - abort (stop)
+   Requires:
+       variable "b" in context
+   ============================================================ #}
 
 <div class="book-card {{ b.status }}" data-book-idx="{{ b.book_idx }}">
-  <!-- HIDE -->
+
+  <!-- ======================================================
+       HIDE BUTTON (icon-only)
+       ====================================================== -->
   <form
     action="/hide/{{ b.book_idx }}"
     method="POST"
-    class="hide-form"
     onsubmit="return confirm('Dit boek verbergen?')"
+    class="hide-form"
   >
     <button class="icon-btn icon-hide" title="Verbergen">
       <i class="fa-solid fa-xmark"></i>
     </button>
   </form>
 
-  <!-- COVER -->
+  <!-- ======================================================
+       COVER
+       ====================================================== -->
   <div class="book-cover">
     {% if b.cover_path %}
-    <img
+      <img src="/{{ b.cover_path }}" alt="cover" class="book-img" />
-      src="/{{ b.cover_path }}"
-      class="book-img"
-      data-field="cover"
-      alt="cover"
-    />
     {% else %}
-    <div class="book-img placeholder" data-field="cover">?</div>
+      <div class="book-img placeholder">?</div>
     {% endif %}
   </div>
 
-  <!-- META -->
+  <!-- ======================================================
+       META + BUTTONS
+       ====================================================== -->
   <div class="book-meta">
-    <div class="book-title" data-field="title">{{ b.title }}</div>
+    <div class="book-title">{{ b.title }}</div>
-    <div class="book-author" data-field="author">{{ b.author }}</div>
+    <div class="book-author">{{ b.author }}</div>
-    <div class="book-created">
+    <div class="book-created">Geregistreerd: {{ b.created_at }}</div>
-      Geregistreerd: <span data-field="created_at">{{ b.created_at }}</span>
-    </div>
 
-    <!-- ACTIONS -->
     <div class="book-actions">
       <!-- START -->
       <form action="/start" method="POST">
         <input type="hidden" name="book_idx" value="{{ b.book_idx }}" />
-        <button class="icon-btn icon-start" title="Start" data-action="start">
+        <button
+          class="icon-btn icon-start"
+          title="Start scraping"
+          {% if b.status != "registered" %}
+            disabled
+          {% endif %}
+        >
           <i class="fa-solid fa-play"></i>
         </button>
       </form>
@@ -50,13 +65,18 @@ component) ============================================================ #}
       <!-- ABORT -->
       <form action="/abort/{{ b.book_idx }}" method="POST">
         <input type="hidden" name="book_idx" value="{{ b.book_idx }}" />
-        <button class="icon-btn icon-abort" title="Abort" data-action="abort">
+        <button
+          class="icon-btn icon-abort"
+          title="Stoppen (abort)"
+          {% if b.status not in ["processing","downloading","parsing","audio"] %}
+            disabled
+          {% endif %}
+        >
           <i class="fa-solid fa-stop"></i>
         </button>
       </form>
     </div>
-  </div>
 
-  <!-- PROGRESS -->
+  </div> <!-- einde .book-meta -->
-  <div class="book-progress">{% include "components/progress_box.html" %}</div>
+
-</div>
+</div> <!-- einde .book-card -->

bookscraper/templates/components/nav.html

@@ -21,7 +21,7 @@
       </li>
 
       <li>
-        <a href="/debug/inspect_state" class="nav-item"> State overview </a>
+        <a href="/logs" class="nav-item"> Logs </a>
       </li>
 
       <!-- Tools dropdown -->

bookscraper/templates/components/progress_box.html

@@ -1,34 +1,62 @@
 <!-- =======================================================================
      File: templates/components/progress_box.html
-     Purpose:
+     Purpose: Reusable progress overview (download + audio) for any book.
-       Dumb progress UI for a book card.
+     Notes:
-       Initial values via Jinja, live updates via state_updater.js
+       - Expects the following variables from Flask:
-======================================================================= -->
+            book_idx: str
+            title: str
+            download_total: int
+            download_done: int
+            audio_total: int
+            audio_done: int
+       - Pure HTML; JS for live updates will be added later.
+     ======================================================================= -->
 
 <div class="progress-box">
-  <!-- DOWNLOAD -->
+  <!-- Header -->
-  <div class="progress-row">
+  <div class="progress-header">
-    <div class="progress-label">Download</div>
+    <h2>Progress</h2>
-    <div class="progressbar">
+    {% if title %}
-      <div
+    <div class="progress-subtitle">{{ title }}</div>
-        class="progressbar-fill download"
+    {% endif %} {% if book_idx %}
-        data-field="download_pct"
+    <div class="progress-bookid">Book IDX: <span>{{ book_idx }}</span></div>
-        style="width: 0%"
+    {% endif %}
-      ></div>
+  </div>
-      <div class="progressbar-text" data-field="download_text">0 / 0</div>
+
+  <!-- DOWNLOAD SECTION -->
+  <div class="progress-section">
+    <h3>Download Progress</h3>
+
+    <div class="progress-bar">
+      {% set pct = 0 %} {% if download_total > 0 %} {% set pct = (100 *
+      download_done / download_total) | round(1) %} {% endif %}
+      <div class="progress-bar-fill" style="width: {{ pct }}%;"></div>
+    </div>
+
+    <div class="progress-stats">
+      <span>{{ download_done }} / {{ download_total }}</span>
+      <span>{{ pct }}%</span>
     </div>
   </div>
 
-  <!-- AUDIO -->
+  <!-- AUDIO SECTION -->
-  <div class="progress-row">
+  <div class="progress-section">
-    <div class="progress-label">Audio</div>
+    <h3>Audio Progress</h3>
-    <div class="progressbar">
+
+    <div class="progress-bar audio">
+      {% set pct2 = 0 %} {% if audio_total > 0 %} {% set pct2 = (100 *
+      audio_done / audio_total) | round(1) %} {% endif %}
       <div
-        class="progressbar-fill audio"
+        class="progress-bar-fill audio-fill"
-        data-field="audio_pct"
+        style="width: {{ pct2 }}%;"
-        style="width: 0%"
       ></div>
-      <div class="progressbar-text" data-field="audio_text">0 / 0</div>
+    </div>
+
+    <div class="progress-stats">
+      <span>{{ audio_done }} / {{ audio_total }}</span>
+      <span>{{ pct2 }}%</span>
     </div>
   </div>
+
+  <script src="/static/js/progress.js"></script>
 </div>

bookscraper/templates/components/url_input.html

@@ -6,17 +6,16 @@
      ======================================================================= -->
 
 <form method="POST" action="/init" class="url-form">
-  <label for="urls" class="url-label"> Book URL(s) – one per line: </label>
+  <label for="url" class="url-label">Book URL:</label>
 
-  <textarea
+  <input
-    id="urls"
+    type="text"
-    name="urls"
+    id="url"
+    name="url"
     class="url-input"
-    rows="5"
+    placeholder="https://www.piaotia.com/bookinfo/6/6072.html"
-    placeholder="https://www.piaotia.com/bookinfo/6/6072.html
-https://www.piaotia.com/bookinfo/3/3785.html"
     required
-  ></textarea>
+  />
 
-  <button type="submit" class="btn-primary url-submit">Register book(s)</button>
+  <button type="submit" class="btn-primary url-submit">Start Scraping</button>
 </form>

bookscraper/templates/debug/inspect_state.html

@@ -1,8 +1,7 @@
 {# ============================================================ File:
 templates/debug/inspect_state.html Purpose: Inspect SQLite vs Redis state per
-book_idx - Initial render via Jinja - Live updates via inspect_state.js -
+book_idx. Left side: full book-card UI (same component as dashboard) Right side:
-BookCard is server-rendered and NEVER replaced - Only the right-side state table
+SQL / Redis / merged comparison table.
-is updated dynamically
 ============================================================ #} {% extends
 "layout.html" %} {% block content %}
 
@@ -44,52 +43,53 @@ is updated dynamically
   .same {
     color: #9f9 !important;
   }
-
   .diff {
     color: #ff7b7b !important;
     font-weight: bold;
   }
+  .empty {
+    color: #aaa !important;
+    font-style: italic;
+  }
 </style>
 
-<div id="state-container">
+{% macro cmp(sqlval, redisval) %} {% if (sqlval|string) == (redisval|string) %}
-  {% for entry in results %}
+<td class="same">{{ sqlval }}</td>
-  <div class="state-block" data-book-idx="{{ entry.book_idx }}">
+<td class="same">{{ redisval }}</td>
-    <!-- LEFT: BookCard (server-rendered, NEVER replaced) -->
+{% else %}
-    <div>
+<td class="diff">{{ sqlval }}</td>
-      {% if entry.card %} {% with b = entry.card %} {% include
+<td class="diff">{{ redisval }}</td>
-      "components/bookcard.html" %} {% endwith %} {% else %}
+{% endif %} {% endmacro %} {% for entry in results %}
-      <strong>{{ entry.book_idx }}</strong>
+<div class="state-block">
-      {% endif %}
+  <!-- LEFT COLUMN: book-card preview -->
-    </div>
+  <div>
+    {% with b = entry.card %} {% include "components/bookcard.html" %} {%
+    endwith %}
+  </div>
 
-    <!-- RIGHT: State table (updated by JS) -->
+  <!-- RIGHT COLUMN: SQL vs Redis comparison -->
-    <div>
+  <div>
-      <table class="state-table">
+    <table class="state-table">
-        <tr>
+      <tr>
-          <th>Field</th>
+        <th>Field</th>
-          <th>SQLite</th>
+        <th>SQLite</th>
-          <th>Redis</th>
+        <th>Redis</th>
-          <th>Merged</th>
+        <th>Merged Result</th>
-        </tr>
+      </tr>
 
-        {% set sql = entry.sqlite %} {% set redis = entry.redis %} {% set merged
+      {% set sql = entry.sqlite %} {% set redis = entry.redis %} {% set merged =
-        = entry.would_merge_to %} {% for field in [ "status", "chapters_total",
+      entry.would_merge_to %} {% for field in [ "status", "chapters_total",
-        "downloaded", "chapters_download_done", "chapters_download_skipped",
+      "downloaded", "chapters_download_done", "chapters_download_skipped",
-        "parsed", "chapters_parsed_done", "audio_done", "audio_skipped",
+      "parsed", "chapters_parsed_done", "audio_done", "audio_skipped",
-        "last_update" ] %}
+      "last_update" ] %}
-        <tr>
+      <tr>
-          <th>{{ field }}</th>
+        <th>{{ field }}</th>
-          <td>{{ sql.get(field, "") }}</td>
+        <td>{{ sql.get(field, '') }}</td>
-          <td>{{ redis.get(field, "") }}</td>
+        <td>{{ redis.get(field, '') }}</td>
-          <td>{{ merged.get(field, "") }}</td>
+        <td>{{ merged.get(field, '') }}</td>
-        </tr>
+      </tr>
-        {% endfor %}
+      {% endfor %}
-      </table>
+    </table>
-    </div>
   </div>
-  {% endfor %}
 </div>
-
+{% endfor %} {% endblock %}
-{% endblock %} {% block scripts %}
-<script src="/static/js/inspect_state.js"></script>
-{% endblock %}

bookscraper/templates/layout.html

@@ -32,11 +32,6 @@
     <footer class="footer">
       BookScraper © 2025 — Powered by Celery + Redis
     </footer>
-    {% block scripts %}{% endblock %}
-
-    <script src="/static/js/bookcard_controller.js"></script>
-    <script src="/static/js/state_updater.js"></script>
-    <script src="/static/js/dashboard.js"></script>
 
     <!-- GLOBAL APP LOGIC (altijd als laatste) -->
     <script src="/static/js/app.js"></script>

bookscraper/templates/result.html

@@ -32,7 +32,6 @@
         font-size: 13px;
       }
 
-      /* NEW: Clear button */
       #clearLogBtn {
         margin-bottom: 10px;
         padding: 8px 16px;
@@ -66,12 +65,11 @@
         display: none;
       }
     </style>
-    s
   </head>
 
   <body>
     <a href="/">&larr; Terug</a>
-    <h1>Scrape Resultaat--</h1>
+    <h1>Scrape Resultaat</h1>
 
     {% if error %}
     <div
@@ -80,7 +78,9 @@
     >
       <strong>Fout:</strong> {{ error }}
     </div>
-    {% endif %} {% if message %}
+    {% endif %}
+
+    {% if message %}
     <div class="box">{{ message }}</div>
     {% endif %}
 
@@ -114,127 +114,29 @@
       class="box hidden"
       style="background: #ffefef; border-left: 5px solid #cc0000"
     >
-      <strong>Failed chapters:</strong>
+      <strong>Mislukte hoofdstukken:</strong>
       <ul id="failedList" style="margin-top: 10px"></ul>
     </div>
 
     <div class="box">
       <strong>Live log:</strong><br />
 
-      <!-- NEW BUTTON -->
       <button id="clearLogBtn" onclick="clearLogs()">Clear logs</button>
 
       <div id="logbox" class="logbox"></div>
     </div>
 
     <script>
+      // komt terug van Celery-scraping task
       const scrapingTaskId = "{{ scraping_task_id or '' }}";
 
-      let bookId = null;
+      let bookIdx = null;
       let polling = true;
 
-      if (scrapingTaskId) pollForBookId();
+      if (scrapingTaskId) pollForBookIdx();
-
-      function pollForBookId() {
-        fetch(`/celery-result/${scrapingTaskId}`)
-          .then((r) => r.json())
-          .then((data) => {
-            if (data.ready && data.result && data.result.book_id) {
-              bookId = data.result.book_id;
-              startLiveUI();
-            } else setTimeout(pollForBookId, 800);
-          })
-          .catch(() => setTimeout(pollForBookId, 1200));
-      }
-
-      function startLiveUI() {
-        document.getElementById("statusBox").classList.remove("hidden");
-        document.getElementById("abortBtn").classList.remove("hidden");
-
-        document.getElementById("abortBtn").onclick = () => {
-          fetch(`/abort/${bookId}`, { method: "POST" });
-        };
-
-        pollProgress();
-        pollLogs();
-      }
-
-      function pollProgress() {
-        if (!bookId) return;
-
-        fetch(`/progress/${bookId}`)
-          .then((r) => r.json())
-          .then((p) => {
-            const done = p.completed || 0;
-            const total = p.total || 0;
-
-            document.getElementById(
-              "progressText"
-            ).innerText = `Completed: ${done} / ${total} | Skipped: ${
-              p.skipped || 0
-            } | Failed: ${p.failed || 0}`;
-
-            const failedBox = document.getElementById("failedBox");
-            const failedList = document.getElementById("failedList");
-
-            if (p.failed_list && p.failed_list.length > 0) {
-              failedBox.classList.remove("hidden");
-              failedList.innerHTML = "";
-              p.failed_list.forEach((entry) => {
-                const li = document.createElement("li");
-                li.textContent = entry;
-                failedList.appendChild(li);
-              });
-            }
-
-            if (p.abort) {
-              document.getElementById("statusLine").innerText = "ABORTED";
-              polling = false;
-            } else if (done >= total && total > 0) {
-              document.getElementById("statusLine").innerText = "KLAAR ✔";
-              polling = false;
-            } else {
-              document.getElementById("statusLine").innerText = "Bezig…";
-            }
-
-            if (polling) setTimeout(pollProgress, 1000);
-          })
-          .catch(() => {
-            if (polling) setTimeout(pollProgress, 1500);
-          });
-      }
 
-      function pollLogs() {
+      // -----------------------------------------------------
-        if (!polling) return;
+      // Vraag Celery-result op, wacht tot de scraper een book_idx teruggeeft
-
+      // -----------------------------------------------------
-        fetch(`/logs`)
+      function pollForBookIdx() {
-          .then((r) => r.json())
+        fetch(`/celery-result/${scrapingTask
-          .then((data) => {
-            const logbox = document.getElementById("logbox");
-            logbox.innerHTML = "";
-
-            data.logs.forEach((line) => {
-              const div = document.createElement("div");
-              div.textContent = line;
-              logbox.appendChild(div);
-            });
-
-            logbox.scrollTop = logbox.scrollHeight;
-            setTimeout(pollLogs, 1000);
-          })
-          .catch(() => setTimeout(pollLogs, 1500));
-      }
-
-      // =========================================================
-      // NEW: Clear logs button handler
-      // =========================================================
-      function clearLogs() {
-        fetch("/clear-logs", { method: "POST" })
-          .then(() => {
-            document.getElementById("logbox").innerHTML = "";
-          })
-          .catch((e) => console.error("Clear logs failed:", e));
-      }
-    </script>
-  </body>
-</html>