From 9ed4f5914ee50377597ed0efb63261b5144ce5e9 Mon Sep 17 00:00:00 2001
From: Tifenn Guillas <tifenn.guillas@lam.fr>
Date: Thu, 10 Sep 2020 11:23:29 +0200
Subject: [PATCH] Refactoring cone search => DONE
---
.../cone-search/components/dec.component.html | 33 +++++++++++++++----
.../cone-search/components/dec.component.ts | 23 ++++++++++---
.../cone-search/components/ra.component.html | 33 +++++++++++++++----
.../cone-search/components/ra.component.ts | 19 ++++++++++-
4 files changed, 91 insertions(+), 17 deletions(-)
diff --git a/src/app/shared/cone-search/components/dec.component.html b/src/app/shared/cone-search/components/dec.component.html
index a1fe8e30..b5cae055 100644
--- a/src/app/shared/cone-search/components/dec.component.html
+++ b/src/app/shared/cone-search/components/dec.component.html
@@ -11,7 +11,14 @@
<div class="row mt-2 px-3">
<div class="col px-0 pr-xl-1">
<div class="input-group">
- <input type="text" class="form-control" [formControl]="decH" (input)="decChange('hms')" (change)="setToDefaultValue()" autocomplete="off">
+ <input type="text"
+ class="form-control"
+ [formControl]="decH"
+ (input)="decChange('hms')"
+ (focusin)="changeFocus('dech', true)"
+ (focusout)="changeFocus('dech', false)"
+ (change)="setToDefaultValue()"
+ autocomplete="off">
<div class="input-group-append">
<span class="input-group-text">°</span>
</div>
@@ -20,7 +27,14 @@
<div class="w-100 d-block d-xl-none"></div>
<div class="col mt-1 mt-xl-auto px-0 pr-xl-1">
<div class="input-group">
- <input type="text" class="form-control" [formControl]="decM" (input)="decChange('hms')" (change)="setToDefaultValue()" autocomplete="off">
+ <input type="text"
+ class="form-control"
+ [formControl]="decM"
+ (input)="decChange('hms')"
+ (focusin)="changeFocus('decm', true)"
+ (focusout)="changeFocus('decm', false)"
+ (change)="setToDefaultValue()"
+ autocomplete="off">
<div class="input-group-append">
<span class="input-group-text">'</span>
</div>
@@ -29,7 +43,14 @@
<div class="w-100 d-block d-xl-none"></div>
<div class="col mt-1 mt-xl-auto px-0">
<div class="input-group">
- <input type="text" class="form-control" [formControl]="decS" (input)="decChange('hms')" (change)="setToDefaultValue()" autocomplete="off">
+ <input type="text"
+ class="form-control"
+ [formControl]="decS"
+ (input)="decChange('hms')"
+ (focusin)="changeFocus('decs', true)"
+ (focusout)="changeFocus('decs', false)"
+ (change)="setToDefaultValue()"
+ autocomplete="off">
<div class="input-group-append">
<span class="input-group-text">''</span>
</div>
@@ -45,7 +66,7 @@
{{ decDegree.errors.range.value }}
</div>
</div>
-<div *ngIf="decH.invalid && (decH.dirty || decH.touched)" class="row px-3 text-danger">
+<div *ngIf="decH.invalid" class="row px-3 text-danger">
<div *ngIf="decH.errors.nan">
{{ decH.errors.nan.value }}
</div>
@@ -53,7 +74,7 @@
{{ decH.errors.range.value }}
</div>
</div>
-<div *ngIf="decM.invalid && (decM.dirty || decM.touched)" class="row px-3 text-danger">
+<div *ngIf="decM.invalid" class="row px-3 text-danger">
<div *ngIf="decM.errors.nan">
{{ decM.errors.nan.value }}
</div>
@@ -61,7 +82,7 @@
{{ decM.errors.range.value }}
</div>
</div>
-<div *ngIf="decS.invalid && (decS.dirty || decS.touched)" class="row px-3 text-danger">
+<div *ngIf="decS.invalid" class="row px-3 text-danger">
<div *ngIf="decS.errors.nan">
{{ decS.errors.nan.value }}
</div>
diff --git a/src/app/shared/cone-search/components/dec.component.ts b/src/app/shared/cone-search/components/dec.component.ts
index 14b2bfb4..04d10828 100644
--- a/src/app/shared/cone-search/components/dec.component.ts
+++ b/src/app/shared/cone-search/components/dec.component.ts
@@ -22,7 +22,7 @@ export class DecComponent {
this.radius = coneSearch.radius;
if (coneSearch.dec) {
this.decDegree.setValue(coneSearch.dec);
- if(this.decDegree.valid) {
+ if(this.decDegree.valid && !this.decHFocused && !this.decMFocused && !this.decSFocused) {
this.decDegree2HMS(coneSearch.dec);
}
} else {
@@ -56,6 +56,9 @@ export class DecComponent {
isDisabled = false;
isDegree = true;
resolvedDec: number;
+ decHFocused: boolean = false;
+ decMFocused: boolean = false;
+ decSFocused: boolean = false;
decDegree = new FormControl('', [Validators.required, nanValidator, rangeValidator(-90, 90, 'DEC')]);
decH = new FormControl('', [nanValidator, rangeValidator(-90, 90, 'Degree')]);
@@ -104,17 +107,30 @@ export class DecComponent {
this.decDegree.setValue(+deg.toFixed(8));
}
+ changeFocus(field: string, isFocused: boolean) {
+ switch (field) {
+ case 'dech':
+ this.decHFocused = isFocused;
+ break;
+ case 'decm':
+ this.decMFocused = isFocused;
+ break
+ case 'decs':
+ this.decSFocused = isFocused;
+ break;
+ }
+ }
+
decChange(prop: string): void {
if (prop === 'degree') {
if (this.decDegree.valid) {
this.decDegree2HMS(this.decDegree.value);
- this.updateConeSearch.emit({ ra: this.ra, dec: this.decDegree.value, radius: this.radius } as ConeSearch);
} else {
this.decH.reset();
this.decM.reset();
this.decS.reset();
- this.updateConeSearch.emit({ ra: this.ra, dec: this.decDegree.value, radius: this.radius } as ConeSearch);
}
+ this.updateConeSearch.emit({ ra: this.ra, dec: this.decDegree.value, radius: this.radius } as ConeSearch);
} else {
if (this.decH.valid && this.decM.valid && this.decS.valid) {
this.setToDefaultValue();
@@ -122,7 +138,6 @@ export class DecComponent {
this.updateConeSearch.emit({ ra: this.ra, dec: this.decDegree.value, radius: this.radius } as ConeSearch);
} else {
this.decDegree.reset();
- this.updateConeSearch.emit({ ra: this.ra, dec: this.decDegree.value, radius: this.radius } as ConeSearch);
}
}
this.resetResolver();
diff --git a/src/app/shared/cone-search/components/ra.component.html b/src/app/shared/cone-search/components/ra.component.html
index 15b2e617..0b3ed4de 100644
--- a/src/app/shared/cone-search/components/ra.component.html
+++ b/src/app/shared/cone-search/components/ra.component.html
@@ -11,7 +11,14 @@
<div class="row mt-2 px-3">
<div class="col px-0 pr-xl-1">
<div class="input-group">
- <input type="text" class="form-control" [formControl]="raH" (input)="raChange('hms')" (change)="setToDefaultValue()" autocomplete="off">
+ <input type="text"
+ class="form-control"
+ [formControl]="raH"
+ (input)="raChange('hms')"
+ (focusin)="changeFocus('rah', true)"
+ (focusout)="changeFocus('rah', false)"
+ (change)="setToDefaultValue()"
+ autocomplete="off">
<div class="input-group-append">
<span class="input-group-text">H</span>
</div>
@@ -20,7 +27,14 @@
<div class="w-100 d-block d-xl-none"></div>
<div class="col mt-1 mt-xl-auto px-0 pr-xl-1">
<div class="input-group">
- <input type="text" class="form-control" [formControl]="raM" (input)="raChange('hms')" (change)="setToDefaultValue()" autocomplete="off">
+ <input type="text"
+ class="form-control"
+ [formControl]="raM"
+ (input)="raChange('hms')"
+ (focusin)="changeFocus('ram', true)"
+ (focusout)="changeFocus('ram', false)"
+ (change)="setToDefaultValue()"
+ autocomplete="off">
<div class="input-group-append">
<span class="input-group-text">'</span>
</div>
@@ -29,7 +43,14 @@
<div class="w-100 d-block d-xl-none"></div>
<div class="col mt-1 mt-xl-auto px-0">
<div class="input-group">
- <input type="text" class="form-control" [formControl]="raS" (input)="raChange('hms')" (change)="setToDefaultValue()" autocomplete="off">
+ <input type="text"
+ class="form-control"
+ [formControl]="raS"
+ (input)="raChange('hms')"
+ (focusin)="changeFocus('ras', true)"
+ (focusout)="changeFocus('ras', false)"
+ (change)="setToDefaultValue()"
+ autocomplete="off">
<div class="input-group-append">
<span class="input-group-text">''</span>
</div>
@@ -45,7 +66,7 @@
{{ raDegree.errors.range.value }}
</div>
</div>
-<div *ngIf="raH.invalid && (raH.dirty || raH.touched)" class="row px-3 text-danger">
+<div *ngIf="raH.invalid" class="row px-3 text-danger">
<div *ngIf="raH.errors.nan">
{{ raH.errors.nan.value }}
</div>
@@ -53,7 +74,7 @@
{{ raH.errors.range.value }}
</div>
</div>
-<div *ngIf="raM.invalid && (raM.dirty || raM.touched)" class="row px-3 text-danger">
+<div *ngIf="raM.invalid" class="row px-3 text-danger">
<div *ngIf="raM.errors.nan">
{{ raM.errors.nan.value }}
</div>
@@ -61,7 +82,7 @@
{{ raM.errors.range.value }}
</div>
</div>
-<div *ngIf="raS.invalid && (raS.dirty || raS.touched)" class="row px-3 text-danger">
+<div *ngIf="raS.invalid" class="row px-3 text-danger">
<div *ngIf="raS.errors.nan">
{{ raS.errors.nan.value }}
</div>
diff --git a/src/app/shared/cone-search/components/ra.component.ts b/src/app/shared/cone-search/components/ra.component.ts
index 9756c3de..85a617b8 100644
--- a/src/app/shared/cone-search/components/ra.component.ts
+++ b/src/app/shared/cone-search/components/ra.component.ts
@@ -22,7 +22,7 @@ export class RaComponent {
this.radius = coneSearch.radius;
if (coneSearch.ra) {
this.raDegree.setValue(coneSearch.ra);
- if (this.raDegree.valid) {
+ if (this.raDegree.valid && !this.raHFocused && !this.raMFocused && !this.raSFocused) {
this.raDegree2HMS(coneSearch.ra);
}
} else {
@@ -56,6 +56,9 @@ export class RaComponent {
isDisabled = false;
isDegree = true;
resolvedRa: number;
+ raHFocused: boolean = false;
+ raMFocused: boolean = false;
+ raSFocused: boolean = false;
raDegree = new FormControl('', [Validators.required, nanValidator, rangeValidator(0, 360, 'RA')]);
raH = new FormControl('', [nanValidator, rangeValidator(0, 24, 'Hours')]);
@@ -101,6 +104,20 @@ export class RaComponent {
this.raDegree.setValue(deg);
}
+ changeFocus(field: string, isFocused: boolean) {
+ switch (field) {
+ case 'rah':
+ this.raHFocused = isFocused;
+ break;
+ case 'ram':
+ this.raMFocused = isFocused;
+ break
+ case 'ras':
+ this.raSFocused = isFocused;
+ break;
+ }
+ }
+
raChange(prop: string): void {
if (prop === 'degree') {
if (this.raDegree.valid) {
--
GitLab