mirror of
https://github.com/theoleuthardt/werkzeugkiste.git
synced 2026-06-13 09:37:53 +00:00
feat: new dropdown menu for output file format selection + dynamic rendering of the information table
This commit is contained in:
theoleuthardt
parent
43abb6d5fd
commit
f149472975
3 changed files with 193 additions and 144 deletions
|
|
@ -1,5 +1,4 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import Navbar from "../../components/Navbar";
|
import Navbar from "../../components/Navbar";
|
||||||
import Footer from "../../components/Footer";
|
import Footer from "../../components/Footer";
|
||||||
|
|
@ -7,17 +6,41 @@ import Button from "../../components/Button";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { ChevronDown, ChevronUp } from "lucide-react";
|
import { ChevronDown, ChevronUp } from "lucide-react";
|
||||||
import Dropdown from "@/components/Dropdown";
|
import Dropdown from "@/components/Dropdown";
|
||||||
|
import { FileFormatsTable, outputFileFormats } from "@/constants";
|
||||||
|
|
||||||
export default function DocConverter() {
|
export default function DocConverter() {
|
||||||
const [file, setFile] = useState<File | null>(null);
|
const [file, setFile] = useState<File | null>(null);
|
||||||
const [downloadUrl, setDownloadUrl] = useState<string>("");
|
const [downloadUrl, setDownloadUrl] = useState<string>("");
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [tableOpen, setTableOpen] = useState(false);
|
const [tableOpen, setTableOpen] = useState(false);
|
||||||
|
const [filteredOptions, setFilteredOptions] = useState<string[]>([]);
|
||||||
|
const [selectedOutputFormat, setSelectedOutputFormat] = useState<string | "">(
|
||||||
|
"",
|
||||||
|
);
|
||||||
|
|
||||||
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
if (event.target.files && event.target.files.length > 0) {
|
if (event.target.files && event.target.files.length > 0) {
|
||||||
setFile(event.target.files[0]);
|
const selectedFile = event.target.files[0];
|
||||||
|
const fileExtension = selectedFile.name.split(".").pop()?.toLowerCase();
|
||||||
|
|
||||||
|
const isSupported = outputFileFormats.some((format) =>
|
||||||
|
format.input.toLowerCase().includes(fileExtension || ""),
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!isSupported) {
|
||||||
|
console.error("Not supported file uploaded!");
|
||||||
|
alert("File format not supported!");
|
||||||
|
event.target.value = "";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setFile(selectedFile);
|
||||||
setDownloadUrl("");
|
setDownloadUrl("");
|
||||||
|
|
||||||
|
const matchedFormat = outputFileFormats.find((format) =>
|
||||||
|
format.input.toLowerCase().includes(fileExtension || ""),
|
||||||
|
);
|
||||||
|
setFilteredOptions(matchedFormat ? matchedFormat.output : []);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -29,6 +52,7 @@ export default function DocConverter() {
|
||||||
|
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append("file", file);
|
formData.append("file", file);
|
||||||
|
formData.append("outputFormat", selectedOutputFormat);
|
||||||
|
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
|
||||||
|
|
@ -46,7 +70,9 @@ export default function DocConverter() {
|
||||||
}
|
}
|
||||||
|
|
||||||
const blob = await response.blob();
|
const blob = await response.blob();
|
||||||
|
console.log("Blob:", blob);
|
||||||
const url = window.URL.createObjectURL(blob);
|
const url = window.URL.createObjectURL(blob);
|
||||||
|
console.log("Download URL:", url);
|
||||||
setDownloadUrl(url);
|
setDownloadUrl(url);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error while converting:", error);
|
console.error("Error while converting:", error);
|
||||||
|
|
@ -61,15 +87,26 @@ export default function DocConverter() {
|
||||||
<Navbar renderHomeLink={true} />
|
<Navbar renderHomeLink={true} />
|
||||||
<div className="w-screen h-auto min-h-[calc(100vh-80px-60px)] flex flex-1 flex-col items-center justify-center">
|
<div className="w-screen h-auto min-h-[calc(100vh-80px-60px)] flex flex-1 flex-col items-center justify-center">
|
||||||
<h2 className="text-5xl font-bold text-white mb-16">doc-converter</h2>
|
<h2 className="text-5xl font-bold text-white mb-16">doc-converter</h2>
|
||||||
<div className="h-36 flex flex-row items-center justify-center gap-20">
|
<div className="h-36 flex flex-row items-center justify-center gap-4">
|
||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
className="h-14 border-2 border-white p-3 rounded-xl text-center text-white"
|
className="h-16 border-2 border-white p-3 rounded-xl text-2xl text-center text-white"
|
||||||
id="documentUpload"
|
id="documentUpload"
|
||||||
onChange={handleFileChange}
|
onChange={handleFileChange}
|
||||||
/>
|
/>
|
||||||
{/* TODO: Fix Dropdown menu placement */}
|
<Dropdown
|
||||||
<Dropdown content="output format" className="h-14" />
|
content={
|
||||||
|
file
|
||||||
|
? `Convert to: ${selectedOutputFormat}`
|
||||||
|
: "output file format"
|
||||||
|
}
|
||||||
|
options={filteredOptions.length > 0 ? filteredOptions : [""]}
|
||||||
|
onClick={(event) => {
|
||||||
|
const selectedFormat =
|
||||||
|
event.currentTarget.textContent?.trim() || "";
|
||||||
|
setSelectedOutputFormat(selectedFormat);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={"flex flex-row items-center gap-4 mt-4 mb-16"}>
|
<div className={"flex flex-row items-center gap-4 mt-4 mb-16"}>
|
||||||
{downloadUrl ? (
|
{downloadUrl ? (
|
||||||
|
|
@ -121,108 +158,16 @@ export default function DocConverter() {
|
||||||
>
|
>
|
||||||
<table className="w-full h-auto text-left border-collapse border-white">
|
<table className="w-full h-auto text-left border-collapse border-white">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr className="border-b">
|
{FileFormatsTable.map((format) => (
|
||||||
<td className="min-w-96 px-6 py-4 border-r">
|
<tr key={format.input} className="border-b">
|
||||||
.doc (MS Word)
|
<td className="min-w-96 px-6 py-4 border-r">
|
||||||
</td>
|
{format.input}
|
||||||
<td className="min-w-96 px-6 py-4">
|
</td>
|
||||||
.pdf, .docx, .odt, .txt, .rtf, .html, .epub
|
<td className="min-w-96 px-6 py-4">
|
||||||
</td>
|
{format.output.join(", ")}
|
||||||
</tr>
|
</td>
|
||||||
<tr className="border-b">
|
</tr>
|
||||||
<td className="min-w-96 px-6 py-4 border-r">
|
))}
|
||||||
.docx (MS Word)
|
|
||||||
</td>
|
|
||||||
<td className="min-w-96 px-6 py-4">
|
|
||||||
.pdf, .odt, .txt, .rtf, .html, .epub
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr className="border-b">
|
|
||||||
<td className="min-w-96 px-6 py-4 border-r">
|
|
||||||
.odt (OpenDocument Text)
|
|
||||||
</td>
|
|
||||||
<td className="min-w-96 px-6 py-4">
|
|
||||||
.pdf, .doc, .docx, .txt, .rtf, .html, .epub
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr className="border-b">
|
|
||||||
<td className="min-w-96 px-6 py-4 border-r">
|
|
||||||
.rtf (Rich Text Format)
|
|
||||||
</td>
|
|
||||||
<td className="min-w-96 px-6 py-4">
|
|
||||||
.pdf, .doc, .docx, .odt, .txt, .html
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr className="border-b">
|
|
||||||
<td className="min-w-96 px-6 py-4 border-r">.txt (Text)</td>
|
|
||||||
<td className="min-w-96 px-6 py-4">
|
|
||||||
.pdf, .doc, .docx, .odt, .txt, .html
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr className="border-b">
|
|
||||||
<td className="min-w-96 px-6 py-4 border-r">
|
|
||||||
.html (Webseite)
|
|
||||||
</td>
|
|
||||||
<td className="min-w-96 px-6 py-4">
|
|
||||||
.pdf, .doc, .docx, .odt, .rtf, .txt
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr className="border-b">
|
|
||||||
<td className="min-w-96 px-6 py-4 border-r">
|
|
||||||
.epub (E-Book)
|
|
||||||
</td>
|
|
||||||
<td className="min-w-96 px-6 py-4">
|
|
||||||
.pdf, .doc, .docx, .odt, .rtf, .txt
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr className="border-b">
|
|
||||||
<td className="min-w-96 px-6 py-4 border-r">
|
|
||||||
.xls (MS Excel)
|
|
||||||
</td>
|
|
||||||
<td className="min-w-96 px-6 py-4">
|
|
||||||
.pdf, .xlsx, .ods, .csv
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr className="border-b">
|
|
||||||
<td className="min-w-96 px-6 py-4 border-r">
|
|
||||||
.xlsx (MS Excel)
|
|
||||||
</td>
|
|
||||||
<td className="min-w-96 px-6 py-4">.pdf, .xls, .ods, .csv</td>
|
|
||||||
</tr>
|
|
||||||
<tr className="border-b">
|
|
||||||
<td className="min-w-96 px-6 py-4 border-r">
|
|
||||||
.ods (OpenDocument Spreadsheet)
|
|
||||||
</td>
|
|
||||||
<td className="min-w-96 px-6 py-4">
|
|
||||||
.pdf, .xls, .xlsx, .csv
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr className="border-b">
|
|
||||||
<td className="min-w-96 px-6 py-4 border-r">
|
|
||||||
.csv (Comma-Separated Values)
|
|
||||||
</td>
|
|
||||||
<td className="min-w-96 px-6 py-4">
|
|
||||||
.pdf, .xls, .xlsx, .ods
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr className="border-b">
|
|
||||||
<td className="min-w-96 px-6 py-4 border-r">
|
|
||||||
.ppt (MS PowerPoint)
|
|
||||||
</td>
|
|
||||||
<td className="min-w-96 px-6 py-4">.pdf, .pptx, .odp</td>
|
|
||||||
</tr>
|
|
||||||
<tr className="border-b">
|
|
||||||
<td className="min-w-96 px-6 py-4 border-r">
|
|
||||||
.pptx (MS PowerPoint)
|
|
||||||
</td>
|
|
||||||
<td className="min-w-96 px-6 py-4">.pdf, .ppt, .odp</td>
|
|
||||||
</tr>
|
|
||||||
<tr className="pb-10">
|
|
||||||
<td className="min-w-96 px-6 py-4 border-r">
|
|
||||||
.odp (OpenDocument Presentation)
|
|
||||||
</td>
|
|
||||||
<td className="min-w-96 px-6 py-4">.pdf, .ppt, .pptx</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,11 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
// TODO: Adjust the width of the option list to match the width of the button
|
|
||||||
// TODO: Dynamic rendering of options
|
|
||||||
|
|
||||||
interface DropdownProps {
|
interface DropdownProps {
|
||||||
content: string;
|
content: string;
|
||||||
|
options: string[];
|
||||||
className?: string;
|
className?: string;
|
||||||
|
onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Dropdown = (props: DropdownProps) => {
|
const Dropdown = (props: DropdownProps) => {
|
||||||
|
|
@ -17,16 +16,17 @@ const Dropdown = (props: DropdownProps) => {
|
||||||
setIsOpen(!isOpen);
|
setIsOpen(!isOpen);
|
||||||
};
|
};
|
||||||
|
|
||||||
const closeDropdown = () => {
|
const closeDropdown = (event: React.MouseEvent<HTMLAnchorElement>) => {
|
||||||
setIsOpen(false);
|
setIsOpen(false);
|
||||||
|
if (props.onClick) props.onClick(event);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`w-full py-6 pb-8 ${props.className}`}>
|
<div className={`w-full ${props.className}`}>
|
||||||
<div className="relative inline-block">
|
<div className="relative">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="px-4 py-2 text-white bg-black rounded-lg text-2xl inline-flex items-center
|
className="h-16 px-4 py-2 text-white bg-black rounded-lg text-2xl inline-flex items-center
|
||||||
border-white border-2 hover:text-blue-400 hover:border-blue-400"
|
border-white border-2 hover:text-blue-400 hover:border-blue-400"
|
||||||
onClick={toggleDropdown}
|
onClick={toggleDropdown}
|
||||||
>
|
>
|
||||||
|
|
@ -48,41 +48,27 @@ const Dropdown = (props: DropdownProps) => {
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<div
|
<div
|
||||||
className={`origin-top-right absolute right-0 mt-1 rounded-lg shadow-lg ring-1 ring-white
|
className={`absolute left-0 mt-2 w-full rounded-lg shadow-lg ring-1 ring-white
|
||||||
ring-opacity-5 border-2 border-white transition-all duration-500 ease-in-out ${isOpen ? "opacity-100" : "opacity-0"}`}
|
ring-opacity-5 border-2 border-white transition-all duration-500 ease-in-out text-center
|
||||||
|
${isOpen ? "opacity-100 scale-100 visible" : "opacity-0 scale-95 invisible"}`}
|
||||||
>
|
>
|
||||||
<ul
|
<ul
|
||||||
role="menu"
|
role="menu"
|
||||||
aria-orientation="vertical"
|
aria-orientation="vertical"
|
||||||
aria-labelledby="options-menu"
|
aria-labelledby="options-menu"
|
||||||
|
className="max-h-[164px] w-full overflow-y-auto"
|
||||||
>
|
>
|
||||||
<li>
|
{props.options?.map((option) => (
|
||||||
<Link
|
<li key={option}>
|
||||||
href="#"
|
<Link
|
||||||
className="block px-4 py-2 rounded-lg hover:text-blue-400 hover:border-2 hover:border-blue-400"
|
href="#"
|
||||||
onClick={closeDropdown}
|
className="block px-4 py-2 rounded-lg hover:text-blue-400 hover:border-2 hover:border-blue-400"
|
||||||
>
|
onClick={closeDropdown}
|
||||||
Option 1
|
>
|
||||||
</Link>
|
{option}
|
||||||
</li>
|
</Link>
|
||||||
<li>
|
</li>
|
||||||
<Link
|
))}
|
||||||
href="#"
|
|
||||||
className="block px-4 py-2 rounded-lg hover:text-blue-400 hover:border-2 hover:border-blue-400"
|
|
||||||
onClick={closeDropdown}
|
|
||||||
>
|
|
||||||
Option 2
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link
|
|
||||||
href="#"
|
|
||||||
className="block px-4 py-2 rounded-lg hover:text-blue-400 hover:border-2 hover:border-blue-400"
|
|
||||||
onClick={closeDropdown}
|
|
||||||
>
|
|
||||||
Option 3
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -36,3 +36,121 @@ export const toolLinks = [
|
||||||
link: "/pomodoro-timer",
|
link: "/pomodoro-timer",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
export const outputFileFormats = [
|
||||||
|
{
|
||||||
|
input: ".doc",
|
||||||
|
output: [".pdf", ".docx", ".odt", ".txt", ".rtf", ".html", ".epub"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".docx",
|
||||||
|
output: [".pdf", ".odt", ".txt", ".rtf", ".html", ".epub"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".odt",
|
||||||
|
output: [".pdf", ".doc", ".docx", ".txt", ".rtf", ".html", ".epub"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".rtf",
|
||||||
|
output: [".pdf", ".doc", ".docx", ".odt", ".txt", ".html"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".txt",
|
||||||
|
output: [".pdf", ".doc", ".docx", ".odt", ".txt", ".html"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".html",
|
||||||
|
output: [".pdf", ".doc", ".docx", ".odt", ".rtf", ".txt"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".epub",
|
||||||
|
output: [".pdf", ".doc", ".docx", ".odt", ".rtf", ".txt"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".xls",
|
||||||
|
output: [".pdf", ".xlsx", ".ods", ".csv"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".xlsx",
|
||||||
|
output: [".pdf", ".xls", ".ods", ".csv"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".ods",
|
||||||
|
output: [".pdf", ".xls", ".xlsx", ".csv"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".csv",
|
||||||
|
output: [".pdf", ".xls", ".xlsx", ".ods"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".ppt",
|
||||||
|
output: [".pdf", ".pptx", ".odp"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".pptx",
|
||||||
|
output: [".pdf", ".ppt", ".odp"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".odp",
|
||||||
|
output: [".pdf", ".ppt", ".pptx"],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const FileFormatsTable = [
|
||||||
|
{
|
||||||
|
input: ".doc (MS Word)",
|
||||||
|
output: [".pdf", ".docx", ".odt", ".txt", ".rtf", ".html", ".epub"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".docx (MS Word)",
|
||||||
|
output: [".pdf", ".odt", ".txt", ".rtf", ".html", ".epub"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".odt (OpenDocument Text)",
|
||||||
|
output: [".pdf", ".doc", ".docx", ".txt", ".rtf", ".html", ".epub"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".rtf (Rich Text Format)",
|
||||||
|
output: [".pdf", ".doc", ".docx", ".odt", ".txt", ".html"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".txt (Text)",
|
||||||
|
output: [".pdf", ".doc", ".docx", ".odt", ".txt", ".html"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".html (Webseite)",
|
||||||
|
output: [".pdf", ".doc", ".docx", ".odt", ".rtf", ".txt"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".epub (E-Book)",
|
||||||
|
output: [".pdf", ".doc", ".docx", ".odt", ".rtf", ".txt"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".xls (MS Excel)",
|
||||||
|
output: [".pdf", ".xlsx", ".ods", ".csv"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".xlsx (MS Excel)",
|
||||||
|
output: [".pdf", ".xls", ".ods", ".csv"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".ods (OpenDocument Spreadsheet)",
|
||||||
|
output: [".pdf", ".xls", ".xlsx", ".csv"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".csv (Comma-Separated Values)",
|
||||||
|
output: [".pdf", ".xls", ".xlsx", ".ods"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".ppt (MS PowerPoint)",
|
||||||
|
output: [".pdf", ".pptx", ".odp"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".pptx (MS PowerPoint)",
|
||||||
|
output: [".pdf", ".ppt", ".odp"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
input: ".odp (OpenDocument Presentation)",
|
||||||
|
output: [".pdf", ".ppt", ".pptx"],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue