From ee38225f284d5edaac70179be0fa438a6a5df289 Mon Sep 17 00:00:00 2001
From: Tom Slanda <jesus_slanda@yahoo.com>
Date: Fri, 20 Sep 2024 23:11:22 -0400
Subject: [PATCH] feature/viewCampaignsPage (#21)

* campaign fetch working

* view campaign done

* typescript
---
 components/SideMenu.vue      | 93 ++++++++++++++----------------------
 components/View-Campaign.vue | 64 +++++++++++++++++++++++++
 pages/view-campaigns.vue     | 12 +++++
 3 files changed, 113 insertions(+), 56 deletions(-)
 create mode 100644 components/View-Campaign.vue
 create mode 100644 pages/view-campaigns.vue

diff --git a/components/SideMenu.vue b/components/SideMenu.vue
index af1347c..33c4206 100644
--- a/components/SideMenu.vue
+++ b/components/SideMenu.vue
@@ -16,83 +16,64 @@ const slideover = useSlideover();
         <li>
           <NuxtLink to="/">
             <div
-              class="flex p-2 text-xl md:hover:bg-green-400 hover:text-black hover:cursor-pointer"
+              class="flex p-2 ml-2 gap-2 md:hover:bg-green-400 hover:text-black hover:cursor-pointer"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                class="size-5 mt-1 mx-2"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-              <p>Home</p>
+              <UIcon name="material-symbols:home" class="w-5 h-5 mt-1" />
+              <p class="text-xl">Home</p>
             </div>
           </NuxtLink>
         </li>
+        <li>
+          <div class="flex p-2 ml-2 gap-2">
+            <UIcon name="material-symbols:globe" class="w-5 h-5 mt-1" />
+            <p class="text-xl">Campaigns</p>
+          </div>
+        </li>
         <li>
           <NuxtLink to="/create-campaign">
             <div
-              class="flex p-2 text-xl hover:bg-green-400 hover:text-black hover:cursor-pointer"
+              class="flex p-2 ml-2 gap-2 hover:bg-green-400 hover:text-black hover:cursor-pointer"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                class="size-5 mt-1 mx-2"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 1-11-4.69v.447a3.5 3.5 0 0 0 1.025 2.475L8.293 10 8 10.293a1 1 0 0 0 0 1.414l1.06 1.06a1.5 1.5 0 0 1 .44 1.061v.363a1 1 0 0 0 .553.894l.276.139a1 1 0 0 0 1.342-.448l1.454-2.908a1.5 1.5 0 0 0-.281-1.731l-.772-.772a1 1 0 0 0-1.023-.242l-.384.128a.5.5 0 0 1-.606-.25l-.296-.592a.481.481 0 0 1 .646-.646l.262.131a1 1 0 0 0 .447.106h.188a1 1 0 0 0 .949-1.316l-.068-.204a.5.5 0 0 1 .149-.538l1.44-1.234A6.492 6.492 0 0 1 16.5 10Z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-              <p>Campaigns</p>
+              <UIcon
+                name="material-symbols:add-box"
+                class="w-5 h-5 mt-1 ml-4"
+              />
+              <p class="text-lg">Create a Campaign</p>
+            </div>
+          </NuxtLink>
+        </li>
+        <li>
+          <NuxtLink to="/view-campaigns">
+            <div
+              class="flex p-2 ml-2 gap-2 hover:bg-green-400 hover:text-black hover:cursor-pointer"
+            >
+              <UIcon
+                name="material-symbols:folder-open-rounded"
+                class="w-5 h-5 mt-1 ml-4"
+              />
+              <p class="text-lg">View Campaigns</p>
             </div>
           </NuxtLink>
         </li>
         <li>
           <NuxtLink to="/cchar/cchar-1">
             <div
-              class="flex p-2 text-xl hover:bg-green-400 hover:text-black hover:cursor-pointer"
+              class="flex p-2 ml-2 gap-2 hover:bg-green-400 hover:text-black hover:cursor-pointer"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                class="size-5 mt-1 mx-2"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M4.5 2A1.5 1.5 0 0 0 3 3.5v13A1.5 1.5 0 0 0 4.5 18h11a1.5 1.5 0 0 0 1.5-1.5V7.621a1.5 1.5 0 0 0-.44-1.06l-4.12-4.122A1.5 1.5 0 0 0 11.378 2H4.5Zm2.25 8.5a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm0 3a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-
-              <p>Characters</p>
+              <UIcon name="material-symbols:person-book" class="w-5 h-5 mt-1" />
+              <p class="text-xl">Characters</p>
             </div>
           </NuxtLink>
         </li>
         <li>
           <div
-            class="flex p-2 text-xl hover:bg-green-400 hover:text-black hover:cursor-pointer"
+            class="flex p-2 ml-2 gap-2 hover:bg-green-400 hover:text-black hover:cursor-pointer"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-              class="size-5 mt-1 mx-2"
-            >
-              <path
-                d="M10 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.465 14.493a1.23 1.23 0 0 0 .41 1.412A9.957 9.957 0 0 0 10 18c2.31 0 4.438-.784 6.131-2.1.43-.333.604-.903.408-1.41a7.002 7.002 0 0 0-13.074.003Z"
-              />
-            </svg>
-
-            <p>My Profile</p>
+            <UIcon
+              name="material-symbols:account-circle"
+              class="w-5 h-5 mt-1"
+            />
+            <p class="text-xl">My Profile</p>
           </div>
         </li>
       </ul>
diff --git a/components/View-Campaign.vue b/components/View-Campaign.vue
new file mode 100644
index 0000000..748d3dc
--- /dev/null
+++ b/components/View-Campaign.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+type Timestamp = {
+  time: string;
+  valid: boolean;
+};
+
+type Campaign = {
+  uuid: string;
+  name: string;
+  creatorUuid: string;
+  dmUuid: string;
+  partyUuids: string[];
+  completed: boolean;
+  active: boolean;
+  ruleset: string;
+  maxPlayers: number;
+  created: Timestamp;
+  lastUpdated: Timestamp | null;
+};
+
+type ApiResponse = {
+  data: {
+    campaign: Campaign;
+  };
+  message: string;
+  status: number;
+  statusText: string;
+  timestamp: string;
+};
+const config = useRuntimeConfig();
+const authStore = useAuthStore();
+
+const { data } = await useFetch<ApiResponse>(
+  config.public.baseURL + "/campaign/" + "8335f613-ff58-496c-868d-3ab850ee949f",
+  {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${authStore.token}`,
+      "Content-Type": "application/json",
+    },
+  },
+);
+const campaign = data.value?.data.campaign ?? ({} as Campaign);
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <h3 class="text-xl">{{ campaign.name }}</h3>
+    </template>
+    <div class="flex gap-2">
+      <UIcon name="heroicons:user-group-solid" class="w-5 h-5" />
+      <p>Party Size: {{ campaign.maxPlayers }}</p>
+    </div>
+    <div class="flex gap-2">
+      <UIcon name="material-symbols-light:book-2-rounded" class="w-5 h-5" />
+      <p>Ruleset: {{ campaign.ruleset }}</p>
+    </div>
+
+    <template #footer>
+      <UButton block>View Details</UButton>
+    </template>
+  </UCard>
+</template>
diff --git a/pages/view-campaigns.vue b/pages/view-campaigns.vue
new file mode 100644
index 0000000..126a15b
--- /dev/null
+++ b/pages/view-campaigns.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: "fresh-token",
+});
+</script>
+
+<template>
+  <div>
+    <h2 class="text-5xl text-center p-2 mb-4">Campaigns</h2>
+    <ViewCampaign />
+  </div>
+</template>