Match assignment requirements

Add required IDs and classes, tableName configuration, form-based editing and contribution link.

Author: vistula-team-project-79841

README.md

@@ -1,4 +1,4 @@
-# Vistula Task Manager
+# Task Manager
 
 A browser-based task manager for the Vistula University team assignment. The application uses the Supabase REST API and supports public create, read, update and delete operations on the `tasks` table.
 
@@ -13,7 +13,7 @@ A browser-based task manager for the Vistula University team assignment. The app
 
 - `index.html` contains the responsive user interface.
 - `app.js` calls the Supabase REST API and implements CRUD operations.
-- `config.json` contains only the project URL and publishable key.
+- `config.json` contains the project URL, publishable key and required `tasks` table name.
 - `README.md` documents the project and collaboration workflow.
 
 ## Data model
@@ -51,6 +51,8 @@ Each student keeps a separate `vistula-task-manager` repository and a separate S
 
 This repository belongs only to student `79841`. A partner must sign in to their own GitHub and Supabase accounts before any work is done in their repository.
 
+The two collaboration Pull Request links will be added here after both students complete and merge the required contributions. The repository owner must not create `contribution.html` or `contribution.json` directly.
+
 ## Local use
 
 Serve the folder through a local web server because browsers can block `fetch()` from `file://` pages:

app.js

@@ -1,12 +1,15 @@
 const form = document.querySelector('#task-form');
-const titleInput = document.querySelector('#title');
-const descriptionInput = document.querySelector('#description');
+const titleInput = document.querySelector('#task-title');
+const descriptionInput = document.querySelector('#task-description');
+const submitButton = document.querySelector('#task-submit');
 const taskList = document.querySelector('#task-list');
-const statusElement = document.querySelector('#status');
+const statusElement = document.querySelector('#status-message');
 
 let apiUrl;
 let apiKey;
+let tableName;
 let tasks = [];
+let editingTaskId = null;
 
 function setStatus(message, isError = false) {
   statusElement.textContent = message;
@@ -31,7 +34,7 @@ async function request(path = '', options = {}) {
     ...options.headers,
   };
 
-  const response = await fetch(`${apiUrl}/rest/v1/tasks${path}`, {
+  const response = await fetch(`${apiUrl}/rest/v1/${tableName}${path}`, {
     ...options,
     headers,
   });
@@ -61,25 +64,31 @@ function renderTasks() {
 
   for (const task of tasks) {
     const item = document.createElement('li');
-    item.className = `task${task.completed ? ' completed' : ''}`;
+    item.className = `task-item${task.completed ? ' completed' : ''}`;
+    item.dataset.id = task.id;
 
-    const toggle = actionButton(task.completed ? '✓' : '○', 'toggle', () => {
+    const toggle = actionButton(task.completed ? '✓' : '○', 'toggle toggle-task', () => {
       updateTask(task.id, { completed: !task.completed });
     });
     toggle.setAttribute('aria-label', task.completed ? `Mark ${task.title} as open` : `Mark ${task.title} as completed`);
 
     const copy = document.createElement('div');
     const heading = document.createElement('h2');
+    heading.className = 'task-title';
     heading.textContent = task.title;
     const description = document.createElement('p');
+    description.className = 'task-description';
     description.textContent = task.description || 'No description';
-    copy.append(heading, description);
+    const taskStatus = document.createElement('p');
+    taskStatus.className = 'task-status';
+    taskStatus.textContent = task.completed ? 'Completed' : 'Open';
+    copy.append(heading, description, taskStatus);
 
     const actions = document.createElement('div');
     actions.className = 'task-actions';
     actions.append(
-      actionButton('Edit', '', () => editTask(task)),
-      actionButton('Delete', 'danger', () => deleteTask(task)),
+      actionButton('Edit', 'edit-task', () => startEditing(task)),
+      actionButton('Delete', 'danger delete-task', () => deleteTask(task)),
     );
 
     item.append(toggle, copy, actions);
@@ -100,23 +109,29 @@ async function loadTasks() {
 
 async function createTask(event) {
   event.preventDefault();
-  const submitButton = form.querySelector('button[type="submit"]');
   submitButton.disabled = true;
 
   try {
-    await request('', {
-      method: 'POST',
+    const task = {
+      title: titleInput.value.trim(),
+      description: descriptionInput.value.trim(),
+      completed: editingTaskId === null
+        ? false
+        : Boolean(tasks.find(({ id }) => id === editingTaskId)?.completed),
+    };
+
+    await request(editingTaskId === null ? '' : `?id=eq.${encodeURIComponent(editingTaskId)}`, {
+      method: editingTaskId === null ? 'POST' : 'PATCH',
       headers: { Prefer: 'return=representation' },
-      body: JSON.stringify({
-        title: titleInput.value.trim(),
-        description: descriptionInput.value.trim(),
-        completed: false,
-      }),
+      body: JSON.stringify(task),
     });
+    const wasEditing = editingTaskId !== null;
+    editingTaskId = null;
     form.reset();
+    submitButton.textContent = 'Add task';
     titleInput.focus();
     await loadTasks();
-    setStatus('Task added.');
+    setStatus(wasEditing ? 'Task updated.' : 'Task added.');
   } catch (error) {
     setStatus(error.message, true);
   } finally {
@@ -139,20 +154,13 @@ async function updateTask(id, changes) {
   }
 }
 
-function editTask(task) {
-  const title = window.prompt('Task title', task.title);
-  if (title === null) return;
-
-  const trimmedTitle = title.trim();
-  if (!trimmedTitle) {
-    setStatus('A task title is required.', true);
-    return;
-  }
-
-  const description = window.prompt('Task description', task.description || '');
-  if (description === null) return;
-
-  updateTask(task.id, { title: trimmedTitle, description: description.trim() });
+function startEditing(task) {
+  editingTaskId = task.id;
+  titleInput.value = task.title;
+  descriptionInput.value = task.description || '';
+  submitButton.textContent = 'Save task';
+  titleInput.focus();
+  setStatus(`Editing “${task.title}”.`);
 }
 
 async function deleteTask(task) {
@@ -174,15 +182,16 @@ async function initialise() {
     const config = await readResponse(response);
     apiUrl = config.supabaseUrl.replace(/\/$/, '');
     apiKey = config.supabasePublishableKey;
+    tableName = config.tableName;
 
-    if (!apiUrl || !apiKey?.startsWith('sb_publishable_')) {
+    if (!apiUrl || !apiKey?.startsWith('sb_publishable_') || tableName !== 'tasks') {
       throw new Error('Supabase configuration is missing or invalid.');
     }
 
     form.addEventListener('submit', createTask);
     await loadTasks();
   } catch (error) {
-    form.querySelector('button[type="submit"]').disabled = true;
+    submitButton.disabled = true;
     setStatus(error.message, true);
   }
 }

config.json

@@ -1,4 +1,5 @@
 {
   "supabaseUrl": "https://vuqcmmgozrcangvfeilb.supabase.co",
-  "supabasePublishableKey": "sb_publishable_UnOvcqYWK7x4360OSMwSQQ_9-NwqCOH"
+  "supabasePublishableKey": "sb_publishable_UnOvcqYWK7x4360OSMwSQQ_9-NwqCOH",
+  "tableName": "tasks"
 }

index.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="A small task manager powered by the Supabase REST API.">
   <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' https://vuqcmmgozrcangvfeilb.supabase.co; style-src 'self' 'unsafe-inline'; script-src 'self'; img-src 'self' data:; base-uri 'self'; form-action 'self'">
-  <title>Vistula Task Manager</title>
+  <title>Task Manager</title>
   <style>
     :root {
       color-scheme: light;
@@ -122,7 +122,7 @@
       list-style: none;
     }
 
-    .task {
+    .task-item {
       display: grid;
       grid-template-columns: auto 1fr auto;
       gap: 14px;
@@ -133,44 +133,46 @@
       background: var(--paper);
     }
 
-    .task h2 { margin: 0 0 4px; font-size: 1rem; }
-    .task p { margin: 0; color: var(--muted); line-height: 1.45; }
-    .task.completed h2 { text-decoration: line-through; color: var(--muted); }
+    .task-item h2 { margin: 0 0 4px; font-size: 1rem; }
+    .task-item p { margin: 0; color: var(--muted); line-height: 1.45; }
+    .task-item.completed h2 { text-decoration: line-through; color: var(--muted); }
+    .task-status { margin-top: 6px !important; font-size: 0.82rem; font-weight: 700; }
     .task-actions { display: flex; gap: 8px; }
     .toggle { min-width: 42px; padding: 0; font-size: 1.15rem; }
     .empty { padding: 28px 0 10px; text-align: center; color: var(--muted); }
 
     @media (max-width: 680px) {
       main { padding-top: 32px; }
       form { grid-template-columns: 1fr; }
-      .task { grid-template-columns: auto 1fr; }
+      .task-item { grid-template-columns: auto 1fr; }
       .task-actions { grid-column: 2; flex-wrap: wrap; }
     }
   </style>
 </head>
 <body>
   <main>
     <header>
-      <h1>Vistula Task Manager</h1>
-      <p>Create, update and finish tasks stored in Supabase.</p>
+      <h1>Task Manager</h1>
+      <p>Vistula student ID: <strong id="student-id">79841</strong></p>
     </header>
 
     <section class="panel" aria-labelledby="task-form-title">
       <h2 id="task-form-title" hidden>Add a task</h2>
       <form id="task-form">
         <label>
           Title
-          <input id="title" name="title" maxlength="120" required autocomplete="off">
+          <input id="task-title" name="title" maxlength="120" required autocomplete="off">
         </label>
         <label>
           Description
-          <input id="description" name="description" maxlength="500" autocomplete="off">
+          <input id="task-description" name="description" maxlength="500" autocomplete="off">
         </label>
-        <button class="primary" type="submit">Add task</button>
+        <button id="task-submit" class="primary" type="submit">Add task</button>
       </form>
 
-      <p id="status" class="status" role="status" aria-live="polite">Loading tasks…</p>
+      <p id="status-message" class="status" role="status" aria-live="polite">Loading tasks…</p>
       <ul id="task-list" aria-label="Tasks"></ul>
+      <p><a id="contribution-link" href="contribution.html">Open team contribution</a></p>
     </section>
   </main>