backup push
This commit is contained in:
@@ -0,0 +1,23 @@
|
||||
import {
|
||||
ApplicationConfig,
|
||||
importProvidersFrom,
|
||||
provideBrowserGlobalErrorListeners,
|
||||
provideZoneChangeDetection
|
||||
} from '@angular/core';
|
||||
import {provideRouter} from '@angular/router';
|
||||
import {provideHttpClient} from '@angular/common/http';
|
||||
import {provideAnimations} from '@angular/platform-browser/animations';
|
||||
import {routes} from './app.routes';
|
||||
import {NgxsModule} from '@ngxs/store';
|
||||
import {ServiceStatusState} from './store/service-status.state';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideBrowserGlobalErrorListeners(),
|
||||
provideZoneChangeDetection({ eventCoalescing: true }),
|
||||
provideRouter(routes),
|
||||
provideHttpClient(),
|
||||
provideAnimations(),
|
||||
importProvidersFrom(NgxsModule.forRoot([ServiceStatusState]))
|
||||
]
|
||||
};
|
||||
@@ -0,0 +1,14 @@
|
||||
<section class="page-container">
|
||||
<div class="page-header">
|
||||
<button type="button" class="btn btn-secondary" (click)="navigateToOtherPage()">
|
||||
{{ getNavigationButtonText() }}
|
||||
</button>
|
||||
<h1>{{ getPageTitle() }}</h1>
|
||||
<button type="button" class="btn theme-toggle-btn" (click)="toggleTheme()">
|
||||
{{ isDarkMode ? '☀️ Light Mode' : '🌙 Dark Mode' }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,9 @@
|
||||
import {Routes} from '@angular/router';
|
||||
import {Dashboard} from './pages/dashboard/dashboard';
|
||||
import {Settings} from './pages/settings/settings';
|
||||
|
||||
export const routes: Routes = [
|
||||
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
|
||||
{ path: 'dashboard', component: Dashboard },
|
||||
{ path: 'settings', component: Settings },
|
||||
];
|
||||
@@ -0,0 +1,145 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
.page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.btn {
|
||||
color: var(--text-color);
|
||||
&:hover {
|
||||
background-color: var(--btn-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.theme-toggle-btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--btn-bg);
|
||||
}
|
||||
|
||||
.table {
|
||||
max-width: 800px;
|
||||
border-color: var(--border-color);
|
||||
width: 100%;
|
||||
table-layout: auto;
|
||||
|
||||
/* Column width settings */
|
||||
th:nth-child(1) {
|
||||
width: auto; /* First column takes remaining space */
|
||||
}
|
||||
th:nth-child(2),
|
||||
th:nth-child(3),
|
||||
th:nth-child(4),
|
||||
th:nth-child(5) {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
} /* Status column - fit to content */
|
||||
|
||||
th {
|
||||
background-color: var(--table-header-bg);
|
||||
color: var(--text-color);
|
||||
border-color: var(--border-color);
|
||||
vertical-align: middle; /* Vertically center the header text */
|
||||
padding: 8px 12px; /* Consistent padding with table cells */
|
||||
line-height: 1.5; /* Consistent line height with table cells */
|
||||
}
|
||||
|
||||
td {
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-color);
|
||||
vertical-align: middle;
|
||||
padding: 8px 12px;
|
||||
line-height: 1.5;
|
||||
display: table-cell !important;
|
||||
.btn {
|
||||
width: 100%;
|
||||
|
||||
&.no-wrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure all cells in a row have the same height */
|
||||
tr {
|
||||
min-height: 36px; /* Minimum height for rows but allows dynamic expansion */
|
||||
}
|
||||
|
||||
/* Ensure status column center aligns content */
|
||||
td:nth-child(2) {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
td:nth-child(3),
|
||||
td:nth-child(4) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.table-striped > tbody > tr:nth-of-type(odd) > * {
|
||||
background-color: var(--table-stripe-bg);
|
||||
}
|
||||
|
||||
&.table-hover > tbody > tr:hover > * {
|
||||
background-color: var(--table-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Service icon styling */
|
||||
.service-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-up {
|
||||
color: var(--status-up-color) !important;
|
||||
}
|
||||
|
||||
.status-down {
|
||||
color: var(--status-down-color) !important;
|
||||
}
|
||||
|
||||
.status-loading {
|
||||
color: var(--status-loading-color) !important;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import {TestBed} from '@angular/core/testing';
|
||||
import {App} from './app';
|
||||
|
||||
describe('App', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [App],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, main_web');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,86 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {NavigationEnd, Router, RouterOutlet} from '@angular/router';
|
||||
import {filter} from 'rxjs/operators';
|
||||
import {CheckServiceStatusService} from './check-service-status.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
imports: [RouterOutlet],
|
||||
templateUrl: './app.html',
|
||||
styleUrl: './app.scss'
|
||||
})
|
||||
export class App implements OnInit{
|
||||
isDarkMode: boolean = false;
|
||||
currentRoute: string = '';
|
||||
|
||||
constructor(private router: Router, private checkServiceStatusService: CheckServiceStatusService) {
|
||||
// Check if user prefers dark mode
|
||||
this.isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initApp();
|
||||
// Subscribe to router events to track current route
|
||||
this.router.events
|
||||
.pipe(filter(event => event instanceof NavigationEnd))
|
||||
.subscribe((event: NavigationEnd) => {
|
||||
this.currentRoute = event.url;
|
||||
});
|
||||
|
||||
// Set initial route
|
||||
this.currentRoute = this.router.url;
|
||||
|
||||
// Add event listener for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
this.isDarkMode = e.matches;
|
||||
this.applyTheme();
|
||||
});
|
||||
|
||||
// Apply initial theme
|
||||
this.applyTheme(); }
|
||||
|
||||
|
||||
toggleTheme() {
|
||||
this.isDarkMode = !this.isDarkMode;
|
||||
this.applyTheme();
|
||||
}
|
||||
|
||||
applyTheme() {
|
||||
const htmlElement = document.querySelector('html');
|
||||
if (htmlElement) {
|
||||
htmlElement.classList.remove('light-mode', 'dark-mode');
|
||||
htmlElement.classList.add(this.isDarkMode ? 'dark-mode' : 'light-mode');
|
||||
}
|
||||
}
|
||||
|
||||
openPage(page: string) {
|
||||
this.router.navigate(['/' + page]);
|
||||
}
|
||||
|
||||
navigateToOtherPage() {
|
||||
if (this.isOnSettingsPage()) {
|
||||
this.router.navigate(['/dashboard']);
|
||||
} else {
|
||||
this.router.navigate(['/settings']);
|
||||
}
|
||||
|
||||
// Remove focus from the button to prevent stuck hover styling
|
||||
(document.activeElement as HTMLElement)?.blur();
|
||||
}
|
||||
|
||||
isOnSettingsPage(): boolean {
|
||||
return this.currentRoute.includes('/settings');
|
||||
}
|
||||
|
||||
getNavigationButtonText(): string {
|
||||
return this.isOnSettingsPage() ? '📊 Dashboard' : '⚙️ Settings';
|
||||
}
|
||||
|
||||
getPageTitle(): string {
|
||||
return this.isOnSettingsPage() ? 'Settings' : 'Service Check';
|
||||
}
|
||||
|
||||
private initApp() {
|
||||
this.checkServiceStatusService.initializeServices().subscribe();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import {Injectable} from '@angular/core';
|
||||
import {HttpClient, HttpHeaders} from '@angular/common/http';
|
||||
import {Observable, of} from 'rxjs';
|
||||
import {catchError, map, switchMap} from 'rxjs/operators';
|
||||
import {Status} from './interfaces/services.interface';
|
||||
import {Store} from '@ngxs/store';
|
||||
import {CheckAllServicesStatus, LoadConfig} from './store/service-status.action';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class CheckServiceStatusService {
|
||||
constructor(private http: HttpClient, private store: Store) {}
|
||||
|
||||
checkStatus(serverName: string, serverAddress: string, httpHeaders: HttpHeaders): Observable<Status> {
|
||||
// All requests go to the backend proxy.
|
||||
const proxyUrl = '/proxy';
|
||||
|
||||
// Pass the real target URL and its original headers through custom headers.
|
||||
const headers = new HttpHeaders({
|
||||
'x-proxy-target': serverAddress,
|
||||
...httpHeaders,
|
||||
});
|
||||
|
||||
return this.http.get(proxyUrl, { headers, responseType: 'text' }).pipe(
|
||||
map(() => 'up' as Status),
|
||||
catchError(() => of('down' as Status))
|
||||
);
|
||||
}
|
||||
|
||||
// Save config and refresh services
|
||||
saveConfigAndRefresh(config: any): Observable<any> {
|
||||
return this.http.post('/api/save-config', config).pipe(
|
||||
switchMap((response) => {
|
||||
if (response) {
|
||||
// Reload config and check all services like initApp does
|
||||
return this.store.dispatch(new LoadConfig()).pipe(
|
||||
switchMap(() => this.store.dispatch(new CheckAllServicesStatus())),
|
||||
map(() => response)
|
||||
);
|
||||
}
|
||||
return of(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// Initialize or refresh app state
|
||||
initializeServices(): Observable<any> {
|
||||
return this.store.dispatch(new LoadConfig()).pipe(
|
||||
switchMap(() => this.store.dispatch(new CheckAllServicesStatus()))
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
<div class="icon-container">
|
||||
<div [@rotateAnimation]="animationState" class="icon" [innerHTML]="currentIcon"></div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
.icon-container {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-style: preserve-3d;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
::ng-deep svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
import {Component, Input, OnChanges, OnDestroy, SimpleChanges} from '@angular/core';
|
||||
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
|
||||
import {animate, state, style, transition, trigger} from '@angular/animations';
|
||||
|
||||
@Component({
|
||||
selector: 'app-animated-icon',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
templateUrl: './animated-icon.html',
|
||||
animations: [
|
||||
trigger('rotateAnimation', [
|
||||
state('hidden', style({
|
||||
transform: 'rotateY(-90deg)',
|
||||
opacity: 0
|
||||
})),
|
||||
state('visible', style({
|
||||
transform: 'rotateY(0deg)',
|
||||
opacity: 1
|
||||
})),
|
||||
transition('hidden => visible', animate('500ms ease-out')),
|
||||
transition('visible => hidden', animate('500ms ease-in'))
|
||||
])
|
||||
]
|
||||
})
|
||||
export class AnimatedIcon implements OnChanges, OnDestroy {
|
||||
@Input() icon: string = '';
|
||||
@Input() delay: number = 3000; // Default 3 second delay
|
||||
@Input() animate: boolean = false; // Only animate when explicitly enabled
|
||||
|
||||
currentIcon: SafeHtml | null = null;
|
||||
animationState: 'hidden' | 'visible' = 'hidden';
|
||||
|
||||
private animationTimeout: any;
|
||||
private iconQueue: string[] = [];
|
||||
private currentIconIndex = 0;
|
||||
|
||||
constructor(private sanitizer: DomSanitizer) {}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
if (changes['icon'] && changes['icon'].currentValue) {
|
||||
const newIcon = changes['icon'].currentValue;
|
||||
|
||||
// If it's a string with multiple icons (comma separated), split them
|
||||
if (typeof newIcon === 'string' && newIcon.includes(',')) {
|
||||
this.iconQueue = newIcon.split(',').map(icon => icon.trim());
|
||||
this.startIconCycle();
|
||||
} else {
|
||||
// Single icon
|
||||
this.iconQueue = [newIcon];
|
||||
this.showIcon(newIcon);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private sanitizeHtml(html: string): SafeHtml {
|
||||
return this.sanitizer.bypassSecurityTrustHtml(html);
|
||||
}
|
||||
|
||||
private showIcon(iconHtml: string) {
|
||||
// Set the new icon content
|
||||
this.currentIcon = this.sanitizeHtml(iconHtml);
|
||||
|
||||
if (this.animate) {
|
||||
// Start hidden and then animate to visible
|
||||
this.animationState = 'hidden';
|
||||
|
||||
// Small delay to ensure the hidden state is applied
|
||||
setTimeout(() => {
|
||||
this.animationState = 'visible';
|
||||
}, 50);
|
||||
} else {
|
||||
// No animation, just show the icon immediately
|
||||
this.animationState = 'visible';
|
||||
}
|
||||
}
|
||||
|
||||
private startIconCycle() {
|
||||
if (this.iconQueue.length === 0 || !this.animate) return;
|
||||
|
||||
// Clear any existing timeout
|
||||
if (this.animationTimeout) {
|
||||
clearTimeout(this.animationTimeout);
|
||||
}
|
||||
|
||||
// Show the first icon
|
||||
this.showCurrentIcon();
|
||||
|
||||
// Schedule the cycling if we have multiple icons
|
||||
if (this.iconQueue.length > 1) {
|
||||
this.scheduleNextIcon();
|
||||
}
|
||||
}
|
||||
|
||||
private showCurrentIcon() {
|
||||
if (this.iconQueue.length > 0) {
|
||||
const iconToShow = this.iconQueue[this.currentIconIndex];
|
||||
this.showIcon(iconToShow);
|
||||
}
|
||||
}
|
||||
|
||||
private scheduleNextIcon() {
|
||||
this.animationTimeout = setTimeout(() => {
|
||||
// Hide current icon
|
||||
this.animationState = 'hidden';
|
||||
|
||||
// After hiding animation completes, show next icon
|
||||
setTimeout(() => {
|
||||
this.currentIconIndex = (this.currentIconIndex + 1) % this.iconQueue.length;
|
||||
this.showCurrentIcon();
|
||||
|
||||
// Schedule the next icon
|
||||
this.scheduleNextIcon();
|
||||
}, 1000); // Wait for hide animation to complete
|
||||
|
||||
}, this.delay);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.animationTimeout) {
|
||||
clearTimeout(this.animationTimeout);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import {HttpHeaders} from '@angular/common/http';
|
||||
|
||||
export interface Service {
|
||||
name: string;
|
||||
url: string;
|
||||
headers: HttpHeaders;
|
||||
status: Status;
|
||||
lastChecked?: number; // Timestamp when the service was last checked
|
||||
icon?: string; // SVG icon as string
|
||||
}
|
||||
|
||||
export type Status = 'up' | 'down' | 'loading';
|
||||
@@ -0,0 +1,53 @@
|
||||
<table class="table table-striped table-bordered full-width">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Service</th>
|
||||
<th>Status</th>
|
||||
<th>Last update</th>
|
||||
<th>
|
||||
<div type="button" class="btn btn-secondary full-width" (click)="checkAllServices()">Check all</div>
|
||||
</th>
|
||||
<th>Link</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@if (data$ | async; as data) {
|
||||
@for (service of data.services; track service.name) {
|
||||
<tr>
|
||||
<td>
|
||||
@if (service.icon) {
|
||||
<span class="service-icon" [innerHTML]="getSafeHtml(service.icon)"></span>
|
||||
}
|
||||
{{ service.name }}
|
||||
</td>
|
||||
<td class=" justify-content-center align-items-center">
|
||||
@if (service.status !== null) {
|
||||
@if (service.status === 'loading' || data.loading) {
|
||||
<app-animated-icon [icon]="'⏳'" [animate]="true" class="status-loading"></app-animated-icon>
|
||||
} @else if (service.status === 'down') {
|
||||
<app-animated-icon [icon]="'❌'" [animate]="true" class="status-down"></app-animated-icon>
|
||||
} @else if (service.status === 'up') {
|
||||
<app-animated-icon [icon]="'✅'" [animate]="true" class="status-up"></app-animated-icon>
|
||||
}
|
||||
} @else {
|
||||
<app-animated-icon [icon]="'⏳'" [animate]="true" class="status-loading"></app-animated-icon>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
@if (service.lastChecked) {
|
||||
{{ service.lastChecked | date:'dd.MM. HH:mm:ss' }}
|
||||
} @else {
|
||||
--:--:--
|
||||
}
|
||||
</td>
|
||||
<td class="d-flex justify-content-center align-items-center">
|
||||
<div type="button" class="btn btn-secondary" (click)="checkService(service.name)">Check</div>
|
||||
</td>
|
||||
<td class="d-flex justify-content-center align-items-center">
|
||||
<div type="button" class="btn btn-secondary no-wrap" (click)="goToLink(service.url)">Link 🔗</div>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -0,0 +1,23 @@
|
||||
import {ComponentFixture, TestBed} from '@angular/core/testing';
|
||||
|
||||
import {Dashboard} from './dashboard';
|
||||
|
||||
describe('Dashboard', () => {
|
||||
let component: Dashboard;
|
||||
let fixture: ComponentFixture<Dashboard>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [Dashboard]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(Dashboard);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,59 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {Store} from '@ngxs/store';
|
||||
import {combineLatest, Observable} from 'rxjs';
|
||||
import {CheckAllServicesStatus, CheckSpecifiedServiceStatus} from '../../store/service-status.action';
|
||||
import {ServiceStatusState} from '../../store/service-status.state';
|
||||
import {AsyncPipe, DatePipe} from '@angular/common';
|
||||
import {Service} from '../../interfaces/services.interface';
|
||||
import {map} from 'rxjs/operators';
|
||||
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
|
||||
import {AnimatedIcon} from '../../components/animated-icon/animated-icon';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
imports: [
|
||||
AsyncPipe,
|
||||
DatePipe,
|
||||
AnimatedIcon
|
||||
],
|
||||
templateUrl: './dashboard.html',
|
||||
styleUrl: './dashboard.scss'
|
||||
})
|
||||
export class Dashboard implements OnInit {
|
||||
config$!: Observable<any>;
|
||||
loading$!: Observable<boolean>;
|
||||
error$!: Observable<any>;
|
||||
services$!: Observable<Array<Service>>;
|
||||
data$!: Observable<any>;
|
||||
constructor(private store: Store, private sanitizer: DomSanitizer) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.config$ = this.store.select(ServiceStatusState.config);
|
||||
this.loading$ = this.store.select(ServiceStatusState.loading);
|
||||
this.error$ = this.store.select(ServiceStatusState.error);
|
||||
this.services$ = this.store.select(ServiceStatusState.services);
|
||||
this.data$ = combineLatest([this.services$, this.loading$]).pipe(
|
||||
map(([services, loading]) => ({ services, loading }))
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
checkService(name: string) {
|
||||
this.store.dispatch(new CheckSpecifiedServiceStatus(name));
|
||||
}
|
||||
|
||||
checkAllServices() {
|
||||
this.store.dispatch(new CheckAllServicesStatus());
|
||||
}
|
||||
|
||||
getSafeHtml(html: string): SafeHtml {
|
||||
return this.sanitizer.bypassSecurityTrustHtml(html);
|
||||
}
|
||||
|
||||
protected readonly Date = Date;
|
||||
|
||||
|
||||
goToLink(url: string) {
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,208 @@
|
||||
<div class="settings-container">
|
||||
<div class="settings-content">
|
||||
<div class="config-section">
|
||||
<h3>Export Configuration</h3>
|
||||
<p>Download your current configuration file for backup or transfer purposes.</p>
|
||||
<button type="button" class="btn btn-primary export-btn" (click)="exportConfig()">
|
||||
📥 Export Config
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="config-section">
|
||||
<h3>Import Configuration</h3>
|
||||
<p>Upload a configuration file to replace your current settings.</p>
|
||||
<div class="import-controls">
|
||||
<input
|
||||
type="file"
|
||||
accept=".json"
|
||||
#fileInput
|
||||
(change)="onFileSelected($event)"
|
||||
class="file-input"
|
||||
style="display: none;">
|
||||
<button type="button" class="btn btn-secondary import-btn" (click)="fileInput.click()">
|
||||
📤 Choose File
|
||||
</button>
|
||||
@if (selectedFileName) {
|
||||
<span class="selected-file">{{ selectedFileName }}</span>
|
||||
<button type="button" class="btn btn-success import-confirm-btn" (click)="importConfig()">
|
||||
✅ Import
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger import-cancel-btn" (click)="cancelImport()">
|
||||
❌ Cancel
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
@if (importMessage) {
|
||||
<p class="import-message" [class.success]="importMessage.includes('✅')" [class.error]="importMessage.includes('❌')">
|
||||
{{ importMessage }}
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (config$ | async) {
|
||||
<div class="config-preview">
|
||||
<div class="config-header">
|
||||
<h3>Current Configuration</h3>
|
||||
<div class="config-actions">
|
||||
@if (hasChanges) {
|
||||
<button type="button" class="btn btn-primary save-btn" (click)="saveConfig()" [disabled]="isSaving">
|
||||
@if (isSaving) {
|
||||
⏳ Saving...
|
||||
} @else {
|
||||
💾 Save Changes
|
||||
}
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary reset-btn" (click)="resetChanges()" [disabled]="isSaving">
|
||||
🔄 Reset
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-info">
|
||||
<p><strong>Services configured:</strong> {{ editableConfig?.length || 0 }}</p>
|
||||
@if (hasChanges) {
|
||||
<p class="changes-indicator"><strong>⚠️ You have unsaved changes</strong></p>
|
||||
}
|
||||
@if (saveMessage) {
|
||||
<p class="save-message" [class.success]="saveMessage.includes('✅')" [class.error]="saveMessage.includes('❌')">
|
||||
{{ saveMessage }}
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (editableConfig && editableConfig.length > 0) {
|
||||
<div class="config-table-container">
|
||||
<table class="table table-striped table-bordered config-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>🔄</th>
|
||||
<th>#</th>
|
||||
<th>Icon</th>
|
||||
<th>Service Name</th>
|
||||
<th>URL</th>
|
||||
<th>Headers</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody cdkDropList (cdkDropListDropped)="drop($event)">
|
||||
@for (service of editableConfig; track $index) {
|
||||
<tr cdkDrag class="draggable-row">
|
||||
<td class="drag-handle">
|
||||
<div cdkDragHandle class="drag-icon">
|
||||
⋮⋮
|
||||
</div>
|
||||
</td>
|
||||
<td class="index-column">{{ $index + 1 }}</td>
|
||||
<td class="icon-column">
|
||||
@if (isEditing($index)) {
|
||||
<input
|
||||
type="text"
|
||||
class="form-control form-control-sm icon-input"
|
||||
[value]="service.icon"
|
||||
(input)="updateService($index, 'icon', $event.target.value)"
|
||||
placeholder="SVG icon code">
|
||||
} @else {
|
||||
@if (service.icon) {
|
||||
<span class="service-icon" [innerHTML]="getSafeHtml(service.icon)"></span>
|
||||
} @else {
|
||||
<span class="no-icon">—</span>
|
||||
}
|
||||
}
|
||||
</td>
|
||||
<td class="name-column">
|
||||
@if (isEditing($index)) {
|
||||
<input
|
||||
type="text"
|
||||
class="form-control form-control-sm"
|
||||
[value]="service.name"
|
||||
(input)="updateService($index, 'name', $event.target.value)"
|
||||
placeholder="Service name">
|
||||
} @else {
|
||||
{{ service.name }}
|
||||
}
|
||||
</td>
|
||||
<td class="url-column">
|
||||
@if (isEditing($index)) {
|
||||
<input
|
||||
type="url"
|
||||
class="form-control form-control-sm"
|
||||
[value]="service.url"
|
||||
(input)="updateService($index, 'url', $event.target.value)"
|
||||
placeholder="https://example.com">
|
||||
} @else {
|
||||
<a [href]="service.url" target="_blank" class="url-link">
|
||||
{{ service.url }}
|
||||
</a>
|
||||
}
|
||||
</td>
|
||||
<td class="headers-column">
|
||||
@if (isEditing($index)) {
|
||||
<input
|
||||
type="text"
|
||||
class="form-control form-control-sm headers-input"
|
||||
[value]="getHeadersAsString(service.headers)"
|
||||
(input)="updateServiceHeaders($index, $event.target.value)"
|
||||
placeholder="key1:value1,key2:value2">
|
||||
} @else {
|
||||
@if (service.headers && Object.keys(service.headers).length > 0) {
|
||||
<span class="headers-count">{{ Object.keys(service.headers).length }} header(s)</span>
|
||||
} @else {
|
||||
<span class="no-headers">None</span>
|
||||
}
|
||||
}
|
||||
</td>
|
||||
<td class="actions-column">
|
||||
@if (isEditing($index)) {
|
||||
<div class="edit-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-success save-row-btn"
|
||||
(click)="saveRow($index)"
|
||||
title="Save changes">
|
||||
✅
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-secondary cancel-btn"
|
||||
(click)="cancelEdit($index)"
|
||||
title="Cancel editing">
|
||||
❌
|
||||
</button>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="view-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-primary edit-btn"
|
||||
(click)="toggleEdit($index)"
|
||||
title="Edit service">
|
||||
✏️
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-danger remove-btn"
|
||||
(click)="removeService($index)"
|
||||
[disabled]="editableConfig.length <= 1"
|
||||
title="Remove service">
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="table-footer-actions">
|
||||
<button type="button" class="btn btn-success add-btn" (click)="addService()">
|
||||
➕ Add Service
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,523 @@
|
||||
.settings-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
|
||||
.settings-content {
|
||||
width: 100%;
|
||||
|
||||
h2 {
|
||||
color: var(--text-color);
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.config-section {
|
||||
background: var(--table-header-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
h3 {
|
||||
color: var(--text-color);
|
||||
margin-bottom: 12px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--text-color);
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
background: var(--btn-bg);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--btn-hover-bg);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--status-up-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.import-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.import-btn {
|
||||
background: var(--btn-bg);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--btn-hover-bg);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--status-up-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.selected-file {
|
||||
color: var(--text-color);
|
||||
font-weight: 500;
|
||||
padding: 8px 12px;
|
||||
background: var(--table-header-bg);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.import-confirm-btn {
|
||||
background: var(--status-up-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #146c43;
|
||||
}
|
||||
}
|
||||
|
||||
.import-cancel-btn {
|
||||
background: var(--status-down-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #c82333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.import-message {
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
margin-top: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
&.success {
|
||||
background-color: rgba(25, 135, 84, 0.1);
|
||||
color: var(--status-up-color);
|
||||
border: 1px solid var(--status-up-color);
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: rgba(220, 53, 69, 0.1);
|
||||
color: var(--status-down-color);
|
||||
border: 1px solid var(--status-down-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-preview {
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
|
||||
.config-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
|
||||
h3 {
|
||||
color: var(--text-color);
|
||||
margin-bottom: 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.config-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.save-btn {
|
||||
background: var(--btn-bg);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--btn-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background: var(--status-loading-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #5a6268;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-info {
|
||||
margin-bottom: 20px;
|
||||
|
||||
p {
|
||||
color: var(--text-color);
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.5;
|
||||
|
||||
strong {
|
||||
color: var(--text-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.changes-indicator {
|
||||
color: var(--status-down-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.save-message {
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
margin-top: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
&.success {
|
||||
background-color: rgba(25, 135, 84, 0.1);
|
||||
color: var(--status-up-color);
|
||||
border: 1px solid var(--status-up-color);
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: rgba(220, 53, 69, 0.1);
|
||||
color: var(--status-down-color);
|
||||
border: 1px solid var(--status-down-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-table-container {
|
||||
overflow-x: auto;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
.config-table {
|
||||
margin-bottom: 0;
|
||||
border-color: var(--border-color);
|
||||
|
||||
th {
|
||||
background-color: var(--table-header-bg);
|
||||
color: var(--text-color);
|
||||
border-color: var(--border-color);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding: 12px 8px;
|
||||
white-space: nowrap;
|
||||
|
||||
&:first-child {
|
||||
width: 40px;
|
||||
} // Drag handle
|
||||
&:nth-child(2) {
|
||||
width: 50px;
|
||||
} // # column
|
||||
&:nth-child(3) {
|
||||
width: 60px;
|
||||
} // Icon column
|
||||
&:nth-child(4) {
|
||||
width: auto;
|
||||
} // Service Name
|
||||
&:nth-child(5) {
|
||||
width: 300px;
|
||||
} // URL
|
||||
&:nth-child(6) {
|
||||
width: 120px;
|
||||
} // Headers
|
||||
&:nth-child(7) {
|
||||
width: 80px;
|
||||
} // Actions
|
||||
}
|
||||
|
||||
tbody.cdk-drop-list {
|
||||
.draggable-row {
|
||||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||
|
||||
&.cdk-drag-preview {
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
&.cdk-drag-placeholder {
|
||||
opacity: 0.5;
|
||||
background: var(--table-stripe-bg);
|
||||
}
|
||||
|
||||
&.cdk-drag-animating {
|
||||
transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-color);
|
||||
vertical-align: middle;
|
||||
padding: 12px 8px;
|
||||
|
||||
&.drag-handle {
|
||||
text-align: center;
|
||||
cursor: move;
|
||||
padding: 8px;
|
||||
|
||||
.drag-icon {
|
||||
color: var(--status-loading-color);
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
font-family: monospace;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.index-column {
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&.icon-column {
|
||||
text-align: center;
|
||||
|
||||
.service-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.no-icon {
|
||||
color: var(--status-loading-color);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
&.name-column {
|
||||
font-weight: 500;
|
||||
max-width: 200px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
&.url-column {
|
||||
max-width: 300px;
|
||||
word-wrap: break-word;
|
||||
|
||||
.url-link {
|
||||
color: var(--status-up-color);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--btn-hover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.headers-column {
|
||||
text-align: center;
|
||||
|
||||
.headers-count {
|
||||
color: var(--status-up-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.no-headers {
|
||||
color: var(--status-loading-color);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
&.actions-column {
|
||||
text-align: center;
|
||||
width: 120px; // Increased width for edit actions
|
||||
|
||||
.edit-actions,
|
||||
.view-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
background: var(--btn-bg);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--btn-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.save-row-btn {
|
||||
background: var(--status-up-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #146c43;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: var(--status-loading-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #5a6268;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
background: var(--status-down-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #c82333;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: var(--status-loading-color);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Input field styling for edit mode
|
||||
.form-control {
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
border-radius: 3px;
|
||||
padding: 4px 8px;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--status-up-color);
|
||||
box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.2);
|
||||
}
|
||||
|
||||
&.icon-input {
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
// Editing row highlight
|
||||
.draggable-row {
|
||||
&.editing {
|
||||
background-color: rgba(25, 135, 84, 0.05);
|
||||
border-left: 3px solid var(--status-up-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-striped > tbody > tr:nth-of-type(odd) > * {
|
||||
background-color: var(--table-stripe-bg);
|
||||
}
|
||||
|
||||
&.table-hover > tbody > tr:hover > * {
|
||||
background-color: var(--table-hover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-footer-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
padding-top: 12px;
|
||||
|
||||
.add-btn {
|
||||
background: var(--btn-bg);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--btn-hover-bg);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--status-up-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import {ComponentFixture, TestBed} from '@angular/core/testing';
|
||||
|
||||
import {Settings} from './settings';
|
||||
|
||||
describe('Settings', () => {
|
||||
let component: Settings;
|
||||
let fixture: ComponentFixture<Settings>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [Settings]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(Settings);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,302 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {Store} from '@ngxs/store';
|
||||
import {Observable} from 'rxjs';
|
||||
import {ServiceStatusState} from '../../store/service-status.state';
|
||||
import {AsyncPipe, CommonModule} from '@angular/common';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
|
||||
import {CdkDragDrop, DragDropModule, moveItemInArray} from '@angular/cdk/drag-drop';
|
||||
import {CheckServiceStatusService} from '../../check-service-status.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-settings',
|
||||
imports: [AsyncPipe, DragDropModule, FormsModule, CommonModule],
|
||||
templateUrl: './settings.html',
|
||||
styleUrl: './settings.scss'
|
||||
})
|
||||
export class Settings implements OnInit {
|
||||
config$!: Observable<any>;
|
||||
editableConfig: any[] = [];
|
||||
hasChanges: boolean = false;
|
||||
isSaving: boolean = false;
|
||||
saveMessage: string = '';
|
||||
editingRows: Set<number> = new Set(); // Track which rows are in edit mode
|
||||
selectedFileName: string = '';
|
||||
selectedFileContent: any = null;
|
||||
importMessage: string = '';
|
||||
protected readonly Object = Object;
|
||||
|
||||
constructor(
|
||||
private store: Store,
|
||||
private sanitizer: DomSanitizer,
|
||||
private checkServiceStatusService: CheckServiceStatusService
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.config$ = this.store.select(ServiceStatusState.config);
|
||||
|
||||
// Subscribe to config changes to maintain editable copy
|
||||
this.config$.subscribe(config => {
|
||||
if (config) {
|
||||
this.editableConfig = JSON.parse(JSON.stringify(config)); // Deep copy
|
||||
this.hasChanges = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
exportConfig() {
|
||||
// Get current config from store
|
||||
const config = this.store.selectSnapshot(ServiceStatusState.config);
|
||||
|
||||
if (config) {
|
||||
// Convert config to JSON string
|
||||
const configJson = JSON.stringify(config, null, 2);
|
||||
|
||||
// Create blob and download
|
||||
const blob = new Blob([configJson], { type: 'application/json' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
|
||||
// Create temporary download link
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = 'config.json';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
// Cleanup
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(url);
|
||||
}
|
||||
}
|
||||
|
||||
getSafeHtml(html: string): SafeHtml {
|
||||
return this.sanitizer.bypassSecurityTrustHtml(html);
|
||||
}
|
||||
|
||||
// Drag and drop functionality
|
||||
drop(event: CdkDragDrop<any[]>) {
|
||||
moveItemInArray(this.editableConfig, event.previousIndex, event.currentIndex);
|
||||
this.hasChanges = true;
|
||||
}
|
||||
|
||||
// Add new service in edit mode
|
||||
addService() {
|
||||
const newService = {
|
||||
icon: '',
|
||||
name: 'New Service',
|
||||
url: 'https://example.com',
|
||||
headers: {}
|
||||
};
|
||||
this.editableConfig.push(newService);
|
||||
this.editingRows.add(this.editableConfig.length - 1); // Set new row to edit mode
|
||||
this.hasChanges = true;
|
||||
}
|
||||
|
||||
// Toggle edit mode for a row
|
||||
toggleEdit(index: number) {
|
||||
if (this.editingRows.has(index)) {
|
||||
this.editingRows.delete(index);
|
||||
} else {
|
||||
this.editingRows.add(index);
|
||||
}
|
||||
}
|
||||
|
||||
// Save changes for a specific row
|
||||
saveRow(index: number) {
|
||||
this.editingRows.delete(index);
|
||||
this.hasChanges = true;
|
||||
}
|
||||
|
||||
// Cancel editing for a row
|
||||
cancelEdit(index: number) {
|
||||
if (index >= this.editableConfig.length - 1 && this.editingRows.has(index)) {
|
||||
// If it's a new row being cancelled, remove it
|
||||
this.removeService(index);
|
||||
} else {
|
||||
// Otherwise just exit edit mode
|
||||
this.editingRows.delete(index);
|
||||
}
|
||||
}
|
||||
|
||||
// Check if row is in edit mode
|
||||
isEditing(index: number): boolean {
|
||||
return this.editingRows.has(index);
|
||||
}
|
||||
|
||||
// Update service property
|
||||
updateService(index: number, property: string, value: string) {
|
||||
this.editableConfig[index][property] = value;
|
||||
this.hasChanges = true;
|
||||
}
|
||||
|
||||
// Convert headers object to string for editing
|
||||
getHeadersAsString(headers: any): string {
|
||||
if (!headers || Object.keys(headers).length === 0) {
|
||||
return '';
|
||||
}
|
||||
return Object.entries(headers)
|
||||
.map(([key, value]) => `${key}:${value}`)
|
||||
.join(',');
|
||||
}
|
||||
|
||||
// Update service headers from string input
|
||||
updateServiceHeaders(index: number, value: string) {
|
||||
const headers: any = {};
|
||||
|
||||
if (value.trim()) {
|
||||
// Parse the string format: "key1:value1,key2:value2"
|
||||
const pairs = value.split(',');
|
||||
for (const pair of pairs) {
|
||||
const trimmedPair = pair.trim();
|
||||
if (trimmedPair) {
|
||||
const colonIndex = trimmedPair.indexOf(':');
|
||||
if (colonIndex > 0) {
|
||||
const key = trimmedPair.substring(0, colonIndex).trim();
|
||||
const val = trimmedPair.substring(colonIndex + 1).trim();
|
||||
if (key && val) {
|
||||
headers[key] = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.editableConfig[index].headers = headers;
|
||||
this.hasChanges = true;
|
||||
}
|
||||
|
||||
// Remove service
|
||||
removeService(index: number) {
|
||||
if (this.editableConfig.length > 1) {
|
||||
this.editableConfig.splice(index, 1);
|
||||
this.hasChanges = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Save changes to server and refresh services
|
||||
saveConfig() {
|
||||
if (this.hasChanges && !this.isSaving) {
|
||||
this.isSaving = true;
|
||||
this.saveMessage = '';
|
||||
|
||||
this.checkServiceStatusService.saveConfigAndRefresh(this.editableConfig).subscribe({
|
||||
next: (response) => {
|
||||
if (response.success) {
|
||||
this.hasChanges = false;
|
||||
this.saveMessage = '✅ Configuration saved and services refreshed!';
|
||||
} else {
|
||||
this.saveMessage = '❌ Failed to save configuration: ' + response.message;
|
||||
}
|
||||
this.isSaving = false;
|
||||
|
||||
// Clear message after 3 seconds
|
||||
setTimeout(() => this.saveMessage = '', 3000);
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error saving config:', error);
|
||||
this.saveMessage = '❌ Error saving configuration. Please try again.';
|
||||
this.isSaving = false;
|
||||
|
||||
// Clear message after 3 seconds
|
||||
setTimeout(() => this.saveMessage = '', 3000);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Reset changes
|
||||
resetChanges() {
|
||||
const originalConfig = this.store.selectSnapshot(ServiceStatusState.config);
|
||||
if (originalConfig) {
|
||||
this.editableConfig = JSON.parse(JSON.stringify(originalConfig));
|
||||
this.hasChanges = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Import functionality
|
||||
onFileSelected(event: any) {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
this.selectedFileName = file.name;
|
||||
this.importMessage = '';
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const content = e.target?.result as string;
|
||||
this.selectedFileContent = JSON.parse(content);
|
||||
|
||||
// Validate the imported config structure
|
||||
if (this.validateConfigStructure(this.selectedFileContent)) {
|
||||
this.importMessage = '✅ File is valid and ready to import';
|
||||
} else {
|
||||
this.importMessage = '❌ Invalid configuration format';
|
||||
this.selectedFileContent = null;
|
||||
}
|
||||
} catch (error) {
|
||||
this.importMessage = '❌ Invalid JSON file';
|
||||
this.selectedFileContent = null;
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
}
|
||||
|
||||
validateConfigStructure(config: any): boolean {
|
||||
// Check if config is an array and has valid structure
|
||||
if (!Array.isArray(config)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (const service of config) {
|
||||
if (!service.name || !service.url || typeof service.headers !== 'object') {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// Import config and automatically upload + refresh
|
||||
importConfig() {
|
||||
if (this.selectedFileContent && !this.isSaving) {
|
||||
this.isSaving = true;
|
||||
this.importMessage = '⏳ Importing and refreshing services...';
|
||||
|
||||
// Use the enhanced service to save and refresh automatically
|
||||
this.checkServiceStatusService.saveConfigAndRefresh(this.selectedFileContent).subscribe({
|
||||
next: (response) => {
|
||||
if (response.success) {
|
||||
this.importMessage = '✅ Configuration imported and services refreshed!';
|
||||
this.hasChanges = false;
|
||||
} else {
|
||||
this.importMessage = '❌ Failed to import configuration: ' + response.message;
|
||||
}
|
||||
this.isSaving = false;
|
||||
this.cancelImport();
|
||||
|
||||
// Clear message after 3 seconds
|
||||
setTimeout(() => this.importMessage = '', 3000);
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error importing config:', error);
|
||||
this.importMessage = '❌ Error importing configuration. Please try again.';
|
||||
this.isSaving = false;
|
||||
|
||||
// Clear message after 3 seconds
|
||||
setTimeout(() => this.importMessage = '', 3000);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
cancelImport() {
|
||||
this.selectedFileName = '';
|
||||
this.selectedFileContent = null;
|
||||
// Reset file input
|
||||
const fileInput = document.querySelector('.file-input') as HTMLInputElement;
|
||||
if (fileInput) {
|
||||
fileInput.value = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import {Injectable} from '@angular/core';
|
||||
import {HttpClient} from '@angular/common/http';
|
||||
import {Observable} from 'rxjs';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class ConfigService {
|
||||
constructor(private http: HttpClient) {}
|
||||
|
||||
getConfig(): Observable<any> {
|
||||
return this.http.get('/assets/config.json');
|
||||
}
|
||||
|
||||
saveConfig(config: any): Observable<any> {
|
||||
return this.http.post('/api/save-config', config);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
export class LoadConfig {
|
||||
static readonly type = '[ServiceStatus] Load Config';
|
||||
}
|
||||
export class CheckAllServicesStatus {
|
||||
static readonly type = '[ServiceStatus] Check All Services Status';
|
||||
}
|
||||
|
||||
export class CheckSpecifiedServiceStatus {
|
||||
static readonly type = '[ServiceStatus] Check Specified Service Status';
|
||||
constructor(public serviceName: string) {}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
import {Action, Selector, State, StateContext} from '@ngxs/store';
|
||||
import {Injectable} from '@angular/core';
|
||||
import {ConfigService} from '../services/config.service';
|
||||
import {catchError, map, tap} from 'rxjs/operators';
|
||||
import {forkJoin, Observable, of} from 'rxjs';
|
||||
import {Service, Status} from '../interfaces/services.interface';
|
||||
import {CheckAllServicesStatus, CheckSpecifiedServiceStatus, LoadConfig} from './service-status.action';
|
||||
import {CheckServiceStatusService} from '../check-service-status.service';
|
||||
|
||||
export interface ServiceStatusModel {
|
||||
config: any | null;
|
||||
loading: boolean;
|
||||
error: any | null;
|
||||
services: Service[];
|
||||
}
|
||||
|
||||
@State<ServiceStatusModel>({
|
||||
name: 'serviceStatus',
|
||||
defaults: {
|
||||
config: null,
|
||||
loading: false,
|
||||
error: null,
|
||||
services: []
|
||||
}
|
||||
})
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class ServiceStatusState {
|
||||
constructor(private configService: ConfigService, private checkServiceStatus: CheckServiceStatusService) {
|
||||
}
|
||||
|
||||
@Selector()
|
||||
static config(state: ServiceStatusModel) {
|
||||
return state.config;
|
||||
}
|
||||
|
||||
@Selector()
|
||||
static loading(state: ServiceStatusModel) {
|
||||
return state.loading;
|
||||
}
|
||||
|
||||
@Selector()
|
||||
static error(state: ServiceStatusModel) {
|
||||
return state.error;
|
||||
}
|
||||
|
||||
@Selector()
|
||||
static services(state: ServiceStatusModel): Service[] {
|
||||
return state.services;
|
||||
}
|
||||
|
||||
@Action(LoadConfig)
|
||||
loadConfig(ctx: StateContext<ServiceStatusModel>): Observable<any> {
|
||||
ctx.patchState({loading: true, error: null});
|
||||
return this.configService.getConfig().pipe(
|
||||
tap((data) => {
|
||||
ctx.patchState({config: data, loading: false});
|
||||
}),
|
||||
catchError((err) => {
|
||||
ctx.patchState({error: err, loading: false});
|
||||
return of(null);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
@Action(CheckAllServicesStatus)
|
||||
checkServicesStatus(ctx: StateContext<ServiceStatusModel>) {
|
||||
ctx.patchState({ loading: true });
|
||||
const config = ctx.getState().config;
|
||||
|
||||
if (!config || !Array.isArray(config)) {
|
||||
ctx.patchState({ services: [], loading: false });
|
||||
return;
|
||||
}
|
||||
const statusObservables = config.map((service: Service) =>
|
||||
this.checkServiceStatus.checkStatus(service.name, service.url, service.headers).pipe(
|
||||
map((status: Status) => ({ ...service, status, lastChecked: Date.now() }))
|
||||
)
|
||||
);
|
||||
return forkJoin(statusObservables).pipe(
|
||||
tap((services: Service[]) => {
|
||||
ctx.patchState({ services, loading: false });
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
@Action(CheckSpecifiedServiceStatus)
|
||||
checkSpecifiedServiceStatus(ctx: StateContext<ServiceStatusModel>, action: CheckSpecifiedServiceStatus) {
|
||||
const config = ctx.getState().config;
|
||||
if (!config || !Array.isArray(config)) return;
|
||||
const service = config.find((s: Service) => s.name === action.serviceName);
|
||||
if (!service) return;
|
||||
const services = ctx.getState().services.slice();
|
||||
const index = services.findIndex(s => s.name === action.serviceName);
|
||||
if (index !== -1) {
|
||||
services[index] = { ...services[index], status: 'loading' };
|
||||
ctx.patchState({ services });
|
||||
}
|
||||
this.checkServiceStatus.checkStatus(service.name, service.url, service.headers).subscribe((status: Status) => {
|
||||
const updatedServices = ctx.getState().services.map(s =>
|
||||
s.name === action.serviceName ? { ...s, status, lastChecked: Date.now() } : s
|
||||
);
|
||||
ctx.patchState({ services: updatedServices });
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n<linearGradient id=\"s4jFNnMAB4nIFX1Kv1Lz_a_bUiJaENo3bOZ_gr1\" x1=\"7.172\" x2=\"40.828\" y1=\"386.828\" y2=\"353.172\" gradientTransform=\"matrix(1 0 0 -1 0 394)\" gradientUnits=\"userSpaceOnUse\"><stop offset=\"0\" stop-color=\"#4c4c4c\"></stop><stop offset=\"1\" stop-color=\"#343434\"></stop></linearGradient><path fill=\"url(#s4jFNnMAB4nIFX1Kv1Lz_a_bUiJaENo3bOZ_gr1)\" d=\"M38,42H10c-2.209,0-4-1.791-4-4V10c0-2.209,1.791-4,4-4h28c2.209,0,4,1.791,4,4v28 C42,40.209,40.209,42,38,42z\"></path><linearGradient id=\"s4jFNnMAB4nIFX1Kv1Lz_b_bUiJaENo3bOZ_gr2\" x1=\"12.309\" x2=\"35.237\" y1=\"24\" y2=\"24\" gradientUnits=\"userSpaceOnUse\"><stop offset=\"0\" stop-color=\"#e36001\"></stop><stop offset=\".226\" stop-color=\"#eb8001\"></stop><stop offset=\".572\" stop-color=\"#f5ac00\"></stop><stop offset=\".842\" stop-color=\"#fcc700\"></stop><stop offset=\"1\" stop-color=\"#fed100\"></stop></linearGradient><polygon fill=\"url(#s4jFNnMAB4nIFX1Kv1Lz_b_bUiJaENo3bOZ_gr2)\" points=\"31.109,24 23.625,35.5 16.809,35.5 24.209,24 16.809,12.5 23.625,12.5\"></polygon>\n</svg>",
|
||||
"name": "Ikov Plex Server (Local)",
|
||||
"url": "https://iko-main.ddns.net/draw/",
|
||||
"headers": {}
|
||||
},
|
||||
{
|
||||
"icon": "<svg width=\"48px\" height=\"48px\" viewBox=\"0 0 48 48\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <g stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <!-- Globe -->\n <circle cx=\"24\" cy=\"24\" r=\"19\" />\n <!-- Meridians -->\n <path d=\"M24,5 L24,43\" />\n <path d=\"M5,24 L43,24\" />\n <ellipse cx=\"24\" cy=\"24\" rx=\"9.5\" ry=\"19\" />\n <!-- Refresh/Dynamic arrows -->\n <path d=\"M17,10 L12,15 L17,20\" />\n <path d=\"M31,38 L36,33 L31,28\" />\n </g>\n</svg>",
|
||||
"name": "Ikov ddns",
|
||||
"url": "https://iko-home.ddns.net/",
|
||||
"headers": {}
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>MainWeb</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,6 @@
|
||||
import {bootstrapApplication} from '@angular/platform-browser';
|
||||
import {appConfig} from './app/app.config';
|
||||
import {App} from './app/app';
|
||||
|
||||
bootstrapApplication(App, appConfig)
|
||||
.catch((err) => console.error(err));
|
||||
@@ -0,0 +1,120 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
@import "bootstrap/scss/bootstrap";
|
||||
@import './theme-variables.scss';
|
||||
@import './app/app.scss';
|
||||
|
||||
/* Theme variables for light/dark mode */
|
||||
:root {
|
||||
/* Light theme (default) */
|
||||
--background-color: #{$light-background-color};
|
||||
--text-color: #{$light-text-color};
|
||||
--border-color: #{$light-border-color};
|
||||
--table-header-bg: #{$light-table-header-bg};
|
||||
--table-stripe-bg: #{$light-table-stripe-bg};
|
||||
--table-even-row-bg: #{$light-table-even-row-bg};
|
||||
--table-hover-bg: #{$light-table-hover-bg};
|
||||
--btn-bg: #{$light-btn-bg};
|
||||
--btn-hover-bg: #{$light-btn-hover-bg};
|
||||
--status-up-color: #{$light-status-up-color};
|
||||
--status-down-color: #{$light-status-down-color};
|
||||
--status-loading-color: #{$light-status-loading-color};
|
||||
}
|
||||
|
||||
/* Dark theme */
|
||||
.dark-mode {
|
||||
--background-color: #{$dark-background-color};
|
||||
--text-color: #{$dark-text-color};
|
||||
--border-color: #{$dark-border-color};
|
||||
--table-header-bg: #{$dark-table-header-bg};
|
||||
--table-stripe-bg: #{$dark-table-stripe-bg};
|
||||
--table-even-row-bg: #{$dark-table-even-row-bg};
|
||||
--table-hover-bg: #{$dark-table-hover-bg};
|
||||
--btn-bg: #{$dark-btn-bg};
|
||||
--btn-hover-bg: #{$dark-btn-hover-bg};
|
||||
--status-up-color: #{$dark-status-up-color};
|
||||
--status-down-color: #{$dark-status-down-color};
|
||||
--status-loading-color: #{$dark-status-loading-color};
|
||||
}
|
||||
|
||||
/* Light theme explicit class (for manual toggle) */
|
||||
.light-mode {
|
||||
--background-color: #{$light-background-color};
|
||||
--text-color: #{$light-text-color};
|
||||
--border-color: #{$light-border-color};
|
||||
--table-header-bg: #{$light-table-header-bg};
|
||||
--table-stripe-bg: #{$light-table-stripe-bg};
|
||||
--table-even-row-bg: #{$light-table-even-row-bg};
|
||||
--table-hover-bg: #{$light-table-hover-bg};
|
||||
--btn-bg: #{$light-btn-bg};
|
||||
--btn-hover-bg: #{$light-btn-hover-bg};
|
||||
--status-up-color: #{$light-status-up-color};
|
||||
--status-down-color: #{$light-status-down-color};
|
||||
--status-loading-color: #{$light-status-loading-color};
|
||||
}
|
||||
|
||||
/* System preference dark theme */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not(.light-mode):not(.dark-mode) {
|
||||
--background-color: #{$dark-background-color};
|
||||
--text-color: #{$dark-text-color};
|
||||
--border-color: #{$dark-border-color};
|
||||
--table-header-bg: #{$dark-table-header-bg};
|
||||
--table-stripe-bg: #{$dark-table-stripe-bg};
|
||||
--table-even-row-bg: #{$dark-table-even-row-bg};
|
||||
--table-hover-bg: #{$dark-table-hover-bg};
|
||||
--btn-bg: #{$system-dark-btn-bg};
|
||||
--btn-hover-bg: #{$dark-btn-hover-bg};
|
||||
--status-up-color: #{$dark-status-up-color};
|
||||
--status-down-color: #{$dark-status-down-color};
|
||||
--status-loading-color: #{$dark-status-loading-color};
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply theme to html and body elements */
|
||||
html, body {
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
html.light-mode, html.light-mode body {
|
||||
background-color: #{$light-background-color};
|
||||
color: #{$light-text-color};
|
||||
}
|
||||
|
||||
html.dark-mode, html.dark-mode body {
|
||||
background-color: #{$dark-background-color};
|
||||
color: #{$dark-text-color};
|
||||
}
|
||||
|
||||
/* Default system-based theming */
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* Override Bootstrap styles with our theme variables */
|
||||
.table {
|
||||
--bs-table-color: var(--text-color);
|
||||
--bs-table-bg: var(--background-color);
|
||||
--bs-table-border-color: var(--border-color);
|
||||
--bs-table-striped-bg: var(--table-stripe-bg);
|
||||
--bs-table-striped-color: var(--text-color);
|
||||
--bs-table-hover-bg: var(--table-hover-bg);
|
||||
--bs-table-hover-color: var(--text-color);
|
||||
}
|
||||
|
||||
/* Style all table rows in light mode too */
|
||||
.table-striped > tbody > tr:nth-of-type(even) > * {
|
||||
background-color: var(--table-even-row-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--btn-bg);
|
||||
border-color: var(--btn-bg);
|
||||
color: #{$light-text-color};
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
background-color: var(--btn-hover-bg) !important;
|
||||
border-color: var(--btn-hover-bg) !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
/* Theme Variables - Centralized color definitions */
|
||||
|
||||
/* Light Theme Variables */
|
||||
$light-background-color: #ffffff;
|
||||
$light-text-color: #212529;
|
||||
$light-border-color: #dee2e6;
|
||||
$light-table-header-bg: #f8f9fa;
|
||||
$light-table-stripe-bg: #f2f2f2;
|
||||
$light-table-even-row-bg: #ffffff;
|
||||
$light-table-hover-bg: #ececec;
|
||||
$light-btn-bg: #a2e89d;
|
||||
$light-btn-hover-bg: #559551;
|
||||
$light-status-up-color: #198754;
|
||||
$light-status-down-color: #dc3545;
|
||||
$light-status-loading-color: #6c757d;
|
||||
|
||||
/* Dark Theme Variables */
|
||||
$dark-background-color: #212529;
|
||||
$dark-text-color: #f8f9fa;
|
||||
$dark-border-color: #495057;
|
||||
$dark-table-header-bg: #343a40;
|
||||
$dark-table-stripe-bg: #2c3034;
|
||||
$dark-table-even-row-bg: #212529;
|
||||
$dark-table-hover-bg: #343a40;
|
||||
$dark-btn-bg: #163714;
|
||||
$dark-btn-hover-bg: #497746;
|
||||
$dark-status-up-color: #75b798;
|
||||
$dark-status-down-color: #ea868f;
|
||||
$dark-status-loading-color: #adb5bd;
|
||||
|
||||
/* System Dark Theme Variables (slight variations) */
|
||||
$system-dark-btn-bg: #75b171;
|
||||
Reference in New Issue
Block a user