Delete button as AJAX JSON request

Author: Corentin

app/imgannot/routes.py

@@ -81,18 +81,27 @@ def upload_file():
 
 
 # To change to form insead of simple get
-@bp.route("/delete_image", methods=["GET", "POST"])
+@bp.route("/delete_image", methods=["POST"])
 @login_required
 def delete_image():
-    """Page to delete an image record from database"""
+    """Page to delete an image record from database from AJAX request"""
+    # Get AJAX JSON data and parse it
+    raw_data = request.get_data()
+    parsed = json.loads(raw_data)
     image_requested = Image.query.filter_by(
-        image_name=request.args.get("filename"),
-        patient_id=request.args.get("patient_ID")).first()
-    # Check if image to delete have been created by current user
+        image_name=parsed["image_name"],
+        patient_id=parsed["patient_id"]).first()
+    # If current user is the creator of image: delete from DB
     if image_requested != None and image_requested.expert_id == current_user.id:
         db.session.delete(image_requested)
         db.session.commit()
-    return redirect(url_for('imgannot.upload_file'))
+        return json.dumps({"success": True}), 200, {
+            "ContentType": "application/json"
+        }
+    # Error message if not the right user for given image
+    else:
+        flash('Unautorized database manipulation (delete_image)', "error")
+        return redirect(url_for('imgannot.upload_file'))
 
 
 @bp.route("/annot", methods=["GET", "POST"])

app/ocr/routes.py

@@ -1,4 +1,5 @@
 import os
+import json
 
 from app import db
 from app.ocr import bp
@@ -149,14 +150,23 @@ def write_ocr_report():
     return render_template("ocr/ocr_sucess.html")
 
 
-@bp.route("/delete_pdf", methods=["GET", "POST"])
+@bp.route("/delete_pdf", methods=["POST"])
 @login_required
 def delete_pdf():
-    """Page to delete a PDF record from database"""
+    """Page to delete an PDF record from database from AJAX request"""
+    # Get AJAX JSON data and parse it
+    raw_data = request.get_data()
+    parsed = json.loads(raw_data)
     pdf_requested = Pdf.query.filter_by(
-        pdf_name=request.args.get("filename"),
-        patient_id=request.args.get("patient_ID")).first()
+        pdf_name=parsed["pdf_name"], patient_id=parsed["patient_id"]).first()
+    # If current user is the creator of PDF: delete from DB
     if pdf_requested != None and pdf_requested.expert_id == current_user.id:
         db.session.delete(pdf_requested)
         db.session.commit()
-    return redirect(url_for('ocr.upload_pdf'))
+        return json.dumps({"success": True}), 200, {
+            "ContentType": "application/json"
+        }
+    # Error message if not the right user for given PDF
+    else:
+        flash('Unautorized database manipulation (delete_pdf)', "error")
+        return redirect(url_for('ocr.upload_file'))

app/templates/imgannot/upload_img.html

@@ -48,11 +48,35 @@ <h1>Image History</h1>
       <td>{{ image.patient_id }}</td>
       <td>{{ image.diagnostic }}</td>
       <td><a class="btn btn-success" role="button"
-          href="annot?filename={{image.image_name}}&patient_ID={{image.patient_id}}">Resume</a> <a
-          class="btn btn-danger" role="button"
-          href="delete_image?filename={{image.image_name}}&patient_ID={{image.patient_id}}">Delete</a></td>
+          href="annot?filename={{image.image_name}}&patient_ID={{image.patient_id}}">Resume</a>
+        <button type="button" class="btn btn-danger"
+          onclick="delete_image('{{image.image_name}}', '{{image.patient_id}}')">Delete</button>
+      </td>
     </tr>
     {% endfor %}
   </table>
 </div>
+
+<script>
+  function delete_image(image_name, patient_id) {
+    var dict = {
+      "image_name": image_name,
+      "patient_id": patient_id,
+    };
+
+    var myJSON = JSON.stringify(dict);
+    console.log(myJSON)
+    $.ajax({
+      type: "POST",
+      url: "{{url_for('imgannot.delete_image')}}",
+      data: myJSON,
+      success: function () {
+        console.log("Image deleted in Database Successfully");
+        location.reload();
+      },
+      dataType: "text"
+    });
+  }
+</script>
+
 {% endblock %}

app/templates/ocr/ocr_upload.html

@@ -49,11 +49,36 @@ <h1>PDF History</h1>
             <td>{{ pdf.patient_id }}</td>
             <td>{{ pdf.lang }}</td>
             <td><a class="btn btn-success" role="button"
-                    href="ocr_results?filename={{pdf.pdf_name}}&patient_ID={{pdf.patient_id}}">Resume</a> <a
-                    class="btn btn-danger" role="button"
-                    href="delete_pdf?filename={{pdf.pdf_name}}&patient_ID={{pdf.patient_id}}">Delete</a></td>
+                    href="ocr_results?filename={{pdf.pdf_name}}&patient_ID={{pdf.patient_id}}">Resume</a>
+                <button type="button" class="btn btn-danger"
+                    onclick="delete_pdf('{{pdf.pdf_name}}', '{{pdf.patient_id}}')">Delete</button>
+            </td>
         </tr>
         {% endfor %}
     </table>
 </div>
+
+<script>
+    function delete_pdf(pdf_name, patient_id) {
+        var dict = {
+            "pdf_name": pdf_name,
+            "patient_id": patient_id,
+        };
+
+        var myJSON = JSON.stringify(dict);
+        console.log(myJSON)
+        $.ajax({
+            type: "POST",
+            url: "{{url_for('ocr.delete_pdf')}}",
+            data: myJSON,
+            success: function () {
+                console.log("PDF deleted in Database Successfully");
+                location.reload();
+            },
+            dataType: "text"
+        });
+    }
+</script>
+
+
 {% endblock %}

logs/.gitignore

@@ -0,0 +1,4 @@
+# Ignore everything in this directory
+*
+# Except this file
+!.gitignore