arsvendg/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/arsvendg/Stirling-PDF.git synced 2026-07-15 19:10:47 +02:00
Code Issues Actions 3 Packages Projects Releases 1 Wiki Activity

React translations

Browse Source
This commit is contained in:
Reece
2025-05-29 17:26:32 +01:00
parent 5f862f55d9
commit 09f05ac8d0
106 changed files with 128926 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/tools/Compress.tsx
+11 -9
View File
@@ -1,5 +1,6 @@
import React, { useState } from "react";
import { useSearchParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Stack, Slider, Group, Text, Button, Checkbox, TextInput, Paper } from "@mantine/core";
export interface CompressProps {
@@ -13,6 +14,7 @@ const CompressPdfPanel: React.FC<CompressProps> = ({
setDownloadUrl,
setLoading,
}) => {
const { t } = useTranslation();
const [searchParams] = useSearchParams();
@@ -63,9 +65,9 @@ const CompressPdfPanel: React.FC<CompressProps> = ({
return (
<Stack>
<Text fw={500} mb={4}>Select files to compress:</Text>
<Text fw={500} mb={4}>{t("multiPdfDropPrompt", "Select files to compress:")}</Text>
<Stack gap={4}>
{files.length === 0 && <Text c="dimmed" size="sm">No files loaded.</Text>}
{files.length === 0 && <Text c="dimmed" size="sm">{t("noFileSelected")}</Text>}
{files.map((file, idx) => (
<Checkbox
key={file.name + idx}
@@ -76,7 +78,7 @@ const CompressPdfPanel: React.FC<CompressProps> = ({
))}
</Stack>
<Stack gap={4} mb={14}>
<Text size="sm" style={{ minWidth: 140 }}>Compression Level</Text>
<Text size="sm" style={{ minWidth: 140 }}>{t("compress.selectText.2", "Compression Level")}</Text>
<Slider
min={1}
max={9}
@@ -92,23 +94,23 @@ const CompressPdfPanel: React.FC<CompressProps> = ({
/>
</Stack>
<Checkbox
label="Convert images to grayscale"
label={t("compress.grayscale.label", "Convert images to grayscale")}
checked={grayscale}
onChange={e => setGrayscale(e.currentTarget.checked)}
/>
<Checkbox
label="Remove PDF metadata"
label={t("removeMetadata.submit", "Remove PDF metadata")}
checked={removeMetadata}
onChange={e => setRemoveMetadata(e.currentTarget.checked)}
/>
<Checkbox
label="Aggressive compression (may reduce quality)"
label={t("compress.selectText.1.1", "Aggressive compression (may reduce quality)")}
checked={aggressive}
onChange={e => setAggressive(e.currentTarget.checked)}
/>
<TextInput
label="Expected output size (e.g. 2MB, 500KB)"
placeholder="Optional"
label={t("compress.selectText.5", "Expected output size")}
placeholder={t("compress.selectText.5", "e.g. 25MB, 10.8MB, 25KB")}
value={expectedSize}
onChange={e => setExpectedSize(e.currentTarget.value)}
/>
@@ -119,7 +121,7 @@ const CompressPdfPanel: React.FC<CompressProps> = ({
fullWidth
mt="md"
>
Compress Selected PDF{selected.filter(Boolean).length > 1 ? "s" : ""}
{t("compress.submit", "Compress")} {t("pdfPrompt", "PDF")}{selected.filter(Boolean).length > 1 ? "s" : ""}
</Button>
</Stack>
);
frontend/src/tools/Merge.tsx
+8 -6
View File
@@ -1,6 +1,7 @@
import React, { useState, useEffect } from "react";
import { Paper, Button, Checkbox, Stack, Text, Group, Loader, Alert } from "@mantine/core";
import { useSearchParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
export interface MergePdfPanelProps {
files: File[];
@@ -18,6 +19,7 @@ const MergePdfPanel: React.FC<MergePdfPanelProps> = ({
params,
updateParams,
}) => {
const { t } = useTranslation();
const [searchParams] = useSearchParams();
const [selectedFiles, setSelectedFiles] = useState<boolean[]>([]);
const [downloadUrl, setLocalDownloadUrl] = useState<string | null>(null);
@@ -31,7 +33,7 @@ const MergePdfPanel: React.FC<MergePdfPanelProps> = ({
const handleMerge = async () => {
const filesToMerge = files.filter((_, index) => selectedFiles[index]);
if (filesToMerge.length < 2) {
setErrorMessage("Please select at least two PDFs to merge.");
setErrorMessage(t("multiPdfPrompt")); // "Select PDFs (2+)"
return;
}
@@ -75,7 +77,7 @@ const MergePdfPanel: React.FC<MergePdfPanelProps> = ({
return (
<Stack>
<Text fw={500} size="lg">Merge PDFs</Text>
<Text fw={500} size="lg">{t("merge.header")}</Text>
<Stack gap={4}>
{files.map((file, index) => (
<Group key={index} gap="xs">
@@ -89,7 +91,7 @@ const MergePdfPanel: React.FC<MergePdfPanelProps> = ({
</Stack>
{selectedCount < 2 && (
<Text size="sm" c="red">
Please select at least two PDFs to merge.
{t("multiPdfPrompt")}
</Text>
)}
<Button
@@ -98,7 +100,7 @@ const MergePdfPanel: React.FC<MergePdfPanelProps> = ({
disabled={selectedCount < 2 || isLoading}
mt="md"
>
Merge PDFs
{t("merge.submit")}
</Button>
{errorMessage && (
<Alert color="red" mt="sm">
@@ -114,11 +116,11 @@ const MergePdfPanel: React.FC<MergePdfPanelProps> = ({
variant="light"
mt="md"
>
Download Merged PDF
{t("downloadPdf")}
</Button>
)}
<Checkbox
label="Remove Duplicates"
label={t("merge.removeCertSign")}
checked={removeDuplicates}
onChange={() => updateParams({ removeDuplicates: !removeDuplicates })}
/>
frontend/src/tools/Split.tsx
+32 -28
View File
@@ -10,6 +10,7 @@ import {
Paper,
} from "@mantine/core";
import { useSearchParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import DownloadIcon from "@mui/icons-material/Download";
export interface SplitPdfPanelProps {
@@ -38,6 +39,7 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
params,
updateParams,
}) => {
const { t } = useTranslation();
const [searchParams] = useSearchParams();
const [status, setStatus] = useState("");
@@ -61,7 +63,7 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!file) {
setStatus("Please upload a PDF first.");
setStatus(t("noFileSelected"));
return;
}
@@ -99,7 +101,7 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
return;
}
setStatus("Processing split...");
setStatus(t("loading"));
setIsLoading(true);
setErrorMessage(null);
@@ -108,13 +110,13 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
const blob = new Blob([response.data], { type: "application/zip" });
const url = window.URL.createObjectURL(blob);
setDownloadUrl(url);
setStatus("Download ready.");
setStatus(t("downloadComplete"));
} catch (error: any) {
console.error(error);
setErrorMessage(
error.response?.data || "An error occurred while splitting the PDF."
error.response?.data || t("error.pdfPassword", "An error occurred while splitting the PDF.")
);
setStatus("Split failed.");
setStatus(t("error._value", "Split failed."));
} finally {
setIsLoading(false);
}
@@ -124,21 +126,21 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
<form onSubmit={handleSubmit}>
<Stack gap="sm" mb={16}>
<Select
label="Split Mode"
label={t("split-by-size-or-count.type.label", "Split Mode")}
value={mode}
onChange={(v) => v && updateParams({ mode: v })}
data={[
{ value: "byPages", label: "Split by Pages (e.g. 1,3,5-10)" },
{ value: "bySections", label: "Split by Grid Sections" },
{ value: "bySizeOrCount", label: "Split by Size or Count" },
{ value: "byChapters", label: "Split by Chapters" },
{ value: "byPages", label: t("split.header", "Split by Pages") + " (e.g. 1,3,5-10)" },
{ value: "bySections", label: t("split-by-sections.title", "Split by Grid Sections") },
{ value: "bySizeOrCount", label: t("split-by-size-or-count.title", "Split by Size or Count") },
{ value: "byChapters", label: t("splitByChapters.title", "Split by Chapters") },
]}
/>
{mode === "byPages" && (
<TextInput
label="Pages"
placeholder="e.g. 1,3,5-10"
label={t("split.splitPages", "Pages")}
placeholder={t("pageSelectionPrompt", "e.g. 1,3,5-10")}
value={pages}
onChange={(e) => updateParams({ pages: e.target.value })}
/>
@@ -147,23 +149,25 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
{mode === "bySections" && (
<Stack gap="sm">
<TextInput
label="Horizontal Divisions"
label={t("split-by-sections.horizontal.label", "Horizontal Divisions")}
type="number"
min="0"
max="300"
value={hDiv}
onChange={(e) => updateParams({ hDiv: e.target.value })}
placeholder={t("split-by-sections.horizontal.placeholder", "Enter number of horizontal divisions")}
/>
<TextInput
label="Vertical Divisions"
label={t("split-by-sections.vertical.label", "Vertical Divisions")}
type="number"
min="0"
max="300"
value={vDiv}
onChange={(e) => updateParams({ vDiv: e.target.value })}
placeholder={t("split-by-sections.vertical.placeholder", "Enter number of vertical divisions")}
/>
<Checkbox
label="Merge sections into one PDF"
label={t("split-by-sections.merge", "Merge sections into one PDF")}
checked={merge}
onChange={(e) => updateParams({ merge: e.currentTarget.checked })}
/>
@@ -173,18 +177,18 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
{mode === "bySizeOrCount" && (
<Stack gap="sm">
<Select
label="Split Type"
label={t("split-by-size-or-count.type.label", "Split Type")}
value={splitType}
onChange={(v) => v && updateParams({ splitType: v })}
data={[
{ value: "size", label: "By Size" },
{ value: "pages", label: "By Page Count" },
{ value: "docs", label: "By Document Count" },
{ value: "size", label: t("split-by-size-or-count.type.size", "By Size") },
{ value: "pages", label: t("split-by-size-or-count.type.pageCount", "By Page Count") },
{ value: "docs", label: t("split-by-size-or-count.type.docCount", "By Document Count") },
]}
/>
<TextInput
label="Split Value"
placeholder="e.g. 10MB or 5 pages"
label={t("split-by-size-or-count.value.label", "Split Value")}
placeholder={t("split-by-size-or-count.value.placeholder", "e.g. 10MB or 5 pages")}
value={splitValue}
onChange={(e) => updateParams({ splitValue: e.target.value })}
/>
@@ -194,18 +198,18 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
{mode === "byChapters" && (
<Stack gap="sm">
<TextInput
label="Bookmark Level"
label={t("splitByChapters.bookmarkLevel", "Bookmark Level")}
type="number"
value={bookmarkLevel}
onChange={(e) => updateParams({ bookmarkLevel: e.target.value })}
/>
<Checkbox
label="Include Metadata"
label={t("splitByChapters.includeMetadata", "Include Metadata")}
checked={includeMetadata}
onChange={(e) => updateParams({ includeMetadata: e.currentTarget.checked })}
/>
<Checkbox
label="Allow Duplicate Bookmarks"
label={t("splitByChapters.allowDuplicates", "Allow Duplicate Bookmarks")}
checked={allowDuplicates}
onChange={(e) => updateParams({ allowDuplicates: e.currentTarget.checked })}
/>
@@ -213,18 +217,18 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
)}
<Button type="submit" loading={isLoading} fullWidth>
{isLoading ? "Processing..." : "Split PDF"}
{isLoading ? t("loading") : t("split.submit", "Split PDF")}
</Button>
{status && <p className="text-xs text-gray-600">{status}</p>}
{errorMessage && (
<Notification color="red" title="Error" onClose={() => setErrorMessage(null)}>
<Notification color="red" title={t("error._value", "Error")} onClose={() => setErrorMessage(null)}>
{errorMessage}
</Notification>
)}
{status === "Download ready." && downloadUrl && (
{status === t("downloadComplete") && downloadUrl && (
<Button
component="a"
href={downloadUrl}
@@ -233,7 +237,7 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
color="green"
fullWidth
>
Download Split PDF
{t("downloadPdf", "Download Split PDF")}
</Button>
)}
</Stack>