298 lines
11 KiB
TypeScript
298 lines
11 KiB
TypeScript
import { Component, inject, signal, OnInit } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { Router } from '@angular/router';
|
|
import { NgIcon, provideIcons } from '@ng-icons/core';
|
|
import {
|
|
lucideServer,
|
|
lucidePlus,
|
|
lucideTrash2,
|
|
lucideCheck,
|
|
lucideX,
|
|
lucideSettings,
|
|
lucideRefreshCw,
|
|
lucideGlobe,
|
|
lucideArrowLeft,
|
|
} from '@ng-icons/lucide';
|
|
|
|
import { ServerDirectoryService, ServerEndpoint } from '../../core/services/server-directory.service';
|
|
|
|
@Component({
|
|
selector: 'app-settings',
|
|
standalone: true,
|
|
imports: [CommonModule, FormsModule, NgIcon],
|
|
viewProviders: [
|
|
provideIcons({
|
|
lucideServer,
|
|
lucidePlus,
|
|
lucideTrash2,
|
|
lucideCheck,
|
|
lucideX,
|
|
lucideSettings,
|
|
lucideRefreshCw,
|
|
lucideGlobe,
|
|
lucideArrowLeft,
|
|
}),
|
|
],
|
|
template: `
|
|
<div class="p-6 max-w-2xl mx-auto">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<button
|
|
(click)="goBack()"
|
|
class="p-2 hover:bg-secondary rounded-lg transition-colors"
|
|
title="Go back"
|
|
>
|
|
<ng-icon name="lucideArrowLeft" class="w-5 h-5 text-muted-foreground" />
|
|
</button>
|
|
<ng-icon name="lucideSettings" class="w-6 h-6 text-primary" />
|
|
<h1 class="text-2xl font-bold text-foreground">Settings</h1>
|
|
</div>
|
|
|
|
<!-- Server Endpoints Section -->
|
|
<div class="bg-card border border-border rounded-lg p-6 mb-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<ng-icon name="lucideGlobe" class="w-5 h-5 text-muted-foreground" />
|
|
<h2 class="text-lg font-semibold text-foreground">Server Endpoints</h2>
|
|
</div>
|
|
<button
|
|
(click)="testAllServers()"
|
|
[disabled]="isTesting()"
|
|
class="flex items-center gap-2 px-3 py-1.5 text-sm bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors disabled:opacity-50"
|
|
>
|
|
<ng-icon name="lucideRefreshCw" class="w-4 h-4" [class.animate-spin]="isTesting()" />
|
|
Test All
|
|
</button>
|
|
</div>
|
|
|
|
<p class="text-sm text-muted-foreground mb-4">
|
|
Add multiple server directories to search for rooms across different networks.
|
|
The active server will be used for creating and registering new rooms.
|
|
</p>
|
|
|
|
<!-- Server List -->
|
|
<div class="space-y-3 mb-4">
|
|
@for (server of servers(); track server.id) {
|
|
<div
|
|
class="flex items-center gap-3 p-3 rounded-lg border transition-colors"
|
|
[class.border-primary]="server.isActive"
|
|
[class.bg-primary/5]="server.isActive"
|
|
[class.border-border]="!server.isActive"
|
|
[class.bg-secondary/30]="!server.isActive"
|
|
>
|
|
<!-- Status Indicator -->
|
|
<div
|
|
class="w-3 h-3 rounded-full flex-shrink-0"
|
|
[class.bg-green-500]="server.status === 'online'"
|
|
[class.bg-red-500]="server.status === 'offline'"
|
|
[class.bg-yellow-500]="server.status === 'checking'"
|
|
[class.bg-muted]="server.status === 'unknown'"
|
|
[title]="server.status"
|
|
></div>
|
|
|
|
<!-- Server Info -->
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-medium text-foreground truncate">{{ server.name }}</span>
|
|
@if (server.isActive) {
|
|
<span class="text-xs bg-primary text-primary-foreground px-2 py-0.5 rounded-full">Active</span>
|
|
}
|
|
</div>
|
|
<p class="text-sm text-muted-foreground truncate">{{ server.url }}</p>
|
|
@if (server.latency !== undefined && server.status === 'online') {
|
|
<p class="text-xs text-muted-foreground">{{ server.latency }}ms</p>
|
|
}
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex items-center gap-2 flex-shrink-0">
|
|
@if (!server.isActive) {
|
|
<button
|
|
(click)="setActiveServer(server.id)"
|
|
class="p-2 hover:bg-secondary rounded-lg transition-colors"
|
|
title="Set as active"
|
|
>
|
|
<ng-icon name="lucideCheck" class="w-4 h-4 text-muted-foreground hover:text-primary" />
|
|
</button>
|
|
}
|
|
@if (!server.isDefault) {
|
|
<button
|
|
(click)="removeServer(server.id)"
|
|
class="p-2 hover:bg-destructive/10 rounded-lg transition-colors"
|
|
title="Remove server"
|
|
>
|
|
<ng-icon name="lucideTrash2" class="w-4 h-4 text-muted-foreground hover:text-destructive" />
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Add New Server -->
|
|
<div class="border-t border-border pt-4">
|
|
<h3 class="text-sm font-medium text-foreground mb-3">Add New Server</h3>
|
|
<div class="flex gap-3">
|
|
<div class="flex-1 space-y-2">
|
|
<input
|
|
type="text"
|
|
[(ngModel)]="newServerName"
|
|
placeholder="Server name (e.g., My Server)"
|
|
class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
<input
|
|
type="url"
|
|
[(ngModel)]="newServerUrl"
|
|
placeholder="Server URL (e.g., http://localhost:3001)"
|
|
class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
</div>
|
|
<button
|
|
(click)="addServer()"
|
|
[disabled]="!newServerName || !newServerUrl"
|
|
class="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed self-end"
|
|
>
|
|
<ng-icon name="lucidePlus" class="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
@if (addError()) {
|
|
<p class="text-sm text-destructive mt-2">{{ addError() }}</p>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Connection Settings -->
|
|
<div class="bg-card border border-border rounded-lg p-6">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<ng-icon name="lucideServer" class="w-5 h-5 text-muted-foreground" />
|
|
<h2 class="text-lg font-semibold text-foreground">Connection Settings</h2>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="font-medium text-foreground">Auto-reconnect</p>
|
|
<p class="text-sm text-muted-foreground">Automatically reconnect when connection is lost</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
[(ngModel)]="autoReconnect"
|
|
(change)="saveConnectionSettings()"
|
|
class="sr-only peer"
|
|
/>
|
|
<div class="w-11 h-6 bg-secondary rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="font-medium text-foreground">Search all servers</p>
|
|
<p class="text-sm text-muted-foreground">Search across all configured server directories</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
[(ngModel)]="searchAllServers"
|
|
(change)="saveConnectionSettings()"
|
|
class="sr-only peer"
|
|
/>
|
|
<div class="w-11 h-6 bg-secondary rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
})
|
|
export class SettingsComponent implements OnInit {
|
|
private serverDirectory = inject(ServerDirectoryService);
|
|
private router = inject(Router);
|
|
|
|
servers = this.serverDirectory.servers;
|
|
isTesting = signal(false);
|
|
addError = signal<string | null>(null);
|
|
|
|
newServerName = '';
|
|
newServerUrl = '';
|
|
autoReconnect = true;
|
|
searchAllServers = true;
|
|
|
|
ngOnInit(): void {
|
|
this.loadConnectionSettings();
|
|
}
|
|
|
|
addServer(): void {
|
|
this.addError.set(null);
|
|
|
|
// Validate URL
|
|
try {
|
|
new URL(this.newServerUrl);
|
|
} catch {
|
|
this.addError.set('Please enter a valid URL');
|
|
return;
|
|
}
|
|
|
|
// Check for duplicates
|
|
if (this.servers().some((s) => s.url === this.newServerUrl)) {
|
|
this.addError.set('This server URL already exists');
|
|
return;
|
|
}
|
|
|
|
this.serverDirectory.addServer({
|
|
name: this.newServerName.trim(),
|
|
url: this.newServerUrl.trim().replace(/\/$/, ''), // Remove trailing slash
|
|
});
|
|
|
|
// Clear form
|
|
this.newServerName = '';
|
|
this.newServerUrl = '';
|
|
|
|
// Test the new server
|
|
const servers = this.servers();
|
|
const newServer = servers[servers.length - 1];
|
|
if (newServer) {
|
|
this.serverDirectory.testServer(newServer.id);
|
|
}
|
|
}
|
|
|
|
removeServer(id: string): void {
|
|
this.serverDirectory.removeServer(id);
|
|
}
|
|
|
|
setActiveServer(id: string): void {
|
|
this.serverDirectory.setActiveServer(id);
|
|
}
|
|
|
|
async testAllServers(): Promise<void> {
|
|
this.isTesting.set(true);
|
|
await this.serverDirectory.testAllServers();
|
|
this.isTesting.set(false);
|
|
}
|
|
|
|
loadConnectionSettings(): void {
|
|
const settings = localStorage.getItem('metoyou_connection_settings');
|
|
if (settings) {
|
|
const parsed = JSON.parse(settings);
|
|
this.autoReconnect = parsed.autoReconnect ?? true;
|
|
this.searchAllServers = parsed.searchAllServers ?? true;
|
|
this.serverDirectory.setSearchAllServers(this.searchAllServers);
|
|
}
|
|
}
|
|
|
|
saveConnectionSettings(): void {
|
|
localStorage.setItem(
|
|
'metoyou_connection_settings',
|
|
JSON.stringify({
|
|
autoReconnect: this.autoReconnect,
|
|
searchAllServers: this.searchAllServers,
|
|
})
|
|
);
|
|
this.serverDirectory.setSearchAllServers(this.searchAllServers);
|
|
}
|
|
|
|
goBack(): void {
|
|
this.router.navigate(['/']);
|
|
}
|
|
}
|