Added log

Author: dominicletz

.tool-versions

@@ -1,2 +1,2 @@
-elixir 1.16.3-otp-26
-erlang 26.2.5.9
+elixir 1.19.5-otp-28
+erlang 28.3.1

FEATURES.md

@@ -0,0 +1,12 @@
+# Features
+
+- Adding a new todo (optionally shows a desktop notification)
+- Marking a todo as completed
+- Deleting a todo
+- Viewing the completed log
+
+# The Completed Log
+
+- The completed log should be displayed in a list
+- The completed log should be sorted by the date it was completed and show the day separator
+

assets/css/todo.scss

@@ -16,6 +16,54 @@ body.ios {
     padding: 1em;
 }
 
+.header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5em;
+
+    h2 {
+        margin: 0;
+        flex: 1;
+        line-height: 1;
+        display: flex;
+        align-items: center;
+    }
+
+    form {
+        display: flex;
+        align-items: center;
+        gap: 0.2em;
+    }
+
+    padding-bottom: 1em;
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+}
+
+.icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: 5px;
+    padding: 0.35em 0.5em;
+    font-size: 1.2em;
+    cursor: pointer;
+    line-height: 1;
+    min-height: 2em;
+    box-sizing: border-box;
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.3);
+    }
+}
+
 h2 {
     text-align: left;
     color: white;
@@ -32,7 +80,7 @@ input {
     font-size: 16px;
 }
 
-button {
+form button {
     padding: 10px;
     width: 25%;
     border-radius: 5px;
@@ -50,7 +98,7 @@ button {
 form {
     display: flex;
     justify-content: stretch;
-    padding-bottom: 2em;
+    align-items: center;
 }
 
 ul {
@@ -98,4 +146,67 @@ li {
         background-color: #f44336;
         color: white;
     }
+}
+
+.log-view {
+    h3 {
+        color: white;
+        margin-top: 0.5em;
+    }
+}
+
+.back-btn {
+    background: #555;
+    color: white;
+    border: 1px solid #666;
+    border-radius: 5px;
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 14px;
+    margin-bottom: 1em;
+
+    &:hover {
+        background: #666;
+    }
+}
+
+.log-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.log-day-separator {
+    color: white;
+    font-size: 0.95em;
+    font-weight: 600;
+    padding: 0.6em 12px 0.3em;
+    margin-top: 0.75em;
+    cursor: default;
+    background: transparent;
+    list-style: none;
+
+    &:first-child {
+        margin-top: 0;
+    }
+}
+
+.log-entry {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 12px;
+    background: #f9f9f9;
+    border-radius: 5px;
+    margin: 0.3em 0;
+    cursor: default;
+
+    .log-text {
+        flex: 1;
+    }
+    .log-date {
+        color: #777;
+        font-size: 0.9em;
+        margin-left: 1em;
+    }
 }

assets/js/app.js

@@ -11,13 +11,34 @@ import "phoenix_html"
 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let csrfToken = (function() {
+  let meta = document.querySelector("meta[name='csrf-token']")
+  if (!meta) {
+    console.error("[LiveView] Missing meta[name='csrf-token'] – check your root layout. Clicks will not work.")
+    return ""
+  }
+  let token = meta.getAttribute("content")
+  if (token == null || token === "") {
+    console.error("[LiveView] csrf-token meta is empty. Clicks may not work.")
+    return ""
+  }
+  return token
+})()
 
-// connect if there are any LiveViews on the page
-liveSocket.connect()
+let Hooks = {}
+try {
+  let liveSocket = new LiveSocket("/live", Socket, {
+    params: {_csrf_token: csrfToken},
+    hooks: Hooks
+  })
 
-// expose liveSocket on window for web console debug logs and latency simulation:
-// >> liveSocket.enableDebug()
-// >> liveSocket.enableLatencySim(1000)
-window.liveSocket = liveSocket
+  // connect if there are any LiveViews on the page
+  liveSocket.connect()
+
+  // expose liveSocket on window for web console debug logs and latency simulation:
+  // >> liveSocket.enableDebug()
+  // >> liveSocket.enableLatencySim(1000)
+  window.liveSocket = liveSocket
+} catch (err) {
+  console.error("[LiveView] Failed to start:", err)
+}

config/config.exs

@@ -28,9 +28,7 @@ config :logger, :console,
 
 # Configures the endpoint
 config :todo_app, TodoWeb.Endpoint,
-  # url: [host: "localhost", port: 10_000 + :rand.uniform(45_000)],
-  # because of the iOS rebind - this is now a fixed port, but randomly selected
-  http: [ip: {127, 0, 0, 1}, port: 10_000 + :rand.uniform(45_000)],
+  http: [ip: {127, 0, 0, 1}, port: 30_979],
   adapter: Bandit.PhoenixAdapter,
   render_errors: [
     formats: [html: TodoWeb.ErrorHTML, json: TodoWeb.ErrorJSON],

config/dev.exs

@@ -10,6 +10,7 @@ config :todo_app, TodoWeb.Endpoint,
   debug_errors: true,
   code_reloader: true,
   check_origin: false,
+  force_watchers: true,
   watchers: [
     esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
     sass:

lib/todo_app/repo.ex

@@ -9,5 +9,13 @@ defmodule TodoApp.Repo do
           status TEXT
         )
     """)
+
+    Ecto.Adapters.SQL.query!(__MODULE__, """
+        CREATE TABLE IF NOT EXISTS completed_tasks_log (
+          id INTEGER PRIMARY KEY AUTOINCREMENT,
+          text TEXT NOT NULL,
+          completed_at TEXT NOT NULL
+        )
+    """)
   end
 end

lib/todo_app/todo.ex

@@ -14,6 +14,8 @@ defmodule TodoApp.Todo do
   end
 
   @topic "todos"
+  @completed_log_topic "completed_tasks_log"
+
   def toggle_todo(id) do
     todo = Repo.get(__MODULE__, id)
 
@@ -23,12 +25,28 @@ defmodule TodoApp.Todo do
         "done" -> "todo"
       end
 
+    if status == "done" do
+      log_completed_task(todo.text)
+    end
+
     change(todo, %{status: status})
     |> Repo.update()
 
     Phoenix.PubSub.broadcast(TodoApp.PubSub, @topic, :changed)
   end
 
+  defp log_completed_task(text) do
+    completed_at = DateTime.utc_now() |> DateTime.to_iso8601()
+
+    Ecto.Adapters.SQL.query!(
+      Repo,
+      "INSERT INTO completed_tasks_log (text, completed_at) VALUES (?, ?)",
+      [text, completed_at]
+    )
+
+    Phoenix.PubSub.broadcast(TodoApp.PubSub, @completed_log_topic, :completed_log_changed)
+  end
+
   def drop_todo(id) do
     Repo.get(__MODULE__, id)
     |> Repo.delete()
@@ -44,11 +62,30 @@ defmodule TodoApp.Todo do
   end
 
   def all_todos() do
-    order_by(__MODULE__, asc: :id)
+    order_by(__MODULE__, desc: :id)
     |> Repo.all()
   end
 
   def subscribe() do
     Phoenix.PubSub.subscribe(TodoApp.PubSub, @topic)
   end
+
+  def list_completed_log() do
+    {:ok, result} =
+      Ecto.Adapters.SQL.query(
+        Repo,
+        "SELECT id, text, completed_at FROM completed_tasks_log ORDER BY completed_at DESC",
+        []
+      )
+
+    rows = result.rows || []
+
+    Enum.map(rows, fn [id, text, completed_at] ->
+      %{id: id, text: text, completed_at: completed_at}
+    end)
+  end
+
+  def subscribe_completed_log() do
+    Phoenix.PubSub.subscribe(TodoApp.PubSub, @completed_log_topic)
+  end
 end

lib/todo_web/endpoint.ex

@@ -47,6 +47,10 @@ defmodule TodoWeb.Endpoint do
   plug Plug.Head
 
   plug Plug.Session, @session_options
-  plug Desktop.Auth
+
+  if not code_reloading? do
+    plug Desktop.Auth
+  end
+
   plug TodoWeb.Router
 end