Compare commits
@@ -1,15 +1,27 @@
|
||||
name: Build and Push
|
||||
|
||||
on:
|
||||
release:
|
||||
types: [published]
|
||||
push:
|
||||
tags:
|
||||
- 'v*'
|
||||
|
||||
jobs:
|
||||
build:
|
||||
release:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
- name: Create Gitea Release
|
||||
run: |
|
||||
curl -sf -X POST \
|
||||
-H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"tag_name": "${{ github.ref_name }}", "name": "Release ${{ github.ref_name }}", "body": "Automated release for ${{ github.ref_name }}"}' \
|
||||
"${{ github.server_url }}/api/v1/repos/${{ github.repository }}/releases"
|
||||
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
needs: release
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Login to Gitea Registry
|
||||
uses: docker/login-action@v3
|
||||
|
||||
@@ -7,6 +7,60 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
## [1.0.1] - 2026-01-03
|
||||
|
||||
### Fixed
|
||||
- Web authentication now works correctly with NPM forward auth
|
||||
- Dio client sends cookies with requests via `withCredentials: true`
|
||||
- Added platform-specific adapters (native vs web) for proper cookie handling
|
||||
|
||||
## [1.0.0] - 2026-01-03
|
||||
|
||||
### Added
|
||||
- **Authentication System** - Dual-flow auth supporting web (NPM forward auth) and mobile (OIDC)
|
||||
- `AuthState` model with roles, permissions, and user preferences
|
||||
- `AuthProvider` with automatic web session detection via `/auth/me`
|
||||
- Permission system with Domain/Action enums and hierarchical access levels
|
||||
- `PermissionGate` and `AdminGate` widgets for UI permission checks
|
||||
- `Role` model with `{domain}.{category}:{action}` format parsing
|
||||
- Route guards redirect unauthenticated users to login page
|
||||
- Login page with Authentik OAuth redirect
|
||||
- Mobile auth platform configuration (iOS URL schemes, Android AppAuth)
|
||||
- Comprehensive auth test suite (60 unit tests)
|
||||
|
||||
### Changed
|
||||
- API interceptor skips Bearer tokens on web (uses cookies via NPM forward auth)
|
||||
- Router integrates auth state for protected route access
|
||||
- **First stable release** - Core functionality complete for home lab dashboard
|
||||
|
||||
## [0.3.3] - 2026-01-03
|
||||
|
||||
### Added
|
||||
- Health check endpoint (`/health.html`) for Portainer container monitoring
|
||||
- Local search filtering in DataGrid (filters cached data client-side)
|
||||
- Container status badges now reflect health status (green=healthy, orange=unhealthy)
|
||||
- `ContainerHealth` enum for parsing Docker health status from status string
|
||||
|
||||
### Changed
|
||||
- Standardized header bar heights to 56px across all panels
|
||||
- Container grid now correctly parses Docker API JSON format (capitalized keys)
|
||||
- Status column displays clean uptime (stripped health indicators)
|
||||
- Status badges have consistent minimum width (90px)
|
||||
- Search bar styling improved (36px height, visible border, proper background)
|
||||
- Quick links now properly persist link type (iframe vs new tab)
|
||||
- Iframe switching now closes existing content before loading new link
|
||||
|
||||
### Fixed
|
||||
- Quick links form properly saves changes and refreshes panel
|
||||
- `ContainerState` type conflict resolved (removed duplicate enum)
|
||||
- Container data parsing handles null values safely
|
||||
|
||||
### Branding
|
||||
- Updated favicon and icons with Tatlock bucket logo
|
||||
- Updated manifest.json with Tatlock branding
|
||||
|
||||
## [0.3.2] - 2025-01-02
|
||||
|
||||
### Changed
|
||||
- API defaults now use LAN IPs for local development (no auth required)
|
||||
- Auth interceptor skips authentication when using LAN endpoints
|
||||
|
||||
+2
-2
@@ -4,9 +4,9 @@ FROM ghcr.io/cirruslabs/flutter:stable AS builder
|
||||
WORKDIR /app
|
||||
|
||||
# Copy dependency files first for better caching
|
||||
COPY pubspec.yaml pubspec.lock ./
|
||||
COPY pubspec.yaml ./
|
||||
|
||||
# Get dependencies
|
||||
# Get dependencies (generates pubspec.lock)
|
||||
RUN flutter pub get
|
||||
|
||||
# Copy the rest of the application
|
||||
|
||||
@@ -24,10 +24,13 @@ android {
|
||||
applicationId = "net.schweitz.tatlock_ui"
|
||||
// You can update the following values to match your application needs.
|
||||
// For more information, see: https://flutter.dev/to/review-gradle-config.
|
||||
minSdk = flutter.minSdkVersion
|
||||
minSdk = 23 // Required for AppAuth
|
||||
targetSdk = flutter.targetSdkVersion
|
||||
versionCode = flutter.versionCode
|
||||
versionName = flutter.versionName
|
||||
|
||||
// flutter_appauth redirect scheme for OIDC callbacks
|
||||
manifestPlaceholders["appAuthRedirectScheme"] = "net.schweitz.tatlock"
|
||||
}
|
||||
|
||||
buildTypes {
|
||||
|
||||
+162
-1
@@ -142,7 +142,7 @@ part 'container_model.freezed.dart';
|
||||
part 'container_model.g.dart';
|
||||
|
||||
@freezed
|
||||
class ContainerModel with _$ContainerModel {
|
||||
sealed class ContainerModel with _$ContainerModel {
|
||||
const factory ContainerModel({
|
||||
required String id,
|
||||
required String name,
|
||||
@@ -197,6 +197,139 @@ class ContainerRepositoryImpl implements ContainerRepository {
|
||||
}
|
||||
```
|
||||
|
||||
## Data Model Patterns
|
||||
|
||||
Models handle conversion between API JSON and domain entities. The pattern depends on whether the feature is **read-only** or **CRUD**.
|
||||
|
||||
### Read-Only Models
|
||||
|
||||
For data fetched from external systems (Docker, NPM, Portainer) where Flutter doesn't create/update records:
|
||||
|
||||
```dart
|
||||
@freezed
|
||||
sealed class ContainerModel with _$ContainerModel {
|
||||
const factory ContainerModel({
|
||||
required String id,
|
||||
required String name,
|
||||
required String status,
|
||||
}) = _ContainerModel;
|
||||
|
||||
const ContainerModel._();
|
||||
|
||||
factory ContainerModel.fromJson(Map<String, dynamic> json) =>
|
||||
_$ContainerModelFromJson(json);
|
||||
|
||||
/// Converts API response to domain entity.
|
||||
Container toEntity() => Container(
|
||||
id: id,
|
||||
name: name,
|
||||
status: ContainerStatus.values.byName(status),
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Only `toEntity()` is needed** - no `fromEntity()` or `toJson()` required.
|
||||
|
||||
### CRUD Models (Bidirectional)
|
||||
|
||||
For data that Flutter creates, updates, and deletes:
|
||||
|
||||
```dart
|
||||
@freezed
|
||||
sealed class QuickLinkModel with _$QuickLinkModel {
|
||||
const factory QuickLinkModel({
|
||||
@Default(0) int id,
|
||||
required String title,
|
||||
required String url,
|
||||
String? icon,
|
||||
String? category,
|
||||
@Default(0) int position,
|
||||
@JsonKey(name: 'is_visible') @Default(true) bool isVisible,
|
||||
}) = _QuickLinkModel;
|
||||
|
||||
const QuickLinkModel._();
|
||||
|
||||
factory QuickLinkModel.fromJson(Map<String, dynamic> json) =>
|
||||
_$QuickLinkModelFromJson(json);
|
||||
|
||||
/// Converts API response to domain entity.
|
||||
QuickLink toEntity() => QuickLink(
|
||||
id: id.toString(),
|
||||
name: title,
|
||||
url: url,
|
||||
iconName: icon ?? 'link',
|
||||
category: category,
|
||||
sortOrder: position,
|
||||
isActive: isVisible,
|
||||
);
|
||||
|
||||
/// Creates model from domain entity for API requests.
|
||||
factory QuickLinkModel.fromEntity(QuickLink entity) => QuickLinkModel(
|
||||
id: int.tryParse(entity.id) ?? 0,
|
||||
title: entity.name,
|
||||
url: entity.url,
|
||||
icon: entity.iconName,
|
||||
category: entity.category,
|
||||
position: entity.sortOrder,
|
||||
isVisible: entity.isActive,
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Critical rules for CRUD models:**
|
||||
|
||||
1. **Always use generated `toJson()`** - Never write custom JSON methods that selectively include fields. The generated `toJson()` from freezed/json_serializable always includes ALL fields, which is the correct behavior.
|
||||
|
||||
2. **Never create custom `toCreateJson()` or similar** - This leads to bugs where fields are silently dropped.
|
||||
|
||||
3. **Use `fromEntity()` factory** - Maps domain entity fields to API field names.
|
||||
|
||||
### Form Update Pattern
|
||||
|
||||
When updating existing entities in forms, **always use `copyWith()`** to preserve existing data:
|
||||
|
||||
```dart
|
||||
// ✅ Correct - preserves all existing fields
|
||||
final updatedLink = existingLink.copyWith(
|
||||
name: _nameController.text.trim(),
|
||||
url: _urlController.text.trim(),
|
||||
category: category.isEmpty ? null : category,
|
||||
);
|
||||
await actions.update(updatedLink);
|
||||
|
||||
// ❌ Wrong - loses existing data not in form
|
||||
final newLink = QuickLink(
|
||||
id: existingLink.id,
|
||||
name: _nameController.text.trim(),
|
||||
url: _urlController.text.trim(),
|
||||
// Missing: sortOrder, other fields...
|
||||
);
|
||||
```
|
||||
|
||||
### Datasource Usage
|
||||
|
||||
```dart
|
||||
// Create - convert entity to model, use toJson()
|
||||
Future<QuickLink> createQuickLink(QuickLink link) async {
|
||||
final model = QuickLinkModel.fromEntity(link);
|
||||
final response = await _dio.post<Map<String, dynamic>>(
|
||||
_basePath,
|
||||
data: model.toJson(), // Always use generated toJson()
|
||||
);
|
||||
return QuickLinkModel.fromJson(response.data!).toEntity();
|
||||
}
|
||||
|
||||
// Update - same pattern
|
||||
Future<QuickLink> updateQuickLink(QuickLink link) async {
|
||||
final model = QuickLinkModel.fromEntity(link);
|
||||
final response = await _dio.put<Map<String, dynamic>>(
|
||||
'$_basePath/${link.id}',
|
||||
data: model.toJson(), // Always use generated toJson()
|
||||
);
|
||||
return QuickLinkModel.fromJson(response.data!).toEntity();
|
||||
}
|
||||
```
|
||||
|
||||
### Presentation Layer (Flutter + Riverpod)
|
||||
|
||||
The presentation layer contains UI code and state management.
|
||||
@@ -331,6 +464,34 @@ Generated files:
|
||||
- `*.freezed.dart` - Immutable classes
|
||||
- `*.g.dart` - JSON serialization, Riverpod providers
|
||||
|
||||
### Freezed 3.x: Required `sealed class`
|
||||
|
||||
**Freezed 3.x requires the `sealed` keyword** on all classes with generated mixins. Without it, the generated code will fail to compile with errors about missing concrete implementations.
|
||||
|
||||
```dart
|
||||
// ✅ Correct - Freezed 3.x
|
||||
@freezed
|
||||
sealed class UserModel with _$UserModel {
|
||||
const factory UserModel({
|
||||
required String id,
|
||||
required String name,
|
||||
}) = _UserModel;
|
||||
|
||||
factory UserModel.fromJson(Map<String, dynamic> json) =>
|
||||
_$UserModelFromJson(json);
|
||||
}
|
||||
|
||||
// ❌ Wrong - will fail to compile
|
||||
@freezed
|
||||
class UserModel with _$UserModel { // Missing `sealed`
|
||||
const factory UserModel({...}) = _UserModel;
|
||||
}
|
||||
```
|
||||
|
||||
The `sealed` keyword was introduced in Dart 3.0 and allows the generated mixin `_$UserModel` to have abstract members that are implemented by the private `_UserModel` class.
|
||||
|
||||
**Always use `sealed class` with `@freezed`** - this applies to all models, entities, and state classes using Freezed.
|
||||
|
||||
## Import Rules
|
||||
|
||||
1. Never import from `data/` in `domain/`
|
||||
|
||||
+72
-4
@@ -191,13 +191,81 @@ The NavPanel widget receives items and auto-generates section headers based on u
|
||||
## Panel Configurations by Room
|
||||
|
||||
### Front Hall
|
||||
|
||||
Front Hall uses a **three-mode content system** with a persistent QuickLinks panel:
|
||||
|
||||
| Mode | QuickLinks Panel | Content Area |
|
||||
|------|------------------|--------------|
|
||||
| **Dashboard** | Normal navigation | Dashboard widgets (stats, weather) |
|
||||
| **Iframe** | Normal navigation | Embedded iframe content |
|
||||
| **Settings** | Edit mode (back button, add new, overflow menus) | QuickLinkPage (EntityPageScaffold) |
|
||||
|
||||
#### Dashboard Mode (default)
|
||||
```
|
||||
┌────────────────────────────────────────────────────────────────┬────────────┐
|
||||
│ PRIMARY CONTENT (no nav panel) │ CHAT DOCK │
|
||||
│ Dashboard cards, activity feed │ (expanded) │
|
||||
└────────────────────────────────────────────────────────────────┴────────────┘
|
||||
┌──────────────┬─────────────────────────────────────────────────┬────────────┐
|
||||
│ QUICK LINKS │ PRIMARY CONTENT │ CHAT DOCK │
|
||||
│ │ │ (expanded) │
|
||||
│ ▌HOME │ SYSTEM STATS │ │
|
||||
│ Jellyfin │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ │
|
||||
│ WebUI │ │ CPU │ │ MEM │ │ DISK │ │ NET │ │ │
|
||||
│ │ └──────┘ └──────┘ └──────┘ └──────┘ │ │
|
||||
│ ▌AMP │ │ │
|
||||
│ AMP Home │ WEATHER AIR QUALITY │ │
|
||||
│ │ ┌────────────────┐ ┌────────────────┐ │ │
|
||||
│ ▌INFRA │ │ 72°F Sunny │ │ AQI: 42 Good │ │ │
|
||||
│ Netdata │ └────────────────┘ └────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ [⚙ Settings] │ │ │
|
||||
└──────────────┴─────────────────────────────────────────────────┴────────────┘
|
||||
```
|
||||
|
||||
#### Iframe Mode
|
||||
```
|
||||
┌──────────────┬─────────────────────────────────────────────────┬────────────┐
|
||||
│ QUICK LINKS │ ┌─────────────────────────────────────────────┐ │ CHAT DOCK │
|
||||
│ │ │ Jellyfin [↗] [⟳] [✕] │ │ (collapsed)│
|
||||
│ ▌HOME │ ├─────────────────────────────────────────────┤ │ │
|
||||
│ ▸Jellyfin │ │ │ │ │
|
||||
│ WebUI │ │ <iframe src="jellyfin.url"> │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ ▌AMP │ │ │ │ │
|
||||
│ AMP Home │ │ │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ ▌INFRA │ │ │ │ │
|
||||
│ Netdata │ │ │ │ │
|
||||
│ │ └─────────────────────────────────────────────┘ │ │
|
||||
│ [⚙ Settings] │ │ │
|
||||
└──────────────┴─────────────────────────────────────────────────┴────────────┘
|
||||
```
|
||||
|
||||
#### Settings Mode
|
||||
```
|
||||
┌──────────────┬─────────────────────────────────────────────────┬────────────┐
|
||||
│ [←] Links │ ┌─────────────────────────────────────────────┐ │ CHAT DOCK │
|
||||
│ │ │ ← Back Edit Quick Link [Save] │ │ (collapsed)│
|
||||
│ [+ Add New] │ ├─────────────────────────────────────────────┤ │ │
|
||||
├──────────────┤ │ │ │ │
|
||||
│ ▌HOME │ │ Name: [Jellyfin_________________] │ │ │
|
||||
│ ▸Jellyfin ⋮ │ │ │ │ │
|
||||
│ WebUI ⋮ │ │ URL: [https://jellyfin.schweitz...] │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ ▌AMP │ │ Category: [Home ▼] │ │ │
|
||||
│ AMP Home ⋮ │ │ │ │ │
|
||||
│ │ │ Type: ◉ Iframe ○ New Tab │ │ │
|
||||
│ ▌INFRA │ │ │ │ │
|
||||
│ Netdata ⋮ │ │ Icon: [🎬 Pick...] │ │ │
|
||||
│ Portainer⋮ │ │ │ │ │
|
||||
│ │ │ Active: [✓] │ │ │
|
||||
└──────────────┴─────────────────────────────────────────────────┴────────────┘
|
||||
```
|
||||
|
||||
**Settings mode panel behavior:**
|
||||
- Back button in header (exits settings mode → dashboard)
|
||||
- "+ Add New Link" button at top
|
||||
- Each item has overflow menu (Edit, Delete, Move Up/Down)
|
||||
- Clicking item selects it for editing in content area
|
||||
- Uses EntityPageScaffold pattern (no modals)
|
||||
|
||||
### Control Room
|
||||
```
|
||||
┌───────────┬──────────────────────────────────────────────────────┬──────────┐
|
||||
|
||||
@@ -45,5 +45,18 @@
|
||||
<true/>
|
||||
<key>UIApplicationSupportsIndirectInputEvents</key>
|
||||
<true/>
|
||||
<key>CFBundleURLTypes</key>
|
||||
<array>
|
||||
<dict>
|
||||
<key>CFBundleTypeRole</key>
|
||||
<string>Editor</string>
|
||||
<key>CFBundleURLName</key>
|
||||
<string>net.schweitz.tatlock</string>
|
||||
<key>CFBundleURLSchemes</key>
|
||||
<array>
|
||||
<string>net.schweitz.tatlock</string>
|
||||
</array>
|
||||
</dict>
|
||||
</array>
|
||||
</dict>
|
||||
</plist>
|
||||
|
||||
@@ -3,23 +3,26 @@ import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
import 'package:tatlock_ui/core/api/api_interceptors.dart';
|
||||
import 'package:tatlock_ui/core/config/app_config.dart';
|
||||
|
||||
import 'api_client_native.dart' if (dart.library.html) 'api_client_web.dart'
|
||||
as platform;
|
||||
|
||||
part 'api_client.g.dart';
|
||||
|
||||
/// Provides the Dio instance for Core API.
|
||||
@riverpod
|
||||
Dio coreApiClient(Ref ref) {
|
||||
final dio = Dio(
|
||||
BaseOptions(
|
||||
baseUrl: AppConfig.coreApiUrl,
|
||||
connectTimeout: const Duration(seconds: 10),
|
||||
receiveTimeout: const Duration(seconds: 30),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
),
|
||||
final options = BaseOptions(
|
||||
baseUrl: AppConfig.coreApiUrl,
|
||||
connectTimeout: const Duration(seconds: 10),
|
||||
receiveTimeout: const Duration(seconds: 30),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
);
|
||||
|
||||
final dio = platform.createDio(options);
|
||||
|
||||
dio.interceptors.addAll([
|
||||
AuthInterceptor(ref),
|
||||
LoggingInterceptor(),
|
||||
@@ -32,18 +35,18 @@ Dio coreApiClient(Ref ref) {
|
||||
/// Provides the Dio instance for Tatlock API.
|
||||
@riverpod
|
||||
Dio tatlockApiClient(Ref ref) {
|
||||
final dio = Dio(
|
||||
BaseOptions(
|
||||
baseUrl: AppConfig.tatlockApiUrl,
|
||||
connectTimeout: const Duration(seconds: 10),
|
||||
receiveTimeout: const Duration(minutes: 5), // Longer for LLM responses
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
),
|
||||
final options = BaseOptions(
|
||||
baseUrl: AppConfig.tatlockApiUrl,
|
||||
connectTimeout: const Duration(seconds: 10),
|
||||
receiveTimeout: const Duration(minutes: 5), // Longer for LLM responses
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
);
|
||||
|
||||
final dio = platform.createDio(options);
|
||||
|
||||
dio.interceptors.addAll([
|
||||
AuthInterceptor(ref),
|
||||
LoggingInterceptor(),
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import 'package:dio/dio.dart';
|
||||
|
||||
/// Create a Dio instance for native platforms (mobile, desktop).
|
||||
Dio createDio(BaseOptions options) {
|
||||
return Dio(options);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import 'package:dio/dio.dart';
|
||||
import 'package:dio_web_adapter/dio_web_adapter.dart';
|
||||
|
||||
/// Create a Dio instance for web platform with credentials support.
|
||||
///
|
||||
/// Enables `withCredentials` to send cookies with requests, which is
|
||||
/// required for NPM forward auth to work correctly.
|
||||
Dio createDio(BaseOptions options) {
|
||||
final dio = Dio(options);
|
||||
dio.httpClientAdapter = BrowserHttpClientAdapter(withCredentials: true);
|
||||
return dio;
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import 'dart:developer' as developer;
|
||||
|
||||
import 'package:dio/dio.dart';
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:tatlock_ui/core/auth/auth_provider.dart';
|
||||
import 'package:tatlock_ui/core/config/app_config.dart';
|
||||
@@ -8,7 +9,9 @@ import 'package:tatlock_ui/core/error/app_exception.dart';
|
||||
|
||||
/// Adds authentication token to requests.
|
||||
///
|
||||
/// Skipped entirely when [AppConfig.requiresAuth] is false (LAN development).
|
||||
/// - **LAN mode**: Skipped entirely (no auth required)
|
||||
/// - **Web**: Skipped (cookies handle auth via NPM forward auth)
|
||||
/// - **Mobile**: Adds Bearer token from OIDC authentication
|
||||
class AuthInterceptor extends Interceptor {
|
||||
AuthInterceptor(this._ref);
|
||||
|
||||
@@ -22,10 +25,17 @@ class AuthInterceptor extends Interceptor {
|
||||
return;
|
||||
}
|
||||
|
||||
// Skip Bearer token on web - cookies handle auth via NPM forward auth
|
||||
if (kIsWeb) {
|
||||
handler.next(options);
|
||||
return;
|
||||
}
|
||||
|
||||
// Mobile: Add Bearer token from OIDC authentication
|
||||
final authState = _ref.read(authProvider);
|
||||
|
||||
authState.whenData((auth) {
|
||||
if (auth.isAuthenticated && auth.accessToken != null) {
|
||||
if (auth.isAuthenticated && auth.accessToken != null && auth.accessToken != 'web-session') {
|
||||
options.headers['Authorization'] = 'Bearer ${auth.accessToken}';
|
||||
}
|
||||
});
|
||||
@@ -49,33 +59,59 @@ class AuthInterceptor extends Interceptor {
|
||||
}
|
||||
}
|
||||
|
||||
/// Logs requests and responses in debug mode.
|
||||
/// Logs API requests and responses to the console.
|
||||
///
|
||||
/// All requests are logged with method, URL, query params, and body.
|
||||
/// Responses include status code. Errors include full details.
|
||||
class LoggingInterceptor extends Interceptor {
|
||||
@override
|
||||
void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
|
||||
developer.log(
|
||||
'→ ${options.method} ${options.uri}',
|
||||
name: 'api',
|
||||
);
|
||||
final buffer = StringBuffer()
|
||||
..writeln('┌── API Request ──────────────────────────────────────')
|
||||
..writeln('│ ${options.method} ${options.path}');
|
||||
|
||||
if (options.queryParameters.isNotEmpty) {
|
||||
buffer.writeln('│ Query: ${options.queryParameters}');
|
||||
}
|
||||
|
||||
if (options.data != null) {
|
||||
buffer.writeln('│ Body: ${options.data}');
|
||||
}
|
||||
|
||||
buffer.writeln('└─────────────────────────────────────────────────────');
|
||||
|
||||
final message = buffer.toString();
|
||||
developer.log(message, name: 'API');
|
||||
debugPrint(message);
|
||||
handler.next(options);
|
||||
}
|
||||
|
||||
@override
|
||||
void onResponse(Response response, ResponseInterceptorHandler handler) {
|
||||
developer.log(
|
||||
'← ${response.statusCode} ${response.requestOptions.uri}',
|
||||
name: 'api',
|
||||
);
|
||||
final message =
|
||||
'✓ ${response.statusCode} ${response.requestOptions.method} ${response.requestOptions.path}';
|
||||
developer.log(message, name: 'API');
|
||||
debugPrint(message);
|
||||
handler.next(response);
|
||||
}
|
||||
|
||||
@override
|
||||
void onError(DioException err, ErrorInterceptorHandler handler) {
|
||||
developer.log(
|
||||
'✗ ${err.response?.statusCode ?? 'NETWORK'} ${err.requestOptions.uri}: ${err.message}',
|
||||
name: 'api',
|
||||
error: err,
|
||||
);
|
||||
final buffer = StringBuffer()
|
||||
..writeln('┌── API Error ────────────────────────────────────────')
|
||||
..writeln('│ ${err.requestOptions.method} ${err.requestOptions.path}')
|
||||
..writeln('│ Status: ${err.response?.statusCode ?? 'NETWORK ERROR'}')
|
||||
..writeln('│ Message: ${err.message}');
|
||||
|
||||
if (err.response?.data != null) {
|
||||
buffer.writeln('│ Response: ${err.response?.data}');
|
||||
}
|
||||
|
||||
buffer.writeln('└─────────────────────────────────────────────────────');
|
||||
|
||||
final message = buffer.toString();
|
||||
developer.log(message, name: 'API', error: err);
|
||||
debugPrint(message);
|
||||
handler.next(err);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
import 'package:dio/dio.dart';
|
||||
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
|
||||
import '../api/api_client.dart';
|
||||
import 'permissions.dart';
|
||||
import 'user_preferences.dart';
|
||||
|
||||
part 'auth_datasource.g.dart';
|
||||
|
||||
/// Response from POST /auth/sync endpoint.
|
||||
class AuthSyncResponse {
|
||||
const AuthSyncResponse({
|
||||
required this.userId,
|
||||
required this.authentikId,
|
||||
required this.email,
|
||||
required this.name,
|
||||
this.avatarUrl,
|
||||
required this.roles,
|
||||
required this.preferences,
|
||||
required this.isNewUser,
|
||||
});
|
||||
|
||||
final String userId;
|
||||
final String authentikId;
|
||||
final String email;
|
||||
final String name;
|
||||
final String? avatarUrl;
|
||||
final List<Role> roles;
|
||||
final UserPreferences preferences;
|
||||
final bool isNewUser;
|
||||
|
||||
factory AuthSyncResponse.fromJson(Map<String, dynamic> json) {
|
||||
final user = json['user'] as Map<String, dynamic>;
|
||||
final rolesJson = json['roles'] as List<dynamic>;
|
||||
final prefsJson = json['preferences'] as Map<String, dynamic>;
|
||||
|
||||
return AuthSyncResponse(
|
||||
userId: user['id'] as String,
|
||||
authentikId: user['authentik_id'] as String,
|
||||
email: user['email'] as String,
|
||||
name: user['name'] as String,
|
||||
avatarUrl: user['avatar_url'] as String?,
|
||||
roles: rolesJson.map((r) => _parseRole(r as Map<String, dynamic>)).toList(),
|
||||
preferences: UserPreferences.fromJson(prefsJson),
|
||||
isNewUser: json['is_new_user'] as bool,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Parse a role from API JSON.
|
||||
Role _parseRole(Map<String, dynamic> json) {
|
||||
final name = json['name'] as String;
|
||||
final domainStr = json['domain'] as String;
|
||||
final category = json['category'] as String? ?? 'general';
|
||||
final actionStr = json['action'] as String;
|
||||
|
||||
final domain = Domain.fromString(domainStr);
|
||||
final action = Action.fromString(actionStr);
|
||||
|
||||
if (domain == null || action == null) {
|
||||
// Return a placeholder role for unknown domains/actions
|
||||
return Role(
|
||||
id: json['id'] as String,
|
||||
name: name,
|
||||
domain: Domain.admin, // Fallback
|
||||
category: category,
|
||||
action: Action.viewer, // Fallback - least privilege
|
||||
);
|
||||
}
|
||||
|
||||
return Role(
|
||||
id: json['id'] as String,
|
||||
name: name,
|
||||
domain: domain,
|
||||
category: category,
|
||||
action: action,
|
||||
);
|
||||
}
|
||||
|
||||
/// Datasource for auth API endpoints.
|
||||
class AuthDatasource {
|
||||
AuthDatasource(this._dio);
|
||||
|
||||
final Dio _dio;
|
||||
|
||||
/// Sync user with core-api after OIDC authentication.
|
||||
///
|
||||
/// Sends the OIDC access token to core-api, which validates it with Authentik
|
||||
/// and returns the user profile, roles, and preferences.
|
||||
Future<AuthSyncResponse> syncUser(String accessToken) async {
|
||||
final response = await _dio.post<Map<String, dynamic>>(
|
||||
'/auth/sync',
|
||||
data: {'access_token': accessToken},
|
||||
);
|
||||
|
||||
return AuthSyncResponse.fromJson(response.data!);
|
||||
}
|
||||
|
||||
/// Get current user profile via NPM forward auth.
|
||||
///
|
||||
/// This endpoint reads X-authentik-* headers set by NPM forward auth.
|
||||
/// Returns user profile if authenticated via the proxy.
|
||||
/// Throws 401 if not authenticated or accessing directly.
|
||||
Future<AuthSyncResponse> getCurrentUser() async {
|
||||
final response = await _dio.get<Map<String, dynamic>>('/auth/me');
|
||||
return AuthSyncResponse.fromJson(response.data!);
|
||||
}
|
||||
|
||||
/// Update user preferences.
|
||||
Future<UserPreferences> updatePreferences({
|
||||
String? theme,
|
||||
String? defaultRoom,
|
||||
Map<String, dynamic>? preferencesJson,
|
||||
}) async {
|
||||
final data = <String, dynamic>{};
|
||||
if (theme != null) data['theme'] = theme;
|
||||
if (defaultRoom != null) data['default_room'] = defaultRoom;
|
||||
if (preferencesJson != null) data['preferences_json'] = preferencesJson;
|
||||
|
||||
final response = await _dio.patch<Map<String, dynamic>>(
|
||||
'/auth/users/me/preferences',
|
||||
data: data,
|
||||
);
|
||||
|
||||
return UserPreferences.fromJson(response.data!);
|
||||
}
|
||||
}
|
||||
|
||||
/// Provider for the auth datasource.
|
||||
@riverpod
|
||||
AuthDatasource authDatasource(Ref ref) {
|
||||
return AuthDatasource(ref.watch(coreApiClientProvider));
|
||||
}
|
||||
@@ -1,31 +1,109 @@
|
||||
import 'dart:convert';
|
||||
import 'dart:developer' as developer;
|
||||
|
||||
import 'package:dio/dio.dart';
|
||||
import 'package:flutter/foundation.dart' show kIsWeb;
|
||||
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
import 'package:shared_preferences/shared_preferences.dart';
|
||||
|
||||
import '../config/app_config.dart';
|
||||
import 'auth_datasource.dart';
|
||||
import 'auth_state.dart';
|
||||
import 'oidc_service.dart';
|
||||
import 'permissions.dart';
|
||||
import 'user_preferences.dart';
|
||||
|
||||
part 'auth_provider.g.dart';
|
||||
|
||||
/// Provides authentication state and operations.
|
||||
///
|
||||
/// Note: Full OIDC implementation with flutter_appauth requires
|
||||
/// native platform configuration. For now, this provides the
|
||||
/// state management infrastructure.
|
||||
/// Supports two authentication flows:
|
||||
/// - **Web**: NPM forward auth with Authentik (cookies handled by proxy)
|
||||
/// - **Mobile**: OIDC Authorization Code flow with flutter_appauth
|
||||
///
|
||||
/// On web, the app calls GET /auth/me to check if user is authenticated
|
||||
/// via NPM forward auth headers. On mobile, uses OIDC flow then POST /auth/sync.
|
||||
@riverpod
|
||||
class AuthNotifier extends _$AuthNotifier {
|
||||
// Storage keys
|
||||
static const _accessTokenKey = 'auth_access_token';
|
||||
static const _refreshTokenKey = 'auth_refresh_token';
|
||||
static const _expiresAtKey = 'auth_expires_at';
|
||||
static const _userIdKey = 'auth_user_id';
|
||||
static const _authentikIdKey = 'auth_authentik_id';
|
||||
static const _userNameKey = 'auth_user_name';
|
||||
static const _userEmailKey = 'auth_user_email';
|
||||
static const _avatarUrlKey = 'auth_avatar_url';
|
||||
static const _rolesKey = 'auth_roles';
|
||||
static const _preferencesKey = 'auth_preferences';
|
||||
|
||||
@override
|
||||
Future<AuthState> build() async {
|
||||
// On web with auth required, try to get user from NPM forward auth
|
||||
if (kIsWeb && AppConfig.requiresAuth) {
|
||||
final webAuth = await _tryWebAuth();
|
||||
if (webAuth != null) {
|
||||
return webAuth;
|
||||
}
|
||||
// If web auth failed, user needs to refresh to trigger NPM login
|
||||
developer.log('Web auth not available - user may need to login via proxy', name: 'auth');
|
||||
return const AuthState();
|
||||
}
|
||||
|
||||
// On mobile or LAN, load from stored auth
|
||||
return _loadStoredAuth();
|
||||
}
|
||||
|
||||
/// Try to authenticate via NPM forward auth (web only).
|
||||
///
|
||||
/// Returns AuthState if authenticated, null if not.
|
||||
Future<AuthState?> _tryWebAuth() async {
|
||||
try {
|
||||
developer.log('Attempting web auth via /auth/me', name: 'auth');
|
||||
final authDatasource = ref.read(authDatasourceProvider);
|
||||
final syncResponse = await authDatasource.getCurrentUser();
|
||||
|
||||
developer.log(
|
||||
'Web auth successful: ${syncResponse.name} with ${syncResponse.roles.length} roles',
|
||||
name: 'auth',
|
||||
);
|
||||
|
||||
// Store auth data for offline/cached access
|
||||
await _storeAuth(
|
||||
accessToken: 'web-session', // Placeholder - web uses cookies
|
||||
userId: syncResponse.userId,
|
||||
authentikId: syncResponse.authentikId,
|
||||
userName: syncResponse.name,
|
||||
userEmail: syncResponse.email,
|
||||
avatarUrl: syncResponse.avatarUrl,
|
||||
roles: syncResponse.roles,
|
||||
preferences: syncResponse.preferences,
|
||||
);
|
||||
|
||||
return AuthState(
|
||||
isAuthenticated: true,
|
||||
accessToken: 'web-session',
|
||||
userId: syncResponse.userId,
|
||||
authentikId: syncResponse.authentikId,
|
||||
userName: syncResponse.name,
|
||||
userEmail: syncResponse.email,
|
||||
avatarUrl: syncResponse.avatarUrl,
|
||||
roles: syncResponse.roles,
|
||||
preferences: syncResponse.preferences,
|
||||
);
|
||||
} on DioException catch (e) {
|
||||
if (e.response?.statusCode == 401) {
|
||||
developer.log('Web auth: not authenticated via proxy', name: 'auth');
|
||||
return null;
|
||||
}
|
||||
developer.log('Web auth error: $e', name: 'auth');
|
||||
return null;
|
||||
} catch (e) {
|
||||
developer.log('Web auth unexpected error: $e', name: 'auth');
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
Future<AuthState> _loadStoredAuth() async {
|
||||
try {
|
||||
final prefs = await SharedPreferences.getInstance();
|
||||
@@ -40,17 +118,36 @@ class AuthNotifier extends _$AuthNotifier {
|
||||
? DateTime.fromMillisecondsSinceEpoch(expiresAtMs)
|
||||
: null;
|
||||
|
||||
// Load roles from JSON
|
||||
final rolesJson = prefs.getString(_rolesKey);
|
||||
final roles = rolesJson != null ? _parseRoles(rolesJson) : <Role>[];
|
||||
|
||||
// Load preferences from JSON
|
||||
final prefsJson = prefs.getString(_preferencesKey);
|
||||
final preferences = prefsJson != null
|
||||
? UserPreferences.fromJson(jsonDecode(prefsJson) as Map<String, dynamic>)
|
||||
: null;
|
||||
|
||||
final authState = AuthState(
|
||||
isAuthenticated: true,
|
||||
accessToken: accessToken,
|
||||
refreshToken: prefs.getString(_refreshTokenKey),
|
||||
expiresAt: expiresAt,
|
||||
userId: prefs.getString(_userIdKey),
|
||||
authentikId: prefs.getString(_authentikIdKey),
|
||||
userName: prefs.getString(_userNameKey),
|
||||
userEmail: prefs.getString(_userEmailKey),
|
||||
avatarUrl: prefs.getString(_avatarUrlKey),
|
||||
roles: roles,
|
||||
preferences: preferences,
|
||||
);
|
||||
|
||||
// Check if token is expired
|
||||
// Check if token is expired - try to refresh
|
||||
if (authState.isTokenExpired && authState.refreshToken != null) {
|
||||
developer.log('Token expired, attempting refresh', name: 'auth');
|
||||
return _tryRefreshToken(authState);
|
||||
}
|
||||
|
||||
if (authState.isTokenExpired) {
|
||||
developer.log('Stored token expired, clearing auth', name: 'auth');
|
||||
await _clearStoredAuth();
|
||||
@@ -65,12 +162,149 @@ class AuthNotifier extends _$AuthNotifier {
|
||||
}
|
||||
}
|
||||
|
||||
/// Sign in with OIDC (placeholder for flutter_appauth integration).
|
||||
/// Parse roles from stored JSON.
|
||||
List<Role> _parseRoles(String json) {
|
||||
try {
|
||||
final list = jsonDecode(json) as List<dynamic>;
|
||||
return list.map((item) {
|
||||
final map = item as Map<String, dynamic>;
|
||||
final domain = Domain.fromString(map['domain'] as String);
|
||||
final action = Action.fromString(map['action'] as String);
|
||||
|
||||
if (domain == null || action == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return Role(
|
||||
id: map['id'] as String,
|
||||
name: map['name'] as String,
|
||||
domain: domain,
|
||||
category: map['category'] as String? ?? 'general',
|
||||
action: action,
|
||||
);
|
||||
}).whereType<Role>().toList();
|
||||
} catch (e) {
|
||||
developer.log('Failed to parse roles: $e', name: 'auth');
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/// Try to refresh the access token.
|
||||
Future<AuthState> _tryRefreshToken(AuthState currentState) async {
|
||||
if (currentState.refreshToken == null) {
|
||||
await _clearStoredAuth();
|
||||
return const AuthState();
|
||||
}
|
||||
|
||||
try {
|
||||
final oidcService = ref.read(oidcServiceProvider);
|
||||
final tokens = await oidcService.refreshToken(currentState.refreshToken!);
|
||||
|
||||
// Update stored tokens
|
||||
final prefs = await SharedPreferences.getInstance();
|
||||
await prefs.setString(_accessTokenKey, tokens.accessToken);
|
||||
if (tokens.refreshToken != null) {
|
||||
await prefs.setString(_refreshTokenKey, tokens.refreshToken!);
|
||||
}
|
||||
await prefs.setInt(_expiresAtKey, tokens.expiresAt.millisecondsSinceEpoch);
|
||||
|
||||
developer.log('Token refreshed successfully', name: 'auth');
|
||||
|
||||
return currentState.copyWith(
|
||||
accessToken: tokens.accessToken,
|
||||
refreshToken: tokens.refreshToken ?? currentState.refreshToken,
|
||||
expiresAt: tokens.expiresAt,
|
||||
);
|
||||
} catch (e) {
|
||||
developer.log('Token refresh failed: $e', name: 'auth');
|
||||
await _clearStoredAuth();
|
||||
return const AuthState();
|
||||
}
|
||||
}
|
||||
|
||||
/// Sign in with the appropriate method for the platform.
|
||||
///
|
||||
/// - **Web**: Triggers page reload to go through NPM forward auth
|
||||
/// - **Mobile**: Opens Authentik login via OIDC, then syncs with core-api
|
||||
Future<void> signIn() async {
|
||||
// TODO: Implement OIDC flow with flutter_appauth
|
||||
// For now, this is a placeholder that will be implemented
|
||||
// when native platform configuration is complete.
|
||||
developer.log('Sign in requested - OIDC not yet configured', name: 'auth');
|
||||
if (!AppConfig.requiresAuth) {
|
||||
developer.log('Auth not required in LAN mode', name: 'auth');
|
||||
// In LAN mode, set a minimal authenticated state
|
||||
state = const AsyncData(AuthState(isAuthenticated: true));
|
||||
return;
|
||||
}
|
||||
|
||||
// On web, auth is handled by NPM forward auth
|
||||
// User needs to access via the authenticated proxy URL
|
||||
if (kIsWeb) {
|
||||
developer.log('Web sign-in: user should access via authenticated proxy', name: 'auth');
|
||||
// Try to refresh auth state from /auth/me
|
||||
state = const AsyncLoading();
|
||||
final webAuth = await _tryWebAuth();
|
||||
if (webAuth != null) {
|
||||
state = AsyncData(webAuth);
|
||||
} else {
|
||||
state = AsyncError(
|
||||
Exception('Not authenticated - please access via the authenticated URL'),
|
||||
StackTrace.current,
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Mobile: Use OIDC flow
|
||||
state = const AsyncLoading();
|
||||
|
||||
try {
|
||||
// Step 1: OIDC authentication with Authentik
|
||||
developer.log('Starting OIDC authentication', name: 'auth');
|
||||
final oidcService = ref.read(oidcServiceProvider);
|
||||
final tokens = await oidcService.signIn();
|
||||
|
||||
// Step 2: Sync with core-api to get user profile and roles
|
||||
developer.log('Syncing with core-api', name: 'auth');
|
||||
final authDatasource = ref.read(authDatasourceProvider);
|
||||
final syncResponse = await authDatasource.syncUser(tokens.accessToken);
|
||||
|
||||
// Step 3: Store credentials and user data
|
||||
await _storeAuth(
|
||||
accessToken: tokens.accessToken,
|
||||
refreshToken: tokens.refreshToken,
|
||||
expiresAt: tokens.expiresAt,
|
||||
userId: syncResponse.userId,
|
||||
authentikId: syncResponse.authentikId,
|
||||
userName: syncResponse.name,
|
||||
userEmail: syncResponse.email,
|
||||
avatarUrl: syncResponse.avatarUrl,
|
||||
roles: syncResponse.roles,
|
||||
preferences: syncResponse.preferences,
|
||||
);
|
||||
|
||||
state = AsyncData(AuthState(
|
||||
isAuthenticated: true,
|
||||
accessToken: tokens.accessToken,
|
||||
refreshToken: tokens.refreshToken,
|
||||
expiresAt: tokens.expiresAt,
|
||||
userId: syncResponse.userId,
|
||||
authentikId: syncResponse.authentikId,
|
||||
userName: syncResponse.name,
|
||||
userEmail: syncResponse.email,
|
||||
avatarUrl: syncResponse.avatarUrl,
|
||||
roles: syncResponse.roles,
|
||||
preferences: syncResponse.preferences,
|
||||
));
|
||||
|
||||
developer.log(
|
||||
'Authenticated as ${syncResponse.name} with ${syncResponse.roles.length} roles',
|
||||
name: 'auth',
|
||||
);
|
||||
} on OidcException catch (e) {
|
||||
developer.log('OIDC authentication failed: $e', name: 'auth');
|
||||
state = AsyncError(e, StackTrace.current);
|
||||
} catch (e, stack) {
|
||||
developer.log('Authentication failed: $e', name: 'auth');
|
||||
state = AsyncError(e, stack);
|
||||
}
|
||||
}
|
||||
|
||||
/// Sign out and clear stored credentials.
|
||||
@@ -80,14 +314,47 @@ class AuthNotifier extends _$AuthNotifier {
|
||||
developer.log('Signed out', name: 'auth');
|
||||
}
|
||||
|
||||
/// Update auth state (called after successful OIDC flow).
|
||||
Future<void> setAuthenticated({
|
||||
/// Update user preferences.
|
||||
Future<void> updatePreferences({
|
||||
String? theme,
|
||||
String? defaultRoom,
|
||||
Map<String, dynamic>? preferencesJson,
|
||||
}) async {
|
||||
final currentState = state.value;
|
||||
if (currentState == null || !currentState.isAuthenticated) return;
|
||||
|
||||
try {
|
||||
final authDatasource = ref.read(authDatasourceProvider);
|
||||
final newPrefs = await authDatasource.updatePreferences(
|
||||
theme: theme,
|
||||
defaultRoom: defaultRoom,
|
||||
preferencesJson: preferencesJson,
|
||||
);
|
||||
|
||||
// Update stored preferences
|
||||
final prefs = await SharedPreferences.getInstance();
|
||||
await prefs.setString(_preferencesKey, jsonEncode(newPrefs.toJson()));
|
||||
|
||||
state = AsyncData(currentState.copyWith(preferences: newPrefs));
|
||||
developer.log('Preferences updated', name: 'auth');
|
||||
} catch (e) {
|
||||
developer.log('Failed to update preferences: $e', name: 'auth');
|
||||
rethrow;
|
||||
}
|
||||
}
|
||||
|
||||
/// Store authentication data to SharedPreferences.
|
||||
Future<void> _storeAuth({
|
||||
required String accessToken,
|
||||
String? refreshToken,
|
||||
DateTime? expiresAt,
|
||||
String? userId,
|
||||
String? authentikId,
|
||||
String? userName,
|
||||
String? userEmail,
|
||||
String? avatarUrl,
|
||||
List<Role>? roles,
|
||||
UserPreferences? preferences,
|
||||
}) async {
|
||||
final prefs = await SharedPreferences.getInstance();
|
||||
|
||||
@@ -99,20 +366,27 @@ class AuthNotifier extends _$AuthNotifier {
|
||||
await prefs.setInt(_expiresAtKey, expiresAt.millisecondsSinceEpoch);
|
||||
}
|
||||
if (userId != null) await prefs.setString(_userIdKey, userId);
|
||||
if (authentikId != null) await prefs.setString(_authentikIdKey, authentikId);
|
||||
if (userName != null) await prefs.setString(_userNameKey, userName);
|
||||
if (userEmail != null) await prefs.setString(_userEmailKey, userEmail);
|
||||
if (avatarUrl != null) await prefs.setString(_avatarUrlKey, avatarUrl);
|
||||
|
||||
state = AsyncData(AuthState(
|
||||
isAuthenticated: true,
|
||||
accessToken: accessToken,
|
||||
refreshToken: refreshToken,
|
||||
expiresAt: expiresAt,
|
||||
userId: userId,
|
||||
userName: userName,
|
||||
userEmail: userEmail,
|
||||
));
|
||||
// Store roles as JSON
|
||||
if (roles != null) {
|
||||
final rolesJson = jsonEncode(roles.map((r) => {
|
||||
'id': r.id,
|
||||
'name': r.name,
|
||||
'domain': r.domain.value,
|
||||
'category': r.category,
|
||||
'action': r.action.name,
|
||||
}).toList());
|
||||
await prefs.setString(_rolesKey, rolesJson);
|
||||
}
|
||||
|
||||
developer.log('Authenticated as $userName', name: 'auth');
|
||||
// Store preferences as JSON
|
||||
if (preferences != null) {
|
||||
await prefs.setString(_preferencesKey, jsonEncode(preferences.toJson()));
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _clearStoredAuth() async {
|
||||
@@ -121,7 +395,11 @@ class AuthNotifier extends _$AuthNotifier {
|
||||
await prefs.remove(_refreshTokenKey);
|
||||
await prefs.remove(_expiresAtKey);
|
||||
await prefs.remove(_userIdKey);
|
||||
await prefs.remove(_authentikIdKey);
|
||||
await prefs.remove(_userNameKey);
|
||||
await prefs.remove(_userEmailKey);
|
||||
await prefs.remove(_avatarUrlKey);
|
||||
await prefs.remove(_rolesKey);
|
||||
await prefs.remove(_preferencesKey);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,46 @@
|
||||
import 'package:freezed_annotation/freezed_annotation.dart';
|
||||
|
||||
import 'permissions.dart';
|
||||
import 'user_preferences.dart';
|
||||
|
||||
part 'auth_state.freezed.dart';
|
||||
|
||||
/// Authentication state.
|
||||
/// Authentication state including user profile, roles, and preferences.
|
||||
@freezed
|
||||
sealed class AuthState with _$AuthState {
|
||||
const factory AuthState({
|
||||
/// Whether user is authenticated.
|
||||
@Default(false) bool isAuthenticated,
|
||||
|
||||
/// OIDC access token.
|
||||
String? accessToken,
|
||||
|
||||
/// OIDC refresh token.
|
||||
String? refreshToken,
|
||||
|
||||
/// Token expiration time.
|
||||
DateTime? expiresAt,
|
||||
|
||||
/// Internal user ID (from core-api).
|
||||
String? userId,
|
||||
|
||||
/// Authentik user ID.
|
||||
String? authentikId,
|
||||
|
||||
/// User display name.
|
||||
String? userName,
|
||||
|
||||
/// User email address.
|
||||
String? userEmail,
|
||||
|
||||
/// User avatar URL.
|
||||
String? avatarUrl,
|
||||
|
||||
/// User's permission roles.
|
||||
@Default([]) List<Role> roles,
|
||||
|
||||
/// User preferences.
|
||||
UserPreferences? preferences,
|
||||
}) = _AuthState;
|
||||
|
||||
const AuthState._();
|
||||
@@ -23,4 +51,12 @@ sealed class AuthState with _$AuthState {
|
||||
// Consider expired if less than 1 minute remaining
|
||||
return DateTime.now().isAfter(expiresAt!.subtract(const Duration(minutes: 1)));
|
||||
}
|
||||
|
||||
/// Check if user has the specified permission.
|
||||
bool hasPermission(Domain domain, Action action, {String category = 'general'}) {
|
||||
return roles.hasPermission(domain, action, category: category);
|
||||
}
|
||||
|
||||
/// Check if user is a global admin.
|
||||
bool get isGlobalAdmin => roles.isGlobalAdmin;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,115 @@
|
||||
import 'package:flutter_appauth/flutter_appauth.dart';
|
||||
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
|
||||
import '../config/app_config.dart';
|
||||
|
||||
part 'oidc_service.g.dart';
|
||||
|
||||
/// OIDC token response containing access and refresh tokens.
|
||||
class OidcTokens {
|
||||
const OidcTokens({
|
||||
required this.accessToken,
|
||||
required this.refreshToken,
|
||||
required this.expiresAt,
|
||||
this.idToken,
|
||||
});
|
||||
|
||||
final String accessToken;
|
||||
final String? refreshToken;
|
||||
final DateTime expiresAt;
|
||||
final String? idToken;
|
||||
}
|
||||
|
||||
/// Service for OIDC authentication using flutter_appauth.
|
||||
///
|
||||
/// Handles the Authorization Code flow with PKCE for secure authentication
|
||||
/// against Authentik.
|
||||
class OidcService {
|
||||
OidcService({FlutterAppAuth? appAuth}) : _appAuth = appAuth ?? const FlutterAppAuth();
|
||||
|
||||
final FlutterAppAuth _appAuth;
|
||||
|
||||
/// OIDC scopes to request.
|
||||
static const _scopes = ['openid', 'profile', 'email', 'offline_access'];
|
||||
|
||||
/// Redirect URI for the app.
|
||||
static String get _redirectUri => '${AppConfig.authRedirectScheme}://callback';
|
||||
|
||||
/// Start the authorization code flow.
|
||||
///
|
||||
/// Opens a browser/webview for user to authenticate with Authentik,
|
||||
/// then exchanges the authorization code for tokens.
|
||||
///
|
||||
/// Throws [OidcException] if authentication fails.
|
||||
Future<OidcTokens> signIn() async {
|
||||
try {
|
||||
final result = await _appAuth.authorizeAndExchangeCode(
|
||||
AuthorizationTokenRequest(
|
||||
AppConfig.authClientId,
|
||||
_redirectUri,
|
||||
discoveryUrl: AppConfig.authDiscoveryUrl,
|
||||
scopes: _scopes,
|
||||
),
|
||||
);
|
||||
|
||||
if (result.accessToken == null) {
|
||||
throw OidcException('Authorization failed: no access token');
|
||||
}
|
||||
|
||||
return OidcTokens(
|
||||
accessToken: result.accessToken!,
|
||||
refreshToken: result.refreshToken,
|
||||
expiresAt: result.accessTokenExpirationDateTime ?? DateTime.now().add(const Duration(hours: 1)),
|
||||
idToken: result.idToken,
|
||||
);
|
||||
} on Exception catch (e) {
|
||||
throw OidcException('Authorization failed: $e');
|
||||
}
|
||||
}
|
||||
|
||||
/// Refresh the access token using a refresh token.
|
||||
///
|
||||
/// Throws [OidcException] if refresh fails.
|
||||
Future<OidcTokens> refreshToken(String refreshToken) async {
|
||||
try {
|
||||
final result = await _appAuth.token(
|
||||
TokenRequest(
|
||||
AppConfig.authClientId,
|
||||
_redirectUri,
|
||||
discoveryUrl: AppConfig.authDiscoveryUrl,
|
||||
refreshToken: refreshToken,
|
||||
scopes: _scopes,
|
||||
),
|
||||
);
|
||||
|
||||
if (result.accessToken == null) {
|
||||
throw OidcException('Token refresh failed: no access token');
|
||||
}
|
||||
|
||||
return OidcTokens(
|
||||
accessToken: result.accessToken!,
|
||||
refreshToken: result.refreshToken ?? refreshToken,
|
||||
expiresAt: result.accessTokenExpirationDateTime ?? DateTime.now().add(const Duration(hours: 1)),
|
||||
idToken: result.idToken,
|
||||
);
|
||||
} on Exception catch (e) {
|
||||
throw OidcException('Token refresh failed: $e');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Exception thrown when OIDC operations fail.
|
||||
class OidcException implements Exception {
|
||||
const OidcException(this.message);
|
||||
|
||||
final String message;
|
||||
|
||||
@override
|
||||
String toString() => 'OidcException: $message';
|
||||
}
|
||||
|
||||
/// Provider for the OIDC service.
|
||||
@riverpod
|
||||
OidcService oidcService(Ref ref) {
|
||||
return OidcService();
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import 'package:flutter/widgets.dart' hide Action;
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import 'auth_provider.dart';
|
||||
import 'permissions.dart';
|
||||
|
||||
/// A widget that conditionally renders its child based on user permissions.
|
||||
///
|
||||
/// Example:
|
||||
/// ```dart
|
||||
/// PermissionGate(
|
||||
/// domain: Domain.controlRoom,
|
||||
/// action: Action.admin,
|
||||
/// child: DeleteButton(),
|
||||
/// fallback: Text('No permission'),
|
||||
/// )
|
||||
/// ```
|
||||
class PermissionGate extends ConsumerWidget {
|
||||
const PermissionGate({
|
||||
super.key,
|
||||
required this.domain,
|
||||
required this.action,
|
||||
this.category = 'general',
|
||||
required this.child,
|
||||
this.fallback,
|
||||
});
|
||||
|
||||
/// The domain required for this permission.
|
||||
final Domain domain;
|
||||
|
||||
/// The action level required (viewer, user, editor, admin).
|
||||
final Action action;
|
||||
|
||||
/// Optional category within the domain (defaults to 'general').
|
||||
final String category;
|
||||
|
||||
/// Widget to show when user has permission.
|
||||
final Widget child;
|
||||
|
||||
/// Widget to show when user lacks permission (defaults to empty).
|
||||
final Widget? fallback;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final authState = ref.watch(authProvider);
|
||||
|
||||
final hasPermission = authState.maybeWhen(
|
||||
data: (state) => state.hasPermission(domain, action, category: category),
|
||||
orElse: () => false,
|
||||
);
|
||||
|
||||
if (hasPermission) {
|
||||
return child;
|
||||
}
|
||||
|
||||
return fallback ?? const SizedBox.shrink();
|
||||
}
|
||||
}
|
||||
|
||||
/// A widget that shows its child only if the user is a global admin.
|
||||
class AdminGate extends ConsumerWidget {
|
||||
const AdminGate({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.fallback,
|
||||
});
|
||||
|
||||
/// Widget to show when user is admin.
|
||||
final Widget child;
|
||||
|
||||
/// Widget to show when user is not admin (defaults to empty).
|
||||
final Widget? fallback;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final authState = ref.watch(authProvider);
|
||||
|
||||
final isAdmin = authState.maybeWhen(
|
||||
data: (state) => state.isGlobalAdmin,
|
||||
orElse: () => false,
|
||||
);
|
||||
|
||||
if (isAdmin) {
|
||||
return child;
|
||||
}
|
||||
|
||||
return fallback ?? const SizedBox.shrink();
|
||||
}
|
||||
}
|
||||
|
||||
/// Extension for checking permissions in code.
|
||||
extension PermissionCheck on WidgetRef {
|
||||
/// Check if the current user has a specific permission.
|
||||
bool hasPermission(Domain domain, Action action, {String category = 'general'}) {
|
||||
final authState = read(authProvider);
|
||||
return authState.maybeWhen(
|
||||
data: (state) => state.hasPermission(domain, action, category: category),
|
||||
orElse: () => false,
|
||||
);
|
||||
}
|
||||
|
||||
/// Check if the current user is a global admin.
|
||||
bool get isGlobalAdmin {
|
||||
final authState = read(authProvider);
|
||||
return authState.maybeWhen(
|
||||
data: (state) => state.isGlobalAdmin,
|
||||
orElse: () => false,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
// Permission system for role-based access control.
|
||||
//
|
||||
// Roles follow the format: `domain.category:action`
|
||||
// - Domain: Feature area (control-room, media, etc.)
|
||||
// - Category: Sub-area within domain (default: general)
|
||||
// - Action: Permission level (viewer < user < editor < admin)
|
||||
|
||||
/// Permission domains matching feature areas.
|
||||
enum Domain {
|
||||
controlRoom('control-room'),
|
||||
library('library'),
|
||||
media('media'),
|
||||
ai('ai'),
|
||||
housekeeper('housekeeper'),
|
||||
developer('developer'),
|
||||
documents('documents'),
|
||||
gaming('gaming'),
|
||||
admin('admin');
|
||||
|
||||
const Domain(this.value);
|
||||
|
||||
/// The API string value for this domain.
|
||||
final String value;
|
||||
|
||||
/// Parse a domain string from API response.
|
||||
static Domain? fromString(String value) {
|
||||
for (final domain in Domain.values) {
|
||||
if (domain.value == value) return domain;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/// Permission actions in hierarchical order.
|
||||
///
|
||||
/// Higher actions imply lower ones:
|
||||
/// - admin implies editor, user, viewer
|
||||
/// - editor implies user, viewer
|
||||
/// - user implies viewer
|
||||
enum Action {
|
||||
viewer(1),
|
||||
user(2),
|
||||
editor(3),
|
||||
admin(4);
|
||||
|
||||
const Action(this.level);
|
||||
|
||||
/// Numeric level for comparison (higher = more permissions).
|
||||
final int level;
|
||||
|
||||
/// Check if this action grants at least the required action.
|
||||
bool grants(Action required) => level >= required.level;
|
||||
|
||||
/// Parse an action string from API response.
|
||||
static Action? fromString(String value) {
|
||||
for (final action in Action.values) {
|
||||
if (action.name == value) return action;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/// A permission role assigned to a user.
|
||||
///
|
||||
/// Roles are parsed from the API format: `domain.category:action`
|
||||
class Role {
|
||||
const Role({
|
||||
required this.id,
|
||||
required this.name,
|
||||
required this.domain,
|
||||
required this.category,
|
||||
required this.action,
|
||||
});
|
||||
|
||||
/// Unique role ID.
|
||||
final String id;
|
||||
|
||||
/// Full role name (e.g., "control-room.general:admin").
|
||||
final String name;
|
||||
|
||||
/// Permission domain.
|
||||
final Domain domain;
|
||||
|
||||
/// Permission category (usually "general").
|
||||
final String category;
|
||||
|
||||
/// Permission action level.
|
||||
final Action action;
|
||||
|
||||
/// Check if this role grants access for the given domain and action.
|
||||
///
|
||||
/// Global admin (`admin.general:admin`) grants access to everything.
|
||||
/// Otherwise, domain and category must match, and action level must be sufficient.
|
||||
bool grants(Domain domain, Action action, {String category = 'general'}) {
|
||||
// Global admin override
|
||||
if (this.domain == Domain.admin &&
|
||||
this.category == 'general' &&
|
||||
this.action == Action.admin) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Check domain and category match
|
||||
if (this.domain != domain || this.category != category) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check action hierarchy
|
||||
return this.action.grants(action);
|
||||
}
|
||||
|
||||
@override
|
||||
String toString() => 'Role($name)';
|
||||
|
||||
@override
|
||||
bool operator ==(Object other) =>
|
||||
identical(this, other) ||
|
||||
other is Role && runtimeType == other.runtimeType && id == other.id;
|
||||
|
||||
@override
|
||||
int get hashCode => id.hashCode;
|
||||
}
|
||||
|
||||
/// Extension for checking permissions on a list of roles.
|
||||
extension RoleListPermissions on List<Role> {
|
||||
/// Check if any role grants the required permission.
|
||||
bool hasPermission(Domain domain, Action action, {String category = 'general'}) {
|
||||
return any((role) => role.grants(domain, action, category: category));
|
||||
}
|
||||
|
||||
/// Check if any role grants any of the required permissions.
|
||||
bool hasAnyPermission(List<(Domain, Action)> permissions) {
|
||||
return permissions.any((p) => hasPermission(p.$1, p.$2));
|
||||
}
|
||||
|
||||
/// Check if user is a global admin.
|
||||
bool get isGlobalAdmin => hasPermission(Domain.admin, Action.admin);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import 'package:freezed_annotation/freezed_annotation.dart';
|
||||
|
||||
part 'user_preferences.freezed.dart';
|
||||
part 'user_preferences.g.dart';
|
||||
|
||||
/// User preferences synced from core-api.
|
||||
@freezed
|
||||
sealed class UserPreferences with _$UserPreferences {
|
||||
const factory UserPreferences({
|
||||
/// Theme preference: system, light, dark
|
||||
@Default('system') String theme,
|
||||
|
||||
/// Default room for housekeeping
|
||||
@Default('front-hall') String defaultRoom,
|
||||
|
||||
/// Extended preferences as JSON
|
||||
@Default({}) Map<String, dynamic> preferencesJson,
|
||||
}) = _UserPreferences;
|
||||
|
||||
factory UserPreferences.fromJson(Map<String, dynamic> json) =>
|
||||
_$UserPreferencesFromJson(json);
|
||||
}
|
||||
@@ -7,6 +7,9 @@ import 'package:tatlock_ui/features/control_room/containers/presentation/widgets
|
||||
import 'package:tatlock_ui/shared/components/data_grid/adapters/core_api_source.dart';
|
||||
import 'package:tatlock_ui/shared/components/data_grid/data_grid_exports.dart';
|
||||
|
||||
/// Health status of a container.
|
||||
enum ContainerHealth { healthy, unhealthy, starting, none }
|
||||
|
||||
/// Container data class for DataGrid display.
|
||||
class ContainerData {
|
||||
ContainerData({
|
||||
@@ -17,25 +20,45 @@ class ContainerData {
|
||||
required this.state,
|
||||
required this.status,
|
||||
required this.ports,
|
||||
required this.health,
|
||||
});
|
||||
|
||||
factory ContainerData.fromJson(Map<String, dynamic> json) {
|
||||
final ports = (json['ports'] as List<dynamic>?)
|
||||
// Docker API uses capitalized keys
|
||||
final ports = (json['Ports'] as List<dynamic>?)
|
||||
?.map((p) => ContainerPort.fromJson(p as Map<String, dynamic>))
|
||||
.toList() ??
|
||||
[];
|
||||
|
||||
final fullId = json['Id'] as String? ?? '';
|
||||
final names = json['Names'] as List<dynamic>? ?? [];
|
||||
final name = names.isNotEmpty
|
||||
? (names.first as String).replaceFirst('/', '')
|
||||
: 'Unknown';
|
||||
|
||||
final status = json['Status'] as String? ?? 'Unknown';
|
||||
|
||||
return ContainerData(
|
||||
id: json['id'] as String,
|
||||
fullId: json['full_id'] as String? ?? json['id'] as String,
|
||||
name: json['name'] as String,
|
||||
image: json['image'] as String,
|
||||
state: json['state'] as String,
|
||||
status: json['status'] as String,
|
||||
id: fullId.length > 12 ? fullId.substring(0, 12) : fullId,
|
||||
fullId: fullId,
|
||||
name: name,
|
||||
image: json['Image'] as String? ?? 'Unknown',
|
||||
state: json['State'] as String? ?? 'unknown',
|
||||
status: status,
|
||||
ports: ports,
|
||||
health: _parseHealth(status),
|
||||
);
|
||||
}
|
||||
|
||||
/// Parse health status from Docker status string (e.g., "Up 2 hours (healthy)")
|
||||
static ContainerHealth _parseHealth(String status) {
|
||||
final lower = status.toLowerCase();
|
||||
if (lower.contains('(healthy)')) return ContainerHealth.healthy;
|
||||
if (lower.contains('(unhealthy)')) return ContainerHealth.unhealthy;
|
||||
if (lower.contains('(health: starting)')) return ContainerHealth.starting;
|
||||
return ContainerHealth.none;
|
||||
}
|
||||
|
||||
final String id;
|
||||
final String fullId;
|
||||
final String name;
|
||||
@@ -43,6 +66,16 @@ class ContainerData {
|
||||
final String state;
|
||||
final String status;
|
||||
final List<ContainerPort> ports;
|
||||
final ContainerHealth health;
|
||||
|
||||
/// Status string with health info stripped (just shows uptime).
|
||||
String get displayStatus {
|
||||
return status
|
||||
.replaceAll(RegExp(r'\s*\(healthy\)', caseSensitive: false), '')
|
||||
.replaceAll(RegExp(r'\s*\(unhealthy\)', caseSensitive: false), '')
|
||||
.replaceAll(RegExp(r'\s*\(health: starting\)', caseSensitive: false), '')
|
||||
.trim();
|
||||
}
|
||||
|
||||
bool get canStart => state == 'exited' || state == 'created';
|
||||
bool get canStop => state == 'running';
|
||||
@@ -53,9 +86,10 @@ class ContainerPort {
|
||||
ContainerPort({required this.privatePort, this.publicPort, this.type = 'tcp'});
|
||||
|
||||
factory ContainerPort.fromJson(Map<String, dynamic> json) => ContainerPort(
|
||||
privatePort: json['private_port'] as int? ?? json['PrivatePort'] as int? ?? 0,
|
||||
publicPort: json['public_port'] as int? ?? json['PublicPort'] as int?,
|
||||
type: json['type'] as String? ?? json['Type'] as String? ?? 'tcp',
|
||||
// Docker API uses PrivatePort/PublicPort
|
||||
privatePort: json['PrivatePort'] as int? ?? 0,
|
||||
publicPort: json['PublicPort'] as int?,
|
||||
type: json['Type'] as String? ?? 'tcp',
|
||||
);
|
||||
|
||||
final int privatePort;
|
||||
@@ -99,7 +133,7 @@ class _ContainersListPageState extends ConsumerState<ContainersListPage> {
|
||||
columns: [
|
||||
DataGridColumn<ContainerData>(
|
||||
header: 'Container',
|
||||
valueBuilder: (c) => c.name,
|
||||
valueBuilder: (c) => '${c.name} ${c.image}',
|
||||
sortable: true,
|
||||
searchable: true,
|
||||
width: const DataGridColumnWidth.flex(2),
|
||||
@@ -113,8 +147,8 @@ class _ContainersListPageState extends ConsumerState<ContainersListPage> {
|
||||
),
|
||||
DataGridColumn<ContainerData>(
|
||||
header: 'Status',
|
||||
valueBuilder: (c) => c.status,
|
||||
width: const DataGridColumnWidth.fixed(140),
|
||||
valueBuilder: (c) => c.displayStatus,
|
||||
width: const DataGridColumnWidth.fixed(160),
|
||||
alignment: DataGridColumnAlignment.end,
|
||||
),
|
||||
],
|
||||
@@ -242,7 +276,7 @@ class _ContainerCell extends StatelessWidget {
|
||||
|
||||
return Row(
|
||||
children: [
|
||||
ContainerStatusBadge.fromString(container.state),
|
||||
ContainerStatusBadge.fromString(container.state, health: container.health),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: Column(
|
||||
|
||||
+87
-37
@@ -1,48 +1,67 @@
|
||||
import 'package:flutter/material.dart' hide Container;
|
||||
import 'package:tatlock_ui/features/control_room/containers/domain/entities/container.dart';
|
||||
import 'package:tatlock_ui/features/control_room/containers/presentation/pages/containers_list_page.dart';
|
||||
|
||||
/// Container state enum for status display.
|
||||
enum ContainerState {
|
||||
created,
|
||||
running,
|
||||
paused,
|
||||
restarting,
|
||||
removing,
|
||||
exited,
|
||||
dead;
|
||||
/// Status badge for container state with optional health indication.
|
||||
class ContainerStatusBadge extends StatelessWidget {
|
||||
const ContainerStatusBadge({
|
||||
super.key,
|
||||
required this.state,
|
||||
this.health,
|
||||
this.showLabel = true,
|
||||
});
|
||||
|
||||
/// Parse a string to ContainerState.
|
||||
static ContainerState fromString(String value) {
|
||||
/// Create badge from a string state value.
|
||||
factory ContainerStatusBadge.fromString(
|
||||
String state, {
|
||||
ContainerHealth? health,
|
||||
bool showLabel = true,
|
||||
}) {
|
||||
return ContainerStatusBadge(
|
||||
state: _parseState(state),
|
||||
health: health,
|
||||
showLabel: showLabel,
|
||||
);
|
||||
}
|
||||
|
||||
/// Create badge from state enum and status string (parses health from status).
|
||||
factory ContainerStatusBadge.withStatus({
|
||||
required ContainerState state,
|
||||
required String status,
|
||||
bool showLabel = true,
|
||||
}) {
|
||||
return ContainerStatusBadge(
|
||||
state: state,
|
||||
health: _parseHealthFromStatus(status),
|
||||
showLabel: showLabel,
|
||||
);
|
||||
}
|
||||
|
||||
/// Parse health status from Docker status string.
|
||||
static ContainerHealth _parseHealthFromStatus(String status) {
|
||||
final lower = status.toLowerCase();
|
||||
if (lower.contains('(healthy)')) return ContainerHealth.healthy;
|
||||
if (lower.contains('(unhealthy)')) return ContainerHealth.unhealthy;
|
||||
if (lower.contains('(health: starting)')) return ContainerHealth.starting;
|
||||
return ContainerHealth.none;
|
||||
}
|
||||
|
||||
final ContainerState state;
|
||||
final ContainerHealth? health;
|
||||
final bool showLabel;
|
||||
|
||||
static ContainerState _parseState(String value) {
|
||||
return ContainerState.values.firstWhere(
|
||||
(s) => s.name == value.toLowerCase(),
|
||||
orElse: () => ContainerState.exited,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Status badge for container state.
|
||||
class ContainerStatusBadge extends StatelessWidget {
|
||||
const ContainerStatusBadge({
|
||||
super.key,
|
||||
required this.state,
|
||||
this.showLabel = true,
|
||||
});
|
||||
|
||||
/// Create badge from a string state value.
|
||||
factory ContainerStatusBadge.fromString(String state, {bool showLabel = true}) {
|
||||
return ContainerStatusBadge(
|
||||
state: ContainerState.fromString(state),
|
||||
showLabel: showLabel,
|
||||
);
|
||||
}
|
||||
|
||||
final ContainerState state;
|
||||
final bool showLabel;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final (color, icon, label) = _getStateStyle(context);
|
||||
|
||||
return DecoratedBox(
|
||||
Widget badge = DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: color.withValues(alpha: 0.15),
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
@@ -69,17 +88,22 @@ class ContainerStatusBadge extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
if (showLabel) {
|
||||
badge = ConstrainedBox(
|
||||
constraints: const BoxConstraints(minWidth: 90),
|
||||
child: badge,
|
||||
);
|
||||
}
|
||||
|
||||
return badge;
|
||||
}
|
||||
|
||||
(Color, IconData, String) _getStateStyle(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return switch (state) {
|
||||
ContainerState.running => (
|
||||
Colors.green,
|
||||
Icons.play_circle,
|
||||
'Running',
|
||||
),
|
||||
ContainerState.running => _getRunningStyle(colorScheme),
|
||||
ContainerState.paused => (
|
||||
Colors.orange,
|
||||
Icons.pause_circle,
|
||||
@@ -112,4 +136,30 @@ class ContainerStatusBadge extends StatelessWidget {
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
/// Get style for running state, factoring in health status.
|
||||
(Color, IconData, String) _getRunningStyle(ColorScheme colorScheme) {
|
||||
return switch (health) {
|
||||
ContainerHealth.healthy => (
|
||||
Colors.green,
|
||||
Icons.play_circle,
|
||||
'Running',
|
||||
),
|
||||
ContainerHealth.unhealthy => (
|
||||
Colors.orange,
|
||||
Icons.warning_amber_rounded,
|
||||
'Unhealthy',
|
||||
),
|
||||
ContainerHealth.starting => (
|
||||
Colors.blue,
|
||||
Icons.hourglass_top,
|
||||
'Starting',
|
||||
),
|
||||
ContainerHealth.none || null => (
|
||||
Colors.green,
|
||||
Icons.play_circle,
|
||||
'Running',
|
||||
),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import 'package:flutter/material.dart' hide Stack;
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:tatlock_ui/features/control_room/containers/domain/entities/container.dart'
|
||||
as container_entity;
|
||||
import 'package:tatlock_ui/features/control_room/containers/presentation/providers/containers_provider.dart';
|
||||
import 'package:tatlock_ui/features/control_room/containers/presentation/widgets/container_logs_viewer.dart';
|
||||
import 'package:tatlock_ui/features/control_room/containers/presentation/widgets/container_status_badge.dart';
|
||||
@@ -133,7 +135,9 @@ class _StackEditor extends ConsumerWidget {
|
||||
children: [
|
||||
// Header with stack info and actions
|
||||
Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
height: 56,
|
||||
padding: const EdgeInsets.only(left: 16, right: 16, bottom: 8),
|
||||
alignment: Alignment.bottomCenter,
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainerHighest,
|
||||
border: Border(
|
||||
@@ -141,11 +145,13 @@ class _StackEditor extends ConsumerWidget {
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
Icon(Icons.layers, color: colorScheme.primary),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
@@ -211,7 +217,7 @@ class _CompactContainerList extends ConsumerWidget {
|
||||
required this.stackId,
|
||||
});
|
||||
|
||||
final List<dynamic> containers;
|
||||
final List<container_entity.Container> containers;
|
||||
final String stackId;
|
||||
|
||||
@override
|
||||
@@ -269,7 +275,10 @@ class _CompactContainerList extends ConsumerWidget {
|
||||
),
|
||||
child: ListTile(
|
||||
dense: true,
|
||||
leading: ContainerStatusBadge(state: container.state),
|
||||
leading: ContainerStatusBadge.withStatus(
|
||||
state: container.state,
|
||||
status: container.status,
|
||||
),
|
||||
title: Text(
|
||||
container.name,
|
||||
style: const TextStyle(fontSize: 13),
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
import 'package:dio/dio.dart';
|
||||
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
import 'package:tatlock_ui/core/api/api_client.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/data/models/quick_link_model.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/domain/entities/quick_link.dart';
|
||||
|
||||
part 'quick_links_datasource.g.dart';
|
||||
|
||||
/// Data source for quick link operations.
|
||||
///
|
||||
/// Provides CRUD operations for Front Hall quick links via Core API
|
||||
/// dashboard/quick-links endpoint.
|
||||
class QuickLinksDatasource {
|
||||
QuickLinksDatasource(this._dio);
|
||||
|
||||
final Dio _dio;
|
||||
|
||||
static const _basePath = '/dashboard/quick-links';
|
||||
|
||||
/// Gets all quick links.
|
||||
///
|
||||
/// API returns: {"links": [...], "total": N}
|
||||
Future<List<QuickLink>> getQuickLinks() async {
|
||||
final response = await _dio.get<Map<String, dynamic>>(_basePath);
|
||||
final data = response.data;
|
||||
|
||||
if (data == null) {
|
||||
return [];
|
||||
}
|
||||
|
||||
final links = data['links'] as List<dynamic>? ?? [];
|
||||
return links
|
||||
.map((json) => QuickLinkModel.fromJson(json as Map<String, dynamic>))
|
||||
.map((model) => model.toEntity())
|
||||
.toList();
|
||||
}
|
||||
|
||||
/// Gets a single quick link by ID.
|
||||
Future<QuickLink> getQuickLink(int id) async {
|
||||
final response = await _dio.get<Map<String, dynamic>>('$_basePath/$id');
|
||||
final data = response.data;
|
||||
|
||||
if (data == null) {
|
||||
throw Exception('Quick link not found: $id');
|
||||
}
|
||||
|
||||
return QuickLinkModel.fromJson(data).toEntity();
|
||||
}
|
||||
|
||||
/// Creates a new quick link.
|
||||
Future<QuickLink> createQuickLink(QuickLink link) async {
|
||||
final model = QuickLinkModel.fromEntity(link);
|
||||
final response = await _dio.post<Map<String, dynamic>>(
|
||||
_basePath,
|
||||
data: model.toJson(),
|
||||
);
|
||||
final data = response.data;
|
||||
|
||||
if (data == null) {
|
||||
throw Exception('Failed to create quick link');
|
||||
}
|
||||
|
||||
return QuickLinkModel.fromJson(data).toEntity();
|
||||
}
|
||||
|
||||
/// Updates an existing quick link.
|
||||
Future<QuickLink> updateQuickLink(QuickLink link) async {
|
||||
final model = QuickLinkModel.fromEntity(link);
|
||||
final id = int.tryParse(link.id) ?? 0;
|
||||
final response = await _dio.put<Map<String, dynamic>>(
|
||||
'$_basePath/$id',
|
||||
data: model.toJson(),
|
||||
);
|
||||
final data = response.data;
|
||||
|
||||
if (data == null) {
|
||||
throw Exception('Failed to update quick link');
|
||||
}
|
||||
|
||||
return QuickLinkModel.fromJson(data).toEntity();
|
||||
}
|
||||
|
||||
/// Deletes a quick link.
|
||||
Future<void> deleteQuickLink(int id) async {
|
||||
await _dio.delete<void>('$_basePath/$id');
|
||||
}
|
||||
|
||||
/// Reorders quick links by updating positions.
|
||||
///
|
||||
/// API expects: {"link_ids": [1, 2, 3]}
|
||||
Future<void> reorderQuickLinks(List<int> orderedIds) async {
|
||||
await _dio.post<void>(
|
||||
'$_basePath/reorder',
|
||||
data: {'link_ids': orderedIds},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Provides the quick links datasource.
|
||||
@riverpod
|
||||
QuickLinksDatasource quickLinksDatasource(Ref ref) {
|
||||
final dio = ref.watch(coreApiClientProvider);
|
||||
return QuickLinksDatasource(dio);
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import 'package:freezed_annotation/freezed_annotation.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/domain/entities/quick_link.dart';
|
||||
|
||||
part 'quick_link_model.freezed.dart';
|
||||
part 'quick_link_model.g.dart';
|
||||
|
||||
/// Quick link data model matching Core API dashboard/quick-links endpoint.
|
||||
///
|
||||
/// Field mapping:
|
||||
/// - title (API) ↔ name (Flutter entity)
|
||||
/// - icon (API) ↔ iconName (Flutter entity)
|
||||
/// - position (API) ↔ sortOrder (Flutter entity)
|
||||
/// - is_visible (API) ↔ isActive (Flutter entity)
|
||||
/// - link_type (API) ↔ type (Flutter entity)
|
||||
@freezed
|
||||
sealed class QuickLinkModel with _$QuickLinkModel {
|
||||
const factory QuickLinkModel({
|
||||
@Default(0) int id,
|
||||
required String title,
|
||||
required String url,
|
||||
String? icon,
|
||||
String? description,
|
||||
String? category,
|
||||
@Default(0) int position,
|
||||
@JsonKey(name: 'is_visible') @Default(true) bool isVisible,
|
||||
@JsonKey(name: 'link_type') @Default('iframe') String linkType,
|
||||
String? color,
|
||||
@JsonKey(name: 'background_color') String? backgroundColor,
|
||||
}) = _QuickLinkModel;
|
||||
|
||||
const QuickLinkModel._();
|
||||
|
||||
factory QuickLinkModel.fromJson(Map<String, dynamic> json) =>
|
||||
_$QuickLinkModelFromJson(json);
|
||||
|
||||
/// Converts to domain entity.
|
||||
QuickLink toEntity() {
|
||||
return QuickLink(
|
||||
id: id.toString(),
|
||||
name: title,
|
||||
url: url,
|
||||
iconName: icon ?? 'link',
|
||||
category: category,
|
||||
type: _parseQuickLinkType(linkType),
|
||||
sortOrder: position,
|
||||
isActive: isVisible,
|
||||
);
|
||||
}
|
||||
|
||||
/// Creates model from domain entity.
|
||||
factory QuickLinkModel.fromEntity(QuickLink entity) {
|
||||
return QuickLinkModel(
|
||||
id: int.tryParse(entity.id) ?? 0,
|
||||
title: entity.name,
|
||||
url: entity.url,
|
||||
icon: entity.iconName,
|
||||
category: entity.category,
|
||||
position: entity.sortOrder,
|
||||
isVisible: entity.isActive,
|
||||
linkType: _formatQuickLinkType(entity.type),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Parses API link_type string to QuickLinkType enum.
|
||||
QuickLinkType _parseQuickLinkType(String linkType) {
|
||||
return switch (linkType) {
|
||||
'new_tab' => QuickLinkType.newTab,
|
||||
_ => QuickLinkType.iframe,
|
||||
};
|
||||
}
|
||||
|
||||
/// Formats QuickLinkType enum to API link_type string.
|
||||
String _formatQuickLinkType(QuickLinkType type) {
|
||||
return switch (type) {
|
||||
QuickLinkType.newTab => 'new_tab',
|
||||
QuickLinkType.iframe => 'iframe',
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import 'package:freezed_annotation/freezed_annotation.dart';
|
||||
|
||||
part 'system_stats_model.freezed.dart';
|
||||
part 'system_stats_model.g.dart';
|
||||
|
||||
/// System statistics response from Core API.
|
||||
@freezed
|
||||
sealed class SystemStats with _$SystemStats {
|
||||
const factory SystemStats({
|
||||
required CpuStats cpu,
|
||||
required MemoryStats memory,
|
||||
required List<DiskStats> disks,
|
||||
required NetworkStats network,
|
||||
required GpuStats gpu,
|
||||
required String hostname,
|
||||
@JsonKey(name: 'queried_at') required DateTime queriedAt,
|
||||
}) = _SystemStats;
|
||||
|
||||
factory SystemStats.fromJson(Map<String, dynamic> json) =>
|
||||
_$SystemStatsFromJson(json);
|
||||
}
|
||||
|
||||
@freezed
|
||||
sealed class CpuStats with _$CpuStats {
|
||||
const factory CpuStats({
|
||||
@JsonKey(name: 'usage_percent') required double usagePercent,
|
||||
required int cores,
|
||||
@JsonKey(name: 'load_1m') double? load1m,
|
||||
@JsonKey(name: 'load_5m') double? load5m,
|
||||
@JsonKey(name: 'load_15m') double? load15m,
|
||||
}) = _CpuStats;
|
||||
|
||||
factory CpuStats.fromJson(Map<String, dynamic> json) =>
|
||||
_$CpuStatsFromJson(json);
|
||||
}
|
||||
|
||||
@freezed
|
||||
sealed class MemoryStats with _$MemoryStats {
|
||||
const factory MemoryStats({
|
||||
@JsonKey(name: 'usage_percent') required double usagePercent,
|
||||
@JsonKey(name: 'total_bytes') required int totalBytes,
|
||||
@JsonKey(name: 'used_bytes') required int usedBytes,
|
||||
@JsonKey(name: 'available_bytes') required int availableBytes,
|
||||
}) = _MemoryStats;
|
||||
|
||||
factory MemoryStats.fromJson(Map<String, dynamic> json) =>
|
||||
_$MemoryStatsFromJson(json);
|
||||
}
|
||||
|
||||
@freezed
|
||||
sealed class DiskStats with _$DiskStats {
|
||||
const factory DiskStats({
|
||||
@JsonKey(name: 'mount_point') required String mountPoint,
|
||||
required String device,
|
||||
required String fstype,
|
||||
@JsonKey(name: 'usage_percent') required double usagePercent,
|
||||
@JsonKey(name: 'total_bytes') required int totalBytes,
|
||||
@JsonKey(name: 'used_bytes') required int usedBytes,
|
||||
@JsonKey(name: 'free_bytes') required int freeBytes,
|
||||
}) = _DiskStats;
|
||||
|
||||
factory DiskStats.fromJson(Map<String, dynamic> json) =>
|
||||
_$DiskStatsFromJson(json);
|
||||
}
|
||||
|
||||
@freezed
|
||||
sealed class NetworkStats with _$NetworkStats {
|
||||
const factory NetworkStats({
|
||||
@JsonKey(name: 'bytes_sent') required int bytesSent,
|
||||
@JsonKey(name: 'bytes_recv') required int bytesRecv,
|
||||
@JsonKey(name: 'bytes_total') required int bytesTotal,
|
||||
}) = _NetworkStats;
|
||||
|
||||
factory NetworkStats.fromJson(Map<String, dynamic> json) =>
|
||||
_$NetworkStatsFromJson(json);
|
||||
}
|
||||
|
||||
@freezed
|
||||
sealed class GpuStats with _$GpuStats {
|
||||
const factory GpuStats({
|
||||
required bool available,
|
||||
String? name,
|
||||
@JsonKey(name: 'usage_percent') double? usagePercent,
|
||||
@JsonKey(name: 'total_bytes') int? totalBytes,
|
||||
@JsonKey(name: 'used_bytes') int? usedBytes,
|
||||
@JsonKey(name: 'free_bytes') int? freeBytes,
|
||||
}) = _GpuStats;
|
||||
|
||||
factory GpuStats.fromJson(Map<String, dynamic> json) =>
|
||||
_$GpuStatsFromJson(json);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import 'package:freezed_annotation/freezed_annotation.dart';
|
||||
|
||||
part 'quick_link.freezed.dart';
|
||||
|
||||
/// Quick link type for navigation behavior.
|
||||
enum QuickLinkType {
|
||||
/// Opens in embedded iframe within the app.
|
||||
iframe,
|
||||
|
||||
/// Opens in a new browser tab.
|
||||
newTab,
|
||||
}
|
||||
|
||||
/// Quick link entity for Front Hall navigation.
|
||||
///
|
||||
/// Represents a shortcut link that can either open embedded content
|
||||
/// in an iframe or navigate to an external URL in a new tab.
|
||||
@freezed
|
||||
sealed class QuickLink with _$QuickLink {
|
||||
const factory QuickLink({
|
||||
/// Unique identifier.
|
||||
required String id,
|
||||
|
||||
/// Display name.
|
||||
required String name,
|
||||
|
||||
/// Target URL.
|
||||
required String url,
|
||||
|
||||
/// Material icon name (e.g., 'home', 'settings', 'movie').
|
||||
required String iconName,
|
||||
|
||||
/// Category for grouping (e.g., 'Home', 'AMP', 'Coding', 'Infrastructure').
|
||||
String? category,
|
||||
|
||||
/// Navigation behavior type.
|
||||
@Default(QuickLinkType.iframe) QuickLinkType type,
|
||||
|
||||
/// Sort order within category.
|
||||
@Default(0) int sortOrder,
|
||||
|
||||
/// Whether the link is active/visible.
|
||||
@Default(true) bool isActive,
|
||||
}) = _QuickLink;
|
||||
|
||||
const QuickLink._();
|
||||
|
||||
/// Whether this link opens in an iframe.
|
||||
bool get isIframe => type == QuickLinkType.iframe;
|
||||
|
||||
/// Whether this link opens in a new tab.
|
||||
bool get isNewTab => type == QuickLinkType.newTab;
|
||||
}
|
||||
@@ -1,142 +1,65 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:tatlock_ui/version.g.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/presentation/providers/front_hall_state_provider.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/presentation/widgets/dashboard_content.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/presentation/widgets/iframe_view.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/presentation/widgets/quick_link_settings_content.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/presentation/widgets/quick_links_panel.dart';
|
||||
|
||||
/// Front Hall - estate overview and quick access.
|
||||
class FrontHallPage extends StatelessWidget {
|
||||
///
|
||||
/// Three-mode content area:
|
||||
/// - Dashboard: Stats, weather, welcome message
|
||||
/// - Iframe: Embedded external content (web only)
|
||||
/// - Settings: Quick link management
|
||||
class FrontHallPage extends ConsumerWidget {
|
||||
const FrontHallPage({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final frontHallState = ref.watch(frontHallStateProvider);
|
||||
|
||||
// No Scaffold/AppBar needed - header is provided by AppScaffold
|
||||
return ListView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
children: [
|
||||
// Welcome card
|
||||
Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.waving_hand,
|
||||
size: 32,
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Flexible(
|
||||
child: Text(
|
||||
'Welcome to Tatlock',
|
||||
style: Theme.of(context).textTheme.headlineSmall,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
'Your homelab dashboard is ready. More features coming soon.',
|
||||
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
return Row(
|
||||
children: [
|
||||
// Left panel - Quick Links
|
||||
const QuickLinksPanel(),
|
||||
|
||||
// Quick stats placeholder
|
||||
Wrap(
|
||||
spacing: 12,
|
||||
runSpacing: 12,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 160,
|
||||
child: _StatCard(
|
||||
icon: Icons.memory,
|
||||
label: 'CPU',
|
||||
value: '--',
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
width: 160,
|
||||
child: _StatCard(
|
||||
icon: Icons.storage,
|
||||
label: 'Memory',
|
||||
value: '--',
|
||||
color: colorScheme.secondary,
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
width: 160,
|
||||
child: _StatCard(
|
||||
icon: Icons.dns,
|
||||
label: 'Containers',
|
||||
value: '--',
|
||||
color: colorScheme.tertiary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Version info
|
||||
Center(
|
||||
child: Text(
|
||||
'${AppVersion.name} v${AppVersion.fullVersion}',
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.outline,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _StatCard extends StatelessWidget {
|
||||
const _StatCard({
|
||||
required this.icon,
|
||||
required this.label,
|
||||
required this.value,
|
||||
required this.color,
|
||||
});
|
||||
|
||||
final IconData icon;
|
||||
final String label;
|
||||
final String value;
|
||||
final Color color;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
children: [
|
||||
Icon(icon, size: 32, color: color),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
value,
|
||||
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
label,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.outline,
|
||||
),
|
||||
),
|
||||
],
|
||||
// Vertical divider
|
||||
VerticalDivider(
|
||||
width: 1,
|
||||
thickness: 1,
|
||||
color: colorScheme.outlineVariant,
|
||||
),
|
||||
),
|
||||
|
||||
// Main content area - switches based on mode
|
||||
Expanded(
|
||||
child: _buildContent(context, ref, frontHallState),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildContent(
|
||||
BuildContext context,
|
||||
WidgetRef ref,
|
||||
FrontHallState state,
|
||||
) {
|
||||
switch (state.mode) {
|
||||
case FrontHallMode.dashboard:
|
||||
return const DashboardContent();
|
||||
|
||||
case FrontHallMode.iframe:
|
||||
return IframeView(
|
||||
key: ValueKey(state.activeIframeUrl),
|
||||
url: state.activeIframeUrl!,
|
||||
title: state.activeIframeTitle ?? 'External Content',
|
||||
onClose: () =>
|
||||
ref.read(frontHallStateProvider.notifier).showDashboard(),
|
||||
);
|
||||
|
||||
case FrontHallMode.settings:
|
||||
return const QuickLinkSettingsContent();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
import 'package:freezed_annotation/freezed_annotation.dart';
|
||||
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
|
||||
part 'front_hall_state_provider.freezed.dart';
|
||||
part 'front_hall_state_provider.g.dart';
|
||||
|
||||
/// Front Hall content display mode.
|
||||
enum FrontHallMode {
|
||||
/// Shows dashboard widgets (stats, weather, etc.).
|
||||
dashboard,
|
||||
|
||||
/// Shows embedded iframe content.
|
||||
iframe,
|
||||
|
||||
/// Shows link management/settings UI.
|
||||
settings,
|
||||
}
|
||||
|
||||
/// State for Front Hall content area.
|
||||
@freezed
|
||||
sealed class FrontHallState with _$FrontHallState {
|
||||
const factory FrontHallState({
|
||||
/// Current display mode.
|
||||
@Default(FrontHallMode.dashboard) FrontHallMode mode,
|
||||
|
||||
/// Active iframe URL (when mode is iframe).
|
||||
String? activeIframeUrl,
|
||||
|
||||
/// Active iframe title (when mode is iframe).
|
||||
String? activeIframeTitle,
|
||||
|
||||
/// Selected link ID for editing (when mode is settings).
|
||||
/// Null means creating a new link.
|
||||
String? selectedLinkId,
|
||||
}) = _FrontHallState;
|
||||
|
||||
const FrontHallState._();
|
||||
}
|
||||
|
||||
/// Controller for Front Hall state.
|
||||
@riverpod
|
||||
class FrontHallStateNotifier extends _$FrontHallStateNotifier {
|
||||
@override
|
||||
FrontHallState build() => const FrontHallState();
|
||||
|
||||
/// Shows the dashboard (default mode).
|
||||
void showDashboard() {
|
||||
state = const FrontHallState();
|
||||
}
|
||||
|
||||
/// Shows an iframe with the given URL and title.
|
||||
void showIframe(String url, String title) {
|
||||
state = FrontHallState(
|
||||
mode: FrontHallMode.iframe,
|
||||
activeIframeUrl: url,
|
||||
activeIframeTitle: title,
|
||||
);
|
||||
}
|
||||
|
||||
/// Enters settings mode, optionally selecting a link for editing.
|
||||
void enterSettings({String? linkId}) {
|
||||
state = FrontHallState(
|
||||
mode: FrontHallMode.settings,
|
||||
selectedLinkId: linkId,
|
||||
);
|
||||
}
|
||||
|
||||
/// Selects a link for editing (while in settings mode).
|
||||
void selectLink(String linkId) {
|
||||
state = state.copyWith(selectedLinkId: linkId);
|
||||
}
|
||||
|
||||
/// Clears the selected link (for creating new).
|
||||
void clearSelectedLink() {
|
||||
state = state.copyWith(selectedLinkId: null);
|
||||
}
|
||||
|
||||
/// Exits settings mode and returns to dashboard.
|
||||
void exitSettings() {
|
||||
state = const FrontHallState();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,229 @@
|
||||
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/data/datasources/quick_links_datasource.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/domain/entities/quick_link.dart';
|
||||
|
||||
part 'quick_links_provider.g.dart';
|
||||
|
||||
/// Provides the list of all quick links.
|
||||
/// Falls back to default links if API is unavailable.
|
||||
@riverpod
|
||||
Future<List<QuickLink>> quickLinks(Ref ref) async {
|
||||
try {
|
||||
final datasource = ref.watch(quickLinksDatasourceProvider);
|
||||
final links = await datasource.getQuickLinks();
|
||||
// Return defaults if API returns empty list
|
||||
return links.isEmpty ? getDefaultQuickLinks() : links;
|
||||
} catch (_) {
|
||||
// Return default links if API fails (e.g., backend not running)
|
||||
return getDefaultQuickLinks();
|
||||
}
|
||||
}
|
||||
|
||||
/// Provides a single quick link by ID.
|
||||
/// Falls back to default links if API is unavailable.
|
||||
@riverpod
|
||||
Future<QuickLink> quickLink(Ref ref, String id) async {
|
||||
// First try to find in defaults (works offline)
|
||||
final defaults = getDefaultQuickLinks();
|
||||
final defaultLink = defaults.where((link) => link.id == id).firstOrNull;
|
||||
if (defaultLink != null) {
|
||||
return defaultLink;
|
||||
}
|
||||
|
||||
// If not in defaults, try API
|
||||
try {
|
||||
final datasource = ref.watch(quickLinksDatasourceProvider);
|
||||
final intId = int.tryParse(id);
|
||||
if (intId == null) {
|
||||
throw Exception('Invalid link ID: $id');
|
||||
}
|
||||
return await datasource.getQuickLink(intId);
|
||||
} catch (_) {
|
||||
throw Exception('Link not found: $id');
|
||||
}
|
||||
}
|
||||
|
||||
/// Controller for quick link CRUD operations.
|
||||
@riverpod
|
||||
class QuickLinkActions extends _$QuickLinkActions {
|
||||
@override
|
||||
AsyncValue<void> build() => const AsyncValue.data(null);
|
||||
|
||||
/// Safely sets state, ignoring disposal errors.
|
||||
void _safeSetState(AsyncValue<void> newState) {
|
||||
try {
|
||||
state = newState;
|
||||
} catch (_) {
|
||||
// Provider was disposed - ignore
|
||||
}
|
||||
}
|
||||
|
||||
/// Safely invalidates providers after async operations.
|
||||
void _safeInvalidate(List<ProviderOrFamily> providers) {
|
||||
try {
|
||||
for (final provider in providers) {
|
||||
ref.invalidate(provider);
|
||||
}
|
||||
} catch (_) {
|
||||
// Provider was disposed - ignore
|
||||
}
|
||||
}
|
||||
|
||||
/// Creates a new quick link.
|
||||
Future<QuickLink?> create(QuickLink link) async {
|
||||
QuickLink? result;
|
||||
try {
|
||||
_safeSetState(const AsyncValue.loading());
|
||||
final datasource = ref.read(quickLinksDatasourceProvider);
|
||||
result = await datasource.createQuickLink(link);
|
||||
_safeInvalidate([quickLinksProvider]);
|
||||
_safeSetState(const AsyncValue.data(null));
|
||||
} catch (e, st) {
|
||||
_safeSetState(AsyncValue.error(e, st));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/// Updates an existing quick link.
|
||||
Future<QuickLink?> update(QuickLink link) async {
|
||||
QuickLink? result;
|
||||
try {
|
||||
_safeSetState(const AsyncValue.loading());
|
||||
final datasource = ref.read(quickLinksDatasourceProvider);
|
||||
result = await datasource.updateQuickLink(link);
|
||||
_safeInvalidate([quickLinksProvider, quickLinkProvider(link.id)]);
|
||||
_safeSetState(const AsyncValue.data(null));
|
||||
} catch (e, st) {
|
||||
_safeSetState(AsyncValue.error(e, st));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/// Deletes a quick link.
|
||||
Future<void> delete(String id) async {
|
||||
try {
|
||||
_safeSetState(const AsyncValue.loading());
|
||||
final datasource = ref.read(quickLinksDatasourceProvider);
|
||||
final intId = int.tryParse(id) ?? 0;
|
||||
await datasource.deleteQuickLink(intId);
|
||||
_safeInvalidate([quickLinksProvider]);
|
||||
_safeSetState(const AsyncValue.data(null));
|
||||
} catch (e, st) {
|
||||
_safeSetState(AsyncValue.error(e, st));
|
||||
}
|
||||
}
|
||||
|
||||
/// Reorders quick links.
|
||||
Future<void> reorder(List<String> orderedIds) async {
|
||||
try {
|
||||
_safeSetState(const AsyncValue.loading());
|
||||
final datasource = ref.read(quickLinksDatasourceProvider);
|
||||
final intIds = orderedIds.map((id) => int.tryParse(id) ?? 0).toList();
|
||||
await datasource.reorderQuickLinks(intIds);
|
||||
_safeInvalidate([quickLinksProvider]);
|
||||
_safeSetState(const AsyncValue.data(null));
|
||||
} catch (e, st) {
|
||||
_safeSetState(AsyncValue.error(e, st));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Default seed data for quick links (used when API returns empty).
|
||||
List<QuickLink> getDefaultQuickLinks() {
|
||||
return [
|
||||
// Home category
|
||||
const QuickLink(
|
||||
id: 'jellyfin',
|
||||
name: 'Jellyfin',
|
||||
url: 'https://jellyfin.schweitz.net',
|
||||
iconName: 'movie',
|
||||
category: 'Home',
|
||||
type: QuickLinkType.iframe,
|
||||
sortOrder: 0,
|
||||
),
|
||||
const QuickLink(
|
||||
id: 'webui',
|
||||
name: 'Open WebUI',
|
||||
url: 'https://webui.schweitz.net',
|
||||
iconName: 'chat',
|
||||
category: 'Home',
|
||||
type: QuickLinkType.iframe,
|
||||
sortOrder: 1,
|
||||
),
|
||||
const QuickLink(
|
||||
id: 'searxng',
|
||||
name: 'SearXNG',
|
||||
url: 'https://search.schweitz.net',
|
||||
iconName: 'search',
|
||||
category: 'Home',
|
||||
type: QuickLinkType.newTab,
|
||||
sortOrder: 2,
|
||||
),
|
||||
// AMP category
|
||||
const QuickLink(
|
||||
id: 'amp',
|
||||
name: 'AMP Home',
|
||||
url: 'https://amp.schweitz.net',
|
||||
iconName: 'videogame_asset',
|
||||
category: 'AMP',
|
||||
type: QuickLinkType.newTab,
|
||||
sortOrder: 0,
|
||||
),
|
||||
// Coding category
|
||||
const QuickLink(
|
||||
id: 'gitea',
|
||||
name: 'Gitea',
|
||||
url: 'https://git.schweitz.net',
|
||||
iconName: 'code',
|
||||
category: 'Coding',
|
||||
type: QuickLinkType.iframe,
|
||||
sortOrder: 0,
|
||||
),
|
||||
const QuickLink(
|
||||
id: 'cloud-ide',
|
||||
name: 'Cloud IDE',
|
||||
url: 'https://code.schweitz.net',
|
||||
iconName: 'terminal',
|
||||
category: 'Coding',
|
||||
type: QuickLinkType.newTab,
|
||||
sortOrder: 1,
|
||||
),
|
||||
// Infrastructure category
|
||||
const QuickLink(
|
||||
id: 'netdata',
|
||||
name: 'Netdata',
|
||||
url: 'https://netdata.schweitz.net',
|
||||
iconName: 'monitoring',
|
||||
category: 'Infrastructure',
|
||||
type: QuickLinkType.iframe,
|
||||
sortOrder: 0,
|
||||
),
|
||||
const QuickLink(
|
||||
id: 'portainer',
|
||||
name: 'Portainer',
|
||||
url: 'https://portainer.schweitz.net',
|
||||
iconName: 'dns',
|
||||
category: 'Infrastructure',
|
||||
type: QuickLinkType.iframe,
|
||||
sortOrder: 1,
|
||||
),
|
||||
const QuickLink(
|
||||
id: 'npm',
|
||||
name: 'Proxy Manager',
|
||||
url: 'https://npm.schweitz.net',
|
||||
iconName: 'public',
|
||||
category: 'Infrastructure',
|
||||
type: QuickLinkType.iframe,
|
||||
sortOrder: 2,
|
||||
),
|
||||
const QuickLink(
|
||||
id: 'core-api',
|
||||
name: 'Core API',
|
||||
url: 'https://api.schweitz.net/docs',
|
||||
iconName: 'api',
|
||||
category: 'Infrastructure',
|
||||
type: QuickLinkType.iframe,
|
||||
sortOrder: 3,
|
||||
),
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
import 'package:tatlock_ui/core/api/api_client.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/data/models/system_stats_model.dart';
|
||||
|
||||
part 'system_stats_provider.g.dart';
|
||||
|
||||
/// Fetches system stats from Core API.
|
||||
@riverpod
|
||||
Future<SystemStats> systemStats(Ref ref) async {
|
||||
final dio = ref.watch(coreApiClientProvider);
|
||||
|
||||
final response = await dio.get('/tools/system/stats');
|
||||
return SystemStats.fromJson(response.data as Map<String, dynamic>);
|
||||
}
|
||||
@@ -0,0 +1,258 @@
|
||||
import 'dart:async';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/data/models/system_stats_model.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/presentation/providers/system_stats_provider.dart';
|
||||
import 'package:tatlock_ui/shared/theme/stoplight_colors.dart';
|
||||
import 'package:tatlock_ui/shared/widgets/widgets.dart';
|
||||
import 'package:tatlock_ui/version.g.dart';
|
||||
|
||||
/// Dashboard content shown in Front Hall when mode is dashboard.
|
||||
///
|
||||
/// Displays system stats with gauges, weather, air quality, and version info.
|
||||
/// Auto-refreshes system stats every 30 seconds.
|
||||
class DashboardContent extends ConsumerStatefulWidget {
|
||||
const DashboardContent({super.key});
|
||||
|
||||
@override
|
||||
ConsumerState<DashboardContent> createState() => _DashboardContentState();
|
||||
}
|
||||
|
||||
class _DashboardContentState extends ConsumerState<DashboardContent> {
|
||||
Timer? _refreshTimer;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_refreshTimer = Timer.periodic(
|
||||
const Duration(seconds: 30),
|
||||
(_) => ref.invalidate(systemStatsProvider),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_refreshTimer?.cancel();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final systemStatsAsync = ref.watch(systemStatsProvider);
|
||||
|
||||
return ListView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
children: [
|
||||
// Welcome card
|
||||
Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.waving_hand,
|
||||
size: 32,
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Flexible(
|
||||
child: Text(
|
||||
'Welcome to Tatlock',
|
||||
style: Theme.of(context).textTheme.headlineSmall,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
'Your homelab dashboard is ready.',
|
||||
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// System Stats - Gauges
|
||||
_SectionHeader(title: 'System Stats', icon: Icons.monitor_heart),
|
||||
const SizedBox(height: 8),
|
||||
systemStatsAsync.when(
|
||||
data: (stats) => _SystemStatsCard(stats: stats),
|
||||
loading: () => const Card(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(32),
|
||||
child: Center(child: CircularProgressIndicator()),
|
||||
),
|
||||
),
|
||||
error: (error, _) => Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.error_outline, color: colorScheme.error),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Text(
|
||||
'Failed to load system stats',
|
||||
style: TextStyle(color: colorScheme.error),
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.refresh),
|
||||
onPressed: () => ref.invalidate(systemStatsProvider),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Environment - Weather & Air Quality
|
||||
_SectionHeader(title: 'Environment', icon: Icons.eco),
|
||||
const SizedBox(height: 8),
|
||||
LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
// Responsive layout: side-by-side on wider screens
|
||||
if (constraints.maxWidth > 500) {
|
||||
return Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(child: WeatherWidget()),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(child: AirQualityWidget()),
|
||||
],
|
||||
);
|
||||
}
|
||||
// Stack on narrow screens
|
||||
return Column(
|
||||
children: [
|
||||
WeatherWidget(),
|
||||
const SizedBox(height: 12),
|
||||
AirQualityWidget(),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Version info
|
||||
Center(
|
||||
child: Text(
|
||||
'${AppVersion.name} v${AppVersion.fullVersion}',
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.outline,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Section header with icon and title.
|
||||
class _SectionHeader extends StatelessWidget {
|
||||
const _SectionHeader({
|
||||
required this.title,
|
||||
required this.icon,
|
||||
});
|
||||
|
||||
final String title;
|
||||
final IconData icon;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Row(
|
||||
children: [
|
||||
Icon(
|
||||
icon,
|
||||
size: 18,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
title,
|
||||
style: Theme.of(context).textTheme.titleSmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Card displaying system stats with gauges.
|
||||
class _SystemStatsCard extends StatelessWidget {
|
||||
const _SystemStatsCard({required this.stats});
|
||||
|
||||
final SystemStats stats;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// Build gauges list: CPU, Memory, GPU (if available), then all disks
|
||||
final gauges = <GaugeData>[
|
||||
GaugeData(
|
||||
value: stats.cpu.usagePercent / 100,
|
||||
label: 'CPU',
|
||||
icon: Icons.memory,
|
||||
color: StoplightColors.forPercent(stats.cpu.usagePercent),
|
||||
),
|
||||
GaugeData(
|
||||
value: stats.memory.usagePercent / 100,
|
||||
label: 'RAM',
|
||||
icon: Icons.storage,
|
||||
color: StoplightColors.forPercent(stats.memory.usagePercent),
|
||||
),
|
||||
if (stats.gpu.available && stats.gpu.usagePercent != null)
|
||||
GaugeData(
|
||||
value: stats.gpu.usagePercent! / 100,
|
||||
label: 'VRAM',
|
||||
icon: Icons.videocam,
|
||||
color: StoplightColors.forPercent(stats.gpu.usagePercent!),
|
||||
),
|
||||
// Add a gauge for each disk
|
||||
...stats.disks.map(
|
||||
(disk) => GaugeData(
|
||||
value: disk.usagePercent / 100,
|
||||
label: _formatDiskLabel(disk),
|
||||
icon: Icons.disc_full,
|
||||
color: StoplightColors.forPercent(disk.usagePercent),
|
||||
),
|
||||
),
|
||||
];
|
||||
|
||||
return Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: GaugeRow(
|
||||
gaugeSize: 120,
|
||||
gauges: gauges,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Formats disk label from mount point.
|
||||
String _formatDiskLabel(DiskStats disk) {
|
||||
final mount = disk.mountPoint;
|
||||
if (mount == '/') return 'Root';
|
||||
if (mount == '/hostfs') return 'Host';
|
||||
if (mount.startsWith('/hostfs/')) return mount.substring(8);
|
||||
if (mount.startsWith('/mnt/')) return mount.substring(5);
|
||||
if (mount.startsWith('/media/')) return mount.substring(7);
|
||||
// Return last path segment
|
||||
final parts = mount.split('/');
|
||||
return parts.isNotEmpty ? parts.last : mount;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
// Conditional export for platform-specific iframe implementation.
|
||||
// Web uses actual iframe embedding, other platforms open in browser.
|
||||
export 'iframe_view_stub.dart'
|
||||
if (dart.library.html) 'iframe_view_web.dart';
|
||||
@@ -0,0 +1,83 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:url_launcher/url_launcher.dart';
|
||||
|
||||
/// Stub implementation for non-web platforms.
|
||||
///
|
||||
/// Since iframes are web-only, this shows a message and offers
|
||||
/// to open the link in an external browser.
|
||||
class IframeView extends StatelessWidget {
|
||||
const IframeView({
|
||||
super.key,
|
||||
required this.url,
|
||||
required this.title,
|
||||
required this.onClose,
|
||||
});
|
||||
|
||||
final String url;
|
||||
final String title;
|
||||
final VoidCallback onClose;
|
||||
|
||||
Future<void> _openInBrowser() async {
|
||||
final uri = Uri.tryParse(url);
|
||||
if (uri != null && await canLaunchUrl(uri)) {
|
||||
await launchUrl(uri, mode: LaunchMode.externalApplication);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final textTheme = Theme.of(context).textTheme;
|
||||
|
||||
// Auto-open in browser and show message
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
_openInBrowser();
|
||||
});
|
||||
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.open_in_browser,
|
||||
size: 64,
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Opening in Browser',
|
||||
style: textTheme.titleLarge,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Embedded views are not supported on this platform.\n"$title" is opening in your browser.',
|
||||
textAlign: TextAlign.center,
|
||||
style: textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
OutlinedButton.icon(
|
||||
onPressed: _openInBrowser,
|
||||
icon: const Icon(Icons.open_in_new),
|
||||
label: const Text('Open Again'),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
FilledButton.icon(
|
||||
onPressed: onClose,
|
||||
icon: const Icon(Icons.arrow_back),
|
||||
label: const Text('Back to Dashboard'),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
import 'dart:html' as html;
|
||||
import 'dart:ui_web' as ui_web;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:url_launcher/url_launcher.dart';
|
||||
|
||||
/// Embedded iframe view for displaying external content (web only).
|
||||
///
|
||||
/// Uses HtmlElementView for Flutter web to embed an iframe.
|
||||
/// Includes a header bar with title, refresh, open in new tab, and close actions.
|
||||
class IframeView extends StatefulWidget {
|
||||
const IframeView({
|
||||
super.key,
|
||||
required this.url,
|
||||
required this.title,
|
||||
required this.onClose,
|
||||
});
|
||||
|
||||
/// URL to display in the iframe.
|
||||
final String url;
|
||||
|
||||
/// Title displayed in the header bar.
|
||||
final String title;
|
||||
|
||||
/// Callback when the close button is pressed.
|
||||
final VoidCallback onClose;
|
||||
|
||||
@override
|
||||
State<IframeView> createState() => _IframeViewState();
|
||||
}
|
||||
|
||||
class _IframeViewState extends State<IframeView> {
|
||||
late final String _viewType;
|
||||
late html.IFrameElement _iframe;
|
||||
bool _isLoading = true;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_viewType = 'iframe-${widget.url.hashCode}-${DateTime.now().millisecondsSinceEpoch}';
|
||||
_createIframe();
|
||||
}
|
||||
|
||||
void _createIframe() {
|
||||
_iframe = html.IFrameElement()
|
||||
..src = widget.url
|
||||
..style.border = 'none'
|
||||
..style.width = '100%'
|
||||
..style.height = '100%'
|
||||
..allow = 'fullscreen'
|
||||
..onLoad.listen((_) {
|
||||
if (mounted) {
|
||||
setState(() => _isLoading = false);
|
||||
}
|
||||
});
|
||||
|
||||
// Register the view factory
|
||||
ui_web.platformViewRegistry.registerViewFactory(
|
||||
_viewType,
|
||||
(int viewId) => _iframe,
|
||||
);
|
||||
}
|
||||
|
||||
void _refresh() {
|
||||
setState(() => _isLoading = true);
|
||||
// Reload the iframe by setting src again
|
||||
_iframe.src = widget.url;
|
||||
}
|
||||
|
||||
Future<void> _openInNewTab() async {
|
||||
final uri = Uri.tryParse(widget.url);
|
||||
if (uri != null && await canLaunchUrl(uri)) {
|
||||
await launchUrl(uri, mode: LaunchMode.externalApplication);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final textTheme = Theme.of(context).textTheme;
|
||||
|
||||
return Column(
|
||||
children: [
|
||||
// Header bar
|
||||
Container(
|
||||
height: 56,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainerHighest,
|
||||
border: Border(
|
||||
bottom: BorderSide(color: colorScheme.outlineVariant),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
// Title
|
||||
Expanded(
|
||||
child: Text(
|
||||
widget.title,
|
||||
style: textTheme.titleSmall?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
// Actions
|
||||
IconButton(
|
||||
icon: const Icon(Icons.open_in_new, size: 20),
|
||||
tooltip: 'Open in new tab',
|
||||
onPressed: _openInNewTab,
|
||||
),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.refresh, size: 20),
|
||||
tooltip: 'Refresh',
|
||||
onPressed: _refresh,
|
||||
),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.close, size: 20),
|
||||
tooltip: 'Close',
|
||||
onPressed: widget.onClose,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// Iframe content
|
||||
Expanded(
|
||||
child: Stack(
|
||||
children: [
|
||||
HtmlElementView(viewType: _viewType),
|
||||
// Loading overlay
|
||||
if (_isLoading)
|
||||
Container(
|
||||
color: colorScheme.surface,
|
||||
child: const Center(
|
||||
child: CircularProgressIndicator(),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,343 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/domain/entities/quick_link.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/presentation/providers/quick_links_provider.dart';
|
||||
import 'package:tatlock_ui/shared/widgets/entity_page.dart';
|
||||
import 'package:tatlock_ui/shared/widgets/icon_picker.dart';
|
||||
|
||||
/// Form for creating and editing Quick Links.
|
||||
///
|
||||
/// Handles validation, submission, and state management for link data.
|
||||
class QuickLinkForm extends ConsumerStatefulWidget {
|
||||
const QuickLinkForm({
|
||||
super.key,
|
||||
required this.mode,
|
||||
this.quickLink,
|
||||
required this.onCancel,
|
||||
required this.onSaved,
|
||||
});
|
||||
|
||||
final EntityPageMode mode;
|
||||
final QuickLink? quickLink;
|
||||
final VoidCallback onCancel;
|
||||
final VoidCallback onSaved;
|
||||
|
||||
@override
|
||||
ConsumerState<QuickLinkForm> createState() => _QuickLinkFormState();
|
||||
}
|
||||
|
||||
class _QuickLinkFormState extends ConsumerState<QuickLinkForm> {
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
|
||||
late final TextEditingController _nameController;
|
||||
late final TextEditingController _urlController;
|
||||
late final TextEditingController _categoryController;
|
||||
late String _iconName;
|
||||
late QuickLinkType _type;
|
||||
late bool _isActive;
|
||||
|
||||
bool _isSubmitting = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
final link = widget.quickLink;
|
||||
_nameController = TextEditingController(text: link?.name ?? '');
|
||||
_urlController = TextEditingController(text: link?.url ?? '');
|
||||
_categoryController = TextEditingController(text: link?.category ?? '');
|
||||
_iconName = link?.iconName ?? 'link';
|
||||
_type = link?.type ?? QuickLinkType.iframe;
|
||||
_isActive = link?.isActive ?? true;
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_nameController.dispose();
|
||||
_urlController.dispose();
|
||||
_categoryController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
bool get isCreate => widget.mode == EntityPageMode.create;
|
||||
|
||||
Future<void> _handleSubmit() async {
|
||||
if (!_formKey.currentState!.validate()) return;
|
||||
|
||||
setState(() => _isSubmitting = true);
|
||||
|
||||
try {
|
||||
final actions = ref.read(quickLinkActionsProvider.notifier);
|
||||
final category = _categoryController.text.trim();
|
||||
|
||||
final QuickLink link;
|
||||
if (isCreate) {
|
||||
// Create new entity
|
||||
link = QuickLink(
|
||||
id: _nameController.text.toLowerCase().replaceAll(RegExp(r'\s+'), '-'),
|
||||
name: _nameController.text.trim(),
|
||||
url: _urlController.text.trim(),
|
||||
iconName: _iconName,
|
||||
category: category.isEmpty ? null : category,
|
||||
type: _type,
|
||||
isActive: _isActive,
|
||||
sortOrder: 0,
|
||||
);
|
||||
await actions.create(link);
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Link created successfully'),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
),
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// Update: use copyWith to preserve all existing data
|
||||
link = widget.quickLink!.copyWith(
|
||||
name: _nameController.text.trim(),
|
||||
url: _urlController.text.trim(),
|
||||
iconName: _iconName,
|
||||
category: category.isEmpty ? null : category,
|
||||
type: _type,
|
||||
isActive: _isActive,
|
||||
);
|
||||
await actions.update(link);
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Link updated successfully'),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh the list before exiting
|
||||
ref.invalidate(quickLinksProvider);
|
||||
|
||||
widget.onSaved();
|
||||
} catch (e) {
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text('Error: $e'),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
backgroundColor: Theme.of(context).colorScheme.error,
|
||||
),
|
||||
);
|
||||
}
|
||||
} finally {
|
||||
if (mounted) {
|
||||
setState(() => _isSubmitting = false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _handleDelete() async {
|
||||
if (widget.quickLink == null) return;
|
||||
|
||||
final confirm = await showDialog<bool>(
|
||||
context: context,
|
||||
builder: (context) => AlertDialog(
|
||||
title: const Text('Delete Link'),
|
||||
content: Text('Are you sure you want to delete "${widget.quickLink!.name}"?'),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(context).pop(false),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
FilledButton(
|
||||
onPressed: () => Navigator.of(context).pop(true),
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: Theme.of(context).colorScheme.error,
|
||||
),
|
||||
child: const Text('Delete'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
if (confirm == true) {
|
||||
setState(() => _isSubmitting = true);
|
||||
try {
|
||||
await ref.read(quickLinkActionsProvider.notifier).delete(widget.quickLink!.id);
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Link deleted'),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
),
|
||||
);
|
||||
widget.onSaved();
|
||||
}
|
||||
} catch (e) {
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text('Error deleting: $e'),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
backgroundColor: Theme.of(context).colorScheme.error,
|
||||
),
|
||||
);
|
||||
}
|
||||
} finally {
|
||||
if (mounted) {
|
||||
setState(() => _isSubmitting = false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Form(
|
||||
key: _formKey,
|
||||
child: ListView(
|
||||
padding: const EdgeInsets.all(24),
|
||||
children: [
|
||||
// Name field
|
||||
TextFormField(
|
||||
controller: _nameController,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Name',
|
||||
hintText: 'Enter link name',
|
||||
border: OutlineInputBorder(),
|
||||
),
|
||||
validator: (value) {
|
||||
if (value == null || value.trim().isEmpty) {
|
||||
return 'Name is required';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
textInputAction: TextInputAction.next,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// URL field
|
||||
TextFormField(
|
||||
controller: _urlController,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'URL',
|
||||
hintText: 'https://example.com',
|
||||
border: OutlineInputBorder(),
|
||||
),
|
||||
validator: (value) {
|
||||
if (value == null || value.trim().isEmpty) {
|
||||
return 'URL is required';
|
||||
}
|
||||
final uri = Uri.tryParse(value);
|
||||
if (uri == null || !uri.hasScheme) {
|
||||
return 'Enter a valid URL with scheme (http/https)';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
keyboardType: TextInputType.url,
|
||||
textInputAction: TextInputAction.next,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Category field
|
||||
TextFormField(
|
||||
controller: _categoryController,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Category',
|
||||
hintText: 'e.g., Home, Infrastructure, Coding',
|
||||
border: OutlineInputBorder(),
|
||||
),
|
||||
textInputAction: TextInputAction.done,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Icon picker
|
||||
IconPicker(
|
||||
selectedIcon: _iconName,
|
||||
onChanged: (icon) => setState(() => _iconName = icon),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Link type
|
||||
Text(
|
||||
'Link Type',
|
||||
style: Theme.of(context).textTheme.labelMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
SegmentedButton<QuickLinkType>(
|
||||
segments: const [
|
||||
ButtonSegment(
|
||||
value: QuickLinkType.iframe,
|
||||
icon: Icon(Icons.web),
|
||||
label: Text('Iframe'),
|
||||
),
|
||||
ButtonSegment(
|
||||
value: QuickLinkType.newTab,
|
||||
icon: Icon(Icons.open_in_new),
|
||||
label: Text('New Tab'),
|
||||
),
|
||||
],
|
||||
selected: {_type},
|
||||
onSelectionChanged: (selected) {
|
||||
setState(() => _type = selected.first);
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
_type == QuickLinkType.iframe
|
||||
? 'Opens embedded in the dashboard'
|
||||
: 'Opens in a new browser tab',
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.outline,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Active toggle
|
||||
SwitchListTile(
|
||||
title: const Text('Active'),
|
||||
subtitle: const Text('Show this link in the panel'),
|
||||
value: _isActive,
|
||||
onChanged: (value) => setState(() => _isActive = value),
|
||||
contentPadding: EdgeInsets.zero,
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
|
||||
// Action buttons
|
||||
Row(
|
||||
children: [
|
||||
if (!isCreate) ...[
|
||||
OutlinedButton.icon(
|
||||
onPressed: _isSubmitting ? null : _handleDelete,
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: colorScheme.error,
|
||||
),
|
||||
icon: const Icon(Icons.delete),
|
||||
label: const Text('Delete'),
|
||||
),
|
||||
const Spacer(),
|
||||
] else
|
||||
const Spacer(),
|
||||
TextButton(
|
||||
onPressed: _isSubmitting ? null : widget.onCancel,
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
FilledButton(
|
||||
onPressed: _isSubmitting ? null : _handleSubmit,
|
||||
child: _isSubmitting
|
||||
? const SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: CircularProgressIndicator(strokeWidth: 2),
|
||||
)
|
||||
: Text(isCreate ? 'Create' : 'Save'),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/presentation/providers/front_hall_state_provider.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/presentation/providers/quick_links_provider.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/presentation/widgets/quick_link_form.dart';
|
||||
import 'package:tatlock_ui/shared/widgets/entity_page.dart';
|
||||
|
||||
/// Settings content for Quick Link management.
|
||||
///
|
||||
/// Shows either:
|
||||
/// - Create form (when isCreating state is set)
|
||||
/// - Edit form (when a link is selected)
|
||||
/// - Empty state with "Add New Link" prompt (when no link selected)
|
||||
class QuickLinkSettingsContent extends ConsumerStatefulWidget {
|
||||
const QuickLinkSettingsContent({super.key});
|
||||
|
||||
@override
|
||||
ConsumerState<QuickLinkSettingsContent> createState() =>
|
||||
_QuickLinkSettingsContentState();
|
||||
}
|
||||
|
||||
class _QuickLinkSettingsContentState
|
||||
extends ConsumerState<QuickLinkSettingsContent> {
|
||||
bool _isCreating = false;
|
||||
|
||||
void _startCreating() {
|
||||
setState(() => _isCreating = true);
|
||||
// Clear any selected link when creating new
|
||||
ref.read(frontHallStateProvider.notifier).clearSelectedLink();
|
||||
}
|
||||
|
||||
void _stopCreating() {
|
||||
setState(() => _isCreating = false);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final textTheme = Theme.of(context).textTheme;
|
||||
final frontHallState = ref.watch(frontHallStateProvider);
|
||||
final selectedLinkId = frontHallState.selectedLinkId;
|
||||
|
||||
// Create mode - show create form
|
||||
if (_isCreating) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
leading: IconButton(
|
||||
icon: const Icon(Icons.arrow_back),
|
||||
onPressed: _stopCreating,
|
||||
),
|
||||
title: const Text('Create New Link'),
|
||||
),
|
||||
body: QuickLinkForm(
|
||||
mode: EntityPageMode.create,
|
||||
onCancel: _stopCreating,
|
||||
onSaved: () =>
|
||||
ref.read(frontHallStateProvider.notifier).exitSettings(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// No link selected - show empty state
|
||||
if (selectedLinkId == null) {
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.add_link,
|
||||
size: 64,
|
||||
color: colorScheme.outline,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'No link selected',
|
||||
style: textTheme.titleLarge?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Select a link from the panel to edit, or create a new one.',
|
||||
textAlign: TextAlign.center,
|
||||
style: textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.outline,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
FilledButton.icon(
|
||||
onPressed: _startCreating,
|
||||
icon: const Icon(Icons.add),
|
||||
label: const Text('Create New Link'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Link selected - show edit form
|
||||
final linkAsync = ref.watch(quickLinkProvider(selectedLinkId));
|
||||
|
||||
return linkAsync.when(
|
||||
loading: () => const Center(child: CircularProgressIndicator()),
|
||||
error: (error, _) => Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(Icons.error_outline, size: 48, color: colorScheme.error),
|
||||
const SizedBox(height: 16),
|
||||
Text('Error loading link: $error'),
|
||||
const SizedBox(height: 16),
|
||||
TextButton.icon(
|
||||
onPressed: () =>
|
||||
ref.invalidate(quickLinkProvider(selectedLinkId)),
|
||||
icon: const Icon(Icons.refresh),
|
||||
label: const Text('Retry'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
data: (link) => Scaffold(
|
||||
appBar: AppBar(
|
||||
leading: IconButton(
|
||||
icon: const Icon(Icons.arrow_back),
|
||||
onPressed: () => ref
|
||||
.read(frontHallStateProvider.notifier)
|
||||
.clearSelectedLink(),
|
||||
),
|
||||
title: Text('Edit: ${link.name}'),
|
||||
),
|
||||
body: QuickLinkForm(
|
||||
key: ValueKey(link.id), // Force recreation when link changes
|
||||
mode: EntityPageMode.edit,
|
||||
quickLink: link,
|
||||
onCancel: () => ref
|
||||
.read(frontHallStateProvider.notifier)
|
||||
.clearSelectedLink(),
|
||||
onSaved: () =>
|
||||
ref.read(frontHallStateProvider.notifier).exitSettings(),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,683 @@
|
||||
import 'dart:ui' show lerpDouble;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/domain/entities/quick_link.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/presentation/providers/front_hall_state_provider.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/presentation/providers/quick_links_provider.dart';
|
||||
import 'package:tatlock_ui/shared/layouts/widgets/panel_header.dart';
|
||||
import 'package:tatlock_ui/shared/widgets/icon_picker.dart';
|
||||
import 'package:url_launcher/url_launcher.dart';
|
||||
|
||||
/// Left-side panel for quick link navigation in Front Hall.
|
||||
///
|
||||
/// Shows categorized links that can open in iframe or new tab.
|
||||
/// Adapts behavior based on current mode (normal vs settings).
|
||||
class QuickLinksPanel extends ConsumerWidget {
|
||||
const QuickLinksPanel({
|
||||
super.key,
|
||||
this.width = 280,
|
||||
});
|
||||
|
||||
final double width;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final frontHallState = ref.watch(frontHallStateProvider);
|
||||
final quickLinksAsync = ref.watch(quickLinksProvider);
|
||||
final isSettingsMode = frontHallState.mode == FrontHallMode.settings;
|
||||
|
||||
return SizedBox(
|
||||
width: width,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// Header changes based on mode
|
||||
if (isSettingsMode)
|
||||
_SettingsModeHeader(
|
||||
onBack: () =>
|
||||
ref.read(frontHallStateProvider.notifier).exitSettings(),
|
||||
)
|
||||
else
|
||||
PanelHeader(
|
||||
title: 'Quick Links',
|
||||
icon: Icons.link,
|
||||
dockToBottom: true,
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.refresh, size: 20),
|
||||
tooltip: 'Refresh',
|
||||
onPressed: () => ref.invalidate(quickLinksProvider),
|
||||
padding: EdgeInsets.zero,
|
||||
constraints: const BoxConstraints(),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Add new link button (settings mode only)
|
||||
if (isSettingsMode) ...[
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(8),
|
||||
child: FilledButton.icon(
|
||||
onPressed: () => ref
|
||||
.read(frontHallStateProvider.notifier)
|
||||
.clearSelectedLink(),
|
||||
icon: const Icon(Icons.add, size: 18),
|
||||
label: const Text('Add New Link'),
|
||||
),
|
||||
),
|
||||
Divider(height: 1, color: colorScheme.outlineVariant),
|
||||
],
|
||||
|
||||
// Links list
|
||||
Expanded(
|
||||
child: quickLinksAsync.when(
|
||||
loading: () => const Center(child: CircularProgressIndicator()),
|
||||
error: (error, _) => _ErrorState(
|
||||
error: error,
|
||||
onRetry: () => ref.invalidate(quickLinksProvider),
|
||||
),
|
||||
data: (links) {
|
||||
// Use default links if empty
|
||||
final displayLinks =
|
||||
links.isEmpty ? getDefaultQuickLinks() : links;
|
||||
return _QuickLinksList(
|
||||
links: displayLinks,
|
||||
selectedLinkId: frontHallState.selectedLinkId,
|
||||
isSettingsMode: isSettingsMode,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
|
||||
// Settings button (normal mode only)
|
||||
if (!isSettingsMode) ...[
|
||||
Divider(height: 1, color: colorScheme.outlineVariant),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(8),
|
||||
child: TextButton.icon(
|
||||
onPressed: () => ref
|
||||
.read(frontHallStateProvider.notifier)
|
||||
.enterSettings(),
|
||||
icon: const Icon(Icons.settings, size: 18),
|
||||
label: const Text('Settings'),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Header for settings mode with back button.
|
||||
class _SettingsModeHeader extends StatelessWidget {
|
||||
const _SettingsModeHeader({required this.onBack});
|
||||
|
||||
final VoidCallback onBack;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final textTheme = Theme.of(context).textTheme;
|
||||
|
||||
return Container(
|
||||
height: 56,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainerHighest,
|
||||
border: Border(
|
||||
bottom: BorderSide(color: colorScheme.outlineVariant),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.arrow_back),
|
||||
tooltip: 'Back to Dashboard',
|
||||
onPressed: onBack,
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Icon(Icons.link, size: 20, color: colorScheme.primary),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'Quick Links',
|
||||
style: textTheme.titleSmall?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// List of quick links grouped by category.
|
||||
///
|
||||
/// In settings mode, shows a flat reorderable list.
|
||||
/// In normal mode, shows grouped list with category headers.
|
||||
class _QuickLinksList extends ConsumerWidget {
|
||||
const _QuickLinksList({
|
||||
required this.links,
|
||||
required this.selectedLinkId,
|
||||
required this.isSettingsMode,
|
||||
});
|
||||
|
||||
final List<QuickLink> links;
|
||||
final String? selectedLinkId;
|
||||
final bool isSettingsMode;
|
||||
|
||||
/// Groups links by category, preserving order.
|
||||
List<(String?, List<QuickLink>)> get _groupedLinks {
|
||||
final groups = <String?, List<QuickLink>>{};
|
||||
final order = <String?>[];
|
||||
|
||||
for (final link in links) {
|
||||
if (!groups.containsKey(link.category)) {
|
||||
groups[link.category] = [];
|
||||
order.add(link.category);
|
||||
}
|
||||
groups[link.category]!.add(link);
|
||||
}
|
||||
|
||||
return order.map((category) => (category, groups[category]!)).toList();
|
||||
}
|
||||
|
||||
bool get _showCategoryHeaders {
|
||||
final categories =
|
||||
links.map((l) => l.category).where((c) => c != null).toSet();
|
||||
return categories.length > 1;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
// In settings mode, show reorderable list
|
||||
if (isSettingsMode) {
|
||||
return _buildReorderableList(context, ref);
|
||||
}
|
||||
|
||||
// In normal mode, show grouped list
|
||||
return ListView(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||||
children: _buildLinkList(context, ref),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildReorderableList(BuildContext context, WidgetRef ref) {
|
||||
return ReorderableListView.builder(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||||
itemCount: links.length,
|
||||
onReorder: (oldIndex, newIndex) => _handleReorder(ref, oldIndex, newIndex),
|
||||
proxyDecorator: (child, index, animation) {
|
||||
return AnimatedBuilder(
|
||||
animation: animation,
|
||||
builder: (context, child) {
|
||||
final elevation = lerpDouble(0, 8, animation.value) ?? 0;
|
||||
return Material(
|
||||
elevation: elevation,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: child,
|
||||
);
|
||||
},
|
||||
child: child,
|
||||
);
|
||||
},
|
||||
itemBuilder: (context, index) {
|
||||
final link = links[index];
|
||||
return _ReorderableLinkTile(
|
||||
key: ValueKey(link.id),
|
||||
link: link,
|
||||
index: index,
|
||||
isSelected: link.id == selectedLinkId,
|
||||
onTap: () => _handleLinkTap(ref, link),
|
||||
onEdit: () => ref
|
||||
.read(frontHallStateProvider.notifier)
|
||||
.selectLink(link.id),
|
||||
onDelete: () => _handleDelete(context, ref, link),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
void _handleReorder(WidgetRef ref, int oldIndex, int newIndex) {
|
||||
// Adjust for the removal
|
||||
if (newIndex > oldIndex) {
|
||||
newIndex -= 1;
|
||||
}
|
||||
|
||||
// Create new ordered list
|
||||
final reorderedLinks = List<QuickLink>.from(links);
|
||||
final item = reorderedLinks.removeAt(oldIndex);
|
||||
reorderedLinks.insert(newIndex, item);
|
||||
|
||||
// Extract IDs in new order
|
||||
final orderedIds = reorderedLinks.map((l) => l.id).toList();
|
||||
|
||||
// Call reorder API
|
||||
ref.read(quickLinkActionsProvider.notifier).reorder(orderedIds);
|
||||
}
|
||||
|
||||
List<Widget> _buildLinkList(BuildContext context, WidgetRef ref) {
|
||||
final widgets = <Widget>[];
|
||||
final showHeaders = _showCategoryHeaders;
|
||||
|
||||
for (final (category, categoryLinks) in _groupedLinks) {
|
||||
// Add category header if multiple categories exist
|
||||
if (showHeaders && category != null) {
|
||||
widgets.add(_CategoryHeader(title: category));
|
||||
}
|
||||
|
||||
// Add links
|
||||
for (final link in categoryLinks) {
|
||||
widgets.add(
|
||||
_QuickLinkTile(
|
||||
link: link,
|
||||
isSelected: link.id == selectedLinkId,
|
||||
isSettingsMode: isSettingsMode,
|
||||
onTap: () => _handleLinkTap(ref, link),
|
||||
onEdit: isSettingsMode
|
||||
? () => ref
|
||||
.read(frontHallStateProvider.notifier)
|
||||
.selectLink(link.id)
|
||||
: null,
|
||||
onDelete: isSettingsMode
|
||||
? () => _handleDelete(context, ref, link)
|
||||
: null,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return widgets;
|
||||
}
|
||||
|
||||
void _handleLinkTap(WidgetRef ref, QuickLink link) {
|
||||
if (isSettingsMode) {
|
||||
// In settings mode, select link for editing
|
||||
ref.read(frontHallStateProvider.notifier).selectLink(link.id);
|
||||
} else {
|
||||
// Close any open content first to ensure clean state
|
||||
ref.read(frontHallStateProvider.notifier).showDashboard();
|
||||
|
||||
// Then open the new link
|
||||
if (link.isIframe) {
|
||||
ref
|
||||
.read(frontHallStateProvider.notifier)
|
||||
.showIframe(link.url, link.name);
|
||||
} else {
|
||||
// Open in new tab
|
||||
_openInNewTab(link.url);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _openInNewTab(String url) async {
|
||||
final uri = Uri.tryParse(url);
|
||||
if (uri != null && await canLaunchUrl(uri)) {
|
||||
await launchUrl(uri, mode: LaunchMode.externalApplication);
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _handleDelete(
|
||||
BuildContext context,
|
||||
WidgetRef ref,
|
||||
QuickLink link,
|
||||
) async {
|
||||
final confirmed = await showDialog<bool>(
|
||||
context: context,
|
||||
builder: (context) => AlertDialog(
|
||||
title: const Text('Delete Link'),
|
||||
content: Text('Delete "${link.name}"?'),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(context, false),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
FilledButton(
|
||||
onPressed: () => Navigator.pop(context, true),
|
||||
child: const Text('Delete'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
if (confirmed == true) {
|
||||
await ref.read(quickLinkActionsProvider.notifier).delete(link.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Reorderable link tile with drag handle for settings mode.
|
||||
class _ReorderableLinkTile extends StatelessWidget {
|
||||
const _ReorderableLinkTile({
|
||||
super.key,
|
||||
required this.link,
|
||||
required this.index,
|
||||
required this.isSelected,
|
||||
required this.onTap,
|
||||
required this.onEdit,
|
||||
required this.onDelete,
|
||||
});
|
||||
|
||||
final QuickLink link;
|
||||
final int index;
|
||||
final bool isSelected;
|
||||
final VoidCallback onTap;
|
||||
final VoidCallback onEdit;
|
||||
final VoidCallback onDelete;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final textTheme = Theme.of(context).textTheme;
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
|
||||
child: Material(
|
||||
color: isSelected
|
||||
? colorScheme.primaryContainer.withValues(alpha: 0.4)
|
||||
: Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 10),
|
||||
child: Row(
|
||||
children: [
|
||||
// Drag handle
|
||||
ReorderableDragStartListener(
|
||||
index: index,
|
||||
child: MouseRegion(
|
||||
cursor: SystemMouseCursors.grab,
|
||||
child: Icon(
|
||||
Icons.drag_indicator,
|
||||
size: 20,
|
||||
color: colorScheme.outline,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
// Icon
|
||||
Icon(
|
||||
getIconData(link.iconName),
|
||||
size: 20,
|
||||
color: isSelected
|
||||
? colorScheme.primary
|
||||
: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
// Name and subtitle
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
link.name,
|
||||
style: textTheme.bodyMedium?.copyWith(
|
||||
color: isSelected
|
||||
? colorScheme.primary
|
||||
: colorScheme.onSurface,
|
||||
fontWeight: isSelected ? FontWeight.w600 : null,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
link.category ?? 'No category',
|
||||
style: textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.outline,
|
||||
fontSize: 11,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// Overflow menu
|
||||
PopupMenuButton<String>(
|
||||
icon: Icon(
|
||||
Icons.more_vert,
|
||||
size: 18,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
padding: EdgeInsets.zero,
|
||||
itemBuilder: (context) => [
|
||||
const PopupMenuItem(
|
||||
value: 'edit',
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.edit, size: 18),
|
||||
SizedBox(width: 8),
|
||||
Text('Edit'),
|
||||
],
|
||||
),
|
||||
),
|
||||
const PopupMenuItem(
|
||||
value: 'delete',
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.delete, size: 18),
|
||||
SizedBox(width: 8),
|
||||
Text('Delete'),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
onSelected: (value) {
|
||||
switch (value) {
|
||||
case 'edit':
|
||||
onEdit();
|
||||
case 'delete':
|
||||
onDelete();
|
||||
}
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Category header with left accent bar.
|
||||
class _CategoryHeader extends StatelessWidget {
|
||||
const _CategoryHeader({required this.title});
|
||||
|
||||
final String title;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final textTheme = Theme.of(context).textTheme;
|
||||
|
||||
return Container(
|
||||
margin: const EdgeInsets.only(top: 8, bottom: 4),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainerHigh,
|
||||
border: Border(
|
||||
left: BorderSide(
|
||||
color: colorScheme.primary,
|
||||
width: 2,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
title.toUpperCase(),
|
||||
style: textTheme.labelSmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
letterSpacing: 0.5,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Individual quick link tile.
|
||||
class _QuickLinkTile extends StatelessWidget {
|
||||
const _QuickLinkTile({
|
||||
required this.link,
|
||||
required this.isSelected,
|
||||
required this.isSettingsMode,
|
||||
required this.onTap,
|
||||
this.onEdit,
|
||||
this.onDelete,
|
||||
});
|
||||
|
||||
final QuickLink link;
|
||||
final bool isSelected;
|
||||
final bool isSettingsMode;
|
||||
final VoidCallback onTap;
|
||||
final VoidCallback? onEdit;
|
||||
final VoidCallback? onDelete;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final textTheme = Theme.of(context).textTheme;
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
|
||||
child: Material(
|
||||
color: isSelected
|
||||
? colorScheme.primaryContainer.withValues(alpha: 0.4)
|
||||
: Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
getIconData(link.iconName),
|
||||
size: 20,
|
||||
color: isSelected
|
||||
? colorScheme.primary
|
||||
: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
link.name,
|
||||
style: textTheme.bodyMedium?.copyWith(
|
||||
color:
|
||||
isSelected ? colorScheme.primary : colorScheme.onSurface,
|
||||
fontWeight: isSelected ? FontWeight.w600 : null,
|
||||
),
|
||||
),
|
||||
if (isSettingsMode)
|
||||
Text(
|
||||
link.isNewTab ? 'Opens in new tab' : 'Opens in iframe',
|
||||
style: textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.outline,
|
||||
fontSize: 11,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// New tab indicator (normal mode)
|
||||
if (!isSettingsMode && link.isNewTab)
|
||||
Icon(
|
||||
Icons.open_in_new,
|
||||
size: 14,
|
||||
color: colorScheme.outline,
|
||||
),
|
||||
// Overflow menu (settings mode)
|
||||
if (isSettingsMode)
|
||||
PopupMenuButton<String>(
|
||||
icon: Icon(
|
||||
Icons.more_vert,
|
||||
size: 18,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
padding: EdgeInsets.zero,
|
||||
itemBuilder: (context) => [
|
||||
const PopupMenuItem(
|
||||
value: 'edit',
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.edit, size: 18),
|
||||
SizedBox(width: 8),
|
||||
Text('Edit'),
|
||||
],
|
||||
),
|
||||
),
|
||||
const PopupMenuItem(
|
||||
value: 'delete',
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.delete, size: 18),
|
||||
SizedBox(width: 8),
|
||||
Text('Delete'),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
onSelected: (value) {
|
||||
switch (value) {
|
||||
case 'edit':
|
||||
onEdit?.call();
|
||||
case 'delete':
|
||||
onDelete?.call();
|
||||
}
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Error state widget.
|
||||
class _ErrorState extends StatelessWidget {
|
||||
const _ErrorState({
|
||||
required this.error,
|
||||
required this.onRetry,
|
||||
});
|
||||
|
||||
final Object error;
|
||||
final VoidCallback onRetry;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.error_outline,
|
||||
color: colorScheme.error,
|
||||
size: 32,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Failed to load links',
|
||||
style: TextStyle(color: colorScheme.error),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
TextButton.icon(
|
||||
onPressed: onRetry,
|
||||
icon: const Icon(Icons.refresh, size: 16),
|
||||
label: const Text('Retry'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,10 @@
|
||||
import 'package:flutter/foundation.dart' show kIsWeb;
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
import 'package:tatlock_ui/core/auth/auth_provider.dart';
|
||||
import 'package:tatlock_ui/core/config/app_config.dart';
|
||||
import 'package:tatlock_ui/features/control_room/router.dart';
|
||||
import 'package:tatlock_ui/features/front_hall/presentation/pages/front_hall_page.dart';
|
||||
import 'package:tatlock_ui/features/security/router.dart';
|
||||
@@ -13,15 +17,46 @@ abstract class AppRoutes {
|
||||
static const frontHall = '/';
|
||||
static const parlor = '/parlor';
|
||||
static const settings = '/settings';
|
||||
static const login = '/login';
|
||||
}
|
||||
|
||||
/// Provides the GoRouter instance.
|
||||
@riverpod
|
||||
GoRouter appRouter(Ref ref) {
|
||||
final authState = ref.watch(authProvider);
|
||||
|
||||
return GoRouter(
|
||||
initialLocation: AppRoutes.frontHall,
|
||||
debugLogDiagnostics: true,
|
||||
redirect: (context, state) {
|
||||
// No auth required in LAN mode
|
||||
if (!AppConfig.requiresAuth) {
|
||||
return null;
|
||||
}
|
||||
|
||||
final isAuthenticated = authState.value?.isAuthenticated ?? false;
|
||||
final isLoginRoute = state.matchedLocation == AppRoutes.login;
|
||||
|
||||
// If not authenticated, redirect to login (except if already on login)
|
||||
if (!isAuthenticated && !isLoginRoute) {
|
||||
return AppRoutes.login;
|
||||
}
|
||||
|
||||
// If authenticated and on login page, redirect to home
|
||||
if (isAuthenticated && isLoginRoute) {
|
||||
return AppRoutes.frontHall;
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
routes: [
|
||||
// Login route (outside shell - no app scaffold)
|
||||
GoRoute(
|
||||
path: AppRoutes.login,
|
||||
name: 'login',
|
||||
builder: (context, state) => const _LoginPage(),
|
||||
),
|
||||
// Main app routes (inside shell with app scaffold)
|
||||
ShellRoute(
|
||||
builder: (context, state, child) => AppScaffold(child: child),
|
||||
routes: [
|
||||
@@ -84,3 +119,156 @@ class _PlaceholderPage extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Login page displayed when user is not authenticated.
|
||||
class _LoginPage extends ConsumerWidget {
|
||||
const _LoginPage();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final authAsync = ref.watch(authProvider);
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 400),
|
||||
child: Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.home_work_outlined,
|
||||
size: 64,
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
Text(
|
||||
'Tatlock Estate',
|
||||
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Sign in to access the estate management system',
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
authAsync.when(
|
||||
data: (_) => _buildSignInContent(context, ref),
|
||||
loading: () => const Column(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 24,
|
||||
height: 24,
|
||||
child: CircularProgressIndicator(strokeWidth: 2),
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
Text('Checking authentication...'),
|
||||
],
|
||||
),
|
||||
error: (error, _) => _buildErrorContent(context, ref, error),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSignInContent(BuildContext context, WidgetRef ref) {
|
||||
if (kIsWeb) {
|
||||
// Web: User needs to access via authenticated proxy
|
||||
return Column(
|
||||
children: [
|
||||
Text(
|
||||
'Please access Tatlock via the authenticated URL.\n'
|
||||
'If you see this page, the proxy authentication may not be configured.',
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
OutlinedButton.icon(
|
||||
onPressed: () => ref.read(authProvider.notifier).signIn(),
|
||||
icon: const Icon(Icons.refresh),
|
||||
label: const Text('Retry'),
|
||||
style: OutlinedButton.styleFrom(
|
||||
minimumSize: const Size(double.infinity, 48),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
// Mobile: Show sign in button
|
||||
return FilledButton.icon(
|
||||
onPressed: () => ref.read(authProvider.notifier).signIn(),
|
||||
icon: const Icon(Icons.login),
|
||||
label: const Text('Sign in with Authentik'),
|
||||
style: FilledButton.styleFrom(
|
||||
minimumSize: const Size(double.infinity, 48),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildErrorContent(BuildContext context, WidgetRef ref, Object error) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Column(
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.errorContainer,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.error_outline, color: colorScheme.onErrorContainer),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Text(
|
||||
_formatError(error),
|
||||
style: TextStyle(color: colorScheme.onErrorContainer),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
OutlinedButton.icon(
|
||||
onPressed: () => ref.read(authProvider.notifier).signIn(),
|
||||
icon: const Icon(Icons.refresh),
|
||||
label: const Text('Try again'),
|
||||
style: OutlinedButton.styleFrom(
|
||||
minimumSize: const Size(double.infinity, 48),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
String _formatError(Object error) {
|
||||
final message = error.toString();
|
||||
if (message.contains('user_cancelled')) {
|
||||
return 'Sign in was cancelled';
|
||||
}
|
||||
if (message.contains('network')) {
|
||||
return 'Network error. Please check your connection.';
|
||||
}
|
||||
if (message.contains('authenticated URL')) {
|
||||
return 'Not authenticated - please access via the authenticated URL';
|
||||
}
|
||||
return 'Authentication failed. Please try again.';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,9 +103,19 @@ class DataGrid<T> extends ConsumerWidget {
|
||||
DataGridState<T> state,
|
||||
DataGridController<T> controller,
|
||||
) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Container(
|
||||
height: 56,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainerHighest,
|
||||
border: Border(
|
||||
bottom: BorderSide(color: colorScheme.outlineVariant),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
if (config.enableSearch)
|
||||
DataGridSearchBar(
|
||||
|
||||
@@ -35,6 +35,9 @@ class DataGridController<T> extends StateNotifier<DataGridState<T>> {
|
||||
/// Debounce timer for search.
|
||||
Timer? _searchDebounce;
|
||||
|
||||
/// All items before local filtering (for local search).
|
||||
List<T> _allItems = [];
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_searchDebounce?.cancel();
|
||||
@@ -57,16 +60,21 @@ class DataGridController<T> extends StateNotifier<DataGridState<T>> {
|
||||
final (offset, limit) = _getPaginationParams();
|
||||
|
||||
final result = await source.fetch(
|
||||
searchQuery: state.searchQuery.isEmpty ? null : state.searchQuery,
|
||||
sortField: sortField,
|
||||
sortDescending: state.sortDescending,
|
||||
offset: offset,
|
||||
limit: limit,
|
||||
);
|
||||
|
||||
// Store all items for local filtering
|
||||
_allItems = result.items;
|
||||
|
||||
// Apply local filter if search query exists
|
||||
final filteredItems = _applyLocalFilter(_allItems);
|
||||
|
||||
state = state.copyWith(
|
||||
items: result.items,
|
||||
totalCount: result.totalCount,
|
||||
items: filteredItems,
|
||||
totalCount: filteredItems.length,
|
||||
hasMore: result.hasMore,
|
||||
isLoading: false,
|
||||
isInitialLoad: false,
|
||||
@@ -82,6 +90,26 @@ class DataGridController<T> extends StateNotifier<DataGridState<T>> {
|
||||
}
|
||||
}
|
||||
|
||||
/// Applies local filtering based on search query.
|
||||
List<T> _applyLocalFilter(List<T> items) {
|
||||
if (state.searchQuery.isEmpty) return items;
|
||||
|
||||
final query = state.searchQuery.toLowerCase();
|
||||
|
||||
return items.where((item) {
|
||||
// Check all searchable columns
|
||||
for (final column in config.columns) {
|
||||
if (column.searchable) {
|
||||
final value = column.valueBuilder(item);
|
||||
if (value.toLowerCase().contains(query)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}).toList();
|
||||
}
|
||||
|
||||
/// Gets pagination parameters based on data mode.
|
||||
(int?, int?) _getPaginationParams() {
|
||||
return switch (config.dataMode) {
|
||||
@@ -97,13 +125,13 @@ class DataGridController<T> extends StateNotifier<DataGridState<T>> {
|
||||
/// Refreshes the grid data.
|
||||
Future<void> refresh() => _load(refresh: true);
|
||||
|
||||
/// Sets the search query with debouncing.
|
||||
/// Sets the search query with debouncing (filters locally).
|
||||
void search(String query) {
|
||||
_searchDebounce?.cancel();
|
||||
_searchDebounce = Timer(const Duration(milliseconds: 300), () {
|
||||
_searchDebounce = Timer(const Duration(milliseconds: 150), () {
|
||||
if (state.searchQuery != query) {
|
||||
state = state.copyWith(searchQuery: query, currentPage: 0);
|
||||
_load(refresh: true);
|
||||
_applyFilterAndUpdateState();
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -113,10 +141,19 @@ class DataGridController<T> extends StateNotifier<DataGridState<T>> {
|
||||
_searchDebounce?.cancel();
|
||||
if (state.searchQuery.isNotEmpty) {
|
||||
state = state.copyWith(searchQuery: '', currentPage: 0);
|
||||
_load(refresh: true);
|
||||
_applyFilterAndUpdateState();
|
||||
}
|
||||
}
|
||||
|
||||
/// Applies local filter and updates state with filtered items.
|
||||
void _applyFilterAndUpdateState() {
|
||||
final filteredItems = _applyLocalFilter(_allItems);
|
||||
state = state.copyWith(
|
||||
items: filteredItems,
|
||||
totalCount: filteredItems.length,
|
||||
);
|
||||
}
|
||||
|
||||
/// Sorts by the given column index.
|
||||
void sortBy(int columnIndex) {
|
||||
final column = config.columns[columnIndex];
|
||||
|
||||
@@ -40,14 +40,16 @@ class _DataGridSearchBarState extends State<DataGridSearchBar> {
|
||||
|
||||
return SizedBox(
|
||||
width: 300,
|
||||
height: 36,
|
||||
child: TextField(
|
||||
controller: _controller,
|
||||
style: const TextStyle(fontSize: 14),
|
||||
decoration: InputDecoration(
|
||||
hintText: widget.hintText,
|
||||
prefixIcon: const Icon(Icons.search),
|
||||
prefixIcon: const Icon(Icons.search, size: 20),
|
||||
suffixIcon: _controller.text.isNotEmpty
|
||||
? IconButton(
|
||||
icon: const Icon(Icons.clear),
|
||||
icon: const Icon(Icons.clear, size: 18),
|
||||
onPressed: () {
|
||||
_controller.clear();
|
||||
widget.onClear();
|
||||
@@ -56,14 +58,22 @@ class _DataGridSearchBarState extends State<DataGridSearchBar> {
|
||||
: null,
|
||||
isDense: true,
|
||||
filled: true,
|
||||
fillColor: colorScheme.surfaceContainerHighest,
|
||||
fillColor: colorScheme.surface,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: BorderSide.none,
|
||||
borderSide: BorderSide(color: colorScheme.outlineVariant),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: BorderSide(color: colorScheme.outlineVariant),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: BorderSide(color: colorScheme.primary),
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 12,
|
||||
horizontal: 12,
|
||||
vertical: 8,
|
||||
),
|
||||
),
|
||||
onChanged: (value) {
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// Pastel stoplight colors for consistent status indication across the app.
|
||||
///
|
||||
/// Use these colors for any green/yellow/red status flows:
|
||||
/// - System stats (CPU, RAM, disk usage)
|
||||
/// - Air quality levels
|
||||
/// - Container health status
|
||||
/// - Any other threshold-based indicators
|
||||
abstract final class StoplightColors {
|
||||
/// Good/healthy/low usage (0-50%)
|
||||
static const green = Color(0xFF81C784);
|
||||
|
||||
/// Warning/moderate/medium usage (51-75%)
|
||||
static const orange = Color(0xFFFFB74D);
|
||||
|
||||
/// Critical/unhealthy/high usage (76-100%)
|
||||
static const red = Color(0xFFE57373);
|
||||
|
||||
/// Returns appropriate color based on percentage (0-100).
|
||||
///
|
||||
/// - ≤50%: green
|
||||
/// - 51-75%: orange
|
||||
/// - >75%: red
|
||||
static Color forPercent(double percent) {
|
||||
if (percent <= 50) return green;
|
||||
if (percent <= 75) return orange;
|
||||
return red;
|
||||
}
|
||||
|
||||
/// Returns appropriate color based on value (0.0-1.0).
|
||||
///
|
||||
/// - ≤0.5: green
|
||||
/// - 0.51-0.75: orange
|
||||
/// - >0.75: red
|
||||
static Color forValue(double value) => forPercent(value * 100);
|
||||
}
|
||||
@@ -0,0 +1,317 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:tatlock_ui/shared/theme/stoplight_colors.dart';
|
||||
|
||||
/// Air Quality Index widget displaying current AQI.
|
||||
///
|
||||
/// Currently uses mock data. Will be connected to air quality API in future.
|
||||
class AirQualityWidget extends StatelessWidget {
|
||||
const AirQualityWidget({
|
||||
super.key,
|
||||
this.data,
|
||||
this.compact = false,
|
||||
});
|
||||
|
||||
/// Air quality data to display. Uses mock data if null.
|
||||
final AirQualityData? data;
|
||||
|
||||
/// Whether to use compact layout.
|
||||
final bool compact;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final aqi = data ?? AirQualityData.mock();
|
||||
|
||||
if (compact) {
|
||||
return _buildCompact(context, colorScheme, aqi);
|
||||
}
|
||||
|
||||
return Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Header
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.air,
|
||||
size: 20,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'Air Quality',
|
||||
style: Theme.of(context).textTheme.titleSmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// AQI Display
|
||||
Row(
|
||||
children: [
|
||||
// AQI number with colored background
|
||||
Container(
|
||||
width: 64,
|
||||
height: 64,
|
||||
decoration: BoxDecoration(
|
||||
color: aqi.level.color.withValues(alpha: 0.15),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(
|
||||
color: aqi.level.color.withValues(alpha: 0.3),
|
||||
width: 2,
|
||||
),
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
'${aqi.index}',
|
||||
style:
|
||||
Theme.of(context).textTheme.headlineMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: aqi.level.color,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
|
||||
// Level info
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
aqi.level.label,
|
||||
style:
|
||||
Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: aqi.level.color,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
aqi.level.description,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Pollutants
|
||||
if (aqi.pollutants.isNotEmpty) ...[
|
||||
const SizedBox(height: 16),
|
||||
const Divider(height: 1),
|
||||
const SizedBox(height: 12),
|
||||
Wrap(
|
||||
spacing: 16,
|
||||
runSpacing: 8,
|
||||
children: aqi.pollutants
|
||||
.map((p) => _PollutantChip(pollutant: p))
|
||||
.toList(),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCompact(
|
||||
BuildContext context,
|
||||
ColorScheme colorScheme,
|
||||
AirQualityData aqi,
|
||||
) {
|
||||
return Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
width: 32,
|
||||
height: 32,
|
||||
decoration: BoxDecoration(
|
||||
color: aqi.level.color.withValues(alpha: 0.15),
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
'${aqi.index}',
|
||||
style: Theme.of(context).textTheme.titleSmall?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: aqi.level.color,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'AQI',
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _PollutantChip extends StatelessWidget {
|
||||
const _PollutantChip({required this.pollutant});
|
||||
|
||||
final Pollutant pollutant;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
pollutant.name,
|
||||
style: Theme.of(context).textTheme.labelSmall?.copyWith(
|
||||
color: colorScheme.outline,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
'${pollutant.value.round()} ${pollutant.unit}',
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Air Quality Index levels based on US EPA standard.
|
||||
enum AqiLevel {
|
||||
good(
|
||||
label: 'Good',
|
||||
description: 'Air quality is satisfactory',
|
||||
color: StoplightColors.green,
|
||||
minIndex: 0,
|
||||
maxIndex: 50,
|
||||
),
|
||||
moderate(
|
||||
label: 'Moderate',
|
||||
description: 'Acceptable for most people',
|
||||
color: StoplightColors.orange,
|
||||
minIndex: 51,
|
||||
maxIndex: 100,
|
||||
),
|
||||
unhealthySensitive(
|
||||
label: 'Unhealthy for Sensitive',
|
||||
description: 'May affect sensitive groups',
|
||||
color: StoplightColors.orange,
|
||||
minIndex: 101,
|
||||
maxIndex: 150,
|
||||
),
|
||||
unhealthy(
|
||||
label: 'Unhealthy',
|
||||
description: 'Health effects for everyone',
|
||||
color: StoplightColors.red,
|
||||
minIndex: 151,
|
||||
maxIndex: 200,
|
||||
),
|
||||
veryUnhealthy(
|
||||
label: 'Very Unhealthy',
|
||||
description: 'Serious health effects',
|
||||
color: Color(0xFF8B008B),
|
||||
minIndex: 201,
|
||||
maxIndex: 300,
|
||||
),
|
||||
hazardous(
|
||||
label: 'Hazardous',
|
||||
description: 'Health emergency conditions',
|
||||
color: Color(0xFF800000),
|
||||
minIndex: 301,
|
||||
maxIndex: 500,
|
||||
);
|
||||
|
||||
const AqiLevel({
|
||||
required this.label,
|
||||
required this.description,
|
||||
required this.color,
|
||||
required this.minIndex,
|
||||
required this.maxIndex,
|
||||
});
|
||||
|
||||
final String label;
|
||||
final String description;
|
||||
final Color color;
|
||||
final int minIndex;
|
||||
final int maxIndex;
|
||||
|
||||
static AqiLevel fromIndex(int index) {
|
||||
for (final level in AqiLevel.values) {
|
||||
if (index >= level.minIndex && index <= level.maxIndex) {
|
||||
return level;
|
||||
}
|
||||
}
|
||||
return AqiLevel.hazardous;
|
||||
}
|
||||
}
|
||||
|
||||
/// Pollutant data.
|
||||
class Pollutant {
|
||||
const Pollutant({
|
||||
required this.name,
|
||||
required this.value,
|
||||
required this.unit,
|
||||
});
|
||||
|
||||
final String name;
|
||||
final double value;
|
||||
final String unit;
|
||||
}
|
||||
|
||||
/// Air quality data model.
|
||||
class AirQualityData {
|
||||
const AirQualityData({
|
||||
required this.index,
|
||||
required this.level,
|
||||
this.pollutants = const [],
|
||||
});
|
||||
|
||||
final int index;
|
||||
final AqiLevel level;
|
||||
final List<Pollutant> pollutants;
|
||||
|
||||
/// Create from index value.
|
||||
factory AirQualityData.fromIndex(int index, {List<Pollutant>? pollutants}) {
|
||||
return AirQualityData(
|
||||
index: index,
|
||||
level: AqiLevel.fromIndex(index),
|
||||
pollutants: pollutants ?? const [],
|
||||
);
|
||||
}
|
||||
|
||||
/// Mock air quality data for development.
|
||||
factory AirQualityData.mock() {
|
||||
return const AirQualityData(
|
||||
index: 42,
|
||||
level: AqiLevel.good,
|
||||
pollutants: [
|
||||
Pollutant(name: 'PM2.5', value: 8.5, unit: 'µg/m³'),
|
||||
Pollutant(name: 'PM10', value: 15, unit: 'µg/m³'),
|
||||
Pollutant(name: 'O₃', value: 32, unit: 'ppb'),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,224 @@
|
||||
import 'dart:math' as math;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// A speedometer-style gauge widget for displaying percentage values.
|
||||
///
|
||||
/// Commonly used for system stats like CPU, Memory, Disk usage.
|
||||
class GaugeWidget extends StatelessWidget {
|
||||
const GaugeWidget({
|
||||
super.key,
|
||||
required this.value,
|
||||
required this.label,
|
||||
this.size = 120,
|
||||
this.strokeWidth = 10,
|
||||
this.color,
|
||||
this.backgroundColor,
|
||||
this.showPercentage = true,
|
||||
this.icon,
|
||||
});
|
||||
|
||||
/// The value to display (0.0 - 1.0).
|
||||
final double value;
|
||||
|
||||
/// Label displayed below the gauge.
|
||||
final String label;
|
||||
|
||||
/// Size of the gauge widget.
|
||||
final double size;
|
||||
|
||||
/// Width of the gauge arc stroke.
|
||||
final double strokeWidth;
|
||||
|
||||
/// Color of the filled arc. Uses primary color if not specified.
|
||||
final Color? color;
|
||||
|
||||
/// Color of the background arc. Uses surfaceVariant if not specified.
|
||||
final Color? backgroundColor;
|
||||
|
||||
/// Whether to show the percentage text in the center.
|
||||
final bool showPercentage;
|
||||
|
||||
/// Optional icon to show above the percentage.
|
||||
final IconData? icon;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final effectiveColor = color ?? colorScheme.primary;
|
||||
final effectiveBackgroundColor =
|
||||
backgroundColor ?? colorScheme.surfaceContainerHighest;
|
||||
|
||||
// Clamp value between 0 and 1
|
||||
final clampedValue = value.clamp(0.0, 1.0);
|
||||
|
||||
// Height is smaller since we only draw half circle
|
||||
final gaugeHeight = size * 0.6;
|
||||
final iconSpace = icon != null ? size * 0.36 : 0.0;
|
||||
|
||||
return SizedBox(
|
||||
width: size,
|
||||
height: gaugeHeight + 32 + iconSpace, // Space for label + icon
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: size,
|
||||
height: gaugeHeight,
|
||||
child: CustomPaint(
|
||||
painter: _GaugePainter(
|
||||
value: clampedValue,
|
||||
color: effectiveColor,
|
||||
backgroundColor: effectiveBackgroundColor,
|
||||
strokeWidth: strokeWidth,
|
||||
),
|
||||
child: Align(
|
||||
alignment: const Alignment(0, 0.6),
|
||||
child: showPercentage
|
||||
? Text(
|
||||
'${(clampedValue * 100).round()}%',
|
||||
style: Theme.of(context).textTheme.titleLarge?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: size * 0.2,
|
||||
),
|
||||
)
|
||||
: const SizedBox.shrink(),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
label,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
if (icon != null) ...[
|
||||
const SizedBox(height: 8),
|
||||
Icon(
|
||||
icon,
|
||||
size: size * 0.28,
|
||||
color: effectiveColor,
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _GaugePainter extends CustomPainter {
|
||||
_GaugePainter({
|
||||
required this.value,
|
||||
required this.color,
|
||||
required this.backgroundColor,
|
||||
required this.strokeWidth,
|
||||
});
|
||||
|
||||
final double value;
|
||||
final Color color;
|
||||
final Color backgroundColor;
|
||||
final double strokeWidth;
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
// Center at bottom of widget for speedometer style
|
||||
final center = Offset(size.width / 2, size.height);
|
||||
final radius = (size.width - strokeWidth) / 2;
|
||||
|
||||
// Speedometer arc: starts from left (180°) and sweeps 180° to right
|
||||
const startAngle = math.pi; // 180 degrees (left side)
|
||||
const sweepAngle = math.pi; // 180 degrees sweep (semicircle)
|
||||
|
||||
// Background arc
|
||||
final backgroundPaint = Paint()
|
||||
..color = backgroundColor
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = strokeWidth
|
||||
..strokeCap = StrokeCap.round;
|
||||
|
||||
canvas.drawArc(
|
||||
Rect.fromCircle(center: center, radius: radius),
|
||||
startAngle,
|
||||
sweepAngle,
|
||||
false,
|
||||
backgroundPaint,
|
||||
);
|
||||
|
||||
// Value arc
|
||||
if (value > 0) {
|
||||
final valuePaint = Paint()
|
||||
..color = color
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = strokeWidth
|
||||
..strokeCap = StrokeCap.round;
|
||||
|
||||
canvas.drawArc(
|
||||
Rect.fromCircle(center: center, radius: radius),
|
||||
startAngle,
|
||||
sweepAngle * value,
|
||||
false,
|
||||
valuePaint,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(_GaugePainter oldDelegate) {
|
||||
return oldDelegate.value != value ||
|
||||
oldDelegate.color != color ||
|
||||
oldDelegate.backgroundColor != backgroundColor ||
|
||||
oldDelegate.strokeWidth != strokeWidth;
|
||||
}
|
||||
}
|
||||
|
||||
/// A row of gauge widgets with consistent sizing.
|
||||
class GaugeRow extends StatelessWidget {
|
||||
const GaugeRow({
|
||||
super.key,
|
||||
required this.gauges,
|
||||
this.gaugeSize = 100,
|
||||
});
|
||||
|
||||
final List<GaugeData> gauges;
|
||||
final double gaugeSize;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Wrap(
|
||||
spacing: 24,
|
||||
runSpacing: 16,
|
||||
alignment: WrapAlignment.center,
|
||||
children: gauges
|
||||
.map(
|
||||
(data) => GaugeWidget(
|
||||
value: data.value,
|
||||
label: data.label,
|
||||
size: gaugeSize,
|
||||
strokeWidth: gaugeSize * 0.1,
|
||||
color: data.color,
|
||||
icon: data.icon,
|
||||
),
|
||||
)
|
||||
.toList(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Data class for gauge configuration.
|
||||
class GaugeData {
|
||||
const GaugeData({
|
||||
required this.value,
|
||||
required this.label,
|
||||
this.color,
|
||||
this.icon,
|
||||
});
|
||||
|
||||
final double value;
|
||||
final String label;
|
||||
final Color? color;
|
||||
final IconData? icon;
|
||||
}
|
||||
@@ -0,0 +1,465 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// A widget that displays a grid of Material icons for selection.
|
||||
///
|
||||
/// Shows a button that opens a dialog with available icons.
|
||||
class IconPicker extends StatelessWidget {
|
||||
const IconPicker({
|
||||
super.key,
|
||||
required this.selectedIcon,
|
||||
required this.onChanged,
|
||||
this.label = 'Icon',
|
||||
});
|
||||
|
||||
/// Currently selected icon name.
|
||||
final String selectedIcon;
|
||||
|
||||
/// Callback when an icon is selected.
|
||||
final ValueChanged<String> onChanged;
|
||||
|
||||
/// Label for the field.
|
||||
final String label;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final textTheme = Theme.of(context).textTheme;
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
label,
|
||||
style: textTheme.labelMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
InkWell(
|
||||
onTap: () => _showIconPicker(context),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(color: colorScheme.outline),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 40,
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.primaryContainer,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Icon(
|
||||
getIconData(selectedIcon),
|
||||
color: colorScheme.onPrimaryContainer,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Text(
|
||||
selectedIcon,
|
||||
style: textTheme.bodyLarge,
|
||||
),
|
||||
),
|
||||
Icon(
|
||||
Icons.arrow_drop_down,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> _showIconPicker(BuildContext context) async {
|
||||
final result = await showDialog<String>(
|
||||
context: context,
|
||||
builder: (context) => IconPickerDialog(
|
||||
selectedIcon: selectedIcon,
|
||||
onSelected: (icon) => Navigator.of(context).pop(icon),
|
||||
),
|
||||
);
|
||||
|
||||
if (result != null) {
|
||||
onChanged(result);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Dialog that displays a grid of icons.
|
||||
class IconPickerDialog extends StatefulWidget {
|
||||
const IconPickerDialog({
|
||||
super.key,
|
||||
required this.selectedIcon,
|
||||
required this.onSelected,
|
||||
});
|
||||
|
||||
final String selectedIcon;
|
||||
final ValueChanged<String> onSelected;
|
||||
|
||||
@override
|
||||
State<IconPickerDialog> createState() => _IconPickerDialogState();
|
||||
}
|
||||
|
||||
class _IconPickerDialogState extends State<IconPickerDialog> {
|
||||
String _searchQuery = '';
|
||||
|
||||
List<String> get _filteredIcons {
|
||||
if (_searchQuery.isEmpty) {
|
||||
return availableIcons;
|
||||
}
|
||||
return availableIcons
|
||||
.where((icon) => icon.toLowerCase().contains(_searchQuery.toLowerCase()))
|
||||
.toList();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Dialog(
|
||||
child: Container(
|
||||
width: 400,
|
||||
height: 500,
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Select Icon',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
TextField(
|
||||
decoration: const InputDecoration(
|
||||
hintText: 'Search icons...',
|
||||
prefixIcon: Icon(Icons.search),
|
||||
border: OutlineInputBorder(),
|
||||
isDense: true,
|
||||
),
|
||||
onChanged: (value) => setState(() => _searchQuery = value),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Expanded(
|
||||
child: GridView.builder(
|
||||
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: 5,
|
||||
mainAxisSpacing: 8,
|
||||
crossAxisSpacing: 8,
|
||||
),
|
||||
itemCount: _filteredIcons.length,
|
||||
itemBuilder: (context, index) {
|
||||
final iconName = _filteredIcons[index];
|
||||
final isSelected = iconName == widget.selectedIcon;
|
||||
|
||||
return InkWell(
|
||||
onTap: () => widget.onSelected(iconName),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: isSelected
|
||||
? colorScheme.primaryContainer
|
||||
: colorScheme.surfaceContainerHighest,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: isSelected
|
||||
? Border.all(color: colorScheme.primary, width: 2)
|
||||
: null,
|
||||
),
|
||||
child: Tooltip(
|
||||
message: iconName,
|
||||
child: Icon(
|
||||
getIconData(iconName),
|
||||
color: isSelected
|
||||
? colorScheme.onPrimaryContainer
|
||||
: colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Common icons available for selection.
|
||||
const List<String> availableIcons = [
|
||||
'home',
|
||||
'settings',
|
||||
'search',
|
||||
'menu',
|
||||
'add',
|
||||
'remove',
|
||||
'close',
|
||||
'check',
|
||||
'edit',
|
||||
'delete',
|
||||
'favorite',
|
||||
'star',
|
||||
'movie',
|
||||
'music_note',
|
||||
'photo',
|
||||
'videocam',
|
||||
'camera',
|
||||
'mic',
|
||||
'volume_up',
|
||||
'play_arrow',
|
||||
'pause',
|
||||
'stop',
|
||||
'skip_next',
|
||||
'skip_previous',
|
||||
'folder',
|
||||
'file_copy',
|
||||
'cloud',
|
||||
'cloud_download',
|
||||
'cloud_upload',
|
||||
'download',
|
||||
'upload',
|
||||
'share',
|
||||
'link',
|
||||
'public',
|
||||
'language',
|
||||
'dns',
|
||||
'storage',
|
||||
'memory',
|
||||
'code',
|
||||
'terminal',
|
||||
'bug_report',
|
||||
'api',
|
||||
'http',
|
||||
'vpn_key',
|
||||
'lock',
|
||||
'lock_open',
|
||||
'security',
|
||||
'verified_user',
|
||||
'admin_panel_settings',
|
||||
'monitor',
|
||||
'monitoring',
|
||||
'analytics',
|
||||
'dashboard',
|
||||
'speed',
|
||||
'timer',
|
||||
'schedule',
|
||||
'calendar_today',
|
||||
'event',
|
||||
'notifications',
|
||||
'email',
|
||||
'message',
|
||||
'chat',
|
||||
'forum',
|
||||
'person',
|
||||
'people',
|
||||
'group',
|
||||
'account_circle',
|
||||
'shopping_cart',
|
||||
'credit_card',
|
||||
'attach_money',
|
||||
'trending_up',
|
||||
'trending_down',
|
||||
'wifi',
|
||||
'bluetooth',
|
||||
'router',
|
||||
'devices',
|
||||
'computer',
|
||||
'laptop',
|
||||
'phone_android',
|
||||
'tablet',
|
||||
'watch',
|
||||
'tv',
|
||||
'games',
|
||||
'videogame_asset',
|
||||
'sports_esports',
|
||||
'local_cafe',
|
||||
'local_dining',
|
||||
'restaurant',
|
||||
'directions_car',
|
||||
'flight',
|
||||
'hotel',
|
||||
'map',
|
||||
'place',
|
||||
'explore',
|
||||
'navigation',
|
||||
'book',
|
||||
'school',
|
||||
'science',
|
||||
'psychology',
|
||||
'work',
|
||||
'business',
|
||||
'apartment',
|
||||
'location_city',
|
||||
'eco',
|
||||
'water_drop',
|
||||
'air',
|
||||
'thermostat',
|
||||
'bolt',
|
||||
'light_mode',
|
||||
'dark_mode',
|
||||
'brightness_4',
|
||||
'palette',
|
||||
'brush',
|
||||
'format_paint',
|
||||
'extension',
|
||||
'widgets',
|
||||
'view_module',
|
||||
'grid_view',
|
||||
'list',
|
||||
'table_chart',
|
||||
'pie_chart',
|
||||
'bar_chart',
|
||||
'show_chart',
|
||||
'donut_large',
|
||||
'disc_full',
|
||||
];
|
||||
|
||||
/// Convert icon name string to IconData.
|
||||
IconData getIconData(String iconName) {
|
||||
const iconMap = <String, IconData>{
|
||||
'home': Icons.home,
|
||||
'settings': Icons.settings,
|
||||
'search': Icons.search,
|
||||
'menu': Icons.menu,
|
||||
'add': Icons.add,
|
||||
'remove': Icons.remove,
|
||||
'close': Icons.close,
|
||||
'check': Icons.check,
|
||||
'edit': Icons.edit,
|
||||
'delete': Icons.delete,
|
||||
'favorite': Icons.favorite,
|
||||
'star': Icons.star,
|
||||
'movie': Icons.movie,
|
||||
'music_note': Icons.music_note,
|
||||
'photo': Icons.photo,
|
||||
'videocam': Icons.videocam,
|
||||
'camera': Icons.camera,
|
||||
'mic': Icons.mic,
|
||||
'volume_up': Icons.volume_up,
|
||||
'play_arrow': Icons.play_arrow,
|
||||
'pause': Icons.pause,
|
||||
'stop': Icons.stop,
|
||||
'skip_next': Icons.skip_next,
|
||||
'skip_previous': Icons.skip_previous,
|
||||
'folder': Icons.folder,
|
||||
'file_copy': Icons.file_copy,
|
||||
'cloud': Icons.cloud,
|
||||
'cloud_download': Icons.cloud_download,
|
||||
'cloud_upload': Icons.cloud_upload,
|
||||
'download': Icons.download,
|
||||
'upload': Icons.upload,
|
||||
'share': Icons.share,
|
||||
'link': Icons.link,
|
||||
'public': Icons.public,
|
||||
'language': Icons.language,
|
||||
'dns': Icons.dns,
|
||||
'storage': Icons.storage,
|
||||
'memory': Icons.memory,
|
||||
'code': Icons.code,
|
||||
'terminal': Icons.terminal,
|
||||
'bug_report': Icons.bug_report,
|
||||
'api': Icons.api,
|
||||
'http': Icons.http,
|
||||
'vpn_key': Icons.vpn_key,
|
||||
'lock': Icons.lock,
|
||||
'lock_open': Icons.lock_open,
|
||||
'security': Icons.security,
|
||||
'verified_user': Icons.verified_user,
|
||||
'admin_panel_settings': Icons.admin_panel_settings,
|
||||
'monitor': Icons.monitor,
|
||||
'monitoring': Icons.monitor_heart,
|
||||
'analytics': Icons.analytics,
|
||||
'dashboard': Icons.dashboard,
|
||||
'speed': Icons.speed,
|
||||
'timer': Icons.timer,
|
||||
'schedule': Icons.schedule,
|
||||
'calendar_today': Icons.calendar_today,
|
||||
'event': Icons.event,
|
||||
'notifications': Icons.notifications,
|
||||
'email': Icons.email,
|
||||
'message': Icons.message,
|
||||
'chat': Icons.chat,
|
||||
'forum': Icons.forum,
|
||||
'person': Icons.person,
|
||||
'people': Icons.people,
|
||||
'group': Icons.group,
|
||||
'account_circle': Icons.account_circle,
|
||||
'shopping_cart': Icons.shopping_cart,
|
||||
'credit_card': Icons.credit_card,
|
||||
'attach_money': Icons.attach_money,
|
||||
'trending_up': Icons.trending_up,
|
||||
'trending_down': Icons.trending_down,
|
||||
'wifi': Icons.wifi,
|
||||
'bluetooth': Icons.bluetooth,
|
||||
'router': Icons.router,
|
||||
'devices': Icons.devices,
|
||||
'computer': Icons.computer,
|
||||
'laptop': Icons.laptop,
|
||||
'phone_android': Icons.phone_android,
|
||||
'tablet': Icons.tablet,
|
||||
'watch': Icons.watch,
|
||||
'tv': Icons.tv,
|
||||
'games': Icons.games,
|
||||
'videogame_asset': Icons.videogame_asset,
|
||||
'sports_esports': Icons.sports_esports,
|
||||
'local_cafe': Icons.local_cafe,
|
||||
'local_dining': Icons.local_dining,
|
||||
'restaurant': Icons.restaurant,
|
||||
'directions_car': Icons.directions_car,
|
||||
'flight': Icons.flight,
|
||||
'hotel': Icons.hotel,
|
||||
'map': Icons.map,
|
||||
'place': Icons.place,
|
||||
'explore': Icons.explore,
|
||||
'navigation': Icons.navigation,
|
||||
'book': Icons.book,
|
||||
'school': Icons.school,
|
||||
'science': Icons.science,
|
||||
'psychology': Icons.psychology,
|
||||
'work': Icons.work,
|
||||
'business': Icons.business,
|
||||
'apartment': Icons.apartment,
|
||||
'location_city': Icons.location_city,
|
||||
'eco': Icons.eco,
|
||||
'water_drop': Icons.water_drop,
|
||||
'air': Icons.air,
|
||||
'thermostat': Icons.thermostat,
|
||||
'bolt': Icons.bolt,
|
||||
'light_mode': Icons.light_mode,
|
||||
'dark_mode': Icons.dark_mode,
|
||||
'brightness_4': Icons.brightness_4,
|
||||
'palette': Icons.palette,
|
||||
'brush': Icons.brush,
|
||||
'format_paint': Icons.format_paint,
|
||||
'extension': Icons.extension,
|
||||
'widgets': Icons.widgets,
|
||||
'view_module': Icons.view_module,
|
||||
'grid_view': Icons.grid_view,
|
||||
'list': Icons.list,
|
||||
'table_chart': Icons.table_chart,
|
||||
'pie_chart': Icons.pie_chart,
|
||||
'bar_chart': Icons.bar_chart,
|
||||
'show_chart': Icons.show_chart,
|
||||
'donut_large': Icons.donut_large,
|
||||
'disc_full': Icons.disc_full,
|
||||
};
|
||||
|
||||
return iconMap[iconName] ?? Icons.help_outline;
|
||||
}
|
||||
@@ -0,0 +1,257 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// Weather widget displaying current conditions.
|
||||
///
|
||||
/// Currently uses mock data. Will be connected to weather API in future.
|
||||
class WeatherWidget extends StatelessWidget {
|
||||
const WeatherWidget({
|
||||
super.key,
|
||||
this.data,
|
||||
this.compact = false,
|
||||
});
|
||||
|
||||
/// Weather data to display. Uses mock data if null.
|
||||
final WeatherData? data;
|
||||
|
||||
/// Whether to use compact layout.
|
||||
final bool compact;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final weather = data ?? WeatherData.mock();
|
||||
|
||||
if (compact) {
|
||||
return _buildCompact(context, colorScheme, weather);
|
||||
}
|
||||
|
||||
return Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Header
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.wb_sunny_outlined,
|
||||
size: 20,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: Text(
|
||||
weather.location,
|
||||
style: Theme.of(context).textTheme.titleSmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Main weather display (matching AQI layout)
|
||||
Row(
|
||||
children: [
|
||||
// Weather icon in box (like AQI number box)
|
||||
Container(
|
||||
width: 64,
|
||||
height: 64,
|
||||
decoration: BoxDecoration(
|
||||
color: (weather.iconColor ?? colorScheme.primary)
|
||||
.withValues(alpha: 0.15),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(
|
||||
color: (weather.iconColor ?? colorScheme.primary)
|
||||
.withValues(alpha: 0.3),
|
||||
width: 2,
|
||||
),
|
||||
),
|
||||
child: Center(
|
||||
child: Icon(
|
||||
weather.icon,
|
||||
size: 32,
|
||||
color: weather.iconColor ?? colorScheme.primary,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
|
||||
// Temperature and condition
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'${weather.temperature.round()}°${weather.unit.symbol}',
|
||||
style:
|
||||
Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
weather.condition,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Details
|
||||
if (weather.humidity != null || weather.windSpeed != null) ...[
|
||||
const SizedBox(height: 16),
|
||||
const Divider(height: 1),
|
||||
const SizedBox(height: 12),
|
||||
Wrap(
|
||||
spacing: 16,
|
||||
runSpacing: 8,
|
||||
children: [
|
||||
if (weather.humidity != null)
|
||||
_DetailChip(
|
||||
label: 'Humidity',
|
||||
value: '${weather.humidity}%',
|
||||
),
|
||||
if (weather.windSpeed != null)
|
||||
_DetailChip(
|
||||
label: 'Wind',
|
||||
value: '${weather.windSpeed!.round()} ${weather.windUnit}',
|
||||
),
|
||||
if (weather.feelsLike != null)
|
||||
_DetailChip(
|
||||
label: 'Feels',
|
||||
value: '${weather.feelsLike!.round()}°${weather.unit.symbol}',
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCompact(
|
||||
BuildContext context,
|
||||
ColorScheme colorScheme,
|
||||
WeatherData weather,
|
||||
) {
|
||||
return Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
weather.icon,
|
||||
size: 24,
|
||||
color: weather.iconColor ?? colorScheme.primary,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'${weather.temperature.round()}°${weather.unit.symbol}',
|
||||
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _DetailChip extends StatelessWidget {
|
||||
const _DetailChip({
|
||||
required this.label,
|
||||
required this.value,
|
||||
});
|
||||
|
||||
final String label;
|
||||
final String value;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
label,
|
||||
style: Theme.of(context).textTheme.labelSmall?.copyWith(
|
||||
color: colorScheme.outline,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
value,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Temperature unit for weather display.
|
||||
enum TemperatureUnit {
|
||||
celsius('C'),
|
||||
fahrenheit('F');
|
||||
|
||||
const TemperatureUnit(this.symbol);
|
||||
final String symbol;
|
||||
}
|
||||
|
||||
/// Weather data model.
|
||||
class WeatherData {
|
||||
const WeatherData({
|
||||
required this.location,
|
||||
required this.temperature,
|
||||
required this.condition,
|
||||
required this.icon,
|
||||
this.unit = TemperatureUnit.celsius,
|
||||
this.humidity,
|
||||
this.windSpeed,
|
||||
this.windUnit = 'km/h',
|
||||
this.feelsLike,
|
||||
this.iconColor,
|
||||
});
|
||||
|
||||
final String location;
|
||||
final double temperature;
|
||||
final String condition;
|
||||
final IconData icon;
|
||||
final TemperatureUnit unit;
|
||||
final int? humidity;
|
||||
final double? windSpeed;
|
||||
final String windUnit;
|
||||
final double? feelsLike;
|
||||
final Color? iconColor;
|
||||
|
||||
/// Mock weather data for development.
|
||||
factory WeatherData.mock() {
|
||||
return const WeatherData(
|
||||
location: 'Rotterdam, NL',
|
||||
temperature: 8,
|
||||
condition: 'Partly Cloudy',
|
||||
icon: Icons.cloud,
|
||||
humidity: 72,
|
||||
windSpeed: 18,
|
||||
feelsLike: 5,
|
||||
iconColor: Colors.blueGrey,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
/// Shared widgets for Tatlock UI.
|
||||
library;
|
||||
|
||||
export 'air_quality_widget.dart';
|
||||
export 'gauge_widget.dart';
|
||||
export 'icon_picker.dart';
|
||||
export 'weather_widget.dart';
|
||||
+2
-2
@@ -7,7 +7,7 @@ class AppVersion {
|
||||
|
||||
static const String name = 'tatlock_ui';
|
||||
static const String description = 'Tatlock - a Home Lab AI';
|
||||
static const String version = '0.3.0';
|
||||
static const String version = '0.3.3';
|
||||
static const int buildNumber = 1;
|
||||
static const String fullVersion = '0.3.0+1';
|
||||
static const String fullVersion = '0.3.3+1';
|
||||
}
|
||||
|
||||
+5
-1
@@ -16,7 +16,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
|
||||
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
|
||||
# In Windows, build-name is used as the major, minor, and patch parts
|
||||
# of the product and file versions while build-number is used as the build suffix.
|
||||
version: 0.3.1+1
|
||||
version: 1.0.1+1
|
||||
|
||||
environment:
|
||||
sdk: ^3.10.4
|
||||
@@ -50,6 +50,9 @@ dependencies:
|
||||
# Storage
|
||||
shared_preferences: ^2.3.3
|
||||
|
||||
# Authentication (OIDC/OAuth2)
|
||||
flutter_appauth: ^8.0.0
|
||||
|
||||
# UI
|
||||
flex_color_scheme: ^8.1.0
|
||||
flutter_adaptive_scaffold: ^0.3.1
|
||||
@@ -64,6 +67,7 @@ dependencies:
|
||||
url_launcher: ^6.3.1
|
||||
flutter_code_editor: ^0.3.5
|
||||
highlight: ^0.7.0
|
||||
dio_web_adapter: ^2.1.1
|
||||
|
||||
dev_dependencies:
|
||||
flutter_test:
|
||||
|
||||
@@ -0,0 +1,280 @@
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'package:tatlock_ui/core/auth/auth_state.dart';
|
||||
import 'package:tatlock_ui/core/auth/permissions.dart';
|
||||
import 'package:tatlock_ui/core/auth/user_preferences.dart';
|
||||
|
||||
void main() {
|
||||
group('AuthState', () {
|
||||
group('default constructor', () {
|
||||
test('creates unauthenticated state by default', () {
|
||||
const state = AuthState();
|
||||
|
||||
expect(state.isAuthenticated, isFalse);
|
||||
expect(state.accessToken, isNull);
|
||||
expect(state.refreshToken, isNull);
|
||||
expect(state.expiresAt, isNull);
|
||||
expect(state.userId, isNull);
|
||||
expect(state.userName, isNull);
|
||||
expect(state.userEmail, isNull);
|
||||
expect(state.roles, isEmpty);
|
||||
expect(state.preferences, isNull);
|
||||
});
|
||||
});
|
||||
|
||||
group('authenticated state', () {
|
||||
test('stores all user data', () {
|
||||
final expiresAt = DateTime.now().add(const Duration(hours: 1));
|
||||
const preferences = UserPreferences(
|
||||
theme: 'dark',
|
||||
defaultRoom: 'kitchen',
|
||||
);
|
||||
|
||||
final state = AuthState(
|
||||
isAuthenticated: true,
|
||||
accessToken: 'access_token',
|
||||
refreshToken: 'refresh_token',
|
||||
expiresAt: expiresAt,
|
||||
userId: 'user-123',
|
||||
authentikId: 'authentik-456',
|
||||
userName: 'Test User',
|
||||
userEmail: 'test@example.com',
|
||||
avatarUrl: 'https://example.com/avatar.jpg',
|
||||
roles: const [
|
||||
Role(
|
||||
id: '1',
|
||||
name: 'admin.general:admin',
|
||||
domain: Domain.admin,
|
||||
category: 'general',
|
||||
action: Action.admin,
|
||||
),
|
||||
],
|
||||
preferences: preferences,
|
||||
);
|
||||
|
||||
expect(state.isAuthenticated, isTrue);
|
||||
expect(state.accessToken, equals('access_token'));
|
||||
expect(state.refreshToken, equals('refresh_token'));
|
||||
expect(state.expiresAt, equals(expiresAt));
|
||||
expect(state.userId, equals('user-123'));
|
||||
expect(state.authentikId, equals('authentik-456'));
|
||||
expect(state.userName, equals('Test User'));
|
||||
expect(state.userEmail, equals('test@example.com'));
|
||||
expect(state.avatarUrl, equals('https://example.com/avatar.jpg'));
|
||||
expect(state.roles.length, equals(1));
|
||||
expect(state.preferences?.theme, equals('dark'));
|
||||
});
|
||||
});
|
||||
|
||||
group('isTokenExpired', () {
|
||||
test('returns true when expiresAt is null', () {
|
||||
const state = AuthState(isAuthenticated: true);
|
||||
|
||||
expect(state.isTokenExpired, isTrue);
|
||||
});
|
||||
|
||||
test('returns true when token is expired', () {
|
||||
final expiredTime = DateTime.now().subtract(const Duration(hours: 1));
|
||||
final state = AuthState(
|
||||
isAuthenticated: true,
|
||||
expiresAt: expiredTime,
|
||||
);
|
||||
|
||||
expect(state.isTokenExpired, isTrue);
|
||||
});
|
||||
|
||||
test('returns true when token expires within 1 minute', () {
|
||||
final soonExpires = DateTime.now().add(const Duration(seconds: 30));
|
||||
final state = AuthState(
|
||||
isAuthenticated: true,
|
||||
expiresAt: soonExpires,
|
||||
);
|
||||
|
||||
expect(state.isTokenExpired, isTrue);
|
||||
});
|
||||
|
||||
test('returns false when token is valid', () {
|
||||
final futureExpires = DateTime.now().add(const Duration(hours: 1));
|
||||
final state = AuthState(
|
||||
isAuthenticated: true,
|
||||
expiresAt: futureExpires,
|
||||
);
|
||||
|
||||
expect(state.isTokenExpired, isFalse);
|
||||
});
|
||||
});
|
||||
|
||||
group('hasPermission', () {
|
||||
test('returns true when role grants permission', () {
|
||||
const state = AuthState(
|
||||
isAuthenticated: true,
|
||||
roles: [
|
||||
Role(
|
||||
id: '1',
|
||||
name: 'control-room.general:admin',
|
||||
domain: Domain.controlRoom,
|
||||
category: 'general',
|
||||
action: Action.admin,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
expect(state.hasPermission(Domain.controlRoom, Action.admin), isTrue);
|
||||
expect(state.hasPermission(Domain.controlRoom, Action.viewer), isTrue);
|
||||
});
|
||||
|
||||
test('returns false when no role grants permission', () {
|
||||
const state = AuthState(
|
||||
isAuthenticated: true,
|
||||
roles: [
|
||||
Role(
|
||||
id: '1',
|
||||
name: 'media.general:viewer',
|
||||
domain: Domain.media,
|
||||
category: 'general',
|
||||
action: Action.viewer,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
expect(state.hasPermission(Domain.controlRoom, Action.viewer), isFalse);
|
||||
expect(state.hasPermission(Domain.media, Action.admin), isFalse);
|
||||
});
|
||||
|
||||
test('respects category parameter', () {
|
||||
const state = AuthState(
|
||||
isAuthenticated: true,
|
||||
roles: [
|
||||
Role(
|
||||
id: '1',
|
||||
name: 'control-room.servers:admin',
|
||||
domain: Domain.controlRoom,
|
||||
category: 'servers',
|
||||
action: Action.admin,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
expect(
|
||||
state.hasPermission(
|
||||
Domain.controlRoom,
|
||||
Action.admin,
|
||||
category: 'servers',
|
||||
),
|
||||
isTrue,
|
||||
);
|
||||
expect(
|
||||
state.hasPermission(
|
||||
Domain.controlRoom,
|
||||
Action.admin,
|
||||
category: 'general',
|
||||
),
|
||||
isFalse,
|
||||
);
|
||||
});
|
||||
|
||||
test('returns false for empty roles list', () {
|
||||
const state = AuthState(isAuthenticated: true, roles: []);
|
||||
|
||||
expect(state.hasPermission(Domain.controlRoom, Action.viewer), isFalse);
|
||||
});
|
||||
});
|
||||
|
||||
group('isGlobalAdmin', () {
|
||||
test('returns true when user has admin.general:admin role', () {
|
||||
const state = AuthState(
|
||||
isAuthenticated: true,
|
||||
roles: [
|
||||
Role(
|
||||
id: '1',
|
||||
name: 'admin.general:admin',
|
||||
domain: Domain.admin,
|
||||
category: 'general',
|
||||
action: Action.admin,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
expect(state.isGlobalAdmin, isTrue);
|
||||
});
|
||||
|
||||
test('returns false when user lacks admin role', () {
|
||||
const state = AuthState(
|
||||
isAuthenticated: true,
|
||||
roles: [
|
||||
Role(
|
||||
id: '1',
|
||||
name: 'control-room.general:admin',
|
||||
domain: Domain.controlRoom,
|
||||
category: 'general',
|
||||
action: Action.admin,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
expect(state.isGlobalAdmin, isFalse);
|
||||
});
|
||||
|
||||
test('returns false for empty roles list', () {
|
||||
const state = AuthState(isAuthenticated: true, roles: []);
|
||||
|
||||
expect(state.isGlobalAdmin, isFalse);
|
||||
});
|
||||
});
|
||||
|
||||
group('copyWith', () {
|
||||
test('creates a copy with modified values', () {
|
||||
const original = AuthState(
|
||||
isAuthenticated: true,
|
||||
accessToken: 'old_token',
|
||||
userName: 'Original User',
|
||||
);
|
||||
|
||||
final updated = original.copyWith(
|
||||
accessToken: 'new_token',
|
||||
userName: 'Updated User',
|
||||
);
|
||||
|
||||
// Original unchanged
|
||||
expect(original.accessToken, equals('old_token'));
|
||||
expect(original.userName, equals('Original User'));
|
||||
|
||||
// Updated has new values
|
||||
expect(updated.accessToken, equals('new_token'));
|
||||
expect(updated.userName, equals('Updated User'));
|
||||
|
||||
// Preserved unchanged values
|
||||
expect(updated.isAuthenticated, equals(original.isAuthenticated));
|
||||
});
|
||||
});
|
||||
|
||||
group('equality', () {
|
||||
test('two identical states are equal', () {
|
||||
const state1 = AuthState(
|
||||
isAuthenticated: true,
|
||||
userId: 'user-123',
|
||||
userName: 'Test User',
|
||||
);
|
||||
const state2 = AuthState(
|
||||
isAuthenticated: true,
|
||||
userId: 'user-123',
|
||||
userName: 'Test User',
|
||||
);
|
||||
|
||||
expect(state1, equals(state2));
|
||||
});
|
||||
|
||||
test('different states are not equal', () {
|
||||
const state1 = AuthState(
|
||||
isAuthenticated: true,
|
||||
userId: 'user-123',
|
||||
);
|
||||
const state2 = AuthState(
|
||||
isAuthenticated: true,
|
||||
userId: 'user-456',
|
||||
);
|
||||
|
||||
expect(state1, isNot(equals(state2)));
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'package:tatlock_ui/core/auth/auth_state.dart';
|
||||
import 'package:tatlock_ui/core/auth/permissions.dart';
|
||||
|
||||
// Note: PermissionGate widget tests require complex provider mocking.
|
||||
// These unit tests verify the permission logic that PermissionGate relies on.
|
||||
// Widget integration tests should be done with a running app or container testing.
|
||||
|
||||
void main() {
|
||||
group('PermissionGate logic', () {
|
||||
test('hasPermission returns true when role grants permission', () {
|
||||
final state = AuthState(
|
||||
isAuthenticated: true,
|
||||
roles: const [
|
||||
Role(
|
||||
id: '1',
|
||||
name: 'control-room.general:admin',
|
||||
domain: Domain.controlRoom,
|
||||
category: 'general',
|
||||
action: Action.admin,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
expect(state.hasPermission(Domain.controlRoom, Action.admin), isTrue);
|
||||
expect(state.hasPermission(Domain.controlRoom, Action.viewer), isTrue);
|
||||
});
|
||||
|
||||
test('hasPermission returns false when role does not grant permission', () {
|
||||
final state = AuthState(
|
||||
isAuthenticated: true,
|
||||
roles: const [
|
||||
Role(
|
||||
id: '1',
|
||||
name: 'media.general:viewer',
|
||||
domain: Domain.media,
|
||||
category: 'general',
|
||||
action: Action.viewer,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
expect(state.hasPermission(Domain.controlRoom, Action.admin), isFalse);
|
||||
expect(state.hasPermission(Domain.media, Action.admin), isFalse);
|
||||
});
|
||||
|
||||
test('hasPermission returns false when not authenticated', () {
|
||||
const state = AuthState(isAuthenticated: false);
|
||||
|
||||
expect(state.hasPermission(Domain.controlRoom, Action.viewer), isFalse);
|
||||
});
|
||||
|
||||
test('hasPermission respects category', () {
|
||||
final state = AuthState(
|
||||
isAuthenticated: true,
|
||||
roles: const [
|
||||
Role(
|
||||
id: '1',
|
||||
name: 'control-room.servers:admin',
|
||||
domain: Domain.controlRoom,
|
||||
category: 'servers',
|
||||
action: Action.admin,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
expect(
|
||||
state.hasPermission(Domain.controlRoom, Action.admin, category: 'servers'),
|
||||
isTrue,
|
||||
);
|
||||
expect(
|
||||
state.hasPermission(Domain.controlRoom, Action.admin, category: 'general'),
|
||||
isFalse,
|
||||
);
|
||||
});
|
||||
|
||||
test('isGlobalAdmin returns true for admin.general:admin role', () {
|
||||
final state = AuthState(
|
||||
isAuthenticated: true,
|
||||
roles: const [
|
||||
Role(
|
||||
id: '1',
|
||||
name: 'admin.general:admin',
|
||||
domain: Domain.admin,
|
||||
category: 'general',
|
||||
action: Action.admin,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
expect(state.isGlobalAdmin, isTrue);
|
||||
});
|
||||
|
||||
test('isGlobalAdmin returns false for non-admin roles', () {
|
||||
final state = AuthState(
|
||||
isAuthenticated: true,
|
||||
roles: const [
|
||||
Role(
|
||||
id: '1',
|
||||
name: 'control-room.general:admin',
|
||||
domain: Domain.controlRoom,
|
||||
category: 'general',
|
||||
action: Action.admin,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
expect(state.isGlobalAdmin, isFalse);
|
||||
});
|
||||
|
||||
test('global admin has access to all domains', () {
|
||||
final state = AuthState(
|
||||
isAuthenticated: true,
|
||||
roles: const [
|
||||
Role(
|
||||
id: '1',
|
||||
name: 'admin.general:admin',
|
||||
domain: Domain.admin,
|
||||
category: 'general',
|
||||
action: Action.admin,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// Global admin should have access to everything
|
||||
expect(state.hasPermission(Domain.controlRoom, Action.admin), isTrue);
|
||||
expect(state.hasPermission(Domain.media, Action.editor), isTrue);
|
||||
expect(state.hasPermission(Domain.library, Action.viewer), isTrue);
|
||||
expect(
|
||||
state.hasPermission(Domain.documents, Action.user, category: 'custom'),
|
||||
isTrue,
|
||||
);
|
||||
});
|
||||
|
||||
test('empty roles list denies all permissions', () {
|
||||
const state = AuthState(isAuthenticated: true, roles: []);
|
||||
|
||||
expect(state.hasPermission(Domain.controlRoom, Action.viewer), isFalse);
|
||||
expect(state.isGlobalAdmin, isFalse);
|
||||
});
|
||||
|
||||
test('multiple roles are evaluated correctly', () {
|
||||
final state = AuthState(
|
||||
isAuthenticated: true,
|
||||
roles: const [
|
||||
Role(
|
||||
id: '1',
|
||||
name: 'media.general:viewer',
|
||||
domain: Domain.media,
|
||||
category: 'general',
|
||||
action: Action.viewer,
|
||||
),
|
||||
Role(
|
||||
id: '2',
|
||||
name: 'control-room.general:admin',
|
||||
domain: Domain.controlRoom,
|
||||
category: 'general',
|
||||
action: Action.admin,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// Should have permissions from both roles
|
||||
expect(state.hasPermission(Domain.media, Action.viewer), isTrue);
|
||||
expect(state.hasPermission(Domain.controlRoom, Action.admin), isTrue);
|
||||
|
||||
// But not permissions not granted by any role
|
||||
expect(state.hasPermission(Domain.media, Action.admin), isFalse);
|
||||
expect(state.hasPermission(Domain.library, Action.viewer), isFalse);
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,283 @@
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'package:tatlock_ui/core/auth/permissions.dart';
|
||||
|
||||
void main() {
|
||||
group('Domain', () {
|
||||
group('fromString', () {
|
||||
test('parses valid domain strings', () {
|
||||
expect(Domain.fromString('control-room'), equals(Domain.controlRoom));
|
||||
expect(Domain.fromString('library'), equals(Domain.library));
|
||||
expect(Domain.fromString('media'), equals(Domain.media));
|
||||
expect(Domain.fromString('ai'), equals(Domain.ai));
|
||||
expect(Domain.fromString('housekeeper'), equals(Domain.housekeeper));
|
||||
expect(Domain.fromString('developer'), equals(Domain.developer));
|
||||
expect(Domain.fromString('documents'), equals(Domain.documents));
|
||||
expect(Domain.fromString('gaming'), equals(Domain.gaming));
|
||||
expect(Domain.fromString('admin'), equals(Domain.admin));
|
||||
});
|
||||
|
||||
test('returns null for invalid domain', () {
|
||||
expect(Domain.fromString('invalid'), isNull);
|
||||
expect(Domain.fromString(''), isNull);
|
||||
expect(Domain.fromString('CONTROL-ROOM'), isNull);
|
||||
});
|
||||
});
|
||||
|
||||
test('value returns correct string', () {
|
||||
expect(Domain.controlRoom.value, equals('control-room'));
|
||||
expect(Domain.library.value, equals('library'));
|
||||
expect(Domain.admin.value, equals('admin'));
|
||||
});
|
||||
});
|
||||
|
||||
group('Action', () {
|
||||
group('fromString', () {
|
||||
test('parses valid action strings', () {
|
||||
expect(Action.fromString('viewer'), equals(Action.viewer));
|
||||
expect(Action.fromString('user'), equals(Action.user));
|
||||
expect(Action.fromString('editor'), equals(Action.editor));
|
||||
expect(Action.fromString('admin'), equals(Action.admin));
|
||||
});
|
||||
|
||||
test('returns null for invalid action', () {
|
||||
expect(Action.fromString('invalid'), isNull);
|
||||
expect(Action.fromString(''), isNull);
|
||||
expect(Action.fromString('ADMIN'), isNull);
|
||||
});
|
||||
});
|
||||
|
||||
group('level', () {
|
||||
test('has correct hierarchy levels', () {
|
||||
expect(Action.viewer.level, equals(1));
|
||||
expect(Action.user.level, equals(2));
|
||||
expect(Action.editor.level, equals(3));
|
||||
expect(Action.admin.level, equals(4));
|
||||
});
|
||||
|
||||
test('levels are ordered correctly', () {
|
||||
expect(Action.viewer.level, lessThan(Action.user.level));
|
||||
expect(Action.user.level, lessThan(Action.editor.level));
|
||||
expect(Action.editor.level, lessThan(Action.admin.level));
|
||||
});
|
||||
});
|
||||
|
||||
group('grants', () {
|
||||
test('admin grants all actions', () {
|
||||
expect(Action.admin.grants(Action.admin), isTrue);
|
||||
expect(Action.admin.grants(Action.editor), isTrue);
|
||||
expect(Action.admin.grants(Action.user), isTrue);
|
||||
expect(Action.admin.grants(Action.viewer), isTrue);
|
||||
});
|
||||
|
||||
test('editor grants editor and below', () {
|
||||
expect(Action.editor.grants(Action.admin), isFalse);
|
||||
expect(Action.editor.grants(Action.editor), isTrue);
|
||||
expect(Action.editor.grants(Action.user), isTrue);
|
||||
expect(Action.editor.grants(Action.viewer), isTrue);
|
||||
});
|
||||
|
||||
test('user grants user and below', () {
|
||||
expect(Action.user.grants(Action.admin), isFalse);
|
||||
expect(Action.user.grants(Action.editor), isFalse);
|
||||
expect(Action.user.grants(Action.user), isTrue);
|
||||
expect(Action.user.grants(Action.viewer), isTrue);
|
||||
});
|
||||
|
||||
test('viewer only grants viewer', () {
|
||||
expect(Action.viewer.grants(Action.admin), isFalse);
|
||||
expect(Action.viewer.grants(Action.editor), isFalse);
|
||||
expect(Action.viewer.grants(Action.user), isFalse);
|
||||
expect(Action.viewer.grants(Action.viewer), isTrue);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
group('Role', () {
|
||||
group('grants', () {
|
||||
test('grants permission for matching domain and category', () {
|
||||
const role = Role(
|
||||
id: '1',
|
||||
name: 'control-room.general:admin',
|
||||
domain: Domain.controlRoom,
|
||||
category: 'general',
|
||||
action: Action.admin,
|
||||
);
|
||||
|
||||
expect(role.grants(Domain.controlRoom, Action.admin), isTrue);
|
||||
expect(role.grants(Domain.controlRoom, Action.editor), isTrue);
|
||||
expect(role.grants(Domain.controlRoom, Action.user), isTrue);
|
||||
expect(role.grants(Domain.controlRoom, Action.viewer), isTrue);
|
||||
});
|
||||
|
||||
test('denies permission for different domain', () {
|
||||
const role = Role(
|
||||
id: '1',
|
||||
name: 'control-room.general:admin',
|
||||
domain: Domain.controlRoom,
|
||||
category: 'general',
|
||||
action: Action.admin,
|
||||
);
|
||||
|
||||
expect(role.grants(Domain.media, Action.viewer), isFalse);
|
||||
expect(role.grants(Domain.library, Action.viewer), isFalse);
|
||||
});
|
||||
|
||||
test('denies permission for different category', () {
|
||||
const role = Role(
|
||||
id: '1',
|
||||
name: 'control-room.servers:admin',
|
||||
domain: Domain.controlRoom,
|
||||
category: 'servers',
|
||||
action: Action.admin,
|
||||
);
|
||||
|
||||
expect(
|
||||
role.grants(Domain.controlRoom, Action.admin, category: 'general'),
|
||||
isFalse,
|
||||
);
|
||||
expect(
|
||||
role.grants(Domain.controlRoom, Action.admin, category: 'servers'),
|
||||
isTrue,
|
||||
);
|
||||
});
|
||||
|
||||
test('global admin grants all permissions', () {
|
||||
const globalAdmin = Role(
|
||||
id: '1',
|
||||
name: 'admin.general:admin',
|
||||
domain: Domain.admin,
|
||||
category: 'general',
|
||||
action: Action.admin,
|
||||
);
|
||||
|
||||
// Should grant any domain, category, action
|
||||
expect(globalAdmin.grants(Domain.controlRoom, Action.admin), isTrue);
|
||||
expect(globalAdmin.grants(Domain.media, Action.editor), isTrue);
|
||||
expect(globalAdmin.grants(Domain.library, Action.viewer), isTrue);
|
||||
expect(
|
||||
globalAdmin.grants(Domain.documents, Action.user, category: 'specific'),
|
||||
isTrue,
|
||||
);
|
||||
});
|
||||
|
||||
test('non-global admin role does not grant everything', () {
|
||||
const domainAdmin = Role(
|
||||
id: '1',
|
||||
name: 'admin.specific:admin',
|
||||
domain: Domain.admin,
|
||||
category: 'specific', // Not 'general'
|
||||
action: Action.admin,
|
||||
);
|
||||
|
||||
// Should not grant arbitrary permissions
|
||||
expect(domainAdmin.grants(Domain.controlRoom, Action.viewer), isFalse);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
group('RoleListPermissions extension', () {
|
||||
final roles = [
|
||||
const Role(
|
||||
id: '1',
|
||||
name: 'control-room.general:admin',
|
||||
domain: Domain.controlRoom,
|
||||
category: 'general',
|
||||
action: Action.admin,
|
||||
),
|
||||
const Role(
|
||||
id: '2',
|
||||
name: 'media.general:viewer',
|
||||
domain: Domain.media,
|
||||
category: 'general',
|
||||
action: Action.viewer,
|
||||
),
|
||||
];
|
||||
|
||||
group('hasPermission', () {
|
||||
test('returns true when any role grants permission', () {
|
||||
expect(
|
||||
roles.hasPermission(Domain.controlRoom, Action.admin),
|
||||
isTrue,
|
||||
);
|
||||
expect(
|
||||
roles.hasPermission(Domain.controlRoom, Action.viewer),
|
||||
isTrue,
|
||||
);
|
||||
expect(
|
||||
roles.hasPermission(Domain.media, Action.viewer),
|
||||
isTrue,
|
||||
);
|
||||
});
|
||||
|
||||
test('returns false when no role grants permission', () {
|
||||
expect(
|
||||
roles.hasPermission(Domain.media, Action.editor),
|
||||
isFalse,
|
||||
);
|
||||
expect(
|
||||
roles.hasPermission(Domain.library, Action.viewer),
|
||||
isFalse,
|
||||
);
|
||||
});
|
||||
|
||||
test('returns false for empty role list', () {
|
||||
expect(
|
||||
<Role>[].hasPermission(Domain.controlRoom, Action.viewer),
|
||||
isFalse,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
group('isGlobalAdmin', () {
|
||||
test('returns true when global admin role present', () {
|
||||
final adminRoles = [
|
||||
const Role(
|
||||
id: '1',
|
||||
name: 'admin.general:admin',
|
||||
domain: Domain.admin,
|
||||
category: 'general',
|
||||
action: Action.admin,
|
||||
),
|
||||
];
|
||||
|
||||
expect(adminRoles.isGlobalAdmin, isTrue);
|
||||
});
|
||||
|
||||
test('returns false when no global admin role', () {
|
||||
expect(roles.isGlobalAdmin, isFalse);
|
||||
});
|
||||
|
||||
test('returns false for empty role list', () {
|
||||
expect(<Role>[].isGlobalAdmin, isFalse);
|
||||
});
|
||||
|
||||
test('returns false for admin domain with non-general category', () {
|
||||
final limitedAdmin = [
|
||||
const Role(
|
||||
id: '1',
|
||||
name: 'admin.specific:admin',
|
||||
domain: Domain.admin,
|
||||
category: 'specific',
|
||||
action: Action.admin,
|
||||
),
|
||||
];
|
||||
|
||||
expect(limitedAdmin.isGlobalAdmin, isFalse);
|
||||
});
|
||||
|
||||
test('returns false for admin domain with non-admin action', () {
|
||||
final viewerAdmin = [
|
||||
const Role(
|
||||
id: '1',
|
||||
name: 'admin.general:viewer',
|
||||
domain: Domain.admin,
|
||||
category: 'general',
|
||||
action: Action.viewer,
|
||||
),
|
||||
];
|
||||
|
||||
expect(viewerAdmin.isGlobalAdmin, isFalse);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'package:tatlock_ui/core/auth/user_preferences.dart';
|
||||
|
||||
void main() {
|
||||
group('UserPreferences', () {
|
||||
group('default constructor', () {
|
||||
test('creates with default values', () {
|
||||
const prefs = UserPreferences();
|
||||
|
||||
expect(prefs.theme, equals('system'));
|
||||
expect(prefs.defaultRoom, equals('front-hall'));
|
||||
expect(prefs.preferencesJson, isEmpty);
|
||||
});
|
||||
});
|
||||
|
||||
group('custom constructor', () {
|
||||
test('creates with custom values', () {
|
||||
const prefs = UserPreferences(
|
||||
theme: 'dark',
|
||||
defaultRoom: 'kitchen',
|
||||
preferencesJson: {'sidebar_collapsed': true, 'font_size': 14},
|
||||
);
|
||||
|
||||
expect(prefs.theme, equals('dark'));
|
||||
expect(prefs.defaultRoom, equals('kitchen'));
|
||||
expect(prefs.preferencesJson['sidebar_collapsed'], isTrue);
|
||||
expect(prefs.preferencesJson['font_size'], equals(14));
|
||||
});
|
||||
});
|
||||
|
||||
group('fromJson', () {
|
||||
test('deserializes from JSON', () {
|
||||
final json = {
|
||||
'theme': 'light',
|
||||
'defaultRoom': 'living-room',
|
||||
'preferencesJson': {'key': 'value'},
|
||||
};
|
||||
|
||||
final prefs = UserPreferences.fromJson(json);
|
||||
|
||||
expect(prefs.theme, equals('light'));
|
||||
expect(prefs.defaultRoom, equals('living-room'));
|
||||
expect(prefs.preferencesJson['key'], equals('value'));
|
||||
});
|
||||
|
||||
test('uses defaults for missing fields', () {
|
||||
final json = <String, dynamic>{};
|
||||
|
||||
final prefs = UserPreferences.fromJson(json);
|
||||
|
||||
expect(prefs.theme, equals('system'));
|
||||
expect(prefs.defaultRoom, equals('front-hall'));
|
||||
expect(prefs.preferencesJson, isEmpty);
|
||||
});
|
||||
|
||||
test('handles partial JSON', () {
|
||||
final json = {'theme': 'dark'};
|
||||
|
||||
final prefs = UserPreferences.fromJson(json);
|
||||
|
||||
expect(prefs.theme, equals('dark'));
|
||||
expect(prefs.defaultRoom, equals('front-hall'));
|
||||
});
|
||||
});
|
||||
|
||||
group('toJson', () {
|
||||
test('serializes to JSON', () {
|
||||
const prefs = UserPreferences(
|
||||
theme: 'dark',
|
||||
defaultRoom: 'office',
|
||||
preferencesJson: {'notifications': true},
|
||||
);
|
||||
|
||||
final json = prefs.toJson();
|
||||
|
||||
expect(json['theme'], equals('dark'));
|
||||
expect(json['defaultRoom'], equals('office'));
|
||||
expect(json['preferencesJson']['notifications'], isTrue);
|
||||
});
|
||||
|
||||
test('round-trip serialization preserves data', () {
|
||||
const original = UserPreferences(
|
||||
theme: 'light',
|
||||
defaultRoom: 'bedroom',
|
||||
preferencesJson: {'compact_mode': false},
|
||||
);
|
||||
|
||||
final json = original.toJson();
|
||||
final restored = UserPreferences.fromJson(json);
|
||||
|
||||
expect(restored.theme, equals(original.theme));
|
||||
expect(restored.defaultRoom, equals(original.defaultRoom));
|
||||
expect(
|
||||
restored.preferencesJson['compact_mode'],
|
||||
equals(original.preferencesJson['compact_mode']),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
group('copyWith', () {
|
||||
test('creates a copy with modified values', () {
|
||||
const original = UserPreferences(
|
||||
theme: 'system',
|
||||
defaultRoom: 'front-hall',
|
||||
);
|
||||
|
||||
final updated = original.copyWith(theme: 'dark');
|
||||
|
||||
// Original unchanged
|
||||
expect(original.theme, equals('system'));
|
||||
|
||||
// Updated has new value
|
||||
expect(updated.theme, equals('dark'));
|
||||
|
||||
// Preserved unchanged values
|
||||
expect(updated.defaultRoom, equals(original.defaultRoom));
|
||||
});
|
||||
});
|
||||
|
||||
group('equality', () {
|
||||
test('two identical preferences are equal', () {
|
||||
const prefs1 = UserPreferences(theme: 'dark', defaultRoom: 'office');
|
||||
const prefs2 = UserPreferences(theme: 'dark', defaultRoom: 'office');
|
||||
|
||||
expect(prefs1, equals(prefs2));
|
||||
});
|
||||
|
||||
test('different preferences are not equal', () {
|
||||
const prefs1 = UserPreferences(theme: 'dark');
|
||||
const prefs2 = UserPreferences(theme: 'light');
|
||||
|
||||
expect(prefs1, isNot(equals(prefs2)));
|
||||
});
|
||||
});
|
||||
|
||||
group('theme validation', () {
|
||||
test('accepts valid theme values', () {
|
||||
const themes = ['system', 'light', 'dark'];
|
||||
|
||||
for (final theme in themes) {
|
||||
final prefs = UserPreferences(theme: theme);
|
||||
expect(prefs.theme, equals(theme));
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 917 B After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OK</title>
|
||||
</head>
|
||||
<body>OK</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 102 KiB |
+3
-3
@@ -18,18 +18,18 @@
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
|
||||
<meta name="description" content="A new Flutter project.">
|
||||
<meta name="description" content="Tatlock Home Dashboard">
|
||||
|
||||
<!-- iOS meta tags & icons -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="tatlock_ui">
|
||||
<meta name="apple-mobile-web-app-title" content="Tatlock">
|
||||
<link rel="apple-touch-icon" href="icons/Icon-192.png">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" href="favicon.png"/>
|
||||
|
||||
<title>tatlock_ui</title>
|
||||
<title>Tatlock</title>
|
||||
<link rel="manifest" href="manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
+5
-5
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "tatlock_ui",
|
||||
"short_name": "tatlock_ui",
|
||||
"name": "Tatlock",
|
||||
"short_name": "Tatlock",
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"background_color": "#0175C2",
|
||||
"theme_color": "#0175C2",
|
||||
"description": "A new Flutter project.",
|
||||
"background_color": "#1a1a2e",
|
||||
"theme_color": "#1a1a2e",
|
||||
"description": "Tatlock Home Dashboard",
|
||||
"orientation": "portrait-primary",
|
||||
"prefer_related_applications": false,
|
||||
"icons": [
|
||||
|
||||
Reference in New Issue
Block a user