tiroljpn / vue-time-keeper Goto Github PK

下記の実装

• displayInfoOfSpreadSheetのログイン情報をApp.vueに持たせ、制御
• TimeKeeperFront.vueのサインアウトボタンでサインアウトできるようにする
• 手動によるタイムキーパー機能をとりあえず実装する→各コンポーネントのpropsの連携が整ってから、どう自動化するか考える

08fc227 の時点で一つのmethodでgapiの各アクションを呼び出しているので、状態遷移とコンポーネントで、切り分ける

• authの初期化(gapi.client.initが該当)
• GoogleAuth Objectの取得(gapi.auth2.getAuthInstance().signIn()が該当)
• スプレッドシートの取得(gapi.client.sheets.spreadsheets.values.get()が該当)

自動タイムキーパーとは別のコンポーネントファイルで、手動動作するタイムキーパーを用意してある。

プレゼン者名やタイトルなどを手動で変更できるようにし、手動動作するタイムキーパーへのリンクを貼る

状態管理が面倒なので、非ログイン時のみにする

ref: https://qiita.com/ms32/items/0d52120ebca3e775f747#section1

• Start
• Pause
• etc

下記の実装

• 手動によるタイムキーパー機能をとりあえず実装する→各コンポーネントのpropsの連携が整ってから、どう自動化するか考える
• displayInfoOfSpreadSheetのログイン情報をApp.vueに持たせ、制御
• TimeKeeperFront.vueのサインアウトボタンでサインアウトできるようにする

Summery

スプレッドシートのフェッチ機能・タイムキーパーのコア機能は実装済みなので，前提条件を元に自動タイムキーパーの実装を行う

スプレッドシートの前提条件

• タイムテーブルを表す情報は3列で構成され，1列目からそれぞれ開始時間，発表者，発表タイトルである
• それ以外の情報(上記3列の形式に沿っていない情報)が入っている場合は正常な動作を保証しない

実装するロジック

• gapiを用いてログイン後，GAuthの情報を保持する
• ログイン後は「sheetID」と「シート名」の入力を受け付ける．フェッチ可能ならタイムテーブル画面に遷移する．そうでなければその旨のメッセージを表示する
• 自動タイムテーブルの状態では，現在の時刻とスプレッドシートの状態を元に画面の切り替えを行う．現在時間がどの行よりも早ければ開始まで何時間あるか表示し，いずれかの行の間ならば進行中の発表があと何時間か表示し．全ての行数よりも現在時間が遅ければその旨を表示する
• ログアウトボタンでログアウトできる

implement good enhancement func

下記コンポーネントが初期のままなのでデザインを適用する

• gauthポップアップを出すボタン
• クライアントIDやシート名を入力するフォーム
• テーブル情報をフェッチするボタン
• ログアウトするボタン

inspired by https://ichiro-maruta.blogspot.com/2011/09/html5.html