Merge pull request #8 from theoleuthardt/rgb-to-hex

feat: rgb-to-hex tool

frontend/src/app/doc-converter/layout.tsx

@@ -1,7 +1,9 @@
+import React from "react";
 import type { Metadata } from "next";
+import { toolLinks } from "@/constants";
 
 export const metadata: Metadata = {
-  title: "doc-to-pdf",
+  title: toolLinks[0].title,
   description: "Converter for documents to pdf format!",
 };
 

frontend/src/app/doc-converter/page.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import React, { useState } from "react";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Button from "../../components/Button";
+import Link from "next/link";
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+export default function Home() {
+  const [file, setFile] = useState<File | null>(null);
+  const [downloadUrl, setDownloadUrl] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const [tableOpen, setTableOpen] = useState(false);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files.length > 0) {
+      setFile(event.target.files[0]);
+      setDownloadUrl("");
+    }
+  };
+
+  const convertToPdf = async () => {
+    if (!file) {
+      alert("No file selected");
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("file", file);
+
+    setLoading(true);
+
+    try {
+      const response = await fetch(
+        process.env.backend_url + "/api/libre-convert",
+        {
+          method: "POST",
+          body: formData,
+        },
+      );
+
+      if (!response.ok) {
+        return new Error(`Error: ${response.statusText}`);
+      }
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      setDownloadUrl(url);
+    } catch (error) {
+      console.error("Error while converting:", error);
+      alert("Error while converting");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="h-screen w-screen bg-black text-white font-noto flex flex-col items-center">
+      <Navbar renderHomeLink={true} />
+      <div className="w-screen h-screen flex flex-col items-center justify-center">
+        <h2 className="text-5xl font-bold text-white mb-16">doc-converter</h2>
+        <input
+          type="file"
+          className="border-2 border-white p-3 rounded-xl text-center text-white"
+          id="documentUpload"
+          onChange={handleFileChange}
+        />
+        <div className={"flex flex-row items-center gap-4 mt-4 mb-16"}>
+          {downloadUrl ? (
+            <Link id="downloadPDF" href={downloadUrl}>
+              <Button content="download" />
+            </Link>
+          ) : (
+            <Button
+              content={
+                loading ? (
+                  <div className="h-10 w-10 border-8 border-blue-100 border-t-blue-500 rounded-full animate-spin" />
+                ) : (
+                  "convert"
+                )
+              }
+              onClick={convertToPdf}
+            />
+          )}
+        </div>
+        {
+          // TODO: Fix Table Head widths (fixed and the same as the max body width)
+          // TODO: Add hover animation to table head (scale-110, blue text, blue border)
+          // TODO: Fix general site height and add scrolling
+          // TODO: Add animated pop in for the table body
+        }
+        <div className="overflow-hidden text-xl rounded-lg border border-white">
+          <div
+            className="cursor-pointer flex justify-between items-center"
+            onClick={() => setTableOpen(!tableOpen)}
+          >
+            <table className="w-full px-6 py-4 border-b">
+              <thead>
+                <tr className="border-b border-white">
+                  <th className="w-sm px-6 py-4 border-r">📥 Input Format</th>
+                  <th className="w-sm px-6 py-4 flex flex-row">
+                    <p className="pr-4">📤 Output Format</p>
+                    {tableOpen ? (
+                      <ChevronUp className="h-6 w-6" />
+                    ) : (
+                      <ChevronDown className="h-6 w-6" />
+                    )}
+                  </th>
+                </tr>
+              </thead>
+            </table>
+          </div>
+
+          {tableOpen && (
+            <table className="w-full text-left border-collapse">
+              <tbody>
+                <tr className="border-b">
+                  <td className="px-6 py-4 border-r">.doc (MS Word)</td>
+                  <td className="px-6 py-4">
+                    .pdf, .docx, .odt, .txt, .rtf, .html, .epub
+                  </td>
+                </tr>
+                <tr className="border-b">
+                  <td className="px-6 py-4 border-r">.docx (MS Word)</td>
+                  <td className="px-6 py-4">
+                    .pdf, .odt, .txt, .rtf, .html, .epub
+                  </td>
+                </tr>
+                <tr className="border-b">
+                  <td className="px-6 py-4 border-r">
+                    .odt (OpenDocument Text)
+                  </td>
+                  <td className="px-6 py-4">
+                    .pdf, .doc, .docx, .txt, .rtf, .html, .epub
+                  </td>
+                </tr>
+                <tr className="border-b">
+                  <td className="px-6 py-4 border-r">
+                    .rtf (Rich Text Format)
+                  </td>
+                  <td className="px-6 py-4">
+                    .pdf, .doc, .docx, .odt, .txt, .html
+                  </td>
+                </tr>
+                <tr className="border-b">
+                  <td className="px-6 py-4 border-r">.txt (Text)</td>
+                  <td className="px-6 py-4">
+                    .pdf, .doc, .docx, .odt, .txt, .html
+                  </td>
+                </tr>
+                <tr className="border-b">
+                  <td className="px-6 py-4 border-r">.html (Webseite)</td>
+                  <td className="px-6 py-4">
+                    .pdf, .doc, .docx, .odt, .rtf, .txt
+                  </td>
+                </tr>
+                <tr className="border-b">
+                  <td className="px-6 py-4 border-r">.epub (E-Book)</td>
+                  <td className="px-6 py-4">
+                    .pdf, .doc, .docx, .odt, .rtf, .txt
+                  </td>
+                </tr>
+                <tr className="border-b">
+                  <td className="px-6 py-4 border-r">.xls (MS Excel)</td>
+                  <td className="px-6 py-4">.pdf, .xlsx, .ods, .csv</td>
+                </tr>
+                <tr className="border-b">
+                  <td className="px-6 py-4 border-r">.xlsx (MS Excel)</td>
+                  <td className="px-6 py-4">.pdf, .xls, .ods, .csv</td>
+                </tr>
+                <tr className="border-b">
+                  <td className="px-6 py-4 border-r">
+                    .ods (OpenDocument Spreadsheet)
+                  </td>
+                  <td className="px-6 py-4">.pdf, .xls, .xlsx, .csv</td>
+                </tr>
+                <tr className="border-b">
+                  <td className="px-6 py-4 border-r">
+                    .csv (Comma-Separated Values)
+                  </td>
+                  <td className="px-6 py-4">.pdf, .xls, .xlsx, .ods</td>
+                </tr>
+                <tr className="border-b">
+                  <td className="px-6 py-4 border-r">.ppt (MS PowerPoint)</td>
+                  <td className="px-6 py-4">.pdf, .pptx, .odp</td>
+                </tr>
+                <tr className="border-b">
+                  <td className="px-6 py-4 border-r">.pptx (MS PowerPoint)</td>
+                  <td className="px-6 py-4">.pdf, .ppt, .odp</td>
+                </tr>
+                <tr className="border-b">
+                  <td className="px-6 py-4 border-r">
+                    .odp (OpenDocument Presentation)
+                  </td>
+                  <td className="px-6 py-4">.pdf, .ppt, .pptx</td>
+                </tr>
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+}

frontend/src/app/doc-to-pdf/page.tsx

@@ -1,111 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import Navbar from "../../components/Navbar";
-import Footer from "../../components/Footer";
-import Button from "../../components/Button";
-import Link from "next/link";
-
-export default function Home() {
-  const [file, setFile] = useState<File | null>(null);
-  const [downloadUrl, setDownloadUrl] = useState<string>("");
-  const [loading, setLoading] = useState(false);
-
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.files && event.target.files.length > 0) {
-      setFile(event.target.files[0]);
-      setDownloadUrl("");
-    }
-  };
-
-  const convertToPdf = async () => {
-    if (!file) {
-      alert("No file selected");
-      return;
-    }
-
-    const formData = new FormData();
-    formData.append("file", file);
-
-    setLoading(true);
-
-    try {
-      const response = await fetch(
-        process.env.backend_url + "/api/libre-convert",
-        {
-          method: "POST",
-          body: formData,
-        },
-      );
-
-      if (!response.ok) {
-        return new Error(`Error: ${response.statusText}`);
-      }
-
-      const blob = await response.blob();
-      const url = window.URL.createObjectURL(blob);
-      setDownloadUrl(url);
-    } catch (error) {
-      console.error("Error while converting:", error);
-      alert("Error while converting");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="h-screen w-screen bg-black text-white font-noto flex flex-col items-center">
-      <Navbar renderHomeLink={true} />
-      <div className="w-screen h-screen flex flex-col items-center justify-center">
-        <h2 className="text-5xl font-bold text-white mb-16">doc-to-pdf</h2>
-        <table className="border-2 border-white text-xl rounded-xl mb-16">
-          <thead>
-            <tr>
-              <th>Input Format</th>
-              <th>Output Format</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>docx</td>
-              <td>pdf</td>
-            </tr>
-            <tr>
-              <td>doc</td>
-              <td>pdf</td>
-            </tr>
-            <tr>
-              <td>odt</td>
-              <td>pdf</td>
-            </tr>
-          </tbody>
-        </table>
-        <input
-          type="file"
-          className="border-2 border-white p-3 rounded-xl text-center text-white"
-          id="documentUpload"
-          onChange={handleFileChange}
-        />
-        <div className={"flex flex-row items-center gap-4 mt-4"}>
-          {downloadUrl ? (
-            <Link id="downloadPDF" href={downloadUrl}>
-              <Button content="download" />
-            </Link>
-          ) : (
-            <Button
-              content={
-                loading ? (
-                  <div className="h-10 w-10 border-8 border-blue-100 border-t-blue-500 rounded-full animate-spin" />
-                ) : (
-                  "convert"
-                )
-              }
-              onClick={convertToPdf}
-            />
-          )}
-        </div>
-      </div>
-      <Footer />
-    </div>
-  );
-}

frontend/src/app/rgb-to-hex/layout.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import type { Metadata } from "next";
+import { toolLinks } from "@/constants";
+
+export const metadata: Metadata = {
+  title: toolLinks[2].title,
+  description: "Converter for rgb to hex color format!",
+};
+
+export default function RootLayout({
+                                     children,
+                                   }: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+    <body className={`antialiased`}>{children}</body>
+    </html>
+  );
+}

frontend/src/app/rgb-to-hex/page.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import React, { useState } from "react";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Button from "../../components/Button";
+
+export default function RgbToHex() {
+
+  const [loading, setLoading] = useState(false);
+  const [hex, setHex] = useState("");
+
+  const convertToHex = async () => {
+
+    setLoading(true);
+
+    const red = (document.getElementById("red") as HTMLInputElement).value;
+    const green = (document.getElementById("green") as HTMLInputElement).value;
+    const blue = (document.getElementById("blue") as HTMLInputElement).value;
+
+    try {
+      const response = await fetch(
+        process.env.backend_url + "/api/color-convert",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({  red: red, green: green, blue: blue }),
+        },
+      );
+      if (!response.ok) {
+        return new Error(`Error: ${response.statusText}`);
+      }
+      const hex: string = await response.text();
+      setHex(hex);
+
+    } catch (error) {
+      console.error("Error while converting:", error);
+      alert("Error while converting");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const clearInAndOutput = () => {
+    setHex("");
+    const red = document.getElementById("red") as HTMLInputElement;
+    const green = document.getElementById("green") as HTMLInputElement;
+    const blue = document.getElementById("blue") as HTMLInputElement;
+    red.value = "";
+    green.value = "";
+    blue.value = "";
+  };
+
+  const checkInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const color = (document.getElementById(event.target.id) as HTMLInputElement);
+    const colorValue = +color.value;
+
+    if (colorValue < 0 || colorValue > 255 ) {
+      alert("Invalid input. Please enter a number between 0 and 255.");
+    }
+    if (colorValue < 0) {
+      color.value = "0";
+    } else if (colorValue > 255) {
+      color.value = "255";
+    }
+  }
+
+  return (
+    <div className="h-screen w-screen bg-black text-white font-noto flex flex-col items-center">
+      <Navbar renderHomeLink={true} />
+      <div className="w-screen h-screen flex flex-col items-center justify-center">
+        <h2 className="text-5xl font-bold text-white mb-16">rgb-to-hex</h2>
+        <div className="border-2 border-white p-3 rounded-xl text-center text-white">
+          <label className="mr-2" htmlFor="red">Red:</label>
+          <input
+            type="number"
+            id="red"
+            name="red"
+            min="0"
+            max="255"
+            className="w-16 bg-black border-1 border-white text-center"
+            onInput={checkInput}
+          />
+          <label className="mx-2 text-white" htmlFor="green">Green:</label>
+          <input
+            type="number"
+            id="green"
+            name="green"
+            min="0"
+            max="255"
+            className="w-16 bg-black border-1 border-white text-center"
+            onChange={checkInput}
+          />
+          <label className="mx-2" htmlFor="blue">Blue:</label>
+          <input
+            type="number"
+            id="blue"
+            name="blue"
+            min="0"
+            max="255"
+            className="w-16 bg-black border-1 border-white text-center"
+            onInput={checkInput}
+          />
+        </div>
+        <div className={"flex flex-row items-center gap-4 mt-4 mb-16"}>
+          <Button
+            content={
+              loading ? (
+                <div className="h-10 w-10 border-8 border-blue-100 border-t-blue-500 rounded-full animate-spin" />
+              ) : (
+                "convert"
+              )
+            }
+            onClick={convertToHex}
+          />
+          <Button
+            content="clear"
+            onClick={clearInAndOutput}
+          />
+          </div>
+        <div className="p-3 rounded-xl text-center">
+          <output
+            id="hex"
+            className="text-blue-400 text-3xl"
+          >{hex}</output>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+}

frontend/src/constants/index.ts

@@ -1,19 +1,19 @@
 export const toolLinks = [
   {
-    title: "doc-to-pdf",
-    link: "/doc-to-pdf",
+    title: "doc-converter",
+    link: "/doc-converter",
   },
   {
-    title: "img-to-png",
-    link: "/img-to-png",
+    title: "img-converter",
+    link: "/img-converter",
   },
   {
     title: "rgb-to-hex",
     link: "/rgb-to-hex",
   },
   {
-    title: "video-to-gif",
-    link: "/video-to-gif",
+    title: "data-visualizer",
+    link: "/data-visualizer",
   },
   {
     title: "qr-code-generator",