Animate insert, delete

K-Bishall · Jul 11, 2019 · 880c829 · 880c829
1 parent dae4d43
commit 880c829
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 16 deletions.
diff --git a/js/new-note.js b/js/new-note.js
@@ -106,7 +106,7 @@ $("#new_note").on('submit','#new_note_expanded',function(event){
 
     // bind form contents to hidden elements
     $("input[name='title']",this).val($("#note_title_input").text());
-    $("input[name='content']",this).val($("#note_content_input").text());
+    $("input[name='content']",this).val($("#note_content_input").html());
     $("input[name='color']",this).val($(".selected_dot",this).attr("value"));
     $("input[name='pinned']",this).val("false");
 
@@ -139,10 +139,12 @@ $("#new_note").on('submit','#new_note_expanded',function(event){
 
     // callback handler on success
     request.done(function(response, textStatus, jqXHR) {
-        console.log(response);
-
         // show small bar again
         new_note_small();
+
+        // add new note to the DOM
+        $(response).hide().prependTo("#existing_notes").fadeIn();
+        // $("#existing_notes").prepend(response).hide().fadeIn();
     });
 
     // handle failure

diff --git a/js/notes.js b/js/notes.js
@@ -1,6 +1,6 @@
 // delete note when user clicks on delete button
 
-$(".saved_note").on('click', '.delete', function(event) {
+$("#existing_notes").on('click', '.delete', function(event) {
     // get id of the note
     $id = $(this).parents(".saved_note").attr("id");
 
@@ -16,7 +16,9 @@ $(".saved_note").on('click', '.delete', function(event) {
     $request.done(function(response, textStatus, jqXHR) {
         if(response == 1) {
             // remove note element from DOM
-            $("#"+$id).remove();
+            $("#"+$id).fadeOut(300, function() {
+                $(this).remove();
+            });
         }
     });
 

diff --git a/js/update-note.js b/js/update-note.js
@@ -73,4 +73,13 @@ function update_box() {
         }
     });
 }
-update_box();
+update_box();
+
+// show update box modal on click of note
+$("#existing_notes").on('click','.note_title, .note_content', function() {
+    $("#update_modal").modal("show");
+
+    // select the note
+    $note = $(this).parent();
+
+});
diff --git a/php/create.php b/php/create.php
@@ -18,6 +18,11 @@
         $input_content = trim(isset($_POST['content']) ? $_POST['content'] : '');
         $input_color = trim(isset($_POST['color']) ? $_POST['color'] : $color);
 
+        // stop XSS
+        $input_title = htmlspecialchars($input_title, ENT_QUOTES, 'UTF-8', false);
+        $input_content = htmlspecialchars($input_content, ENT_QUOTES, 'UTF-8', false);
+        $input_color = htmlspecialchars($input_color, ENT_QUOTES, 'UTF-8', false);
+
         // discard if both empty
         if(!empty($input_title) || !empty($input_content)) {
             $title = $input_title;
@@ -26,7 +31,6 @@
         }
         else {
             $error = "Empty Note ! Discarded !!";
-            echo $error;
         }
 
         // check input errors before inserting into database
@@ -46,11 +50,20 @@
 
                 // attempt to execute prepared statement
                 if($stmt -> execute()) {
-                    echo "Success";
-                }
-                else {
-                    $error = "Something went wrong. Note cannot be saved.";
-                    echo $error;
+                    // return newly created object
+                    $id = $stmt -> insert_id;
+                    $sql = "SELECT * FROM notes WHERE id=".$id;
+                    $result = $conn -> query($sql);
+                    $result = $result -> fetch_assoc();
+
+                    echo '<div class="saved_note card" id ="'.$id.'" style="background-color:'.$result['color'].';"
+                    data-lastModified="'.$result['last_modified'].'" data-pinned="'.$result['pinned'].'">
+                        <div class="note_title card-header py-1">'.$result['title'].'</div>
+                        <div class="note_content card-body py-1">'.$result['content'].'</div>
+                        <div class="card-footer py-0">
+                            <i class="material-icons-outlined delete">delete</i>
+                        </div>
+                    </div>';
                 }
 
                 // close statement

diff --git a/php/read.php b/php/read.php
@@ -4,7 +4,7 @@
 
     if($_SERVER['REQUEST_METHOD'] == "GET") {
         $sql = "SELECT * FROM notes
-                ORDER BY last_modified ASC
+                ORDER BY last_modified DESC
                 LIMIT 10
                 ";
 
@@ -25,9 +25,7 @@
 
                 echo '<div class="saved_note card" id ="'.$id.'" style="background-color:'.$color.';"
                     data-lastModified="'.$lastModified.'" data-pinned="'.$pinned.'">
-                        <div class="card-header py-1">
-                            <div class="note_title">'.$title.'</div>
-                        </div>
+                        <div class="note_title card-header py-1">'.$title.'</div>
                         <div class="note_content card-body py-1">'.$content.'</div>
                         <div class="card-footer py-0">
                             <i class="material-icons-outlined delete">delete</i>