Test/merge cha frontend

client/.gitignore

@@ -8,8 +8,7 @@
 # testing
 /coverage
 
-# production
-/build
+
 
 # misc
 .DS_Store

client/build/asset-manifest.json

@@ -0,0 +1,15 @@
+{
+  "files": {
+    "main.css": "/static/css/main.073c9b0a.css",
+    "main.js": "/static/js/main.b15d575c.js",
+    "static/js/787.c4e7f8f9.chunk.js": "/static/js/787.c4e7f8f9.chunk.js",
+    "index.html": "/index.html",
+    "main.073c9b0a.css.map": "/static/css/main.073c9b0a.css.map",
+    "main.b15d575c.js.map": "/static/js/main.b15d575c.js.map",
+    "787.c4e7f8f9.chunk.js.map": "/static/js/787.c4e7f8f9.chunk.js.map"
+  },
+  "entrypoints": [
+    "static/css/main.073c9b0a.css",
+    "static/js/main.b15d575c.js"
+  ]
+}

client/build/assets/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Kartik Jevaji
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

client/build/assets/assets/css/styles.css

@@ -0,0 +1,136 @@
+/* General Stylings */
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+main {
+  flex: 1 0 auto;
+}
+
+iframe {
+  display: block;
+  margin: 0 auto;
+}
+
+[type="radio"]:not(:checked),
+[type="radio"]:checked {
+  position: static;
+  opacity: 1;
+  pointer-events: fill;
+  width: 2em;
+  height: 1.5em;
+}
+
+label {
+  font-size: 2em;
+  position: unset;
+}
+
+.yesNo {
+  text-align: center;
+}
+
+/* Header Stylings */
+header {
+  border-radius: 0px;
+  margin: 0;
+  padding: 0.25%;
+}
+
+header a {
+  text-decoration: none;
+  color: white;
+}
+
+header h1 {
+  color: white;
+  font-size: 36px;
+  margin: 0;
+}
+
+/* MaterializeCSS Style Overrides */
+.btn {
+  margin: 5%;
+}
+
+.btn-large {
+  margin: 1%;
+}
+
+.modal {
+  max-width: 50%;
+  max-height: 65%;
+}
+
+.modal p {
+  margin: 0;
+  padding: 0;
+}
+
+/* Jumbotron Stylings */
+.jumbo {
+  background-image: url("../images/jumbo.jpg");
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position-y: 30%;
+  height: 25em;
+}
+/* Main content stylings for home page */
+.about {
+  padding: 2%;
+}
+
+.card {
+  margin: 5%;
+}
+
+.card h3 {
+  padding: 2%;
+}
+
+.card p {
+  padding: 2%;
+}
+
+/* Quiz builder modal stylings */
+.category-select {
+  padding: 2% 0;
+}
+
+.category-list p {
+  margin: 0;
+}
+
+/* Styling for book suggestion box */
+#suggestions {
+  padding: 2%;
+}
+
+/* Footer stylings */
+footer {
+  margin: 0;
+  padding: 0;
+}
+
+.footer-item {
+  text-align: center;
+}
+
+footer h6 {
+  color: white;
+}
+
+footer a {
+  text-decoration: none;
+  color: white;
+}
+
+/* update position of jumbo image on small screens */
+@media only screen and (max-width: 750px) {
+  .jumbo {
+    background-position: right;
+  }
+}

client/build/assets/assets/js/api-results.js

@@ -0,0 +1,181 @@
+// This script will pull the information from quiz results
+// and use our api's to generate in the moment youtube vidoes
+// and out of the moment book recommendations from google books
+
+let videosToDisplay = [];
+let booksToDisplay = [];
+let fetchedBooks = [];
+let savedResources = [];
+let quizResults = [];
+let quizSavedResults = [];
+let testDate = new Date().toLocaleDateString();
+let dateEl = document.querySelector("#date");
+dateEl.textContent = testDate;
+
+// grabbing querystring, will eventually be able to actually use multiple inputs
+let queryString = document.location.search;
+let quizResultArray = queryString.split("&");
+for (i = 0; i < quizResultArray.length; i++) {
+  let stringParse = quizResultArray[i].split("=");
+  // console.log(stringParse);
+  if (stringParse[1] == "true") {
+    quizResults.push(stringParse[0]);
+  }
+  else if (stringParse[1] == "false") {
+  }
+}
+
+// translate quizResults into searchables
+function getApiQueries(results) {
+  let quizResultText = "";
+
+  if (results.includes("?depression")) {
+    fetchVideos("dogs");
+    fetchBooks("depression");
+    quizResultText += "Depression";
+    // console.log(quizResultText)
+    quizSavedResults.push("Depression")
+  }
+  if (results.includes("anxiety")) {
+    fetchVideos("meditation");
+    fetchBooks("anxiety");
+    quizResultText += " Anxiety";
+    quizSavedResults.push("Anxiety")
+
+  }
+  if (results.includes("ptsd")) {
+    fetchVideos("meditation");
+    fetchBooks("ptsd");
+    quizResultText += " Ptsd";
+    quizSavedResults.push("Ptsd")
+
+  }
+  if (results.includes("sch")) {
+    fetchVideos("help-dissociative-episode");
+    fetchBooks("schizophrenia");
+    quizResultText += " Schizophrenia"
+    quizSavedResults.push("Schizophrenia and related disorders")
+  }
+
+  if (results.includes("add")) {
+    fetchVideos("peer-based-recovery");
+    fetchBooks("addiction");
+    quizResultText += " Addiction"
+    quizSavedResults.push("Addiction")
+  }
+
+  let resultContainerDivEl = document.querySelector("#resultContainer")
+  let resultTextEl = document.createElement("h3")
+  resultTextEl.className = "col s10 offset-s1"
+  // console.log(quizResultText)
+
+  resultTextEl.innerHTML = "Your quiz result includes the following categories: " + "<br/>" + quizResultText
+  resultContainerDivEl.appendChild(resultTextEl);
+};
+
+// function for youtube api fetch
+function fetchVideos(searchTerm) {
+  // want to find a way to check for only embeddable videos, format=5 kind of works
+  fetch("https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=10&q=" + searchTerm + "&safeSearch=moderate&format=5&key=AIzaSyDkgh_PUGT_MHKcw1jIVT-sqJKfJGKkLUU")
+    .then(function (result) {
+      return result.json();
+    })
+    .then(function (result) {
+      // find random 4 videos out of the 10 generated
+      for (i = 0; i < 4; i++) {
+        let a = Math.floor(Math.random() * 10);
+        let video = result.items[a].id.videoId;
+        // to check for duplicates
+        if (videosToDisplay.includes(video)) {
+          i--
+        }
+        else {
+          videosToDisplay.push(video);
+          displayVideo(video, i);
+        };
+      };
+    }).catch(function (error) {
+      // logs error if a problem occurs
+      console.log(error);
+    });
+};
+
+// function for google books api fetch
+function fetchBooks(searchTerm) {
+  // currently grabs a lot of academic books, want to get rid of those eventually I think
+  fetch("https://www.googleapis.com/books/v1/volumes?q=" + searchTerm)
+    .then(function (result) {
+      return result.json();
+    })
+    .then(function (result) {
+      // retrieves random 3 books from response and calls displayBook to output to viewport
+      for (i = 0; i < 3; i++) {
+        let a = Math.floor(Math.random() * 10);
+        let book = result.items[a].volumeInfo;
+
+        // to check for duplicates
+        if (booksToDisplay.includes(book)) {
+          i--
+        }
+        else {
+          booksToDisplay.push(book);
+          displayBook(book, i);
+        };
+      };
+    }).catch(function (error) {
+      // logs error if a problem occurs
+      console.log(error);
+    });
+};
+
+// functions for printing content to screen
+function displayBook(bookInfo, i) {
+  let bookEl = $("#suggestion-" + i);
+  let bookLink = $("<a>");
+  bookLink.attr("href", bookInfo.infoLink);
+  bookLink.attr("target", "_blank");
+  let bookImg = $("<img>");
+  bookImg.attr("alt", bookInfo.title + " image preview");
+  bookImg.attr("src", bookInfo.imageLinks.thumbnail);
+  bookImg.attr("class", "offset-s1, z-depth-3"); // add class/style
+
+  bookLink.append(bookImg);
+  bookEl.append(bookLink);
+};
+
+function displayVideo(video, i) {
+  $("#video-" + i).attr("src", "https://www.youtube.com/embed/" + video)
+}
+
+// function to save recents, keeping 3 total replacing the oldest
+$("#save-btn").click(function () {
+  // console.log("the results are saved!");
+  let savedResults = {
+    "books": booksToDisplay,
+    "videos": videosToDisplay,
+    "results": quizSavedResults,
+    "date": testDate
+  };
+
+  savedResources.unshift(savedResults);
+
+  if (savedResources.length <= 3) {
+    localStorage.setItem("previousResources", JSON.stringify(savedResources))
+  }
+  else {
+    savedResources.pop();
+    localStorage.setItem("previousResources", JSON.stringify(savedResources))
+  };
+});
+
+function loadSavedResources() {
+  if (localStorage.getItem("previousResources")) {
+    savedResources = JSON.parse(localStorage.getItem("previousResources"));
+  }
+  else {
+    savedResources = [];
+  }
+}
+
+getApiQueries(quizResults);
+loadSavedResources();