Initial Commit
This commit is contained in:
ivan2282
440
lib/widgets/connection_status_widget.dart
Normal file
440
lib/widgets/connection_status_widget.dart
Normal file
@@ -0,0 +1,440 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'dart:async';
|
||||
|
||||
import '../connection/connection_state.dart' as conn_state;
|
||||
import '../connection/health_monitor.dart';
|
||||
import '../api_service_v2.dart';
|
||||
|
||||
|
||||
class ConnectionStatusWidget extends StatefulWidget {
|
||||
final bool showDetails;
|
||||
final bool showHealthMetrics;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const ConnectionStatusWidget({
|
||||
super.key,
|
||||
this.showDetails = false,
|
||||
this.showHealthMetrics = false,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
State<ConnectionStatusWidget> createState() => _ConnectionStatusWidgetState();
|
||||
}
|
||||
|
||||
class _ConnectionStatusWidgetState extends State<ConnectionStatusWidget> {
|
||||
late StreamSubscription<conn_state.ConnectionInfo> _stateSubscription;
|
||||
late StreamSubscription<HealthMetrics> _healthSubscription;
|
||||
|
||||
conn_state.ConnectionInfo? _currentState;
|
||||
HealthMetrics? _currentHealth;
|
||||
bool _isExpanded = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_setupSubscriptions();
|
||||
}
|
||||
|
||||
void _setupSubscriptions() {
|
||||
_stateSubscription = ApiServiceV2.instance.connectionState.listen((state) {
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
_currentState = state;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (widget.showHealthMetrics) {
|
||||
_healthSubscription = ApiServiceV2.instance.healthMetrics.listen((
|
||||
health,
|
||||
) {
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
_currentHealth = health;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_stateSubscription.cancel();
|
||||
_healthSubscription.cancel();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (_currentState == null) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
return GestureDetector(
|
||||
onTap: widget.onTap ?? _toggleExpanded,
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: _getStatusColor().withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: Border.all(
|
||||
color: _getStatusColor().withOpacity(0.3),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
_buildStatusIcon(),
|
||||
const SizedBox(width: 8),
|
||||
_buildStatusText(),
|
||||
if (widget.showDetails) ...[
|
||||
const SizedBox(width: 8),
|
||||
Icon(
|
||||
_isExpanded
|
||||
? Icons.keyboard_arrow_up
|
||||
: Icons.keyboard_arrow_down,
|
||||
size: 16,
|
||||
color: _getStatusColor(),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
if (_isExpanded && widget.showDetails) ...[
|
||||
const SizedBox(height: 8),
|
||||
_buildDetails(),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildStatusIcon() {
|
||||
return AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
width: 8,
|
||||
height: 8,
|
||||
decoration: BoxDecoration(
|
||||
color: _getStatusColor(),
|
||||
shape: BoxShape.circle,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: _getStatusColor().withOpacity(0.5),
|
||||
blurRadius: 4,
|
||||
spreadRadius: 1,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildStatusText() {
|
||||
return Text(
|
||||
_getStatusText(),
|
||||
style: TextStyle(
|
||||
color: _getStatusColor(),
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDetails() {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
if (_currentState?.serverUrl != null)
|
||||
_buildDetailRow('Сервер', _currentState!.serverUrl!),
|
||||
if (_currentState?.latency != null)
|
||||
_buildDetailRow('Задержка', '${_currentState!.latency}ms'),
|
||||
if (_currentState?.attemptNumber != null)
|
||||
_buildDetailRow('Попытка', '${_currentState!.attemptNumber}'),
|
||||
if (_currentState?.reconnectDelay != null)
|
||||
_buildDetailRow(
|
||||
'Переподключение',
|
||||
'через ${_currentState!.reconnectDelay!.inSeconds}с',
|
||||
),
|
||||
if (_currentHealth != null) ...[
|
||||
const SizedBox(height: 4),
|
||||
_buildHealthMetrics(),
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDetailRow(String label, String value) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 1),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
'$label: ',
|
||||
style: TextStyle(
|
||||
color: _getStatusColor().withOpacity(0.7),
|
||||
fontSize: 10,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
value,
|
||||
style: TextStyle(
|
||||
color: _getStatusColor(),
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildHealthMetrics() {
|
||||
if (_currentHealth == null) return const SizedBox.shrink();
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(
|
||||
color: _getHealthColor().withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(color: _getHealthColor().withOpacity(0.3), width: 1),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(_getHealthIcon(), size: 12, color: _getHealthColor()),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
'Здоровье: ${_currentHealth!.healthScore}/100',
|
||||
style: TextStyle(
|
||||
color: _getHealthColor(),
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
_buildHealthBar(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildHealthBar() {
|
||||
final score = _currentHealth!.healthScore;
|
||||
return Container(
|
||||
height: 4,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.grey.withOpacity(0.2),
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
child: FractionallySizedBox(
|
||||
alignment: Alignment.centerLeft,
|
||||
widthFactor: score / 100,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: _getHealthColor(),
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Color _getStatusColor() {
|
||||
switch (_currentState?.state) {
|
||||
case conn_state.ConnectionState.ready:
|
||||
return Colors.green;
|
||||
case conn_state.ConnectionState.connected:
|
||||
return Colors.blue;
|
||||
case conn_state.ConnectionState.connecting:
|
||||
case conn_state.ConnectionState.reconnecting:
|
||||
return Colors.orange;
|
||||
case conn_state.ConnectionState.error:
|
||||
return Colors.red;
|
||||
case conn_state.ConnectionState.disconnected:
|
||||
case conn_state.ConnectionState.disabled:
|
||||
default:
|
||||
return Colors.grey;
|
||||
}
|
||||
}
|
||||
|
||||
String _getStatusText() {
|
||||
switch (_currentState?.state) {
|
||||
case conn_state.ConnectionState.ready:
|
||||
return 'Готов';
|
||||
case conn_state.ConnectionState.connected:
|
||||
return 'Подключен';
|
||||
case conn_state.ConnectionState.connecting:
|
||||
return 'Подключение...';
|
||||
case conn_state.ConnectionState.reconnecting:
|
||||
return 'Переподключение...';
|
||||
case conn_state.ConnectionState.error:
|
||||
return 'Ошибка';
|
||||
case conn_state.ConnectionState.disconnected:
|
||||
return 'Отключен';
|
||||
case conn_state.ConnectionState.disabled:
|
||||
return 'Отключен';
|
||||
default:
|
||||
return 'Неизвестно';
|
||||
}
|
||||
}
|
||||
|
||||
Color _getHealthColor() {
|
||||
if (_currentHealth == null) return Colors.grey;
|
||||
|
||||
switch (_currentHealth!.quality) {
|
||||
case ConnectionQuality.excellent:
|
||||
return Colors.green;
|
||||
case ConnectionQuality.good:
|
||||
return Colors.lightGreen;
|
||||
case ConnectionQuality.fair:
|
||||
return Colors.orange;
|
||||
case ConnectionQuality.poor:
|
||||
return Colors.red;
|
||||
case ConnectionQuality.critical:
|
||||
return Colors.red.shade800;
|
||||
}
|
||||
}
|
||||
|
||||
IconData _getHealthIcon() {
|
||||
if (_currentHealth == null) return Icons.help_outline;
|
||||
|
||||
switch (_currentHealth!.quality) {
|
||||
case ConnectionQuality.excellent:
|
||||
return Icons.signal_cellular_4_bar;
|
||||
case ConnectionQuality.good:
|
||||
return Icons.signal_cellular_4_bar;
|
||||
case ConnectionQuality.fair:
|
||||
return Icons.signal_cellular_4_bar;
|
||||
case ConnectionQuality.poor:
|
||||
return Icons.signal_cellular_0_bar;
|
||||
case ConnectionQuality.critical:
|
||||
return Icons.signal_cellular_0_bar;
|
||||
}
|
||||
}
|
||||
|
||||
void _toggleExpanded() {
|
||||
setState(() {
|
||||
_isExpanded = !_isExpanded;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class ConnectionIndicator extends StatefulWidget {
|
||||
final double size;
|
||||
final bool showPulse;
|
||||
|
||||
const ConnectionIndicator({
|
||||
super.key,
|
||||
this.size = 12.0,
|
||||
this.showPulse = true,
|
||||
});
|
||||
|
||||
@override
|
||||
State<ConnectionIndicator> createState() => _ConnectionIndicatorState();
|
||||
}
|
||||
|
||||
class _ConnectionIndicatorState extends State<ConnectionIndicator> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return StreamBuilder<conn_state.ConnectionInfo>(
|
||||
stream: ApiServiceV2.instance.connectionState,
|
||||
builder: (context, snapshot) {
|
||||
if (!snapshot.hasData) {
|
||||
return SizedBox(
|
||||
width: widget.size,
|
||||
height: widget.size,
|
||||
child: const CircularProgressIndicator(strokeWidth: 2),
|
||||
);
|
||||
}
|
||||
|
||||
final state = snapshot.data!;
|
||||
final color = _getStatusColor(state.state);
|
||||
final isActive =
|
||||
state.state == conn_state.ConnectionState.ready ||
|
||||
state.state == conn_state.ConnectionState.connected;
|
||||
|
||||
if (widget.showPulse && isActive) {
|
||||
return _buildPulsingIndicator(color);
|
||||
} else {
|
||||
return _buildStaticIndicator(color);
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildPulsingIndicator(Color color) {
|
||||
return TweenAnimationBuilder<double>(
|
||||
duration: const Duration(seconds: 2),
|
||||
tween: Tween(begin: 0.0, end: 1.0),
|
||||
builder: (context, value, child) {
|
||||
return Container(
|
||||
width: widget.size,
|
||||
height: widget.size,
|
||||
decoration: BoxDecoration(
|
||||
color: color.withOpacity(0.3 + (0.7 * value)),
|
||||
shape: BoxShape.circle,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: color.withOpacity(0.5 * value),
|
||||
blurRadius: 8 * value,
|
||||
spreadRadius: 2 * value,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
onEnd: () {
|
||||
|
||||
if (mounted) {
|
||||
setState(() {});
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildStaticIndicator(Color color) {
|
||||
return Container(
|
||||
width: widget.size,
|
||||
height: widget.size,
|
||||
decoration: BoxDecoration(
|
||||
color: color,
|
||||
shape: BoxShape.circle,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: color.withOpacity(0.5),
|
||||
blurRadius: 4,
|
||||
spreadRadius: 1,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Color _getStatusColor(conn_state.ConnectionState state) {
|
||||
switch (state) {
|
||||
case conn_state.ConnectionState.ready:
|
||||
return Colors.green;
|
||||
case conn_state.ConnectionState.connected:
|
||||
return Colors.blue;
|
||||
case conn_state.ConnectionState.connecting:
|
||||
case conn_state.ConnectionState.reconnecting:
|
||||
return Colors.orange;
|
||||
case conn_state.ConnectionState.error:
|
||||
return Colors.red;
|
||||
case conn_state.ConnectionState.disconnected:
|
||||
case conn_state.ConnectionState.disabled:
|
||||
return Colors.grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user