gfisk777 · gfisk777 · Dec 3, 2022 · Dec 1, 2022 · Dec 1, 2022 · Dec 2, 2022
diff --git a/client/index.html b/client/index.html
@@ -1,14 +1,77 @@
+<!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Group Project Base</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    <h1>group 1 Garrett Fisk, Jaeha Song</h1>
-    <script src="./script.js"></script>
-    <b>hello</b>
-</body>
-</html>
+  <head>
+    <title>Group 1 - Garrett Fisk, Jaeha Song</title>
+    <meta charset="UTF-8"/>
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
+      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
+      crossorigin=""/>
+    <link rel="stylesheet" href="styles.css" />
+    <!-- Make sure you put this AFTER Leaflet's CSS -->
+    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
+      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
+      crossorigin=""></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+
+  <body>
+    <div class="wrapper">
+      <div class="header">
+        <h1>Group 1 - Garrett Fisk, Jaeha Song</h1>
+      </div>
+
+      <div class="container">
+        <div class="left_section box">
+          <div class="header">
+            <h3>Form Inputs</h3>
+          </div>
+          <form class="box main_form" action="/api">
+            <div>
+                <label for="resto">Filter Restaurant List</label>
+                <input type="text" name="resto" id="resto">
+            </div>
+            <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+            <button type="submit" id="get-resto">Change Restaurants</button>
+        </form>
+        </div>
+
+        <div class="right_section box">
+          <div class="header">
+            <h2>Local Restaurant Map</h2>
+          </div>
+          <!-- <div id="map"></div> -->
+          <div>
+            <canvas id="myChart"></canvas>
+          </div>
+          <div class="box" id="restaurant_list">
+            <p>A list of restaurants from an API.</p>
+          </div>
+        </div>
+      </div>
+
+      <footer class="footer">
+        gfisk777
+        <a
+          href="https://github.com/gfisk777/Group1-Project-Base"
+          target="blank"
+          >Link to gitHub</a
+        >
+      </footer>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
+
+
+<!--
+    This is how to build the CSS-only load animation from loading.io    
+    <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+
+    This is helpful for showing your client-side users when data is loading,
+    since there's otherwise no sign your app is thinking about something!
+
+    Try placing it at the same level in your element tree as your Submit button
+-->
diff --git a/client/script.js b/client/script.js
@@ -0,0 +1,282 @@
+/* eslint-disable max-len */
+/*
+  Hook this script to index.html
+  by adding `<script src="script.js">` just before your closing `</body>` tag
+*/
+
+/*
+  ## Utility Functions
+    Under this comment place any utility functions you need - like an inclusive random number selector
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
+*/
+
+// gets a random integer between two numbers
+function getRandomIntInclusive(min, max) {
+  const newMin = Math.ceil(min);
+  const newMax = Math.floor(max);
+  return Math.floor(Math.random() * (newMax - newMin + 1) + min); // The maximum is inclusive and the minimum is inclusive
+}
+
+/*
+    ## JS and HTML Injection
+      There are a bunch of methods to inject text or HTML into a document using JS
+      Mainly, they're considered "unsafe" because they can spoof a page pretty easily
+      But they're useful for starting to understand how websites work
+      the usual ones are element.innerText and element.innerHTML
+      Here's an article on the differences if you want to know more:
+      https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext
+
+    ## What to do in this function
+      - Accept a list of restaurant objects
+      - using a .forEach method, inject a list element into your index.html for every element in the list
+      - Display the name of that restaurant and what category of food it is
+  */
+function injectHTML(list) {
+  console.log('fired injectHTML');
+  const target = document.querySelector('#restaurant_list');
+  target.innerHTML = '';
+
+  const listEl = document.createElement('ol');
+  target.appendChild(listEl);
+  list.forEach((item) => {
+    const el = document.createElement('li');
+    el.innerText = item.name;
+    listEl.appendChild(el);
+  });
+}
+
+function processRestaurants(list) {
+  console.log('fired restaurants list');
+  const range = [...Array(15).keys()]; // Special notation to create an array of 15 elements
+  const newArray = range.map((item) => {
+    const index = getRandomIntInclusive(0, list.length);
+    return list[index];
+  });
+  return newArray;
+  /*
+      ## Process Data Separately From Injecting It
+        This function should accept your 1,000 records
+        then select 15 random records
+        and return an object containing only the restaurant's name, category, and geocoded location
+        So we can inject them using the HTML injection function
+
+        You can find the column names by carefully looking at your single returned record
+        https://data.princegeorgescountymd.gov/Health/Food-Inspection/umjn-t2iz
+
+      ## What to do in this function:
+
+      - Create an array of 15 empty elements (there are a lot of fun ways to do this, and also very basic ways)
+      - using a .map function on that range,
+      - Make a list of 15 random restaurants from your list of 100 from your data request
+      - Return only their name, category, and location
+      - Return the new list of 15 restaurants so we can work on it separately in the HTML injector
+    */
+}
+
+// good programming practice: one idea per line
+function filterList(array, filterInputValue) {
+  const newArray = array.filter((item) => { // .filter(array) checks if true and adds the item to a new array
+    if (!item.name) { return; }
+    const lowerCaseName = item.name.toLowerCase();
+    const lowerCaseQuery = filterInputValue.toLowerCase();
+    return lowerCaseName.includes(lowerCaseQuery);
+  });
+  return newArray;
+}
+
+function initMap() {
+  console.log('initMap');
+  const map = L.map('map').setView([38.7849, -76.8721], 13);
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+  }).addTo(map);
+  return map;
+}
+
+function markerPlace(array, map) {
+  console.log('markerPlace', array);
+  // const marker = L.marker([51.5, -0.09]).addTo(map);
+  map.eachLayer((layer) => {
+    if (layer instanceof L.Marker) {
+      layer.remove();
+    }
+  });
+  array.forEach((item, index) => {
+    const {coordinates} = item.geocoded_column_1;
+    L.marker([coordinates[1], coordinates[0]]).addTo(map);
+    if (index === 0) {
+      map.setView([coordinates[1], coordinates[0]], 10);
+    }
+  });
+}
+
+function initChart(chartTarget) {
+  return new Chart(chartTarget, {
+    type: 'bar',
+    data: {
+      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+      datasets: [{
+        label: '# of Votes',
+        data: [12, 19, 3, 5, 2, 3],
+        borderWidth: 1
+      }]
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true
+        }
+      }
+    }
+  });
+}
+
+function generateRandomString() {
+  const array = new Uint32Array(1);
+  self.crypto.getRandomValues(array);
+
+  return array[0];
+}
+
+async function getData(submit) {
+  const url = 'https://api.si.edu/openaccess/api/v1.0/search?q=q&api_key=v75sWiNNyg1QXFrgYo532qR0gwtYecj6kS8FtQBD'; // remote URL! you can test it in your browser
+  const data = await fetch(url); // We're using a library that mimics a browser 'fetch' for simplicity
+  const json = await data.json(); // the data isn't json until we access it using dot notation
+
+  // chained filters check if item has both a location and a name
+  const reply = json.filter((item) => Boolean(item.geocoded_column_1)).filter((item) => Boolean(item.name));
+  return reply;
+}
+
+// This function retrieves the access token from Spotify
+// Used the "Client Credentials Flow" on Spotify API
+// Problem with Buffer module. Browser doesn't recognize it, but won't let me import it
+// Current workaround for Buffer problem - used an online base64 encoder and manually encoded the client ID and secret key
+async function getAccessToken() {
+  const clientBase64 = 'YzkyNzBhMTIzYjJjNDA4ZmE5ZDc2NmNkMDBlOTY5ZjI6OTc4YmY5YTJmMmVjNDU4NDk2NmFjYzhiN2ZlMDYxNjg=';
+  const url = 'https://accounts.spotify.com/api/token';
+  const myHeaders = new Headers();
+  myHeaders.append('Authorization', `Basic ${clientBase64}`);
+  myHeaders.append('Content-Type', 'application/x-www-form-urlencoded');
+  myHeaders.append('Cookie', '__Host-device_id=AQBrEpG1cy0DhOXDyzabACYbb5SZKeLLWNMCoH4UJHKKW0CVBslV9tFnuaXGti78fRhIEXO512-5ZA35sx_VKqoJRO67Dd80T08; sp_tr=false');
+
+  const urlencoded = new URLSearchParams();
+  urlencoded.append('grant_type', 'client_credentials');
+
+  const requestOptions = {
+    method: 'POST',
+    headers: myHeaders,
+    body: urlencoded,
+    redirect: 'follow'
+  };
+  const reply = await fetch(url, requestOptions)
+  const json = await reply.json();
+  console.log(json.access_token);
+  return json.access_token;
+}
+
+/*
+    This function retrieves a list of artists that are related to the artist ID in the request
+    Need to add a way for users to type in an artist's name and see a list of related artists
+*/
+async function getRelatedArtists(token) {
+  const url = 'https://api.spotify.com/v1/artists/2wY79sveU1sp5g7SokKOiI/related-artists'; // remote URL! you can test it in your browser
+  const data = await fetch(url, {
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`
+    }
+  }); // We're using a library that mimics a browser 'fetch' for simplicity
+  const json = await data.json(); // the data isn't json until we access it using dot notation
+  console.log(json);
+
+  // getRelatedArtists returns a json containing an array, but only the array is returned
+  return json.artists;
+}
+
+async function mainEvent() {
+  /*
+      ## Main Event
+        Separating your main programming from your side functions will help you organize your thoughts
+        When you're not working in a heavily-commented "learning" file, this also is more legible
+        If you separate your work, when one piece is complete, you can save it and trust it
+    */
+  //   const pageMap = initMap();
+  // the async keyword means we can make API requests
+  const form = document.querySelector('.main_form'); // get your main form so you can do JS with it
+  const submit = document.querySelector('#get-resto'); // get a reference to your submit button
+  const loadAnimation = document.querySelector('.lds-ellipsis'); // get a reference to our loading animation
+  const chartTarget = document.querySelector('#myChart');
+  submit.style.display = 'none'; // let your submit button disappear
+
+  initChart(chartTarget);
+
+  /*
+      Let's get some data from the API - it will take a second or two to load
+      This next line goes to the request for 'GET' in the file at /server/routes/foodServiceRoutes.js
+      It's at about line 27 - go have a look and see what we're retrieving and sending back.
+     */
+  const token = await getAccessToken();
+  const chartData = await getRelatedArtists(token);
+  console.log(chartData);
+
+  /*
+      Below this comment, we log out a table of all the results using "dot notation"
+      An alternate notation would be "bracket notation" - arrayFromJson["data"]
+      Dot notation is preferred in JS unless you have a good reason to use brackets
+      The 'data' key, which we set at line 38 in foodServiceRoutes.js, contains all 1,000 records we need
+    */
+  // console.table(arrayFromJson.data);
+
+  // in your browser console, try expanding this object to see what fields are available to work with
+  // for example: arrayFromJson.data[0].name, etc
+  console.log(chartData[0].name);
+
+  // this is called "string interpolation" and is how we build large text blocks with variables
+  console.log(`${chartData[0].name} ${chartData[0].popularity}`);
+
+  // This IF statement ensures we can't do anything if we don't have information yet
+  if (!chartData.artists?.length) { return; } // Return if we have no data aka array has no length
+
+  submit.style.display = 'block'; // let's turn the submit button back on by setting it to display as a block when we have data available
+
+  // hides loading animation once data has been loaded
+  loadAnimation.classList.remove('lds-ellipsis');
+  loadAnimation.classList.add('lds-ellipsis_hidden');
+
+  let currentList = []; // used by both event listeners, allows them to interact with each other
+
+  form.addEventListener('input', (event) => { // event bubbling
+    console.log('input', event.target.value); // <input> contents
+    const newFilterList = filterList(currentList, event.target.value); // filters currentList
+    injectHTML(newFilterList);
+    // markerPlace(newFilterList, pageMap);
+  });
+  // And here's an eventListener! It's listening for a "submit" button specifically being clicked
+  // this is a synchronous event event, because we already did our async request above, and waited for it to resolve
+  form.addEventListener('submit', (submitEvent) => {
+    // This is needed to stop our page from changing to a new URL even though it heard a GET request
+    submitEvent.preventDefault();
+
+    // This constant will have the value of your 15-restaurant collection when it processes
+    currentList = processRestaurants(chartData.artists);
+    console.log(currentList);
+
+    // And this function call will perform the "side effect" of injecting the HTML list for you
+    injectHTML(currentList);
+    // markerPlace(currentList, pageMap);
+
+    // By separating the functions, we open the possibility of regenerating the list
+    // without having to retrieve fresh data every time
+    // We also have access to some form values, so we could filter the list based on name
+  });
+}
+
+/*
+    This last line actually runs first!
+    It's calling the 'mainEvent' function at line 57
+    It runs first because the listener is set to when your HTML content has loaded
+  */
+document.addEventListener('DOMContentLoaded', async () => mainEvent()); // the async keyword means we can make API requests