From 8dffb83fd085ba6d259cbd82c6762d345af79b20 Mon Sep 17 00:00:00 2001 From: Juan Gilsanz Polo Date: Thu, 18 May 2023 11:13:03 +0200 Subject: [PATCH] Updated home appbar --- lib/screens/home/appbar.dart | 1 + lib/screens/home/home.dart | 425 ++++++++++++++-------------- lib/screens/home/server_status.dart | 7 +- 3 files changed, 223 insertions(+), 210 deletions(-) diff --git a/lib/screens/home/appbar.dart b/lib/screens/home/appbar.dart index ea519f9..58284d5 100644 --- a/lib/screens/home/appbar.dart +++ b/lib/screens/home/appbar.dart @@ -55,6 +55,7 @@ class HomeAppBar extends StatelessWidget { : Theme.of(context).colorScheme.onSurface.withOpacity(0.38) ), title: Column( + mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ if (serversProvider.selectedServer != null) ...[ diff --git a/lib/screens/home/home.dart b/lib/screens/home/home.dart index 7e4ddb7..ec1bc3b 100644 --- a/lib/screens/home/home.dart +++ b/lib/screens/home/home.dart @@ -2,7 +2,6 @@ import 'dart:io'; -import 'package:adguard_home_manager/functions/snackbar.dart'; import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; import 'package:provider/provider.dart'; @@ -17,6 +16,7 @@ import 'package:adguard_home_manager/screens/home/chart.dart'; import 'package:adguard_home_manager/functions/number_format.dart'; import 'package:adguard_home_manager/providers/app_config_provider.dart'; import 'package:adguard_home_manager/services/http_requests.dart'; +import 'package:adguard_home_manager/functions/snackbar.dart'; import 'package:adguard_home_manager/providers/servers_provider.dart'; class Home extends StatefulWidget { @@ -58,205 +58,199 @@ class _HomeState extends State { final width = MediaQuery.of(context).size.width; - Widget status() { - switch (serversProvider.serverStatus.loadStatus) { - case 0: - return SizedBox( - width: double.maxFinite, - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - const CircularProgressIndicator(), - const SizedBox(height: 30), - Text( - AppLocalizations.of(context)!.loadingStatus, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 22, - color: Theme.of(context).colorScheme.onSurfaceVariant, - ), - ) - ], + Widget loading() { + return SizedBox( + width: double.maxFinite, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + const CircularProgressIndicator(), + const SizedBox(height: 30), + Text( + AppLocalizations.of(context)!.loadingStatus, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 22, + color: Theme.of(context).colorScheme.onSurfaceVariant, + ), + ) + ], + ), + ); + } + + Widget loadError() { + return SizedBox( + width: double.maxFinite, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + const Icon( + Icons.error, + color: Colors.red, + size: 50, ), - ); - - case 1: - return ListView( - children: [ - ServerStatus(serverStatus: serversProvider.serverStatus.data!), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 20), - child: Divider( - thickness: 1, - color: Theme.of(context).colorScheme.onSurface.withOpacity(0.2), - ), + const SizedBox(height: 30), + Text( + AppLocalizations.of(context)!.errorLoadServerStatus, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 22, + color: Theme.of(context).colorScheme.onSurfaceVariant, ), - const SizedBox(height: 20), + ) + ], + ), + ); + } - Wrap( - children: [ - FractionallySizedBox( - widthFactor: width > 700 ? 0.5 : 1, - child: HomeChart( - data: serversProvider.serverStatus.data!.stats.dnsQueries, - label: AppLocalizations.of(context)!.dnsQueries, - primaryValue: intFormat(serversProvider.serverStatus.data!.stats.numDnsQueries, Platform.localeName), - secondaryValue: "${doubleFormat(serversProvider.serverStatus.data!.stats.avgProcessingTime*1000, Platform.localeName)} ms", - color: Colors.blue, - ), - ), - FractionallySizedBox( - widthFactor: width > 700 ? 0.5 : 1, - child: HomeChart( - data: serversProvider.serverStatus.data!.stats.blockedFiltering, - label: AppLocalizations.of(context)!.blockedFilters, - primaryValue: intFormat(serversProvider.serverStatus.data!.stats.numBlockedFiltering, Platform.localeName), - secondaryValue: "${serversProvider.serverStatus.data!.stats.numDnsQueries > 0 ? doubleFormat((serversProvider.serverStatus.data!.stats.numBlockedFiltering/serversProvider.serverStatus.data!.stats.numDnsQueries)*100, Platform.localeName) : 0}%", - color: Colors.red, - ), - ), - FractionallySizedBox( - widthFactor: width > 700 ? 0.5 : 1, - child: HomeChart( - data: serversProvider.serverStatus.data!.stats.replacedSafebrowsing, - label: AppLocalizations.of(context)!.malwarePhisingBlocked, - primaryValue: intFormat(serversProvider.serverStatus.data!.stats.numReplacedSafebrowsing, Platform.localeName), - secondaryValue: "${serversProvider.serverStatus.data!.stats.numDnsQueries > 0 ? doubleFormat((serversProvider.serverStatus.data!.stats.numReplacedSafebrowsing/serversProvider.serverStatus.data!.stats.numDnsQueries)*100, Platform.localeName) : 0}%", - color: Colors.green, - ), - ), - FractionallySizedBox( - widthFactor: width > 700 ? 0.5 : 1, - child: HomeChart( - data: serversProvider.serverStatus.data!.stats.replacedParental, - label: AppLocalizations.of(context)!.blockedAdultWebsites, - primaryValue: intFormat(serversProvider.serverStatus.data!.stats.numReplacedParental, Platform.localeName), - secondaryValue: "${serversProvider.serverStatus.data!.stats.numDnsQueries > 0 ? doubleFormat((serversProvider.serverStatus.data!.stats.numReplacedParental/serversProvider.serverStatus.data!.stats.numDnsQueries)*100, Platform.localeName) : 0}%", - color: Colors.orange, - ), - ), - - ], + List listItems() { + return [ + ServerStatus(serverStatus: serversProvider.serverStatus.data!), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 20), + child: Divider( + thickness: 1, + color: Theme.of(context).colorScheme.onSurface.withOpacity(0.2), + ), + ), + const SizedBox(height: 20), + + Wrap( + children: [ + FractionallySizedBox( + widthFactor: width > 700 ? 0.5 : 1, + child: HomeChart( + data: serversProvider.serverStatus.data!.stats.dnsQueries, + label: AppLocalizations.of(context)!.dnsQueries, + primaryValue: intFormat(serversProvider.serverStatus.data!.stats.numDnsQueries, Platform.localeName), + secondaryValue: "${doubleFormat(serversProvider.serverStatus.data!.stats.avgProcessingTime*1000, Platform.localeName)} ms", + color: Colors.blue, ), - - if (width <= 700) ...[ - TopItems( - label: AppLocalizations.of(context)!.topQueriedDomains, - data: serversProvider.serverStatus.data!.stats.topQueriedDomains, - type: 'topQueriedDomains', + ), + FractionallySizedBox( + widthFactor: width > 700 ? 0.5 : 1, + child: HomeChart( + data: serversProvider.serverStatus.data!.stats.blockedFiltering, + label: AppLocalizations.of(context)!.blockedFilters, + primaryValue: intFormat(serversProvider.serverStatus.data!.stats.numBlockedFiltering, Platform.localeName), + secondaryValue: "${serversProvider.serverStatus.data!.stats.numDnsQueries > 0 ? doubleFormat((serversProvider.serverStatus.data!.stats.numBlockedFiltering/serversProvider.serverStatus.data!.stats.numDnsQueries)*100, Platform.localeName) : 0}%", + color: Colors.red, + ), + ), + FractionallySizedBox( + widthFactor: width > 700 ? 0.5 : 1, + child: HomeChart( + data: serversProvider.serverStatus.data!.stats.replacedSafebrowsing, + label: AppLocalizations.of(context)!.malwarePhisingBlocked, + primaryValue: intFormat(serversProvider.serverStatus.data!.stats.numReplacedSafebrowsing, Platform.localeName), + secondaryValue: "${serversProvider.serverStatus.data!.stats.numDnsQueries > 0 ? doubleFormat((serversProvider.serverStatus.data!.stats.numReplacedSafebrowsing/serversProvider.serverStatus.data!.stats.numDnsQueries)*100, Platform.localeName) : 0}%", + color: Colors.green, + ), + ), + FractionallySizedBox( + widthFactor: width > 700 ? 0.5 : 1, + child: HomeChart( + data: serversProvider.serverStatus.data!.stats.replacedParental, + label: AppLocalizations.of(context)!.blockedAdultWebsites, + primaryValue: intFormat(serversProvider.serverStatus.data!.stats.numReplacedParental, Platform.localeName), + secondaryValue: "${serversProvider.serverStatus.data!.stats.numDnsQueries > 0 ? doubleFormat((serversProvider.serverStatus.data!.stats.numReplacedParental/serversProvider.serverStatus.data!.stats.numDnsQueries)*100, Platform.localeName) : 0}%", + color: Colors.orange, + ), + ), + + ], + ), + + if (width <= 700) ...[ + TopItems( + label: AppLocalizations.of(context)!.topQueriedDomains, + data: serversProvider.serverStatus.data!.stats.topQueriedDomains, + type: 'topQueriedDomains', + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 20), + child: Divider( + thickness: 1, + color: Theme.of(context).colorScheme.onSurface.withOpacity(0.2), + ), + ), + + const SizedBox(height: 20), + + TopItems( + label: AppLocalizations.of(context)!.topBlockedDomains, + data: serversProvider.serverStatus.data!.stats.topBlockedDomains, + type: 'topBlockedDomains', + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 20), + child: Divider( + thickness: 1, + color: Theme.of(context).colorScheme.onSurface.withOpacity(0.2), + ), + ), + const SizedBox(height: 20), + + TopItems( + label: AppLocalizations.of(context)!.topClients, + data: serversProvider.serverStatus.data!.stats.topClients, + type: 'topClients', + clients: true, + ), + ], + if (width > 700) Column( + children: [ + const SizedBox(height: 16), + Wrap( + alignment: WrapAlignment.center, + children: [ + Padding( + padding: const EdgeInsets.only(bottom: 16), + child: ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 500 + ), + child: TopItems( + label: AppLocalizations.of(context)!.topQueriedDomains, + data: serversProvider.serverStatus.data!.stats.topQueriedDomains, + type: 'topQueriedDomains', + ), + ), ), Padding( - padding: const EdgeInsets.symmetric(horizontal: 20), - child: Divider( - thickness: 1, - color: Theme.of(context).colorScheme.onSurface.withOpacity(0.2), + padding: const EdgeInsets.only(bottom: 16), + child: ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 500 + ), + child: TopItems( + label: AppLocalizations.of(context)!.topBlockedDomains, + data: serversProvider.serverStatus.data!.stats.topBlockedDomains, + type: 'topBlockedDomains', + ), ), ), - - const SizedBox(height: 20), - - TopItems( - label: AppLocalizations.of(context)!.topBlockedDomains, - data: serversProvider.serverStatus.data!.stats.topBlockedDomains, - type: 'topBlockedDomains', - ), Padding( - padding: const EdgeInsets.symmetric(horizontal: 20), - child: Divider( - thickness: 1, - color: Theme.of(context).colorScheme.onSurface.withOpacity(0.2), + padding: const EdgeInsets.only(bottom: 16), + child: ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 500 + ), + child: TopItems( + label: AppLocalizations.of(context)!.topClients, + data: serversProvider.serverStatus.data!.stats.topClients, + type: 'topClients', + ), ), ), - const SizedBox(height: 20), - - TopItems( - label: AppLocalizations.of(context)!.topClients, - data: serversProvider.serverStatus.data!.stats.topClients, - type: 'topClients', - clients: true, - ), - ], - if (width > 700) Column( - children: [ - const SizedBox(height: 16), - Wrap( - alignment: WrapAlignment.center, - children: [ - Padding( - padding: const EdgeInsets.only(bottom: 16), - child: ConstrainedBox( - constraints: const BoxConstraints( - maxWidth: 500 - ), - child: TopItems( - label: AppLocalizations.of(context)!.topQueriedDomains, - data: serversProvider.serverStatus.data!.stats.topQueriedDomains, - type: 'topQueriedDomains', - ), - ), - ), - Padding( - padding: const EdgeInsets.only(bottom: 16), - child: ConstrainedBox( - constraints: const BoxConstraints( - maxWidth: 500 - ), - child: TopItems( - label: AppLocalizations.of(context)!.topBlockedDomains, - data: serversProvider.serverStatus.data!.stats.topBlockedDomains, - type: 'topBlockedDomains', - ), - ), - ), - Padding( - padding: const EdgeInsets.only(bottom: 16), - child: ConstrainedBox( - constraints: const BoxConstraints( - maxWidth: 500 - ), - child: TopItems( - label: AppLocalizations.of(context)!.topClients, - data: serversProvider.serverStatus.data!.stats.topClients, - type: 'topClients', - ), - ), - ), - ], - ), - ], - ) - ], - ); - - case 2: - return SizedBox( - width: double.maxFinite, - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - const Icon( - Icons.error, - color: Colors.red, - size: 50, - ), - const SizedBox(height: 30), - Text( - AppLocalizations.of(context)!.errorLoadServerStatus, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 22, - color: Theme.of(context).colorScheme.onSurfaceVariant, - ), - ) ], ), - ); - - default: - return const SizedBox(); - } + ], + ) + ]; } return Scaffold( @@ -270,24 +264,45 @@ class _HomeState extends State { sliver: HomeAppBar(innerBoxScrolled: innerBoxIsScrolled,) ) ], - body: RefreshIndicator( - color: Theme.of(context).colorScheme.primary, - onRefresh: () async { - final result = await getServerStatus(serversProvider.selectedServer!); - if (result['result'] == 'success') { - serversProvider.setServerStatusData(result['data']); - } - else { - appConfigProvider.addLog(result['log']); - showSnacbkar( - appConfigProvider: appConfigProvider, - label: AppLocalizations.of(context)!.serverStatusNotRefreshed, - color: Colors.red - ); - } - }, - child: status() - ), + body: SafeArea( + top: false, + bottom: false, + child: Builder( + builder: (context) => RefreshIndicator( + color: Theme.of(context).colorScheme.primary, + onRefresh: () async { + final result = await getServerStatus(serversProvider.selectedServer!); + if (result['result'] == 'success') { + serversProvider.setServerStatusData(result['data']); + } + else { + appConfigProvider.addLog(result['log']); + showSnacbkar( + appConfigProvider: appConfigProvider, + label: AppLocalizations.of(context)!.serverStatusNotRefreshed, + color: Colors.red + ); + } + }, + child: CustomScrollView( + slivers: [ + SliverOverlapInjector( + handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), + ), + if (serversProvider.serverStatus.loadStatus == 0) SliverFillRemaining( + child: loading(), + ), + if (serversProvider.serverStatus.loadStatus == 1) SliverList.list( + children: listItems() + ), + if (serversProvider.serverStatus.loadStatus == 2) SliverFillRemaining( + child: loadError(), + ), + ], + ) + ), + ) + ) ), AnimatedPositioned( duration: const Duration(milliseconds: 100), diff --git a/lib/screens/home/server_status.dart b/lib/screens/home/server_status.dart index 1df9767..3026c90 100644 --- a/lib/screens/home/server_status.dart +++ b/lib/screens/home/server_status.dart @@ -18,9 +18,7 @@ class ServerStatus extends StatelessWidget { final width = MediaQuery.of(context).size.width; return Container( - padding: width > 700 - ? const EdgeInsets.only(left: 20, right: 20, bottom: 20) - : const EdgeInsets.all(20), + padding: const EdgeInsets.only(left: 20, right: 20, bottom: 10), child: Column( children: [ Text( @@ -31,9 +29,8 @@ class ServerStatus extends StatelessWidget { color: Theme.of(context).colorScheme.onSurface ), ), - const SizedBox(height: 20), SizedBox( - height: width > 700 ? 70 : 140, + height: width > 700 ? 90 : 170, child: GridView( physics: const NeverScrollableScrollPhysics(), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(