mick-io · March 25, 2021 15:36
diff --git a/random-name-selector.html b/random-name-selector.html
 <!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>STG Dev Center Random Name Selector</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <style>
      .wrapper {
        margin: 10px;
      }

      .btn {
        display: block;
        margin: 10px;
      }

      .name-item {
        display: block;
      }

      .name-div {
        background-color: lightblue;
        display: inline-block;
        width: 150px;
        height: 15%;
        border: 1px solid black;
        margin-top: 5px;
        padding: 5px;
        border-radius: 5px;
      }

      .delete-div {
        display: inline-block;
        margin-left: 10px;
      }

      .delete-div:hover {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <button type="button" class="btn btn-primary" id="select-button">
        Randomly Select Name
      </button>
      <button type="button" class="btn btn-secondary" id="add-button">
        Add Name
      </button>
      <ul id="name-list"></ul>
    </div>

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-firestore.js"></script>

    <script>
      (function () {
        const db = initFirebase();

        let winningIndex = -1;
        let peopleElements = [];

        const nameListElement = document.getElementById("name-list");
        const selectButton = document.getElementById("select-button");
        const addButton = document.getElementById("add-button");

        addButton.onclick = addName;
        selectButton.onclick = selectWinner;

        getPeople().then((people) => {
          peopleElements = people.map((person) =>
            createNameElement(person.name)
          );
          nameListElement.append(...peopleElements);
        });

        function addName() {
          const name = window.prompt("Enter a name");
          if (name) {
            db.collection("people")
              .add({ name, nWins: 0 })
              .then(() => {
                const ele = createNameElement(name);
                peopleElements.push(ele);
                nameListElement.append(ele);
              });
          }
        }

        function removeName(nameEle) {
          // TODO: Properly query Firebase.
          db.collection("people")
            .get()
            .then((querySnapshot) => {
              const name = nameEle.firstChild.innerHTML; // <- This is sloppy. Fix this.
              let rmDocID = "";
              querySnapshot.forEach((doc) => {
                if (doc.data().name === name) {
                  rmDocID = doc.id;
                }
              });
              // TODO: Archive rather than delete people.
              db.collection("people")
                .doc(rmDocID)
                .delete()
                .then(() => {
                  nameListElement.removeChild(nameEle);
                });
            });
        }

        function getPeople() {
          return new Promise((resolve) => {
            db.collection("people")
              .get()
              .then((querySnapshot) => {
                // There maybe a better way to extract the people data. Learn Firebase?
                const people = [];
                querySnapshot.forEach((doc) => people.push(doc.data()));
                // Sorting people alphabetically
                resolve(people.sort((a, b) => a.name > b.name));
              });
          });
        }

        function selectWinner() {
          let prevWinningIndex = winningIndex;

          // Removing highlight from previous winners name
          if (prevWinningIndex != -1) {
            peopleElements[winningIndex].children[0].style.backgroundColor = "";
          }

          // Prevents previous winner from winning again.
          while (winningIndex == prevWinningIndex) {
            winningIndex = Math.floor(Math.random() * peopleElements.length);
          }
          peopleElements[winningIndex].children[0].style.backgroundColor =
            "yellow";

          // TODO: record win in Firebase.
        }

        function createNameElement(name) {
          const nameEle = document.createElement("li");
          const nameDiv = document.createElement("div");
          const deleteDiv = document.createElement("div");

          nameEle.className = "name-item";
          nameDiv.className = "name-div";
          deleteDiv.className = "delete-div";

          nameDiv.textContent = name;

          // TODO: Use a Font Awesome icon.
          deleteDiv.textContent = "X";
          deleteDiv.onclick = () => removeName(nameEle);

          nameEle.appendChild(nameDiv);
          nameEle.appendChild(deleteDiv);

          return nameEle;
        }

        function initFirebase() {
          const firebaseConfig = {};
          firebase.initializeApp(firebaseConfig);
          return firebase.firestore();
        }
      })();
    </script>
  </body>
 </html>
	<!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>STG Dev Center Random Name Selector</title>
	<link
	rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
	integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
	crossorigin="anonymous"
	/>
	<style>
	.wrapper {
	margin: 10px;
	}

	.btn {
	display: block;
	margin: 10px;
	}

	.name-item {
	display: block;
	}

	.name-div {
	background-color: lightblue;
	display: inline-block;
	width: 150px;
	height: 15%;
	border: 1px solid black;
	margin-top: 5px;
	padding: 5px;
	border-radius: 5px;
	}

	.delete-div {
	display: inline-block;
	margin-left: 10px;
	}

	.delete-div:hover {
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<div class="wrapper">
	<button type="button" class="btn btn-primary" id="select-button">
	Randomly Select Name
	</button>
	<button type="button" class="btn btn-secondary" id="add-button">
	Add Name
	</button>
	<ul id="name-list"></ul>
	</div>

	<!-- The core Firebase JS SDK is always required and must be listed first -->
	<script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-app.js"></script>
	<script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-firestore.js"></script>

	<script>
	(function () {
	const db = initFirebase();

	let winningIndex = -1;
	let peopleElements = [];

	const nameListElement = document.getElementById("name-list");
	const selectButton = document.getElementById("select-button");
	const addButton = document.getElementById("add-button");

	addButton.onclick = addName;
	selectButton.onclick = selectWinner;

	getPeople().then((people) => {
	peopleElements = people.map((person) =>
	createNameElement(person.name)
	);
	nameListElement.append(...peopleElements);
	});

	function addName() {
	const name = window.prompt("Enter a name");
	if (name) {
	db.collection("people")
	.add({ name, nWins: 0 })
	.then(() => {
	const ele = createNameElement(name);
	peopleElements.push(ele);
	nameListElement.append(ele);
	});
	}
	}

	function removeName(nameEle) {
	// TODO: Properly query Firebase.
	db.collection("people")
	.get()
	.then((querySnapshot) => {
	const name = nameEle.firstChild.innerHTML; // <- This is sloppy. Fix this.
	let rmDocID = "";
	querySnapshot.forEach((doc) => {
	if (doc.data().name === name) {
	rmDocID = doc.id;
	}
	});
	// TODO: Archive rather than delete people.
	db.collection("people")
	.doc(rmDocID)
	.delete()
	.then(() => {
	nameListElement.removeChild(nameEle);
	});
	});
	}

	function getPeople() {
	return new Promise((resolve) => {
	db.collection("people")
	.get()
	.then((querySnapshot) => {
	// There maybe a better way to extract the people data. Learn Firebase?
	const people = [];
	querySnapshot.forEach((doc) => people.push(doc.data()));
	// Sorting people alphabetically
	resolve(people.sort((a, b) => a.name > b.name));
	});
	});
	}

	function selectWinner() {
	let prevWinningIndex = winningIndex;

	// Removing highlight from previous winners name
	if (prevWinningIndex != -1) {
	peopleElements[winningIndex].children[0].style.backgroundColor = "";
	}

	// Prevents previous winner from winning again.
	while (winningIndex == prevWinningIndex) {
	winningIndex = Math.floor(Math.random() * peopleElements.length);
	}
	peopleElements[winningIndex].children[0].style.backgroundColor =
	"yellow";

	// TODO: record win in Firebase.
	}

	function createNameElement(name) {
	const nameEle = document.createElement("li");
	const nameDiv = document.createElement("div");
	const deleteDiv = document.createElement("div");

	nameEle.className = "name-item";
	nameDiv.className = "name-div";
	deleteDiv.className = "delete-div";

	nameDiv.textContent = name;

	// TODO: Use a Font Awesome icon.
	deleteDiv.textContent = "X";
	deleteDiv.onclick = () => removeName(nameEle);

	nameEle.appendChild(nameDiv);
	nameEle.appendChild(deleteDiv);

	return nameEle;
	}

	function initFirebase() {
	const firebaseConfig = {};
	firebase.initializeApp(firebaseConfig);
	return firebase.firestore();
	}
	})();
	</script>
	</body>
	</html>