Browse Source

🚧 prepare simple UI adjuster

jmacura 3 năm trước cách đây
mục cha
commit
e1812b4504

+ 0 - 0
src/adjuster/adjuster.component.html → src/adjuster/adjuster-advanced-panel.component.html


+ 0 - 0
src/adjuster/adjuster.component.scss → src/adjuster/adjuster-advanced-panel.component.scss


+ 4 - 13
src/adjuster/adjuster-advanced-panel.component.ts

@@ -1,21 +1,17 @@
-import {Component, OnInit, ViewRef} from '@angular/core';
+import {Component, ViewRef} from '@angular/core';
 
-import {HsDialogContainerService} from 'hslayers-ng';
 import {HsLayoutService} from 'hslayers-ng';
 import {HsPanelComponent} from 'hslayers-ng';
 
-import {AdjusterLoaderComponent} from './adjuster-loader.component';
 import {AdjusterPresetsService} from './adjuster-presets.service';
 import {AdjusterService} from './adjuster.service';
 
 @Component({
   selector: 'pra-adjuster-advanced',
-  templateUrl: './adjuster.component.html',
-  styleUrls: ['./adjuster.component.scss'],
+  templateUrl: './adjuster-advanced-panel.component.html',
+  styleUrls: ['./adjuster-advanced-panel.component.scss'],
 })
-export class AdjusterAdvancedPanelComponent
-  implements HsPanelComponent, OnInit
-{
+export class AdjusterAdvancedPanelComponent implements HsPanelComponent {
   name = 'adjuster-advanced';
   data: any;
   errorMsg: string;
@@ -26,7 +22,6 @@ export class AdjusterAdvancedPanelComponent
   constructor(
     public adjusterService: AdjusterService,
     public adjusterPresetsService: AdjusterPresetsService,
-    public hsDialogContainerService: HsDialogContainerService,
     public hsLayoutService: HsLayoutService
   ) {
     //this.descriptionVisible = false;
@@ -38,10 +33,6 @@ export class AdjusterAdvancedPanelComponent
     });*/
   }
 
-  ngOnInit(): void {
-    this.hsDialogContainerService.create(AdjusterLoaderComponent, {});
-  }
-
   hasDatasets(factor): boolean {
     return factor.datasets.length > 0;
   }

+ 76 - 0
src/adjuster/adjuster-simple-panel.component.html

@@ -0,0 +1,76 @@
+<div [hidden]="!isVisible()" class="card mainpanel">
+  <hs-panel-header name="adjuster" [title]="'ADJUSTER.adjustFactors' | translate"></hs-panel-header>
+  <div class="card-body">
+    <div class="p-2 center-block">
+      <div class="d-flex flex-row">
+        <div>
+          <button type="button" class="btn btn-primary btn-lg" (click)="adjusterService.apply()"
+            [disabled]="adjusterService.isInProcess() || adjUIService.noDataSelected() || adjUIService.noOperationSelected() ">{{'ADJUSTER.calculate' | translate}}</button>
+        </div>
+        <div>
+          <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
+            [ngClass]="adjusterService.allowIndex ? 'hs-checkmark' : 'hs-uncheckmark'"
+            (click)="adjusterService.allowIndex = !adjusterService.allowIndex; $event.stopPropagation()"></button>
+          <label class="pl-2 text-secondary">{{'ADJUSTER.index' | translate}}</label>
+        </div>
+        <div>
+          <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
+            [ngClass]="adjusterService.allowClusters ? 'hs-checkmark' : 'hs-uncheckmark'"
+            (click)="adjusterService.allowClusters = !adjusterService.allowClusters; $event.stopPropagation()"></button>
+            <label class="pl-2 text-secondary">{{'ADJUSTER.clusters' | translate}}</label>
+        </div>
+      </div>
+      <div class="text-warning pt-2" [hidden]="!adjUIService.noDataSelected() || errorMsg">{{'ADJUSTER.noDataSelectedMsg' | translate}}</div>
+      <div class="text-danger pt-2" [hidden]="!errorMsg">{{'ADJUSTER.serverError' | translate}}: {{errorMsg}}</div>
+    </div>
+    <div class="p-2 center-block">
+      {{'ADJUSTER.myRoleIs' | translate}}:&emsp;
+      <select class="form-select" [(ngModel)]="adjusterPresetsService.activeRole" (ngModelChange)="adjusterPresetsService.pickProblem($event)">
+        <option *ngFor="let role of adjusterPresetsService.roles" [ngValue]="role">{{adjUIService.getLabelInCurrentLang(role.labels)}}</option>
+      </select>
+      {{'ADJUSTER.myProblemIs' | translate}}:&emsp;
+      <select class="form-select" [(ngModel)]="adjusterPresetsService.activeProblem" (ngModelChange)="adjusterPresetsService.applyProblem($event)">
+        <option *ngFor="let problem of adjusterPresetsService.getActiveRoleProblems()" [ngValue]="problem">{{adjUIService.getLabelInCurrentLang(problem.labels)}}</option>
+      </select>
+    </div>
+    <button class="btn btn-secondary btn-sm" aria-expanded="false" aria-controls="advancedOptions" (click)="showAdvancedOptions = !showAdvancedOptions">
+      <span class="glyphicon cursor-pointer" [ngClass]="showAdvancedOptions ? 'icon-chevron-down' : 'icon-chevron-right'"></span>
+      {{'ADJUSTER.advanced' | translate}}
+    </button>
+    <div class="p-2 center-block" [hidden]="!showAdvancedOptions">
+      {{'ADJUSTER.classifyBySchema' | translate}}:&emsp;
+      <select class="form-select" [(ngModel)]="adjusterPresetsService.activeSchema" (ngModelChange)="adjusterPresetsService.changeSchema($event)">
+        <option *ngFor="let schema of adjusterPresetsService.schemas" [ngValue]="schema">{{adjUIService.getLabelInCurrentLang(schema.labels)}}</option>
+      </select>
+    </div>
+    <div class="p-2 center-block" [hidden]="!adjusterService.allowClusters">
+      <div class="pt-2 text-secondary">{{'ADJUSTER.numberOfClusters' | translate}}: {{adjusterService.numberOfClusters}}</div>
+      <input type="range" class="custom-range" [(ngModel)]="adjusterService.numberOfClusters" min="5" max="15" step="1">
+    </div>
+    <div *ngFor="let factor of adjusterService.factors">
+      <pra-dataset-list [factor]="factor" *ngIf="adjUIService.hasDatasets(factor)"></pra-dataset-list>
+    </div>
+    <hr>
+    <!--form role="form" class="pt-3 form" [hidden]="!adjusterService.clustersLoaded()">
+      <div class="form-group">
+        <div class="input-group">
+          <label class="text-center">Display clusters calculated by method</label>
+          <div>
+            <select class="form-control" [(ngModel)]="method" (ngModelChange)="selectMethod()" name="method"
+              [value]="method">
+              <option *ngFor="let method of adjusterService.methods" [value]="method.codename">{{method.name}}
+              </option>
+            </select>
+          </div>
+        </div>
+        <small class="text-justify text-info">REMEMBER: Not all clustering methods will provide meaningful results. Always
+          take the output with a grain of salt.</small>
+      </div>
+    </form-->
+    <hr>
+    <div class="pt-3 center-block" [hidden]="adjusterService.isInProcess()">
+      {{'ADJUSTER.layerManagerLink1' | translate}}<br>
+      {{'ADJUSTER.layerManagerLink2' | translate}} <a href="" (click)="hsLayoutService.setMainPanel('layermanager');$event.preventDefault();">{{'ADJUSTER.layerManagerLinkLMName' | translate}}</a>
+    </div>
+  </div>
+</div>

+ 6 - 2
src/adjuster/adjuster-simple-panel.component.ts

@@ -3,12 +3,14 @@ import {Component, ViewRef} from '@angular/core';
 import {HsLayoutService} from 'hslayers-ng';
 import {HsPanelComponent} from 'hslayers-ng';
 
+import {AdjusterPresetsService} from './adjuster-presets.service';
+import {AdjusterService} from './adjuster.service';
 import {AdjusterUIService} from './adjuster-ui.service';
 
 @Component({
   selector: 'pra-adjuster-simple',
-  templateUrl: './adjuster.component.html',
-  styleUrls: ['./adjuster.component.scss'],
+  templateUrl: './adjuster-simple-panel.component.html',
+  styleUrls: ['./adjuster-advanced-panel.component.scss'],
 })
 export class AdjusterSimplePanelComponent implements HsPanelComponent {
   name = 'adjuster-simple';
@@ -20,6 +22,8 @@ export class AdjusterSimplePanelComponent implements HsPanelComponent {
 
   constructor(
     public adjUIService: AdjusterUIService,
+    public adjusterPresetsService: AdjusterPresetsService,
+    public adjusterService: AdjusterService,
     public hsLayoutService: HsLayoutService
   ) {}
 

+ 3 - 1
src/adjuster/adjuster.module.ts

@@ -11,6 +11,7 @@ import {AdjusterEventService} from './adjuster-event.service';
 import {AdjusterLegendService} from './adjuster-legend.service';
 import {AdjusterLoaderComponent} from './adjuster-loader.component';
 import {AdjusterService} from './adjuster.service';
+import {AdjusterSimplePanelComponent} from './adjuster-simple-panel.component';
 import {AttractivenessClustersService} from './attractiveness-clusters.service';
 import {AttractivenessIndexService} from './attractiveness-index.service';
 import {DatasetListComponent} from './dataset-list/dataset-list.component';
@@ -25,10 +26,11 @@ import {MetadataDialogComponent} from './metadata-dialog/metadata-dialog.compone
     NgbModule,
     TranslateModule,
   ],
-  exports: [AdjusterAdvancedPanelComponent],
+  exports: [AdjusterAdvancedPanelComponent, AdjusterSimplePanelComponent],
   declarations: [
     AdjusterAdvancedPanelComponent,
     AdjusterLoaderComponent,
+    AdjusterSimplePanelComponent,
     DatasetListComponent,
     MetadataDialogComponent,
   ],

+ 1 - 1
src/adjuster/dataset-list/dataset-list.component.ts

@@ -8,7 +8,7 @@ import {MetadataDialogComponent} from '../metadata-dialog/metadata-dialog.compon
 @Component({
   selector: 'pra-dataset-list',
   templateUrl: './dataset-list.component.html',
-  styleUrls: ['../adjuster.component.scss'],
+  styleUrls: ['../adjuster-advanced-panel.component.scss'],
 })
 export class DatasetListComponent implements OnInit {
   @Input() factor;

+ 1 - 0
src/adjuster/ontology.model.ts

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 // Generated by https://quicktype.io
 
 export interface RDFSubject {

+ 1 - 1
src/app.module.ts

@@ -3,7 +3,7 @@ import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
 
 import {HslayersModule} from 'hslayers-ng';
 
-import {AdjusterModule} from './adjuster';
+import {AdjusterModule} from './adjuster/adjuster.module';
 import {AppComponent} from './app.component';
 
 @NgModule({

+ 12 - 1
src/app.service.ts

@@ -23,6 +23,7 @@ import {AdjusterAdvancedPanelComponent} from './adjuster/adjuster-advanced-panel
 import {AdjusterEventService} from './adjuster/adjuster-event.service';
 import {AdjusterLegendService} from './adjuster/adjuster-legend.service';
 import {AdjusterService} from './adjuster/adjuster.service';
+import {AdjusterSimplePanelComponent} from './adjuster/adjuster-simple-panel.component';
 import {AppConfig, nuts2Layer, nuts3IndexLayer} from './app.config';
 import {nuts} from './nuts';
 
@@ -64,7 +65,17 @@ export class AppService {
     public hsToastService: HsToastService
   ) {
     this.hsSidebarService.buttons.push({
-      panel: 'adjuster',
+      panel: 'adjuster-simple',
+      module: 'pra.adjuster',
+      order: 0,
+      title: () =>
+        this.hsLanguageService.getTranslation('ADJUSTER.adjustFactors'),
+      description: 'Adjust factors for computation',
+      icon: 'icon-analytics-piechart',
+    });
+    this.hsPanelContainerService.create(AdjusterSimplePanelComponent, {});
+    this.hsSidebarService.buttons.push({
+      panel: 'adjuster-advanced',
       module: 'pra.adjuster',
       order: 0,
       title: () =>