mirror of
https://github.com/theoleuthardt/werkzeugkiste.git
synced 2026-06-13 09:37:53 +00:00
Merge branch 'main' into feat/doc-converter
This commit is contained in:
Theo Leuthardt
GitHub
commit
8fe6657200
14 changed files with 315 additions and 27 deletions
64
frontend/Dockerfile
Normal file
64
frontend/Dockerfile
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
# syntax=docker.io/docker/dockerfile:1
|
||||
|
||||
FROM node:18-alpine AS base
|
||||
|
||||
# Install dependencies only when needed
|
||||
FROM base AS deps
|
||||
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
|
||||
RUN apk add --no-cache libc6-compat
|
||||
WORKDIR /app
|
||||
|
||||
# Install dependencies based on the preferred package manager
|
||||
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
|
||||
RUN \
|
||||
if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
|
||||
elif [ -f package-lock.json ]; then npm ci; \
|
||||
elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
|
||||
else echo "Lockfile not found." && exit 1; \
|
||||
fi
|
||||
|
||||
|
||||
# Rebuild the source code only when needed
|
||||
FROM base AS builder
|
||||
WORKDIR /app
|
||||
COPY --from=deps /app/node_modules ./node_modules
|
||||
COPY . .
|
||||
|
||||
# Next.js collects completely anonymous telemetry data about general usage.
|
||||
# Learn more here: https://nextjs.org/telemetry
|
||||
# Uncomment the following line in case you want to disable telemetry during the build.
|
||||
# ENV NEXT_TELEMETRY_DISABLED=1
|
||||
|
||||
RUN \
|
||||
if [ -f yarn.lock ]; then yarn run build; \
|
||||
elif [ -f package-lock.json ]; then npm run build; \
|
||||
elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
|
||||
else echo "Lockfile not found." && exit 1; \
|
||||
fi
|
||||
|
||||
# Production image, copy all the files and run next
|
||||
FROM base AS runner
|
||||
WORKDIR /app
|
||||
|
||||
ENV NODE_ENV=production
|
||||
# Uncomment the following line in case you want to disable telemetry during runtime.
|
||||
# ENV NEXT_TELEMETRY_DISABLED=1
|
||||
|
||||
RUN addgroup --system --gid 1001 nodejs
|
||||
RUN adduser --system --uid 1001 nextjs
|
||||
|
||||
# Automatically leverage output traces to reduce image size
|
||||
# https://nextjs.org/docs/advanced-features/output-file-tracing
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||
|
||||
USER nextjs
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
ENV PORT=3000
|
||||
|
||||
# server.js is created by next build from the standalone output
|
||||
# https://nextjs.org/docs/pages/api-reference/config/next-config-js/output
|
||||
ENV HOSTNAME="0.0.0.0"
|
||||
CMD ["node", "server.js"]
|
||||
20
frontend/src/app/rgb-to-hex/layout.tsx
Normal file
20
frontend/src/app/rgb-to-hex/layout.tsx
Normal 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: "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>
|
||||
);
|
||||
}
|
||||
133
frontend/src/app/rgb-to-hex/page.tsx
Normal file
133
frontend/src/app/rgb-to-hex/page.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue