#9 Delete Product box now available

controllers/database/product.py

@@ -95,5 +95,13 @@ class ProductController(DatabaseController):
 
         self.do(query, params)
 
-    def delete(self):
+    def delete(self, id: int):
-        print("Doing work")
+        params = [
+            id
+        ]
+        query = """
+            DELETE FROM Products
+            WHERE id = ?
+        """
+
+        self.do(query, params)

controllers/web/product.py

@@ -146,7 +146,7 @@ def update_product(id: int):
 
     if product.sellerID != user_id:
         flash("This product does not belong to you!", "error")
-        return redirect("/ownproducts")
+        return redirect("/products/ownproducts")
 
     # Save new image file
     file = request.files.get('image')
@@ -168,6 +168,29 @@ def update_product(id: int):
     return redirect(f"/products/{product.id}")
 
 
+@blueprint.post('/delete/<int:id>')
+def delete_product(id: int):
+    """ Processes a request to delete a product in place on the site """
+    # Ensure that the product belongs to the current user
+    user_id = session.get('user_id')
+
+    # User needs to be logged in as a seller to view this page
+    if not is_role("Seller"):
+        flash("You must be logged in as a seller to view this page!", "error")
+        return redirect("/")
+
+    db = ProductController()
+    product = db.read_id(id)
+
+    if product.sellerID != user_id:
+        flash("This product does not belong to you!", "error")
+        return redirect("/products/ownproducts")
+
+    db.delete(id)
+    flash("Product Removed!", "success")
+    return redirect("/products/ownproducts")
+
+
 @blueprint.route('/ownproducts')
 def display_own_products():
     """ Display products owned by the currently logged in seller """

static/css/alerts.css

@@ -15,15 +15,15 @@
     font-family: sans-serif;
     font-weight: 400;
 }
-  
+
 .alertCheckbox {
     display: none;
 }
-  
+
 :checked + .alert {
     display: none;
 }
-  
+
 .alertText {
     display: table;
     margin: 0 auto;
@@ -31,43 +31,152 @@
     text-align: center;
     font-size: 20px;
 }
-  
+
 .alertClose {
     float: right;
     padding-top: 5px;
     font-size: 15px;
 }
-  
+
 .clear {
     clear: both;
 }
-  
+
 .info {
     background-color: #EEE;
     border: 1px solid #DDD;
     color: #999;
 }
-  
+
 .success {
     background-color: #EFE;
     border: 1px solid #DED;
     color: #9A9;
 }
-  
+
 .notice {
     background-color: #EFF;
     border: 1px solid #DEE;
     color: #9AA;
 }
-  
+
 .warning {
     background-color: #FDF7DF;
     border: 1px solid #FEEC6F;
     color: #C9971C;
 }
-  
+
 .error {
     background-color: #FEE;
     border: 1px solid #EDD;
     color: #A66;
+}
+
+.modal {
+    opacity: 0;
+    visibility: hidden;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    text-align: left;
+    background: rgba(0,0,0, .9);
+    transition: opacity .25s ease;
+}
+
+.modal__bg {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    cursor: pointer;
+}
+
+.modal-state {
+    display: none;
+}
+
+.modal-state:checked + .modal {
+    opacity: 1;
+    visibility: visible;
+}
+
+.modal-state:checked + .modal .modal__inner {
+    top: 0;
+}
+
+.modal__inner {
+    transition: top .25s ease;
+    position: absolute;
+    top: -20%;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 25rem;
+    height: 10rem;
+    margin: auto;
+    overflow: auto;
+    background: var(--bg);
+    color: var(--fg);
+    border-radius: 5px;
+    padding: 1em 2em;
+}
+
+.modal__close {
+    position: absolute;
+    right: 1em;
+    top: 1em;
+    width: 1.1em;
+    height: 1.1em;
+    cursor: pointer;
+}
+
+.modal__close:after,
+.modal__close:before {
+    content: '';
+    position: absolute;
+    width: 2px;
+    height: 1.5em;
+    background: #ccc;
+    display: block;
+    transform: rotate(45deg);
+    left: 50%;
+    margin: -3px 0 0 -1px;
+    top: 0;
+}
+
+.modal__close:hover:after,
+.modal__close:hover:before {
+    background: #aaa;
+}
+
+.modal__close:before {
+    transform: rotate(-45deg);
+}
+
+@media screen and (max-width: 768px) {
+    .modal__inner {
+        width: 90%;
+        height: 90%;
+        box-sizing: border-box;
+    }
+}
+
+.modal-btn {
+    cursor: pointer;
+    background: var(--red);
+    display: flex;
+    justify-content: center;
+    padding: .5em 1em;
+    color: var(--bg);
+    font-size: 70%;
+    border-radius: 3px;
+}
+
+.modal-btn:hover,
+.modal-btn:focus {
+    background: var(--red);
+    color: var(--bg);
 }

templates/index.html

@@ -14,7 +14,6 @@
 </head>
 <body>
     {% include 'header.html' %}
-
     
     <div class="container">
         {% if category is defined %}

templates/product.html

@@ -3,7 +3,8 @@
 
 {% if product != None %}
     {% if user.id == product.sellerID %}
-        <form class="product-fs" method="POST" action="/products/update/{{product.id}}" enctype="multipart/form-data">
+        <!-- Form -->
+        <form class="product-fs" method="POST" action="{{url_for('main.products.update_product', id=product.id)}}" enctype="multipart/form-data">
             <img class="product-image" src="{{url_for('static', filename='assets/img/products/' + product.image)}}" alt="Brake Disks"/>
             <div class="product-details">
                 <div class="input-form-row">
@@ -32,6 +33,7 @@
                 <div class="input-form-row">
                     <input type="submit" id="Create Product" value="Update Product">
                 </div>
+                <label class="modal-btn" for="deleteModal">Delete Product</label>
             </div>
             <div class="product-acquisition-pane">
                 <div class="input-form-row">
@@ -46,13 +48,31 @@
                     {% if product.quantityAvailable > 0 %}
                         <div class="product-instock">In Stock</div>
                         <div class="product-quantity">{{product.quantityAvailable}} Available</div>
-                        <a href="{{url_for('main.stats.view_product_stats', id=product.id)}}"><input type="button" class="product-add-to-cart" value="View Product Stats"/></a>
+                            <a href="{{url_for('main.stats.view_product_stats', id=product.id)}}">
+                                <input type="button" class="product-add-to-cart" value="View Product Stats"/>
+                            </a>
                     {% else %}
                         <div class="product-nostock">Out of Stock</div>
                     {% endif %}
                 </div>
             </div>
         </form>
+        
+        <!-- Modal -->
+        <input class="modal-state" id="deleteModal" type="checkbox" />
+        <div class="modal">
+            <label class="modal__bg" for="deleteModal"></label>
+            <div class="modal__inner">
+                <label class="modal__close" for="deleteModal"></label>
+                <h2>Confirm Delete</h2>
+                <p>Are you sure you want to <b>delete {{product.name}}</b> from your products</p>
+                <form method="POST" action="{{url_for('main.products.delete_product', id=product.id)}}">
+                    <div class="input-form-row">
+                        <input type="submit" class="modal-btn error" for="deleteModal" value="Delete" />
+                    </div>
+                </form>
+            </div>
+        </div>
     {% else %}
         <div class="product-fs">
             <img class="product-image" src="{{url_for('static', filename='assets/img/products/' + product.image)}}" alt="Brake Disks"/>