Add text-to-speech for severe weather alerts

client/src/app/components/rdio-scanner/admin/admin.component.ts

@@ -25,6 +25,8 @@ import { AdminEvent, Config, RdioScannerAdminService } from './admin.service';
 import { RdioScannerAdminLogsComponent } from './logs/logs.component';
 import { RdioScannerAdminConfigComponent } from './config/config.component';
 import { RdioScannerAdminToolsComponent } from './tools/tools.component';
+import { TransferUserDialogComponent } from './config/users/transfer-user-dialog.component';
+import { DeleteSystemDialogComponent } from './config/systems/delete-system-dialog.component';
 
 export interface SearchResult {
     label: string;

client/src/app/components/rdio-scanner/admin/admin.module.ts

@@ -47,6 +47,7 @@ import { RdioScannerAdminUserRegistrationComponent } from './config/user-registr
 import { RdioScannerAdminUsersComponent } from './config/users/users.component';
 import { InviteUserDialogComponent, InvitationResultsDialogComponent, CreateUserDialogComponent, ResetPasswordDialogComponent } from './config/users/invite-user-dialog.component';
 import { TransferUserDialogComponent } from './config/users/transfer-user-dialog.component';
+import { DeleteSystemDialogComponent } from './config/systems/delete-system-dialog.component';
 import { RequestAPIKeyDialogComponent } from './config/options/request-api-key-dialog.component';
 import { RecoverAPIKeyDialogComponent } from './config/options/recover-api-key-dialog.component';
 import { RelayAccountDialogComponent } from './config/options/relay-account-dialog.component';
@@ -105,6 +106,7 @@ import { TalkgroupLocationDialogComponent } from './config/systems/system/talkgr
         CreateUserDialogComponent,
         ResetPasswordDialogComponent,
         TransferUserDialogComponent,
+        DeleteSystemDialogComponent,
         RequestAPIKeyDialogComponent,
         RecoverAPIKeyDialogComponent,
         RelayAccountDialogComponent,

client/src/app/components/rdio-scanner/admin/config/systems/delete-system-dialog.component.ts

@@ -0,0 +1,85 @@
+/*
+ * *****************************************************************************
+ * Copyright (C) 2025 Thinline Dynamic Solutions
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>
+ * ****************************************************************************
+ */
+
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+export interface DeleteSystemDialogData {
+  /** The system's display name/label the operator must type back exactly. */
+  systemLabel: string;
+}
+
+@Component({
+  selector: 'rdio-scanner-delete-system-dialog',
+  template: `
+    <h2 mat-dialog-title>Delete System</h2>
+    <mat-dialog-content>
+      <p class="mat-body" style="margin-bottom: 12px;">
+        This permanently deletes <strong>{{ data.systemLabel }}</strong> — its talkgroups, sites,
+        units, tone sets, and all associated calls. This cannot be undone.
+      </p>
+      <p class="mat-body" style="margin-bottom: 8px;">
+        Type <strong>{{ data.systemLabel }}</strong> below to confirm:
+      </p>
+      <form [formGroup]="confirmForm">
+        <mat-form-field appearance="outline" class="full-width">
+          <mat-label>System name</mat-label>
+          <input matInput formControlName="confirmText" autocomplete="off"
+                 (keydown.enter)="matches() && onConfirm()">
+        </mat-form-field>
+      </form>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-button (click)="onCancel()">Cancel</button>
+      <button mat-raised-button color="warn"
+              [disabled]="!matches()"
+              (click)="onConfirm()">
+        Delete System
+      </button>
+    </mat-dialog-actions>
+  `,
+})
+export class DeleteSystemDialogComponent {
+  confirmForm: FormGroup;
+
+  constructor(
+    private dialogRef: MatDialogRef<DeleteSystemDialogComponent, boolean>,
+    private formBuilder: FormBuilder,
+    @Inject(MAT_DIALOG_DATA) public data: DeleteSystemDialogData,
+  ) {
+    this.confirmForm = this.formBuilder.group({ confirmText: [''] });
+  }
+
+  /** Exact, case-sensitive match — same behavior as GitHub's "type to confirm". */
+  matches(): boolean {
+    const typed = this.confirmForm.get('confirmText')?.value ?? '';
+    return typed === this.data.systemLabel;
+  }
+
+  onConfirm(): void {
+    if (this.matches()) {
+      this.dialogRef.close(true);
+    }
+  }
+
+  onCancel(): void {
+    this.dialogRef.close(false);
+  }
+}

client/src/app/components/rdio-scanner/admin/config/systems/system/system.component.html

@@ -42,7 +42,7 @@ <h3>{{ $any(form.value).label?.trim() || 'New System' }}</h3>
             <mat-icon>{{ saveSuccess ? 'check_circle' : 'save' }}</mat-icon>
             {{ saving ? 'Saving…' : (saveSuccess ? 'Saved!' : 'Save System') }}
         </button>
-        <button type="button" mat-stroked-button color="warn" (click)="remove.emit()">
+        <button type="button" mat-stroked-button color="warn" (click)="confirmRemove()">
             <mat-icon>delete</mat-icon> Delete System
         </button>
     </div>

client/src/app/components/rdio-scanner/rdio-scanner.module.ts

@@ -61,6 +61,7 @@ import { RdioScannerWeatherWidgetComponent } from './weather/weather-widget.comp
 import { RdioScannerWeatherAlertTickerComponent } from './weather/weather-alert-ticker.component';
 import { WeatherAlertTickerBridgeService } from './weather/weather-alert-ticker-bridge.service';
 import { NwsService } from './weather/nws.service';
+import { WeatherAlertTtsService } from './weather/weather-alert-tts.service';
 
 @NgModule({
     declarations: [
@@ -116,6 +117,7 @@ import { NwsService } from './weather/nws.service';
         RdioScannerAdminService,
         TranscriptReviewService,
         NwsService,
+        WeatherAlertTtsService,
         { provide: OverlayContainer, useClass: FullscreenOverlayContainer },
     ],
 })

client/src/app/components/rdio-scanner/settings/settings.component.html

@@ -91,6 +91,27 @@ <h4>Severe Weather Alert Sound</h4>
                     </mat-slide-toggle>
                 </div>
 
+                <div class="setting-header">
+                    <mat-slide-toggle
+                        [(ngModel)]="weatherAlertTtsEnabled"
+                        (ngModelChange)="onWeatherAlertTtsChange()"
+                        [disabled]="!ttsSupported"
+                        color="primary">
+                        Read severe weather alerts aloud (text-to-speech)
+                    </mat-slide-toggle>
+                </div>
+                <p class="setting-hint" *ngIf="!ttsSupported">
+                    Text-to-speech isn't supported in this browser.
+                </p>
+                <div class="sound-actions" *ngIf="ttsSupported">
+                    <button type="button" mat-stroked-button class="sound-action-btn"
+                            [disabled]="!weatherAlertTtsEnabled"
+                            (click)="previewWeatherAlertTts()">
+                        <mat-icon>record_voice_over</mat-icon>
+                        Test Voice
+                    </button>
+                </div>
+
                 <div class="sound-controls">
                     <mat-form-field appearance="outline" class="sound-field" subscriptSizing="dynamic">
                         <mat-label>Weather Alert Sound</mat-label>

client/src/app/components/rdio-scanner/settings/settings.component.ts

@@ -27,6 +27,7 @@ import { SettingsService } from './settings.service';
 import { TagColorService, TagColorConfig } from '../tag-color.service';
 import { AlertSoundService, AlertSound } from '../alert-sound.service';
 import { WeatherAlertTickerBridgeService } from '../weather/weather-alert-ticker-bridge.service';
+import { WeatherAlertTtsService } from '../weather/weather-alert-tts.service';
 import { AlertsService } from '../alerts/alerts.service';
 import { RdioScannerAlertPreference } from '../rdio-scanner';
 import { APP_FONTS } from '../app-font.util';
@@ -50,6 +51,8 @@ export class RdioScannerSettingsComponent implements OnDestroy, OnInit {
     alertSound: string = 'alert';
     weatherAlertSoundEnabled = false;
     weatherAlertSound: string = 'alert';
+    weatherAlertTtsEnabled = false;
+    ttsSupported = true;
     availableAlertSounds: AlertSound[] = [];
 
     // Font selection
@@ -107,7 +110,9 @@ export class RdioScannerSettingsComponent implements OnDestroy, OnInit {
         private fb: FormBuilder,
         private snackBar: MatSnackBar,
         private weatherAlertTickerBridge: WeatherAlertTickerBridgeService,
+        private weatherAlertTtsService: WeatherAlertTtsService,
     ) {
+        this.ttsSupported = this.weatherAlertTtsService.isSupported();
         this.emailForm = this.fb.group({
             newEmail: ['', [Validators.required, Validators.email]],
             password: ['', [Validators.required]],
@@ -421,6 +426,7 @@ export class RdioScannerSettingsComponent implements OnDestroy, OnInit {
                 this.alertSound = this.settings.alertSound || 'alert';
                 this.weatherAlertSoundEnabled = !!this.settings.weatherAlertSoundEnabled;
                 this.weatherAlertSound = this.settings.weatherAlertSound || 'alert';
+                this.weatherAlertTtsEnabled = !!this.settings.weatherAlertTtsEnabled;
                 // Load font setting
                 this.appFont = this.settings.appFont || 'Roboto';
                 this.appFontService.apply(this.appFont);
@@ -433,6 +439,7 @@ export class RdioScannerSettingsComponent implements OnDestroy, OnInit {
                 this.alertSound = 'alert';
                 this.weatherAlertSoundEnabled = false;
                 this.weatherAlertSound = 'alert';
+                this.weatherAlertTtsEnabled = false;
                 this.appFont = 'Roboto';
             },
         });
@@ -502,6 +509,7 @@ export class RdioScannerSettingsComponent implements OnDestroy, OnInit {
         this.settings.alertSound = this.alertSound;
         this.settings.weatherAlertSoundEnabled = this.weatherAlertSoundEnabled;
         this.settings.weatherAlertSound = this.weatherAlertSound;
+        this.settings.weatherAlertTtsEnabled = this.weatherAlertTtsEnabled;
         this.settings.appFont = this.appFont;
         this.settingsService.saveSettings(this.settings).subscribe({
             next: () => {
@@ -538,14 +546,25 @@ export class RdioScannerSettingsComponent implements OnDestroy, OnInit {
         this.saveSettings();
     }
 
+    onWeatherAlertTtsChange(): void {
+        this.saveSettings();
+    }
+
     previewAlertSound(soundName: string): void {
         this.alertSoundService.previewSound(soundName);
     }
 
+    previewWeatherAlertTts(): void {
+        this.weatherAlertTtsService.speak(
+            'Severe Thunderstorm Warning for your area. This is a sample of the weather alert reader.',
+        );
+    }
+
     testWeatherAlertTicker(): void {
         const played = this.weatherAlertTickerBridge.triggerTest(
             this.weatherAlertSoundEnabled,
             this.weatherAlertSound,
+            this.weatherAlertTtsEnabled,
         );
         if (!played) {
             this.snackBar.open('Could not reach the header ticker. Try refreshing the page.', 'Close', {

client/src/app/components/rdio-scanner/weather/weather-alert-ticker-bridge.service.ts

@@ -20,11 +20,11 @@ export class WeatherAlertTickerBridgeService {
         }
     }
 
-    triggerTest(playSound: boolean, soundName?: string): boolean {
+    triggerTest(playSound: boolean, soundName?: string, speakTts?: boolean): boolean {
         if (!this.ticker) {
             return false;
         }
-        this.ticker.showTestAlert(playSound, soundName);
+        this.ticker.showTestAlert(playSound, soundName, speakTts);
         return true;
     }
 }

client/src/app/components/rdio-scanner/weather/weather-alert-ticker.component.ts

@@ -14,6 +14,7 @@ import { AlertSoundService } from '../alert-sound.service';
 import { SettingsService } from '../settings/settings.service';
 import { NwsSevereAlert, NwsService } from './nws.service';
 import { WeatherAlertTickerBridgeService } from './weather-alert-ticker-bridge.service';
+import { WeatherAlertTtsService } from './weather-alert-tts.service';
 
 const TEST_ALERT_DURATION_MS = 25_000;
 
@@ -41,6 +42,7 @@ export class RdioScannerWeatherAlertTickerComponent implements OnInit, OnDestroy
         private settingsService: SettingsService,
         private alertSoundService: AlertSoundService,
         private tickerBridge: WeatherAlertTickerBridgeService,
+        private weatherAlertTtsService: WeatherAlertTtsService,
         private cdr: ChangeDetectorRef,
     ) {}
 
@@ -82,7 +84,7 @@ export class RdioScannerWeatherAlertTickerComponent implements OnInit, OnDestroy
         }
     }
 
-    showTestAlert(playSound: boolean, soundOverride?: string): void {
+    showTestAlert(playSound: boolean, soundOverride?: string, speakTts?: boolean): void {
         if (this.testClearTimer) {
             clearTimeout(this.testClearTimer);
         }
@@ -103,6 +105,9 @@ export class RdioScannerWeatherAlertTickerComponent implements OnInit, OnDestroy
         if (playSound) {
             this.playConfiguredSound(soundOverride);
         }
+        if (speakTts) {
+            this.weatherAlertTtsService.speakAlerts(testAlerts);
+        }
 
         this.testClearTimer = setTimeout(() => this.clearTestAlert(), TEST_ALERT_DURATION_MS);
     }
@@ -145,8 +150,10 @@ export class RdioScannerWeatherAlertTickerComponent implements OnInit, OnDestroy
         }
         const newIds = alerts.map((a) => a.id).filter(Boolean);
         const hasNew = newIds.some((id) => !this.knownAlertIds.has(id));
+        const newAlerts = alerts.filter((a) => a.id && !this.knownAlertIds.has(a.id));
         if (hasNew && this.knownAlertIds.size > 0) {
             this.maybePlaySound();
+            this.maybeSpeakAlerts(newAlerts);
         }
         if (hasNew && alerts.length > 0) {
             this.flashing = true;
@@ -179,6 +186,14 @@ export class RdioScannerWeatherAlertTickerComponent implements OnInit, OnDestroy
         this.playConfiguredSound();
     }
 
+    private maybeSpeakAlerts(alerts: NwsSevereAlert[]): void {
+        const enabled = !!this.settingsSnapshot['weatherAlertTtsEnabled'];
+        if (!enabled || !alerts.length) {
+            return;
+        }
+        this.weatherAlertTtsService.speakAlerts(alerts);
+    }
+
     private playConfiguredSound(soundOverride?: string): void {
         const sound = soundOverride
             || (typeof this.settingsSnapshot['weatherAlertSound'] === 'string'