Add item to shopcart UI

CSCI-GA-2820-SP24-003 · May 1, 2024 · 5cd468e · 5cd468e
1 parent 43b8642
commit 5cd468e
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 22 deletions.
diff --git a/features/shopcart.feature b/features/shopcart.feature
@@ -104,3 +104,12 @@ Scenario: Search for a Shopcart by Name
     And I should not see "cc" in the results
     And I should not see "dd" in the results
 
+Scenario: Add an Item to a Shopcart
+    When I visit the "Home Page"
+    And I set the "Name" to "bb"
+    And I press the "Search" button
+    Then I should see the message "Success"
+    And I should see "bb" in the results
+    When I set the "Item" to "item1"
+    And I press the "Add" button
+    Then I should see the message "Success"
diff --git a/service/static/index.html b/service/static/index.html
@@ -76,27 +76,6 @@ <h3>Create, Retrieve, Update and Delete a Shopcart:</h3>
           </select>
         </div>
       </div> 
-
-      <!-- <div class="form-group"> 
-        <label class="control-label col-sm-2" for="item_name">Items:</label> 
-        <div class="col-sm-10"> 
-          <div style="max-height: 200px; overflow-y: scroll; width: 50%; border: 1px solid #ccc; padding: 5px;"> 
-            <ul style="list-style-type: none; padding: 0; margin: 0;"> <li>
-              <input type="text" class="form-control" id="item_name_1" placeholder="Enter names for Items"></li> 
-              <li><input type="text" class="form-control" id="item_name_2" placeholder="Enter names for Items"></li> 
-              <li><input type="text" class="form-control" id="item_name_3" placeholder="Enter names for Items"></li> 
-              <li><input type="text" class="form-control" id="item_name_4" placeholder="Enter names for Items"></li> 
-              <li><input type="text" class="form-control" id="item_name_5" placeholder="Enter names for Items"></li> 
-              <li><input type="text" class="form-control" id="item_name_6" placeholder="Enter names for Items"></li> 
-              <li><input type="text" class="form-control" id="item_name_7" placeholder="Enter names for Items"></li> 
-              <li><input type="text" class="form-control" id="item_name_8" placeholder="Enter names for Items"></li> 
-              <li><input type="text" class="form-control" id="item_name_9" placeholder="Enter names for Items"></li> 
-              <li><input type="text" class="form-control" id="item_name_10" placeholder="Enter names for Items"></li> 
-            </ul> 
-          </div> 
-        </div> 
-      </div> -->
-
 
       <!-- SUBMIT BUTTONS -->
       <div class="form-group">
@@ -107,6 +86,19 @@ <h3>Create, Retrieve, Update and Delete a Shopcart:</h3>
           <button type="submit" class="btn btn-warning" id="update-btn">Update</button>
         </div>
       </div>
+
+      <div class="form-horizontal">
+        <div class="form-group">
+          <label class="control-label col-sm-2" for="shopcart_item">Add item:</label>
+          <div class="col-sm-6">
+            <input type="text" class="form-control" id="shopcart_item" placeholder="Enter Item Name">
+          </div>
+          <div class="col-sm-4">
+            <button type="submit" class="btn btn-primary" id="add-btn">Add</button>
+          </div>
+        </div>
+      </div> <!-- form horizontal -->
+
     </div> <!-- form horizontal -->
   </div> <!-- end well -->
 </div> <!-- end Form -->

diff --git a/service/static/js/rest_api.js b/service/static/js/rest_api.js
@@ -22,6 +22,7 @@ $(function () {
         $("#shopcart_name").val("");
         $("#shopcart_total_price").val("");
         $("#shopcart_status").val("");
+        $("#shopcart_item").val("");
     }
 
     // Updates the flash message area
@@ -177,6 +178,43 @@ $(function () {
         clear_form_data()
     });
 
+    // ****************************************
+    // Add item to Shopcart
+    // ****************************************
+
+    $("#add-btn").click(function () {
+
+        let shopcart_id = $("#shopcart_id").val();
+        let name = $("#shopcart_item").val();
+
+        let data = {
+            "shop_cart_id": shopcart_id,
+            "name": name,
+            "product_id": 1, // Temporary Product ID
+            "quantity": 1,
+            "price": 10 // Standard price for now
+        };
+
+        $("#flash_message").empty();
+
+        let ajax = $.ajax({
+            type: "POST",
+            url: `${SHOPCART_SERVICE_BASE_URL}/${shopcart_id}/items`,
+            contentType: "application/json",
+            data: JSON.stringify(data),
+        });
+
+
+        ajax.done(function(res){
+            clear_form_data()
+            flash_message("Success")
+        });
+
+        ajax.fail(function(res){
+            flash_message(res.responseJSON.message)
+        });
+    });
+
     // ****************************************
     // Search for a Shopcart
     // ****************************************
@@ -211,7 +249,8 @@ $(function () {
                 .append($("<th>", { class: "col-md-2", text: "User ID" }))
                 .append($("<th>", { class: "col-md-2", text: "Name" }))
                 .append($("<th>", { class: "col-md-2", text: "Total Price" }))
-                .append($("<th>", { class: "col-md-2", text: "Status" }));
+                .append($("<th>", { class: "col-md-2", text: "Status" }))
+                .append($("<th>", { class: "col-md-2", text: "# Items" }));
 
             const tbody = $("<tbody>").appendTo(table);
             let firstOrder = null;
@@ -223,6 +262,7 @@ $(function () {
                 $("<td>").text(order.name).appendTo(row);
                 $("<td>").text(order.total_price).appendTo(row);
                 $("<td>").text(order.status).appendTo(row);
+                $("<td>").text(order.items.length).appendTo(row);
 
                 if (i === 0) firstOrder = order;
             });