Merge remote-tracking branch 'refs/remotes/origin/main'

aidenhuynh · Oct 31, 2023 · e5d38e6 · e5d38e6
2 parents 66a862c + 2ad76ab
commit e5d38e6
Show file tree

Hide file tree

Showing 8 changed files with 419 additions and 61 deletions.
diff --git a/assets/classroom/script.js b/assets/classroom/script.js
@@ -1,3 +1,5 @@
+'use strict';
+
 const url = "images/classroom/"
 var playing = false
 var looping = false
@@ -55,6 +57,49 @@ class Track {
 }
 
 
+
+
+
+console.log("what the fricdge!")
+var socket = new SockJS('https://cj-backend.stu.nighthawkcodingsociety.com/ws');
+var stompClient = Stomp.over(socket);
+
+stompClient.connect({}, onConnected, onError);
+
+function onConnected() {
+    stompClient.subscribe('/topic/public', onMessageReceived);
+
+    // Tell your username to the server
+    stompClient.send("/app/chat.addUser",
+        {},
+        JSON.stringify({sender: username, type: 'JOIN'})
+    )
+
+    connectingElement.classList.add('hidden');
+}
+
+
+function onError(error) {
+    connectingElement.textContent = 'Could not connect to WebSocket server. Please refresh this page to try again!';
+    connectingElement.style.color = 'red';
+}
+
+
+function sendMessage(message) {
+    if(message && stompClient) {
+        var chatMessage = {
+            sender: username,
+            content: message,
+            type: 'CHAT'
+        };
+        stompClient.send("/app/chat.sendMessage", {}, JSON.stringify(chatMessage));
+    }
+}
+
+function onMessageReceived(payload){
+    console.log(payload);
+}
+
 function changeBG() {
     document.getElementById('bg').src = '{{site.baseurl}}/images/stackoverflow.png'
 }
@@ -229,8 +274,6 @@ function tempAddSong(input) {
     addSong(URI)
 }
 
-
-
 function setSong() {
     document.getElementsByClassName('background')[0].style.backgroundImage.src = playlist[0][cover]
 }

diff --git a/assets/header/script.js b/assets/header/script.js
@@ -54,6 +54,87 @@ function updateHeaderSignUp() {
   `;
 }
 
+
+const resultContainer = document.getElementById("result");
+
+function fetchData() {
+  resultContainer.innerHTML = "";
+
+  const filterInput = document.getElementById("filterInput");
+  const filter = filterInput.value;
+
+  const url = "https://" + encodeURIComponent(filter);
+  const headers = {
+    method: 'GET',
+    mode: 'cors',
+    cache: 'default',
+    credentials: 'omit',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+  };
+
+  fetch(url, headers)
+    .then(response => {
+      if (response.status !== 200) {
+        const errorMsg = 'Database response error: ' + response.status;
+        console.log(errorMsg);
+        const tr = document.createElement("tr");
+        const td = document.createElement("td");
+        td.innerHTML = errorMsg;
+        tr.appendChild(td);
+        resultContainer.appendChild(tr);
+        return;
+      }
+
+      response.json().then(data => {
+        console.log(data);
+
+      for (const row of data.results) {
+          console.log(row);
+
+          const tr = document.createElement("tr");
+
+          const artist = document.createElement("td");
+          const track = document.createElement("td");
+          const image = document.createElement("td");
+          const preview = document.createElement("td");
+
+          artist.innerHTML = row.artistName;
+          track.innerHTML = row.trackName; 
+          const img = document.createElement("img");
+          img.src = row.artworkUrl100;
+          image.appendChild(img);
+
+          const audio = document.createElement("audio");
+          audio.controls = true;
+          const source = document.createElement("source");
+          source.src = row.previewUrl;
+          source.type = "audio/mp4";
+          audio.appendChild(source);
+          preview.appendChild(audio);
+
+          tr.appendChild(artist);
+          tr.appendChild(track);
+          tr.appendChild(image);
+          tr.appendChild(preview);
+
+          resultContainer.appendChild(tr);
+        }
+      })
+    })
+    .catch(err => {
+      console.error(err);
+      const tr = document.createElement("tr");
+      const td = document.createElement("td");
+      td.innerHTML = err;
+      tr.appendChild(td);
+      resultContainer.appendChild(tr);
+    });
+}
+
+
+
 function signOut() {
   // Remove the "userEmail" cookie
   document.cookie = 'userEmail=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';

diff --git a/assets/search/search.js b/assets/search/search.js
@@ -1,43 +1,162 @@
-import logo from '/favicon.ico';
-import './style/scss';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import { Container, InputGroup, FormControl, Button, Row, Card } from 'react-bootstrap'
-import { useState, useEffect } from 'react';
-
-function App() {
-    const [ searchInput, setSearchInput ] = useState("");
-
-    return {
-        <div className="App">
-            <Container>
-                <InputGroup className="mb-3" size="lg">
-                    <FormControl
-                        placeholder="Search for Artist"
-                        type="input"
-                        onKeyPress={event => {
-                            if (event.key == "Enter") {
-                                console.log("Pressed Enter");
-                            }
-                        }}
-                        onChange={event => setSearchInput(event.target.value)}
-                    />
-                    <Button onClick={() => {console.log("Clicked Button")}}>
-                        Search
-                    </Button>
-                </InputGroup>
-            </Container>
-            <Container>
-                <Row className="mx-2 row row-cols-4">
-                    <Card>
-                        <Card.Img src="#" />
-                        <Card.Body>
-                            <Card.Title>Album Name Here</Card.Title>
-                        </Card.Body>
-                    </Card>
-                </Row>
-            </Container>
-        </div>
-    };
+// import logo from '/favicon.ico';
+// import './style/scss';
+// import 'bootstrap/dist/css/bootstrap.min.css';
+// import { Container, InputGroup, FormControl, Button, Row, Card } from 'react-bootstrap'
+// import { useState, useEffect } from 'react';
+
+// function App() {
+//     const [ searchInput, setSearchInput ] = useState("");
+
+//     return {
+//         <div className="App">
+//             <Container>
+//                 <InputGroup className="mb-3" size="lg">
+//                     <FormControl
+//                         placeholder="Search for Artist"
+//                         type="input"
+//                         onKeyPress={event => {
+//                             if (event.key == "Enter") {
+//                                 console.log("Pressed Enter");
+//                             }
+//                         }}
+//                         onChange={event => setSearchInput(event.target.value)}
+//                     />
+//                     <Button onClick={() => {console.log("Clicked Button")}}>
+//                         Search
+//                     </Button>
+//                 </InputGroup>
+//             </Container>
+//             <Container>
+//                 <Row className="mx-2 row row-cols-4">
+//                     <Card>
+//                         <Card.Img src="#" />
+//                         <Card.Body>
+//                             <Card.Title>Album Name Here</Card.Title>
+//                         </Card.Body>
+//                     </Card>
+//                 </Row>
+//             </Container>
+//         </div>
+//     };
+// }
+
+// export default App;
+
+document.getElementById("search").onclick = function(){fetchData()}
+
+var client_id = 'a76d4532c6e14dd7bd7393e3fccc1185';
+var client_secret = '1c286b5fd76140b7a7af34792b63b424';
+
+async function getSpotifyToken() {
+    const url = 'https://accounts.spotify.com/api/token';
+    const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+            'Authorization': 'Basic ' + (btoa(client_id + ':' + client_secret)),
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        body: 'grant_type=client_credentials',
+        json: true
+    })
+    if (response.ok) {
+        const jsonResponse = await response.json();
+        console.log(jsonResponse);
+        return jsonResponse.access_token;
+    } else {
+        console.log(response.statusText);
+        throw new Error(`Request failed! Status code: ${response.status} ${response.statusText}`);
+    }
 }
 
-export default App;
+const accessToken = await getSpotifyToken()
+
+
+const resultContainer = document.getElementById("result");
+
+function fetchData() {
+  const searchQuery = document.getElementById("filterInput").value; 
+
+  // Define the Spotify API endpoint for searching tracks
+  const searchEndpoint = `https://api.spotify.com/v1/search?q=${encodeURIComponent(searchQuery)}&type=track`;
+
+  // Define the headers for the request, including the access token
+  const headers = {
+    'Authorization': `Bearer ${accessToken}`,
+  };
+
+  // Make a GET request to the Spotify API
+  fetch(searchEndpoint, { headers })
+    .then(response => {
+      if (response.status === 200) {
+        return response.json();
+      } else {
+        throw new Error('Failed to fetch data');
+      }
+    })
+    .then(data => {
+      // Handle the data here, e.g., display the search results
+      console.log(data);
+    })
+    .catch(error => {
+      console.error('Error:', error);
+    });
+
+
+//   fetch(url, headers)
+//     .then(response => {
+//       if (response.status !== 200) {
+//         const errorMsg = 'Database response error: ' + response.status;
+//         console.log(errorMsg);
+//         const tr = document.createElement("tr");
+//         const td = document.createElement("td");
+//         td.innerHTML = errorMsg;
+//         tr.appendChild(td);
+//         resultContainer.appendChild(tr);
+//         return;
+//       }
+
+//       response.json().then(data => {
+//         console.log(data);
+
+//       for (const row of data.results) {
+//           console.log(row);
+
+//           const tr = document.createElement("tr");
+
+//           const artist = document.createElement("td");
+//           const track = document.createElement("td");
+//           const image = document.createElement("td");
+//           const preview = document.createElement("td");
+
+//           artist.innerHTML = row.artistName;
+//           track.innerHTML = row.trackName; 
+//           const img = document.createElement("img");
+//           img.src = row.artworkUrl100;
+//           image.appendChild(img);
+
+//           const audio = document.createElement("audio");
+//           audio.controls = true;
+//           const source = document.createElement("source");
+//           source.src = row.previewUrl;
+//           source.type = "audio/mp4";
+//           audio.appendChild(source);
+//           preview.appendChild(audio);
+
+//           tr.appendChild(artist);
+//           tr.appendChild(track);
+//           tr.appendChild(image);
+//           tr.appendChild(preview);
+
+//           resultContainer.appendChild(tr);
+//         }
+//       })
+//     })
+//     .catch(err => {
+//       console.error(err);
+//       const tr = document.createElement("tr");
+//       const td = document.createElement("td");
+//       td.innerHTML = err;
+//       tr.appendChild(td);
+//       resultContainer.appendChild(tr);
+//     });
+}
diff --git a/assets/stats/styles.css b/assets/stats/styles.css
@@ -24,7 +24,7 @@ div {
 
 .input-group{
     margin: auto;
-    margin-top: 30px;
+    margin-top: auto;
     width: 80%;
 }
 
@@ -38,6 +38,21 @@ div {
     text-align: center;
 }
 
+.input-group input[type="submit"] {
+    background-color: #924bee;
+    color: #fff;
+    border: none;
+    border-radius: 25px;
+    padding: 10px 20px;
+    cursor: pointer;
+    font-size: 18px;
+    margin-bottom: 20px;
+}
+
+.input-group input[type="submit"]:hover {
+    background-color: #df7bda;
+}
+
 body {
     background-image: url('../../images/purple-bg-full.jpeg');
     background-repeat: no-repeat;

diff --git a/classroom.md b/classroom.md
@@ -1,4 +1,6 @@
 <link rel="stylesheet" href="{{ site.baseurl }}/assets/classroom/styles.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.4/sockjs.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
 <script src="{{ site.baseurl }}/assets/classroom/script.js"></script>
 
 <div class="main">