feat: New zone photo capture

GeminiEnergySolutions · Mar 13, 2024 · b5bb7d5 · b5bb7d5
1 parent 36861e7
commit b5bb7d5
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 34 deletions.
diff --git a/src/app/audit/zone-list/zone/zone.component.html b/src/app/audit/zone-list/zone/zone.component.html
@@ -1,24 +1,31 @@
-<div>
-  <div class="row">
-    <h1 class="col">
-      <a class="bi-chevron-left d-lg-none" routerLink="./../.."></a>
-      {{ zone?.zoneName | titlecase }}
-    </h1>
-    <div class="col mt-3" style="text-align: right; padding-right: 25px;">
-      <a class="btn btn-primary" (click)="captureDialog()" style="margin-right: 5px;">Capture</a>
-    </div>
-    <div class="my-2">
-      <p style="margin-bottom:0px"> {{auditService.equipmentHeadingValue}} Progress  {{auditService.completedFields}} / {{auditService.totalFields}} </p>
-      <div class="progress">
-        <div class="progress-bar" role="progressbar" [style]="'width: '+auditService.progressPercentage">{{auditService.progressPercentage}}</div>
-      </div>
+<h1>
+  <a class="bi-chevron-left d-lg-none" routerLink="./../.."></a>
+  {{ zone?.zoneName | titlecase }}
+</h1>
+
+<div class="input-group w-auto">
+  <label class="input-group-text bi-camera" for="image">
+    Capture Photo:
+  </label>
+  <input #fileInput type="file" class="form-control" id="image" accept="image/*">
+  <button class="btn btn-outline-primary" (click)="uploadPhoto(fileInput.files)">Upload</button>
+</div>
+
+<div class="mb-3">
+  {{ auditService.equipmentHeadingValue }} Progress: {{ auditService.completedFields }} / {{ auditService.totalFields }}
+  <div class="progress">
+    <div class="progress-bar" role="progressbar" [style]="'width: '+auditService.progressPercentage">
+      {{ auditService.progressPercentage }}
     </div>
   </div>
-
-  <ul ngbNav #nav="ngbNav" [activeId]="equipmentService.equipment.id" class="nav-tabs">
-    <li [ngbNavItem]="item.id" *ngFor="let item of equipmentService.equipments">
-      <a ngbNavLink [routerLink]="item.id" (click)="route.firstChild?.snapshot?.params?.eid !== item.id ? getEquipmentPercentage(item) : null">{{item.equipmentName | titlecase}}</a>
-    </li>
-  </ul>
-  <router-outlet></router-outlet>
 </div>
+
+<ul ngbNav [activeId]="equipmentService.equipment.id" class="nav-tabs">
+  <li [ngbNavItem]="item.id" *ngFor="let item of equipmentService.equipments">
+    <a ngbNavLink [routerLink]="item.id" (click)="route.firstChild?.snapshot?.params?.eid !== item.id ? getEquipmentPercentage(item) : null">
+      {{ item.equipmentName | titlecase }}
+    </a>
+  </li>
+</ul>
+
+<router-outlet></router-outlet>
diff --git a/src/app/audit/zone-list/zone/zone.component.ts b/src/app/audit/zone-list/zone/zone.component.ts
@@ -61,19 +61,17 @@ export class ZoneComponent implements OnInit {
     });
   }
 
-
-  public async captureDialog() {
-    let newPic: string | any;
-    // TODO
-    if (newPic) {
-      const formData = new FormData();
-      formData.append('photo', newPic);
-      formData.append('auditId', this.route.snapshot.params.aid);
-      formData.append('zoneId', this.route.snapshot.params.zid);
-      this.auditService.uploadPhoto(this.route.snapshot.params.aid, formData).subscribe((res: any) => {
-        this.toastService.success('Success', 'Photo have been saved.')
-      });
+  uploadPhoto(files: FileList | null) {
+    if (!files || !files.length) {
+      return;
     }
+    const {aid, zid} = this.route.snapshot.params;
+    const formData = new FormData();
+    formData.append('auditId', aid);
+    formData.append('zoneId', zid);
+    formData.append('photo', files[0], files[0].name);
+    this.auditService.uploadPhoto(aid, formData).subscribe(() => {
+      this.toastService.success('Upload Zone Photo', `Sucessfully uploaded photo for Zone '${this.zone?.zoneName}'.`)
+    });
   }
-
 }