Connect gallery to api.

dnj · Apr 14, 2024 · fcdb0d8 · fcdb0d8
1 parent 25e27b9
commit fcdb0d8
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 17 deletions.
diff --git a/components/Images.vue b/components/Images.vue
@@ -0,0 +1,52 @@
+<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-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';
+
+interface IImage {
+    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 };
+    },
+    props:{
+        count: {
+            type: String,
+            required: true
+        }
+    },
+    created(){
+        this.sendImageNum();
+    },
+    methods:{
+        sendImageNum(){
+            this.$emit("imagesNum", this.images ? this.images.length : 0)
+        }
+    }
+})
+</script>
diff --git a/locales/en.json b/locales/en.json
@@ -44,5 +44,6 @@
     "contact.content": "If you have any questions or comments, you can contact [email protected]. We will answer you within one working day.",
     "contact.subtitle": "Ways of communication",
     "contact.ways.email": "Email:",
-    "contact.ways.phone": "Phone:"
+    "contact.ways.phone": "Phone:",
+    "fetch-data.error.server": "Server error"
 }
diff --git a/locales/fa.json b/locales/fa.json
@@ -38,11 +38,12 @@
     "documents.options.table.content.description.viewportHeight": "تصویر صفحه وب سایت در ارتفاع مشخص شده ذخیره خواهد شد (حداقل: 320 و حداکثر: 4096)",
     "gallery.title": "گالری تصاویر",
     "gallery.content.part1": "نگاهی به تصاویر وب شات از",
-    "gallery.content.part2": "وبسایت های برتر. ",
+    "gallery.content.part2": "وبسایت برتر. ",
     "gallery.content.part3": "رابط برنامه نویسی ما تصاویری با کیفیت بالا را دریافت می کند و آنها را بر روی یک زیر ساخت شبکه نگهداری می کند تا در سریع ترین زمان آنها را تحویل دهد.",
     "contact.title": "تماس با ما",
     "contact.content": "اگر سوال و یا نظری دارید میتوانید با ایمیل [email protected] در ارتباط باشد. به فاصله ی یک روز کاری پاسختان را خواهیم داد. ",
     "contact.subtitle": "راه های ارتباطی",
     "contact.ways.email": "ایمیل:",
-    "contact.ways.phone": "تلفن:"
+    "contact.ways.phone": "تلفن:",
+    "fetch-data.error.server": "خطای سرور"
 }
diff --git a/pages/gallery.vue b/pages/gallery.vue
@@ -1,27 +1,35 @@
 <template>
-    <v-container class="mb-15">
-        <div class="gallery">
-            <div class="gallery-title">{{ $t("gallery.title") }}</div>
-            <div class="gallery-content">
-                {{ $t("gallery.content.part1") +" "+ numberOfImages +" "+ $t("gallery.content.part2") +
-                    $t("gallery.content.part3")}}
-            </div>
+    <v-container class="gallery mb-15">
+        <div class="gallery-title">{{ $t("gallery.title") }}</div>
+        <div class="gallery-content">
+            {{ $t("gallery.content.part1") + " " + numberOfImages + " " + $t("gallery.content.part2") +
+            $t("gallery.content.part3") }}
         </div>
+        <Images @imagesNum="setImagesNum" :count="'120'" />
     </v-container>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useI18n } from '#imports'
+import Images from '~/components/Images.vue';
 export default defineComponent({
-    setup() {
+    
+    components:{
+        Images,
+    },
+    async setup() {
         const { t } = useI18n()
         useHead({
             title: t("pages.index") + " | " + t("pages.gallery")
-        })
+        });
     },
     data() {
         return {
-            numberOfImages: 0
+            numberOfImages: 0,
+        }
+    },
+    methods:{
+        setImagesNum(numberOfImages:number){
+            this.numberOfImages = numberOfImages;
         }
     }
 })

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="banner text-center py-15">
+	<div class="banner text-center pt-15 pb-5 px-5">
 		<h1>{{ $t("index.banner.title") }}</h1>
 		<div class="text-secondary"><strong>{{ $t("index.banner.subtitle") }}</strong></div>
 		<v-row justify="center" class="mt-5">
@@ -12,6 +12,7 @@
 				</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>
 	</div>
 	<v-container class="mb-15">
@@ -36,9 +37,11 @@
 </template>
 <script lang="ts">
 import { useI18n } from '#imports'
-
+import Images from '~/components/Images.vue'
 export default defineComponent({
-	
+	components:{
+		Images
+	},
 	setup(){
 		const { t } = useI18n()
 		useHead({