new: tap server tab net io view to switch type

lib/data/model/app/net_view.dart

@@ -13,6 +13,17 @@ enum NetViewType {
   @HiveField(2)
   traffic;
 
+  NetViewType get next {
+    switch (this) {
+      case conn:
+        return speed;
+      case speed:
+        return traffic;
+      case traffic:
+        return conn;
+    }
+  }
+
   String get toStr {
     switch (this) {
       case NetViewType.conn:

lib/data/model/server/disk.dart

@@ -24,7 +24,7 @@ class Disk {
 class DiskIO extends TimeSeq<DiskIOPiece> {
   DiskIO(super.pre, super.now);
 
-  (String?, String?) getReadSpeed(String dev) {
+  (double?, double?) _getSpeed(String dev) {
     final pres = this.pre.where(
           (element) => element.dev == dev.replaceFirst('/dev/', ''),
         );
@@ -37,11 +37,31 @@ class DiskIO extends TimeSeq<DiskIOPiece> {
     final sectorsRead = now.sectorsRead - pre.sectorsRead;
     final sectorsWrite = now.sectorsWrite - pre.sectorsWrite;
     final time = now.time - pre.time;
-    final read = '${(sectorsRead / time * 512).convertBytes}/s';
+    final read = (sectorsRead / time * 512);
-    final write = '${(sectorsWrite / time * 512).convertBytes}/s';
+    final write = (sectorsWrite / time * 512);
     return (read, write);
   }
 
+  (String?, String?) getSpeed(String dev) {
+    final (read_, write_) = _getSpeed(dev);
+    final read = '${read_?.convertBytes}/s';
+    final write = '${write_?.convertBytes}/s';
+    return (read, write);
+  }
+
+  (String?, String?) getAllSpeed() {
+    if (pre.isEmpty || now.isEmpty) return (null, null);
+    var (read, write) = (0.0, 0.0);
+    for (var pre in pre) {
+      final (read_, write_) = _getSpeed(pre.dev);
+      read += read_ ?? 0;
+      write += write_ ?? 0;
+    }
+    final readStr = '${read.convertBytes}/s';
+    final writeStr = '${write.convertBytes}/s';
+    return (readStr, writeStr);
+  }
+
   // Raw:
   //  254       0 vda 584193 186416 40419294 845790 5024458 2028159 92899586 6997559 0 5728372 8143590 0 0 0 0 2006112 300240
   //  254       1 vda1 584029 186416 40412734 845668 5024453 2028159 92899586 6997558 0 5728264 7843226 0 0 0 0 0 0

lib/view/page/server/detail.dart

@@ -11,7 +11,6 @@ import 'package:toolbox/data/model/server/system.dart';
 import 'package:toolbox/data/res/store.dart';
 import 'package:toolbox/view/widget/expand_tile.dart';
 import 'package:toolbox/view/widget/server_func_btns.dart';
-import 'package:toolbox/view/widget/value_notifier.dart';
 
 import '../../../core/extension/numx.dart';
 import '../../../core/route.dart';
@@ -53,7 +52,7 @@ class _ServerDetailPageState extends State<ServerDetailPage>
     ],
   );
 
-  final _netSortType = ValueNotifier(_NetSortType.device);
+  var _netSortType = _NetSortType.device;
 
   @override
   void didChangeDependencies() {
@@ -328,7 +327,7 @@ class _ServerDetailPageState extends State<ServerDetailPage>
   }
 
   Widget _buildDiskItem(Disk disk, ServerStatus ss) {
-    final (read, write) = ss.diskIO.getReadSpeed(disk.dev);
+    final (read, write) = ss.diskIO.getSpeed(disk.dev);
     final text = () {
       final use = '${disk.used} / ${disk.size}';
       if (read == null || write == null) return use;
@@ -377,41 +376,46 @@ class _ServerDetailPageState extends State<ServerDetailPage>
       ));
     } else {
       final devices = ns.devices;
-      devices.sort(_netSortType.value.getSortFunc(ns));
+      devices.sort(_netSortType.getSortFunc(ns));
       children.addAll(devices.map((e) => _buildNetSpeedItem(ns, e)));
     }
-    return ValueBuilder(
+    return CardX(
-      listenable: _netSortType,
+      ExpandTile(
-      build: () {
+        title: Row(
-        return CardX(
+          children: [
-          ExpandTile(
+            Text(l10n.net),
-            title: Row(
+            UIs.width13,
-              children: [
+            IconButton(
-                Text(l10n.net),
+              onPressed: () {
-                UIs.width13,
+                setState(() {
-                InkWell(
+                  _netSortType = _netSortType.next;
-                  onTap: () {
+                });
-                    _netSortType.value = _netSortType.value.next;
+              },
-                  },
+              icon: AnimatedSwitcher(
-                  child: Row(
+                duration: const Duration(milliseconds: 377),
-                    children: [
+                transitionBuilder: (child, animation) => FadeTransition(
-                      const Icon(Icons.sort, size: 17),
+                  opacity: animation,
-                      UIs.width7,
+                  child: child,
-                      Text(
+                ),
-                        _netSortType.value.name,
+                child: Row(
-                        style: UIs.textSize11Grey,
+                  key: ValueKey(_netSortType),
-                      ),
+                  children: [
-                    ],
+                    const Icon(Icons.sort, size: 17),
-                  ),
+                    UIs.width7,
-                )
+                    Text(
-              ],
+                      _netSortType.name,
-            ),
+                      style: UIs.textSize11Grey,
-            leading: const Icon(Icons.device_hub, size: 17),
+                    ),
-            initiallyExpanded: children.length <= 7,
+                  ],
-            children: children,
+                ),
-          ),
+              ),
-        );
+            )
-      },
+          ],
+        ),
+        leading: const Icon(Icons.device_hub, size: 17),
+        initiallyExpanded: children.length <= 7,
+        children: children,
+      ),
     );
   }
 

lib/view/page/server/tab.dart

@@ -40,6 +40,8 @@ class _ServerPageState extends State<ServerPage>
 
   final _flipedCardIds = <String>{};
 
+  final _netViewType = <String, NetViewType>{};
+
   String? _tag;
   bool _useDoubleColumn = false;
 
@@ -310,7 +312,7 @@ class _ServerPageState extends State<ServerPage>
           children: [
             _wrapWithSizedbox(_buildPercentCircle(ss.cpu.usedPercent())),
             _wrapWithSizedbox(_buildPercentCircle(ss.mem.usedPercent * 100)),
-            _wrapWithSizedbox(_buildNet(ss)),
+            _wrapWithSizedbox(_buildNet(ss, spi.id)),
             _wrapWithSizedbox(_buildIOData(
               'Total:\n${rootDisk?.size}',
               'Used:\n${rootDisk?.usedPercent}%',
@@ -419,21 +421,29 @@ class _ServerPageState extends State<ServerPage>
     );
   }
 
-  Widget _buildNet(ServerStatus ss) {
+  Widget _buildNet(ServerStatus ss, String id) {
-    return ValueListenableBuilder<NetViewType>(
+    final type = _netViewType[id] ?? Stores.setting.netViewType.fetch();
-      valueListenable: Stores.setting.netViewType.listenable(),
+    final data = type.build(ss);
-      builder: (_, val, __) {
+    return AnimatedSwitcher(
-        final data = val.build(ss);
+      duration: const Duration(milliseconds: 377),
-        return AnimatedSwitcher(
+      transitionBuilder: (Widget child, Animation<double> animation) {
-          duration: const Duration(milliseconds: 177),
+        return FadeTransition(opacity: animation, child: child);
-          child: _buildIOData(data.up, data.down),
-        );
       },
+      child: _buildIOData(
+        data.up,
+        data.down,
+        onTap: () {
+          setState(() {
+            _netViewType[id] = type.next;
+          });
+        },
+        key: ValueKey(type)
+      ),
     );
   }
 
-  Widget _buildIOData(String up, String down) {
+  Widget _buildIOData(String up, String down, {void Function()? onTap, Key? key}) {
-    return Column(
+    final child = Column(
       children: [
         const SizedBox(height: 5),
         Text(
@@ -451,6 +461,13 @@ class _ServerPageState extends State<ServerPage>
         )
       ],
     );
+    if (onTap == null) return child;
+    return IconButton(
+      key: key,
+      padding: const EdgeInsets.symmetric(horizontal: 7),
+      onPressed: onTap,
+      icon: child,
+    );
   }
 
   Widget _buildPercentCircle(double percent) {

lib/view/page/setting/entry.dart

@@ -211,7 +211,7 @@ class _SettingPageState extends State<SettingPage> {
   Widget _buildServer() {
     return Column(
       children: [
-        _buildMoveOutServerFuncBtns(),
+        _buildServerFuncBtns(),
         _buildSequence(),
         _buildNetViewType(),
         _buildUpdateInterval(),
@@ -926,9 +926,13 @@ class _SettingPageState extends State<SettingPage> {
     );
   }
 
-  Widget _buildMoveOutServerFuncBtns() {
+  Widget _buildServerFuncBtns() {
     return ExpandTile(
       title: Text(l10n.serverFuncBtns),
+      subtitle: Text(
+        '${l10n.location} / ${l10n.displayName}',
+        style: UIs.textSize13Grey,
+      ),
       children: [
         ListTile(
           title: Text(l10n.location),