Updated home appbar

This commit is contained in:
Juan Gilsanz Polo 2023-05-18 11:13:03 +02:00
parent baed03e0c3
commit 8dffb83fd0
3 changed files with 223 additions and 210 deletions

View file

@ -55,6 +55,7 @@ class HomeAppBar extends StatelessWidget {
: Theme.of(context).colorScheme.onSurface.withOpacity(0.38) : Theme.of(context).colorScheme.onSurface.withOpacity(0.38)
), ),
title: Column( title: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
if (serversProvider.selectedServer != null) ...[ if (serversProvider.selectedServer != null) ...[

View file

@ -2,7 +2,6 @@
import 'dart:io'; import 'dart:io';
import 'package:adguard_home_manager/functions/snackbar.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart'; import 'package:flutter/rendering.dart';
import 'package:provider/provider.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/functions/number_format.dart';
import 'package:adguard_home_manager/providers/app_config_provider.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/services/http_requests.dart';
import 'package:adguard_home_manager/functions/snackbar.dart';
import 'package:adguard_home_manager/providers/servers_provider.dart'; import 'package:adguard_home_manager/providers/servers_provider.dart';
class Home extends StatefulWidget { class Home extends StatefulWidget {
@ -58,205 +58,199 @@ class _HomeState extends State<Home> {
final width = MediaQuery.of(context).size.width; final width = MediaQuery.of(context).size.width;
Widget status() { Widget loading() {
switch (serversProvider.serverStatus.loadStatus) { return SizedBox(
case 0: width: double.maxFinite,
return SizedBox( child: Column(
width: double.maxFinite, mainAxisAlignment: MainAxisAlignment.center,
child: Column( crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center, children: [
crossAxisAlignment: CrossAxisAlignment.center, const CircularProgressIndicator(),
children: [ const SizedBox(height: 30),
const CircularProgressIndicator(), Text(
const SizedBox(height: 30), AppLocalizations.of(context)!.loadingStatus,
Text( textAlign: TextAlign.center,
AppLocalizations.of(context)!.loadingStatus, style: TextStyle(
textAlign: TextAlign.center, fontSize: 22,
style: TextStyle( color: Theme.of(context).colorScheme.onSurfaceVariant,
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,
), ),
); const SizedBox(height: 30),
Text(
case 1: AppLocalizations.of(context)!.errorLoadServerStatus,
return ListView( textAlign: TextAlign.center,
children: [ style: TextStyle(
ServerStatus(serverStatus: serversProvider.serverStatus.data!), fontSize: 22,
Padding( color: Theme.of(context).colorScheme.onSurfaceVariant,
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Divider(
thickness: 1,
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.2),
),
), ),
const SizedBox(height: 20), )
],
),
);
}
Wrap( List<Widget> listItems() {
children: [ return [
FractionallySizedBox( ServerStatus(serverStatus: serversProvider.serverStatus.data!),
widthFactor: width > 700 ? 0.5 : 1, Padding(
child: HomeChart( padding: const EdgeInsets.symmetric(horizontal: 20),
data: serversProvider.serverStatus.data!.stats.dnsQueries, child: Divider(
label: AppLocalizations.of(context)!.dnsQueries, thickness: 1,
primaryValue: intFormat(serversProvider.serverStatus.data!.stats.numDnsQueries, Platform.localeName), color: Theme.of(context).colorScheme.onSurface.withOpacity(0.2),
secondaryValue: "${doubleFormat(serversProvider.serverStatus.data!.stats.avgProcessingTime*1000, Platform.localeName)} ms", ),
color: Colors.blue, ),
), const SizedBox(height: 20),
),
FractionallySizedBox( Wrap(
widthFactor: width > 700 ? 0.5 : 1, children: [
child: HomeChart( FractionallySizedBox(
data: serversProvider.serverStatus.data!.stats.blockedFiltering, widthFactor: width > 700 ? 0.5 : 1,
label: AppLocalizations.of(context)!.blockedFilters, child: HomeChart(
primaryValue: intFormat(serversProvider.serverStatus.data!.stats.numBlockedFiltering, Platform.localeName), data: serversProvider.serverStatus.data!.stats.dnsQueries,
secondaryValue: "${serversProvider.serverStatus.data!.stats.numDnsQueries > 0 ? doubleFormat((serversProvider.serverStatus.data!.stats.numBlockedFiltering/serversProvider.serverStatus.data!.stats.numDnsQueries)*100, Platform.localeName) : 0}%", label: AppLocalizations.of(context)!.dnsQueries,
color: Colors.red, 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.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) ...[ FractionallySizedBox(
TopItems( widthFactor: width > 700 ? 0.5 : 1,
label: AppLocalizations.of(context)!.topQueriedDomains, child: HomeChart(
data: serversProvider.serverStatus.data!.stats.topQueriedDomains, data: serversProvider.serverStatus.data!.stats.blockedFiltering,
type: 'topQueriedDomains', 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(
padding: const EdgeInsets.symmetric(horizontal: 20), padding: const EdgeInsets.only(bottom: 16),
child: Divider( child: ConstrainedBox(
thickness: 1, constraints: const BoxConstraints(
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.2), 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(
padding: const EdgeInsets.symmetric(horizontal: 20), padding: const EdgeInsets.only(bottom: 16),
child: Divider( child: ConstrainedBox(
thickness: 1, constraints: const BoxConstraints(
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.2), 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( return Scaffold(
@ -270,24 +264,45 @@ class _HomeState extends State<Home> {
sliver: HomeAppBar(innerBoxScrolled: innerBoxIsScrolled,) sliver: HomeAppBar(innerBoxScrolled: innerBoxIsScrolled,)
) )
], ],
body: RefreshIndicator( body: SafeArea(
color: Theme.of(context).colorScheme.primary, top: false,
onRefresh: () async { bottom: false,
final result = await getServerStatus(serversProvider.selectedServer!); child: Builder(
if (result['result'] == 'success') { builder: (context) => RefreshIndicator(
serversProvider.setServerStatusData(result['data']); color: Theme.of(context).colorScheme.primary,
} onRefresh: () async {
else { final result = await getServerStatus(serversProvider.selectedServer!);
appConfigProvider.addLog(result['log']); if (result['result'] == 'success') {
showSnacbkar( serversProvider.setServerStatusData(result['data']);
appConfigProvider: appConfigProvider, }
label: AppLocalizations.of(context)!.serverStatusNotRefreshed, else {
color: Colors.red appConfigProvider.addLog(result['log']);
); showSnacbkar(
} appConfigProvider: appConfigProvider,
}, label: AppLocalizations.of(context)!.serverStatusNotRefreshed,
child: status() 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( AnimatedPositioned(
duration: const Duration(milliseconds: 100), duration: const Duration(milliseconds: 100),

View file

@ -18,9 +18,7 @@ class ServerStatus extends StatelessWidget {
final width = MediaQuery.of(context).size.width; final width = MediaQuery.of(context).size.width;
return Container( return Container(
padding: width > 700 padding: const EdgeInsets.only(left: 20, right: 20, bottom: 10),
? const EdgeInsets.only(left: 20, right: 20, bottom: 20)
: const EdgeInsets.all(20),
child: Column( child: Column(
children: [ children: [
Text( Text(
@ -31,9 +29,8 @@ class ServerStatus extends StatelessWidget {
color: Theme.of(context).colorScheme.onSurface color: Theme.of(context).colorScheme.onSurface
), ),
), ),
const SizedBox(height: 20),
SizedBox( SizedBox(
height: width > 700 ? 70 : 140, height: width > 700 ? 90 : 170,
child: GridView( child: GridView(
physics: const NeverScrollableScrollPhysics(), physics: const NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(