Add updaet model by file (#241)

* Add updaet model by file * Append files * Fix spelling
NREL · May 19, 2023 · a13e9ed · a13e9ed
1 parent 1448e60
commit a13e9ed
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 29 deletions.
diff --git a/buildingmotif-app/src/app/model-detail/model-detail.component.css b/buildingmotif-app/src/app/model-detail/model-detail.component.css
@@ -23,10 +23,6 @@
     padding-top: 1rem;
 }
 
-button {
-    width: 5rem;
-}
-
 .side-nav-button {
     display: flex;
 }

diff --git a/buildingmotif-app/src/app/model-detail/model-detail.component.html b/buildingmotif-app/src/app/model-detail/model-detail.component.html
@@ -1,33 +1,42 @@
-    <mat-drawer-container class="container">
-        <div class="main-content-and-button">
-            <!-- Main Content -->
-            <div class="main-content">
-                <div class="title">{{model.name}}</div>
-
+<mat-drawer-container class="container">
+    <div class="main-content-and-button">
+        <!-- Main Content -->
+        <div class="main-content">
+            <div class="title">{{model.name}}</div>
+            <mat-progress-bar mode="indeterminate" *ngIf="updatingGraphSpinner"></mat-progress-bar>
+            <div class="graph-info" *ngIf="!updatingGraphSpinner">
                 <ngx-codemirror #codemirror class="graph" [options]="codeMirrorOptions" [formControl]="graphFormControl">
                 </ngx-codemirror>
 
+                <!-- Buttons -->
                 <div class="buttons">
                     <button mat-raised-button (click)="onSave()" color="primary">Save</button>
                     <button mat-raised-button (click)="undoChangesToGraph()" color="primary">Undo</button>
+                    <button mat-raised-button color="primary" (click)="fileInput.click()">
+                        <div>Update with file</div>
+                        <input type="file" id="file" hidden #fileInput (change)="updateGraphWithFile($event)">
+                    </button>
                 </div>
             </div>
-
-            <button class="side-nav-button" mat-flat-button (click)="drawer.toggle()" color="basic">
-                <mat-icon *ngIf="!drawer.opened"> arrow_backward </mat-icon>
-                <mat-icon *ngIf="drawer.opened"> arrow_forward </mat-icon>
-            </button>
         </div>
 
-        <!-- Side Nav -->
-        <mat-drawer #drawer class="sidenav-content" mode="side" position="end">
-            <mat-tab-group>
-                <mat-tab label="Evaluate">
-                    <app-template-search [evaulateModelId]=model.id (openEvaulateEvent)="openEvaulateEvent($event)"></app-template-search>
-                </mat-tab>
-                <mat-tab label="Validate">
-                    <app-model-validate [modelId]=model.id></app-model-validate>
-                </mat-tab>
-            </mat-tab-group>          
-        </mat-drawer>
-    </mat-drawer-container>
+        <!-- Side Nav Handle -->
+        <button class="side-nav-button" mat-flat-button (click)="drawer.toggle()" color="basic">
+            <mat-icon *ngIf="!drawer.opened"> arrow_backward </mat-icon>
+            <mat-icon *ngIf="drawer.opened"> arrow_forward </mat-icon>
+        </button>
+    </div>
+
+
+    <!-- Side Nav Content-->
+    <mat-drawer #drawer class="sidenav-content" mode="side" position="end">
+        <mat-tab-group>
+            <mat-tab label="Evaluate">
+                <app-template-search [evaulateModelId]=model.id (openEvaulateEvent)="openEvaulateEvent($event)"></app-template-search>
+            </mat-tab>
+            <mat-tab label="Validate">
+                <app-model-validate [modelId]=model.id></app-model-validate>
+            </mat-tab>
+        </mat-tab-group>
+    </mat-drawer>
+</mat-drawer-container>
diff --git a/buildingmotif-app/src/app/model-detail/model-detail.component.ts b/buildingmotif-app/src/app/model-detail/model-detail.component.ts
@@ -34,6 +34,7 @@ export class ModelDetailComponent{
   };
   showFiller: boolean = true;
   sideNaveOpen: boolean = false;
+  updatingGraphSpinner: boolean = false;
 
   constructor(
     private route: ActivatedRoute,
@@ -60,7 +61,7 @@ export class ModelDetailComponent{
   }
 
   openSnackBar(message: string) {
-    this._snackBar.open(message, "oh", {});
+    this._snackBar.open(message, "close", {});
   }
 
   undoChangesToGraph(): void {
@@ -73,4 +74,28 @@ export class ModelDetailComponent{
       {data: {templateId, modelId: this.model.id}}
     );
   }
+
+  updateGraphWithFile(event: Event) {
+    this.updatingGraphSpinner = true;
+    const element = event.currentTarget as HTMLInputElement;
+    let files: FileList | null = element.files;
+    const fileToUpload = files?.item(0) ?? null;
+
+    if (!fileToUpload) return;
+
+    this.ModelDetailService.updateModelGraph(this.model.id, fileToUpload, true)
+    .subscribe({
+      next: (data: string) => {
+        this.graph = data;
+        this.graphFormControl.setValue(this.graph);
+        this.openSnackBar("success")
+      }, // success path
+      error: (error) => {
+        this.openSnackBar("error")
+      }, // error path
+      complete: () => {
+        this.updatingGraphSpinner = false;
+      }
+    });
+  }
 }
diff --git a/buildingmotif-app/src/app/model-detail/model-detail.service.ts b/buildingmotif-app/src/app/model-detail/model-detail.service.ts
@@ -28,7 +28,7 @@ export class ModelDetailService {
       );
   }
 
-  updateModelGraph(id: number, newGraph: string, append: boolean = false) {
+  updateModelGraph(id: number, newGraph: string | File, append: boolean = false) {
     const headers = {'Content-Type': "application/xml"}
 
     return this.http[append? "patch": "put"](`http://localhost:5000/models/${id}/graph`, newGraph, {headers, responseType: 'text'})