📸 Implement ImageView and ImageDetailView for Camera Sensor Monitoring

[spadr]

このプルリクエストでは、IoTカメラセンサーの包括的な監視を可能にするImageViewとImageDetailViewを実装しました。

具体的な変更点:

• ImageSensorモデルとImageDataモデルの導入: 画像センサーの情報を保持するImageSensorモデルと、個々の画像データを表すImageDataモデルを新たに作成しました。ImageSensorはSensorモデルを継承し、センサーの基本情報に加えて、ImageDataのリストを保持することで、センサーと画像データを関連付けられるようにしました。
• ImageViewModelの実装: ImageSensorモデルとImageDataモデルを利用し、SupabaseServiceから画像センサーデータを取得するImageViewModelを実装しました。 ImageViewModelは、取得したデータをImageStateに保存し、UIに状態を反映します。
• ImageViewの実装: ImageViewModelから取得したImageSensorデータに基づき、接続されているすべてのカメラセンサーをリスト表示するImageViewを実装しました。
  • 各リストアイテムには、センサーのグループ名、センサー名、最新画像のサムネイル、最終更新時刻が表示されます。
  • リストアイテムをタップすると、ImageTileViewに遷移し、選択したセンサーの画像一覧を確認できます。
  • 開発環境(FLAVOR=develop)では、ImageGeneratorを使用して生成したモック画像を表示します。本番環境では、ImageDataのfilePathに保存されたURLから画像を読み込みます。
• ImageTileViewの実装: 選択したセンサーの画像一覧を、日付ごとにグループ化してグリッド形式で表示するImageTileViewを実装しました。
  • 各画像はタイル形式で表示され、タップするとImageDetailViewに遷移し、選択した画像を拡大表示できます。
  • 開発環境ではモック画像を、本番環境ではネットワークから画像を読み込みます。
• ImageDetailViewの実装: 選択した画像を拡大表示するImageDetailViewを実装しました。
  • PageViewを使用して、スワイプ操作で前後の画像をスムーズに閲覧できます。
  • スライダーバーを使用することで、特定の画像にすばやくアクセスできます。
  • 各画像の撮影時刻が表示されます。
• モック実装の強化: 開発環境における動作確認を容易にするため、MockSupabaseServiceにモックのImageSensorデータとImageDataデータを追加し、ImageGeneratorを使用してモック画像を生成するようにしました。これにより、Supabaseに接続せずに画像表示機能の開発とテストを行うことができます。