FireBase Dropdown Workpaper

by Alex Cowan

HTML

<body>
<html>

<!DOCTYPE html>
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>

<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>

<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-firestore.js"></script>

<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyDYIj24CmOxBmJX-SSLGCXVDOjfDrGppwU",
    authDomain: "codinggpt---aedify-project.firebaseapp.com",
    databaseURL: "https://codinggpt---aedify-project-default-rtdb.firebaseio.com",
    projectId: "codinggpt---aedify-project",
    storageBucket: "codinggpt---aedify-project.appspot.com",
    messagingSenderId: "1066611410903",
  };
  firebase.initializeApp(config);

</script>

<!-- Create a dropdown -->
<select id="episodeDropdown">
     <option value="ALL">Select Episode</option>
     <option value="Episode1">Episode 1 - The Vacuum</option>
     <option value="Episode2">Episode 2 - The Junkyard</option>
     <option value="Episode3">Episode 3 - The SpaceRun</option>
     <option value="Episode4">Episode 4 - Ulterior Motives</option>
     <option value="Episode5">Episode 5 - Blast Off</option>
</select>
 <button type="button" id='go-btn'>Go</button>
<div id="episodeDetails">
          <div class="episodes" data-value="ALL"></div>
          <div class="episodes" data-value="Episode1"></div>
          <div class="episodes" data-value="Episode2"></div>
          <div class="episodes" data-value="Episode3"></div>
          <div class="episodes" data-value="Episode4"></div>
          <div class="episodes" data-value="Episode5"></div>
</div>

</html>
</body>

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  //add listener for user input
  document.getElementById('go-btn').addEventListener('click', loadEpisodeData);
  loadSpecificDocument();
});


function loadEpisodeData() {
  var dropdown = document.getElementById("episodeDropdown");
  //var selectedValue = dropdown.Episode1[dropdown.Title].text;

  var value = dropdown.value;
  var text = dropdown.options[dropdown.selectedIndex].text;

  // Print the selected episode title
  console.log("Title:" + value + text);
}

function loadSpecificDocument() {
  var firestore = firebase.firestore();
  var docRef = firestore.collection('EpisodeList').doc('Episode1');

  docRef.get().then((doc) => {
    if (doc.exists) {
      console.log("Document data:", doc.data());
      // You can then process and display the data as needed
    } else {
      console.log("No such document!");
    }
  }).catch((error) => {
    console.log("Error getting document:", error);
  });
}


/*

        // Reference to your Firebase Firestore collection (replace 'episodes' with your actual collection name)
          var episodesCollection = firebase.firestore().collection('EpisodeList');

          // Function to load episode data based on the selected dropdown option
          function loadEpisodeData() {
            var dropdown = document.getElementById('episodeDropdown');
            var selectedEpisode = dropdown.value;

            // Clear previous episode details
            document.getElementById('episodeDetails').innerHTML = '';

            if (selectedEpisode === 'Episode1') {
              // Fetch and display all episodes
              episodesCollection.get().then((selectedEpisode) => {
                querySnapshot.forEach((Episode) => {
                  displayEpisode(doc.data());
                });
              });
            } else {
              // Fetch and display a specific episode
              episodesCollection.doc(selectedEpisode).get().then((doc) => {
    ...