From b720142911905137fe87d61d0dc11417dc02285a Mon Sep 17 00:00:00 2001
From: TudvasevMatvey <tudvasev.matvey@gmail.com>
Date: Thu, 1 Jun 2023 23:24:57 +0300
Subject: [PATCH] Some ui fixes

---
 components/base/SideNav.vue    | 96 ++++++++++++++++++++--------------
 components/dashboard/Games.vue | 13 +++++
 pages/user/dashboard.vue       | 85 ++++++++++++++++++------------
 3 files changed, 121 insertions(+), 73 deletions(-)
 create mode 100644 components/dashboard/Games.vue

diff --git a/components/base/SideNav.vue b/components/base/SideNav.vue
index ab1ff08..19e0e53 100644
--- 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
new file mode 100644
index 0000000..b5543d2
--- /dev/null
+++ 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
index 6e3b3d9..8eaef40 100644
--- a/pages/user/dashboard.vue
+++ b/pages/user/dashboard.vue
@@ -1,53 +1,49 @@
-<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>
@@ -55,7 +51,30 @@ export default {
 <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>