feat: add sweetalert

index.html

@@ -40,7 +40,7 @@
                     <h3>Register</h3>
                     <form id="registerForm">
                         <div class="form-group">
-                            <input type="text" id="registerName" placeholder="Full Name" required>
+                            <input type="text" id="registerName" placeholder="Name" required>
                         </div>
                         <div class="form-group">
                             <input type="email" id="registerEmail" placeholder="Email" required>

package-lock.json

@@ -9,7 +9,8 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "appwrite": "^18.1.1"
+        "appwrite": "^18.1.1",
+        "sweetalert": "^2.1.2"
       },
       "devDependencies": {
         "typescript": "^5.8.3",
@@ -734,6 +735,12 @@
       "integrity": "sha512-krwHjuwJcF+9Ig2+nqOEKMA/5kPIFhwwZsaLc7Gb8y2oP6EnG4ZMRPeHTFscdevOtVQj2Ax92cYYWAEvzlrc7A==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw==",
+      "license": "MIT"
+    },
     "node_modules/esbuild": {
       "version": "0.25.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.5.tgz",
@@ -873,6 +880,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/promise-polyfill": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
+      "integrity": "sha512-g0LWaH0gFsxovsU7R5LrrhHhWAWiHRnh1GPrhXnPgYsDkIqjRYUYSZEsej/wtleDrz5xVSIDbeKfidztp2XHFQ==",
+      "license": "MIT"
+    },
     "node_modules/rollup": {
       "version": "4.43.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.43.0.tgz",
@@ -923,6 +936,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sweetalert": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
+      "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
+      "license": "MIT",
+      "dependencies": {
+        "es6-object-assign": "^1.1.0",
+        "promise-polyfill": "^6.0.2"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",

package.json

@@ -16,6 +16,7 @@
     "vite": "^6.3.5"
   },
   "dependencies": {
-    "appwrite": "^18.1.1"
+    "appwrite": "^18.1.1",
+    "sweetalert": "^2.1.2"
   }
 }

src/appwrite.ts

@@ -90,7 +90,7 @@ export class AppwriteDB {
               createdAt: new Date().toISOString()
           }
       );
-      console.log('Food entry saved:', response);
+      console.debug('Food entry saved:', response);
       return response;
     } catch (error) {
       console.error('Save food entry error:', error);

src/index.ts

@@ -2,6 +2,7 @@ import { foodDatabase } from './foodDatabase.js';
 import { getButtonById, getButtonListByClassName, getDivById, getInputById, showFoodPreview } from './HtmlUtil.ts';
 import { FoodItem, FoodStorage } from './types.js';
 import { AppwriteAuth, AppwriteDB } from './appwrite.js';
+import swal from 'sweetalert';
 
 // App state
 let selectedDate = new Date();
@@ -81,10 +82,10 @@ async function handleRegister(e: SubmitEvent) {
     showMainApp();
     selectDate(selectedDate);
     
-    alert('Registration successful! Welcome to Food Tracker.');
+    swal('Registration successful! Welcome to Food Tracker.');
   } catch (error) {
     console.error('Registration error:', error);
-    alert('Registration failed: ' + error.message);
+    swal('Oh no!', 'Registration failed: ' + error.message, 'error');
   } finally {
     hideLoading();
   }
@@ -107,7 +108,7 @@ async function handleLogin(e: SubmitEvent) {
       
   } catch (error) {
     console.error('Login error:', error);
-    alert('Login failed: ' + error.message);
+    swal('Oh no!', 'Login failed: ' + error.message, 'error');
   } finally {
     hideLoading();
   }
@@ -123,7 +124,7 @@ async function handleLogout() {
     clearAppData();
   } catch (error) {
     console.error('Logout error:', error);
-    alert('Logout failed: ' + error.message);
+    swal('Oh no!', 'Logout failed: ' + error.message, 'error');
   } finally {
     hideLoading();
   }
@@ -251,9 +252,6 @@ const setupEventListeners = () => {
   document.getElementById('loginForm')?.addEventListener('submit', handleLogin);
   document.getElementById('registerForm')?.addEventListener('submit', handleRegister);
   document.getElementById('logoutBtn')?.addEventListener('click', handleLogout);
-
-  // Food table delete buttons (event delegation)
-  // document.getElementById('foodTableBody')?.addEventListener('click', handleDeleteFood);
 }
 
 const addDeleteEvents = () => {
@@ -298,7 +296,7 @@ const updateCurrentDate = () => {
 // Add food to the log
 const addFood = async () => {
   if (!currentUser) {
-    alert('Please log in to add food entries.');
+    swal('Hey!', 'Please log in to add food entries.', 'info');
     return;
   }
 
@@ -306,7 +304,7 @@ const addFood = async () => {
   const gramAmount = getInputById('gramAmount');
     
   if (!foodSelect.value || !gramAmount.value) {
-    alert('Please select a food item and enter amount');
+    swal('Hey!', 'Please select a food item and enter amount', 'error');
     return;
   }
 
@@ -343,16 +341,13 @@ const addFood = async () => {
     // Update totals
     updateTotalCalories();
 
-    // Update display
-    renderCalendar();
-
     // Reset form
     foodSelect.value = '';
     gramAmount.value = '100';
     showFoodPreview(false);
   } catch (error) {
       console.error('Add food error:', error);
-      alert('Failed to add food entry: ' + error.message);
+      swal('Oh no!', 'Failed to add food entry: ' + error.message, 'error');
   } finally {
       hideLoading();
   }
@@ -396,7 +391,7 @@ async function loadFoodEntries(date: Date) {
       
   } catch (error) {
       console.error('Load food entries error:', error);
-      alert('Failed to load food entries: ' + error.message);
+      swal('Oh no!', 'Failed to load food entries: ' + error.message, 'error');
   } finally {
       hideLoading();
   }
@@ -405,8 +400,17 @@ async function loadFoodEntries(date: Date) {
 // Handle food deletion
 async function handleDeleteFood(documentId: string, row: HTMLTableRowElement) {
   if (!documentId) return;
+
+  const willDelete = await swal({
+    title: "Are you sure?",
+    text: 'You want to delete this food entry?',
+    icon: 'warning',
+    dangerMode: true,
+    closeOnEsc: true,
+    buttons:["No, abort", "Yes, Do it!"],
+  });
   
-  if (!confirm('Are you sure you want to delete this food entry?')) return;
+  if (!willDelete) return;
   
   showLoading();
   
@@ -422,7 +426,7 @@ async function handleDeleteFood(documentId: string, row: HTMLTableRowElement) {
       
   } catch (error) {
     console.error('Delete food error:', error);
-    alert('Failed to delete food entry: ' + error.message);
+    swal('Oh no!', 'Failed to delete food entry: ' + error.message, 'error');
   } finally {
     hideLoading();
   }
@@ -447,6 +451,9 @@ function addFoodToTable(foodData: FoodStorage, documentId: string) {
   `;
   
   tableBody?.appendChild(row);
+
+  // Setup Delete events
+  addDeleteEvents();
 }
 
 // Update total calories