diff --git a/src/app/pages/simulation-wizard/results-map/results-map.component.html b/src/app/pages/simulation-wizard/results-map/results-map.component.html index 46046d125d1e937050395e69a79097154fe54fb9..2db75993b408b04ff504e5b3ddb4cc1ed4b27297 100644 --- a/src/app/pages/simulation-wizard/results-map/results-map.component.html +++ b/src/app/pages/simulation-wizard/results-map/results-map.component.html @@ -56,83 +56,86 @@ </nb-card-footer> </nb-card> </ng-template> - </div> - <div id="grayscaleInput"> - <input - type="range" - [(ngModel)]="grayscale" - (change)="grayscaleChange()" - /> + <div id="grayscaleInput"> + <input + type="range" + [(ngModel)]="grayscale" + (change)="grayscaleChange()" + /> + </div> </div> <div id="inputsLegendContainer"> <form [formGroup]="newBrinkValues" (ngSubmit)="onApplyNewValuesSubmit()"> - <section> + <div> + <div> + <label for="">1st color, up to</label> + <input + nbInput + size="tiny" + type="number" + min="0" + max="1000000" + formControlName="legend_0" + /> + </div> + <div> + <label for="">2nd color, up to</label> + <input + nbInput + size="tiny" + type="number" + min="0" + max="1000000" + formControlName="legend_1" + /> + </div> <div> - <div> - <label for="">1st color, up to</label> - <input - nbInput - size="tiny" - type="number" - min="0" - max="1000000" - formControlName="legend_0" - /> - </div> - <div> - <label for="">2nd color, up to</label> - <input - nbInput - size="tiny" - type="number" - min="0" - max="1000000" - formControlName="legend_1" - /> - </div> - <div> - <label for="">3rd color, up to</label> - <input - nbInput - size="tiny" - type="number" - min="0" - max="1000000" - formControlName="legend_2" - /> - </div> - <div> - <label for="">4th color, up to</label> - <input - nbInput - size="tiny" - type="number" - min="0" - max="1000000" - formControlName="legend_3" - /> - </div> - <div> - <label for="">5th color, up to</label> - <input - nbInput - size="tiny" - type="number" - min="0" - max="1000000" - formControlName="legend_4" - /> - </div> - <div> - <label for="">6th color, up to unlimited</label> - </div> + <label for="">3rd color, up to</label> + <input + nbInput + size="tiny" + type="number" + min="0" + max="1000000" + formControlName="legend_2" + /> + </div> + <div> + <label for="">4th color, up to</label> + <input + nbInput + size="tiny" + type="number" + min="0" + max="1000000" + formControlName="legend_3" + /> + </div> + <div> + <label for="">5th color, up to</label> + <input + nbInput + size="tiny" + type="number" + min="0" + max="1000000" + formControlName="legend_4" + /> </div> <div> - <button nbButton status="primary" type="submit"> - Apply new values - </button> + <label for="">6th color, up to unlimited</label> </div> - </section> + </div> + <div> + <button + nbButton + status="primary" + type="submit" + [disabled]="!newBrinkValues.dirty" + > + Apply new values + </button> + </div> </form> </div> </nb-card-body> diff --git a/src/app/pages/simulation-wizard/results-map/results-map.component.scss b/src/app/pages/simulation-wizard/results-map/results-map.component.scss index 8247c04c8d177cb206582f3226246ac6e70b657c..0b6ed8eca5a9f4d7491efdbc36c4661d7d1de974 100644 --- a/src/app/pages/simulation-wizard/results-map/results-map.component.scss +++ b/src/app/pages/simulation-wizard/results-map/results-map.component.scss @@ -44,30 +44,32 @@ } #inputsLegendContainer { padding: 10px; - section { + form { display: flex; flex-direction: row; justify-content: center; align-items: center; - margin-bottom: 10px; - } - div:nth-of-type(6) label { - width: 100%; - text-align: center; - } - div label { - display: inline-block; - width: 140px; - border-radius: 0.25rem; - text-align: right; - font-weight: bold; - background: #fff; - padding: 2px 5px; - } - input { - margin: 2px 5px; - height: 1rem; - width: 10rem; + div:nth-of-type(6) label { + width: 100%; + text-align: center; + } + div label { + display: inline-block; + width: 140px; + border-radius: 0.25rem; + text-align: right; + font-weight: bold; + padding: 3px 7px; + } + input { + margin-bottom: 2px; + margin-left: 5px; + height: 1rem; + width: 10rem; + } + div:nth-child(2) button { + margin-left: 8px; + } } } } diff --git a/src/app/pages/simulation-wizard/results-map/results-map.component.ts b/src/app/pages/simulation-wizard/results-map/results-map.component.ts index b68d8e7c54bf23080a8a99fe9a02bc8994791f4c..448a5ab0a3d0231d55fc2c68cc40b4072c3f5de9 100644 --- a/src/app/pages/simulation-wizard/results-map/results-map.component.ts +++ b/src/app/pages/simulation-wizard/results-map/results-map.component.ts @@ -58,14 +58,14 @@ export class ResultsMapComponent implements OnChanges { this.grayscaleChange(); const legendLabels = document.querySelectorAll( - "#inputsLegendContainer section > div > div > label" + "#inputsLegendContainer > form > div > div > label" ); for (let i = 0; i < legendLabels.length; i++) { (legendLabels[i] as HTMLElement).style.backgroundColor = MapColors.colorsAll[legendLabels.length - i - 1]; } const inputsLegend = document.querySelectorAll( - "#inputsLegendContainer section > div > div > input" + "#inputsLegendContainer > form > div > div > input" ); for (let i = 0; i < inputsLegend.length; i++) { (inputsLegend[i] as HTMLElement).style.backgroundColor = @@ -223,6 +223,8 @@ export class ResultsMapComponent implements OnChanges { this.resetLayersAndButton(); this.selectedGeojson = undefined; + + // when the user will newly click on things, new geojsons will be created this.newBrinkValuesApplied = true; }