updates to artist page

J-Rebs · Nov 24, 2022 · f6fa774 · f6fa774 · vercel · Nov 24, 2022
1 parent bd55dd7
commit f6fa774
Show file tree

Hide file tree

Showing 2 changed files with 193 additions and 22 deletions.
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
@@ -35,33 +35,38 @@
 
   let addUserCallCount = 0;
   let userData = {
-        realName: '' ,
-        userType: '' ,
-        mainGenre: '',
-        age: ''
-      };
+    realName: "",
+    userType: "",
+    mainGenre: "",
+    age: "",
+  };
   async function addUser() {
-    // axios format call src: https://rapidapi.com/guides/call-apis-svelte-axios, https://axios-http.com/docs/api_intro, https://masteringjs.io/tutorials/axios/delete 
+    // axios format call src: https://rapidapi.com/guides/call-apis-svelte-axios, https://axios-http.com/docs/api_intro, https://masteringjs.io/tutorials/axios/delete
     userData.realName = String(userData.realName);
     userData.userType = String(userData.userType);
     userData.mainGenre = String(userData.mainGenre);
     userData.age = String(userData.age);
-    console.log("arguments recieved into add user are:", userData.realName, userData.userType, userData.mainGenre, userData.age);
+    console.log(
+      "arguments recieved into add user are:",
+      userData.realName,
+      userData.userType,
+      userData.mainGenre,
+      userData.age
+    );
     let error = null;
     try {
-
       const res = await axios.post(
         `https://music-tonic.herokuapp.com/client1-rest/createUser?realname=${userData.realName}&usertype=${userData.userType}&maingenre=${userData.mainGenre}&age=${userData.age}`
       );
       addUserCallCount += 1;
-      let addedUser = res.data
+      let addedUser = res.data;
       console.log("added user is:", addedUser);
       return addedUser;
     } catch (e) {
       error = e;
       addUserCallCount += 1;
       alert("Adding a user ran into an error");
-      console.log("error in adding user",error);
+      console.log("error in adding user", error);
       return null;
     }
   }
@@ -71,26 +76,28 @@
   async function deleteUser() {
     let error = null;
     try {
-
       const res = await axios.delete(
         `https://music-tonic.herokuapp.com/client1-rest/deleteUser?id=${deleteId}`
       );
       deleteUserCallCount += 1;
-      let deletedUser = res.data
+      let deletedUser = res.data;
       console.log("deleted user is:", deletedUser);
       return deletedUser;
     } catch (e) {
       error = e;
       deleteUserCallCount += 1;
       alert("Deleting a user ran into an error");
-      console.log("error in deleting user",error);
+      console.log("error in deleting user", error);
       return null;
     }
-    
   }
 </script>
 
-<h1 class="text-lg w-screen text-center mx-auto font-bold bg-gradient-to-r from-sky-500 to-indigo-500 background-animate py-2 text-white">Admin</h1>
+<h1
+  class="text-lg w-screen text-center mx-auto font-bold bg-gradient-to-r from-sky-500 to-indigo-500 background-animate py-2 text-white"
+>
+  Admin
+</h1>
 <div class="px-4 py-4 auto-cols-auto">
   <!--User List Block---------------------------------------------------------------------------------------------------->
   <div class="px-4 py-4">
@@ -119,10 +126,30 @@
     <div class="px-4 py-2">
       <div class="grid item-center gap-2">
         <!--Input approach: https://svelte.dev/repl/text-inputs?version=3.53.1-->
-        <input class="border border-gray-400 indent-2" placeholder="Real Name" type="text" bind:value={userData.realName} />
-        <input class="border border-gray-400 indent-2" placeholder="User Type" type="text" bind:value={userData.userType} />
-        <input class="border border-gray-400 indent-2" placeholder="Main Genre" type="text" bind:value={userData.mainGenre} />
-        <input class="border border-gray-400 indent-2" placeholder="Age" type="text" bind:value={userData.age}/>
+        <input
+          class="border border-gray-400 indent-2"
+          placeholder="Real Name"
+          type="text"
+          bind:value={userData.realName}
+        />
+        <input
+          class="border border-gray-400 indent-2"
+          placeholder="User Type"
+          type="text"
+          bind:value={userData.userType}
+        />
+        <input
+          class="border border-gray-400 indent-2"
+          placeholder="Main Genre"
+          type="text"
+          bind:value={userData.mainGenre}
+        />
+        <input
+          class="border border-gray-400 indent-2"
+          placeholder="Age"
+          type="text"
+          bind:value={userData.age}
+        />
       </div>
     </div>
   </div>
@@ -131,7 +158,12 @@
     <SvelteButton buttonItem="Delete User" action={deleteUser} />
     <div class="px-4 py-2">
       <form class="grid item-center">
-        <input class="border border-gray-400 indent-2" placeholder="User ID to Delete" type="text" bind:value={deleteId}/>
+        <input
+          class="border border-gray-400 indent-2"
+          placeholder="User ID to Delete"
+          type="text"
+          bind:value={deleteId}
+        />
       </form>
     </div>
   </div>

diff --git a/src/routes/listener/+page.svelte b/src/routes/listener/+page.svelte
@@ -1,5 +1,144 @@
-<h1 class="text-lg w-screen text-center mx-auto font-bold bg-gradient-to-r from-purple-500 to-pink-500 background-animate py-2 text-white">Listener</h1>
+<script lang="ts">
+  import SvelteButton from "$lib/SvelteButton.svelte";
+  import axios from "axios";
+  /**
+   *
+   * play song
+   *
+   */
+  let userId: string, songId: string, playlistId: string;
+  let playSongCallCount = 0;
+  let analytics=[];
+  async function playSong() {
+    let error = null;
+    try {
+      const res = await axios.post(
+        `https://music-tonic.herokuapp.com/client1-rest/playsong?userid=${userId}&songid=${songId}&playlistid=${playlistId}`
+      );
+      playSongCallCount += 1;
+      let analyticsEntry = res.data;
+      analytics.push(analyticsEntry);
+      console.log("analytics returned from playing song:", analyticsEntry);
+      return analyticsEntry;
+    } catch (e) {
+      error = e;
+      playSongCallCount += 1;
+      alert("playing a song ran into an error");
+      console.log("error in playing song", error);
+      return null;
+    }
+  }
 
+   /**
+   *
+   * like song
+   *
+   */
+let userIdLikeSong: string, songIdLikeSong: string;
+  let likeSongCallCount = 0;
+  let songLikesCount = "🤷";
+  async function likeSong() {
+    let error = null;
+    try {
+      const res = await axios.put(
+        `https://music-tonic.herokuapp.com/client1-rest/likeSong?userid=${userIdLikeSong}&songid=${songIdLikeSong}`
+      );
+      likeSongCallCount += 1;
+      songLikesCount = res.data;
+      console.log("like song is a success, current count of total song likes is:", songLikesCount);
+      return songLikesCount;
+    } catch (e) {
+      error = e;
+      likeSongCallCount += 1;
+      alert("liking a song ran into an error");
+      console.log("error in liking song", error);
+      return null;
+    }
+  }
+</script>
+
+<h1
+  class="text-lg w-screen text-center mx-auto font-bold bg-gradient-to-r from-purple-500 to-pink-500 background-animate py-2 text-white"
+>
+  Listener
+</h1>
+<div class="px-4 py-4 auto-cols-auto">
+  <!--Play Song Block---------------------------------------------------------------------------------------------------->
+  <div class="px-4 py-2">
+    <SvelteButton buttonItem="Play Song" action={playSong} />
+    <div class="px-4 py-2">
+      <div class="grid item-center gap-2">
+        <input
+          class="border border-gray-400 indent-2"
+          placeholder="User ID to play"
+          type="text"
+          bind:value={userId}
+        />
+        <input
+          class="border border-gray-400 indent-2"
+          placeholder="Song ID to play"
+          type="text"
+          bind:value={songId}
+        />
+        <input
+          class="border border-gray-400 indent-2"
+          placeholder="Playlist ID to play"
+          type="text"
+          bind:value={playlistId}
+        />
+      </div>
+    </div>
+    <p class="font-bold px-4 py-2">Song Analytic Entries in Current Session:</p>
+    {#key playSongCallCount}
+    <div class="grid auto-cols-auto auto-rows-auto gap-4 px-4">
+      <!--each block src: https://svelte.dev/tutorial/each-blocks-->
+      {#each analytics as { id, timestamp }}
+        <div
+          class="grid md:grid-cols-5 transition ease-in-out delay-10 hover:-translate-y-1 hover:scale-102 duration-300 bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow shadow-lg shadow-indigo-500/50"
+        >
+          <div>
+            id: {id} timestamp:{timestamp}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/key}
+  </div>
+    <!--Like Song Block---------------------------------------------------------------------------------------------------->
+  <div class="px-4 py-2">
+    <SvelteButton buttonItem="Like Song" action={likeSong} />
+    <div class="px-4 py-2">
+      <div class="grid item-center gap-2">
+        <input
+          class="border border-gray-400 indent-2"
+          placeholder="User ID of who will like song"
+          type="text"
+          bind:value={userIdLikeSong}
+        />
+        <input
+          class="border border-gray-400 indent-2"
+          placeholder="Song ID to like"
+          type="text"
+          bind:value={songIdLikeSong}
+        />
+      </div>
+    </div>
+    <p class="font-bold px-4 py-2">Song Likes Count:</p>
+    {#key likeSongCallCount}
+    <div class="grid auto-cols-auto auto-rows-auto gap-4 px-4">
+      <!--each block src: https://svelte.dev/tutorial/each-blocks-->
+        <div
+          class="grid md:grid-cols-5 transition ease-in-out delay-10 hover:-translate-y-1 hover:scale-102 duration-300 bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow shadow-lg shadow-indigo-500/50"
+        >
+          <div>
+            🎶of Likes 💖: {songLikesCount} 
+          </div>
+        </div>
+    </div>
+  {/key}
+  </div>
+
+</div>
 
 <button>play song</button>
-<button>like song</button>
+<button>like song</button>