From 5dc2bdfac2d66a29893c0b15d2dec1e97a1beca9 Mon Sep 17 00:00:00 2001
From: ParrotFriend <zarcojonnebert@gmail.com>
Date: Tue, 5 Aug 2025 17:50:34 +0800
Subject: [PATCH] Add files via upload

---
 README.md                  |  40 +++---
 grocerylist.db             | Bin 16384 -> 16384 bytes
 myflask.py                 | 247 +++++++++++++++++--------------------
 request.py                 |  32 ++---
 templates/grocerylist.html | 189 +++++++++++++++++++---------
 templates/login.html       |  48 +++----
 6 files changed, 308 insertions(+), 248 deletions(-)

diff --git a/README.md b/README.md
index 1ae903f..f44c8c2 100644
--- a/README.md
+++ b/README.md
@@ -1,20 +1,20 @@
-# GROCERY LIST - PYTHON FLASK PROJECT
-
-A simple python CRUD application that allows you to add grocery items to a list. This application uses Flask and SQLite3. 
-<p align="center">
-        <img src="https://user-images.githubusercontent.com/38568888/193169088-dfd81f7a-e284-4499-9066-bd9ab164cab3.png" 
-                align="center"
-                alt="Picture" 
-                width="100%" 
-                style="display: block; margin: 0 auto; border: 1px solid black" />
-</p>
-
-## Live Demo: 
-https://grocery-list-python-app.herokuapp.com/ 
-
-## Installation:
-  `pip -r requirements.txt`
-
-
-
-
+# GROCERY LIST - PYTHON FLASK PROJECT
+
+A simple python CRUD application that allows you to add grocery items to a list. This application uses Flask and SQLite3. 
+<p align="center">
+        <img src="https://user-images.githubusercontent.com/38568888/193169088-dfd81f7a-e284-4499-9066-bd9ab164cab3.png" 
+                align="center"
+                alt="Picture" 
+                width="100%" 
+                style="display: block; margin: 0 auto; border: 1px solid black" />
+</p>
+
+## Live Demo: 
+https://grocery-list-python-app.herokuapp.com/ 
+
+## Installation:
+  `pip -r requirements.txt`
+
+
+
+
diff --git a/grocerylist.db b/grocerylist.db
index dac4d9a5a79923f2dd0fa1d03f2867448a6f091b..85478b811af51a4af4c22a87ca0ccb27a7c45f2a 100644
GIT binary patch
delta 198
zcmZo@U~Fh$oFL7pF;T{uRf9pVtb1e10)8QO{{0O6-}&G1Kjgp3f1dvY|NhO20xS6i
z*x8vGM9UL15?R@p83ePkHlLSQ6fk1vWn`9TbPw`(b`A1$4Ho9*w`JhwS7+jX3)Fp#
ze?9*!{%-yp{#yPpesz9Vej$D-plKiYT!e*L8ARn7LFOgrC+Fv;=H%ybhzJ4&6~Tgu
ndHD)?i3*t|`OFLq3>>2BjOF}7Kv{9HtcR<Qk3ZAoF#A;igxoTo

delta 100
zcmZo@U~Fh$oFL68G*QNxRfs_^+-qaX0)9SL{__m{-}&G1Kjgp3e}1!|!e0K(=j9az
zv{-o=ndKSXgZ!OcgFIb>xp)~E7&!UEnE2lU6&~YX&p(U5n?HxYmOpH>qJRzm<S_eH
E0Ge7HH~;_u

diff --git a/myflask.py b/myflask.py
index a7b9174..853d083 100644
--- a/myflask.py
+++ b/myflask.py
@@ -1,133 +1,114 @@
-#!/usr/bin/python3
-
-from flask import Flask, jsonify
-from flask import session
-from flask import render_template
-from flask import redirect
-from flask import url_for
-from flask import request
-import sqlite3
-
-# module (__name__) as argument
-app = Flask(__name__)
-app.secret_key ="jfioefefjioawfnieofa"
-
-# establishes connection to sqlite database
-conn = sqlite3.connect('grocerylist.db', check_same_thread=False)
-print('Database connected')
-
-#creates table to hold users
-conn.execute('''CREATE TABLE IF NOT EXISTS USER
- (ID INTEGER PRIMARY KEY  AUTOINCREMENT,
- USERNAME        TEXT    NOT NULL
- );''')
-
-# creates table to hold grocery items
-conn.execute('''CREATE TABLE IF NOT EXISTS GROCERIES
- (ID INTEGER  PRIMARY KEY  AUTOINCREMENT,
- USERNAME       TEXT    NOT NULL,
- ITEM           TEXT    NOT NULL,
- QUANTITY      INTEGER  NOT NULL
- );''')
-
-#--------- INDEX PAGE ---------------------
-@app.route("/home", methods=["GET", "POST"])
-def index():
-    username = session['username']
-    
-    if "username" in session:
-        #---- GET ALL ITEMS --------
-        if request.method == "GET":
-            cur = conn.cursor()
-            
-            # gets all items from database that match current user
-            cur.execute("SELECT ITEM, QUANTITY FROM GROCERIES WHERE USERNAME=?", (username,)) 
-            data = cur.fetchall()
-            conn.commit()
-            
-            #updates page with results
-            return render_template('grocerylist.html', name = session["username"], groceries= data)
-        
-        # --- ADD ITEM -----------
-        elif request.method == "POST":
-            item = request.form.get('groceryitem')
-            quantity = request.form.get("quantity")
-            conn.execute('INSERT INTO GROCERIES (USERNAME, ITEM, QUANTITY) VALUES (?, ?, ?)', (username, item, quantity))
-            conn.commit()
-            
-            # returns back to list
-            return redirect(url_for("index"))
-    
-    # returns user to login page if not logged in     
-    else:
-        return redirect(url_for("login"))  
-
-#---------- DELETE ITEM ------------------          
-@app.route("/delete", methods=["POST"])
-def deleteItem():
-    # gets item from from and deletes it from database
-    item = request.form.get('item')
-    cur = conn.cursor()
-    cur.execute("DELETE FROM GROCERIES WHERE ITEM=?", (item,)) 
-    conn.commit()
-    return redirect(url_for("index"))
-
-#--------- Users ------------------------
-@app.route("/users")
-def getAllUsers():
-    cur = conn.cursor()
-    
-    # gets all users and returns in JSON object
-    cur.execute("SELECT * FROM USER") 
-    data = cur.fetchall()
-    print(data)
-    users =[]
-    for user in data:
-        item = {'id': user[0], 'username': user[1]}
-        users.append(item)
-    return jsonify(users)
-
-#----------  LOGIN  ---------------------
-@app.route("/", methods=["POST", "GET"])
-def login():
-    
-    # if the user is in the current session then redirect to home page
-    if "username" in session:
-        username = session["username"]
-        return redirect(url_for("index"))
-    
-    # post action to log in    
-    elif request.method == "POST":
-        #saves user to current session
-        session["username"] = request.form.get("username")
-        cur = conn.cursor()
-        
-        # searches for user in database
-        cur.execute("SELECT USERNAME FROM USER WHERE USERNAME=?", (session["username"],)) 
-        data = cur.fetchall()
-        
-        # if user is not in database it adds the user
-        if len(data) == 0:
-            cur.execute("INSERT INTO USER (USERNAME) VALUES(?)", (session['username'],))
-        
-        # commits changes to database
-        conn.commit()
-        
-        return redirect(url_for("index"))
-
-    # redirects to login page if none of the above are met    
-    else:
-        return render_template('login.html')
-
-#----------  LOGOUT  ---------------------
-@app.route("/logout", methods=["GET"])
-def logout():
-    #removes user from current session
-    session.pop("username", None)
-    return redirect(url_for("login"))
-
-print("Operation done successfully")
-
-
-if __name__ == "__main__":
-    app.run(host="0.0.0.0", port=2224) # runs the application
+#!/usr/bin/python3
+
+from flask import Flask, jsonify, session, render_template, redirect, url_for, request
+import sqlite3
+
+app = Flask(__name__)
+app.secret_key = "jfioefefjioawfnieofa"
+
+# establishes connection to sqlite database
+conn = sqlite3.connect('grocerylist.db', check_same_thread=False)
+print('Database connected')
+
+# creates table to hold users
+conn.execute('''CREATE TABLE IF NOT EXISTS USER
+ (ID INTEGER PRIMARY KEY AUTOINCREMENT,
+ USERNAME TEXT NOT NULL
+ );''')
+
+# creates table to hold grocery items
+conn.execute('''CREATE TABLE IF NOT EXISTS GROCERIES
+ (ID INTEGER PRIMARY KEY AUTOINCREMENT,
+ USERNAME TEXT NOT NULL,
+ ITEM TEXT NOT NULL,
+ QUANTITY INTEGER NOT NULL
+ );''')
+
+#--------- INDEX PAGE ---------------------
+@app.route("/home", methods=["GET", "POST"])
+def index():
+    if "username" in session:
+        username = session['username']
+        if request.method == "GET":
+            cur = conn.cursor()
+            search = request.args.get('search')
+            if search:
+                # Filter items by search term (case-insensitive)
+                cur.execute("SELECT ITEM, QUANTITY FROM GROCERIES WHERE USERNAME=? AND LOWER(ITEM) LIKE ?", (username, f"%{search.lower()}%"))
+            else:
+                cur.execute("SELECT ITEM, QUANTITY FROM GROCERIES WHERE USERNAME=?", (username,))
+            data = cur.fetchall()
+            return render_template('grocerylist.html', name=username, groceries=data)
+        elif request.method == "POST":
+            item = request.form.get('groceryitem')
+            quantity = request.form.get("quantity")
+            if item and quantity:
+                conn.execute('INSERT INTO GROCERIES (USERNAME, ITEM, QUANTITY) VALUES (?, ?, ?)', (username, item, quantity))
+                conn.commit()
+            return redirect(url_for("index"))
+    else:
+        return redirect(url_for("login"))
+
+#---------- UPDATE ITEM ------------------          
+@app.route("/update", methods=["POST"])
+def updateItem():
+    old_item = request.form.get('old_item')
+    new_item = request.form.get('new_item')
+    new_quantity = request.form.get('new_quantity')
+    username = session.get('username')
+    if old_item and new_item and new_quantity and username:
+        cur = conn.cursor()
+        cur.execute("UPDATE GROCERIES SET ITEM=?, QUANTITY=? WHERE ITEM=? AND USERNAME=?", (new_item, new_quantity, old_item, username))
+        conn.commit()
+    return redirect(url_for("index"))
+
+#---------- DELETE ITEM ------------------          
+@app.route("/delete", methods=["POST"])
+def deleteItem():
+    item = request.form.get('item')
+    username = session.get('username')
+    if item and username:
+        cur = conn.cursor()
+        cur.execute("DELETE FROM GROCERIES WHERE ITEM=? AND USERNAME=?", (item, username)) 
+        conn.commit()
+    return redirect(url_for("index"))
+
+#--------- Users ------------------------
+@app.route("/users")
+def getAllUsers():
+    cur = conn.cursor()
+    cur.execute("SELECT * FROM USER") 
+    data = cur.fetchall()
+    users = []
+    for user in data:
+        item = {'id': user[0], 'username': user[1]}
+        users.append(item)
+    return jsonify(users)
+
+#----------  LOGIN  ---------------------
+@app.route("/", methods=["POST", "GET"])
+def login():
+    if "username" in session:
+        return redirect(url_for("index"))
+    elif request.method == "POST":
+        session["username"] = request.form.get("username")
+        cur = conn.cursor()
+        cur.execute("SELECT USERNAME FROM USER WHERE USERNAME=?", (session["username"],)) 
+        data = cur.fetchall()
+        if len(data) == 0:
+            cur.execute("INSERT INTO USER (USERNAME) VALUES(?)", (session['username'],))
+            conn.commit()
+        return redirect(url_for("index"))
+    else:
+        return render_template('login.html')
+
+#----------  LOGOUT  ---------------------
+@app.route("/logout", methods=["GET"])
+def logout():
+    session.pop("username", None)
+    return redirect(url_for("login"))
+
+print("Operation done successfully")
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=2224)
\ No newline at end of file
diff --git a/request.py b/request.py
index ae151b4..87b88f2 100644
--- a/request.py
+++ b/request.py
@@ -1,17 +1,17 @@
-import requests
-
-def main():
-    #gets users from api
-    URL= "http://127.0.0.1:2224/users"
-
-    # Get request to url and stores repsonse
-    response = requests.get(URL)
-
-    # turns response to python object
-    users = response.json()
-    
-    #prints users in database
-    print(users)
-
-if __name__ == "__main__":
+import requests
+
+def main():
+    #gets users from api
+    URL= "http://127.0.0.1:2224/users"
+
+    # Get request to url and stores repsonse
+    response = requests.get(URL)
+
+    # turns response to python object
+    users = response.json()
+    
+    #prints users in database
+    print(users)
+
+if __name__ == "__main__":
         main()
\ No newline at end of file
diff --git a/templates/grocerylist.html b/templates/grocerylist.html
index 3c8b6fc..22ec850 100644
--- a/templates/grocerylist.html
+++ b/templates/grocerylist.html
@@ -1,56 +1,135 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- Bootstrap -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
-    <title>Grocery List</title>
-
-</head>
-<body style="background-image:url('https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80')">
-    <div class="rounded bg-light border shadow mt-5 text-center" style="width: 30%; margin:auto; height: 800px">
-        <h1 class="mt-2">{{name}}'s Grocery List</h1>
-        <form method="POST" class="p-3">
-            <div class="row g-3 align-items-center"  >
-                <div class="col-md-7">
-                  <input type="text" class="form-control" name="groceryitem" placeholder="enter a grocery item to add to the list" required>
-                </div>
-                <select class="form-control col-md-2" style="width:16% !important" name="quantity">
-                    <option vale="1">1</option>
-                    <option vale="2">2</option>
-                    <option vale="3">3</option>
-                    <option vale="4">4</option>
-                    <option vale="5">5</option>
-                    <option vale="6">6</option>
-                    <option vale="6">6</option>
-                    <option vale="7">7</option>
-                    <option vale="8">8</option>
-                    <option vale="9">9</option>
-                    <option vale="10">10</option>
-                  </select>  
-                <div class="col-auto">
-                  <button type="submit" class="btn btn-primary btn-shadow">Add Item</button>
-                </div>
-              </div>
-        </form>
-        <hr>
-        <!-- LIST OF ITEMS-->
-
-            {% for x in groceries%}
-            <form action="/delete" method="post">
-                <div class="rounded m-2 p-2 border" style="text-align:left"> 
-                    <span class="ps-3 pe-5">{{ x[1] }}</span>
-                    <span>{{ x[0].lower() }}</span>
-                    <input type="hidden" value="{{x[0]}}" name="item">
-                    <button type="submit" class="btn btn-danger btn-sm" style="float:right">Delete</button>
-                </div>
-            </form>         
-            {% endfor %}
-
-
-        <a href="/logout" class="btn btn-warning" style="margin-top:20%">Sign Out</a>
-    </div>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{name}}'s Grocery List</title>
+  <!-- Bootstrap CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <style>
+    body {
+      background-image: url('https://images.unsplash.com/photo-1542838132-92c53300491e');
+      background-size: cover;
+      background-position: center;
+      height: 100vh;
+      backdrop-filter: blur(4px);
+    }
+    .glass-card {
+      background: rgba(255, 255, 255, 0.8);
+      border-radius: 15px;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+      padding: 30px;
+      margin-top: 80px;
+      max-width: 500px;
+    }
+    .form-control,
+    .btn {
+      border-radius: 8px;
+    }
+    .grocery-item {
+      background-color: #f8f9fa;
+      border-left: 4px solid black;
+    }
+    .delete-btn {
+      float: right;
+    }
+    .update-btn {
+      margin-right: 10px; /* Space between update and delete buttons */
+    }
+  </style>
+</head>
+<body>
+  <div class="container d-flex justify-content-center">
+    <div class="glass-card w-100 text-center">
+      <h2 class="fw-bold mb-4 text-primary">{{name}}'s Grocery List</h2>
+
+      <!-- SEARCH BAR -->
+      <form method="GET" action="/home" class="mb-3">
+        <div class="input-group">
+          <input type="text" class="form-control" name="search" placeholder="Search grocery items..." value="{{ request.args.get('search', '') }}">
+          <button class="btn btn-outline-secondary" type="submit">Search</button>
+        </div>
+      </form>
+
+      <!-- ADD ITEM FORM -->
+      <form method="POST">
+        <div class="row g-2 mb-4 justify-content-center">
+          <div class="col-md-7">
+            <input type="text" class="form-control" name="groceryitem" placeholder="Add grocery item..." required />
+          </div>
+          <div class="col-md-3">
+            <select class="form-select" name="quantity" required>
+              {% for i in range(1,11) %}
+              <option value="{{i}}">{{i}}</option>
+              {% endfor %}
+            </select>
+          </div>
+          <div class="col-md-2">
+            <button type="submit" class="btn btn-primary w-100">Add</button>
+          </div>
+        </div>
+      </form>
+
+      <hr />
+
+      <!-- Grocery Items -->
+      <div class="text-start">
+        {% for x in groceries %}
+        <form action="/delete" method="POST" class="mb-2">
+          <div class="p-3 rounded grocery-item d-flex justify-content-between align-items-center">
+            <div>
+              <strong>{{ x[1] }}</strong> - {{ x[0].lower() }}
+              <input type="hidden" value="{{x[0]}}" name="item" />
+            </div>
+            <div>
+              <button type="button" class="btn btn-sm btn-outline-secondary update-btn"
+  onclick="openUpdateModal('{{ x[0]|e }}', '{{ x[1]|e }}')">Update</button>
+              <button type="submit" class="btn btn-sm btn-outline-danger delete-btn">Delete</button>
+            </div>
+          </div>
+        </form>
+        {% endfor %}
+      </div>
+
+      <a href="/logout" class="btn btn-warning mt-5 w-100">Sign Out</a>
+    </div>
+  </div>
+
+  <!-- Update Modal -->
+  <div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="updateModalLabel">Update Grocery Item</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <form id="updateForm" method="POST" action="/update">
+            <input type="hidden" name="old_item" id="old_item">
+            <div class="mb-3">
+              <label for="new_item" class="form-label">New Item Name</label>
+              <input type="text" class="form-control" name="new_item" id="new_item" required>
+            </div>
+            <div class="mb-3">
+              <label for="new_quantity" class="form-label">New Quantity</label>
+              <input type="number" class="form-control" name="new_quantity" id="new_quantity" required>
+            </div>
+            <button type="submit" class="btn btn-primary">Update</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
+  <script>
+    function openUpdateModal(itemName, quantity) {
+      document.getElementById('old_item').value = itemName;
+      document.getElementById('new_item').value = itemName; // Pre-fill with current item name
+      document.getElementById('new_quantity').value = quantity; // Pre-fill with current quantity
+      var myModal = new bootstrap.Modal(document.getElementById('updateModal'));
+      myModal.show();
+    }
+  </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/templates/login.html b/templates/login.html
index 4f36108..19801a5 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,25 +1,25 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- Bootstrap -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
-    <title>Grocery List</title>
-
-</head>
-<body style="background-image:url('https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80')">
-    <div class="rounded bg-light border shadow" style="width: 20%; margin:10% auto; height: 300px">
-        <h1 class="mt-2 text-center">Login</h1>
-        <form class="p-3" method="post">
-            <div class="mb-3">
-              <label for="exampleInputEmail1" class="form-label">Username</label>
-              <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="usernameHelp" name="username" required>
-              <div id="usernameHelp" class="form-text">Please enter a username to login</div>
-            </div>
-            <button type="submit" class="btn btn-primary">Submit</button>
-        </form>
-    </div>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Bootstrap -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
+    <title>Grocery List</title>
+
+</head>
+<body style="background-image:url('https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80')">
+    <div class="rounded bg-light border shadow" style="width: 20%; margin:10% auto; height: 300px">
+        <h1 class="mt-2 text-center">Login</h1>
+        <form class="p-3" method="post">
+            <div class="mb-3">
+              <label for="exampleInputEmail1" class="form-label">Username</label>
+              <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="usernameHelp" name="username" required>
+              <div id="usernameHelp" class="form-text">Please enter a username to login</div>
+            </div>
+            <button type="submit" class="btn btn-primary">Submit</button>
+        </form>
+    </div>
+</body>
 </html>
\ No newline at end of file