80 audio w edycji map location w edycji routa (#95)

* Przesylanie v.1.0 nie pelne * Audio sie dodaje , BRAK LISTY * Wersja bez osobnego komponentu * Separate component ,updating audio not working (POST METHOD) * Done (I hope so) * feat: add delete button * Dobra dziala * feat: add confirm window * data update instead of navigation * 98 stronicowanie przy filtrowaniu tras (#99) * fix: when searching route by name, page number returns to 1 * fix: when editing map location, header is correct now * feat: can add existing point (map location) to your route * feat: can exit 'addingPoint mode' * chore: cleanup * osobna lista próby * osobna lista próby * osobna lista próby * New Marker * icon changed * feat: cannot add one point twice to same route * feat: can add existing point (map location) to your route * feat: can exit 'addingPoint mode' * chore: cleanup * feat: cannot add one point twice to same route * fix: no additional redirect when choosing route * chore: cleanup and variable rename * init commit * modal and map location modal crude working form * significant layout improvement * feat: center button with css * chore: css upgrade * cleanup * fix: can edit point immediately after adding it * fix: can't edit route after typing 'routes/:id/edit' * chore: cleanup * chore: cleanup * Wtg 44 upgrade to the latest bootstrap (#109) * WTG-44: bootstrap upgrade * WTG-44: layout updated for the updated bootstrap * WTG-44: layout fixes * Update angular.json (#110) * osobna lista próby * Przesylanie v.1.0 nie pelne * Audio sie dodaje , BRAK LISTY * Wersja bez osobnego komponentu * Separate component ,updating audio not working (POST METHOD) * Done (I hope so) * osobna lista próby * osobna lista próby * Audio list (only edit version) * code cleaninng * fix chosen file * Adding new point functionality --------- Co-authored-by: Kondziow <[email protected]> Co-authored-by: Drillllll <[email protected]> Co-authored-by: Kondziow <[email protected]> Co-authored-by: Janek <[email protected]>
Apes2getherStrong · Sep 3, 2024 · 404321d · 404321d
1 parent dd6166b
commit 404321d
Show file tree

Hide file tree

Showing 8 changed files with 310 additions and 7 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -12,6 +12,8 @@ import {MapLocationEditComponent} from "./map-location/map-location-edit/map-loc
 import {AuthGuardService} from "./auth/auth-guard.service";
 
 
+
+
 const routes: Routes = [
   {
     path: 'log-in',

diff --git a/src/app/audio/audio.model.ts b/src/app/audio/audio.model.ts
@@ -5,7 +5,6 @@ export class Audio {
   constructor(
     public id: string,
     public name: string,
-    public description: string,
     public user: User,
     public mapLocation: MapLocation,
     public audioFilename: String

diff --git a/src/app/audio/audio.service.ts b/src/app/audio/audio.service.ts
@@ -1,9 +1,9 @@
 import {Injectable} from "@angular/core";
-import {HttpClient, HttpErrorResponse, HttpParams} from "@angular/common/http";
+import {HttpClient, HttpErrorResponse, HttpHeaders, HttpParams} from "@angular/common/http";
 import {backendUrl, maxPageSize} from "../shared/http.config";
 import {Page} from "../shared/page.model";
 import {MapLocation} from "../map-location/map-location.model";
-import {catchError, of} from "rxjs";
+import {catchError, Observable, of, throwError} from "rxjs";
 import {Audio} from "./audio.model";
 
 @Injectable({providedIn: 'root'})
@@ -24,6 +24,12 @@ export class AudioService {
   }
 
 
+  getAudioById(audioId: string): Observable<Audio> {
+    const url = `${backendUrl}/audios/${audioId}`;
+    return this.http.get<Audio>(url);
+  }
+
+
   getAudioFileByAudio(audio: Audio) {
     const url = `${backendUrl}/audios/${audio.id}/audio`;
     return this.http.get(url, { responseType: 'blob' }).pipe(
@@ -34,5 +40,47 @@ export class AudioService {
     );
   }
 
+  postAudio(audio: Audio) {
+    const url = `${backendUrl}/audios`;
+    return this.http.post<Audio>(url, audio).pipe(
+      catchError((error: HttpErrorResponse) => {
+        console.error('Error adding audio:', error);
+        throw error;
+      })
+    );
+  }
+
+  uploadAudioFile(audioId: string, file: File) {
+    const url = `${backendUrl}/audios/${audioId}/audio`;
+    const formData = new FormData();
+    formData.append('file', file, file.name);
+
+    const headers = new HttpHeaders();
+    headers.append('Content-Type', 'multipart/form-data');
+
+    return this.http.post(url, formData, { headers }).pipe(
+      catchError((error: HttpErrorResponse) => {
+        console.error('Error uploading audio file:', error);
+        throw error; // Przekaż dalej błąd do obsługi w komponencie
+      })
+    );
+  }
+
+  deleteAudio(audioId: string) {
+    const url = `${backendUrl}/audios/${audioId}`;
+    return this.http.delete(url).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  updateAudio(audio: Audio): Observable<Audio> {
+    const url = `${backendUrl}/audios/${audio.id}`;
+    return this.http.put<Audio>(url, audio);
+  }
+
+  private handleError(error: HttpErrorResponse) {
+    console.error('An error occurred:', error);
+    return throwError('Something bad happened; please try again later.');
+  }
 
 }
diff --git a/src/app/map-location/map-location-edit/map-location-edit.component.css b/src/app/map-location/map-location-edit/map-location-edit.component.css
@@ -7,4 +7,30 @@
     height: 16vh;
   }
 
+  .audio-list {
+    margin-top: 20px;
+  }
+
+
+  .audio-item audio {
+    margin-right: 10px;
+  }
+
+  .audio-item p {
+    margin: 0 10px;
+  }
+
+  .audio-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+}
+.audio-header {
+  text-align: center;
+  font-size: 26px;
+  margin-bottom: 20px;
+  color: #321;
+
 }
diff --git a/src/app/map-location/map-location-edit/map-location-edit.component.html b/src/app/map-location/map-location-edit/map-location-edit.component.html
@@ -87,6 +87,50 @@ <h2>Editing map location</h2>
           </div>
         </div>
       </form>
+      <form [formGroup]="audioForm" (ngSubmit)="onSubmitAudio()">
+        <div class="row">
+          <div class="col-xs-12">
+            <h3 class="mb-4">Audio Files</h3>
+            <div *ngIf="editMode" class="audio-list">
+              <div  *ngFor="let audioItem of audioData" class="audio-item mb-3 p-3 border rounded shadow-sm">
+                <h6 class="audio-name text-dark mb-2">
+                  {{ audioItem.audio.name }}
+                </h6>
+                <audio class="audio-file w-100 mb-2" controls>
+                  <source [src]="audioItem.url" type="audio/mpeg" />
+                  Your browser does not support the audio element.
+                </audio>
+                <button type="button" class="btn btn-danger btn-sm" (click)="deleteAudio(audioItem.audio.id)">
+                  Delete
+                </button>
+              </div>
+            </div>
+            <div *ngIf="!editMode" class="audio-list">
+              <div *ngFor="let audioItem of temporaryAudioData" class="audio-item mb-3 p-3 border rounded shadow-sm">
+                <h6 class="audio-name text-dark mb-2">
+                  {{ audioItem.audio.name }}
+                </h6>
+                <audio class="audio-file w-100 mb-2" controls>
+                  <source [src]="audioItem.url" type="audio/mpeg" />
+                  Your browser does not support the audio element.
+                </audio>
+                <button type="button" class="btn btn-danger btn-sm" (click)="deleteTemporaryAudio(audioItem)">
+                  Delete
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="audioName">New Audio Name</label>
+          <input type="text" id="audioName" formControlName="audioName" class="form-control">
+        </div>
+        <div class="form-group">
+          <label for="audioFile">Upload Audio</label>
+          <input type="file" id="audioFile" #audioFileInput (change)="onAudioFileSelected($event)" class="form-control">
+        </div>
+          <button type="submit" class="btn btn-primary" [disabled]="audioForm.invalid">Add Audio</button>
+      </form>
     </div>
   </div>
 </div>
-Original file line number
+Diff line change
@@ Expand Up @@
     import {AuthGuardService} from "./auth/auth-guard.service";
     const routes: Routes = [
       {
         path: 'log-in',
@@ Expand Down @@