Add folder synchronization status.

Also add ability to force re-synchronization.

7 files changed, 146 insertions, 49 deletions

diff --git a/webapp/src/app/config/config.component.css b/webapp/src/app/config/config.component.css
index 208ce6f..2bb3fea 100644
--- a/webapp/src/app/config/config.component.css
+++ b/webapp/src/app/config/config.component.css
@@ -24,3 +24,7 @@ tr.info>th {
 tr.info>td {
     vertical-align: middle;
 }
+
+.panel-heading {
+    background: aliceblue;
+}
diff --git a/webapp/src/app/devel/build/build.component.html b/webapp/src/app/devel/build/build.component.html
index 7f85aa6..a66231c 100644
--- a/webapp/src/app/devel/build/build.component.html
+++ b/webapp/src/app/devel/build/build.component.html
@@ -18,7 +18,7 @@
                         </tr>
                         <tr>
                             <th>Project root path</th>
-                            <td> <input type="text" disabled style="width:99%;" [value]="curProject && curProject.path"></td>
+                            <td> <input type="text" disabled style="width:99%;" [value]="curProject && curProject.pathClient"></td>
                         </tr>
                         <tr>
                             <th>Sub-path</th>
@@ -105,4 +105,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/webapp/src/app/projects/projectAddModal.component.ts b/webapp/src/app/projects/projectAddModal.component.ts
index 47e9c89..7ef5b5e 100644
--- a/webapp/src/app/projects/projectAddModal.component.ts
+++ b/webapp/src/app/projects/projectAddModal.component.ts
@@ -62,7 +62,17 @@ export class ProjectAddModalComponent {
         this.pathCliCtrl.valueChanges
             .debounceTime(100)
             .filter(n => n)
-            .map(n => "Project_" + n.split('/')[0])
+            .map(n => {
+                let last = n.split('/');
+                let nm = n;
+                if (last.length > 0) {
+                     nm = last.pop();
+                     if (nm === "" && last.length > 0) {
+                        nm = last.pop();
+                     }
+                }
+                return "Project_" + nm;
+            })
             .subscribe(value => {
                 if (value && !this.userEditedLabel) {
                     this.addProjectForm.patchValue({ label: value });
@@ -97,10 +107,10 @@ export class ProjectAddModalComponent {
 
     onChangeLocalProject(e) {
         if e.target.files.length < 1 {
-            console.log('SEB NO files');
+            console.log('NO files');
         }
         let dir = e.target.files[0].webkitRelativePath;
-        console.log("SEB files: " + dir);
+        console.log("files: " + dir);
         let u = URL.createObjectURL(e.target.files[0]);
     }
     */
diff --git a/webapp/src/app/projects/projectCard.component.ts b/webapp/src/app/projects/projectCard.component.ts
index 1b89fe7..a7ca9a3 100644
--- a/webapp/src/app/projects/projectCard.component.ts
+++ b/webapp/src/app/projects/projectCard.component.ts
@@ -8,7 +8,9 @@ import { AlertService } from "../services/alert.service";
         <div class="row">
             <div class="col-xs-12">
                 <div class="text-right" role="group">
-                    <button class="btn btn-link" (click)="delete(project)"><span class="fa fa-trash fa-size-x2"></span></button>
+                    <button class="btn btn-link" (click)="delete(project)">
+                        <span class="fa fa-trash fa-size-x2"></span>
+                    </button>
                 </div>
             </div>
         </div>
@@ -27,16 +29,18 @@ import { AlertService } from "../services/alert.service";
                 <th><span class="fa fa-fw fa-folder-open-o"></span>&nbsp;<span>Local path</span></th>
                 <td>{{ project.pathClient }}</td>
             </tr>
-            <tr *ngIf="project.pathServer != ''">
+            <tr *ngIf="project.pathServer && project.pathServer != ''">
                 <th><span class="fa fa-fw fa-folder-open-o"></span>&nbsp;<span>Server path</span></th>
                 <td>{{ project.pathServer }}</td>
             </tr>
-            <!--
             <tr>
-                <th><span class="fa fa-fw fa-status"></span>&nbsp;<span>Status</span></th>
-                <td>{{ project.remotePrjDef.status }}</td>
+                <th><span class="fa fa-fw fa-flag"></span>&nbsp;<span>Status</span></th>
+                <td>{{ project.status }} - {{ project.isInSync ? "Up to Date" : "Out of Sync"}}
+                    <button *ngIf="!project.isInSync" class="btn btn-link" (click)="sync(project)">
+                        <span class="fa fa-refresh fa-size-x2"></span>
+                    </button>
+                </td>
             </tr>
-            -->
             </tbody>
         </table >
     `,
@@ -53,7 +57,6 @@ export class ProjectCardComponent {
     ) {
     }
 
-
     delete(prj: IProject) {
         this.configSvr.deleteProject(prj)
             .subscribe(res => {
@@ -62,6 +65,14 @@ export class ProjectCardComponent {
             });
     }
 
+    sync(prj: IProject) {
+        this.configSvr.syncProject(prj)
+            .subscribe(res => {
+            }, err => {
+                this.alert.error("ERROR: " + err);
+            });
+    }
+
 }
 
 // Remove APPS. prefix if translate has failed
diff --git a/webapp/src/app/projects/projectsListAccordion.component.ts b/webapp/src/app/projects/projectsListAccordion.component.ts
index 1b43cea..6e697f4 100644
--- a/webapp/src/app/projects/projectsListAccordion.component.ts
+++ b/webapp/src/app/projects/projectsListAccordion.component.ts
@@ -5,12 +5,25 @@ import { IProject } from "../services/config.service";
 @Component({
     selector: 'projects-list-accordion',
     template: `
+        <style>
+            .fa.fa-exclamation-triangle {
+                margin-right: 2em;
+                color: red;
+            }
+            .fa.fa-refresh {
+                margin-right: 10px;
+                color: darkviolet;
+            }
+        </style>
         <accordion>
             <accordion-group #group *ngFor="let prj of projects">
                 <div accordion-heading>
                     {{ prj.label }}
-                    <i class="pull-right float-xs-right fa"
-                    [ngClass]="{'fa-chevron-down': group.isOpen, 'fa-chevron-right': !group.isOpen}"></i>
+                    <div class="pull-right">
+                        <i *ngIf="prj.status == 'Syncing'" class="fa fa-refresh faa-spin animated"></i>
+                        <i *ngIf="!prj.isInSync && prj.status != 'Syncing'" class="fa fa-exclamation-triangle"></i>
+                        <i class="fa" [ngClass]="{'fa-chevron-down': group.isOpen, 'fa-chevron-right': !group.isOpen}"></i>
+                    </div>
                 </div>
                 <project-card [project]="prj"></project-card>
             </accordion-group>
diff --git a/webapp/src/app/services/config.service.ts b/webapp/src/app/services/config.service.ts
index 3b51768..f5e353c 100644
--- a/webapp/src/app/services/config.service.ts
+++ b/webapp/src/app/services/config.service.ts
@@ -29,18 +29,15 @@ export var ProjectTypes = [
     { value: ProjectType.SYNCTHING, display: "Cloud Sync" }
 ];
 
-export interface INativeProject {
-    // TODO
-}
-
 export interface IProject {
     id?: string;
     label: string;
     pathClient: string;
     pathServer?: string;
     type: ProjectType;
-    remotePrjDef?: INativeProject | ISyncThingProject;
-    localPrjDef?: any;
+    status?: string;
+    isInSync?: boolean;
+    serverPrjDef?: IXDSFolderConfig;
     isExpanded?: boolean;
     visible?: boolean;
     defaultSdkID?: string;
@@ -139,6 +136,17 @@ export class ConfigService {
             );
             this.confSubject.next(Object.assign({}, this.confStore));
         });
+
+        // Update Project data
+        this.xdsServerSvr.FolderStateChange$.subscribe(prj => {
+            let i = this._getProjectIdx(prj.id);
+            if (i >= 0) {
+                // XXX for now, only isInSync and status may change
+                this.confStore.projects[i].isInSync = prj.isInSync;
+                this.confStore.projects[i].status = prj.status;
+                this.confSubject.next(Object.assign({}, this.confStore));
+            }
+        });
     }
 
     // Save config into cookie
@@ -215,17 +223,8 @@ export class ConfigService {
                 this.stSvr.getProjects().subscribe(localPrj => {
                     remotePrj.forEach(rPrj => {
                         let lPrj = localPrj.filter(item => item.id === rPrj.id);
-                        if (lPrj.length > 0) {
-                            let pp: IProject = {
-                                id: rPrj.id,
-                                label: rPrj.label,
-                                pathClient: rPrj.path,
-                                pathServer: rPrj.dataPathMap.serverPath,
-                                type: rPrj.type,
-                                remotePrjDef: Object.assign({}, rPrj),
-                                localPrjDef: Object.assign({}, lPrj[0]),
-                            };
-                            this.confStore.projects.push(pp);
+                        if (lPrj.length > 0 || rPrj.type === ProjectType.NATIVE_PATHMAP) {
+                            this._addProject(rPrj, true);
                         }
                     });
                     this.confSubject.next(Object.assign({}, this.confStore));
@@ -306,18 +305,15 @@ export class ConfigService {
         let newPrj = prj;
         return this.xdsServerSvr.addProject(xdsPrj)
             .flatMap(resStRemotePrj => {
-                newPrj.remotePrjDef = resStRemotePrj;
-                newPrj.id = resStRemotePrj.id;
-                newPrj.pathClient = resStRemotePrj.path;
-
-                if (newPrj.type === ProjectType.SYNCTHING) {
+                xdsPrj = resStRemotePrj;
+                if (xdsPrj.type === ProjectType.SYNCTHING) {
                     // FIXME REWORK local ST config
                     //  move logic to server side tunneling-back by WS
-                    let stData = resStRemotePrj.dataCloudSync;
+                    let stData = xdsPrj.dataCloudSync;
 
                     // Now setup local config
                     let stLocPrj: ISyncThingProject = {
-                        id: resStRemotePrj.id,
+                        id: xdsPrj.id,
                         label: xdsPrj.label,
                         path: xdsPrj.path,
                         serverSyncThingID: stData.builderSThgID
@@ -327,18 +323,11 @@ export class ConfigService {
                     return this.stSvr.addProject(stLocPrj);
 
                 } else {
-                    newPrj.pathServer = resStRemotePrj.dataPathMap.serverPath;
                     return Observable.of(null);
                 }
             })
             .map(resStLocalPrj => {
-                newPrj.localPrjDef = resStLocalPrj;
-
-                // FIXME: maybe reduce subject to only .project
-                //this.confSubject.next(Object.assign({}, this.confStore).project);
-                this.confStore.projects.push(Object.assign({}, newPrj));
-                this.confSubject.next(Object.assign({}, this.confStore));
-
+                this._addProject(xdsPrj);
                 return newPrj;
             });
     }
@@ -351,7 +340,10 @@ export class ConfigService {
         }
         return this.xdsServerSvr.deleteProject(prj.id)
             .flatMap(res => {
-                return this.stSvr.deleteProject(prj.id);
+                if (prj.type === ProjectType.SYNCTHING) {
+                    return this.stSvr.deleteProject(prj.id);
+                }
+                return Observable.of(null);
             })
             .map(res => {
                 this.confStore.projects.splice(idx, 1);
@@ -359,8 +351,51 @@ export class ConfigService {
             });
     }
 
+    syncProject(prj: IProject): Observable<string> {
+        let idx = this._getProjectIdx(prj.id);
+        if (idx === -1) {
+            throw new Error("Invalid project id (id=" + prj.id + ")");
+        }
+        return this.xdsServerSvr.syncProject(prj.id);
+    }
+
     private _getProjectIdx(id: string): number {
         return this.confStore.projects.findIndex((item) => item.id === id);
     }
 
+    private _addProject(rPrj: IXDSFolderConfig, noNext?: boolean) {
+
+        // Convert XDSFolderConfig to IProject
+        let pp: IProject = {
+            id: rPrj.id,
+            label: rPrj.label,
+            pathClient: rPrj.path,
+            pathServer: rPrj.dataPathMap.serverPath,
+            type: rPrj.type,
+            status: rPrj.status,
+            isInSync: rPrj.isInSync,
+            defaultSdkID: rPrj.defaultSdkID,
+            serverPrjDef: Object.assign({}, rPrj),  // do a copy
+        };
+
+        // add new project
+        this.confStore.projects.push(pp);
+
+        // sort project array
+        this.confStore.projects.sort((a, b) => {
+            if (a.label < b.label) {
+                return -1;
+            }
+            if (a.label > b.label) {
+                return 1;
+            }
+            return 0;
+        });
+
+        // FIXME: maybe reduce subject to only .project
+        //this.confSubject.next(Object.assign({}, this.confStore).project);
+        if (!noNext) {
+            this.confSubject.next(Object.assign({}, this.confStore));
+        }
+    }
 }
diff --git a/webapp/src/app/services/xdsserver.service.ts b/webapp/src/app/services/xdsserver.service.ts
index b11fe9f..b69a196 100644
--- a/webapp/src/app/services/xdsserver.service.ts
+++ b/webapp/src/app/services/xdsserver.service.ts
@@ -38,12 +38,13 @@ export interface IXDSFolderConfig {
     path: string;
     type: number;
     status?: string;
+    isInSync?: boolean;
     defaultSdkID: string;
 
     // FIXME better with union but tech pb with go code
     //data?: IXDSPathMapConfig|IXDSCloudSyncConfig;
-    dataPathMap?:IXDSPathMapConfig;
-    dataCloudSync?:IXDSCloudSyncConfig;
+    dataPathMap?: IXDSPathMapConfig;
+    dataCloudSync?: IXDSCloudSyncConfig;
 }
 
 export interface IXDSPathMapConfig {
@@ -106,8 +107,10 @@ export class XDSServerService {
 
     public CmdOutput$ = <Subject<ICmdOutput>>new Subject();
     public CmdExit$ = <Subject<ICmdExit>>new Subject();
+    public FolderStateChange$ = <Subject<IXDSFolderConfig>>new Subject();
     public Status$: Observable<IServerStatus>;
 
+
     private baseUrl: string;
     private wsUrl: string;
     private _status = { WS_connected: false };
@@ -127,6 +130,7 @@ export class XDSServerService {
         } else {
             this.wsUrl = 'ws://' + re[1];
             this._handleIoSocket();
+            this._RegisterEvents();
         }
     }
 
@@ -172,6 +176,22 @@ export class XDSServerService {
             this.CmdExit$.next(Object.assign({}, <ICmdExit>data));
         });
 
+        this.socket.on('event:FolderStateChanged', ev => {
+            if (ev && ev.folder) {
+                this.FolderStateChange$.next(Object.assign({}, ev.folder));
+            }
+        });
+    }
+
+    private _RegisterEvents() {
+        let ev = "FolderStateChanged";
+        this._post('/events/register', { "name": ev })
+            .subscribe(
+            res => { },
+            error => {
+                this.alert.error("ERROR while registering events " + ev + ": ", error);
+            }
+            );
     }
 
     getSdks(): Observable<ISdk[]> {
@@ -194,6 +214,10 @@ export class XDSServerService {
         return this._delete('/folder/' + id);
     }
 
+    syncProject(id: string): Observable<string> {
+        return this._post('/folder/sync/' + id, {});
+    }
+
     exec(prjID: string, dir: string, cmd: string, sdkid?: string, args?: string[], env?: string[]): Observable<any> {
         return this._post('/exec',
             {