refactor(ui): update tags in DeviceLogsScreen

2024-12-27 10:59:47 +07:00
parent 70e3ed8978
commit 178a00f5ba
11 changed files with 373 additions and 58 deletions
--- a/lib/feature/auth/login/screen/login_screen.dart
+++ b/lib/feature/auth/login/screen/login_screen.dart
@@ -209,12 +209,6 @@ class _LoginScreenState extends State<LoginScreen> {
    log("Role: ${LocaleManager.instance.getStringValue(PreferencesKeys.ROLE)}");
    log("Theme: ${LocaleManager.instance.getStringValue(PreferencesKeys.THEME)}");
    log("Lang: ${LocaleManager.instance.getStringValue(PreferencesKeys.LANGUAGE_CODE)}");
-    // log("Theme: $theme");
-    // if (theme == AppThemes.DARK.name) {
-    //   themeNotifier.changeValue(AppThemes.DARK);
-    // } else {
-    //   themeNotifier.changeValue(AppThemes.LIGHT);
-    // }
    int timeNow = DateTime.now().millisecondsSinceEpoch ~/ 1000;
    if (token != "" && (exp - timeNow) > 7200) {
      context.goNamed(AppRoutes.HOME.name);
--- a/lib/feature/device_log/device_logs_screen.dart
+++ b/lib/feature/device_log/device_logs_screen.dart
@@ -3,6 +3,7 @@ import 'dart:developer';
 import 'package:dropdown_button2/dropdown_button2.dart';
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
+import 'package:sfm_app/feature/device_log/widgets/tag_widget.dart';
 import 'package:sfm_app/feature/devices/device_model.dart';
 import 'package:sfm_app/feature/device_log/device_logs_bloc.dart';
 import 'package:sfm_app/product/constant/icon/icon_constants.dart';
@@ -179,6 +180,8 @@ class _DeviceLogsScreenState extends State<DeviceLogsScreen> {
                                    style: const ButtonStyle(
                                      backgroundColor: MaterialStatePropertyAll(
                                          Colors.green),
+                                      foregroundColor: MaterialStatePropertyAll(
+                                          Colors.white),
                                    ),
                                    onPressed: () {
                                      if (fromDateApi.isEmpty) {
@@ -196,8 +199,8 @@ class _DeviceLogsScreenState extends State<DeviceLogsScreen> {
                                            dateTime!,
                                            sensors);
                                      }
-                                      log("ThingID: $thingID");
-                                      log("From Date: ${DateTimeUtils.instance.formatDateTimeToString(dateTime!)}");
+                                      // log("ThingID: $thingID");
+                                      // log("From Date: ${DateTimeUtils.instance.formatDateTimeToString(dateTime!)}");
                                    },
                                    icon: IconConstants.instance
                                        .getMaterialIcon(Icons.search),
@@ -275,8 +278,7 @@ class _DeviceLogsScreenState extends State<DeviceLogsScreen> {
        ListTile(
          subtitle:
              Text(DeviceUtils.instance.getDeviceSensorsLog(context, sensor)),
-          // leading: const Icon(Icons.sensors_outlined),
-          leading: Text(index.toString()),
+          leading: leadingList(sensor),
          title: Text(
            DateTimeUtils.instance
                .convertCurrentMillisToDateTimeString(sensor.time ?? 0),
@@ -299,4 +301,23 @@ class _DeviceLogsScreenState extends State<DeviceLogsScreen> {
    deviceLogsBloc.sinkHasMore.add(hasMore);
    deviceLogsBloc.getDeviceLogByThingID(offset, thingID, dateTime!, sensors);
  }
+
+  Widget leadingList(SensorLogs sensor) {
+    Color boxColor;
+    String content;
+    if (sensor.name == "1" || sensor.name == "11") {
+      boxColor = Colors.blue;
+      content = "Điều khiển";
+    } else {
+      boxColor = Colors.lightGreen;
+      content = "Sự kiện";
+    }
+
+    return TagWidgetShared(
+      boxColor: boxColor,
+      tagContent: content,
+      boxHeight: context.mediumValue,
+      boxWidth: context.dynamicWidth(0.2),
+    );
+  }
 }
--- a/lib/feature/device_log/widgets/tag_widget.dart
+++ b/lib/feature/device_log/widgets/tag_widget.dart
@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+
+class TagWidgetShared extends StatelessWidget {
+  const TagWidgetShared({
+    super.key,
+    required this.boxColor,
+    this.boxRadius,
+    this.boxHeight,
+    this.boxWidth,
+    required this.tagContent,
+  });
+  final Color? boxColor;
+  final double? boxRadius;
+  final double? boxHeight;
+  final double? boxWidth;
+  final String? tagContent;
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: boxColor,
+        borderRadius: BorderRadius.circular(boxRadius ?? 10),
+      ),
+      height: boxHeight ?? 40,
+      width: boxWidth ?? 100,
+      child: Center(
+        child: Text(
+          tagContent ?? "",
+          style: const TextStyle(
+            color: Colors.white,
+            fontWeight: FontWeight.bold,
+            fontSize: 15,
+          ),
+        ),
+      ),
+    );
+  }
+}
--- a/lib/feature/map/map_bloc.dart
+++ b/lib/feature/map/map_bloc.dart
@@ -16,6 +16,10 @@ class MapBloc extends BlocBase {
  @override
  void dispose() {}

+  final mapTheme = StreamController<String>.broadcast();
+  StreamSink<String> get sinkMapTheme => mapTheme.sink;
+  Stream<String> get streamMapTheme => mapTheme.stream;
+
  final mapType = StreamController<MapType>.broadcast();
  StreamSink<MapType> get sinkMapType => mapType.sink;
  Stream<MapType> get streamMapType => mapType.stream;
--- a/lib/feature/map/map_screen.dart
+++ b/lib/feature/map/map_screen.dart
@@ -14,6 +14,8 @@ import 'package:sfm_app/product/constant/icon/icon_constants.dart';
 import 'package:sfm_app/product/permission/location_permission.dart';
 import 'package:sfm_app/product/services/api_services.dart';

+import '../../product/constant/enums/app_theme_enums.dart';
+
 class MapScreen extends StatefulWidget {
  const MapScreen({super.key});

@@ -51,13 +53,20 @@ class _MapScreenState extends State<MapScreen> with WidgetsBindingObserver {
  LatLng myLocation = const LatLng(213761, 123123);
  Position? position;
  bool isAllowLocationPermission = false;
+  String themeMode = "";
  @override
  void initState() {
    super.initState();
    mapBloc = BlocProvider.of(context);
+    checkTheme();
    _loadIcons();
    getAllMarkers();
    clusterManager = _initClusterManager();
+    DefaultAssetBundle.of(context)
+        .loadString("assets/map_themes/maps_dark_theme.json")
+        .then(
+          (value) => {themeMode = value},
+        );
  }

  @override
@@ -78,36 +87,41 @@ class _MapScreenState extends State<MapScreen> with WidgetsBindingObserver {
              return StreamBuilder<List<LatLng>>(
                stream: mapBloc.streamPolylines,
                builder: (context, polylinesSnapshot) {
-                  return GoogleMap(
-                    initialCameraPosition: _myPosition,
-                    mapType: mapType,
-                    onMapCreated: (GoogleMapController controller) {
-                      if (!_controller.isCompleted) {
-                        _controller.complete(controller);
-                      }
-                      streamController.sink.add(controller);
-                      clusterManager.setMapId(controller.mapId);
-                    },
-                    markers: markerSnapshot.data ?? markersAll
-                      ..addAll(markers),
-                    zoomControlsEnabled: true,
-                    myLocationEnabled: true,
-                    mapToolbarEnabled: false,
-                    onCameraMove: (position) {
-                      clusterManager.onCameraMove(position);
-                    },
-                    onCameraIdle: () {
-                      clusterManager.updateMap();
-                    },
-                    polylines: {
-                      Polyline(
-                        polylineId: const PolylineId('router'),
-                        points: polylinesSnapshot.data ?? [],
-                        color: Colors.deepPurpleAccent,
-                        width: 8,
-                      ),
-                    },
-                  );
+                  return StreamBuilder<String>(
+                      stream: mapBloc.streamMapTheme,
+                      builder: (context, mapThemeSnapshot) {
+                        return GoogleMap(
+                          initialCameraPosition: _myPosition,
+                          mapType: mapType,
+                          onMapCreated: (GoogleMapController controller) {
+                            controller.setMapStyle(themeMode);
+                            if (!_controller.isCompleted) {
+                              _controller.complete(controller);
+                            }
+                            streamController.sink.add(controller);
+                            clusterManager.setMapId(controller.mapId);
+                          },
+                          markers: markerSnapshot.data ?? markersAll
+                            ..addAll(markers),
+                          zoomControlsEnabled: true,
+                          myLocationEnabled: true,
+                          mapToolbarEnabled: false,
+                          onCameraMove: (position) {
+                            clusterManager.onCameraMove(position);
+                          },
+                          onCameraIdle: () {
+                            clusterManager.updateMap();
+                          },
+                          polylines: {
+                            Polyline(
+                              polylineId: const PolylineId('router'),
+                              points: polylinesSnapshot.data ?? [],
+                              color: Colors.deepPurpleAccent,
+                              width: 8,
+                            ),
+                          },
+                        );
+                      });
                },
              );
            },
@@ -117,6 +131,22 @@ class _MapScreenState extends State<MapScreen> with WidgetsBindingObserver {
    );
  }

+  void checkTheme() async {
+    String theme = await apiServices.checkTheme();
+    if (theme == AppThemes.LIGHT.name) {
+      getThemeMode('assets/map_themes/maps_light_theme.json');
+    } else {
+      getThemeMode('assets/map_themes/maps_dark_theme.json');
+    }
+  }
+
+  void getThemeMode(String path) {
+    DefaultAssetBundle.of(context)
+        .loadString(path)
+        .then((value) => {themeMode = value});
+    mapBloc.sinkMapTheme.add(themeMode);
+  }
+
  Future<void> _loadIcons() async {
    List<Future<BitmapDescriptor>> iconFutures = imageAssets.map((asset) {
      return BitmapDescriptor.fromAssetImage(const ImageConfiguration(), asset);