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