🐙
Nuxt.jsでWebアプリケーション開発メモ24
概要
トレーニング記録ポップアップ画面の改善。
プロンプト24
# 命令24
- トレーニング記録ポップアップ画面の改善
# 命令24-1
- トレーニング項目を入力すると、単位が`回`固定となっているので、`api_trainingexercise`テーブルの`unit`から取得して動的に変更されるようにしてください。
- トレーニング編集の場合、記録済みトレーニングは単位が動的に変化する作りになっているので、それと同等にしてください。
- トレーニング項目で選択したトレーニングの単位が`回`であれば入力できる数量は整数のみとしてください。
- トレーニング項目で入力できる数量と負荷は正数のみにしたいです。現状Input要素の右端に上下のボタンがついており下ボタンをクリックすると負数の入力ができますが、下ボタンクリックしても負数にならないようにしてください。
# 命令24-2
- 体重と体脂肪率の入力も同様に負数が入力できないようにして。
- トレーニング記録ポップアップ画面の幅を少し広く。
- トレーニング項目のリスト部分だけ幅を広く。
# 命令24-3
- 記録済みのトレーニングをポップアップ画面で開くと、筋力トレーニングの回数が`50.00`など小数が入っています。記録済みのデータに小数が入っていない場合は表示する際も小数が表示されないようにしてください。
# 命令24-4
- カレンダーのダブルクリックでトレーニング記録ポップアップ画面表示していますが、クリックに変更して。
# 命令24-5
- トレーニング記録ポップアップ画面で保存ボタンをクリックしたらボタンをLoading状態にして。
対応内容
- 単位をトレーニング項目によって動的に変更されるようにした。
- 単位、重量、体重、体脂肪率で負数が入力できないようにした。
- 単位が"回"の時、小数は表示されないようにした。
- ポップアップ画面の幅を少し広くした。
-
:uiプロパティのcontent:で幅調整。- 当初存在しない
widthとか、存在するけど間違えてwrapperで幅指定しようとしたので公式ドキュメントを読ませて正しい指定に修正。
- 当初存在しない
-
- トレーニング項目のリスト部分を少し広くした。
-
:uiプロパティのcontent:で幅調整。- こちらも当初
container:とか適当な値で指定しやがった。
- こちらも当初
-
- カレンダークリックでポップアップ画面が表示されるようにした。
- 保存ボタンをクリックしたらボタンをLoading状態にするようにした。
- 保存処理は早いのでほとんど視認できない。。
画面
赤矢印部分を気持ち広めにしている。
ソース差分
Discussion