init vendors js file

add function to delete buttons
add connection to add vendor api

app/static/vendors.js

@@ -0,0 +1,14 @@
+const delButtons = document.getElementsByClassName('del-button');
+
+async function deleteVendor(id){
+    var result = await fetch(`/delete_vendor/${id}`, {method:'POST'});
+    var data = await result.json();
+    document.getElementById(`${id}-row`).remove();
+}
+document.addEventListener("DOMContentLoaded", (event) => {
+    for(let i = 0; i < delButtons.length; i++){
+        delButtons[i].addEventListener('click', e => {
+            deleteVendor(parseInt(e.target.id));
+        })
+    }
+  });

app/templates/vendors.html

@@ -10,19 +10,28 @@
                     Vendors
                 </div>
                 <div class="card-body">
+                    <form action="{{ url_for('add_vendor') }}" method="POST">
+                        <div class="mb-3">
+                            <label for="vendorName" class="form-label">Add Vendor</label>
+                            <input type="text" class="form-control" id="vendorName" name="vendor_name" placeholder="Enter vendor name" required>
+                        </div>
+                        <button type="submit" class="btn btn-primary">Submit</button>
+                    </form>
                     <div class="table-responsive">
                         <table class="table table-bordered">
                             <thead>
                                 <tr>
                                     <th scope="col">ID</th>
                                     <th scope="col">Name</th>
+                                    <th scope="col">Delete</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 {% for vendor in vendors %}
-                                <tr>
+                                    <tr id="{{vendor[0].id}}-row">
                                         <th scope="row">{{vendor[0].id}}</th>
                                         <th scope="row">{{vendor[0].name}}</th>
+                                        <th scope="row"><button class="btn btn-danger del-button" id="{{vendor[0].id}}">Delete</button></th>
                                     </tr>
                                 {% endfor %}
                             </tbody>
@@ -33,4 +42,5 @@
         </div>
     </div>
 </main>
+<script src="{{url_for('.static', filename='vendors.js')}}"></script>
 {% endblock content %}