theo/werkzeugkiste
1
0
Fork 0
mirror of https://github.com/theoleuthardt/werkzeugkiste.git synced 2026-06-13 09:37:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

regex-tester first version implemented

Browse source
This commit is contained in:
Domenik 2025-02-20 11:29:17 +01:00
parent bbcfcddedf
commit 8787ee5c2b
5 changed files with 163 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/server.ts
View file

@ -4,6 +4,7 @@ import multipart from "@fastify/multipart";
import { libreConvert } from "./src/routes/libreconvert.route"; import { libreConvert } from "./src/routes/libreconvert.route";
import { colorConvert } from "./src/routes/colorconvert.route"; import { colorConvert } from "./src/routes/colorconvert.route";
import {passwordGenerate} from "./src/routes/passwordgenerate.route"; import {passwordGenerate} from "./src/routes/passwordgenerate.route";
import { regexTest } from "./src/routes/regextest.route";
const app = Fastify({ logger: true }); const app = Fastify({ logger: true });
@ -17,6 +18,7 @@ app.register(multipart);
app.register(libreConvert); app.register(libreConvert);
app.register(colorConvert); app.register(colorConvert);
app.register(passwordGenerate); app.register(passwordGenerate);
app.register(regexTest);
const PORT = process.env.PORT || 4000; const PORT = process.env.PORT || 4000;
app.listen({ port: Number(PORT), host: "0.0.0.0" }, () => { app.listen({ port: Number(PORT), host: "0.0.0.0" }, () => {

48
backend/src/routes/regextest.route.ts Normal file
View file

@ -0,0 +1,48 @@
import { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
interface RequestBody {
input: string;
}
export async function regexTest(app: FastifyInstance) {
app.post(
"/api/regex-test",
async (
request: FastifyRequest<{ Body: RequestBody }>,
reply: FastifyReply,
) => {
try {
const data = request.body;
if (!data) {
return reply.status(400).send({ error: "No Regex declared!" });
}
const regexPattern = data.input;
// Überprüfe, ob der Regex-Pattern korrekt ist
let regex: RegExp;
try {
regex = new RegExp(regexPattern);
} catch (e) {
return reply.status(400).send({ error: "Invalid regular expression!" });
}
// Teste den Regex
const result = regex.test(data.input);
// Erstelle eine Ausgabe basierend auf dem Test-Ergebnis
let output = "";
if (result) {
output = `The input matches the regular expression!`;
} else {
output = `The input does not match the regular expression.`;
}
reply.header("Content-Type", "text/plain").status(200).send(output);
} catch (error) {
console.error("Convert error:", error);
reply.status(500).send({ error: "Error while converting!" });
}
},
);
}

20
frontend/src/app/regex-tester/layout.tsx Normal file
View file

@ -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: "Tester for regular expressions!",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`antialiased`}>{children}</body>
</html>
);
}

91
frontend/src/app/regex-tester/page.tsx Normal file
View file

@ -0,0 +1,91 @@
"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 [output, setOutput] = useState("");
const testRegex = async () => {
setLoading(true);
const input = (document.getElementById("input") as HTMLInputElement).value;
try {
const response = await fetch(
process.env.backend_url + "/api/regex-test",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ input: input}),
},
);
if (!response.ok) {
return new Error(`Error: ${response.statusText}`);
}
const output: string = await response.text();
console.log(output);
setOutput(output);
} catch (error) {
console.error("Error while converting:", error);
alert("Error while converting");
} finally {
setLoading(false);
}
};
const clearInAndOutput = () => {
setOutput("");
const input = document.getElementById("input") as HTMLInputElement;
input.value = "";
};
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">password-generator</h2>
<div className="border-2 border-white p-3 rounded-xl text-center text-white flex flex-row justify-between">
<label className="mr-2" htmlFor="input">input:</label>
<input
type="text"
id="input"
name="input"
className="field-sizing-content bg-black border-1 border-white text-center"
/>
</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" />
) : (
"test"
)
}
onClick={testRegex}
/>
<Button
content="clear"
onClick={clearInAndOutput}
/>
</div>
<div className="p-3 rounded-xl text-center">
<output
id="output"
className="text-blue-400 text-3xl"
>{output}</output>
</div>
</div>
<Footer />
</div>
);
}

4
frontend/src/constants/index.ts
View file

@ -12,8 +12,8 @@ export const toolLinks = [
link: "/rgb-to-hex", link: "/rgb-to-hex",
}, },
{ {
title: "data-visualizer", title: "regex-tester",
link: "/data-visualizer", link: "/regex-tester",
}, },
{ {
title: "qr-code-generator", title: "qr-code-generator",