Skip to content

Commit

Permalink
feature/viewCampaignsPage (#21)
Browse files Browse the repository at this point in the history
* campaign fetch working

* view campaign done

* typescript
  • Loading branch information
slandath authored Sep 21, 2024
1 parent efcee59 commit ee38225
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 56 deletions.
93 changes: 37 additions & 56 deletions components/SideMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
64 changes: 64 additions & 0 deletions components/View-Campaign.vue
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions pages/view-campaigns.vue
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit ee38225

Please sign in to comment.