feat(timetable): add time-based timeline view

[yudong-0222]

說明

經過 #7 的建議與 Review 後，我重新以「功能」提出這個 PR，再麻煩進行 Review，謝謝！

我將原本以固定節次矩陣呈現的課表，改為依實際時間比例顯示的 Timeline。

此 PR 僅針對「課表顯示」功能，「時間查詢功能」與其他 RWD UI 會再另外拆 PR 出來。

修改內容

• 直接從既有 classStorage / rowspanize() 結果建立 Timeline sessions
• 依課程實際開始時間與既有 matrix 區段計算顯示位置與高度
• 以星期一到星期六，共六欄去呈現課程
• 保留既有的課程顏色與文字顏色。
• 新增 Timeline 課程資訊視窗
• reuse 既有的課程操作：
  • 刪除課程
  • 修改顏色
  • 修改文字樣式
  • 查看評價
• 時間搜尋模式仍保留原本 matrix renderer 與操作流程，因為這邊涉及到一些操作、渲染跟互動的部分，我認為這樣會讓這個 PR 又變得更加雜亂，因此沒有在本次 PR 中做出更動。

Reuse / Implementation Notes

本次在實作上優先 reuse 原始專案的既有方法：

• classStorage 作為課表資料來源
• rowspanize() 產生的連續區段資訊
• Course getters
• courseDelete()
• 現有 ColorPicker / Vuex course state
• show_comment()

因此，未另外新增非必要的課程時間解析、range parser、overlap projection 或新的 course data model。

Testing

• Production build (npm run build)
• 空課表 Timeline
• 一般數字節次
• A–J 節次
• 非連續時段
• 跨星期相同課程
• 自訂課程
• 切換課表
• 課程顏色 / 文字顏色
• 課程詳細資訊
• 刪除課程
• 修改顏色
• 修改文字樣式
• 查看評價
• 原本時間搜尋模式未受影響

[yudong-0222]

另外，我想請問在「自定義課程」新增節次為「1 ~ E」這種「數字 ~ 英文」或「英文 ~ 數字」是合法的操作嗎？

[syzygy608]

另外，我想請問在「自定義課程」新增節次為「1 ~ E」這種「數字 ~ 英文」或「英文 ~ 數字」是合法的操作嗎？

在我們的設計下，起訖時間合理就是一個合法的操作