Merge pull request #72 from software-students-spring2024/deleteCardsA…

…ndDecks Delete cards and decks, temporary fixes for json parsing issues
software-students-spring2024 · Mar 2, 2024 · 7e8ab98 · 7e8ab98
2 parents 41fce26 + a27c63a
commit 7e8ab98
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 24 deletions.
diff --git a/app.py b/app.py
@@ -113,27 +113,25 @@ def editCard(username, deckTitle, cardIndex):
     # TODO: is there a way to not have to refresh the page and show the edited card 
     return redirect(url_for('displayDeck', username=username, deckTitle=deckTitle))
 
-@app.route("/<username>/<deckTitle>/<cardIndex>/delete")
+@app.route("/<username>/<deckTitle>/<cardIndex>/delete", methods=["POST"])
 def deleteCard(username, deckTitle, cardIndex):
     # authenticate user
     if (not current_user.is_authenticated or current_user.id != username):
         return redirect(url_for('login'))
-    newCard = request.form["question"]
+    cardQuestion = request.form["question"]
     db.users.update_one(
         {"user_id": username, "personalDecks.title": deckTitle},
-        {"$pull": {"personalDecks.$.cards": newCard}}
+        {"$pull": {"personalDecks.$.cards": cardQuestion}}
     )
-    # would redirect to template for Cards
     # TODO: is there a way to not have to refresh the page and show the previous card 
     return redirect(url_for('displayDeck', username=username, deckTitle=deckTitle))
 
-@app.route("/<username>/<deckTitle>/delete")
+@app.route("/<username>/<deckTitle>/delete", methods=['GET', 'POST'])
 def deleteDeck(username, deckTitle):
     # authenticate user
     if (not current_user.is_authenticated or current_user.id != username):
         return redirect(url_for('login'))
     db.users.update_one({"user_id": username}, {"$pull": {"personalDecks": {"title": deckTitle}}})
-    # would rendirect to decks
     # TODO: is there a way to not have to refresh the page when deleting deck
     return redirect(url_for('allDecks', username=username))
 

diff --git a/static/css/style.css b/static/css/style.css
@@ -54,6 +54,10 @@ p a{
   font-size: 55px;
 }
 
+.delete-deck {
+  font-size: 40px;
+}
+
 .add-deck h3 {
   color: #FAFAFA;
   text-align: center;
@@ -287,4 +291,4 @@ p a{
   top: 47%;
   left: 50%;
   transform: translate(-50%, -50%);
-}
+}
diff --git a/templates/card.html b/templates/card.html
@@ -16,12 +16,16 @@ <h3 id="next-question"> START </h3>
         <button id="nextButton" class="card-button">&#8250;</button>
     </div>
 
-
     {% if isAuth %}
 
     <button id="add-card-button" class="button2" >Add Card</button>
     <button id="edit-card-button" class="button2" style="display: none">Edit</button>
 
+    <form method="post" id="delete-form">
+        <input type="hidden" name="question" id="delete-form-question" value=""></input>
+        <button id="delete-card-button" class="button2" style="display: none">Delete Card</button>
+    </form>
+
     <form method="post" id="card-form" style="display: none">
         <svg id="close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="120px" height="120px">
             <circle fill="#63514F" cx="15" cy="15" r="10" />
@@ -44,6 +48,9 @@ <h3 id="next-question"> START </h3>
         var questions = '{{ cardList }}'
 
         questions = questions.replaceAll("&#39;","\"")
+        questions = questions.replaceAll("\r","")
+        questions = questions.replaceAll("\n","")
+
         var cardList = Array.from(JSON.parse(questions))
         cardList.push("END OF DECK")
 
@@ -55,12 +62,14 @@ <h3 id="next-question"> START </h3>
                 if (isAuth) {
                     document.querySelector("#add-card-button").style.display="initial"
                     document.querySelector("#edit-card-button").style.display="initial"
+                    document.querySelector("#delete-card-button").style.display="initial"
                 }
             } else {
                 nextQuestion.textContent = "START";
                 if (isAuth) {
                     document.querySelector("#add-card-button").style.display="initial"
                     document.querySelector("#edit-card-button").style.display="none"
+                    document.querySelector("#delete-card-button").style.display="none"
                 }
             }
         }
@@ -72,13 +81,15 @@ <h3 id="next-question"> START </h3>
             if (isAuth && cardIndex == -1) {
                 document.querySelector("#add-card-button").style.display="initial"
                 document.querySelector("#edit-card-button").style.display="initial"
+                document.querySelector("#delete-card-button").style.display="initial"
             }
             if (cardIndex < cardList.length-1) {
                 cardIndex += 1;
                 nextQuestion.textContent = cardList[cardIndex];
                 if (isAuth && cardIndex == cardList.length-1) {
                     document.querySelector("#add-card-button").style.display="none"
                     document.querySelector("#edit-card-button").style.display="none"
+                    document.querySelector("#delete-card-button").style.display="none"
                 }
             }
         }
@@ -88,31 +99,34 @@ <h3 id="next-question"> START </h3>
 
         if (isAuth) {
             const username = "{{ username }}"
-            const deckTitle = "{{ deckTitle }}"
+            let deckTitle = "{{ deckTitle }}"
+            deckTitle = deckTitle.replaceAll("&#39;","'")
 
             const addButton = document.querySelector("#add-card-button")
             if (addButton) {
                 addButton.addEventListener("click", async function() {
-                document.querySelector("#next-question").style.display="none"
-                document.querySelector("#add-card-button").style.display="none"
-                document.querySelector("#edit-card-button").style.display="none"
-                document.querySelector("#card-form").style.display="initial"
+                    document.querySelector("#next-question").style.display="none"
+                    document.querySelector("#add-card-button").style.display="none"
+                    document.querySelector("#edit-card-button").style.display="none"
+                    document.querySelector("#delete-card-button").style.display="none"
+                    document.querySelector("#card-form").style.display="initial"
 
-                document.querySelector("#card-form").action="/" + username + "/" + deckTitle + "/" + cardIndex + "/add"
-            })
+                    document.querySelector("#card-form").action="/" + username + "/" + deckTitle + "/" + cardIndex + "/add"
+                })
             }
 
             const editButton = document.querySelector("#edit-card-button")
             if (editButton){
                 editButton.addEventListener("click", function() {
-                document.querySelector("#next-question").style.display="none"
-                document.querySelector("#add-card-button").style.display="none"
-                document.querySelector("#edit-card-button").style.display="none"
-                document.querySelector("#card-form").style.display="initial"
-                document.querySelector("#card-form textarea").textContent = cardList[cardIndex-1]
-
-                document.querySelector("#card-form").action="/" + username + "/" + deckTitle + "/" + (cardIndex-1) + "/edit"
-            })
+                    document.querySelector("#next-question").style.display="none"
+                    document.querySelector("#add-card-button").style.display="none"
+                    document.querySelector("#edit-card-button").style.display="none"
+                    document.querySelector("#delete-card-button").style.display="none"
+                    document.querySelector("#card-form").style.display="initial"
+                    document.querySelector("#card-form textarea").textContent = cardList[cardIndex-1]
+
+                    document.querySelector("#card-form").action="/" + username + "/" + deckTitle + "/" + (cardIndex-1) + "/edit"
+                })
             }
 
             const closeIcon = document.querySelector("#close-icon")
@@ -121,9 +135,20 @@ <h3 id="next-question"> START </h3>
                     document.querySelector("#next-question").style.display="initial"
                     document.querySelector("#add-card-button").style.display="initial"
                     document.querySelector("#edit-card-button").style.display="initial"
+                    document.querySelector("#delete-card-button").style.display="initial"
                     document.querySelector("#card-form").style.display="none"
                 })
             }
+
+            const deleteButton = document.querySelector("#delete-card-button")
+            if (deleteButton) {
+                deleteButton.addEventListener("click", async function() {
+                    const question= document.querySelector("#next-question").textContent
+                    document.querySelector("#delete-form-question").value = question
+                    console.log(document.querySelector("#delete-form-question").value)
+                    document.querySelector("#delete-form").action="/" + username + "/" + deckTitle + "/" + (cardIndex-1) + "/delete"
+                })
+            }
         }
     </script>
 

diff --git a/templates/decks.html b/templates/decks.html
@@ -15,8 +15,13 @@ <h3>{{ deck.title }}</h3>
     {% endfor %}
 
     {% for deck in personalDecks %}
+        <form action="{{ url_for('deleteDeck', username=username, deckTitle=deck.title) }}" method="post">
+            <input type="hidden" name="username" value="{{ username }}">
+            <input type="hidden" name="deckTitle" value="{{ deck.title }}">
+            <button type="submit" class="delete-deck">Delete Deck</button>
+        </form>
         <a href="{{ url_for('displayDeck', username=username, deckTitle=deck.title) }}" style="text-decoration:none" class="deck-link">>
-            <button class="personal-deck">
+            <button class="personal-deck" >
                 <h3>{{ deck.title }}</h3>
             </button>
         </a>