mirror of
https://github.com/maciejpedzich/racemash.git
synced 2024-11-10 00:53:03 +01:00
Add mock script for displaying two random photos
This commit is contained in:
parent
1aebcca6b3
commit
2bbd0960ef
@ -1,4 +1,4 @@
|
|||||||
import { Account, Client, Databases } from 'appwrite';
|
import { Account, Avatars, Client, Databases, Storage } from 'appwrite';
|
||||||
|
|
||||||
const appwriteClient = new Client();
|
const appwriteClient = new Client();
|
||||||
|
|
||||||
@ -7,4 +7,6 @@ appwriteClient
|
|||||||
.setProject(import.meta.env.VITE_APPWRITE_PROJECT_ID);
|
.setProject(import.meta.env.VITE_APPWRITE_PROJECT_ID);
|
||||||
|
|
||||||
export const account = new Account(appwriteClient);
|
export const account = new Account(appwriteClient);
|
||||||
|
export const avatars = new Avatars(appwriteClient);
|
||||||
export const databases = new Databases(appwriteClient);
|
export const databases = new Databases(appwriteClient);
|
||||||
|
export const storage = new Storage(appwriteClient);
|
||||||
|
@ -1,3 +1,69 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { storage } from '@/appwrite';
|
||||||
|
|
||||||
|
const isLoading = ref(true);
|
||||||
|
const testImages = ref<string[]>([]);
|
||||||
|
|
||||||
|
function randomNum(min: number, max: number) {
|
||||||
|
min = Math.ceil(min);
|
||||||
|
max = Math.floor(max);
|
||||||
|
return Math.floor(Math.random() * (max - min + 1) + min); // The maximum is inclusive and the minimum is inclusive
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
try {
|
||||||
|
const { files } = await storage.listFiles('photos');
|
||||||
|
const urls = files.map(
|
||||||
|
({ $id }) => storage.getFileView('photos', $id).href
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log(urls.join('\n\n'));
|
||||||
|
|
||||||
|
for (let i = 0; i < 2; i++) {
|
||||||
|
const randomUrlIndex = randomNum(0, urls.length - 1);
|
||||||
|
testImages.value.push(urls[randomUrlIndex]);
|
||||||
|
urls.splice(randomUrlIndex, 1);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<h1>Vote</h1>
|
<section class="w-100 h-100 d-flex flex-column justify-center align-center">
|
||||||
|
<div class="text-center">
|
||||||
|
<h1 class="mt-4 mb-2 text-h3">Vote</h1>
|
||||||
|
<p class="px-4 text-h6 font-weight-regular">
|
||||||
|
Which photo do you like more? Click one of three buttons below to
|
||||||
|
choose.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="py-lg-6 py-3 d-flex flex-lg-row flex-lg-row flex-column align-center"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="(imgUrl, index) in testImages"
|
||||||
|
:key="imgUrl"
|
||||||
|
class="d-flex flex-column align-center px-5 py-4"
|
||||||
|
>
|
||||||
|
<v-img :src="imgUrl" max-width="480" :aspect-ratio="16 / 9" />
|
||||||
|
<p class="mt-2 text-h6">Photo {{ index + 1 }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="vote-btns" class="mb-4 d-flex justify-center flex-wrap">
|
||||||
|
<v-btn size="large">Photo 1</v-btn>
|
||||||
|
<v-btn size="large">Photo 2</v-btn>
|
||||||
|
<v-btn size="large">I can't decide</v-btn>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#vote-btns {
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user