Some ui fixes

VannaKarenina · Jun 1, 2023 · b720142 · b720142
1 parent b36f724
commit b720142
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 73 deletions.
diff --git a/components/base/SideNav.vue b/components/base/SideNav.vue
@@ -1,47 +1,44 @@
-<script lang="ts">
+<script setup lang="ts">
 import {useAuthStore} from "~/stores/auth";
 import {$fetch} from "ofetch";
-
-export default defineNuxtComponent({
-  name: "SideNav",
-  setup() {
-    const store = useAuthStore();
-    const account = ref({});
-    onMounted(async () => {
-      account.value = await $fetch('http://127.0.0.1:3890/v1/account/identity', {
-        headers: {
-          Authorization: `Bearer ${store.token}`
-        }
-      })
-    })
-    return {store, account}
-  },
-  data() {
-    return {
-      dashboardState: 0,
-    }
-  },
-  methods: {
-    changeDashboardState(state: number) {
-      switch (state) {
-        case 0:
-          this.$emit('state', 0)
-          break;
-        case 1:
-          this.$emit('state', 1)
-          break;
-      }
-    },
-    getPermsLevel(perm: number) {
-      switch (perm) {
-        case 0:
-          return 'User';
-        case 1:
-          return 'Moderator'
-      }
+const emit = defineEmits([
+    'state'
+])
+const store = useAuthStore();
+const account = ref({});
+const dashboardState = ref(0);
+try {
+  account.value = await $fetch('http://127.0.0.1:3890/v1/account/identity', {
+    headers: {
+      Authorization: `Bearer ${store.token}`
     }
+  })
+} catch (error) {
+  if (error.response && error.response.status === 401) {
+    store.logout()
+    navigateTo('/')
+  } else {
+    console.error(error);
+  }
+}
+function changeDashboardState(state: number) {
+  switch (state) {
+    case 0:
+      emit('state', 0)
+      break;
+    case 1:
+      emit('state', 1)
+      break;
+  }
+}
+function getPermsLevel(perm: number) {
+  switch (perm) {
+    case 0:
+      return 'User';
+    case 1:
+      return 'Moderator'
   }
-})
+}
 </script>
 
 <template>
@@ -103,6 +100,25 @@ export default defineNuxtComponent({
             </svg>
             <span class="tw-text-lg tw-text-center">Projects</span>
           </a>
+          <a
+              v-if="account.moderation_level >= 1"
+              @click="changeDashboardState(3)"
+              class="tw-text-sm tw-font-medium tw-text-white tw-py-2 tw-px-2 hover:tw-bg-teal-500 hover:tw-text-white hover:tw-text-base tw-rounded-md tw-transition tw-duration-150 tw-ease-in-out"
+          >
+            <svg class="tw-w-8 tw-h-8 tw-fill-current tw-inline-block" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+              <title>ic_fluent_games_24_regular</title>
+              <desc>Created with Sketch.</desc>
+              <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g id="ic_fluent_games_24_regular" fill="white" fill-rule="nonzero">
+                  <path d="M14.9978834,5 C18.8638767,5 21.9978834,8.13400675 21.9978834,12 C21.9978834,15.7854517 18.9931001,18.8690987 15.2385332,18.995941 L14.9978834,19 L9.00211656,19 C5.13612331,19 2.00211656,15.8659932 2.00211656,12 C2.00211656,8.21454828 5.00689994,5.13090132 8.76146681,5.00405902 L9.00211656,5 L14.9978834,5 Z M14.9978834,6.5 L9.00211656,6.5 C5.96455044,6.5 3.50211656,8.96243388 3.50211656,12 C3.50211656,14.9634791 5.84589657,17.3795391 8.78090942,17.4956328 L9.00211656,17.5 L14.9978834,17.5 C18.0354496,17.5 20.4978834,15.0375661 20.4978834,12 C20.4978834,9.03652085 18.1541034,6.62046086 15.2190906,6.5043672 L14.9978834,6.5 Z M8,9 C8.41421356,9 8.75,9.33578644 8.75,9.75 L8.74911656,11.248 L10.25,11.2487458 C10.6642136,11.2487458 11,11.5845322 11,11.9987458 C11,12.4129593 10.6642136,12.7487458 10.25,12.7487458 L8.74911656,12.748 L8.75,14.25 C8.75,14.6642136 8.41421356,15 8,15 C7.58578644,15 7.25,14.6642136 7.25,14.25 L7.24911656,12.748 L5.75,12.7487458 C5.33578644,12.7487458 5,12.4129593 5,11.9987458 C5,11.5845322 5.33578644,11.2487458 5.75,11.2487458 L7.24911656,11.248 L7.25,9.75 C7.25,9.33578644 7.58578644,9 8,9 Z M14.75,12.5 C15.4403559,12.5 16,13.0596441 16,13.75 C16,14.4403559 15.4403559,15 14.75,15 C14.0596441,15 13.5,14.4403559 13.5,13.75 C13.5,13.0596441 14.0596441,12.5 14.75,12.5 Z M16.75,9 C17.4403559,9 18,9.55964406 18,10.25 C18,10.9403559 17.4403559,11.5 16.75,11.5 C16.0596441,11.5 15.5,10.9403559 15.5,10.25 C15.5,9.55964406 16.0596441,9 16.75,9 Z" id="🎨-Color">
+
+                  </path>
+                </g>
+              </g>
+            </svg>
+            <span class="tw-text-lg tw-text-center">Games control</span>
+          </a>
         </div>
       </div>
     </div>

diff --git a/components/dashboard/Games.vue b/components/dashboard/Games.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="tw-min-h-screen tw-ml-5">
+    rtr
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/pages/user/dashboard.vue b/pages/user/dashboard.vue
@@ -1,61 +1,80 @@
-<script lang="ts">
+<script setup lang="ts">
 import {useAuthStore} from "~/stores/auth";
 import SideNav from "~/components/base/SideNav.vue";
 import {$fetch} from "ofetch";
 import Projects from "~/components/dashboard/Projects.vue";
-export default {
-  components: {SideNav, Projects},
-  async setup() {
-    definePageMeta({
-      middleware: [
-        "auth"
-      ]
-    })
-    const user = ref({});
-    const store = useAuthStore();
-    onMounted(async () => {
+
+definePageMeta({
+  middleware: [
+    "auth"
+  ]
+})
+
+const store = useAuthStore();
+const state = ref(0);
+
+const {data: user} = await useAsyncData(
+    'user',
+    () => {
       try {
-        user.value = await $fetch('http://127.0.0.1:3890/v1/account/identity', {
+        return $fetch('http://127.0.0.1:3890/v1/account/identity', {
           headers: {
             Authorization: `Bearer ${store.token}`
           }
-        })
+        });
       } catch (error) {
         if (error.response && error.response.status === 401) {
           store.logout()
-          return navigateTo('/')
+          navigateTo('/')
         } else {
           console.error(error);
         }
       }
-    })
-    return {store, user}
-  },
-  data() {
-    return {
-      state: 0
     }
-  },
-  methods: {
-    changeState(e) {
-      switch (e) {
-        case 0:
-          this.state = 0;
-          break;
-        case 1:
-          this.state = 1;
-          break;
 
-      }
-    },
+
+)
+
+function changeState(e) {
+  switch (e) {
+    case 0:
+      state.value = 0;
+      break;
+    case 1:
+      state.value = 1;
+      break;
+
   }
 }
 </script>
 
 <template>
   <div class="tw-flex tw-flex-row tw-min-h-screen">
     <SideNav :account="user" @state="changeState" />
+    <div v-if="state == 0" class="tw-w-screen tw-flex tw-flex-row tw-justify-around tw-items-center mb-16">
+      <div class="tw-w-60 tw-h-60 tw-bg-gray-700 tw-flex tw-rounded-lg tw-items-center tw-justify-center">
+        <div class="tw-justify-self-center tw-text-center">
+          <div class="tw-text-xl tw-text-white">
+            {{user.projects.length}}
+          </div>
+          <div class="tw-text-xl tw-text-white">
+            PROJECTS
+          </div>
+        </div>
+      </div>
+      <div class="tw-w-60 tw-h-60 tw-bg-gray-700 tw-flex tw-rounded-lg tw-items-center tw-justify-center">
+        <div class="tw-justify-self-center tw-text-center">
+          <div class="tw-text-xl tw-text-white">
+            {{user.projects.reduce((total, obj) => total + obj.downloads, 0)}}
+          </div>
+          <div class="tw-text-xl tw-text-white">
+            DOWNLOADS
+          </div>
+        </div>
+      </div>
+    </div>
     <Projects v-if="state == 1" />
+    <Games v-if="user.moderation_level >= 1 && state == 3"/>
   </div>
 </template>