newt239 / gateway-front Goto Github PK

入れる

#67 でAndroidについてはインターバルを30秒まで短くしたが、Chromebookでも5分はもたなそう
しかもこっちは画面がブラックアウトして強制再起動までしなきゃいけないのでかなり深刻
とりあえず2分30秒に変更してみる

学校配布のChromebookのフロントカメラは左右が逆でQRコードを中心に合わせづらい。

カメラのプレビューエリアのすぐ上に反転ボタンをつける。

beforeTimePartEndTimeで配列のlengthを超えた数字を引数に取ったときにエラーが出る
lengthより大きければfalseを返すよう変更

ログイン画面をブックマークする人がいるかもしれないのでホーム画面に遷移したほうが親切

入退室処理の際にカメラプレビューの場所でカメラを読み込むときにローディングスピナーを表示させているが、スキャン完了後ゲスト情報などが表示された後にカメラをオフにしたときにもスピナーが表示されることがある。
再現ができていないので具体的にどのアクションをすると表示されてしまうかが不明。
ユーザーによってはスピナーは「今まさに読み込みが行われている」と認識しているため、スピナーが表示されることでゲスト情報が表示できているのにもかかわらず非表示になるまで次のアクションをせずに待機してしまう可能性がある。

警告が表示されるようにする

スマホ版ではボトムバー最右にあるが何も表示されない、パソコン版ではメニューもない。入れるとすればスキャンページの一番上(「一覧に戻る」の横など)。ただ業務上必ずしもすべての文実委員が必要な機能ではないためメニューは用意しなくても良さそう

• #43
• 紛失したリストバンドのTextFieldをSelectに

transformのバグのせい？とりあえずtransrateZを設定

https://docs.microsoft.com/ja-jp/microsoft-edge/web-platform/password-reveal#visibility-of-the-control

実装する必要が機能を明確化するために、ブランチ管理を行う。

方針

基本はdevelopブランチで作業を行う。

大きな機能を実装する際は専用のブランチ(feature/xxx)を切り、完成したらdevelopブランチにマージする。

developブランチは特に問題がないことが確認できればmasterブランチにマージする。

リストバンド忘れ / 2枚とも紛失した生徒はDBで該当生徒のゲストIDを検索し、ゲスト照会機能を使って表示したQRコードをデジタルリストバンドで読み取らせる

まだ優先度は低めだけどいつかはつけたい

講堂とか体育館だと暗い場所で操作しなきゃいけないときもあるはずで、その時背景白は眩しすぎる

MUIベースでやればそこまで対応は手間かからなさそう
Dark mode - Material UI

package.json内のdependencesとdevDependencesの整理。

テスティング用のライブラリは現在使用していないため一旦アンインストール。

また同時に各ライブラリを最新バージョンにアップデートする。

そのあとリロードすると直る

同じコンポーネントでどっちも++で書いてるのが原因。条件分岐する

現在予約用QRコードは予約IDの文字列をそのまんま使って変換しているが、これだと他の予約用QRコードを容易に偽造できるので、JWTを使って暗号化する。

payloadは以下の形式を取る。

{
  "reservation_id": "RABXXXY"
}

当日スキャンする場所によってはカメラがQRコードを読み取りづらい可能性がある。このため予約IDやゲストIDを手動で入力できるオプションを作る

端末上でエラーが発生した時、

• ga4でイベントを記録
• Discordのチャンネルでエラーメッセージを送信

これだからiOSは

z-indexが効かない

https://rishuntrading.co.jp/blog/programing/safari_z-index_notwork/

PWAのときカメラが起動しない

standaloneだと起動しないらしい、まじ？

https://qiita.com/1pp0/items/a3f0ea14910e25f49878#:~:text=iOS%E3%81%AEPWA%E3%81%A7%E3%81%AF%E8%A1%A8%E7%A4%BA%E3%83%A2%E3%83%BC%E3%83%89%E3%81%8Cstandalone%E3%81%AE%E5%A0%B4%E5%90%88%E3%81%AB%E3%82%AB%E3%83%A1%E3%83%A9%E3%82%92%E9%96%8B%E3%81%8F%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84

• AutoCompleteからSelectに変える ( Autocompleteで実装しているのでスマホだといちいちキーボードが開いてうるさい
  )
• ダイアログが小さすぎる

NumPadから入力後ダイアログを閉じると、先頭のPrefix(R, G)が抜けてしまう

実装方針の詳細未定

案

Leaflet.js

公式サイト

背景に校内図をsvg(ラスター形式でも可能)で敷き、展示のある場所に色をプロットしていく。

全部svg (React Componentの組み合わせ)

自由度は高いがコンポーネント同士の配置の位置調整が難しそう

heatmap.js

公式サイト

表示がかなり「「ヒートマップ」」って感じだけど、ちょっとイメージとは違う

react-dom.production.min.js:216 Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Object.oa (react-dom.production.min.js:156:258)
    at t.useContext (react.production.min.js:22:273)
    at me (index.js:764:43)
    at Ce (jotai.ts:25:24)
    at Extra.tsx:16:7
    at Dl (react-dom.production.min.js:262:359)
    at t.unstable_runWithPriority (scheduler.production.min.js:18:343)
    at Xi (react-dom.production.min.js:122:325)
    at Bl (react-dom.production.min.js:261:308)
    at xl (react-dom.production.min.js:243:50)

リロードすると直る

各展示用アカウントでログインした際スキャンページで各展示についての情報(展示名、上限人数など)を取得できていない。 exhibit_idがundefinedになっているのが原因。react-routerのuseParams()でパスから取得しようとしているがうまく行っていない。

5分じゃ持たなそうなのでAndroidのときだけインターバルを30秒まで短くする。
Pixel 4a では40秒程度しかもたなかった(よりスペックが低いAndroid端末でもっと長くもったから単純にスペックの問題ではなさそう？)

6/12までの実装を目指す

TODO

• オフライン対応
• アイコン画像
• PWAのインストール方法を示した図を用意

バックエンドとの通信に失敗すると「サーバーからの応答がありません。端末がネットワークに接続されているか確認してください。」というメッセージが表示される。ただ実際サーバーが落ちることなんてほぼなく、このエラーが表示される原因はChromebookに設定されているプロキシに、起動直後はログインできておらず、学校のWiFiに繋げられていないことにある。このプロキシへのログインは新しくサイトを読み込んだときに発生するので、サーバーステータスを表示するuptimerobotへのリンクへ誘導するダイアログを表示するようにする。