stadtbote-app/lib/content_views/approach_area_page.dart

import 'package:flutter/material.dart';
import 'package:isar/isar.dart';
import 'package:mqtt_client/mqtt_client.dart';
import 'package:stadtbote/content_views/utils/content_view_widget.dart';
import 'package:stadtbote/content_views/utils/header_info.dart';
import 'package:stadtbote/main.dart';
import 'package:stadtbote/model/rank.dart';
import 'package:stadtbote/popups/tasks_popups/zip_popup.dart';
import 'package:stadtbote/protocoll_messages/zip_message.dart';
import 'package:stadtbote/tools/constants.dart';
import 'package:stadtbote/tools/message_service.dart';
import 'package:stadtbote/tools/messages/publish_payload_message.dart';
import 'package:stadtbote/tools/messages/ranking_updated.dart';
import 'package:badges/badges.dart' as badges;

import '../tools/util.dart';

class ApproachAreaPage extends ContentViewWidget {
  const ApproachAreaPage({super.key});

  @override
  State<ApproachAreaPage> createState() => _ApproachAreaPageState();

  @override
  Future<HeaderInfo> getHeaderInfo(BuildContext context) async {
    return HeaderInfo(
        titleWidget: const Text(
          'Anfahrtsbereich',
          style: TextStyle(
            color: Colors.white,
            fontSize: 20.0,
          ),
        ),
        rightButtonEnabled: true,
        rightButtonVisible: true,
        rightButtonImage: Util.fetchFutureIcon(const Icon(Icons.help_outline, size: 20.0, color: Colors.white)),
        rightButtonOnPressed: () async {
          await Util.startBrowser('https://app.assecutor.de/help/sb/app/context/001/index.html');
        });
  }
}

class _ApproachAreaPageState extends State<ApproachAreaPage> {
  late Ranking? _ranking;

  late bool _initCompleted = false;

  @override
  void initState() {
    super.initState();

    Future.delayed(const Duration(seconds: 0), () async {
      _ranking = await MyApp.isarInstance.rankings.where().findFirst();

      _initCompleted = true;

      setState(() {});
    });

    _initMessages();
  }

  @override
  void deactivate() {
    super.deactivate();

    MessageService().unsubscribe(Constants.messageTopicRankingUpdated, this);
  }

  @override
  Widget build(BuildContext context) {
    if (!_initCompleted) {
      return Util.getWaitWidget(context);
    }

    _fillColumns();

    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: InteractiveViewer(
        alignment: Alignment.topCenter,
        child: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: _fillColumns()),
          ),
        ),
      ),
    );
  }

  List<Widget> _fillColumns() {
    List<Widget> columns = [];

    if (_ranking != null) {
      for (int i = 0; i < _ranking!.ranks.length; i++) {
        var rank = _ranking!.ranks[i];

        var rankArea = rank.area ?? "";

        List<Widget> entries = [];
        entries.add(
          GestureDetector(
            onTap: () => {
              if (i == 0) {
                showZipPopup(context, 'ACHTUNG: Wenn Sie Ihre PLZ ändern, verlieren Sie Ihr Ranking!\n', 'Freimelden', (zip) => {_sendZip(rank, zip)}),
              }
            },
            child: Container(
                padding: const EdgeInsets.all(4),
                margin: const EdgeInsets.all(2),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: i == 0 ? Constants.colorPrimary : Colors.white,
                  border: Border.all(
                    color: Colors.grey,
                    width: 0.5,
                  ),
                ),
                width: 85,
                height: 60,
                child: Column(children: [
                  Text(
                    rank.zip,
                    style: TextStyle(fontSize: 20, color: (i == 0 ? Colors.white : Colors.black)),
                  ),
                  Text(
                    rankArea,
                    style: TextStyle(fontSize: 13, color: (i == 0 ? Colors.white : Colors.black)),
                  )
                ]
              )
            ),
          ),
        );

        for (int j = 0; j < rank.vehicles.length; j++) {
          var vehicle = rank.vehicles[j];

          var imageFilename = vehicle.self == true ? "assets/mein_${mapVehicleTypeToImageName(vehicle.type)}" : "assets/${mapVehicleTypeToImageName(vehicle.type)}";
          entries.add(
              badges.Badge(
                showBadge: vehicle.cnt != null && vehicle.cnt! > 0,
                position: badges.BadgePosition.topEnd(top: -12, end: 0),
                badgeContent: Text(
                  vehicle.cnt.toString(),
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 12,
                  ),
                ),
                badgeStyle: badges.BadgeStyle(
                  badgeColor: Colors.red,
                  padding: const EdgeInsets.all(8),
                  borderRadius: BorderRadius.circular(4),
                  borderSide: const BorderSide(color: Colors.white, width: 0),
                  elevation: 0,
                ),
                child: Container(
                  padding: const EdgeInsets.all(4),
                  margin: const EdgeInsets.all(2),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                    border: Border.all(
                      color: Colors.grey,
                      width: 0.5,
                    ),
                  ),
                  width: 80,
                  height: 60,
                  child: Column(
                    children: [
                      Image.asset(imageFilename, width: 30, height: 30),
                      const SizedBox(width: 10),
                      Text(
                          mapVehicleTypeToText(vehicle.type)
                      ),
                    ],
                  ),
                )),
              );
        }

        columns.add(Align(
          alignment: Alignment.topLeft,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: entries,
          ),
        ));
      }
    }

    return columns;
  }

  _sendZip(Rank rank, String zip) async {
    var position = MyApp.currentPosition;

    var setPosMessage = ZipSetPos();
    setPosMessage.zip = zip;

    if (position != null) {
      setPosMessage.track = ZipTrack();
      setPosMessage.track!.time = DateTime.now().toIso8601String();
      setPosMessage.track!.pos = ZipTrackPos();
      setPosMessage.track!.pos!.lat = position.latitude;
      setPosMessage.track!.pos!.long = position.longitude;
      setPosMessage.track!.pos!.acc = position.accuracy.toInt();
    }

    await MessageService().publish<PublishPayloadMessage>(Constants.messageTopicPublishPayload, arguments: PublishPayloadMessage(topic: "set_zip", message: setPosMessage.toJson(), qos: MqttQos.exactlyOnce));
  }

  _initMessages() {
    MessageService().subscribe<RankingUpdated>(Constants.messageTopicRankingUpdated, this, (rankingUpdateMessage) async {
      _ranking = await MyApp.isarInstance.rankings.where().findFirst();

      setState(() {});
    });
  }
}