feat: add sweetalert

2025-06-12 18:52:44 -03:00
parent c225a13244
commit 55ff30954d
5 changed files with 51 additions and 20 deletions
@@ -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>
@@ -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",
@@ -16,6 +16,7 @@
    "vite": "^6.3.5"
  },
  "dependencies": {
-    "appwrite": "^18.1.1"
+    "appwrite": "^18.1.1",
+    "sweetalert": "^2.1.2"
  }
 }
@@ -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);
@@ -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