Connect home and docs page to api.

dnj · Apr 17, 2024 · ee55cb0 · ee55cb0
1 parent fcdb0d8
commit ee55cb0
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 63 deletions.
diff --git a/components/Images.vue b/components/Images.vue
@@ -1,52 +1,35 @@
 <template>
-    <v-row v-if="images" class="my-2">
-        <v-col class="pa-2" cols="1" v-for="image in images" :key="image.id">
-            <a :href="image.url" target="_blank"><v-img
-                    :src="`https://web-shot.ir/api/gallery/${image.id}?width=200&height=150`"></v-img></a>
+    <v-row v-if="images && !error" class="my-2" justify="center">
+        <v-col class="pa-2" cols="1" v-for="(image, i) in images" :key="i">
+            <a :href="image.url" target="_blank">
+                <v-img v-if="image.id"
+                    :src="getPublickEndPoint(`api/gallery/${image.id}?width=200&height=150`)"></v-img>
+                <v-img v-if="!image.id"
+                    :src="getPublickEndPoint(`capture?url=${image.url}&width=200&height=150`)"></v-img>
+            </a>
         </v-col>
     </v-row>
     <v-progress-circular v-if="pending" indeterminate class="my-5" color="primary" />
     <v-alert class="my-5 text-start" v-if="error" :text="$t('fetch-data.error.server')" type="error" variant="tonal"
         closable></v-alert>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue';
-
+import type { PropType } from 'vue'
+import { getPublickEndPoint } from '~/utilities';
 interface IImage {
-    id: number;
+    id?: number;
     url: string;
 }
-
 export default defineComponent({
-    async setup(app) {
-        let images: IImage[] | undefined;
-        let pending: boolean = true;
-        let error: boolean = false;
-        try {
-            const params = new URLSearchParams({ 'count': app.count });
-            images = await $fetch(`https://web-shot.ir/api/gallery?${params.toString()}`);
-        }
-        catch {
-            error = true;
-        }
-        finally{
-            pending = false;
-        }
-        return { images, error, pending };
+    setup() {
+        return { getPublickEndPoint };
     },
-    props:{
-        count: {
-            type: String,
-            required: true
-        }
+    props: {
+        images: {
+            type: Array as PropType<IImage[]>
+        },
+        pending: Boolean,
+        error: Boolean
     },
-    created(){
-        this.sendImageNum();
-    },
-    methods:{
-        sendImageNum(){
-            this.$emit("imagesNum", this.images ? this.images.length : 0)
-        }
-    }
 })
 </script>
diff --git a/pages/docs.vue b/pages/docs.vue
@@ -4,9 +4,8 @@
             <div class="docs-title">{{ $t("documents.title") }}</div>
             <div class="docs-sub-title">{{ $t("documents.subtitle") }}</div>
             <div class="docs-content">{{ $t("documents.content") }}</div>
-            <v-text-field variant="outlined" class="mt-5" dir="ltr"></v-text-field>
-            <v-btn elevation="0" color="primary">{{ $t("documents.btn") }}</v-btn>
-
+            <v-text-field variant="outlined" class="mt-5" dir="ltr" v-model="url"></v-text-field>
+            <v-btn elevation="0" color="primary" :href="getPublickEndPoint(`capture?url=${url}`)" target="_blank">{{ $t("documents.btn") }}</v-btn>
             <div class="docs-title2">{{ $t("documents.options.title") }}</div>
             <v-data-table :headers="headers" :items="tableData" class="mb-5">
                 <template v-slot:item.required="{ value }">
@@ -20,7 +19,8 @@
 <script lang="ts">
 
 import { defineComponent } from 'vue';
-import { useI18n } from '#imports'
+import { useI18n } from '#imports';
+import { getPublickEndPoint } from '~/utilities';
 
 interface IData {
     option: string,
@@ -35,9 +35,11 @@ export default defineComponent({
         useHead({
             title: t("pages.index") + " | " + t("pages.docs")
         })
+        return { getPublickEndPoint }
     },
     data() {
         return {
+            url: 'https://www.google.com&width=800&crop=600',
             headers: [
                 { title: this.$t("documents.options.table.header.options"), key: 'option' },
                 { title: this.$t("documents.options.table.header.type"), key: 'type' },

diff --git a/pages/gallery.vue b/pages/gallery.vue
@@ -5,33 +5,51 @@
             {{ $t("gallery.content.part1") + " " + numberOfImages + " " + $t("gallery.content.part2") +
             $t("gallery.content.part3") }}
         </div>
-        <Images @imagesNum="setImagesNum" :count="'120'" />
+        <Images :images="images" :pending="pending" :error="error" />
     </v-container>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Images from '~/components/Images.vue';
+import { getPublickEndPoint } from '~/utilities';
+interface IImage {
+    id?: number;
+    url: string;
+}
+
 export default defineComponent({
-    
-    components:{
+
+    components: {
         Images,
     },
     async setup() {
         const { t } = useI18n()
         useHead({
             title: t("pages.index") + " | " + t("pages.gallery")
         });
+
+        let images: IImage[] | undefined;
+        let pending: boolean = true;
+        let error: boolean = false;
+
+        try {
+            const params = new URLSearchParams({ 'count': '120' });
+            images = await $fetch(getPublickEndPoint(`api/gallery?${params.toString()}`));
+        }
+        catch {
+            error = true;
+        }
+        finally {
+            pending = false;
+        }
+        return { images, error, pending, getPublickEndPoint };
+
     },
     data() {
         return {
-            numberOfImages: 0,
+            numberOfImages: this.images ? this.images.length : 0,
         }
     },
-    methods:{
-        setImagesNum(numberOfImages:number){
-            this.numberOfImages = numberOfImages;
-        }
-    }
 })
 </script>
 <style lang="scss">

diff --git a/pages/index.vue b/pages/index.vue
@@ -4,16 +4,24 @@
 		<div class="text-secondary"><strong>{{ $t("index.banner.subtitle") }}</strong></div>
 		<v-row justify="center" class="mt-5">
 			<v-col lg="5" md="8" sm="10" cols="11">
-				<v-text-field variant="outlined" dir="ltr" class="px-0">
+				<v-text-field variant="outlined" dir="ltr" v-model="inputUrl" class="px-0">
 					<template v-slot:append-inner>
-						<v-btn color="primary" height="100%" elevation="0" class="font-weight-bold">{{
+						<v-btn color="primary" height="100%" elevation="0" class="font-weight-bold" @click="onSubmit">{{
 							$t("index.banner.capture") }}</v-btn>
 					</template>
 				</v-text-field>
 			</v-col>
 		</v-row>
-		<Images :count="'120'" />
-		<v-btn to="/docs" class="mt-5" elevation="0" color="primary">{{ $t("index.banner.start") }}</v-btn>
+		<v-row align="center" justify="center">
+			<v-col cols="6">
+				<a :href="url" target="_blank"><img v-if="response"
+						:src="getPublickEndPoint(`capture?url=${url}&width=550&height=350`)"></img></a>
+			</v-col>
+		</v-row>
+
+		<Images :images="images" :pending="pending" :error="error" :key="componentKey" />
+		<v-btn :to="localePath('docs')" class="mt-5" elevation="0" color="primary">{{ $t("index.banner.start")
+			}}</v-btn>
 	</div>
 	<v-container class="mb-15">
 		<div class="home-content text-center">
@@ -31,35 +39,79 @@
 			<div class="code-background" dir="ltr">{{ `<img src="${getCaptureURL({ width: '100', crop: '600' })}">` }}
 			</div>
 			<div class="content">{{ $t("index.options.code-explanation") }}</div>
-			<v-btn variant="text" color="primary">{{ $t("index.options.button") }}</v-btn>
+			<v-btn variant="text" color="primary" :to="localePath('docs')">{{ $t("index.options.button") }}</v-btn>
 		</div>
 	</v-container>
 </template>
 <script lang="ts">
 import { useI18n } from '#imports'
-import Images from '~/components/Images.vue'
+import Images from '~/components/Images.vue';
+import { ref } from 'vue';
+import { getPublickEndPoint } from '~/utilities';
+
+interface IImage {
+	id?: number;
+	url: string;
+}
+
 export default defineComponent({
-	components:{
+	components: {
 		Images
 	},
-	setup(){
+	async setup() {
 		const { t } = useI18n()
 		useHead({
 			title: t("pages.index")
 		})
+		let images: IImage[] | undefined;
+		let pending: boolean = true;
+		let error: boolean = false;
+
+		try {
+			const params = new URLSearchParams({ 'count': '24' });
+			images = await $fetch(getPublickEndPoint(`api/gallery?${params.toString()}`));
+		}
+		catch {
+			error = true;
+		}
+		finally {
+			pending = false;
+		}
+
+		return { images, error, pending, localePath: useLocalePath(), getPublickEndPoint };
 	},
 	data() {
 		return {
-			url: "",
-			title: this.$t("pages.index")
-		 };
+			inputUrl: "https://www.google.com",
+			url: "https://www.google.com",
+			title: this.$t("pages.index"),
+			error: false,
+			pending: true,
+			response: false,
+			componentKey : ref(0)
+		};
 	},
 	methods: {
 		getCaptureURL(query?: Record<string, string>) {
-			const url = this.url || "https://www.google.com/";
+			const url = this.url;
 			const params = (new URLSearchParams(Object.assign({ url: url }, query))).toString().replaceAll("%2F", "/").replaceAll("%3A", ":");
 			const location = useRequestURL();
 			return new URL((location.protocol || "http:") + "//" + location.host + "/capture?" + params);
+		},
+		async onSubmit() {
+			this.response = true;
+			this.url = this.inputUrl;
+			if (this.images){
+				if (this.images[0].url !== this.inputUrl){
+					this.images.unshift({ url: this.inputUrl })
+				}
+			}else{
+				this.images = [{ url: this.inputUrl }]
+			}
+			this.forceRerender();
+		},
+		forceRerender() {
+			this.componentKey += 1;
 		}
 	},
 })
@@ -76,10 +128,9 @@ export default defineComponent({
 		.v-field--appended {
 			padding-inline-end: 0px;
 		}
-
 	}
-
 }
+
 .home-content {
 
 	.title-of-content {

diff --git a/utilities.ts b/utilities.ts
@@ -0,0 +1,3 @@
+export function getPublickEndPoint(endPoint: string): string {
+    return import.meta.env.VITE_SERVER_URL + endPoint;
+}