😸
Nuxt.jsでWebアプリケーション開発メモ19
概要
ダッシュボードのカレンダーにトレーニング履歴を表示する。
プロンプト19
# 命令19
## 命令19-1
- models.pyの中で、いくつか`*_CHOICES`の選択リストをべた書きで定義していますが、別途モデル化した方がよいものがないか今一度確認してもらえますか。
モデル化するメリットがないのであれば現状のままでOKです。
## 命令19-2
- 今後実装の妥当性を確認するため、カレンダー上での履歴表示用に、`admin`ユーザーのトレーニング記録を適当に10件ほど登録してください。日付データはすべて2025年8月にしてください。
- トレーニング記録を登録するさい、既存のDjangoのREST APIを使うのであれば、ユーザー名は`admin`パスワードは`zaq12wsxcde3`を使用してください。
- バックエンドのサーバーは起動済みです。
## 命令19-3
- `pages/mock/dashboard.vue`の内容を全てコピーして、`pages/top.vue`にペースとしてある状態です。(`pages/top.vue`はモックのダッシュボードと同じ状態)
- `pages/top.vue`に変更を加えて行きます。
- まずは、topページを表示した際、ログイン中ユーザーのトレーニング履歴をカレンダーに表示する処理を実装してください。
- モック上のカレンダーで表示していたダミーデータは表示しないようにしてください。
- カレンダー以外はそのままでOKです。
追加命令
- トレーニングを実施していない日のアイコンをバツではなく、アイコンなしにして。
対応内容
-
topページをダッシュボードページに変更。
-
adminユーザーのトレーニング記録のデモデータを登録。
- 初回、十数分終わらなかったので画面を確認すると、REST APIで登録しようとしてログイン情報が間違っていたため、色々工夫していたようだが終わらないので、Ctrl+Cで中断させ、ログイン情報を教えて改めてデモデータ登録させた。
-
カレンダー上のトレーニング履歴をREST APIで取得し、表示させるようにした。
画面
カレンダー以外はモックのまま。
ソース差分
Discussion