Add more admin stats and fix icon set issues

src/routes/settings/+page.server.ts

@@ -11,11 +11,11 @@ export const load: PageServerLoad = async (event) => {
     return {
       user: event.locals.user,
     };
-    return redirect(302, "/login");
+  return redirect(302, "/login");
 };
 
 export const actions: Actions = {
-    default: async (event: { request: { formData: () => any; }; }) => {
+  default: async (event: { request: { formData: () => any } }) => {
     const formData = await event.request.formData();
     let userId = formData.get("user_id");
     let username = formData.get("username");
@@ -26,22 +26,22 @@ export const actions: Actions = {
     let password = formData.get("password");
 
     if (!userId) {
-        return {
-            status: 400,
-            body: {
-                message: "User ID is required"
-            }
-        };
+      return {
+        status: 400,
+        body: {
+          message: "User ID is required",
+        },
+      };
     }
 
-    if (icon.length > 1) {
-        return {
-            status: 400,
-            body: {
-                message: "Icon must be a single character"
-            }
-        };
-    }
+    // if (icon.length > 1) {
+    //   return {
+    //     status: 400,
+    //     body: {
+    //       message: "Icon must be a single character",
+    //     },
+    //   };
+    // }
 
     const usernameTaken = await db
       .select()
@@ -50,40 +50,42 @@ export const actions: Actions = {
       .limit(1)
       .then((results) => results[0] as unknown as DatabaseUser | undefined);
 
-    if (usernameTaken) {
-        return {
-            status: 400,
-            body: {
-                message: "Username taken!"
-            }
-        };
+    if (usernameTaken && usernameTaken.id !== userId) {
+      return {
+        status: 400,
+        body: {
+          message: "Username taken!",
+        },
+      };
     }
 
     if (password) {
-        let hashedPassword = await new Argon2id().hash(password);
-        console.log(hashedPassword)
-        await db.update(userTable)
-            .set({
-                hashed_password: hashedPassword
-            })
-            .where(eq(userTable.id, userId));
-    }
-
-    await db.update(userTable)
+      let hashedPassword = await new Argon2id().hash(password);
+      console.log(hashedPassword);
+      await db
+        .update(userTable)
         .set({
-            username: username,
-            first_name: firstName,
-            last_name: lastName,
-            icon: icon
+          hashed_password: hashedPassword,
         })
         .where(eq(userTable.id, userId));
-
-        return {
-            status: 200,
-            body: {
-                message: "User updated"
-
-            }
-        };
     }
-};
+
+    await db
+      .update(userTable)
+      .set({
+        username: username,
+        first_name: firstName,
+        last_name: lastName,
+        icon: icon,
+      })
+      .where(eq(userTable.id, userId));
+
+    // return a page refresh
+    return {
+      status: 303,
+      headers: {
+        location: "/settings",
+      },
+    };
+  },
+};

src/routes/settings/+page.svelte

@@ -10,6 +10,8 @@
   let icon = data.user?.icon;
   let signup_date = data.user?.signup_date;
   let role = data.user?.role;
+
+  // the submit function shoud just reload the page
 </script>
 
 <h1 class="text-center font-extrabold text-4xl mb-6">Settings Page</h1>

src/routes/settings/admin/+page.server.ts

@@ -4,6 +4,7 @@ import { db } from "$lib/db/db.server";
 import {
   adventureTable,
   sessionTable,
+  userPlannedTrips,
   userTable,
   userVisitedWorldTravel,
 } from "$lib/db/schema";
@@ -14,6 +15,9 @@ export const load: PageServerLoad = async (event) => {
   let users: DatabaseUser[] = [];
   let visitCount: number = NaN;
   let userCount: number = NaN;
+  let planCount: number = NaN;
+  let tripCount: number = NaN;
+  let featuredCount: number = NaN;
   let regionCount: number = NaN;
   if (!event.locals.user) {
     return redirect(302, "/login");
@@ -36,12 +40,29 @@ export const load: PageServerLoad = async (event) => {
       .select({ count: count() })
       .from(userVisitedWorldTravel)
       .execute()) as unknown as number;
+    planCount = (await db
+      .select({ count: count() })
+      .from(adventureTable)
+      .where(eq(adventureTable.type, "planner"))
+      .execute()) as unknown as number;
+    tripCount = (await db
+      .select({ count: count() })
+      .from(userPlannedTrips)
+      .execute()) as unknown as number;
+    featuredCount = (await db
+      .select({ count: count() })
+      .from(adventureTable)
+      .where(eq(adventureTable.type, "featured"))
+      .execute()) as unknown as number;
   }
   return {
     users,
     visitCount,
     userCount,
     regionCount,
+    planCount,
+    tripCount,
+    featuredCount,
   };
 };
 

src/routes/settings/admin/+page.svelte

@@ -62,6 +62,9 @@
   let visitCount = $page.data.visitCount[0].count;
   let userCount = $page.data.userCount[0].count;
   let regionCount = $page.data.regionCount[0].count;
+  let tripCount = $page.data.tripCount[0].count;
+  let planCount = $page.data.planCount[0].count;
+  let featuredCount = $page.data.featuredCount[0].count;
 </script>
 
 <h1 class="text-center font-extrabold text-4xl">Admin Settings</h1>
@@ -153,17 +156,29 @@
   <div class="stats stats-vertical lg:stats-horizontal shadow">
     <div class="stat">
       <div class="stat-title">Total Visits</div>
-      <div class="stat-value">{visitCount}</div>
+      <div class="stat-value text-center">{visitCount}</div>
     </div>
 
     <div class="stat">
       <div class="stat-title">Total Users</div>
-      <div class="stat-value">{userCount}</div>
+      <div class="stat-value text-center">{userCount}</div>
     </div>
 
     <div class="stat">
       <div class="stat-title">Visited Regions</div>
-      <div class="stat-value">{regionCount}</div>
+      <div class="stat-value text-center">{regionCount}</div>
+    </div>
+    <div class="stat">
+      <div class="stat-title">Total Trips</div>
+      <div class="stat-value text-center">{tripCount}</div>
+    </div>
+    <div class="stat">
+      <div class="stat-title">Total Plans</div>
+      <div class="stat-value text-center">{planCount}</div>
+    </div>
+    <div class="stat">
+      <div class="stat-title">Featured Adventures</div>
+      <div class="stat-value text-center">{featuredCount}</div>
     </div>
   </div>
 </div>

src/routes/trip/[id]/+page.svelte

@@ -6,6 +6,7 @@
   import CreateNewAdventure from "$lib/components/CreateNewAdventure.svelte";
   import {
     addAdventure,
+    removeAdventure,
     saveAdventure,
   } from "../../../services/adventureService";
   import AdventureCard from "$lib/components/AdventureCard.svelte";
@@ -43,9 +44,9 @@
     let newArray = await addAdventure(detailAdventure, adventuresPlans);
     if (newArray.length > 0) {
       adventuresPlans = newArray;
-      // showToast("Adventure added successfully!");
+      showToast("Adventure added successfully!");
     } else {
-      // showToast("Failed to add adventure");
+      showToast("Failed to add adventure");
     }
   };
 
@@ -62,6 +63,22 @@
     }, 3000);
   }
 
+  async function remove(event: { detail: number }) {
+    let initialLength: number = adventuresPlans.length;
+    let theAdventure = adventuresPlans.find(
+      (adventure) => adventure.id === event.detail
+    );
+    if (theAdventure) {
+      let newArray = await removeAdventure(theAdventure, adventuresPlans);
+      if (newArray.length === initialLength - 1) {
+        adventuresPlans = newArray;
+        showToast("Adventure removed successfully!");
+      } else {
+        showToast("Failed to remove adventure");
+      }
+    }
+  }
+
   async function savePlan(event: { detail: Adventure }) {
     let newArray = await saveAdventure(event.detail, adventuresPlans);
     if (newArray.length > 0) {
@@ -108,7 +125,7 @@
   class="grid xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 mt-4 content-center auto-cols-auto ml-6 mr-6"
 >
   {#each adventuresPlans as adventure (adventure.id)}
-    <AdventureCard {adventure} type="trip" on:edit={edit} />
+    <AdventureCard {adventure} type="trip" on:edit={edit} on:remove={remove} />
   {/each}
 </div>