optimization: desktop UI (#747)
This commit is contained in:
lollipopkit🏳️⚧️
GitHub
27
lib/view/page/server/tab/card_stat.dart
Normal file
27
lib/view/page/server/tab/card_stat.dart
Normal file
@@ -0,0 +1,27 @@
|
||||
part of 'tab.dart';
|
||||
|
||||
typedef _CardNotifier = ValueNotifier<_CardStatus>;
|
||||
|
||||
class _CardStatus {
|
||||
final bool flip;
|
||||
final bool? diskIO;
|
||||
final NetViewType? net;
|
||||
|
||||
const _CardStatus({
|
||||
this.flip = false,
|
||||
this.diskIO,
|
||||
this.net,
|
||||
});
|
||||
|
||||
_CardStatus copyWith({
|
||||
bool? flip,
|
||||
bool? diskIO,
|
||||
NetViewType? net,
|
||||
}) {
|
||||
return _CardStatus(
|
||||
flip: flip ?? this.flip,
|
||||
diskIO: diskIO ?? this.diskIO,
|
||||
net: net ?? this.net,
|
||||
);
|
||||
}
|
||||
}
|
||||
195
lib/view/page/server/tab/content.dart
Normal file
195
lib/view/page/server/tab/content.dart
Normal file
@@ -0,0 +1,195 @@
|
||||
part of 'tab.dart';
|
||||
|
||||
extension on _ServerPageState {
|
||||
Widget _buildServerCardTitle(Server s) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(left: 7, right: 13),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
ConstrainedBox(
|
||||
constraints: BoxConstraints(maxWidth: _media.size.width / 2.3),
|
||||
child: Hero(
|
||||
tag: 'home_card_title_${s.spi.id}',
|
||||
transitionOnUserGestures: true,
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: Text(
|
||||
s.spi.name,
|
||||
style: UIs.text13Bold.copyWith(
|
||||
color: context.isDark ? Colors.white : Colors.black,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const Icon(
|
||||
Icons.keyboard_arrow_right,
|
||||
size: 17,
|
||||
color: Colors.grey,
|
||||
),
|
||||
const Spacer(),
|
||||
_buildTopRightText(s),
|
||||
_buildTopRightWidget(s),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTopRightWidget(Server s) {
|
||||
final (child, onTap) = switch (s.conn) {
|
||||
ServerConn.connecting || ServerConn.loading || ServerConn.connected => (
|
||||
SizedBox(
|
||||
width: 19,
|
||||
height: 19,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 3,
|
||||
valueColor: AlwaysStoppedAnimation(UIs.primaryColor),
|
||||
),
|
||||
),
|
||||
null,
|
||||
),
|
||||
ServerConn.failed => (
|
||||
const Icon(Icons.refresh, size: 21, color: Colors.grey),
|
||||
() {
|
||||
TryLimiter.reset(s.spi.id);
|
||||
ServerProvider.refresh(spi: s.spi);
|
||||
},
|
||||
),
|
||||
ServerConn.disconnected => (
|
||||
const Icon(MingCute.link_3_line, size: 19, color: Colors.grey),
|
||||
() => ServerProvider.refresh(spi: s.spi)
|
||||
),
|
||||
ServerConn.finished => (
|
||||
const Icon(MingCute.unlink_2_line, size: 17, color: Colors.grey),
|
||||
() => ServerProvider.closeServer(id: s.spi.id),
|
||||
),
|
||||
};
|
||||
|
||||
// Or the loading icon will be rescaled.
|
||||
final wrapped = child is SizedBox
|
||||
? child
|
||||
: SizedBox(height: _ServerPageState._kCardHeightMin, width: 27, child: child);
|
||||
if (onTap == null) return wrapped.paddingOnly(left: 10);
|
||||
return InkWell(
|
||||
borderRadius: BorderRadius.circular(7),
|
||||
onTap: onTap,
|
||||
child: wrapped,
|
||||
).paddingOnly(left: 5);
|
||||
}
|
||||
|
||||
Widget _buildTopRightText(Server s) {
|
||||
final hasErr = s.conn == ServerConn.failed && s.status.err != null;
|
||||
final str = s._getTopRightStr(s.spi);
|
||||
if (str == null) return UIs.placeholder;
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
if (!hasErr) return;
|
||||
_showFailReason(s.status);
|
||||
},
|
||||
child: Text(str, style: UIs.text13Grey),
|
||||
);
|
||||
}
|
||||
|
||||
void _showFailReason(ServerStatus ss) {
|
||||
final md = '''
|
||||
${ss.err?.solution ?? l10n.unknown}
|
||||
|
||||
```sh
|
||||
${ss.err?.message ?? 'null'}
|
||||
''';
|
||||
context.showRoundDialog(
|
||||
title: libL10n.error,
|
||||
child: SingleChildScrollView(child: SimpleMarkdown(data: md)),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Pfs.copy(md),
|
||||
child: Text(libL10n.copy),
|
||||
)
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDisk(ServerStatus ss, String id) {
|
||||
final cardNoti = _getCardNoti(id);
|
||||
return ListenableBuilder(
|
||||
listenable: cardNoti,
|
||||
builder: (_, __) {
|
||||
final isSpeed = cardNoti.value.diskIO ?? !Stores.setting.serverTabPreferDiskAmount.fetch();
|
||||
|
||||
final (r, w) = ss.diskIO.cachedAllSpeed;
|
||||
|
||||
return AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 377),
|
||||
transitionBuilder: (Widget child, Animation<double> animation) {
|
||||
return FadeTransition(opacity: animation, child: child);
|
||||
},
|
||||
child: _buildIOData(
|
||||
isSpeed ? '${l10n.read}:\n$r' : 'Total:\n${ss.diskUsage?.size.kb2Str}',
|
||||
isSpeed ? '${l10n.write}:\n$w' : 'Used:\n${ss.diskUsage?.used.kb2Str}',
|
||||
onTap: () {
|
||||
cardNoti.value = cardNoti.value.copyWith(diskIO: !isSpeed);
|
||||
},
|
||||
key: ValueKey(isSpeed),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildNet(ServerStatus ss, String id) {
|
||||
final cardNoti = _getCardNoti(id);
|
||||
final type = cardNoti.value.net ?? Stores.setting.netViewType.fetch();
|
||||
final device = ServerProvider.pick(id: id)?.value.spi.custom?.netDev;
|
||||
final (a, b) = type.build(ss, dev: device);
|
||||
return AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 377),
|
||||
transitionBuilder: (c, anim) => FadeTransition(opacity: anim, child: c),
|
||||
child: _buildIOData(
|
||||
a,
|
||||
b,
|
||||
onTap: () => cardNoti.value = cardNoti.value.copyWith(net: type.next),
|
||||
key: ValueKey(type),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildIOData(
|
||||
String up,
|
||||
String down, {
|
||||
void Function()? onTap,
|
||||
Key? key,
|
||||
int maxLines = 2
|
||||
}) {
|
||||
final child = Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
up,
|
||||
style: const TextStyle(fontSize: 10, color: Colors.grey),
|
||||
textAlign: TextAlign.center,
|
||||
textScaler: _textFactor,
|
||||
maxLines: maxLines,
|
||||
),
|
||||
const SizedBox(height: 3),
|
||||
Text(
|
||||
down,
|
||||
style: const TextStyle(fontSize: 10, color: Colors.grey),
|
||||
textAlign: TextAlign.center,
|
||||
textScaler: _textFactor,
|
||||
maxLines: maxLines,
|
||||
)
|
||||
],
|
||||
);
|
||||
if (onTap == null) return child;
|
||||
return IconButton(
|
||||
key: key,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 3),
|
||||
onPressed: onTap,
|
||||
icon: child,
|
||||
);
|
||||
}
|
||||
}
|
||||
69
lib/view/page/server/tab/landscape.dart
Normal file
69
lib/view/page/server/tab/landscape.dart
Normal file
@@ -0,0 +1,69 @@
|
||||
part of 'tab.dart';
|
||||
|
||||
extension on _ServerPageState {
|
||||
Widget _buildLandscape() {
|
||||
final offset = Offset(_offset, _offset);
|
||||
return Padding(
|
||||
// Avoid display cutout
|
||||
padding: EdgeInsets.all(_offset.abs()),
|
||||
child: Transform.translate(
|
||||
offset: offset,
|
||||
child: Stack(
|
||||
children: [
|
||||
_buildLandscapeBody(),
|
||||
Positioned(
|
||||
top: 0,
|
||||
left: 0,
|
||||
child: IconButton(
|
||||
onPressed: () => SettingsPage.route.go(context),
|
||||
icon: const Icon(Icons.settings, color: Colors.grey),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildLandscapeBody() {
|
||||
return ServerProvider.serverOrder.listenVal((order) {
|
||||
if (order.isEmpty) {
|
||||
return Center(
|
||||
child: Text(libL10n.empty, textAlign: TextAlign.center),
|
||||
);
|
||||
}
|
||||
|
||||
return PageView.builder(
|
||||
itemCount: order.length,
|
||||
itemBuilder: (_, idx) {
|
||||
final id = order[idx];
|
||||
final srv = ServerProvider.pick(id: id);
|
||||
if (srv == null) return UIs.placeholder;
|
||||
|
||||
return srv.listenVal((srv) {
|
||||
final title = _buildServerCardTitle(srv);
|
||||
final List<Widget> children = [
|
||||
title,
|
||||
_buildNormalCard(srv.status, srv.spi),
|
||||
];
|
||||
|
||||
return Padding(
|
||||
padding: _media.padding,
|
||||
child: ListenableBuilder(
|
||||
listenable: _getCardNoti(id),
|
||||
builder: (_, __) {
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: children,
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
});
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
369
lib/view/page/server/tab/tab.dart
Normal file
369
lib/view/page/server/tab/tab.dart
Normal file
@@ -0,0 +1,369 @@
|
||||
// ignore_for_file: invalid_use_of_protected_member
|
||||
|
||||
import 'dart:async';
|
||||
import 'dart:math' as math;
|
||||
|
||||
import 'package:fl_lib/fl_lib.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:icons_plus/icons_plus.dart';
|
||||
import 'package:responsive_framework/responsive_framework.dart';
|
||||
import 'package:server_box/core/extension/context/locale.dart';
|
||||
import 'package:server_box/core/extension/ssh_client.dart';
|
||||
import 'package:server_box/core/route.dart';
|
||||
import 'package:server_box/data/model/app/shell_func.dart';
|
||||
import 'package:server_box/data/model/server/try_limiter.dart';
|
||||
import 'package:server_box/data/res/build_data.dart';
|
||||
import 'package:server_box/data/res/store.dart';
|
||||
import 'package:server_box/view/page/server/detail/view.dart';
|
||||
import 'package:server_box/view/page/server/edit.dart';
|
||||
import 'package:server_box/view/page/setting/entry.dart';
|
||||
import 'package:server_box/view/widget/percent_circle.dart';
|
||||
|
||||
import 'package:server_box/data/model/app/net_view.dart';
|
||||
import 'package:server_box/data/model/server/server.dart';
|
||||
import 'package:server_box/data/model/server/server_private_info.dart';
|
||||
import 'package:server_box/data/provider/server.dart';
|
||||
import 'package:server_box/view/widget/server_func_btns.dart';
|
||||
|
||||
part 'top_bar.dart';
|
||||
part 'card_stat.dart';
|
||||
part 'utils.dart';
|
||||
part 'content.dart';
|
||||
part 'landscape.dart';
|
||||
|
||||
class ServerPage extends StatefulWidget {
|
||||
const ServerPage({super.key});
|
||||
|
||||
@override
|
||||
State<ServerPage> createState() => _ServerPageState();
|
||||
|
||||
static const route = AppRouteNoArg(
|
||||
page: ServerPage.new,
|
||||
path: '/servers',
|
||||
);
|
||||
}
|
||||
|
||||
const _cardPad = 74.0;
|
||||
const _cardPadSingle = 13.0;
|
||||
|
||||
class _ServerPageState extends State<ServerPage> with AutomaticKeepAliveClientMixin, AfterLayoutMixin {
|
||||
late MediaQueryData _media;
|
||||
|
||||
late double _textFactorDouble;
|
||||
double _offset = 1;
|
||||
late TextScaler _textFactor;
|
||||
|
||||
final _cardsStatus = <String, _CardNotifier>{};
|
||||
|
||||
Timer? _timer;
|
||||
|
||||
final _tag = ''.vn;
|
||||
|
||||
final _scrollController = ScrollController();
|
||||
final _autoHideCtrl = AutoHideController();
|
||||
final _splitViewCtrl = SplitViewController();
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
super.dispose();
|
||||
_timer?.cancel();
|
||||
_scrollController.dispose();
|
||||
_autoHideCtrl.dispose();
|
||||
_tag.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_startAvoidJitterTimer();
|
||||
}
|
||||
|
||||
@override
|
||||
void didChangeDependencies() {
|
||||
super.didChangeDependencies();
|
||||
_media = MediaQuery.of(context);
|
||||
_updateOffset();
|
||||
_updateTextScaler();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
super.build(context);
|
||||
return OrientationBuilder(builder: (_, orientation) {
|
||||
if (orientation == Orientation.landscape) {
|
||||
final useFullScreen = Stores.setting.fullScreen.fetch();
|
||||
// Only enter landscape mode when the screen is wide enough and the
|
||||
// full screen mode is enabled.
|
||||
if (useFullScreen) return _buildLandscape();
|
||||
}
|
||||
return _buildPortrait();
|
||||
});
|
||||
}
|
||||
|
||||
Widget _buildScaffold(Widget child) {
|
||||
return Scaffold(
|
||||
appBar: _TopBar(
|
||||
tags: ServerProvider.tags,
|
||||
onTagChanged: (p0) => _tag.value = p0,
|
||||
initTag: _tag.value,
|
||||
),
|
||||
body: GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: () => _autoHideCtrl.show(),
|
||||
child: ListenableBuilder(
|
||||
listenable: Stores.setting.textFactor.listenable(),
|
||||
builder: (_, __) {
|
||||
_updateTextScaler();
|
||||
return child;
|
||||
},
|
||||
),
|
||||
),
|
||||
floatingActionButton: AutoHide(
|
||||
direction: AxisDirection.right,
|
||||
offset: 75,
|
||||
scrollController: _scrollController,
|
||||
hideController: _autoHideCtrl,
|
||||
child: FloatingActionButton(
|
||||
heroTag: 'addServer',
|
||||
onPressed: _onTapAddServer,
|
||||
tooltip: libL10n.add,
|
||||
child: const Icon(Icons.add),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildPortrait() {
|
||||
// final isMobile = ResponsiveBreakpoints.of(context).isMobile;
|
||||
return ServerProvider.serverOrder.listenVal(
|
||||
(order) {
|
||||
return _tag.listenVal(
|
||||
(val) {
|
||||
final filtered = _filterServers(order);
|
||||
final child = _buildScaffold(_buildBodySmall(filtered: filtered));
|
||||
// if (isMobile) {
|
||||
return child;
|
||||
// }
|
||||
|
||||
// return SplitView(
|
||||
// controller: _splitViewCtrl,
|
||||
// leftWeight: 1,
|
||||
// rightWeight: 1.3,
|
||||
// initialRight: Center(child: CircularProgressIndicator()),
|
||||
// leftBuilder: (_, __) => child,
|
||||
// );
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBodySmall({
|
||||
required List<String> filtered,
|
||||
EdgeInsets? padding = const EdgeInsets.fromLTRB(7, 0, 7, 7),
|
||||
}) {
|
||||
if (filtered.isEmpty) {
|
||||
return Center(child: Text(libL10n.empty, textAlign: TextAlign.center));
|
||||
}
|
||||
|
||||
// Calculate number of columns based on available width
|
||||
final columnsCount = math.max(1, (_media.size.width / UIs.columnWidth).floor());
|
||||
|
||||
// Calculate number of rows needed
|
||||
final rowCount = (filtered.length + columnsCount - 1) ~/ columnsCount;
|
||||
|
||||
return ListView.builder(
|
||||
controller: _scrollController,
|
||||
padding: padding,
|
||||
itemCount: rowCount + 1, // +1 for the bottom space
|
||||
itemBuilder: (_, rowIndex) {
|
||||
// Bottom space
|
||||
if (rowIndex == rowCount) return UIs.height77;
|
||||
|
||||
// Create a row of server cards
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4.0),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: List.generate(columnsCount, (colIndex) {
|
||||
final index = rowIndex * columnsCount + colIndex;
|
||||
if (index >= filtered.length) return Expanded(child: Container());
|
||||
|
||||
final vnode = ServerProvider.pick(id: filtered[index]);
|
||||
if (vnode == null) return Expanded(child: UIs.placeholder);
|
||||
|
||||
return Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 4.0),
|
||||
child: vnode.listenVal(_buildEachServerCard),
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildEachServerCard(Server? srv) {
|
||||
if (srv == null) {
|
||||
return UIs.placeholder;
|
||||
}
|
||||
|
||||
return CardX(
|
||||
key: Key(srv.spi.id + _tag.value),
|
||||
child: InkWell(
|
||||
onTap: () => _onTapCard(srv),
|
||||
onLongPress: () => _onLongPressCard(srv),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: _cardPadSingle,
|
||||
right: 3,
|
||||
top: _cardPadSingle,
|
||||
bottom: _cardPadSingle,
|
||||
),
|
||||
child: _buildRealServerCard(srv),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// The child's width mat not equal to 1/4 of the screen width,
|
||||
/// so we need to wrap it with a SizedBox.
|
||||
Widget _wrapWithSizedbox(Widget child, double maxWidth, [bool circle = false]) {
|
||||
return LayoutBuilder(builder: (_, cons) {
|
||||
final width = (maxWidth - _cardPad) / 4;
|
||||
return SizedBox(
|
||||
width: width,
|
||||
child: child,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
Widget _buildRealServerCard(Server srv) {
|
||||
final id = srv.spi.id;
|
||||
final cardStatus = _getCardNoti(id);
|
||||
final title = _buildServerCardTitle(srv);
|
||||
|
||||
return cardStatus.listenVal((_) {
|
||||
final List<Widget> children = [title];
|
||||
if (srv.conn == ServerConn.finished) {
|
||||
if (cardStatus.value.flip) {
|
||||
children.add(_buildFlippedCard(srv));
|
||||
} else {
|
||||
children.add(_buildNormalCard(srv.status, srv.spi));
|
||||
}
|
||||
}
|
||||
|
||||
final height = _calcCardHeight(srv.conn, cardStatus.value.flip);
|
||||
return AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 377),
|
||||
curve: Curves.fastEaseInToSlowEaseOut,
|
||||
height: height,
|
||||
// Use [OverflowBox] to dismiss the warning of [Column] overflow.
|
||||
child: OverflowBox(
|
||||
// If `height == _kCardHeightMin`, the `maxHeight` will be ignored.
|
||||
//
|
||||
// You can comment the `maxHeight` then connect&disconnect the server
|
||||
// to see the difference.
|
||||
maxHeight: height != _kCardHeightMin ? height : null,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: children,
|
||||
),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
Widget _buildFlippedCard(Server srv) {
|
||||
const color = Colors.grey;
|
||||
const textStyle = TextStyle(fontSize: 13, color: color);
|
||||
final children = [
|
||||
Btn.column(
|
||||
onTap: () => _onTapSuspend(srv),
|
||||
icon: const Icon(Icons.stop, color: color),
|
||||
text: l10n.suspend,
|
||||
textStyle: textStyle,
|
||||
),
|
||||
Btn.column(
|
||||
onTap: () => _onTapShutdown(srv),
|
||||
icon: const Icon(Icons.power_off, color: color),
|
||||
text: l10n.shutdown,
|
||||
textStyle: textStyle,
|
||||
),
|
||||
Btn.column(
|
||||
onTap: () => _onTapReboot(srv),
|
||||
icon: const Icon(Icons.restart_alt, color: color),
|
||||
text: l10n.reboot,
|
||||
textStyle: textStyle,
|
||||
),
|
||||
Btn.column(
|
||||
onTap: () => _onTapEdit(srv),
|
||||
icon: const Icon(Icons.edit, color: color),
|
||||
text: libL10n.edit,
|
||||
textStyle: textStyle,
|
||||
)
|
||||
];
|
||||
|
||||
final width = (_media.size.width - _cardPad) / children.length;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(top: 9),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: children.map((e) {
|
||||
if (width == 0) return e;
|
||||
return SizedBox(width: width, child: e);
|
||||
}).toList(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildNormalCard(ServerStatus ss, Spi spi) {
|
||||
return LayoutBuilder(builder: (_, cons) {
|
||||
final maxWidth = cons.maxWidth;
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
UIs.height13,
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
_wrapWithSizedbox(PercentCircle(percent: ss.cpu.usedPercent()), maxWidth, true),
|
||||
_wrapWithSizedbox(
|
||||
PercentCircle(percent: ss.mem.usedPercent * 100),
|
||||
maxWidth,
|
||||
true,
|
||||
),
|
||||
_wrapWithSizedbox(_buildNet(ss, spi.id), maxWidth),
|
||||
_wrapWithSizedbox(_buildDisk(ss, spi.id), maxWidth),
|
||||
],
|
||||
),
|
||||
UIs.height13,
|
||||
if (Stores.setting.moveServerFuncs.fetch() &&
|
||||
// Discussion #146
|
||||
!Stores.setting.serverTabUseOldUI.fetch())
|
||||
SizedBox(
|
||||
height: 27,
|
||||
child: ServerFuncBtns(spi: spi),
|
||||
),
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
bool get wantKeepAlive => true;
|
||||
|
||||
@override
|
||||
Future<void> afterFirstLayout(BuildContext context) async {
|
||||
ServerProvider.refresh();
|
||||
ServerProvider.startAutoRefresh();
|
||||
}
|
||||
|
||||
static const _kCardHeightMin = 23.0;
|
||||
static const _kCardHeightFlip = 99.0;
|
||||
static const _kCardHeightNormal = 108.0;
|
||||
static const _kCardHeightMoveOutFuncs = 135.0;
|
||||
}
|
||||
62
lib/view/page/server/tab/top_bar.dart
Normal file
62
lib/view/page/server/tab/top_bar.dart
Normal file
@@ -0,0 +1,62 @@
|
||||
part of 'tab.dart';
|
||||
|
||||
final class _TopBar extends StatelessWidget implements PreferredSizeWidget {
|
||||
final ValueNotifier<Set<String>> tags;
|
||||
final void Function(String) onTagChanged;
|
||||
final String initTag;
|
||||
|
||||
const _TopBar({
|
||||
required this.initTag,
|
||||
required this.onTagChanged,
|
||||
required this.tags,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isMobile = ResponsiveBreakpoints.of(context).isMobile;
|
||||
if (!isMobile) return UIs.placeholder;
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(left: 10),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
// Keep this btn. For issue #657.
|
||||
InkWell(
|
||||
borderRadius: BorderRadius.circular(13),
|
||||
onTap: () {
|
||||
SettingsPage.route.go(context);
|
||||
},
|
||||
child: const Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 7, vertical: 3),
|
||||
child: Row(
|
||||
children: [
|
||||
Text(
|
||||
BuildData.name,
|
||||
style: TextStyle(fontSize: 19),
|
||||
),
|
||||
SizedBox(width: 5),
|
||||
Icon(
|
||||
Icons.settings,
|
||||
size: 17,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 30),
|
||||
TagSwitcher(
|
||||
tags: tags,
|
||||
onTagChanged: onTagChanged,
|
||||
initTag: initTag,
|
||||
singleLine: true,
|
||||
reversed: true,
|
||||
).expanded(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Size get preferredSize => const Size.fromHeight(TagSwitcher.kTagBtnHeight);
|
||||
}
|
||||
243
lib/view/page/server/tab/utils.dart
Normal file
243
lib/view/page/server/tab/utils.dart
Normal file
@@ -0,0 +1,243 @@
|
||||
// ignore_for_file: invalid_use_of_protected_member
|
||||
|
||||
part of 'tab.dart';
|
||||
|
||||
extension _Actions on _ServerPageState {
|
||||
void _onTapCard(Server srv) {
|
||||
if (srv.canViewDetails) {
|
||||
// _splitViewCtrl.replace(ServerDetailPage(
|
||||
// key: ValueKey(srv.spi.id),
|
||||
// args: SpiRequiredArgs(srv.spi),
|
||||
// ));
|
||||
ServerDetailPage.route.go(
|
||||
context,
|
||||
SpiRequiredArgs(srv.spi),
|
||||
);
|
||||
} else {
|
||||
// _splitViewCtrl.replace(ServerEditPage(
|
||||
// key: ValueKey(srv.spi.id),
|
||||
// args: SpiRequiredArgs(srv.spi),
|
||||
// ));
|
||||
ServerEditPage.route.go(
|
||||
context,
|
||||
args: SpiRequiredArgs(srv.spi),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
void _onLongPressCard(Server srv) {
|
||||
if (srv.conn == ServerConn.finished) {
|
||||
final id = srv.spi.id;
|
||||
final cardStatus = _getCardNoti(id);
|
||||
cardStatus.value = cardStatus.value.copyWith(
|
||||
flip: !cardStatus.value.flip,
|
||||
);
|
||||
} else {
|
||||
_splitViewCtrl.replace(ServerEditPage(
|
||||
key: ValueKey(srv.spi.id),
|
||||
args: SpiRequiredArgs(srv.spi),
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
void _onTapAddServer() {
|
||||
// final isMobile = ResponsiveBreakpoints.of(context).isMobile;
|
||||
// if (isMobile) {
|
||||
ServerEditPage.route.go(context);
|
||||
// } else {
|
||||
// _splitViewCtrl.replace(const ServerEditPage(
|
||||
// key: ValueKey('addServer'),
|
||||
// ));
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
extension _Operation on _ServerPageState {
|
||||
void _onTapSuspend(Server srv) {
|
||||
_askFor(
|
||||
func: () async {
|
||||
if (Stores.setting.showSuspendTip.fetch()) {
|
||||
await context.showRoundDialog(
|
||||
title: libL10n.attention,
|
||||
child: Text(l10n.suspendTip),
|
||||
);
|
||||
Stores.setting.showSuspendTip.put(false);
|
||||
}
|
||||
srv.client?.execWithPwd(
|
||||
ShellFunc.suspend.exec(srv.spi.id),
|
||||
context: context,
|
||||
id: srv.id,
|
||||
);
|
||||
},
|
||||
typ: l10n.suspend,
|
||||
name: srv.spi.name,
|
||||
);
|
||||
}
|
||||
|
||||
void _onTapShutdown(Server srv) {
|
||||
_askFor(
|
||||
func: () => srv.client?.execWithPwd(
|
||||
ShellFunc.shutdown.exec(srv.spi.id),
|
||||
context: context,
|
||||
id: srv.id,
|
||||
),
|
||||
typ: l10n.shutdown,
|
||||
name: srv.spi.name,
|
||||
);
|
||||
}
|
||||
|
||||
void _onTapReboot(Server srv) {
|
||||
_askFor(
|
||||
func: () => srv.client?.execWithPwd(
|
||||
ShellFunc.reboot.exec(srv.spi.id),
|
||||
context: context,
|
||||
id: srv.id,
|
||||
),
|
||||
typ: l10n.reboot,
|
||||
name: srv.spi.name,
|
||||
);
|
||||
}
|
||||
|
||||
void _onTapEdit(Server srv) {
|
||||
if (srv.canViewDetails) {
|
||||
_splitViewCtrl.replace(ServerDetailPage(
|
||||
key: ValueKey(srv.spi.id),
|
||||
args: SpiRequiredArgs(srv.spi),
|
||||
));
|
||||
} else {
|
||||
_splitViewCtrl.replace(ServerEditPage(
|
||||
key: ValueKey(srv.spi.id),
|
||||
args: SpiRequiredArgs(srv.spi),
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
extension _Utils on _ServerPageState {
|
||||
List<String> _filterServers(List<String> order) {
|
||||
final tag = _tag.value;
|
||||
if (tag == TagSwitcher.kDefaultTag) return order;
|
||||
return order.where((e) {
|
||||
final tags = ServerProvider.pick(id: e)?.value.spi.tags;
|
||||
if (tags == null) return false;
|
||||
return tags.contains(tag);
|
||||
}).toList();
|
||||
}
|
||||
|
||||
double? _calcCardHeight(ServerConn cs, bool flip) {
|
||||
if (_textFactorDouble != 1.0) return null;
|
||||
if (cs != ServerConn.finished) {
|
||||
return _ServerPageState._kCardHeightMin;
|
||||
}
|
||||
if (flip) {
|
||||
return _ServerPageState._kCardHeightFlip;
|
||||
}
|
||||
if (Stores.setting.moveServerFuncs.fetch() &&
|
||||
// Discussion #146
|
||||
!Stores.setting.serverTabUseOldUI.fetch()) {
|
||||
return _ServerPageState._kCardHeightMoveOutFuncs;
|
||||
}
|
||||
return _ServerPageState._kCardHeightNormal;
|
||||
}
|
||||
|
||||
void _askFor({
|
||||
required void Function() func,
|
||||
required String typ,
|
||||
required String name,
|
||||
}) {
|
||||
context.showRoundDialog(
|
||||
title: libL10n.attention,
|
||||
child: Text(libL10n.askContinue('$typ ${l10n.server}($name)')),
|
||||
actions: Btn.ok(
|
||||
onTap: () {
|
||||
context.pop();
|
||||
func();
|
||||
},
|
||||
).toList,
|
||||
);
|
||||
}
|
||||
|
||||
_CardNotifier _getCardNoti(String id) => _cardsStatus.putIfAbsent(
|
||||
id,
|
||||
() => _CardNotifier(const _CardStatus()),
|
||||
);
|
||||
|
||||
void _updateOffset() {
|
||||
if (!Stores.setting.fullScreenJitter.fetch()) return;
|
||||
final x = _media.size.height * 0.03;
|
||||
final r = math.Random().nextDouble();
|
||||
final n = math.Random().nextBool() ? 1 : -1;
|
||||
_offset = x * r * n;
|
||||
}
|
||||
|
||||
void _updateTextScaler() {
|
||||
_textFactorDouble = Stores.setting.textFactor.fetch();
|
||||
_textFactor = TextScaler.linear(_textFactorDouble);
|
||||
}
|
||||
|
||||
void _startAvoidJitterTimer() {
|
||||
if (!Stores.setting.fullScreenJitter.fetch()) return;
|
||||
_timer = Timer.periodic(const Duration(seconds: 30), (_) {
|
||||
if (mounted) {
|
||||
_updateOffset();
|
||||
setState(() {});
|
||||
} else {
|
||||
_timer?.cancel();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
extension _ServerX on Server {
|
||||
String? _getTopRightStr(Spi spi) {
|
||||
switch (conn) {
|
||||
case ServerConn.disconnected:
|
||||
return null;
|
||||
case ServerConn.finished:
|
||||
// Highest priority of temperature display
|
||||
final cmdTemp = () {
|
||||
final val = status.customCmds['server_card_top_right'];
|
||||
if (val == null) return null;
|
||||
// This returned value is used on server card top right, so it should
|
||||
// be a single line string.
|
||||
return val.split('\n').lastOrNull;
|
||||
}();
|
||||
final temperatureVal = () {
|
||||
// Second priority
|
||||
final preferTempDev = spi.custom?.preferTempDev;
|
||||
if (preferTempDev != null) {
|
||||
final preferTemp = status.sensors
|
||||
.firstWhereOrNull((e) => e.device == preferTempDev)
|
||||
?.summary
|
||||
?.split(' ')
|
||||
.firstOrNull;
|
||||
if (preferTemp != null) {
|
||||
return double.tryParse(preferTemp.replaceFirst('°C', ''));
|
||||
}
|
||||
}
|
||||
// Last priority
|
||||
final temp = status.temps.first;
|
||||
if (temp != null) {
|
||||
return temp;
|
||||
}
|
||||
return null;
|
||||
}();
|
||||
final upTime = status.more[StatusCmdType.uptime];
|
||||
final items = [
|
||||
cmdTemp ?? (temperatureVal != null ? '${temperatureVal.toStringAsFixed(1)}°C' : null),
|
||||
upTime
|
||||
];
|
||||
final str = items.where((e) => e != null && e.isNotEmpty).join(' | ');
|
||||
if (str.isEmpty) return libL10n.empty;
|
||||
return str;
|
||||
case ServerConn.loading:
|
||||
return null;
|
||||
case ServerConn.connected:
|
||||
return null;
|
||||
case ServerConn.connecting:
|
||||
return null;
|
||||
case ServerConn.failed:
|
||||
return status.err != null ? l10n.viewErr : libL10n.fail;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user