webapp/src/app/config/config.component.ts

   1 import { Component, OnInit } from "@angular/core";
   2 import { Observable } from 'rxjs/Observable';
   3 import { FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms';
   4
   5 // Import RxJs required methods
   6 import 'rxjs/add/operator/map';
   7 import 'rxjs/add/operator/filter';
   8 import 'rxjs/add/operator/debounceTime';
   9
  10 import { ConfigService, IConfig, IProject, ProjectType } from "../common/config.service";
  11 import { XDSServerService, IServerStatus } from "../common/xdsserver.service";
  12 import { SyncthingService, ISyncThingStatus } from "../common/syncthing.service";
  13 import { AlertService } from "../common/alert.service";
  14 import { ISdk, SdkService } from "../common/sdk.service";
  15
  16 @Component({
  17     templateUrl: './app/config/config.component.html',
  18     styleUrls: ['./app/config/config.component.css']
  19 })
  20
  21 // Inspired from https://embed.plnkr.co/jgDTXknPzAaqcg9XA9zq/
  22 // and from http://plnkr.co/edit/vCdjZM?p=preview
  23
  24 export class ConfigComponent implements OnInit {
  25
  26     config$: Observable<IConfig>;
  27     sdks$: Observable<ISdk[]>;
  28     severStatus$: Observable<IServerStatus>;
  29     localSTStatus$: Observable<ISyncThingStatus>;
  30
  31     curProj: number;
  32     userEditedLabel: boolean = false;
  33
  34     // TODO replace by reactive FormControl + add validation
  35     syncToolUrl: string;
  36     syncToolRetry: string;
  37     projectsRootDir: string;
  38     showApplyBtn = {    // Used to show/hide Apply buttons
  39         "retry": false,
  40         "rootDir": false,
  41     };
  42
  43     addProjectForm: FormGroup;
  44     pathCtrl = new FormControl("", Validators.required);
  45
  46
  47     constructor(
  48         private configSvr: ConfigService,
  49         private xdsSvr: XDSServerService,
  50         private stSvr: SyncthingService,
  51         private sdkSvr: SdkService,
  52         private alert: AlertService,
  53         private fb: FormBuilder
  54     ) {
  55         // FIXME implement multi project support
  56         this.curProj = 0;
  57         this.addProjectForm = fb.group({
  58             path: this.pathCtrl,
  59             label: ["", Validators.nullValidator],
  60         });
  61     }
  62
  63     ngOnInit() {
  64         this.config$ = this.configSvr.conf;
  65         this.sdks$ = this.sdkSvr.Sdks$;
  66         this.severStatus$ = this.xdsSvr.Status$;
  67         this.localSTStatus$ = this.stSvr.Status$;
  68
  69         // Bind syncToolUrl to baseURL
  70         this.config$.subscribe(cfg => {
  71             this.syncToolUrl = cfg.localSThg.URL;
  72             this.syncToolRetry = String(cfg.localSThg.retry);
  73             this.projectsRootDir = cfg.projectsRootDir;
  74         });
  75
  76         // Auto create label name
  77         this.pathCtrl.valueChanges
  78             .debounceTime(100)
  79             .filter(n => n)
  80             .map(n => "Project_" + n.split('/')[0])
  81             .subscribe(value => {
  82                 if (value && !this.userEditedLabel) {
  83                     this.addProjectForm.patchValue({ label: value });
  84                 }
  85             });
  86     }
  87
  88     onKeyLabel(event: any) {
  89         this.userEditedLabel = (this.addProjectForm.value.label !== "");
  90     }
  91
  92     submitGlobConf(field: string) {
  93         switch (field) {
  94             case "retry":
  95                 let re = new RegExp('^[0-9]+$');
  96                 let rr = parseInt(this.syncToolRetry, 10);
  97                 if (re.test(this.syncToolRetry) && rr >= 0) {
  98                     this.configSvr.syncToolRetry = rr;
  99                 } else {
 100                     this.alert.warning("Not a valid number", true);
 101                 }
 102                 break;
 103             case "rootDir":
 104                 this.configSvr.projectsRootDir = this.projectsRootDir;
 105                 break;
 106             default:
 107                 return;
 108         }
 109         this.showApplyBtn[field] = false;
 110     }
 111
 112     syncToolRestartConn() {
 113         this.configSvr.syncToolURL = this.syncToolUrl;
 114         this.configSvr.loadProjects();
 115     }
 116
 117     onSubmit() {
 118         let formVal = this.addProjectForm.value;
 119
 120         this.configSvr.addProject({
 121             label: formVal['label'],
 122             path: formVal['path'],
 123             type: ProjectType.SYNCTHING,
 124             // FIXME: allow to set defaultSdkID from New Project config panel
 125         });
 126     }
 127
 128 }