first commit

spooty-fe/src/app/app.component.html

@@ -0,0 +1,59 @@
+<section class="hero is-primary">
+  <div class="hero-body">
+    <p class="title">
+      <span><i class="fa-solid fa-music"></i> Spooty</span>
+    </p>
+    <p class="subtitle"><i class="fa-solid fa-house"></i> Self-hosted <i class="fa-brands fa-spotify"></i> spotify <i class="fa-solid fa-download"></i>downloader</p>
+  </div>
+</section>
+
+<section class="hero">
+  <div class="hero-body">
+    <div class="box">
+      <p class="subtitle">Download</p>
+      <div class="is-flex">
+        <input class="input" type="text" [(ngModel)]="url" placeholder="Paste playlist/song/artist url"/>
+        <button class="button is-primary" (click)="download()">
+          <i class="fa-solid fa-download"></i> Download
+        </button>
+      </div>
+    </div>
+    <hr>
+    <div class="box">
+    <div class="is-flex is-align-items-center">
+      <p class="subtitle">List</p>
+      <button class="button" (click)="get()"><i class="fa-solid fa-arrows-rotate"></i> Refresh</button>
+    </div>
+
+    <article class="panel is-primary" *ngFor="let playlist of playlists">
+      <p class="panel-heading is-flex is-justify-content-space-between">
+        <span><i class="fa-solid fa-caret-down"></i> {{playlist.name}}</span>
+        <a [href]="playlist.spotifyUrl" target="_blank" class="is-color-black"><i class="fa-brands fa-spotify"></i></a>
+      </p>
+      <a class="panel-block is-flex is-justify-content-space-between" *ngFor="let track of playlist.tracks">
+        <div>
+          <a href="http://localhost:3000/track/download/{{track.id}}" class="panel-icon is-color-info" download>
+            <i class="fa-solid fa-download"></i>
+          </a>
+          <span>{{track.artist}} - {{track.song}}</span>&nbsp;
+          <a [href]="track.spotifyUrl" target="_blank" class="is-color-primary margin-left">
+            <i class="fa-brands fa-spotify"></i>
+          </a>&nbsp;
+          <a [href]="track.youtubeUrl" target="_blank" class="is-color-danger is-color-black">
+            <i class="fa-brands fa-youtube"></i>
+          </a>
+        </div>
+        <div>
+          <ng-container [ngSwitch]="track.status">
+            <span *ngSwitchCase="0" class="tag is-info">New</span>
+            <span *ngSwitchCase="1" class="tag is-warning">Queued</span>
+            <span *ngSwitchCase="2" class="tag is-success">Completed</span>
+          </ng-container>
+        </div>
+      </a>
+    </article>
+    </div>
+  </div>
+</section>
+
+