Add compression methods short form according to API endpoint and resolve build error

src/app/components/export-portable-project/export-portable-project.component.html

@@ -38,7 +38,7 @@
           ng2FileSelect
           [uploader]="uploader"
         />
-        <button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
+        <button type="button" mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
       </div>
     </div>
     <div class="row">
@@ -46,7 +46,7 @@
       <div class="col-md-8">
         <mat-form-field class="input-full-width">
           <mat-select formControlName="compression" (selectionChange)="selectCompression($event)" required>
-            <mat-option *ngFor="let compressionValue of compression_methods" [value]="compressionValue.name">{{
+            <mat-option *ngFor="let compressionValue of compression_methods" [value]="compressionValue">{{
               compressionValue.name
             }}</mat-option>
           </mat-select>

src/app/components/export-portable-project/export-portable-project.component.ts

@@ -1,9 +1,8 @@
-import { Inject } from '@angular/core';
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { Server } from '../../models/server';
 import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload';
+import { Server } from '../../models/server';
 import { ProjectService } from '../../services/project.service';
 import { ToasterService } from '../../services/toaster.service';
 
@@ -56,7 +55,6 @@ export class ExportPortableProjectComponent implements OnInit {
 
     this.selectCompression({ value: this.compression_methods[4] });
     this.export_project_form.get('compression').setValue(this.compression_methods[4]);
-  
   }
 
   formControls() {
@@ -74,7 +72,6 @@ export class ExportPortableProjectComponent implements OnInit {
   uploadImageFile(event) {}
 
   selectCompression(event) {
-    console.log(event);
     this.compression_level.map((_) => {
       if (event.value.value === _.name) {
         this.export_project_form.get('compression_level').setValue(_.value);
@@ -84,9 +81,11 @@ export class ExportPortableProjectComponent implements OnInit {
   }
 
   exportPortableProject() {
-    this.projectService.exportPortableProject(this.server,this.export_project_form.value).subscribe((res)=>{
-
-    })
-    console.log(this.export_project_form.value);
+    let response
+    this.export_project_form.value.compression = this.export_project_form.value.compression.value;
+    this.projectService.exportPortableProject(this.server, this.export_project_form.value)
+    .subscribe((res) => {
+     response = res
+    });
   }
 }

src/app/components/project-map/project-map.component.ts

@@ -12,7 +12,7 @@ import { MatBottomSheet } from '@angular/material/bottom-sheet';
 import { MatDialog } from '@angular/material/dialog';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
-import { ExportPortableProjectComponent } from '@components/export-portable-project/export-portable-project.component';
+import { ExportPortableProjectComponent } from '../../components/export-portable-project/export-portable-project.component';
 import { environment } from 'environments/environment';
 import * as Mousetrap from 'mousetrap';
 import { from, Observable, Subscription } from 'rxjs';

src/app/services/project.service.ts

@@ -14,19 +14,19 @@ import { SettingsService } from './settings.service';
 export class ProjectService {
   compression_methods: any = [
     { id: 1, value: 'none', name: 'None' },
-    { id: 2, value: 'zip compression (deflate)', name: 'Zip compression (deflate)' },
-    { id: 3, value: 'bzip2 compression', name: 'Bzip2 compression' },
-    { id: 4, value: 'lzma compression', name: 'Lzma compression' },
-    { id: 5, value: 'zstandard compression', name: 'Zstandard compression' },
+    { id: 2, value: 'zip', name: 'Zip compression (deflate)' },
+    { id: 3, value: 'bzip2', name: 'Bzip2 compression' },
+    { id: 4, value: 'lzma', name: 'Lzma compression' },
+    { id: 5, value: 'zstd', name: 'Zstandard compression' },
   ];
   compression_level_default_value: any = [
     { id: 1, name: 'none', value: 'None', selectionValues: ['None'] },
-    { id: 2, name: 'zip compression (deflate)', value: 6, selectionValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
-    { id: 3, name: 'bzip2 compression', value: 9, selectionValues: [1, 2, 3, 4, 5, 6, 7, 8, 9] },
-    { id: 4, name: 'lzma compression', value: 'None', selectionValues: ['None'] },
+    { id: 2, name: 'zip', value: 6, selectionValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
+    { id: 3, name: 'bzip2', value: 9, selectionValues: [1, 2, 3, 4, 5, 6, 7, 8, 9] },
+    { id: 4, name: 'lzma', value: 'None', selectionValues: ['None'] },
     {
       id: 5,
-      name: 'zstandard compression',
+      name: 'zstd',
       value: 3,
       selectionValues: [1, 2, 3, 4, 5, 6, 7, 8, 9.1, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22],
     },
@@ -136,6 +136,6 @@ export class ProjectService {
     return this.compression_level_default_value;
   };
   exportPortableProject(server:Server,formData:any={}) {
-    return this.httpServer.get(server,`projects/${formData.file_path}/export?include_snapshots=${formData.include_snapshots}&include_images=${formData.include_base_image}&reset_mac_addresses=${formData.reset_mac_address}&compression=${formData.compression}&compression_level=${formData.compression_level}`)
+    return this.httpServer.get(server,`/projects/${formData.file_path}/export?include_snapshots=${formData.include_snapshots}&include_images=${formData.include_base_image}&reset_mac_addresses=${formData.reset_mac_address}&compression=${formData.compression}&compression_level=${formData.compression_level}`)
   }
 }