Update 0.2.0

README.md

@@ -1,2 +1,4 @@
 # P2P-Transfer
+
 A P2P File Transfer Web App
+

build.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+rm -rf ./build
+mkdir ./build
+
+cd ./frontend
+pnpm install
+pnpm generate
+cp -r ./dist ../build/www
+cd ..
+
+cd ./backend
+pnpm install
+pnpm build
+cp ./dist/server.min.mjs ./package.json ../build
+cd ..
+

frontend/README.md

@@ -1,6 +1,6 @@
-# Nuxt 3 Minimal Starter
+# Frontend
 
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+Frontend for P2P Transfer
 
 ## Setup
 
@@ -59,5 +59,3 @@ pnpm run preview
 # yarn
 yarn preview
 ```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

frontend/app.vue

@@ -8,20 +8,12 @@ async function onBeforeEnter(): Promise<void> {
 
 <template>
  <NuxtLayout>
- <ClientOnly>
- <notifications position="top center"/>
- </ClientOnly>
- <div
- class="bg-gray-50 fixed flex flex-col gap-12 inset-0 items-center justify-center">
- <AppHeader/>
- <NuxtPage
- :transition="{
- name: 'page',
- mode: 'out-in',
- onBeforeEnter
- }"/>
- </div>
- <AppFooter/>
+ <NuxtPage
+ :transition="{
+ name: 'page',
+ mode: 'out-in',
+ onBeforeEnter
+ }"/>
  </NuxtLayout>
 </template>
 

frontend/components/DLModeSelector.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+/* Properties */
+defineProps<{
+ input: boolean;
+}>();
+
+/* Emits */
+defineEmits<{
+ 'update:input': [value: boolean]
+}>();
+</script>
+
+<template>
+ <div class="flex flex-col items-center overflow-hidden rounded-lg">
+ <div class="flex font-bold items-center w-full">
+ <button
+ @click="$emit('update:input', true)"
+ class="py-2 w-1/2"
+ :class="input ? 'bg-green-300' : 'bg-gray-200'">
+ {{ $t('button.blob_mode') }}
+ </button>
+ <button
+ @click="$emit('update:input', false)"
+ class="py-2 w-1/2"
+ :class="input ? 'bg-gray-200' : 'bg-green-300'">
+ {{ $t('button.stream_mode') }}
+ </button>
+ </div>
+ <div class="bg-green-300 px-4 py-4 w-80">
+ {{ $t(input ? 'ui.blob_mode' : 'ui.stream_mode') }}
+ </div>
+ </div>
+</template>

frontend/components/FileSelector.vue

@@ -2,7 +2,6 @@
 /* Properties */
 defineProps<{
  id: string;
- disabled: boolean;
 }>();
 
 /* Emits */
@@ -14,13 +13,11 @@ defineEmits<{
 <template>
  <label
  class="bg-white border-2 cursor-pointer font-bold px-4 rounded-3xl select-none transition-colors hover:text-white"
- :class="disabled ? '!bg-white !cursor-not-allowed !opacity-50 !text-black' : ''"
  :for="id">
  <slot></slot>
  <input
  @change="$emit('select', $event)"
  class="hidden"
- :disabled="disabled"
  :id="id"
  multiple="false"
  type="file"/>

frontend/components/LangSwitch.vue

@@ -18,12 +18,10 @@ const availableLocales = computed(() => {
 <template>
  <div class="flex font-smiley items-center justify-center">
  <NuxtLink
- v-for="locale in availableLocales"
- :key="locale.code"
- :to="switchLocalePath(locale.code)">
- <span class="transition-colors hover:text-blue-500">
- {{ locale.name }}
- </span>
+ v-for="i in availableLocales"
+ class="transition-colors hover:text-blue-500"
+ :to="switchLocalePath(i.code)">
+ {{ i.name }}
  </NuxtLink>
  </div>
 </template>

frontend/components/ProgressBar.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+/* Properties */
+defineProps<{
+ progress: number;
+ color?: string;
+}>();
+</script>
+
+<template>
+ <div class="border-2 border-gray-400 h-5 overflow-hidden relative rounded-xl">
+ <div
+ class="h-full text-base"
+ :class="color"
+ :style="{ width: `${progress}%` }">
+ </div>
+ <div
+ class="absolute flex inset-0 items-center justify-center text-sm">
+ {{ progress.toFixed(1) }}%
+ </div>
+ </div>
+</template>