Add Lab Logs tab: markdown notes with SQLite storage

app.py

@@ -4,12 +4,15 @@ Stack: Flask · Jinja2 · vanilla JS/CSS · gunicorn
 """
 
 import os
+import sqlite3
+from datetime import datetime, timezone
 from flask import (
     Flask, render_template, request, redirect,
-    url_for, session, flash, jsonify,
+    url_for, session, flash, jsonify, g,
 )
 from werkzeug.middleware.proxy_fix import ProxyFix
 from dotenv import load_dotenv
+import markdown
 
 load_dotenv()
 
@@ -25,6 +28,8 @@ app.config.update(
 
 ADMIN_PASSWORD = os.getenv("ADMIN_PASSWORD", "bpel123")
 
+DB_PATH = os.getenv("DB_PATH", os.path.join(os.path.dirname(__file__), "lab.db"))
+
 # ── oTree configuration ────────────────────────────────────────────
 OTREE_SESSION_URL = os.getenv(
     "OTREE_SESSION_URL",
@@ -38,10 +43,45 @@ OTREE_SESSION_URL = os.getenv(
 # ─────────────────────────────────────────────────────────────────
 SIDEBAR_PAGES = [
     ("page_session", "🖥️", "Session"),
-    # ("page_example", "📊", "Example"),   # ← uncomment to add pages
+    ("page_logs",    "📝", "Lab Logs"),
 ]
 
 
+# ── SQLite helpers ──────────────────────────────────────────────────
+def get_db():
+    if "db" not in g:
+        g.db = sqlite3.connect(DB_PATH)
+        g.db.row_factory = sqlite3.Row
+        g.db.execute("PRAGMA journal_mode=WAL")
+    return g.db
+
+
+@app.teardown_appcontext
+def close_db(exc):
+    db = g.pop("db", None)
+    if db is not None:
+        db.close()
+
+
+def init_db():
+    db = sqlite3.connect(DB_PATH)
+    db.execute("""
+        CREATE TABLE IF NOT EXISTS logs (
+            id         INTEGER PRIMARY KEY AUTOINCREMENT,
+            title      TEXT    NOT NULL,
+            body       TEXT    NOT NULL DEFAULT '',
+            author     TEXT    NOT NULL DEFAULT '',
+            created_at TEXT    NOT NULL,
+            updated_at TEXT    NOT NULL
+        )
+    """)
+    db.commit()
+    db.close()
+
+
+init_db()
+
+
 # ── Auth guard ──────────────────────────────────────────────────────
 @app.before_request
 def require_login():
@@ -90,7 +130,75 @@ def page_session():
     )
 
 
-# ── API helpers (expand as needed) ──────────────────────────────────
+# ── Lab Logs page ───────────────────────────────────────────────────
+@app.route("/logs")
+def page_logs():
+    db = get_db()
+    rows = db.execute(
+        "SELECT * FROM logs ORDER BY created_at DESC"
+    ).fetchall()
+    logs = []
+    for r in rows:
+        logs.append({
+            "id": r["id"],
+            "title": r["title"],
+            "body": r["body"],
+            "body_html": markdown.markdown(
+                r["body"], extensions=["fenced_code", "tables", "nl2br"]
+            ),
+            "author": r["author"],
+            "created_at": r["created_at"],
+            "updated_at": r["updated_at"],
+        })
+    return render_template("pages/logs.html", active_page="page_logs", logs=logs)
+
+
+# ── Lab Logs API ────────────────────────────────────────────────────
+@app.route("/api/logs", methods=["POST"])
+def api_logs_create():
+    data = request.get_json(silent=True) or {}
+    title = (data.get("title") or "").strip()
+    if not title:
+        return jsonify(error="Title is required."), 400
+    body = (data.get("body") or "").strip()
+    author = (data.get("author") or "").strip()
+    now = datetime.now(timezone.utc).isoformat()
+    db = get_db()
+    cur = db.execute(
+        "INSERT INTO logs (title, body, author, created_at, updated_at) VALUES (?,?,?,?,?)",
+        (title, body, author, now, now),
+    )
+    db.commit()
+    return jsonify(id=cur.lastrowid), 201
+
+
+@app.route("/api/logs/<int:log_id>", methods=["PUT"])
+def api_logs_update(log_id):
+    data = request.get_json(silent=True) or {}
+    title = (data.get("title") or "").strip()
+    if not title:
+        return jsonify(error="Title is required."), 400
+    body = (data.get("body") or "").strip()
+    author = (data.get("author") or "").strip()
+    now = datetime.now(timezone.utc).isoformat()
+    db = get_db()
+    db.execute(
+        "UPDATE logs SET title=?, body=?, author=?, updated_at=? WHERE id=?",
+        (title, body, author, now, log_id),
+    )
+    db.commit()
+    return jsonify(ok=True)
+
+
+@app.route("/api/logs/<int:log_id>", methods=["DELETE"])
+def api_logs_delete(log_id):
+    db = get_db()
+    db.execute("DELETE FROM logs WHERE id=?", (log_id,))
+    db.commit()
+    return jsonify(ok=True)
+
+
+# ── API helpers ─────────────────────────────────────────────────────
 @app.route("/api/health")
 def api_health():
     return jsonify(status="ok")

requirements.txt

@@ -1,3 +1,4 @@
 flask==3.1.3
 gunicorn==23.0.0
+markdown==3.8
 python-dotenv==1.1.0

templates/pages/logs.html

@@ -0,0 +1,200 @@
+{% extends "base.html" %}
+
+{% block title %}Lab Logs — Lab Portal{% endblock %}
+
+{% block header %}
+<div class="page-header" style="display:flex; align-items:center; justify-content:space-between;">
+  <div>
+    <h1>Lab Logs</h1>
+    <p>Markdown notes visible to all lab members.</p>
+  </div>
+  <button class="btn btn-primary" onclick="openEditor()">+ New note</button>
+</div>
+{% endblock %}
+
+{% block extra_css %}
+<style>
+  /* ── Note cards ── */
+  .log-list { display: flex; flex-direction: column; gap: 1rem; }
+  .log-card { position: relative; }
+  .log-card h2 { font-size: 1.05rem; margin-bottom: .15rem; }
+  .log-meta {
+    font-size: .78rem;
+    color: var(--text-dim);
+    margin-bottom: .75rem;
+    display: flex;
+    gap: 1rem;
+  }
+  .log-body { font-size: .9rem; line-height: 1.65; }
+  .log-body h1, .log-body h2, .log-body h3 { margin: .75rem 0 .35rem; }
+  .log-body p   { margin-bottom: .5rem; }
+  .log-body ul, .log-body ol { padding-left: 1.4rem; margin-bottom: .5rem; }
+  .log-body code {
+    background: var(--bg); padding: .1rem .35rem; border-radius: 4px; font-size: .85em;
+  }
+  .log-body pre {
+    background: var(--bg); padding: .75rem 1rem; border-radius: 8px;
+    overflow-x: auto; margin-bottom: .75rem;
+  }
+  .log-body pre code { background: none; padding: 0; }
+  .log-body table { border-collapse: collapse; margin-bottom: .75rem; width: 100%; }
+  .log-body th, .log-body td {
+    border: 1px solid var(--border); padding: .35rem .6rem; text-align: left; font-size: .85rem;
+  }
+  .log-body th { background: var(--surface2); }
+  .log-actions {
+    position: absolute; top: 1.25rem; right: 1.25rem;
+    display: flex; gap: .4rem;
+  }
+  .log-actions button {
+    background: var(--surface2); border: 1px solid var(--border);
+    color: var(--text-dim); border-radius: 6px; padding: .3rem .55rem;
+    cursor: pointer; font-size: .78rem; transition: color .15s, border-color .15s;
+  }
+  .log-actions button:hover { color: var(--text); border-color: var(--text-dim); }
+  .log-actions button.del:hover { color: var(--danger); border-color: var(--danger); }
+
+  .empty-state {
+    text-align: center; color: var(--text-dim); padding: 4rem 1rem;
+    font-size: .95rem;
+  }
+
+  /* ── Modal editor ── */
+  .modal-overlay {
+    display: none;
+    position: fixed; inset: 0;
+    background: rgba(0,0,0,.55);
+    z-index: 100;
+    align-items: center; justify-content: center;
+  }
+  .modal-overlay.open { display: flex; }
+  .modal {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    width: 95%; max-width: 620px;
+    padding: 1.75rem;
+  }
+  .modal h2 { font-size: 1.1rem; margin-bottom: 1rem; }
+  .modal .field { margin-bottom: 1rem; }
+  .modal label {
+    display: block; font-size: .82rem; color: var(--text-dim); margin-bottom: .3rem;
+  }
+  .modal input, .modal textarea {
+    width: 100%; padding: .55rem .75rem; border-radius: 8px;
+    border: 1px solid var(--border); background: var(--bg);
+    color: var(--text); font-size: .9rem; font-family: inherit;
+    outline: none; transition: border-color .15s;
+  }
+  .modal input:focus, .modal textarea:focus { border-color: var(--accent); }
+  .modal textarea { min-height: 200px; resize: vertical; }
+  .modal-footer { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.25rem; }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="log-list" id="log-list">
+  {% if not logs %}
+    <div class="empty-state" id="empty-state">No notes yet. Click <strong>+ New note</strong> to get started.</div>
+  {% endif %}
+  {% for log in logs %}
+  <div class="card log-card" data-id="{{ log.id }}">
+    <div class="log-actions">
+      <button onclick="editLog({{ log.id }})">Edit</button>
+      <button class="del" onclick="deleteLog({{ log.id }})">Delete</button>
+    </div>
+    <h2>{{ log.title }}</h2>
+    <div class="log-meta">
+      {% if log.author %}<span>by {{ log.author }}</span>{% endif %}
+      <span>{{ log.created_at[:16].replace('T', ' ') }} UTC</span>
+    </div>
+    <div class="log-body">{{ log.body_html | safe }}</div>
+  </div>
+  {% endfor %}
+</div>
+
+<!-- Editor modal -->
+<div class="modal-overlay" id="modal">
+  <div class="modal">
+    <h2 id="modal-title">New note</h2>
+    <input type="hidden" id="edit-id" value="" />
+    <div class="field">
+      <label for="note-title">Title</label>
+      <input id="note-title" placeholder="e.g. Session 12 setup notes" />
+    </div>
+    <div class="field">
+      <label for="note-author">Author <span style="color:var(--text-dim)">(optional)</span></label>
+      <input id="note-author" placeholder="Your name" />
+    </div>
+    <div class="field">
+      <label for="note-body">Body <span style="color:var(--text-dim)">(Markdown supported)</span></label>
+      <textarea id="note-body" placeholder="Write your note here..."></textarea>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-outline" onclick="closeEditor()">Cancel</button>
+      <button class="btn btn-primary" id="save-btn" onclick="saveNote()">Save</button>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+const modal = document.getElementById("modal");
+
+/* ── Existing log data for editing ── */
+const logsData = {{ logs | tojson }};
+
+function openEditor(id) {
+  document.getElementById("edit-id").value = id || "";
+  document.getElementById("modal-title").textContent = id ? "Edit note" : "New note";
+  if (id) {
+    const log = logsData.find(l => l.id === id);
+    if (log) {
+      document.getElementById("note-title").value  = log.title;
+      document.getElementById("note-author").value = log.author;
+      document.getElementById("note-body").value   = log.body;
+    }
+  } else {
+    document.getElementById("note-title").value  = "";
+    document.getElementById("note-author").value = "";
+    document.getElementById("note-body").value   = "";
+  }
+  modal.classList.add("open");
+  document.getElementById("note-title").focus();
+}
+
+function closeEditor() { modal.classList.remove("open"); }
+
+async function saveNote() {
+  const id     = document.getElementById("edit-id").value;
+  const title  = document.getElementById("note-title").value.trim();
+  const author = document.getElementById("note-author").value.trim();
+  const body   = document.getElementById("note-body").value;
+  if (!title) { alert("Title is required."); return; }
+
+  const url    = id ? `/api/logs/${id}` : "/api/logs";
+  const method = id ? "PUT" : "POST";
+  const res = await fetch(url, {
+    method,
+    headers: {"Content-Type": "application/json"},
+    body: JSON.stringify({title, author, body}),
+  });
+  if (res.ok) { location.reload(); }
+  else { alert("Save failed."); }
+}
+
+function editLog(id) { openEditor(id); }
+
+async function deleteLog(id) {
+  if (!confirm("Delete this note?")) return;
+  const res = await fetch(`/api/logs/${id}`, {method: "DELETE"});
+  if (res.ok) { location.reload(); }
+}
+
+/* Close modal on Escape */
+document.addEventListener("keydown", e => { if (e.key === "Escape") closeEditor(); });
+/* Close modal on overlay click */
+modal.addEventListener("click", e => { if (e.target === modal) closeEditor(); });
+</script>
+{% endblock %}