Web Programming HW#3

Project Overview

主頁面

1. 使用者可以在這個頁面輸入（切換）使用者名稱，任何活動的留言都以此名稱顯示
2. 使用者可以在這個頁面總覽所有活動。每一項活動至少要能看到其活動名稱、自己是否參加（打勾符號）、目前有幾人參加三項資訊。
3. 點擊活動時，進入該活動之 「瀏覽活動」頁面。
4. 點擊「新增」按鈕時，打開 「新增活動」功能。
5. 「搜尋想參加的活動」欄位：使用者可以在這個欄位對活動名稱進行關鍵字搜尋。若活動名稱中包含該關鍵字，則應顯示於搜尋結果，反之則不應顯示。 例如：搜尋「猴子」關鍵字，可能跳出「山道猴子的台七乙」、「到中山大學找猴子老師」等等活動。相對地，不應找到「從台灣獼猴手中保護我們的孩子」、「總圖 Free Hug」等等不包含「猴子」關鍵字的活動。

「新增活動」功能

1. 提供使用者新增活動。請實作為懸浮於主頁面上方的 modal。
2. 新增活動時，使用者須填入活動名稱、開始日期時間、結束日期時間三項資訊。點擊「新增」按鈕時，若滿足下列四項條件，則新增該活動，並導引使用者前往該活動之「瀏覽活動」頁面。
   1. 三項資訊都有填寫，且時間形式僅包含年、月、日、小時
   2. 開始、結束日期時間合法（i.e., 是真實可能出現的時間）
   3. 開始時間早於結束時間
   4. 開始與結束時間相差最多 7 天（即 2023-10-19 15 ~ 2023-10-26 15，方便實作進階要求）
3. 成功新增活動後，須導引使用者至 「瀏覽活動」頁面，並且自動將使用者自身加入活動 。
4. 承上，如果不滿足全部四項條件，則不允許使用者新增活動，並提示使用者須滿足的條件。提示方法不拘，使用 alert、toast、或是顯示於輸入框上方等等皆可。顯示提示後，使用者可以繼續修改活動資訊。
5. 如果未點擊「新增」而是點擊 modal 外的區域，則取消新增活動。

「瀏覽活動」頁面

1. 使用者可以在這個頁面瀏覽個別活動之開始日期時間、結束日期時間、留言
2. 點擊左上角「返回」按鈕（圖中以 ❮ 符號表示），可以返回主頁面
3. 每一則留言須包含使用者名稱與留言內容。留言長度若長於一行能顯示的字數，則需自動換行（line wrapping）以顯示完整留言。
4. 留言區的留言應依照存入資料庫時間，從最舊到最新由上至下排列
5. 在留言區應該有一個留言輸入框，依照使用者是否參加活動而有不同行為：
   1. 未參加活動時，應提示使用者可以參加活動以加入討論，並不允許使用者輸入內容。
   2. 已參加活動時，應允許使用者輸入內容，並提示使用者可以在這裡輸入留言。
   3. 使用者點進一個未拜訪過的活動頁面時，預設狀態是「未參加活動」。
   4. 關於「如何參加/退出活動」，請見以下兩點。
6. 參加活動：在未參加活動的情況下，使用者可以點擊「我想參加」按鈕。按下按鈕後，按鈕應改為顯示「我已參加」，並改變顏色。此時用戶便可以使用留言功能。
   1. 留言輸入框應改為提示使用者可以輸入留言，當使用者 focused 在留言輸入框時，按下 enter 鍵即可發送訊息。
   2. 自己的訊息發送後，應即時更新至畫面上，不需使用者重新整理。
   3. 來自其他用戶的訊息發送後，不須立即顯示，重新整理後按照留言順序出現即可。
7. 退出活動：在已參加活動的情況下，使用者可以按下「我已參加」按鈕來退出活動。按下按鈕後，按鈕應改為顯示「我想參加」。不需刪除使用者已留下的留言，但是留言框必須返回無法使用的狀態。

進階要求（Perfect）

1. 未參加時顯示唯讀畫面如下圖(a)，詳細規定如下
   1. 每日需有 24 個時間格，意即每格 1 小時，每小時為一列；亦可用半格的方式表示，見下圖(b) (c)。
   2. 活動期間每一日需顯示為一欄。如基本要求所述，最多支援到七天（七欄）即可。
   3. 不屬於時間範圍內的格子需要標成灰色。例如若時間區間為 2023/10/16 08 ~ 2023/10/20 22，則需把下圖內五格標成灰色
   4. 將沒有人有空的格子標成白色，並依照有空的人數漸層，顏色由淺至深代表有空人數由少至多，最多支援到 6 人即可
   5. 最下方顯示每個顏色代表的人數
2. 在已參加活動的情況下才可以進行編輯。此時分為以下幾個操作狀況：
   1. 滑鼠不在表格上（Mouseout）：顯示目前所有人的有空時間，不醒目標示自己有空的時間。
   2. 滑鼠在表格上（Mouseover）：顯示自己有空的時間，以顏色醒目的外框標示，見上圖 (b)
   3. 點擊（Click）：切換目前的參加狀態。也就是說，點擊沒空的時間會變成有空，有空的時間則會變成沒空。
      1. 不屬於時間範圍內的格子需要標成灰色，且不能點擊
      2. （非進階要求的一部分）若同學想挑戰，也可以另外實作如拖曳等更方便的選擇方式。
   4. 每個時間格的顏色須根據當下的參與人數改變每格的顏色，見上圖 (a) (b) (c) 。
   5. 在「我已參加」的情況下，按下「我已參加」按鈕後會取消參與，並刪掉時間表內自己的時間，但不刪除留言。

Running the app

1. Clone the repo

2. Install dependencies

yarn install

3. Create a .env.local file in the root of the project and add a valid Postgres URL. To get a Postgres URL, follow the instructions here.

This is just an example, you should replace the URL with your own.

POSTGRES_URL="postgres://postgres:postgres@localhost:5432/twitter"

4. Run the migrations

yarn migrate

4. Start the app

yarn dev

請記得清空資料庫！ 每個操作會需要等待一點時間，請等一項操作 load 完成，再進行其他操作。速度會受使用的 DB 類型以及作業系統影響，需麻煩您耐心等待，感謝！