69 lines
2.4 KiB
Vue
69 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import axios from 'axios'
|
|
import exampleFilenames from '../../constants/filenames.ts'
|
|
import formatDictionaryAsString from '../../utils/formatting.ts'
|
|
|
|
const filename = ref('')
|
|
const code = ref(`{
|
|
result: 'Fill the input with the filename and click Guess'
|
|
}`)
|
|
|
|
const url = `${import.meta.env.VITE_HOST_URL}`
|
|
|
|
const setRandomFilename = () => {
|
|
filename.value = exampleFilenames[Math.floor(Math.random() * exampleFilenames.length)];
|
|
getFilenameData()
|
|
}
|
|
|
|
const getFilenameData = () => {
|
|
const data = {
|
|
filename: filename.value
|
|
}
|
|
|
|
axios.get(url, { params: data })
|
|
.then(response => {
|
|
code.value = formatDictionaryAsString(response.data)
|
|
})
|
|
.catch((error) => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-12 flew-grow text-center md:w-[600px] bg-[#2e3440] rounded-lg text-neutral-100 shadow pt-12 pb-6">
|
|
<div class="space-y-12 px-12">
|
|
<div class="flex flex-col items-center justify-center gap-4">
|
|
<h2 class="text-4xl font-semibold">
|
|
guessit
|
|
</h2>
|
|
<p>
|
|
A web app that guesses info about a video file based on its filename.
|
|
</p>
|
|
</div>
|
|
<div class="space-y-4 text-neutral-700">
|
|
<div class="text-sm flex w-full">
|
|
<div class="flex-grow">
|
|
<input v-model="filename" type="text" class="bg-neutral-100 p-3 rounded-l appearance-none focus:outline-none w-full shadow" placeholder="Enter the filename">
|
|
</div>
|
|
<button class="bg-slate-200 px-4 py-3 rounded-r shadow font-semibold hover:bg-slate-300" @click="getFilenameData">
|
|
Guess
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-wrap justify-center text-sm gap-4">
|
|
<a href="#/">
|
|
<div class="bg-slate-200 rounded shadow px-4 py-2 font-semibold hover:bg-slate-300" @click="setRandomFilename">
|
|
Try a random filename
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-left text-sm rounded px-4">
|
|
<highlightjs :code="code" ref="codeRef" />
|
|
</div>
|
|
</div>
|
|
</template>
|