Skip to content

Instantly share code, notes, and snippets.

@AsthaSharma1
Last active June 18, 2021 19:38
Show Gist options
  • Save AsthaSharma1/171a28949b009b47156986ec00be9a39 to your computer and use it in GitHub Desktop.
Save AsthaSharma1/171a28949b009b47156986ec00be9a39 to your computer and use it in GitHub Desktop.
<html>
<head>
<title> DJ Queue </title>
<script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-auth.js"></script>
<script src="loginForm.js"> </script>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body{
/*text-align: center;*/
background-color: lightblue;
height: 100%;
/*background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);*/
font-family: 'Roboto', sans-serif;
}
.song-row{
background-color: white;
border-radius: 10px;<!DOCTYPE html>
padding: 10px;
margin: auto;
width: 50%;
margin-bottom: 20px;
text-align: center;
/*width: 50%;*/
}
#allSongs{
display: none;
}
#errorMessage{
display: none;
color: red;
}
#loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
margin: auto;
margin-top: 40px;
}
.Song{
text-align: center;
display: inline-block;
padding-right: 10px;
}
.Artist{
display: inline-block;
padding-right: 10px;
}
.Link{
/*display: inline-block;*/
text-align: center;
}
#hero{
text-align: center;
}
.deleteButton{
display: inline-block;
background-color: red;
color: white;
border:none;
padding:10px;
margin-left:20px;
text-align: center;
}
#signOut{
background-color: #606c88;
color:white;
border:none;
padding: 10px;
border-radius: 10px;
width:100px;
text-align: center;
height: auto;
}
.rowNotesSaveBtn{
background-color: green;
color: white;
border:none;
padding:10px;
margin-left:20px;
text-align: center;
display: inline-block;
}
.rowNotesField{
width: 100%;
border-top: 10px;
border-left: none;
border-right:none;
padding-top:10px;
margin-bottom: 10px;
display: inline-block;
}
</style>
<body>
<div id="hero">
<h1>Welcome to the Queue</h1>
<h4> This is how the queue currently looks. Delete any songs you need to. View the live queue <a href="./display.html" style="text-decoration: none; color:navy" target="_blank">here. </a> </h4>
<button onclick="signOut()" id="signOut"> Sign Out </button> <br/><br/>
</div>
<div id="display">
<div id="loader">
<h4> Loading</h4>
</div>
<div id="allSongs">
</div>
<div id="errorMessage">
<h2> Failed to get data. Please refresh </h2>
</div>
</div>
<script>
let allSongsElm = document.getElementById("allSongs")
let loaderElm = document.getElementById("loader")
let errorMessageElm = document.getElementById("errorMessage")
function setErrorDisplay(){
loaderElm.style.display = "none"
allSongsElm.style.display = "none"
errorMessageElm.style.display = "block"
}
function deleteRow(rowID) {
fetch("https://api.apispreadsheets.com/data/12730/?query=deletefrom12730whereID="+ rowID.toString()).then(res=>{
if (res.status === 200){
// SUCCESS
alert("Successfully Deleted")
location.reload();
}
else{
// ERROR
alert("Error Deleting!")
}
}).catch(err => {
alert("Error Deleting!")
})
}
function updateSongNotes(rowID){
const currValueOfNotes = document.getElementById("rowNotesField" + rowID.toString()).value
fetch("https://api.apispreadsheets.com/data/12730/", {
method: "POST",
body: JSON.stringify({"data": {"Notes": currValueOfNotes}, "query": "select*from12730whereID=" + rowID.toString()}),
}).then(res =>{
if (res.status === 201){
// SUCCESS
alert("Notes Updated")
}
else{
// ERROR
alert("Notes Not Updated")
}
})
}
fetch("https://api.apispreadsheets.com/data/12633/").then(res=>{
if (res.status === 200){
res.json().then(data=>{
const yourData = data["data"]
for(let i = 0; i < yourData.length; i++){
let rowInfo = yourData[i]
let rowInfoDiv = document.createElement("div")
rowInfoDiv.classList.add("song-row")
let rowSong = document.createElement("h2")
let rowSongNode = document.createTextNode(rowInfo["Song"])
rowSong.appendChild(rowSongNode)
rowSong.classList.add("Song")
let rowArtist = document.createElement("h4")
let rowArtistNode = document.createTextNode(rowInfo["Artist"])
rowArtist.appendChild(rowArtistNode)
rowArtist.classList.add("Artist")
let rowLink = document.createElement("a")
rowLink.setAttribute("href", rowInfo["Link"])
rowLink.setAttribute("target","_blank")
let rowLinkNode = document.createTextNode(rowInfo["Link"])
rowLink.appendChild(rowLinkNode)
rowLink.classList.add("Link")
let rowDeleteButton = document.createElement("button")
rowDeleteButton.setAttribute("onclick", "deleteRow(" + (rowInfo['ID']).toString() + ")")
let rowDeleteButtonNode = document.createTextNode("Delete Song")
rowDeleteButton.appendChild(rowDeleteButtonNode)
rowDeleteButton.classList.add("deleteButton")
let rowNotesField = document.createElement("input")
rowNotesField.setAttribute("type", "text")
rowNotesField.setAttribute("id", "rowNotesField" + rowInfo['ID'].toString())
rowNotesField.setAttribute("value", rowInfo['Notes'])
rowNotesField.classList.add("rowNotesField")
let rowNotesSaveBtn = document.createElement("button")
rowNotesSaveBtn.setAttribute("onclick", "updateSongNotes(" + rowInfo['ID'].toString() + ')')
let rowNotesSaveBtnNode = document.createTextNode("Save Notes")
rowNotesSaveBtn.appendChild(rowNotesSaveBtnNode)
rowNotesSaveBtn.setAttribute("id", "rowNotesSaveBtn" + rowInfo['ID'].toString())
rowNotesSaveBtn.classList.add("rowNotesSaveBtn")
rowInfoDiv.appendChild(rowSong)
rowInfoDiv.appendChild(rowArtist)
rowInfoDiv.appendChild(rowLink)
rowInfoDiv.appendChild(rowNotesField)
rowInfoDiv.appendChild(rowNotesSaveBtn)
rowInfoDiv.appendChild(rowDeleteButton)
allSongsElm.appendChild(rowInfoDiv)
}
loaderElm.style.display = "none"
allSongsElm.style.display = "block"
errorMessageElm.style.display = "none"
}).catch(err => {
setErrorDisplay()
})
}
else{
setErrorDisplay()
}
}).catch(err =>{
setErrorDisplay()
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment