🔧 Continued work on AddSongComponent

Now you can enter details about a song and it will be updated.

src/app/components/addsong/addsong.component.html

@@ -1,4 +1,31 @@
-<form [formGroup]="form" (ngSubmit)="onSubmit()">
-  <input type="text" formControlName="id">
-  <input type="submit">
-</form>
+<div class="container">
+
+  <div *ngIf="currentStep === 1" class="one">
+    <h2>Enter the youtube video url</h2>
+    <form [formGroup]="idForm" (ngSubmit)="onIdSubmit()">
+      <input type="text" formControlName="id">
+      <input type="submit">
+    </form>
+  </div>
+
+  <div *ngIf="currentStep === 2 && videoInfo" class="two">
+    <h2>Enter the details of this song</h2>
+    <form [formGroup]="detailsForm" (ngSubmit)="onDetailsSubmit()">
+      <div class="form-group">
+        <label for="exampleInputEmail1">Song name</label>
+        <input formControlName="song" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" [value]="videoInfo.title" placeholder="Enter song name">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputEmail1">Artist name</label>
+        <input formControlName="artist" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" [value]="videoInfo.author.name" placeholder="Enter artist name">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputEmail1">Path</label>
+        <input formControlName="path" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
+          [value]="videoInfo.title + '.mp3'" placeholder="Enter path">
+      </div>
+      <button type="submit" class="btn btn-primary">Submit</button>
+    </form>
+  </div>
+
+</div>

src/app/components/addsong/addsong.component.ts

@@ -9,10 +9,19 @@ import { FormBuilder } from '@angular/forms';
 })
 export class AddsongComponent implements OnInit {
 
-  form = this.fb.group({
+  idForm = this.fb.group({
     id: ''
   });
 
+  detailsForm = this.fb.group({
+    song: '',
+    artist: '',
+    path: ''
+  });
+
+  currentStep = 1;
+  videoInfo;
+
   constructor(
     private download: DownloadService,
     private fb: FormBuilder
@@ -20,8 +29,20 @@ export class AddsongComponent implements OnInit {
 
   ngOnInit() { }
 
-  onSubmit() {
-    this.download.addQueueItem(this.form.value.id);
+  onIdSubmit() {
+    this.download.addQueueItem(this.idForm.value.id);
+    this.currentStep = 2;
+    this.download.getVideoDetails(this.idForm.value.id).then(res => {
+      this.videoInfo = res.data.result;
+      this.detailsForm.get('song').setValue(this.videoInfo.title);
+      this.detailsForm.get('artist').setValue(this.videoInfo.author.name);
+      this.detailsForm.get('path').setValue(this.videoInfo.title + '.mp3');
+    });
+  }
+
+  onDetailsSubmit() {
+    console.log(this.detailsForm.value);
+    this.download.insertSong(this.detailsForm.value);
   }
 
 }

src/app/services/data.service.ts

@@ -91,4 +91,16 @@ export class DataService {
   downloadqueue(): Promise<AxiosResponse<ApiData>> {
     return this.axiosInstance.get(`${this.apiUrl}/downloadqueue`);
   }
+
+  videoInfo(id: string): Promise<AxiosResponse<ApiData>> {
+    return this.axiosInstance.get(`${this.apiUrl}/info/${id}`);
+  }
+
+  update(database: string, index: number, field: string, value: number | string | boolean): Promise<AxiosResponse<ApiData>> {
+    return this.axiosInstance.get(`${this.apiUrl}/update/${database}/${index}/${field}/${value}`);
+  }
+
+  insert(database: string): Promise<AxiosResponse<ApiData>> {
+    return this.axiosInstance.get(`${this.apiUrl}/insert/${database}`);
+  }
 }

src/app/services/download.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { DataService } from './data.service';
+import { DataService, ApiData } from './data.service';
 import { AxiosResponse } from 'axios';
 import { NotificationService } from './notification.service';
 
@@ -16,6 +16,9 @@ export class DownloadService {
   downloadQueue: Promise<AxiosResponse>[] = [];
 
   addQueueItem(id: string) {
+    console.log(`downloading ${id}...`);
+
+    this.data.download(id);
     const index = this.downloadQueue.push(this.data.download(id)) - 1;
     this.downloadQueue[index].then(res => {
       // tslint:disable-next-line: max-line-length
@@ -28,6 +31,18 @@ export class DownloadService {
     return this.data.downloadqueue();
   }
 
+  getVideoDetails(id: string): Promise<AxiosResponse<ApiData>> {
+    return this.data.videoInfo(id);
+  }
+
+  async insertSong(formData: any) {
+    const songResult = (await this.data.insert('songs')).data.result;
+    this.data.update('songs', songResult.id, 'name', formData.song);
+    this.data.update('songs', songResult.id, 'artist', formData.artist);
+    this.data.update('songs', songResult.id, 'path', formData.path);
+    this.data.update('songs', songResult.id, 'liked', false);
+  }
+
   // Input like: "00:00:54.43"
   convertTimeToSeconds(input: string): number {
     if (typeof input === 'string') {