feat: New equipment photo capture

GeminiEnergySolutions · Mar 13, 2024 · 6e22a0b · 6e22a0b
1 parent b5bb7d5
commit 6e22a0b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 35 deletions.
diff --git a/src/app/audit/zone-list/zone/type-list/type/type.component.html b/src/app/audit/zone-list/zone/type-list/type/type.component.html
@@ -1,27 +1,26 @@
-<div>
-  <div class="row">
-  <h1 class="col">
+<h1 class="col">
+  <a class="bi-chevron-left d-lg-none" routerLink=".."></a>
+  {{ equipmentService.equipmentSubTypeData?.name | titlecase }}
+  <span class="text-muted small">
+    {{ equipmentService.equipmentSubTypeData?.type ? equipmentService.equipmentSubTypeData?.type?.name : equipmentService.equipmentSubTypeData?.typeChild?.name | titlecase }}
+  </span>
+</h1>
 
-    <a class="bi-chevron-left d-lg-none" routerLink=".."></a>
-    {{ equipmentService.equipmentSubTypeData?.name | titlecase }}
-    <span class="text-muted small">
-      {{ equipmentService.equipmentSubTypeData?.type ? equipmentService.equipmentSubTypeData?.type?.name : equipmentService.equipmentSubTypeData?.typeChild?.name | titlecase }}
-    </span>
-  </h1>
-
-  <div class="col my-3" style="text-align: right; padding-right: 25px;">
-    <a class="btn btn-primary" (click)="captureDialog()" style="margin-right: 5px;">Capture</a>
-  </div>
+<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="my-2">
-  <p style="margin-bottom:0px">Equipment Progress = {{auditService.completedFields}} / {{auditService.totalFields}} </p>
+<div class="mb-3">
+  Equipment Progress = {{ auditService.completedFields }} / {{ auditService.totalFields }}
   <div class="progress">
-    <div class="progress-bar" role="progressbar" [style]="'width: '+auditService.progressPercentage">{{auditService.progressPercentage}}</div>
+    <div class="progress-bar" role="progressbar" [style]="'width: '+auditService.progressPercentage">
+      {{ auditService.progressPercentage }}
+    </div>
   </div>
 </div>
 
-  <app-form #form></app-form>
-</div>
+<app-form></app-form>
diff --git a/src/app/audit/zone-list/zone/type-list/type/type.component.ts b/src/app/audit/zone-list/zone/type-list/type/type.component.ts
@@ -36,21 +36,21 @@ export class TypeComponent 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);
-      formData.append('equipmentId', this.equipmentService.equipmentSubTypeData.equipmentId);
-      formData.append('typeId', this.equipmentService.equipmentSubTypeData?.type?.id);
-      formData.append('subTypeId', this.route.snapshot.params.tid);
-      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, tid, zid} = this.route.snapshot.params;
+    const formData = new FormData();
+    formData.append('auditId', aid);
+    formData.append('zoneId', zid);
+    formData.append('equipmentId', this.equipmentService.equipmentSubTypeData.equipmentId);
+    formData.append('typeId', this.equipmentService.equipmentSubTypeData?.type?.id);
+    formData.append('subTypeId', tid);
+    formData.append('photo', files[0], files[0].name);
+    this.auditService.uploadPhoto(aid, formData).subscribe(() => {
+      this.toastService.success('Upload Equipment Photo', `Sucessfully uploaded photo for ${this.equipmentService.equipmentSubTypeData?.type?.name} '${this.equipmentService.equipmentSubTypeData?.name}'.`);
+    });
+  }
 }