feat: allow changing occupation

backend/src/modules/resource/occupation.controller.ts

@@ -1,9 +1,9 @@
 import {
+  Body,
   Controller,
   Get,
   HttpException,
   HttpStatus,
-  Param,
   Put,
 } from '@nestjs/common';
 import { ResourceService } from '@/modules/resource/resource.service';
@@ -21,12 +21,12 @@ export class OccupationController {
     return occupation;
   }
 
-  @Put(':type')
-  async upgradeResource(@Param() params: OccupationTypeDto): Promise<void> {
+  @Put()
+  async changeOccupation(@Body() body: OccupationTypeDto): Promise<void> {
     const { id } = await getUser();
 
     try {
-      await this.resourceService.changeOccupation(id, params.occupation);
+      await this.resourceService.changeOccupation(id, body.occupation);
     } catch (e) {
       throw new HttpException(
         'Failed to change occupation: ' + e,

frontend/components/ProposeTrade.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col space-y-2 max-w-56">
     <h1>Requested Resources:</h1>
     <UInputMenu v-model="requestedResources.type" :options="resourceOptions" />
     <UInput v-model="requestedResources.amount" type="number" />
@@ -32,7 +32,7 @@ const offeredResources = ref<{
   amount?: number,
 }>({});
 
-async function submitTrade () {
+async function submitTrade() {
   const trade = {
     requestedResources: [requestedResources.value],
     offeredResources: [offeredResources.value],

frontend/components/ShowOccupation.vue

@@ -1,6 +1,21 @@
 <template>
   <div v-if="occupation">
     <p>Occupation: {{ occupation }} {{ getOccupationIcon(occupation) }}</p>
+    <br>
+    <div class="flex flex-col space-y-2 max-w-56">
+      <p>Change Occupation:</p>
+      <UInputMenu v-model="chosenOccupation" :options="availableOccupations" />
+      <UButton :disabled="cantChangeOccupation" @click="changeOccupation">
+        <template v-if="chosenOccupation === null">
+          Apply
+        </template>
+        <template v-else>
+          Apply change to {{ chosenOccupation }} {{
+            getOccupationIcon(chosenOccupation) }}
+        </template>
+      </UButton>
+    </div>
+
   </div>
 </template>
 
@@ -19,7 +34,8 @@ const occupationIcon = {
   [Occupation.HUNTER]: '🏹',
 };
 
-function getOccupationIcon (occupation: Occupation) {
+
+function getOccupationIcon(occupation: Occupation) {
   return occupationIcon[occupation];
 }
 
@@ -31,14 +47,30 @@ const { data: occupation, refresh } = await useFetch<Occupation>(
   },
 );
 
-let stopInterval: NodeJS.Timeout;
+const availableOccupations =
+  computed(() => Object.values(Occupation)
+    .filter((availableOccupation) => availableOccupation !== occupation.value));
+
+const cantChangeOccupation =
+  computed(() => chosenOccupation.value === null || chosenOccupation.value === occupation.value)
 
-onMounted(() => {
-  // Refresh data every 2.5 seconds
-  stopInterval = setInterval(refresh, 2500);
-});
+const chosenOccupation = ref<null | Occupation>(null)
+
+async function changeOccupation() {
+  await useFetch(
+    basePath + 'occupations',
+    {
+      method: 'PUT',
+      body: {
+        occupation: chosenOccupation.value
+      },
+      lazy: true,
+      server: false,
+    }
+  );
+
+  chosenOccupation.value = null;
+  await refresh();
+}
 
-onUnmounted(() => {
-  clearInterval(stopInterval);
-});
 </script>

frontend/components/navbar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const links = [{
-  label: 'Home',
-  icon: 'i-heroicons-home',
+  label: 'User',
+  icon: 'i-heroicons-user-circle',
   to: '/',
 }, {
   label: 'Resources',

frontend/pages/index.vue

@@ -1,12 +1,10 @@
 <template>
   <div>
-    <h1>Home</h1>
+    <h1>User Overview</h1>
+    <br>
+    <ShowOccupation />
   </div>
 </template>
 
 <script setup lang="ts">
-import { useHeader } from '~/composables/useHeader';
-
-const { title } = useHeader();
-title.value = 'Home';
 </script>

frontend/pages/resources.vue

@@ -1,15 +1,9 @@
 <template>
   <div>
-    <ShowOccupation />
-    <br>
     <h1>Available Resources:</h1>
     <ShowAllResources />
   </div>
 </template>
 
 <script setup lang="ts">
-import { useHeader } from '~/composables/useHeader';
-
-const { title } = useHeader();
-title.value = 'Resources';
 </script>

frontend/pages/trades.vue

@@ -11,8 +11,4 @@
 </template>
 
 <script setup lang="ts">
-import { useHeader } from '~/composables/useHeader';
-
-const { title } = useHeader();
-title.value = 'Trades';
 </script>

frontend/pages/treaties.vue

@@ -11,8 +11,4 @@
 </template>
 
 <script setup lang="ts">
-import { useHeader } from '~/composables/useHeader';
-
-const { title } = useHeader();
-title.value = 'Treaties';
 </script>