Fix Peers Component

floki1250 · Mar 8, 2024 · 20251ea · 20251ea · deno-deploy · Mar 8, 2024
1 parent d335b7c
commit 20251ea
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 560 deletions.
diff --git a/components/Cloud.vue b/components/Cloud.vue
@@ -0,0 +1,36 @@
+<template>
+    <div class="p-4 bg-japonica-500 dark:bg-japonica-700">
+        <h2>
+            <button class="flex items-center justify-between w-full" @click.prevent="accordionOpen = !accordionOpen"
+                :aria-expanded="accordionOpen" aria-controls="accordion-text-01">
+                <div>
+                    <div class="flex">
+                        <h1 class="font-bold text-2xl text-black">CLOUD TRANSFER</h1>
+                    </div>
+                </div>
+                <div>
+                    <UIcon :name="accordionOpen
+                        ? 'i-solar-alt-arrow-down-line-duotone'
+                        : 'i-solar-alt-arrow-right-line-duotone'
+                    " class="w-5 h-5">
+                    </UIcon>
+                </div>
+            </button>
+        </h2>
+        <div id="accordion-text-01" role="region" aria-labelledby="accordion-title-01"
+            class="grid text-sm text-white overflow-hidden transition-all duration-300 ease-in-out"
+            :class="accordionOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'">
+            <div class="overflow-hidden">
+                <br />
+                <UButtonGroup size="md" orientation="horizontal" class="w-full">
+                    <UInput type="file" class="w-full" />
+                    <UButton icon="i-solar-upload-bold" color="white" variant="solid" />
+                </UButtonGroup>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const accordionOpen = ref(false);
+</script>
diff --git a/components/Accordion.vue → components/Peers.vue b/components/Accordion.vue → components/Peers.vue
@@ -1,14 +1,15 @@
 <template>
-    <div class="p-4 bg-quarter-spanish-white-50 dark:bg-quarter-spanish-white-700">
+    <div class="p-4 bg-quarter-spanish-white-50 dark:bg-quarter-spanish-white-200">
         <h2>
             <button class="flex items-center justify-between w-full" @click.prevent="accordionOpen = !accordionOpen"
                 :aria-expanded="accordionOpen" aria-controls="accordion-text-01">
                 <div>
                     <div class="flex">
                         <h1 class="font-bold text-2xl text-black">
-                            AVAILABLE DEVICES
+                            AVAILABLE PEERS
+
                             <UButton size="md" color="primary" variant="link" icon="i-solar-refresh-linear"
-                                @click="refresh" />
+                                :loading="loading" />
                         </h1>
                     </div>
                 </div>
@@ -25,15 +26,18 @@
             class="grid text-sm text-slate-600 overflow-hidden transition-all duration-300 ease-in-out"
             :class="accordionOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'">
             <div class="overflow-hidden rounded-lg">
-                <div class="grid grid-cols-5 gap-4 w-full" v-if="data.length > 1">
+                <div class="grid grid-cols-5 gap-4 w-full" v-if="data">
                     <div v-for="i in data" :key="i" class="flex justify-left p-2">
-                        <UButton color="primary" variant="soft" :ui="{ rounded: 'rounded-full' }">
-                            <UAvatar :src="getUniqueAvatarUrl(i)" size="xl" alt="avatar" />
-                        </UButton>
+                        <div class="text-center">
+                            <UButton color="primary" variant="soft" :ui="{ rounded: 'rounded-full' }">
+                                <UAvatar :src="getUniqueAvatarUrl(i)" size="xl" alt="avatar" />
+                            </UButton>
+                            <span class="text-md font-bold">{{ i }}</span>
+                        </div>
                     </div>
                 </div>
                 <div v-else class="flex jusitfy-center flex-col w-full p-4">
-                    <UIcon name="i-solar-devices-bold-duotone" class="w-20 h-20"></UIcon>
+                    <UIcon name="i-solar-devices-bold-duotone" class="w-20<!-- h-20"></UIcon>
                     <p class="font-bold">Device Not Found</p>
                 </div>
             </div>
@@ -43,7 +47,11 @@
 
 <script setup>
 const accordionOpen = ref(false);
-const { data, error, refresh } = await useFetch("http://localhost:9000/peerjs/peers");
+defineProps({
+    data: Array,
+    loading: Boolean,
+});
+
 const getUniqueAvatarUrl = (index) => {
     return `https://api.dicebear.com/7.x/thumbs/svg?seed=${index}`;
 };

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -11,5 +11,5 @@ export default defineNuxtConfig({
   },
 
   ssr: false,
-  modules: ["@nuxt/ui", "@nuxtjs/color-mode"],
+  modules: ["@nuxt/ui", "@nuxtjs/color-mode", "@vueuse/nuxt"],
 });
diff --git a/package.json b/package.json
@@ -17,8 +17,10 @@
   "dependencies": {
     "@iconify-json/solar": "^1.1.9",
     "@nuxtjs/color-mode": "^3.3.2",
+    "@vueuse/nuxt": "^10.9.0",
     "peer": "^1.0.2",
     "peerjs": "^1.5.2",
-    "peerjs-server": "^0.2.9"
+    "peerjs-server": "^0.2.9",
+    "unique-names-generator": "^4.7.1"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
@@ -15,46 +15,51 @@
       <div class="w-full min-h-12 bg-[#f2cc8f] text-black p-4 flex justify-between">
         <div>
           <h1 class="font-bold text-2xl">RECEIVING</h1>
-          <p class="text-sm">Your device will shown as <b>X</b></p>
+          <p class="text-sm">
+            Your device will shown as <b>{{ characterName }}</b>
+          </p>
         </div>
         <div>
           <UToggle size="md" :model-value="true" />
         </div>
       </div>
-      <div class="divide-y divide-slate-200">
-        <Accordion />
+      <div>
+        <Peers :data="data" :loading="pending" />
+        <Cloud />
       </div>
     </main>
   </div>
 </template>
 
 <script setup>
+import Peer from "peerjs";
+import { uniqueNamesGenerator, starWars, adjectives } from "unique-names-generator";
+const characterName = uniqueNamesGenerator({
+  dictionaries: [adjectives, starWars],
+}).replace(/\s/g, "");
+const { data, pending, refresh } = await useFetch("http://localhost:9000/peerjs/peers", {
+  transform (data) {
+    return data.filter((el) => el !== characterName);
+  },
+});
+useIntervalFn(() => {
+  console.log("Refreshing...");
+  refresh();
+}, 10000);
 
+let myPeer = null;
 
+// Connect to the PeerJS Server using the configured URL
+const serverUrl = process.env.PEERJS_SERVER_URL || "localhost:9000";
+const options = {
+  host: serverUrl.split(":")[0],
+  port: serverUrl.split(":")[1],
+  path: "/",
+};
+myPeer = new Peer(characterName, options); // Connect to server
 const colorMode = useColorMode();
 
 function switchColorMode () {
   colorMode.value = colorMode.value === "dark" ? "light" : "dark";
 }
-
-const items = [
-  {
-    label: "Theming",
-    icon: "i-heroicons-eye-dropper",
-    slot: "theming",
-    color: "bg-bay-leaf-300",
-  },
-  {
-    label: "Getting Started",
-    icon: "i-heroicons-information-circle",
-    slot: "getting-started",
-    color: "bg-japonica-500",
-  },
-  {
-    label: "Installation",
-    icon: "i-heroicons-arrow-down-tray",
-    slot: "installation",
-    color: "bg-quarter-spanish-white-50",
-  },
-];
 </script>