diff --git a/frontend/src/app/components/address-formatting-selector/address-formatting-selector.component.html b/frontend/src/app/components/address-formatting-selector/address-formatting-selector.component.html
new file mode 100644
index 000000000..431aa0392
--- /dev/null
+++ b/frontend/src/app/components/address-formatting-selector/address-formatting-selector.component.html
@@ -0,0 +1,13 @@
+
+
+
\ No newline at end of file
diff --git a/frontend/src/app/components/address-formatting-selector/address-formatting-selector.component.ts b/frontend/src/app/components/address-formatting-selector/address-formatting-selector.component.ts
new file mode 100644
index 000000000..7fc1c4a07
--- /dev/null
+++ b/frontend/src/app/components/address-formatting-selector/address-formatting-selector.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { AddressFormattingService, FormattingMode } from '@app/services/address-formatting.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+ selector: 'app-address-formatting-selector',
+ templateUrl: './address-formatting-selector.component.html',
+ styles: [],
+ standalone: false,
+})
+export class AddressFormattingSelectorComponent implements OnInit, OnDestroy {
+ form: FormGroup;
+ private formattingStateSubscription: Subscription;
+
+ constructor(
+ private fb: FormBuilder,
+ private formattingService: AddressFormattingService
+ ) {}
+
+ ngOnInit(): void {
+ this.form = this.fb.group({
+ mode: [this.formattingService.mode]
+ });
+
+ this.formattingStateSubscription = this.form.get('mode').valueChanges.subscribe((mode: FormattingMode) => {
+ this.formattingService.setMode(mode);
+ });
+ }
+
+ ngOnDestroy(): void {
+ if (this.formattingStateSubscription) {
+ this.formattingStateSubscription.unsubscribe();
+ }
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/app/services/address-formatting.service.ts b/frontend/src/app/services/address-formatting.service.ts
new file mode 100644
index 000000000..9cb7b5422
--- /dev/null
+++ b/frontend/src/app/services/address-formatting.service.ts
@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { StorageService } from './storage.service';
+
+export type FormattingMode = 'off' | 'color' | 'spacing' | 'copy';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class AddressFormattingService {
+ private readonly STORAGE_KEY = 'address-formatting-mode';
+
+ private modeSubject = new BehaviorSubject(this.getInitialState());
+ mode$ = this.modeSubject.asObservable();
+
+ constructor(private storageService: StorageService) {}
+
+ get mode(): FormattingMode {
+ return this.modeSubject.value;
+ }
+
+ setMode(mode: FormattingMode) {
+ this.modeSubject.next(mode);
+ this.storageService.setValue(this.STORAGE_KEY, mode);
+ }
+
+ get useColors(): boolean {
+ return this.mode !== 'off';
+ }
+
+ get useSpacing(): boolean {
+ return this.mode === 'spacing' || this.mode === 'copy';
+ }
+
+ get showCopyButton(): boolean {
+ return this.mode === 'copy';
+ }
+
+ private getInitialState(): FormattingMode {
+ const saved = this.storageService.getValue(this.STORAGE_KEY);
+ if (saved === 'color' || saved === 'spacing' || saved === 'copy') {
+ return saved as FormattingMode;
+ }
+ return 'off';
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/address-text/address-text.component.html b/frontend/src/app/shared/components/address-text/address-text.component.html
index ae8643349..a87d92c25 100644
--- a/frontend/src/app/shared/components/address-text/address-text.component.html
+++ b/frontend/src/app/shared/components/address-text/address-text.component.html
@@ -11,7 +11,10 @@
} @else {
-
-
-
+
}
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/address-text/address-text.component.ts b/frontend/src/app/shared/components/address-text/address-text.component.ts
index 65ae3006a..42fe4ef46 100644
--- a/frontend/src/app/shared/components/address-text/address-text.component.ts
+++ b/frontend/src/app/shared/components/address-text/address-text.component.ts
@@ -1,5 +1,7 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
import { AddressMatch, AddressTypeInfo } from '@app/shared/address-utils';
+import { AddressFormattingService } from '@app/services/address-formatting.service';
+import { Subscription } from 'rxjs';
@Component({
selector: 'app-address-text',
@@ -11,7 +13,7 @@ export class AddressTextComponent {
@Input() address: string;
@Input() info: AddressTypeInfo | null;
@Input() similarity: { score: number, match: AddressMatch, group: number } | null;
-
+ private formattingStateSubscription: Subscription;
min = Math.min;
groupColors: string[] = [
@@ -20,4 +22,21 @@ export class AddressTextComponent {
'var(--info)',
'white',
];
+
+ constructor(
+ public formattingService: AddressFormattingService,
+ private cd: ChangeDetectorRef
+ ) {}
+
+ ngOnInit() {
+ this.formattingStateSubscription = this.formattingService.mode$.subscribe(() => {
+ this.cd.markForCheck();
+ });
+ }
+
+ ngOnDestroy() {
+ if (this.formattingStateSubscription) {
+ this.formattingStateSubscription.unsubscribe();
+ }
+ }
}
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html
index 026c0ab47..eb2b196e9 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@@ -40,6 +40,9 @@
}
+