Components
===
## Git

Clone from:

https://bitbucket.org/meichudevteam/mc-panel/src/dev/

Use dev branch!

> Original Template: https://github.com/sbkwgh/forum

### Forum
Index
Phone/Pad Select Options

### Dashboard
### General
Color Picker
### Moderation
Loading Message
Modal Window

### User
Select Filter
Sort Menu

### Start

## Overview
> `src`
>> **App.vue** : HomePage
>> **main.js** : vue-router!!!
>> router.js
>
>> `assets`
>>> `scss`
>>> `js`
>
>> `store`
>>> index.js
>>> `modules`
>
>
>> `components`
>>> `routes`
>>>> **Admin.vue** : Admin管理介面,包括Dashborad, General, Moderation, User下面四分項
>>>> **AdminDashboard.vue**: Dashboard介面，呈現如最近貼文, 貼文分類圓餅圖等功能，分項詳見`widgets directory`
>>>> **AdminGeneral** : Gerneral介面，有更改forum名稱設定, 管理categories以及產生token給新使用者三項功能，分項詳見(General)
>>>> **AdminModerationBannedUsers** : 處理ban掉user的介面，可以顯示目前被禁用的使用者以及齊備禁用的功能與原因，也可以新增要被禁用的對象
>>>> **AdminModerationReports** : 處理被report的post的介面
>>>> **AdminUsers** : 可以看到所有用戶資訊的介面
>>>>
>>>> **Index** : Forum的主要介面
>>>> **NotFound** : 當404NotFound時的default畫面
>>>> P
>>>> Search
>>>> SearchUsersThreads
>>>> **Settings** : Setting的介面，分為Account與General兩個類別
>>>> **SettingsAccount** : 刪除帳號或是更改密碼
>>>> **SettingGeneral** : 管理你的大頭照跟自我介紹
>>>> **Start** : 一開始新增最初的管理者帳號畫面，截圖如上
>>>> **Thread** : 管理，刪除這個thread
>>>> **ThreadNew** : 新增一個thread，還可以由此增加poll功能
>>>> **User** : 該user的資料模板
>>>> **UserPosts** : 該User的posts
>>>> **UserThreads** : 該user的threads
>>>
>>> `widgets` **(Dashboard)**
>>>> **CategoriesChart** : 以圓餅圖的方式呈現每個category的thread數量
>>>> **LineChart** : 畫連續數線圖的工具，PageViewsChart 跟 NewUserChart 都有用到
>>>> **NewPosts** : 顯示new threads in 24 hrs
>>>> **NewUserChart** : 顯示每天增長的新使用者量
>>>> **PageViewsChart** : 顯示近一個禮拜每天的page views
>>>> **TopPosts** : 顯示今天的排行榜(top threads by page views)
>>>
>>> **AdminCategories.vue (General)** : 可以新增category(顏色/名稱xD),編輯,刪減現有categories
>>> **AdminForumInfo.vue (General)** : 設定顯示的名稱和敘述
>>> **AdminNewAdmin (General)** : 產生token給新使用者
>>> **ColourPicker (General -> AdminCategories)** : 幫category選顏色(no backend code)
>>>
>>> **Avataricon** : 人像頭貼的模板
>>> **ConfirmModal** : 跳出來讓你再次確認的模板
>>> **EmojiSelector** : emoji貼圖功能
>>> ErrorTooltip
>>> **FancyInput** : ModalWindow的input模板
>>> **FancyTexarea** :
>>> **Heartbutton** : 按愛心的功能
>>>
>>> **InfoTooltip** : po文打字的功能
>>> **InputEditor
>>> InputEditorCore
>>> InputEditorPreview**
>>>
>>> LoadingButton
>>> **LoadingIcon** : LoadingMessage上面的那三個動畫點點
>>> **LoadingMessage** : 正在Load的訊息(見Moderation下方截圖)
>>> MenuButton
>>> **ModalWindow** : 彈出的方框模板(像是Moderation下方AddBan的截圖)
>>> **ModerationHeader (Moderation)** : Moderation上面選擇banner, report的橫列
>>> MoreThreads
>>> **NotificationButton** : Notification所在的位置，點開可檢查目前收到的通知
>>>
>>> **PostReply** : 回應功能
>>> **PostScrubber
>>> ReplyingTo**
>>>
>>> ReportPostModal
>>> **ScrollLoad** : 在User Page上顯示目前用戶的table，下拉加載更多資料的功能
>>> **SearchBox** : Forum頁面右上角的search box
>>> **SelectButton** : 在手機forum介面時，選擇不同的category的button，截圖可見於forum下方
>>> **SelectFilter** : 在UserPage時選擇fliter正常用戶與admin的模板，見User下方截圖
>>> **SelectOptions** : 在forum介面時，new, most active, not reply這些選擇按鈕
>>> **SortMenu** : 在UserPage時選擇各table排序方式(ascending/descending)的模板，見User下方截圖
>>> **Tabview** : 整個視窗的模板
>>> **ThreadDisplay** : Thread的資訊取得(User...etc)
>>> **ThreadDisplayPlaceholder** : Thread顯示的模板
>>> **ThreadPoll** : 投票功能
>>> **ThreadPost** : 取得threadpost資訊
>>> **ThreadPostNotification** : 推撥到notification上
>>> **ThreadPostPlaceholder** : 也是thread post的模板，不過ThreadDisplay是比較小的(在forum中看到的)，ThreadPost是真正Post大小的模板
>>> **ToggleSwitch** : 在Gerneral介面上是否顯示description的toggle switch模板
>>> **UserDisplay** : 使用者的資訊取得
>>> **UserPlaceholder** : 顯示使用者資訊的模板，與UserDisplay關係如同ThreadDisplay vs ThreadDisplayPlaceholder

SPEC 實現
===

[Original SPEC](https://hackmd.io/Td4aNYtsQQq1hv2U-GbRDg)

**Overall**

@怡君 幫忙整理：
- Components 需要修改的檔案
- Backend 需要 backend 哪些功能支援

> **進 Panel 前**
> 1. Login
> > `passport`
> > 帳號：E-mail / 密碼： 身分證字號 登入

**Login:**
> **進 Panel 後**
> 1. 首頁
> > 1. 目前的 timeline (到哪個議程了)
> > 2. 目前 Demo 的狀況
> > 3. 倒數的時間

(Login)
==Components 需要修改的檔案==
App.vue: 1. 整個panel顯示dashboard 2. Router-link設定
==Backend 需要 backend 哪些功能支援==
還未登入前：Signup/Login Request
登入後: 1. Logout Request 2. 工作人員/參賽組員權限設定(?)
==Status 這個 Feature 目前做到哪、誰負責==
模板不用動，login/signup接口完成（但尚有CORS問題）
@偉芳 處理 CORS

**Timeline / Demo 狀況:**

Component: TopThreads, 標紅色、過的議程->黑色

==Components 需要修改的檔案==
Admin.vue: 切換不同介面的leftbar
AdminDashboard.vue: Dashboard整體版面配置
Topthread.vue: 顯示目前的議程以及目前demo的組別, 全體的notification
Linechart.vue: 議程大略時間軸，標紅色、過得議程黑色
(Timer): 嵌入@恒軒的timer
==Backend 需要 backend 哪些功能支援==
目前議程/demo組別紀錄更新?
全體notification?
議程timeline的紀錄更新?
==Status 這個 Feature 目前做到哪、誰負責==
leftbar介面模板不動，Dashboard整體配置尚未調整
與後端有關的functions接尚未開始
有RWD的問題要處理
**倒數的時間**

@恒軒 的 timer.meichuhackathon.org (iframe)

2. Chatroom
> `Firebase Realtime-DB / Socket.io`
> 組別 對 工作台 (1:1)
> 大眾群聊 (n:n)
>> `ADVANCE` 組別 對 組別

**1:1**

> 組別 對 工作台 (1:1)

Private Forum

==Components 需要修改的檔案==
主要畫面：
Index.vue
附屬功能：
ThreadDisplay.vue
ThreadDisplayPlaceholder.vue
ThreadPoll.vue
ThreadPost.vue
ThreadPostNotification.vue
ThreadPostPlaceholder.vue
SelectButton.vue
SelectOptions.vue
PostReply.vue
PostScrubber.vue
ReplyingTo.vue
==Backend 需要 backend 哪些功能支援==
**forum共同:**
Firebase Realtime Database
發表文章
留言
創建新category
(投票)
**private forum:**
工作人員權限設定
各組參賽隊伍分隊權限設定
==Status 這個 Feature 目前做到哪、誰負責==
還沒開始ouo
**n:n**

Global Forum

與private同
==Components 需要修改的檔案==
==Backend 需要 backend 哪些功能支援==
==Status 這個 Feature 目前做到哪、誰負責==

**k:k**

直接用 1:1 的方式。

==Discarded==

(Optional)

> 3.訊息推播功能
> > `Firebase cloud messaging`
> > 1. 訊息通知列表（用以紀錄曾發送的通知）
> > 2. 即時 FCM 的發送
> >> 類別
> >> 1. 即時通知
> >> 2. 普通公告
>
> >> 發送對象
> >> 1. 全體
> >> 2. 各組
>
> >> 需要推播的開關
>
> > Payload:
> > Title / Subtitle / Content
> >> ex:
> >> 1. 午餐 / 晚餐通知
> >> 2. 時間快到

**Realtime Message (:n)**
包含 (Announcement (:n))

最新通知
Push notification + Bell -> Forum

==Components 需要修改的檔案==
NotificationButton.vue：同時在鈴鐺與dashboard都要顯示
==Backend 需要 backend 哪些功能支援==
Notification推撥
Notification受眾權限設定（與forum同）
==Status 這個 Feature 目前做到哪、誰負責==
只有notification一個button，有推撥參考模板
**Realtime Message (:1)**

直接用 ChatRoom 1:1 把籌備人員也當作一組。

==Discarded==

## 後端：自己的、Template 的、Firebase

## MISC

1. 將DashBoard改作為主頁面，顯示：
- 目前的 timeline (到哪個議程了) -> 可用 **LineChart**
- 目前 Demo 的狀況 -> 可用 **TopThreads** 的模板顯示現在正在Demo以及接下來預備Demo的組別
- 倒數的時間
- (最新通知也可以顯示在Dashboard上)
2. ChatRoom

可用Forum的論壇方式，將Category分成"組別個別對工作台"，"大眾群聊(也可以分Category)"......等

- 組別 對 工作台 (1:1)
- 大眾群聊 (n:n)
- (組別 對 組別)
- (最新通知也可以以"通知/公告"為一個category來發布)

3. 訊息推撥

可以Dashboard或論壇獨立類別其中一種方式推撥，並配合在notification bell中亦發出提醒

## 權限

- Clean code -> Login (localhost) 怡君
- timer integration
- timeline (活動 + demo)

Elven:
- 要把不用的 router 清掉
- 不會用到 socket io，把那部分刪掉
- login 已經可以用了，所以應該可以馬上就可以安裝上去
- firebase 的部分到時候我會把第三方登入加上去
- 把 main.js 裡的 cookie 刪掉，我們用的是 jwt，所以要改用 local storage
- firebase 有關聊天室的實作，我們後端來做好了，那個我會跟他們說怎麼做
- 其它你們覺得需要的 feature 列出來，我來看哪些是要新加的，哪些已經有了
- 裡面有關那個 template 自己跟 template 自帶的 server 連接的 code 都要刪掉
- 跟後端的 api 對接會給前端弄
- 剩餘 firebase 實作問題

工作人員 -> push notification
參賽者 -> global chat
1:1 group -> no push notification