Edit card template

app.py

@@ -52,7 +52,7 @@ def displayDeck(username, deckTitle):
         cardList = currentDeck['cards']
         # shuffle deck
         random.shuffle(cardList)
-        return render_template('card.html', deckTitle=deckTitle, username=username, cardList=cardList)
+        return render_template('card.html', deckTitle=deckTitle, username=username, cardList=cardList, isAuth=False)
     else:
         # authenticate user
         if (not current_user.is_authenticated or current_user.id != username):
@@ -68,7 +68,7 @@ def displayDeck(username, deckTitle):
         cardList = currentDeck['cards']
         # shuffle deck
         random.shuffle(cardList)
-        return render_template('card.html', deckTitle=deckTitle, username=username, cardList=cardList)
+        return render_template('card.html', deckTitle=deckTitle, username=username, cardList=cardList, isAuth=True)
 
 # TODO: change createDeck to addDeck for naming consistency
 @app.route("/<username>/create", methods=["POST"])
@@ -83,8 +83,9 @@ def createDeck(username):
     # TODO: is there a way to not have to refresh the page and add the new deck 
     return redirect(url_for('allDecks', username=username))
 
-@app.route("/<username>/<deckTitle>/add", methods=["POST"])
-def addCard(username, deckTitle):
+# since shuffled, maybe should be cardQuestion instead of cardIndex?
+@app.route("/<username>/<deckTitle>/<cardIndex>/add", methods=["POST"])
+def addCard(username, deckTitle, cardIndex):
     # authenticate user
     if (not current_user.is_authenticated or current_user.id != username):
         return redirect(url_for('login'))

static/css/style.css

@@ -22,6 +22,17 @@ h3 {
   font-size: 55px;
 }
 
+p {
+  color: #e1948d;
+  text-align: center;
+  font-size: 25px;
+}
+
+p a{
+  color: inherit; /* blue colors for links too */
+  text-decoration: inherit; /* no underline */
+}
+
 .box {
   display: flex;
   justify-content: center;
@@ -254,4 +265,26 @@ h3 {
   justify-content: center;
   align-items: center;
   margin: auto;
+}
+
+#close-icon {
+  position: absolute;
+  top: 35%;
+  left: 13%;
+  transform: translate(-50%, -50%);
+}
+
+#card-form textarea {
+  font-family: sans-serif;
+  color: #e1948d;
+  text-align: center;
+  font-size: 55px;
+  text-transform: uppercase;
+  padding-top: 7rem;
+  padding-bottom: 7rem;
+  width: 40rem;
+  position: absolute;
+  top: 47%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }

templates/base.html

@@ -24,5 +24,10 @@ <h1>DIVE DEEPER</h1>
       </a>
     </div>
 
+    <p>Made by GAS2.</p>
+    <p>
+      <a target="_blank" href="https://icons8.com/icon/7703/cancel">Close</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a>
+    </p>
+
   </body>
 </html>

templates/card.html

@@ -16,18 +16,29 @@ <h3 id="next-question"> START </h3>
         <button id="nextButton" class="card-button">&#8250;</button>
     </div>
 
-    <a href="{{ url_for('addCard', username=username, deckTitle=deckTitle) }}" style="text-decoration:none">
-        <button class="button2" >Add Card</button>
-    </a>
-    <a href="{{ url_for('editCard', username=username, deckTitle=deckTitle, cardIndex=cardIndex ) }}" style="text-decoration:none">
-        <button class="button2">Edit</button>
-    </a>
+
+    {% 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="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" />
+            <path fill="#D9D9D9" d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16.414,15 c0,0,3.139,3.139,3.293,3.293c0.391,0.391,0.391,1.024,0,1.414c-0.391,0.391-1.024,0.391-1.414,0C18.139,19.554,15,16.414,15,16.414 s-3.139,3.139-3.293,3.293c-0.391,0.391-1.024,0.391-1.414,0c-0.391-0.391-0.391-1.024,0-1.414C10.446,18.139,13.586,15,13.586,15 s-3.139-3.139-3.293-3.293c-0.391-0.391-0.391-1.024,0-1.414c0.391-0.391,1.024-0.391,1.414,0C11.861,10.446,15,13.586,15,13.586 s3.139-3.139,3.293-3.293c0.391-0.391,1.024-0.391,1.414,0c0.391,0.391,0.391,1.024,0,1.414C19.554,11.861,16.414,15,16.414,15z"/>
+        </svg>
+        <textarea name="question" required></textarea>
+        <button class="button2">Done</button>
+    </form>
+
+    {% endif %}
 
     <script>
         const nextQuestion = document.querySelector("#next-question");
         const card = document.querySelector("#card");
         const prev = document.querySelector("#prevButton");
         const next = document.querySelector("#nextButton");
+        const isAuth = ("{{ isAuth }}" == "True")
 
         var cardIndex = -1;
         var questions = '{{ cardList }}'
@@ -41,24 +52,79 @@ <h3 id="next-question"> START </h3>
             if (cardIndex > 0) {
                 cardIndex -= 1;
                 nextQuestion.textContent = cardList[cardIndex];
+                if (isAuth) {
+                    document.querySelector("#add-card-button").style.display="initial"
+                    document.querySelector("#edit-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"
+                }
             }
         }
 
         prev.addEventListener("click", prevCard);
 
         // event listener for both card click and next button click
         function nextCard() {
+            if (isAuth && cardIndex == -1) {
+                document.querySelector("#add-card-button").style.display="initial"
+                document.querySelector("#edit-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"
+                }
             }
         }
 
         card.addEventListener("click", nextCard);
         next.addEventListener("click", nextCard);
+
+        if (isAuth) {
+            const username = "{{ username }}"
+            const deckTitle = "{{ deckTitle }}"
+
+            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("#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"
+            })
+            }
+
+            const closeIcon = document.querySelector("#close-icon")
+            if (closeIcon) {
+                closeIcon.addEventListener("click", function() {
+                    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("#card-form").style.display="none"
+                })
+            }
+        }
     </script>
 
 {% endblock %}