Elijah/convertor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: disable convert button when input is empty

Browse source 
issue #151
This commit is contained in:
C4illin 2024-10-05 01:20:23 +02:00
parent 5fb8c3575b
commit 78844d7bd5
2 changed files with 59 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

85
src/index.tsx
View file

@ -575,11 +575,13 @@ const app = new Elysia({
class="w-full rounded bg-neutral-800 p-4" class="w-full rounded bg-neutral-800 p-4"
/> />
<div class="select_container relative"> <div class="select_container relative">
<article class={` <article
convert_to_popup absolute z-[2] m-0 hidden h-[30vh] max-h-[50vh] w-full flex-col class={`
overflow-y-auto overflow-x-hidden rounded bg-neutral-800 convert_to_popup absolute z-[2] m-0 hidden h-[30vh] max-h-[50vh] w-full
sm:h-[30vh] flex-col overflow-y-auto overflow-x-hidden rounded bg-neutral-800
`}> sm:h-[30vh]
`}
>
{Object.entries(getAllTargets()).map( {Object.entries(getAllTargets()).map(
([converter, targets]) => ( ([converter, targets]) => (
<article <article
@ -639,7 +641,15 @@ const app = new Elysia({
</select> </select>
</div> </div>
</article> </article>
<input class="btn-primary w-full" type="submit" value="Convert" /> <input
class={`
btn-primary w-full
disabled:cursor-not-allowed disabled:opacity-50
`}
type="submit"
value="Convert"
disabled
/>
</form> </form>
</main> </main>
<script src="script.js" defer /> <script src="script.js" defer />
@ -652,11 +662,13 @@ const app = new Elysia({
({ body }) => { ({ body }) => {
return ( return (
<> <>
<article class={` <article
convert_to_popup absolute z-[2] m-0 hidden h-[50vh] max-h-[50vh] w-full flex-col class={`
overflow-y-auto overflow-x-hidden rounded bg-neutral-800 convert_to_popup absolute z-[2] m-0 hidden h-[50vh] max-h-[50vh] w-full flex-col
sm:h-[30vh] overflow-y-auto overflow-x-hidden rounded bg-neutral-800
`}> sm:h-[30vh]
`}
>
{Object.entries(getPossibleTargets(body.fileType)).map( {Object.entries(getPossibleTargets(body.fileType)).map(
([converter, targets]) => ( ([converter, targets]) => (
<article <article
@ -743,7 +755,6 @@ const app = new Elysia({
await Bun.write(`${userUploadsDir}${file.name}`, file); await Bun.write(`${userUploadsDir}${file.name}`, file);
} }
} else { } else {
await Bun.write(`${userUploadsDir}${body.file["name"]}`, body.file); await Bun.write(`${userUploadsDir}${body.file["name"]}`, body.file);
} }
} }
@ -923,11 +934,13 @@ const app = new Elysia({
<main class="w-full px-4"> <main class="w-full px-4">
<article class="article"> <article class="article">
<h1 class="mb-4 text-xl">Results</h1> <h1 class="mb-4 text-xl">Results</h1>
<table class={` <table
w-full table-auto rounded bg-neutral-900 text-left class={`
[&_td]:p-4 w-full table-auto rounded bg-neutral-900 text-left
[&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800 [&_td]:p-4
`}> [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
`}
>
<thead> <thead>
<tr> <tr>
<th class="px-4 py-2">Time</th> <th class="px-4 py-2">Time</th>
@ -1036,11 +1049,13 @@ const app = new Elysia({
[&[value]::-webkit-progress-value]:transition-[inline-size] [&[value]::-webkit-progress-value]:transition-[inline-size]
`} `}
/> />
<table class={` <table
w-full table-auto rounded bg-neutral-900 text-left class={`
[&_td]:p-4 w-full table-auto rounded bg-neutral-900 text-left
[&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800 [&_td]:p-4
`}> [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
`}
>
<thead> <thead>
<tr> <tr>
<th class="px-4 py-2">Converted File Name</th> <th class="px-4 py-2">Converted File Name</th>
@ -1156,11 +1171,13 @@ const app = new Elysia({
[&[value]::-webkit-progress-value]:transition-[inline-size] [&[value]::-webkit-progress-value]:transition-[inline-size]
`} `}
/> />
<table class={` <table
w-full table-auto rounded bg-neutral-900 text-left class={`
[&_td]:p-4 w-full table-auto rounded bg-neutral-900 text-left
[&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800 [&_td]:p-4
`}> [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
`}
>
<thead> <thead>
<tr> <tr>
<th class="px-4 py-2">Converted File Name</th> <th class="px-4 py-2">Converted File Name</th>
@ -1250,12 +1267,14 @@ const app = new Elysia({
<main class="w-full px-4"> <main class="w-full px-4">
<article class="article"> <article class="article">
<h1 class="mb-4 text-xl">Converters</h1> <h1 class="mb-4 text-xl">Converters</h1>
<table class={` <table
w-full table-auto rounded bg-neutral-900 text-left class={`
[&_td]:p-4 w-full table-auto rounded bg-neutral-900 text-left
[&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800 [&_td]:p-4
[&_ul]:list-inside [&_ul]:list-disc [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
`}> [&_ul]:list-inside [&_ul]:list-disc
`}
>
<thead> <thead>
<tr> <tr>
<th class="mx-4 my-2">Converter</th> <th class="mx-4 my-2">Converter</th>

7
src/public/script.js
View file

@ -22,6 +22,7 @@ const updateSearchBar = () => {
const convertToGroupElements = document.querySelectorAll(".convert_to_group"); const convertToGroupElements = document.querySelectorAll(".convert_to_group");
const convertToGroups = {}; const convertToGroups = {};
const convertToElement = document.querySelector("select[name='convert_to']"); const convertToElement = document.querySelector("select[name='convert_to']");
const convertButton = document.querySelector("input[type='submit']");
const showMatching = (search) => { const showMatching = (search) => {
for (const [targets, groupElement] of Object.values(convertToGroups)) { for (const [targets, groupElement] of Object.values(convertToGroups)) {
@ -57,6 +58,7 @@ const updateSearchBar = () => {
target.onmousedown = () => { target.onmousedown = () => {
convertToElement.value = target.dataset.value; convertToElement.value = target.dataset.value;
convertToInput.value = `${target.dataset.target} using ${target.dataset.converter}`; convertToInput.value = `${target.dataset.target} using ${target.dataset.converter}`;
convertButton.disabled = false;
showMatching(""); showMatching("");
}; };
} }
@ -68,6 +70,11 @@ const updateSearchBar = () => {
showMatching(e.target.value.toLowerCase()); showMatching(e.target.value.toLowerCase());
}); });
convertToInput.addEventListener("search", () => {
// when the user clears the search bar using the 'x' button
convertButton.disabled = true;
});
convertToInput.addEventListener("blur", (e) => { convertToInput.addEventListener("blur", (e) => {
// Keep the popup open even when clicking on a target button // Keep the popup open even when clicking on a target button
// for a split second to allow the click to go through // for a split second to allow the click to go through