From 55ff30954dbffa1421935e19093da794499710e0 Mon Sep 17 00:00:00 2001 From: Ricardo Campos Date: Thu, 12 Jun 2025 18:52:44 -0300 Subject: [PATCH] feat: add sweetalert --- index.html | 2 +- package-lock.json | 25 ++++++++++++++++++++++++- package.json | 3 ++- src/appwrite.ts | 2 +- src/index.ts | 39 +++++++++++++++++++++++---------------- 5 files changed, 51 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 513d454..fbdf1da 100644 --- a/index.html +++ b/index.html @@ -40,7 +40,7 @@

Register

- +
diff --git a/package-lock.json b/package-lock.json index 38a3af2..baa52d1 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index cc0cd32..27200ca 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "vite": "^6.3.5" }, "dependencies": { - "appwrite": "^18.1.1" + "appwrite": "^18.1.1", + "sweetalert": "^2.1.2" } } diff --git a/src/appwrite.ts b/src/appwrite.ts index 5725e58..d636882 100644 --- a/src/appwrite.ts +++ b/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); diff --git a/src/index.ts b/src/index.ts index fb5ff35..4c851a9 100644 --- a/src/index.ts +++ b/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