flutter_server_box/lib/view/page/server.dart

import 'package:after_layout/after_layout.dart';
import 'package:charts_flutter/flutter.dart' as chart;
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
import 'package:get_it/get_it.dart';
import 'package:provider/provider.dart';
import 'package:toolbox/core/utils.dart';
import 'package:toolbox/data/model/server_private_info.dart';
import 'package:toolbox/data/model/server_status.dart';
import 'package:toolbox/data/provider/server.dart';
import 'package:toolbox/locator.dart';
import 'package:toolbox/view/widget/circle_pie.dart';

class ServerPage extends StatefulWidget {
  const ServerPage({Key? key}) : super(key: key);

  @override
  _ServerPageState createState() => _ServerPageState();
}

class _ServerPageState extends State<ServerPage>
    with AutomaticKeepAliveClientMixin, AfterLayoutMixin {
  late MediaQueryData _media;
  late ThemeData _theme;
  bool useKey = false;

  final nameController = TextEditingController();
  final ipController = TextEditingController();
  final portController = TextEditingController();
  final usernameController = TextEditingController();
  final passwordController = TextEditingController();
  final keyController = TextEditingController();
  final ipFocusNode = FocusNode();
  final portFocusNode = FocusNode();
  final usernameFocusNode = FocusNode();
  final passwordFocusNode = FocusNode();

  late ServerProvider serverProvider;
  final cachedServerStatus = <ServerStatus?>[];

  @override
  void initState() {
    super.initState();
    serverProvider = locator<ServerProvider>();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _media = MediaQuery.of(context);
    _theme = Theme.of(context);
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      body: GestureDetector(
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 7),
          child: AnimationLimiter(
              child: Consumer<ServerProvider>(builder: (_, pro, __) {
            return Column(
                children: AnimationConfiguration.toStaggeredList(
              duration: const Duration(milliseconds: 377),
              childAnimationBuilder: (widget) => SlideAnimation(
                verticalOffset: 50.0,
                child: FadeInAnimation(
                  child: widget,
                ),
              ),
              children: [
                const SizedBox(height: 13),
                ...pro.servers.map((e) => _buildEachServerCard(
                    pro.serversStatus[pro.servers.indexOf(e)], e))
              ],
            ));
          })),
        ),
        onTap: () => FocusScope.of(context).requestFocus(FocusNode()),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showRoundDialog(context, '新建服务器连接', _buildTextInputField(context), [
            TextButton(
                onPressed: () => Navigator.of(context).pop(),
                child: const Text('关闭')),
            TextButton(
                onPressed: () {
                  final authorization = keyController.text.isEmpty
                      ? passwordController.text
                      : {
                          "privateKey": keyController.text,
                          "passphrase": passwordController.text
                        };
                  serverProvider.addServer(ServerPrivateInfo(
                      name: nameController.text,
                      ip: ipController.text,
                      port: int.parse(portController.text),
                      user: usernameController.text,
                      authorization: authorization));
                  nameController.clear();
                  ipController.clear();
                  portController.clear();
                  usernameController.clear();
                  passwordController.clear();
                  keyController.clear();
                  Navigator.of(context).pop();
                },
                child: const Text('连接'))
          ]);
        },
        tooltip: 'add a server',
        heroTag: 'server page fab',
        child: const Icon(Icons.add),
      ),
    );
  }

  InputDecoration _buildDecoration(String label, {TextStyle? textStyle}) {
    return InputDecoration(labelText: label, labelStyle: textStyle);
  }

  Widget _buildTextInputField(BuildContext ctx) {
    return SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextField(
            controller: nameController,
            keyboardType: TextInputType.text,
            decoration: _buildDecoration('名称'),
            onSubmitted: (_) =>
                FocusScope.of(context).requestFocus(ipFocusNode),
          ),
          TextField(
            controller: ipController,
            focusNode: ipFocusNode,
            keyboardType: TextInputType.text,
            decoration: _buildDecoration('IP'),
            onSubmitted: (_) =>
                FocusScope.of(context).requestFocus(usernameFocusNode),
          ),
          TextField(
            controller: portController,
            focusNode: portFocusNode,
            keyboardType: TextInputType.number,
            decoration: _buildDecoration('Port'),
            onSubmitted: (_) =>
                FocusScope.of(context).requestFocus(usernameFocusNode),
          ),
          TextField(
            controller: usernameController,
            focusNode: usernameFocusNode,
            keyboardType: TextInputType.text,
            decoration: _buildDecoration('用户名'),
            onSubmitted: (_) =>
                FocusScope.of(context).requestFocus(passwordFocusNode),
          ),
          TextField(
            controller: keyController,
            keyboardType: TextInputType.text,
            decoration: _buildDecoration('密钥(可选)'),
            onSubmitted: (_) => {},
          ),
          TextField(
            controller: passwordController,
            focusNode: passwordFocusNode,
            obscureText: true,
            keyboardType: TextInputType.text,
            decoration: _buildDecoration('密码'),
            onSubmitted: (_) => {},
          ),
        ],
      ),
    );
  }

  Widget _buildEachServerCard(ServerStatus ss, ServerPrivateInfo spi) {
    return GestureDetector(
      child: _buildEachCardContent(ss, spi),
      onLongPress: () =>
          showRoundDialog(context, '是否删除', const Text('删除后无法恢复'), [
        TextButton(
            onPressed: () => Navigator.of(context).pop(),
            child: const Text('否')),
        TextButton(
            onPressed: () {
              serverProvider.delServer(spi);
              Navigator.of(context).pop();
            },
            child: const Text('是'))
      ]),
    );
  }

  Widget _buildEachCardContent(ServerStatus ss, ServerPrivateInfo spi) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(13),
        child: _buildRealServerCard(ss, spi.name ?? ''),
      ),
    );
  }

  Widget _buildRealServerCard(ServerStatus ss, String serverName) {
    final cpuData = [
      IndexPercent(0, ss.cpuPercent!.toInt()),
      IndexPercent(1, 100 - ss.cpuPercent!.toInt()),
    ];
    final memData = <IndexPercent>[];
    for (var e in ss.memList!) {
      memData.add(IndexPercent(ss.memList!.indexOf(e), e!.toInt()));
    }
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              serverName,
              style: const TextStyle(fontWeight: FontWeight.bold),
            ),
            Text(ss.uptime!,
                style: TextStyle(
                    color: _theme.textTheme.bodyText1!.color!.withAlpha(100)))
          ],
        ),
        const SizedBox(
          height: 13,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            _buildPercentCircle(ss.cpuPercent!, 'CPU', [
              chart.Series<IndexPercent, int>(
                id: 'CPU',
                domainFn: (IndexPercent cpu, _) => cpu.id,
                measureFn: (IndexPercent cpu, _) => cpu.percent,
                data: cpuData,
              )
            ]),
            _buildPercentCircle(
                ss.memList![1]! / ss.memList![0]! * 100, 'Mem', [
              chart.Series<IndexPercent, int>(
                id: 'Mem',
                domainFn: (IndexPercent sales, _) => sales.id,
                measureFn: (IndexPercent sales, _) => sales.percent,
                data: memData,
              )
            ]),
            _buildIOData('Net', ss.tcp!.maxConn!.toString(), '0kb/s'),
            _buildIOData('Disk', '0kb/s', '0kb/s')
          ],
        )
      ],
    );
  }

  Widget _buildIOData(String title, String up, String down) {
    return SizedBox(
      width: _media.size.width * 0.2,
      height: _media.size.height * 0.1,
      child: Stack(
        children: [
          Positioned(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  '↓$up',
                  textAlign: TextAlign.start,
                ),
                Text(
                  '↑$down',
                  textAlign: TextAlign.center,
                )
              ],
            ),
            top: _media.size.height * 0.012,
            left: 0,
            right: 0,
          ),
          Positioned(
              child: Text(title, textAlign: TextAlign.center),
              bottom: 0,
              left: 0,
              right: 0)
        ],
      ),
    );
  }

  Widget _buildPercentCircle(double percent, String title,
      List<chart.Series<IndexPercent, int>> series) {
    return SizedBox(
      width: _media.size.width * 0.2,
      height: _media.size.height * 0.1,
      child: Stack(
        children: [
          DonutPieChart(series),
          Positioned(
            child: Text(
              '${percent.toStringAsFixed(1)}%',
              textAlign: TextAlign.center,
            ),
            left: 0,
            right: 0,
            top: _media.size.height * 0.03,
          ),
          Positioned(
              child: Text(title, textAlign: TextAlign.center),
              bottom: 0,
              left: 0,
              right: 0)
        ],
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;

  @override
  Future<void> afterFirstLayout(BuildContext context) async {
    await GetIt.I.allReady();
    await serverProvider.loadLocalData();
    await serverProvider.refreshData();
    await serverProvider.startAutoRefresh();
  }
}