Listing and editing cards.

README.md

@@ -34,7 +34,7 @@ To Do:
 - [ ] Card Area
     - [x] List cards
     - [x] Add cards
-    - [ ] Edit card
+    - [x] Edit card
     - [ ] Delete card
 - Card Memorization
     - [ ] Card type toggle

flash_cards.py

@@ -65,7 +65,7 @@ def cards():
     if not session.get('logged_in'):
         return redirect(url_for('login'))
     db = get_db()
-    cur = db.execute('SELECT type, front, back, known FROM cards ORDER BY id DESC')
+    cur = db.execute('SELECT id, type, front, back, known FROM cards ORDER BY id DESC')
     cards = cur.fetchall()
     return render_template('cards.html', cards=cards)
 
@@ -85,6 +85,35 @@ def add_card():
     return redirect(url_for('cards'))
 
 
+@app.route('/edit/<card_id>')
+def edit(card_id):
+    if not session.get('logged_in'):
+        return redirect(url_for('login'))
+    db = get_db()
+    cur = db.execute('SELECT * FROM cards WHERE id = ?', [card_id])
+    card = cur.fetchone()
+    return render_template('edit.html', card=card)
+
+
+@app.route('/edit_card', methods=['POST'])
+def edit_card():
+    if not session.get('logged_in'):
+        return redirect(url_for('login'))
+    selected = request.form.getlist('known')
+    known = bool(selected)
+    db = get_db()
+    db.execute('UPDATE cards set type = ?, front = ?, back = ?, known = ? where id = ?',
+               [request.form['type'],
+                request.form['front'],
+                request.form['back'],
+                known,
+                request.form['card_id']
+                ])
+    db.commit()
+    flash('Card successfully edited.')
+    return redirect(url_for('cards'))
+
+
 @app.route('/general')
 def general():
     if not session.get('logged_in'):

static/style.css

@@ -2,3 +2,7 @@
     background-color: #62b06b;
     color: #ffffff;
 }
+
+textarea {
+    font-family: monospace;
+}

templates/cards.html

@@ -3,7 +3,7 @@
 
     <div class="well">
         <h2>Add a Card</h2>
-        <form action="{{ url_for('add_card') }}" method=post class=add-card>
+        <form action="{{ url_for('add_card') }}" method=post>
             <div class="form-group">
                 <label for="general" class="toggleButton btn btn-default btn-lg">General &nbsp;
                     <input type="radio" name="type" value="1" id="general"/>
@@ -36,7 +36,10 @@
 
     {% for card in cards %}
         <div>
-            <h3>{{ card.front }}</h3>
+            <h3>
+                <a href="{{ url_for('edit', card_id=card.id) }}" class="btn btn-xs btn-primary"><i class="fa fa-pencil" aria-hidden="true"></i></a>
+                {{ card.front }}
+            </h3>
             {% if card.type == 1 %}
                 {{ card.back|replace("\n", "<br />") }}
             {% else %}

templates/edit.html

@@ -0,0 +1,40 @@
+{% extends "layout.html" %}
+{% block body %}
+    <div class="well">
+        <h2>Edit Card #{{ card.id }}</h2>
+        <form action="{{ url_for('edit_card') }}" method=post>
+            <div class="form-group">
+                <label for="general" class="btn btn-default btn-lg">General &nbsp;
+                    <input type="radio" name="type" value="1"
+                           id="general" {{ "checked" if (card.type == 1) else "" }} />
+                </label>
+                <label for="code" class="btn btn-default btn-lg">Code &nbsp;
+                    <input type="radio" name="type" value="2" id="code" {{ "checked" if (card.type == 2) else "" }} />
+                </label>
+            </div>
+            <div class="form-group">
+                <label for="front">Front of Card</label>
+                <input type="text" name="front" class="form-control" value="{{ card.front|e }}">
+            </div>
+            <div class="form-group">
+                <label for="back">Back of Card</label>
+                <textarea name="back"
+                          class="form-control"
+                          id="back"
+                          placeholder="back of card"
+                          rows="12">{{ card.back|e }}</textarea>
+            </div>
+            <div class="checkbox">
+                <label>
+                    <input type="checkbox" name="known"
+                       value="1" {{ "checked" if (card.known == 1) else "" }} /> Known
+                </label>
+            </div>
+            <hr />
+            <div class="form-group">
+                <input type="hidden" name="card_id" value="{{ card.id|e }}" />
+                <button type="submit" class="saveButton btn btn-lg btn-primary">Save</button>
+            </div>
+        </form>
+    </div>
+{% endblock %}

templates/layout.html

@@ -6,6 +6,7 @@
     <link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}" />
     <!-- I know this doesn't belong in head, but I have script in a template that needs to have jQuery -->
     <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
+    <script src="https://use.fontawesome.com/8cea844162.js"></script>
 </head>
 <body>
     <div class="container">