External/fredy
1
0
Fork 0
mirror of https://github.com/orangecoding/fredy.git synced 2026-06-16 12:31:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

fredy goes multilingual 🇩🇪 🇺🇸

Browse Source
This commit is contained in:
orangecoding
2026-06-04 10:35:42 +02:00
parent 019b9ac87b
commit 1dcb852ea1
40 changed files with 2072 additions and 879 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
README.md
View File

@@ -240,6 +240,37 @@ If you have to refresh the fixtures (every once in a while needed because the pr
yarn run download-fixtures
```
## Adding a new language
Fredy's UI is fully multilingual. Translation files live in `ui/src/locales/`. To add a new language, create a single JSON file there, no code changes required.
**Example: `ui/src/locales/fr.json`**
```json
{
"_meta": {
"flag": "🇫🇷",
"name": "Français",
"locale": "fr-FR",
"semiLocale": "fr"
},
"nav.dashboard": "Tableau de bord",
"common.save": "Enregistrer",
...
}
```
The `_meta` fields:
| Field | Description |
|---|---|
| `flag` | Unicode flag emoji shown in the language selector |
| `name` | Display name shown in the language selector |
| `locale` | BCP 47 locale string used for date and number formatting (e.g. `fr-FR`) |
| `semiLocale` | Semi UI locale key for component-level strings (date pickers, pagination, etc.) |
> **Important:** `semiLocale` must exactly match a locale filename from the Semi UI locale sources (without the `.js` extension). See the [available Semi UI locales on GitHub](https://github.com/DouyinFE/semi-design/tree/main/packages/semi-ui/locale/source) for the full list of supported keys.
After adding the file, rebuild the frontend (`yarn build:frontend` or restart the dev server) and the new language will appear automatically in **Settings → User Settings → Language**.
------------------------------------------------------------------------

17
lib/api/routes/userSettingsRoute.js
View File

@@ -168,4 +168,21 @@ export default async function userSettingsPlugin(fastify) {
return reply.code(500).send({ error: error.message });
}
});
fastify.post('/language', async (request, reply) => {
const userId = request.session.currentUser;
const { language } = request.body;
if (typeof language !== 'string' || language.trim() === '') {
return reply.code(400).send({ error: 'language must be a non-empty string.' });
}
try {
upsertSettings({ language }, userId);
return { success: true };
} catch (error) {
logger.error('Error updating language setting', error);
return reply.code(500).send({ error: error.message });
}
});
}

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "fredy",
"version": "22.3.3",
"version": "22.4.0",
"description": "[F]ind [R]eal [E]states [d]amn eas[y].",
"scripts": {
"prepare": "husky",

166
ui/src/App.jsx
View File

@@ -18,7 +18,7 @@ import Jobs from './views/jobs/Jobs';
import './App.less';
import TrackingModal from './components/tracking/TrackingModal.jsx';
import { Banner } from '@douyinfe/semi-ui-19';
import { Banner, LocaleProvider } from '@douyinfe/semi-ui-19';
import VersionBanner from './components/version/VersionBanner.jsx';
import Listings from './views/listings/Listings.jsx';
import MapView from './views/listings/Map.jsx';
@@ -29,6 +29,17 @@ import WatchlistManagement from './views/listings/management/WatchlistManagement
import Dashboard from './views/dashboard/Dashboard.jsx';
import ListingDetail from './views/listings/ListingDetail.jsx';
import NewsModal from './components/news/NewsModal.jsx';
import { I18nProvider, availableLanguages } from './services/i18n/i18n.jsx';
const semiLocaleModules = import.meta.glob('/node_modules/@douyinfe/semi-ui-19/lib/es/locale/source/*.js', {
eager: true,
});
const semiLocales = {};
for (const [path, mod] of Object.entries(semiLocaleModules)) {
const name = path.match(/\/source\/(\w+)\.js$/)?.[1];
if (name) semiLocales[name] = mod.default ?? mod;
}
export default function FredyApp() {
const actions = useActions();
@@ -36,6 +47,7 @@ export default function FredyApp() {
const currentUser = useSelector((state) => state.user.currentUser);
const versionUpdate = useSelector((state) => state.versionUpdate.versionUpdate);
const settings = useSelector((state) => state.generalSettings.settings);
const language = useSelector((state) => state.userSettings.settings.language);
useEffect(() => {
async function init() {
@@ -63,79 +75,89 @@ export default function FredyApp() {
const isAdmin = () => currentUser != null && currentUser.isAdmin;
const { Sider, Content } = Layout;
return loading ? null : needsLogin() ? (
<Routes>
<Route path="/login" element={<Login />} />
<Route path="*" element={<Navigate to="/login" replace />} />
</Routes>
) : (
<Layout className="app">
<Sider>
<Navigation isAdmin={isAdmin()} />
</Sider>
<Layout className="app__main">
<Content className="app__content">
{versionUpdate?.newVersion && <VersionBanner />}
{settings.demoMode && (
<>
<Banner
fullMode={true}
type="info"
bordered
closeIcon={null}
description="You're currently viewing the demo version of Fredy. Jobs won't scrape websites, and any changes you make will be reverted at midnight."
/>
<br />
</>
)}
{settings.analyticsEnabled === null && !settings.demoMode && <TrackingModal />}
{!settings.demoMode && <NewsModal />}
return loading ? null : (
<I18nProvider language={language ?? 'en'}>
<LocaleProvider
locale={
semiLocales[availableLanguages.find((l) => l.code === (language ?? 'en'))?.semiLocale] ?? semiLocales['en_US']
}
>
{needsLogin() ? (
<Routes>
<Route path="/403" element={<InsufficientPermission />} />
<Route path="/jobs/new" element={<JobMutation />} />
<Route path="/jobs/edit/:jobId" element={<JobMutation />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/jobs" element={<Jobs />} />
<Route path="/listings" element={<Listings />} />
<Route path="/listings/watchlist" element={<Listings mode="watchlist" />} />
<Route path="/listings/listing/:listingId" element={<ListingDetail />} />
<Route path="/map" element={<MapView />} />
<Route path="/watchlistManagement" element={<WatchlistManagement />} />
{/* Permission-aware routes */}
<Route
path="/users/new"
element={
<PermissionAwareRoute currentUser={currentUser}>
<UserMutator />
</PermissionAwareRoute>
}
/>
<Route
path="/users/edit/:userId"
element={
<PermissionAwareRoute currentUser={currentUser}>
<UserMutator />
</PermissionAwareRoute>
}
/>
<Route
path="/users"
element={
<PermissionAwareRoute currentUser={currentUser}>
<Users />
</PermissionAwareRoute>
}
/>
<Route path="/userSettings" element={<Navigate to="/generalSettings" replace />} />
<Route path="/generalSettings" element={<GeneralSettings />} />
<Route path="/" element={<Navigate to="/dashboard" replace />} />
<Route path="/login" element={<Login />} />
<Route path="*" element={<Navigate to="/login" replace />} />
</Routes>
</Content>
<FredyFooter />
</Layout>
</Layout>
) : (
<Layout className="app">
<Sider>
<Navigation isAdmin={isAdmin()} />
</Sider>
<Layout className="app__main">
<Content className="app__content">
{versionUpdate?.newVersion && <VersionBanner />}
{settings.demoMode && (
<>
<Banner
fullMode={true}
type="info"
bordered
closeIcon={null}
description="You're currently viewing the demo version of Fredy. Jobs won't scrape websites, and any changes you make will be reverted at midnight."
/>
<br />
</>
)}
{settings.analyticsEnabled === null && !settings.demoMode && <TrackingModal />}
{!settings.demoMode && <NewsModal />}
<Routes>
<Route path="/403" element={<InsufficientPermission />} />
<Route path="/jobs/new" element={<JobMutation />} />
<Route path="/jobs/edit/:jobId" element={<JobMutation />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/jobs" element={<Jobs />} />
<Route path="/listings" element={<Listings />} />
<Route path="/listings/watchlist" element={<Listings mode="watchlist" />} />
<Route path="/listings/listing/:listingId" element={<ListingDetail />} />
<Route path="/map" element={<MapView />} />
<Route path="/watchlistManagement" element={<WatchlistManagement />} />
{/* Permission-aware routes */}
<Route
path="/users/new"
element={
<PermissionAwareRoute currentUser={currentUser}>
<UserMutator />
</PermissionAwareRoute>
}
/>
<Route
path="/users/edit/:userId"
element={
<PermissionAwareRoute currentUser={currentUser}>
<UserMutator />
</PermissionAwareRoute>
}
/>
<Route
path="/users"
element={
<PermissionAwareRoute currentUser={currentUser}>
<Users />
</PermissionAwareRoute>
}
/>
<Route path="/userSettings" element={<Navigate to="/generalSettings" replace />} />
<Route path="/generalSettings" element={<GeneralSettings />} />
<Route path="/" element={<Navigate to="/dashboard" replace />} />
</Routes>
</Content>
<FredyFooter />
</Layout>
</Layout>
)}
</LocaleProvider>
</I18nProvider>
);
}

34
ui/src/components/ListingDeletionModal.jsx
View File

@@ -5,6 +5,7 @@
import { useState, useEffect } from 'react';
import { Modal, Radio, RadioGroup, Typography, Checkbox } from '@douyinfe/semi-ui-19';
import { useTranslation } from '../services/i18n/i18n.jsx';
const { Text } = Typography;
@@ -12,11 +13,14 @@ const ListingDeletionModal = ({
visible,
onConfirm,
onCancel,
title = 'Delete Listings',
title,
showOptions = true,
message = 'How would you like to delete the selected listing(s)?',
message,
defaultDeleteType = 'soft',
}) => {
const t = useTranslation();
const resolvedTitle = title ?? t('listing.deletion.title');
const resolvedMessage = message ?? t('listing.deletion.message');
const [deleteType, setDeleteType] = useState('soft');
const [remember, setRemember] = useState(false);
@@ -37,47 +41,41 @@ const ListingDeletionModal = ({
return (
<Modal
title={title}
title={resolvedTitle}
visible={visible}
onOk={handleOk}
onCancel={onCancel}
okText="Confirm"
cancelText="Cancel"
okText={t('listing.deletion.confirm')}
cancelText={t('listing.deletion.cancel')}
style={{ maxWidth: '500px' }}
>
<div style={{ marginBottom: 16 }}>
<Text>{message}</Text>
<Text>{resolvedMessage}</Text>
</div>
{showOptions && (
<>
<RadioGroup value={deleteType} onChange={(e) => setDeleteType(e.target.value)} style={{ width: '100%' }}>
<Radio value="soft" style={{ alignItems: 'flex-start', width: '100%' }}>
<div style={{ marginLeft: 8 }}>
<Text strong>Mark as deleted (Soft Delete)</Text>
<Text strong>{t('listing.deletion.softLabel')}</Text>
<br />
<Text type="secondary">
Listings are kept in the database but marked as hidden. They will <b>not</b> re-appear during the next
scraping session.
</Text>
<Text type="secondary">{t('listing.deletion.softDescription')}</Text>
</div>
</Radio>
<Radio value="hard" style={{ marginTop: 16, alignItems: 'flex-start', width: '100%' }}>
<div style={{ marginLeft: 8 }}>
<Text strong>Remove from database (Hard Delete)</Text>
<Text strong>{t('listing.deletion.hardLabel')}</Text>
<br />
<Text type="secondary">
Listings are completely removed from the database.
{t('listing.deletion.hardDescription')}
<br />
<Text type="warning">
Consequence: They might re-appear when scraping the next time because Fredy won't know they were
previously found.
</Text>
<Text type="warning">{t('listing.deletion.hardConsequence')}</Text>
</Text>
</div>
</Radio>
</RadioGroup>
<Checkbox checked={remember} onChange={(e) => setRemember(e.target.checked)} style={{ marginTop: 16 }}>
Remember my choice and skip this dialog next time
{t('listing.deletion.rememberChoice')}
</Checkbox>
</>
)}

10
ui/src/components/cards/PieChartCard.jsx
View File

@@ -8,10 +8,12 @@ import { Pie } from 'react-chartjs-2';
import { Chart as ChartJS, ArcElement, Tooltip, Legend, Title as ChartTitle } from 'chart.js';
import './ChartCard.less';
import { useTranslation } from '../../services/i18n/i18n.jsx';
ChartJS.register(ArcElement, Tooltip, Legend, ChartTitle);
export default function PieChartCard({ data = [] }) {
const t = useTranslation();
const { labels, values } = React.useMemo(() => {
if (data && typeof data === 'object' && !Array.isArray(data)) {
const lbls = Array.isArray(data.labels) ? data.labels : [];
@@ -92,6 +94,12 @@ export default function PieChartCard({ data = [] }) {
const isEmpty = !labels || labels.length === 0 || !values || values.length === 0;
return (
<>{isEmpty ? <div className="chartCard__no__data">No Data</div> : <Pie data={chartData} options={options} />}</>
<>
{isEmpty ? (
<div className="chartCard__no__data">{t('dashboard.noData')}</div>
) : (
<Pie data={chartData} options={options} />
)}
</>
);
}

6
ui/src/components/footer/FredyFooter.jsx
View File

@@ -6,16 +6,18 @@
import './FredyFooter.less';
import { useSelector } from '../../services/state/store.js';
import { Layout } from '@douyinfe/semi-ui-19';
import { useTranslation } from '../../services/i18n/i18n.jsx';
export default function FredyFooter() {
const t = useTranslation();
const { Footer } = Layout;
const version = useSelector((state) => state.versionUpdate.versionUpdate);
return (
<Footer className="fredyFooter">
<span className="fredyFooter__version">Fredy v{version?.localFredyVersion || 'N/A'}</span>
<span className="fredyFooter__version">Fredy v{version?.localFredyVersion || t('common.na')}</span>
<span className="fredyFooter__credit">
Made with ❤️ by{' '}
{t('footer.madeWith')}{' '}
<a href="https://github.com/orangecoding" target="_blank" rel="noreferrer">
Christian Kellner
</a>

87
ui/src/components/grid/jobs/JobGrid.jsx
View File

@@ -48,12 +48,14 @@ import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-i
import JobsTable from '../../table/JobsTable.jsx';
import './JobGrid.less';
import { useTranslation } from '../../../services/i18n/i18n.jsx';
const { Text, Title } = Typography;
const getPopoverContent = (text) => <article className="jobPopoverContent">{text}</article>;
const JobGrid = () => {
const t = useTranslation();
const jobsData = useSelector((state) => state.jobsData);
const actions = useActions();
const navigate = useNavigate();
@@ -104,7 +106,7 @@ const JobGrid = () => {
actions.jobsData.setJobRunning(data.jobId, !!data.running);
// notify finish if it was triggered by this view
if (pendingJobIdRef.current === data.jobId && data.running === false) {
Toast.success('Job finished');
Toast.success(t('jobs.toastFinished'));
pendingJobIdRef.current = null;
}
}
@@ -161,17 +163,17 @@ const JobGrid = () => {
}
if (type === 'job') {
await xhrDelete('/api/jobs', { jobId });
Toast.success('Job and listings successfully removed');
Toast.success(t('jobs.toastDeletedWithListings'));
} else if (type === 'listings') {
await xhrDelete('/api/listings/job', { jobId, hardDelete });
Toast.success('Listings successfully removed');
Toast.success(t('jobs.toastListingsDeleted'));
}
loadData();
if (type === 'job') {
actions.jobsData.getJobs(); // refresh select list too
}
} catch (error) {
Toast.error(error.message || 'Error performing deletion');
Toast.error(error.message || t('jobs.toastDeleteError'));
} finally {
setDeleteModalVisible(false);
setPendingDeletion(null);
@@ -181,7 +183,7 @@ const JobGrid = () => {
const onJobStatusChanged = async (jobId, status) => {
try {
await xhrPut(`/api/jobs/${jobId}/status`, { status });
Toast.success('Job status successfully changed');
Toast.success(t('jobs.toastStatusChanged'));
loadData();
} catch (error) {
Toast.error(error.error);
@@ -192,21 +194,21 @@ const JobGrid = () => {
try {
const response = await xhrPost(`/api/jobs/${jobId}/run`);
if (response.status === 202) {
Toast.success('Job run started');
Toast.success(t('jobs.toastRunStarted'));
} else {
Toast.info('Job run requested');
Toast.info(t('jobs.toastRunRequested'));
}
pendingJobIdRef.current = jobId;
loadData();
} catch (error) {
if (error?.status === 409) {
Toast.warning(error?.json?.message || 'Job is already running');
Toast.warning(error?.json?.message || t('jobs.toastAlreadyRunning'));
} else if (error?.status === 403) {
Toast.error('You are not allowed to run this job');
Toast.error(t('jobs.toastNotAllowed'));
} else if (error?.status === 404) {
Toast.error('Job not found');
Toast.error(t('jobs.toastNotFound'));
} else {
Toast.error('Failed to trigger job');
Toast.error(t('jobs.toastRunFailed'));
}
}
};
@@ -222,7 +224,7 @@ const JobGrid = () => {
className="jobGrid__topbar__search"
prefix={<IconSearch />}
showClear
placeholder="Search"
placeholder={t('jobs.searchPlaceholder')}
onChange={handleFilterChange}
/>
@@ -235,39 +237,44 @@ const JobGrid = () => {
setActivityFilter(v === 'all' ? null : v === 'true');
}}
>
<Radio value="all">All</Radio>
<Radio value="true">Active</Radio>
<Radio value="false">Inactive</Radio>
<Radio value="all">{t('jobs.filterAll')}</Radio>
<Radio value="true">{t('jobs.filterActive')}</Radio>
<Radio value="false">{t('jobs.filterInactive')}</Radio>
</RadioGroup>
<Select prefix="Sort by" style={{ width: 200 }} value={sortField} onChange={(val) => setSortField(val)}>
<Select.Option value="name">Name</Select.Option>
<Select.Option value="numberOfFoundListings">Number of Listings</Select.Option>
<Select.Option value="enabled">Status</Select.Option>
<Select
prefix={t('jobs.sortPrefix')}
style={{ width: 200 }}
value={sortField}
onChange={(val) => setSortField(val)}
>
<Select.Option value="name">{t('jobs.sortByName')}</Select.Option>
<Select.Option value="numberOfFoundListings">{t('jobs.sortByListings')}</Select.Option>
<Select.Option value="enabled">{t('jobs.sortByStatus')}</Select.Option>
</Select>
<Button
icon={sortDir === 'asc' ? <IconArrowUp /> : <IconArrowDown />}
onClick={() => setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'))}
title={sortDir === 'asc' ? 'Ascending' : 'Descending'}
title={sortDir === 'asc' ? t('jobs.sortAscending') : t('jobs.sortDescending')}
/>
<div className="jobGrid__topbar__view-toggle">
<Tooltip content="Grid view">
<Tooltip content={t('jobs.tooltipGridView')}>
<Button
icon={<IconGridView />}
theme={viewMode === 'grid' ? 'solid' : 'borderless'}
onClick={() => actions.userSettings.setJobsViewMode('grid')}
aria-label="Grid view"
aria-label={t('common.ariaGridView')}
aria-pressed={viewMode === 'grid'}
/>
</Tooltip>
<Tooltip content="Table view">
<Tooltip content={t('jobs.tooltipTableView')}>
<Button
icon={<IconList />}
theme={viewMode === 'table' ? 'solid' : 'borderless'}
onClick={() => actions.userSettings.setJobsViewMode('table')}
aria-label="Table view"
aria-label={t('common.ariaTableView')}
aria-pressed={viewMode === 'table'}
/>
</Tooltip>
@@ -278,7 +285,7 @@ const JobGrid = () => {
<Empty
image={<IllustrationNoResult />}
darkModeImage={<IllustrationNoResultDark />}
description="No jobs available yet..."
description={t('jobs.empty')}
/>
)}
@@ -296,7 +303,7 @@ const JobGrid = () => {
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
{job.isOnlyShared && (
<Popover content={getPopoverContent('This job has been shared with you - read only.')}>
<Popover content={getPopoverContent(t('jobs.cardSharedReadOnly'))}>
<div>
<IconAlertTriangle style={{ color: 'rgba(var(--semi-yellow-7), 1)' }} />
</div>
@@ -304,7 +311,7 @@ const JobGrid = () => {
)}
{job.running && (
<Tag color="green" variant="light" size="small">
RUNNING
{t('jobs.cardRunning')}
</Tag>
)}
</div>
@@ -314,19 +321,19 @@ const JobGrid = () => {
<div className="jobGrid__card__stat jobGrid__card__stat--blue">
<span className="jobGrid__card__stat__number">{job.numberOfFoundListings || 0}</span>
<span className="jobGrid__card__stat__label">
<IconHome size="small" /> Listings
<IconHome size="small" /> {t('jobs.cardListings')}
</span>
</div>
<div className="jobGrid__card__stat jobGrid__card__stat--orange">
<span className="jobGrid__card__stat__number">{job.provider?.length || 0}</span>
<span className="jobGrid__card__stat__label">
<IconBriefcase size="small" /> Providers
<IconBriefcase size="small" /> {t('jobs.cardProviders')}
</span>
</div>
<div className="jobGrid__card__stat jobGrid__card__stat--purple">
<span className="jobGrid__card__stat__number">{job.notificationAdapter?.length || 0}</span>
<span className="jobGrid__card__stat__label">
<IconBell size="small" /> Adapters
<IconBell size="small" /> {t('jobs.cardAdapters')}
</span>
</div>
</div>
@@ -342,11 +349,11 @@ const JobGrid = () => {
size="small"
/>
<Text type="secondary" size="small">
Active
{t('jobs.cardActive')}
</Text>
</div>
<div className="jobGrid__actions">
<Popover content={getPopoverContent('Run Job')}>
<Popover content={getPopoverContent(t('jobs.popoverRunJob'))}>
<div>
<Button
type="primary"
@@ -359,7 +366,7 @@ const JobGrid = () => {
/>
</div>
</Popover>
<Popover content={getPopoverContent('Edit a Job')}>
<Popover content={getPopoverContent(t('jobs.popoverEditJob'))}>
<div>
<Button
type="secondary"
@@ -370,7 +377,7 @@ const JobGrid = () => {
/>
</div>
</Popover>
<Popover content={getPopoverContent('Clone Job')}>
<Popover content={getPopoverContent(t('jobs.popoverCloneJob'))}>
<div>
<Button
type="tertiary"
@@ -381,7 +388,7 @@ const JobGrid = () => {
/>
</div>
</Popover>
<Popover content={getPopoverContent('Delete all found Listings of this Job')}>
<Popover content={getPopoverContent(t('jobs.popoverDeleteListings'))}>
<div>
<Button
type="danger"
@@ -392,7 +399,7 @@ const JobGrid = () => {
/>
</div>
</Popover>
<Popover content={getPopoverContent('Delete Job')}>
<Popover content={getPopoverContent(t('jobs.popoverDeleteJob'))}>
<div>
<Button
type="danger"
@@ -433,14 +440,10 @@ const JobGrid = () => {
)}
<ListingDeletionModal
visible={deleteModalVisible}
title={pendingDeletion?.type === 'job' ? 'Delete Job' : 'Delete Listings'}
title={pendingDeletion?.type === 'job' ? t('jobs.deletion.title') : t('listing.deletion.title')}
showOptions={pendingDeletion?.type !== 'job'}
defaultDeleteType={defaultDeleteType}
message={
pendingDeletion?.type === 'job'
? 'Are you sure you want to delete this job? All associated listings will be removed from the database.'
: 'How would you like to delete the selected listing(s)?'
}
message={pendingDeletion?.type === 'job' ? t('jobs.deletion.message') : t('listing.deletion.message')}
onConfirm={confirmDeletion}
onCancel={() => {
setDeleteModalVisible(false);

213
ui/src/components/grid/listings/ListingsGrid.jsx
View File

@@ -19,119 +19,130 @@ import * as timeService from '../../../services/time/timeService.js';
import StatusControl from '../../listings/StatusControl.jsx';
import './ListingsGrid.less';
import { useTranslation, useLocale } from '../../../services/i18n/i18n.jsx';
/**
* @param {{ listings: object[], onWatch: Function, onNavigate: Function, onDelete: Function, onStatusChange: Function }} props
*/
const ListingsGrid = ({ listings, onWatch, onNavigate, onDelete, onStatusChange }) => (
<div className="listingsGrid__grid">
{listings.map((item) => (
<div
key={item.id}
className="listingsGrid__card"
style={{ cursor: 'pointer' }}
role="button"
tabIndex={0}
onClick={() => onNavigate(item.id)}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') onNavigate(item.id);
}}
>
<div className="listingsGrid__card__image-wrapper">
<img
src={item.image_url || no_image}
alt={item.title}
onError={(e) => {
e.target.src = no_image;
}}
/>
{!item.is_active && (
<div className="listingsGrid__card__inactive-watermark">
<span>Inactive</span>
</div>
)}
<Tooltip content={item.isWatched === 1 ? 'Remove from Watchlist' : 'Add to Watchlist'}>
<button
type="button"
className="listingsGrid__card__star"
onClick={(e) => onWatch(e, item)}
aria-label={item.isWatched === 1 ? 'Remove from watchlist' : 'Add to watchlist'}
const ListingsGrid = ({ listings, onWatch, onNavigate, onDelete, onStatusChange }) => {
const t = useTranslation();
const locale = useLocale();
return (
<div className="listingsGrid__grid">
{listings.map((item) => (
<div
key={item.id}
className="listingsGrid__card"
style={{ cursor: 'pointer' }}
role="button"
tabIndex={0}
onClick={() => onNavigate(item.id)}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') onNavigate(item.id);
}}
>
<div className="listingsGrid__card__image-wrapper">
<img
src={item.image_url || no_image}
alt={item.title}
onError={(e) => {
e.target.src = no_image;
}}
/>
{!item.is_active && (
<div className="listingsGrid__card__inactive-watermark">
<span>{t('listings.cardInactive')}</span>
</div>
)}
<Tooltip
content={
item.isWatched === 1 ? t('listings.tooltipRemoveFromWatchlist') : t('listings.tooltipAddToWatchlist')
}
>
{item.isWatched === 1 ? <IconStar /> : <IconStarStroked />}
</button>
</Tooltip>
</div>
<div className="listingsGrid__card__body">
<div className="listingsGrid__card__title" title={item.title}>
{item.title}
<button
type="button"
className="listingsGrid__card__star"
onClick={(e) => onWatch(e, item)}
aria-label={
item.isWatched === 1 ? t('listings.tooltipRemoveFromWatchlist') : t('listings.tooltipAddToWatchlist')
}
>
{item.isWatched === 1 ? <IconStar /> : <IconStarStroked />}
</button>
</Tooltip>
</div>
{item.price && (
<div className="listingsGrid__card__price">
<IconCart size="small" />
{item.price}
<div className="listingsGrid__card__body">
<div className="listingsGrid__card__title" title={item.title}>
{item.title}
</div>
)}
{item.address && (
{item.price && (
<div className="listingsGrid__card__price">
<IconCart size="small" />
{item.price}
</div>
)}
{item.address && (
<div className="listingsGrid__card__meta">
<IconMapPin />
{item.address}
</div>
)}
<div className="listingsGrid__card__meta">
<IconMapPin />
{item.address}
<IconBriefcase />
{item.provider}
</div>
)}
<div className="listingsGrid__card__meta">
<IconBriefcase />
{item.provider}
<div className="listingsGrid__card__provider">{timeService.format(item.created_at, false, locale)}</div>
</div>
<div className="listingsGrid__card__provider">{timeService.format(item.created_at, false)}</div>
</div>
<div className="listingsGrid__card__actions" onClick={(e) => e.stopPropagation()}>
<StatusControl
status={item.status?.status ?? null}
compact
onChange={(next) => onStatusChange?.(item, next)}
onTriggerClick={(e) => e.stopPropagation()}
/>
<Tooltip content="Original Listing">
<Button
size="small"
icon={<IconLink />}
style={{ color: '#60a5fa' }}
theme="borderless"
onClick={(e) => {
e.stopPropagation();
window.open(item.link, '_blank');
}}
<div className="listingsGrid__card__actions" onClick={(e) => e.stopPropagation()}>
<StatusControl
status={item.status?.status ?? null}
compact
onChange={(next) => onStatusChange?.(item, next)}
onTriggerClick={(e) => e.stopPropagation()}
/>
</Tooltip>
<Tooltip content="View in Fredy">
<Button
size="small"
icon={<IconEyeOpened />}
style={{ color: '#34d399' }}
theme="borderless"
onClick={(e) => {
e.stopPropagation();
onNavigate(item.id);
}}
/>
</Tooltip>
<Tooltip content="Remove">
<Button
size="small"
icon={<IconDelete />}
style={{ color: '#fb7185' }}
theme="borderless"
onClick={(e) => {
e.stopPropagation();
onDelete(item.id);
}}
/>
</Tooltip>
<Tooltip content={t('listings.tooltipOriginalListing')}>
<Button
size="small"
icon={<IconLink />}
style={{ color: '#60a5fa' }}
theme="borderless"
onClick={(e) => {
e.stopPropagation();
window.open(item.link, '_blank');
}}
/>
</Tooltip>
<Tooltip content={t('listings.tooltipViewInFredy')}>
<Button
size="small"
icon={<IconEyeOpened />}
style={{ color: '#34d399' }}
theme="borderless"
onClick={(e) => {
e.stopPropagation();
onNavigate(item.id);
}}
/>
</Tooltip>
<Tooltip content={t('listings.tooltipRemove')}>
<Button
size="small"
icon={<IconDelete />}
style={{ color: '#fb7185' }}
theme="borderless"
onClick={(e) => {
e.stopPropagation();
onDelete(item.id);
}}
/>
</Tooltip>
</div>
</div>
</div>
))}
</div>
);
))}
</div>
);
};
export default ListingsGrid;

66
ui/src/components/listings/ListingsOverview.jsx
View File

@@ -22,8 +22,10 @@ import ListingsTable from '../table/ListingsTable.jsx';
import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
import './ListingsOverview.less';
import { useTranslation } from '../../services/i18n/i18n.jsx';
const ListingsOverview = ({ mode = 'all' }) => {
const t = useTranslation();
const isWatchlistMode = mode === 'watchlist';
const listingsData = useSelector((state) => state.listingsData);
const providers = useSelector((state) => state.provider);
@@ -106,22 +108,24 @@ const ListingsOverview = ({ mode = 'all' }) => {
e.stopPropagation();
try {
await xhrPost('/api/listings/watch', { listingId: item.id });
Toast.success(item.isWatched === 1 ? 'Listing removed from Watchlist' : 'Listing added to Watchlist');
Toast.success(
item.isWatched === 1 ? t('listings.toastRemovedFromWatchlist') : t('listings.toastAddedToWatchlist'),
);
loadData();
} catch (e) {
console.error(e);
Toast.error('Failed to operate Watchlist');
Toast.error(t('listings.toastWatchlistError'));
}
};
const handleStatusChange = async (item, nextStatus) => {
try {
await actions.listingsData.setListingStatus(item.id, nextStatus);
Toast.success(nextStatus ? `Marked as ${nextStatus}` : 'Status cleared');
Toast.success(nextStatus ? `Marked as ${nextStatus}` : t('listings.toastStatusCleared'));
loadData();
} catch (e) {
console.error(e);
Toast.error('Failed to update status');
Toast.error(t('listings.toastStatusUpdateError'));
}
};
@@ -142,10 +146,10 @@ const ListingsOverview = ({ mode = 'all' }) => {
await actions.userSettings.setListingDeletionPreference({ skipPrompt: true, hardDelete });
}
await xhrDelete('/api/listings/', { ids: [id], hardDelete });
Toast.success('Listing successfully removed');
Toast.success(t('listings.toastDeleted'));
loadData();
} catch (error) {
Toast.error(error.message || 'Error deleting listing');
Toast.error(error.message || t('listings.toastDeleteError'));
} finally {
setDeleteModalVisible(false);
setListingToDelete(null);
@@ -161,7 +165,7 @@ const ListingsOverview = ({ mode = 'all' }) => {
className="listingsOverview__topbar__search"
prefix={<IconSearch />}
showClear
placeholder="Search"
placeholder={t('listings.searchPlaceholder')}
defaultValue={freeTextFilter ?? ''}
onChange={handleFilterChange}
/>
@@ -176,9 +180,9 @@ const ListingsOverview = ({ mode = 'all' }) => {
setPage(1);
}}
>
<Radio value="all">All</Radio>
<Radio value="true">Active</Radio>
<Radio value="false">Inactive</Radio>
<Radio value="all">{t('listings.filterAll')}</Radio>
<Radio value="true">{t('listings.filterActive')}</Radio>
<Radio value="false">{t('listings.filterInactive')}</Radio>
</RadioGroup>
{!isWatchlistMode && (
@@ -192,14 +196,14 @@ const ListingsOverview = ({ mode = 'all' }) => {
setPage(1);
}}
>
<Radio value="all">All</Radio>
<Radio value="true">Watched</Radio>
<Radio value="false">Unwatched</Radio>
<Radio value="all">{t('listings.filterAll')}</Radio>
<Radio value="true">{t('listings.filterWatched')}</Radio>
<Radio value="false">{t('listings.filterUnwatched')}</Radio>
</RadioGroup>
)}
<Select
placeholder="Status"
placeholder={t('listings.filterStatusPlaceholder')}
showClear
onChange={(val) => {
setStatusFilter(val ?? null);
@@ -208,14 +212,14 @@ const ListingsOverview = ({ mode = 'all' }) => {
value={statusFilter}
style={{ width: 150 }}
>
<Select.Option value="applied">Applied</Select.Option>
<Select.Option value="rejected">Rejected</Select.Option>
<Select.Option value="accepted">Accepted</Select.Option>
<Select.Option value="none">No status</Select.Option>
<Select.Option value="applied">{t('listings.filterStatusApplied')}</Select.Option>
<Select.Option value="rejected">{t('listings.filterStatusRejected')}</Select.Option>
<Select.Option value="accepted">{t('listings.filterStatusAccepted')}</Select.Option>
<Select.Option value="none">{t('listings.filterStatusNone')}</Select.Option>
</Select>
<Select
placeholder="Provider"
placeholder={t('listings.filterProviderPlaceholder')}
showClear
onChange={(val) => {
setProviderFilter(val);
@@ -232,7 +236,7 @@ const ListingsOverview = ({ mode = 'all' }) => {
</Select>
<Select
placeholder="Job"
placeholder={t('listings.filterJobPlaceholder')}
showClear
onChange={(val) => {
setJobNameFilter(val);
@@ -249,40 +253,40 @@ const ListingsOverview = ({ mode = 'all' }) => {
</Select>
<Select
prefix="Sort by"
prefix={t('listings.sortPrefix')}
className="listingsOverview__topbar__sort"
style={{ width: 220 }}
value={sortField}
onChange={(val) => setSortField(val)}
>
<Select.Option value="job_name">Job Name</Select.Option>
<Select.Option value="created_at">Listing Date</Select.Option>
<Select.Option value="price">Price</Select.Option>
<Select.Option value="provider">Provider</Select.Option>
<Select.Option value="job_name">{t('listings.sortByJobName')}</Select.Option>
<Select.Option value="created_at">{t('listings.sortByDate')}</Select.Option>
<Select.Option value="price">{t('listings.sortByPrice')}</Select.Option>
<Select.Option value="provider">{t('listings.sortByProvider')}</Select.Option>
</Select>
<Button
icon={sortDir === 'asc' ? <IconArrowUp /> : <IconArrowDown />}
onClick={() => setSortDir(sortDir === 'asc' ? 'desc' : 'asc')}
title={sortDir === 'asc' ? 'Ascending' : 'Descending'}
title={sortDir === 'asc' ? t('listings.sortAscending') : t('listings.sortDescending')}
/>
<div className="listingsOverview__topbar__view-toggle">
<Tooltip content="Grid view">
<Tooltip content={t('listings.tooltipGridView')}>
<Button
icon={<IconGridView />}
theme={viewMode === 'grid' ? 'solid' : 'borderless'}
onClick={() => actions.userSettings.setListingsViewMode('grid')}
aria-label="Grid view"
aria-label={t('common.ariaGridView')}
aria-pressed={viewMode === 'grid'}
/>
</Tooltip>
<Tooltip content="Table view">
<Tooltip content={t('listings.tooltipTableView')}>
<Button
icon={<IconList />}
theme={viewMode === 'table' ? 'solid' : 'borderless'}
onClick={() => actions.userSettings.setListingsViewMode('table')}
aria-label="Table view"
aria-label={t('common.ariaTableView')}
aria-pressed={viewMode === 'table'}
/>
</Tooltip>
@@ -293,7 +297,7 @@ const ListingsOverview = ({ mode = 'all' }) => {
<Empty
image={<IllustrationNoResult />}
darkModeImage={<IllustrationNoResultDark />}
description="No listings available yet..."
description={t('listings.empty')}
/>
)}

32
ui/src/components/listings/StatusControl.jsx
View File

@@ -8,27 +8,12 @@ import { Dropdown, Button, Tooltip } from '@douyinfe/semi-ui-19';
import { IconChevronDown } from '@douyinfe/semi-icons';
import './StatusControl.less';
const STATUS_TOOLTIP =
'Track where you stand with this listing: Applied once you have reached out, Rejected if it did not work out, or Accepted if you got it.';
import { useTranslation } from '../../services/i18n/i18n.jsx';
/**
* @typedef {('applied'|'rejected'|'accepted'|null)} ListingStatus
*/
const STATUS_OPTIONS = [
{ value: null, label: 'None' },
{ value: 'applied', label: 'Applied' },
{ value: 'rejected', label: 'Rejected' },
{ value: 'accepted', label: 'Accepted' },
];
/**
* Look up the option metadata for a status value.
* @param {ListingStatus} status
*/
const optionFor = (status) => STATUS_OPTIONS.find((o) => o.value === status) ?? STATUS_OPTIONS[0];
/**
* Shared control for setting a listing's user-decision status
* (Applied / Rejected / Accepted).
@@ -44,8 +29,21 @@ const optionFor = (status) => STATUS_OPTIONS.find((o) => o.value === status) ??
* @param {(e: React.MouseEvent) => void} [props.onTriggerClick] - Optional click handler to stop propagation on the trigger.
*/
export default function StatusControl({ status = null, onChange, compact = false, onTriggerClick }) {
const t = useTranslation();
const [open, setOpen] = useState(false);
const [tooltipOpen, setTooltipOpen] = useState(false);
const STATUS_OPTIONS = [
{ value: null, label: t('listings.status.none') },
{ value: 'applied', label: t('listings.status.applied') },
{ value: 'rejected', label: t('listings.status.rejected') },
{ value: 'accepted', label: t('listings.status.accepted') },
];
const STATUS_TOOLTIP = t('listings.status.tooltip');
const optionFor = (status) => STATUS_OPTIONS.find((o) => o.value === status) ?? STATUS_OPTIONS[0];
const current = optionFor(status);
const handlePick = (next) => {
@@ -94,7 +92,7 @@ export default function StatusControl({ status = null, onChange, compact = false
}}
className={className}
>
{status ? current.label : 'Status'}
{status ? current.label : t('listings.status.statusLabel')}
</Button>
</Tooltip>
);

26
ui/src/components/navigation/Navigation.jsx
View File

@@ -13,8 +13,10 @@ import { useLocation, useNavigate } from 'react-router-dom';
import './Navigate.less';
import { useScreenWidth } from '../../hooks/screenWidth.js';
import { useTranslation } from '../../services/i18n/i18n.jsx';
export default function Navigation({ isAdmin }) {
const t = useTranslation();
const navigate = useNavigate();
const location = useLocation();
@@ -28,16 +30,16 @@ export default function Navigation({ isAdmin }) {
}, [width]);
const items = [
{ itemKey: '/dashboard', text: 'Dashboard', icon: <IconHistogram /> },
{ itemKey: '/jobs', text: 'Jobs', icon: <IconTerminal /> },
{ itemKey: '/dashboard', text: t('nav.dashboard'), icon: <IconHistogram /> },
{ itemKey: '/jobs', text: t('nav.jobs'), icon: <IconTerminal /> },
{
itemKey: 'listings',
text: 'Listings',
text: t('nav.listings'),
icon: <IconStar />,
items: [
{ itemKey: '/listings', text: 'Overview' },
{ itemKey: '/map', text: 'Map View' },
{ itemKey: '/listings/watchlist', text: 'Watchlist' },
{ itemKey: '/listings', text: t('nav.listingsOverview') },
{ itemKey: '/map', text: t('nav.mapView') },
{ itemKey: '/listings/watchlist', text: t('nav.watchlist') },
],
},
];
@@ -45,19 +47,19 @@ export default function Navigation({ isAdmin }) {
if (isAdmin) {
items.push({
itemKey: 'settings',
text: 'Settings',
text: t('nav.settings'),
icon: <IconSetting />,
items: [
{ itemKey: '/users', text: 'User Management' },
{ itemKey: '/generalSettings', text: 'Settings' },
{ itemKey: '/users', text: t('nav.userManagement') },
{ itemKey: '/generalSettings', text: t('nav.settingsPage') },
],
});
} else {
items.push({
itemKey: 'settings',
text: 'Settings',
text: t('nav.settings'),
icon: <IconSetting />,
items: [{ itemKey: '/generalSettings', text: 'Settings' }],
items: [{ itemKey: '/generalSettings', text: t('nav.settingsPage') }],
});
}
@@ -104,7 +106,7 @@ export default function Navigation({ isAdmin }) {
<button
className="navigate__toggle-btn"
onClick={() => setCollapsed(!collapsed)}
title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
title={collapsed ? t('nav.expandSidebar') : t('nav.collapseSidebar')}
>
<IconSidebar size="default" />
</button>

4
ui/src/components/news/NewsModal.jsx
View File

@@ -10,10 +10,12 @@ import newsConfig from '../../assets/news/news.json';
import { useActions, useSelector } from '../../services/state/store';
import './NewsModal.less';
import { useTranslation } from '../../services/i18n/i18n.jsx';
const newsMedia = import.meta.glob('../../assets/news/*', { eager: true, query: '?url', import: 'default' });
const NewsModal = () => {
const t = useTranslation();
const screenWidth = useScreenWidth();
const newsHash = useSelector((state) => state.userSettings.settings.news_hash);
const userSettingsLoaded = useSelector((state) => state.userSettings.loaded);
@@ -38,7 +40,7 @@ const NewsModal = () => {
(item.media.includes('mp4') ? (
<video controls width="500">
<source src={newsMedia[`../../assets/news/${item.media}`]} type="video/mp4" />
Your browser does not support the video tag.
{t('news.videoFallback')}
</video>
) : (
<img

4
ui/src/components/permission/InsufficientPermission.jsx
View File

@@ -4,13 +4,15 @@
*/
import insufficientPermission from '../../assets/insufficient_permission.png';
import { useTranslation } from '../../services/i18n/i18n.jsx';
export default function InsufficientPermission() {
const t = useTranslation();
return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
<img src={insufficientPermission} height={250} />
<br />
<h4>Insufficient permission :(</h4>
<h4>{t('permission.title')}</h4>
</div>
);
}

196
ui/src/components/table/JobsTable.jsx
View File

@@ -17,112 +17,116 @@ import {
} from '@douyinfe/semi-icons';
import './JobsTable.less';
import { useTranslation } from '../../services/i18n/i18n.jsx';
/**
* @param {{ jobs: object[], onRun: Function, onEdit: Function, onClone: Function, onDeleteListings: Function, onDeleteJob: Function, onStatusChange: Function }} props
*/
const JobsTable = ({ jobs, onRun, onEdit, onClone, onDeleteListings, onDeleteJob, onStatusChange }) => (
<div className="jobsTable">
{jobs.map((job) => (
<div key={job.id} className={`jobsTable__row${!job.enabled ? ' jobsTable__row--inactive' : ''}`}>
<div className="jobsTable__row__dot">
<span
className={`jobsTable__row__dot__indicator${job.enabled ? ' jobsTable__row__dot__indicator--active' : ''}`}
/>
</div>
const JobsTable = ({ jobs, onRun, onEdit, onClone, onDeleteListings, onDeleteJob, onStatusChange }) => {
const t = useTranslation();
return (
<div className="jobsTable">
{jobs.map((job) => (
<div key={job.id} className={`jobsTable__row${!job.enabled ? ' jobsTable__row--inactive' : ''}`}>
<div className="jobsTable__row__dot">
<span
className={`jobsTable__row__dot__indicator${job.enabled ? ' jobsTable__row__dot__indicator--active' : ''}`}
/>
</div>
<div className="jobsTable__row__name" title={job.name}>
{job.name}
</div>
<div className="jobsTable__row__name" title={job.name}>
{job.name}
</div>
<div className="jobsTable__row__stat jobsTable__row__stat--blue">
<IconHome size="small" />
{job.numberOfFoundListings || 0}
</div>
<div className="jobsTable__row__stat jobsTable__row__stat--blue">
<IconHome size="small" />
{job.numberOfFoundListings || 0}
</div>
<div className="jobsTable__row__stat jobsTable__row__stat--orange">
<IconBriefcase size="small" />
{job.provider?.length || 0}
</div>
<div className="jobsTable__row__stat jobsTable__row__stat--orange">
<IconBriefcase size="small" />
{job.provider?.length || 0}
</div>
<div className="jobsTable__row__stat jobsTable__row__stat--purple">
<IconBell size="small" />
{job.notificationAdapter?.length || 0}
</div>
<div className="jobsTable__row__stat jobsTable__row__stat--purple">
<IconBell size="small" />
{job.notificationAdapter?.length || 0}
</div>
<div className="jobsTable__row__badges">
<Switch
size="small"
checked={job.enabled}
disabled={job.isOnlyShared}
onChange={(checked) => onStatusChange(job.id, checked)}
/>
{job.running && (
<Tag color="green" variant="light" size="small">
RUNNING
</Tag>
)}
{job.isOnlyShared && (
<Tooltip content="Shared with you - read only">
<span style={{ display: 'flex', alignItems: 'center' }}>
<IconAlertTriangle style={{ color: 'rgba(var(--semi-yellow-7), 1)' }} />
</span>
<div className="jobsTable__row__badges">
<Switch
size="small"
checked={job.enabled}
disabled={job.isOnlyShared}
onChange={(checked) => onStatusChange(job.id, checked)}
/>
{job.running && (
<Tag color="green" variant="light" size="small">
{t('jobs.cardRunning')}
</Tag>
)}
{job.isOnlyShared && (
<Tooltip content={t('jobs.tableSharedTooltip')}>
<span style={{ display: 'flex', alignItems: 'center' }}>
<IconAlertTriangle style={{ color: 'rgba(var(--semi-yellow-7), 1)' }} />
</span>
</Tooltip>
)}
</div>
<div className="jobsTable__row__actions">
<Tooltip content={t('jobs.tableRunJob')}>
<Button
type="primary"
style={{ background: '#21aa21b5' }}
size="small"
theme="solid"
icon={<IconPlayCircle />}
disabled={job.isOnlyShared || job.running}
onClick={() => onRun(job.id)}
/>
</Tooltip>
)}
<Tooltip content={t('jobs.tableEditJob')}>
<Button
type="secondary"
size="small"
icon={<IconEdit />}
disabled={job.isOnlyShared}
onClick={() => onEdit(job.id)}
/>
</Tooltip>
<Tooltip content={t('jobs.tableCloneJob')}>
<Button
type="tertiary"
size="small"
icon={<IconCopy />}
disabled={job.isOnlyShared}
onClick={() => onClone(job.id)}
/>
</Tooltip>
<Tooltip content={t('jobs.tableDeleteListings')}>
<Button
type="danger"
size="small"
icon={<IconDescend2 />}
disabled={job.isOnlyShared}
onClick={() => onDeleteListings(job.id)}
/>
</Tooltip>
<Tooltip content={t('jobs.tableDeleteJob')}>
<Button
type="danger"
size="small"
icon={<IconDelete />}
disabled={job.isOnlyShared}
onClick={() => onDeleteJob(job.id)}
/>
</Tooltip>
</div>
</div>
<div className="jobsTable__row__actions">
<Tooltip content="Run Job">
<Button
type="primary"
style={{ background: '#21aa21b5' }}
size="small"
theme="solid"
icon={<IconPlayCircle />}
disabled={job.isOnlyShared || job.running}
onClick={() => onRun(job.id)}
/>
</Tooltip>
<Tooltip content="Edit Job">
<Button
type="secondary"
size="small"
icon={<IconEdit />}
disabled={job.isOnlyShared}
onClick={() => onEdit(job.id)}
/>
</Tooltip>
<Tooltip content="Clone Job">
<Button
type="tertiary"
size="small"
icon={<IconCopy />}
disabled={job.isOnlyShared}
onClick={() => onClone(job.id)}
/>
</Tooltip>
<Tooltip content="Delete all found Listings">
<Button
type="danger"
size="small"
icon={<IconDescend2 />}
disabled={job.isOnlyShared}
onClick={() => onDeleteListings(job.id)}
/>
</Tooltip>
<Tooltip content="Delete Job">
<Button
type="danger"
size="small"
icon={<IconDelete />}
disabled={job.isOnlyShared}
onClick={() => onDeleteJob(job.id)}
/>
</Tooltip>
</div>
</div>
))}
</div>
);
))}
</div>
);
};
export default JobsTable;

213
ui/src/components/table/ListingsTable.jsx
View File

@@ -19,120 +19,127 @@ import * as timeService from '../../services/time/timeService.js';
import StatusControl from '../listings/StatusControl.jsx';
import './ListingsTable.less';
import { useTranslation, useLocale } from '../../services/i18n/i18n.jsx';
/**
* @param {{ listings: object[], onWatch: Function, onNavigate: Function, onDelete: Function, onStatusChange: Function }} props
*/
const ListingsTable = ({ listings, onWatch, onNavigate, onDelete, onStatusChange }) => (
<div className="listingsTable">
{listings.map((item) => (
<div
key={item.id}
className={`listingsTable__row${!item.is_active ? ' listingsTable__row--inactive' : ''}`}
role="button"
tabIndex={0}
onClick={() => onNavigate(item.id)}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') onNavigate(item.id);
}}
>
<div className="listingsTable__row__thumb">
<img
src={item.image_url || no_image}
alt={item.title}
onError={(e) => {
e.target.src = no_image;
}}
/>
</div>
const ListingsTable = ({ listings, onWatch, onNavigate, onDelete, onStatusChange }) => {
const t = useTranslation();
const locale = useLocale();
return (
<div className="listingsTable">
{listings.map((item) => (
<div
key={item.id}
className={`listingsTable__row${!item.is_active ? ' listingsTable__row--inactive' : ''}`}
role="button"
tabIndex={0}
onClick={() => onNavigate(item.id)}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') onNavigate(item.id);
}}
>
<div className="listingsTable__row__thumb">
<img
src={item.image_url || no_image}
alt={item.title}
onError={(e) => {
e.target.src = no_image;
}}
/>
</div>
<div className="listingsTable__row__title" title={item.title}>
{item.title}
</div>
<div className="listingsTable__row__title" title={item.title}>
{item.title}
</div>
<div className="listingsTable__row__price">
{item.price ? (
formatEuroPrice(item.price)
) : (
<span className="listingsTable__row__empty">---</span>
)}
</div>
<div className="listingsTable__row__price">
{item.price ? formatEuroPrice(item.price) : <span className="listingsTable__row__empty">---</span>}
</div>
<div className="listingsTable__row__address">
{item.address ? (
<>
<IconMapPin size="small" />
{item.address}
</>
) : (
<span className="listingsTable__row__empty">---</span>
)}
</div>
<div className="listingsTable__row__address">
{item.address ? (
<>
<IconMapPin size="small" />
{item.address}
</>
) : (
<span className="listingsTable__row__empty">---</span>
)}
</div>
<div className="listingsTable__row__meta">
<IconBriefcase size="small" />
{item.provider}
</div>
<div className="listingsTable__row__meta">
<IconBriefcase size="small" />
{item.provider}
</div>
<div className="listingsTable__row__date">{timeService.format(item.created_at, false)}</div>
<div className="listingsTable__row__date">{timeService.format(item.created_at, false, locale)}</div>
<div className="listingsTable__row__actions" onClick={(e) => e.stopPropagation()}>
<StatusControl
status={item.status?.status ?? null}
compact
onChange={(next) => onStatusChange?.(item, next)}
onTriggerClick={(e) => e.stopPropagation()}
/>
<Tooltip content={item.isWatched === 1 ? 'Remove from Watchlist' : 'Add to Watchlist'}>
<button
type="button"
className="listingsTable__row__star"
onClick={(e) => onWatch(e, item)}
aria-label={item.isWatched === 1 ? 'Remove from watchlist' : 'Add to watchlist'}
<div className="listingsTable__row__actions" onClick={(e) => e.stopPropagation()}>
<StatusControl
status={item.status?.status ?? null}
compact
onChange={(next) => onStatusChange?.(item, next)}
onTriggerClick={(e) => e.stopPropagation()}
/>
<Tooltip
content={
item.isWatched === 1 ? t('listings.tooltipRemoveFromWatchlist') : t('listings.tooltipAddToWatchlist')
}
>
{item.isWatched === 1 ? <IconStar /> : <IconStarStroked />}
</button>
</Tooltip>
<Tooltip content="Original Listing">
<Button
size="small"
icon={<IconLink />}
style={{ color: '#60a5fa' }}
theme="borderless"
onClick={(e) => {
e.stopPropagation();
window.open(item.link, '_blank');
}}
/>
</Tooltip>
<Tooltip content="View in Fredy">
<Button
size="small"
icon={<IconEyeOpened />}
style={{ color: '#34d399' }}
theme="borderless"
onClick={(e) => {
e.stopPropagation();
onNavigate(item.id);
}}
/>
</Tooltip>
<Tooltip content="Remove">
<Button
size="small"
icon={<IconDelete />}
style={{ color: '#fb7185' }}
theme="borderless"
onClick={(e) => {
e.stopPropagation();
onDelete(item.id);
}}
/>
</Tooltip>
<button
type="button"
className="listingsTable__row__star"
onClick={(e) => onWatch(e, item)}
aria-label={
item.isWatched === 1 ? t('listings.tooltipRemoveFromWatchlist') : t('listings.tooltipAddToWatchlist')
}
>
{item.isWatched === 1 ? <IconStar /> : <IconStarStroked />}
</button>
</Tooltip>
<Tooltip content={t('listings.tooltipOriginalListing')}>
<Button
size="small"
icon={<IconLink />}
style={{ color: '#60a5fa' }}
theme="borderless"
onClick={(e) => {
e.stopPropagation();
window.open(item.link, '_blank');
}}
/>
</Tooltip>
<Tooltip content={t('listings.tooltipViewInFredy')}>
<Button
size="small"
icon={<IconEyeOpened />}
style={{ color: '#34d399' }}
theme="borderless"
onClick={(e) => {
e.stopPropagation();
onNavigate(item.id);
}}
/>
</Tooltip>
<Tooltip content={t('listings.tooltipRemove')}>
<Button
size="small"
icon={<IconDelete />}
style={{ color: '#fb7185' }}
theme="borderless"
onClick={(e) => {
e.stopPropagation();
onDelete(item.id);
}}
/>
</Tooltip>
</div>
</div>
</div>
))}
</div>
);
))}
</div>
);
};
export default ListingsTable;

6
ui/src/components/table/NotificationAdapterTable.jsx
View File

@@ -5,15 +5,17 @@
import { Empty, Table, Button } from '@douyinfe/semi-ui-19';
import { IconDelete, IconEdit } from '@douyinfe/semi-icons';
import { useTranslation } from '../../services/i18n/i18n.jsx';
export default function NotificationAdapterTable({ notificationAdapter = [], onRemove, onEdit } = {}) {
const t = useTranslation();
return (
<Table
pagination={false}
empty={<Empty description="No notification adapters found." />}
empty={<Empty description={t('notification.tableEmptyState')} />}
columns={[
{
title: 'Name',
title: t('notification.tableColumnName'),
dataIndex: 'name',
},

10
ui/src/components/table/ProviderTable.jsx
View File

@@ -6,23 +6,25 @@
import { Empty, Table, Button } from '@douyinfe/semi-ui-19';
import { IconDelete, IconEdit } from '@douyinfe/semi-icons';
import { Typography } from '@douyinfe/semi-ui';
import { useTranslation } from '../../services/i18n/i18n.jsx';
export default function ProviderTable({ providerData = [], onRemove, onEdit } = {}) {
const t = useTranslation();
const { Text } = Typography;
return (
<Table
pagination={false}
empty={<Empty description="No providers found." />}
empty={<Empty description={t('provider.tableEmptyState')} />}
columns={[
{
title: 'Name',
title: t('provider.tableColumnName'),
dataIndex: 'name',
},
{
title: 'URL',
title: t('provider.tableColumnUrl'),
dataIndex: 'url',
render: (_, data) => {
return <Text link={{ href: data.url, target: '_blank' }}>Open Provider</Text>;
return <Text link={{ href: data.url, target: '_blank' }}>{t('provider.tableOpenProvider')}</Text>;
},
},
{

26
ui/src/components/table/UserTable.jsx
View File

@@ -7,19 +7,25 @@ import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-i
import { format } from '../../services/time/timeService';
import { Table, Button, Empty, Tag } from '@douyinfe/semi-ui-19';
import { IconDelete, IconEdit } from '@douyinfe/semi-icons';
const empty = (
<Empty image={<IllustrationNoResult />} darkModeImage={<IllustrationNoResultDark />} description="No users found." />
);
import { useTranslation, useLocale } from '../../services/i18n/i18n.jsx';
export default function UserTable({ user = [], onUserRemoval, onUserEdit } = {}) {
const t = useTranslation();
const locale = useLocale();
const empty = (
<Empty
image={<IllustrationNoResult />}
darkModeImage={<IllustrationNoResultDark />}
description={t('users.emptyState')}
/>
);
return (
<Table
pagination={false}
empty={empty}
columns={[
{
title: 'User',
title: t('users.tableColumnUser'),
dataIndex: 'username',
render: (value, record) => (
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
@@ -38,23 +44,23 @@ export default function UserTable({ user = [], onUserRemoval, onUserEdit } = {})
padding: '0 8px',
}}
>
ADMIN
{t('users.tableAdminBadge')}
</Tag>
)}
</div>
),
},
{
title: 'Last login',
title: t('users.tableColumnLastLogin'),
dataIndex: 'lastLogin',
render: (value) => (value == null ? '---' : format(value)),
render: (value) => (value == null ? '---' : format(value, true, locale)),
},
{
title: 'Jobs',
title: t('users.tableColumnJobs'),
dataIndex: 'numberOfJobs',
},
{
title: 'MCP Token',
title: t('users.tableColumnMcpToken'),
dataIndex: 'mcpToken',
render: (value) => (
<span

29
ui/src/components/tracking/TrackingModal.jsx
View File

@@ -9,6 +9,7 @@ import { xhrPost } from '../../services/xhr.js';
import './TrackingModal.less';
import inDevelopment from '../../services/developmentMode.js';
import { useTranslation } from '../../services/i18n/i18n.jsx';
const saveResponse = async (analyticsEnabled) => {
await xhrPost('/api/admin/generalSettings', {
@@ -17,6 +18,8 @@ const saveResponse = async (analyticsEnabled) => {
};
export default function TrackingModal() {
const t = useTranslation();
if (inDevelopment()) {
return null;
}
@@ -34,27 +37,17 @@ export default function TrackingModal() {
}}
maskClosable={false}
closable={false}
okText="Yes! I want to help"
cancelText="No, thanks"
okText={t('tracking.okText')}
cancelText={t('tracking.cancelText')}
>
<Logo white />
<div className="trackingModal__description">
<p>Hey 👋</p>
<p>Fed up with popups? Yeah, me too. But this one’s important, and I promise it will only appear once ;)</p>
<p>
Fredy is completely free (and will always remain free). If you’d like, you can support me by donating through
my GitHub, but there’s absolutely no obligation to do so.
</p>
<p>
However, it would be a huge help if you’d allow me to collect some analytical data. Wait, before you click
"no", let me explain. If you agree, Fredy will send a ping once every 6 hours to my internal tracking project.
(Will be open-sourced soon)
</p>
<p>
The data includes: names of active adapters/providers, OS, architecture, Node version, and language. The
information is entirely anonymous and helps me understand which adapters/providers are most frequently used.
</p>
<p>Thanks🤘</p>
<p>{t('tracking.greeting')}</p>
<p>{t('tracking.paragraph1')}</p>
<p>{t('tracking.paragraph2')}</p>
<p>{t('tracking.paragraph3')}</p>
<p>{t('tracking.paragraph4')}</p>
<p>{t('tracking.thanks')}</p>
</div>
</Modal>
);

18
ui/src/components/version/VersionBanner.jsx
View File

@@ -9,10 +9,12 @@ import { IconAlertCircle, IconArrowRight } from '@douyinfe/semi-icons';
import { useSelector } from '../../services/state/store.js';
import './VersionBanner.less';
import { useTranslation } from '../../services/i18n/i18n.jsx';
const { Text } = Typography;
export default function VersionBanner() {
const t = useTranslation();
const [modalVisible, setModalVisible] = useState(false);
const versionUpdate = useSelector((state) => state.versionUpdate.versionUpdate);
@@ -28,13 +30,13 @@ export default function VersionBanner() {
<Space spacing={8} align="center">
<IconAlertCircle size="small" />
<Text strong size="small">
New version available
{t('version.newVersionAvailable')}
</Text>
<Tag color="amber" size="small" shape="circle">
{versionUpdate.version}
</Tag>
<Text type="tertiary" size="small">
Current: {versionUpdate.localFredyVersion}
{t('version.currentLabel', { version: versionUpdate.localFredyVersion })}
</Text>
</Space>
<Button
@@ -44,7 +46,7 @@ export default function VersionBanner() {
iconPosition="right"
onClick={() => setModalVisible(true)}
>
Release notes
{t('version.releaseNotes')}
</Button>
</div>
}
@@ -54,7 +56,7 @@ export default function VersionBanner() {
<Space spacing={8} align="center">
<Text strong>Fredy {versionUpdate.version}</Text>
<Tag color="amber" size="small">
New
{t('version.newBadge')}
</Tag>
</Space>
}
@@ -63,21 +65,21 @@ export default function VersionBanner() {
width={640}
footer={
<Space>
<Button onClick={() => setModalVisible(false)}>Close</Button>
<Button onClick={() => setModalVisible(false)}>{t('version.modalClose')}</Button>
<Button
type="primary"
icon={<IconArrowRight />}
iconPosition="right"
onClick={() => window.open(versionUpdate.url, '_blank')}
>
View on GitHub
{t('version.viewOnGithub')}
</Button>
</Space>
}
>
<Descriptions row size="small" className="versionBanner__details">
<Descriptions.Item itemKey="Your Version">{versionUpdate.localFredyVersion}</Descriptions.Item>
<Descriptions.Item itemKey="Latest Version">{versionUpdate.version}</Descriptions.Item>
<Descriptions.Item itemKey={t('version.yourVersion')}>{versionUpdate.localFredyVersion}</Descriptions.Item>
<Descriptions.Item itemKey={t('version.latestVersion')}>{versionUpdate.version}</Descriptions.Item>
</Descriptions>
<div className="versionBanner__notes">
<MarkdownRender raw={versionUpdate.body} />

456
ui/src/locales/de.json Normal file
View File

@@ -0,0 +1,456 @@
{
"_meta": {
"flag": "🇩🇪",
"name": "Deutsch",
"locale": "de-DE",
"semiLocale": "de"
},
"app.demoBanner": "Du nutzt gerade die Demo-Version von Fredy. Es werden keine Immo-Sites gescrapt, alle Änderungen werden um Mitternacht zurückgesetzt.",
"nav.dashboard": "Dashboard",
"nav.jobs": "Jobs",
"nav.listings": "Inserate",
"nav.listingsOverview": "Übersicht",
"nav.mapView": "Kartenansicht",
"nav.watchlist": "Watchlist",
"nav.settings": "Einstellungen",
"nav.userManagement": "Benutzerverwaltung",
"nav.settingsPage": "Einstellungen",
"nav.expandSidebar": "Seitenleiste ausklappen",
"nav.collapseSidebar": "Seitenleiste einklappen",
"login.usernamePlaceholder": "Benutzername",
"login.passwordPlaceholder": "Passwort",
"login.loginButton": "Anmelden",
"login.errorMandatory": "Benutzername und Passwort sind Pflichtfelder.",
"login.errorInvalid": "Anmeldung fehlgeschlagen. Bitte überprüfe Benutzername und Passwort.",
"login.demoBanner": "Dies ist die Demo-Version von Fredy. Verwende 'demo' als Benutzername & Passwort zum Einloggen.",
"dashboard.title": "Dashboard",
"dashboard.sectionGeneral": "Allgemein",
"dashboard.sectionOverview": "Übersicht",
"dashboard.sectionProviderInsights": "Anbieter-Einblicke",
"dashboard.searchInterval": "Suchintervall",
"dashboard.searchIntervalDesc": "Zeitintervall für Job-Ausführung",
"dashboard.lastSearch": "Letzte Suche",
"dashboard.lastSearchDesc": "Zeitstempel der letzten Ausführung",
"dashboard.nextSearch": "Nächste Suche",
"dashboard.nextSearchDesc": "Zeitstempel der nächsten Ausführung",
"dashboard.searchNow": "Jetzt suchen",
"dashboard.searchNowDesc": "Suche sofort starten",
"dashboard.searchNowButton": "Jetzt suchen",
"dashboard.searchNowStarted": "Fredy-Suche erfolgreich gestartet.",
"dashboard.searchNowFailed": "Suche konnte nicht gestartet werden",
"dashboard.kpiJobs": "Jobs",
"dashboard.kpiJobsDesc": "Gesamtanzahl der Jobs",
"dashboard.kpiListings": "Inserate",
"dashboard.kpiListingsDesc": "Insgesamt gefundene Inserate",
"dashboard.kpiActiveListings": "Aktive Inserate",
"dashboard.kpiActiveListingsDesc": "Gesamtanzahl aktiver Inserate",
"dashboard.kpiMedianPrice": "Medianpreis",
"dashboard.kpiMedianPriceDesc": "Medianpreis der Inserate",
"jobs.title": "Jobs",
"jobs.newJob": "Neuer Job",
"jobs.searchPlaceholder": "Suchen",
"jobs.filterAll": "Alle",
"jobs.filterActive": "Aktiv",
"jobs.filterInactive": "Inaktiv",
"jobs.sortByName": "Name",
"jobs.sortByListings": "Anzahl Inserate",
"jobs.sortByStatus": "Status",
"jobs.sortPrefix": "Sortieren nach",
"jobs.sortAscending": "Aufsteigend",
"jobs.sortDescending": "Absteigend",
"jobs.tooltipGridView": "Rasteransicht",
"jobs.tooltipTableView": "Tabellenansicht",
"jobs.empty": "Noch keine Jobs vorhanden...",
"jobs.cardListings": "Inserate",
"jobs.cardProviders": "Anbieter",
"jobs.cardAdapters": "Adapter",
"jobs.cardActive": "Aktiv",
"jobs.cardSharedReadOnly": "Dieser Job wurde mit dir geteilt (nur lesbar).",
"jobs.cardRunning": "LÄUFT",
"jobs.popoverRunJob": "Job ausführen",
"jobs.popoverEditJob": "Job bearbeiten",
"jobs.popoverCloneJob": "Job klonen",
"jobs.popoverDeleteListings": "Alle gefundenen Inserate dieses Jobs löschen",
"jobs.popoverDeleteJob": "Job löschen",
"jobs.toastFinished": "Job abgeschlossen",
"jobs.toastRunStarted": "Job-Ausführung gestartet",
"jobs.toastRunRequested": "Job-Ausführung angefordert",
"jobs.toastAlreadyRunning": "Job läuft bereits",
"jobs.toastNotAllowed": "Du bist nicht berechtigt, diesen Job auszuführen",
"jobs.toastNotFound": "Job nicht gefunden",
"jobs.toastRunFailed": "Job konnte nicht gestartet werden",
"jobs.toastStatusChanged": "Job-Status erfolgreich geändert",
"jobs.toastDeletedWithListings": "Job und Inserate erfolgreich entfernt",
"jobs.toastListingsDeleted": "Inserate erfolgreich entfernt",
"jobs.toastDeleteError": "Fehler beim Löschen",
"jobs.tableSharedTooltip": "Mit dir geteilt (nur lesbar)",
"jobs.tableRunJob": "Job ausführen",
"jobs.tableEditJob": "Job bearbeiten",
"jobs.tableCloneJob": "Job klonen",
"jobs.tableDeleteListings": "Alle gefundenen Inserate löschen",
"jobs.tableDeleteJob": "Job löschen",
"jobs.mutation.editTitle": "Job bearbeiten",
"jobs.mutation.createTitle": "Neuen Job erstellen",
"jobs.mutation.back": "Zurück",
"jobs.mutation.save": "Speichern",
"jobs.mutation.cancel": "Abbrechen",
"jobs.mutation.saved": "Job erfolgreich gespeichert...",
"jobs.mutation.sectionName": "Name",
"jobs.mutation.namePlaceholder": "Name",
"jobs.mutation.sectionProviders": "Anbieter",
"jobs.mutation.providersHelp": "Ein Anbieter ist der Dienst (z. B. ImmoScout24, Kleinanzeigen), den Fredy nach neuen Inseraten durchsucht. Fredy öffnet einen neuen Tab mit der Website des Anbieters. Du musst deine Suchparameter anpassen und auf 'Suchen' klicken. Sobald die Ergebnisse angezeigt werden, kopiere die Browser-URL hier hinein.",
"jobs.mutation.addProvider": "Neuen Anbieter hinzufügen",
"jobs.mutation.sectionNotifications": "Benachrichtigungs-Adapter",
"jobs.mutation.notificationsHelp": "Fredy unterstützt mehrere Wege, dich über neue Inserate zu benachrichtigen. Diese werden als Benachrichtigungs-Adapter bezeichnet. Du kannst zwischen E-Mail, Telegram u. a. wählen.",
"jobs.mutation.addNotification": "Neuen Benachrichtigungs-Adapter hinzufügen",
"jobs.mutation.sectionBlacklist": "Blacklist",
"jobs.mutation.blacklistHelp": "Wenn ein Inserat eines dieser Wörter enthält, wird es herausgefiltert. Gib ein Wort ein und bestätige mit Enter.",
"jobs.mutation.blacklistPlaceholder": "Wort zum Filtern hinzufügen...",
"jobs.mutation.sectionCriteriaFilter": "Kriterienfilter",
"jobs.mutation.criteriaFilterHelp": "Inserate nach bestimmten Kriterien filtern. Nur Zahlen sind erlaubt. Felder können leer gelassen werden, wenn kein Filter gewünscht ist.",
"jobs.mutation.criteriaNumberPlaceholder": "Zahl eingeben",
"jobs.mutation.filterMaxPrice": "Höchstpreis",
"jobs.mutation.filterMinSize": "Mindestgröße (m²)",
"jobs.mutation.filterMinRooms": "Mindestzimmeranzahl",
"jobs.mutation.sectionAreaFilter": "Gebietsfilter",
"jobs.mutation.areaFilterHelp": "Definiere mehrere geografische Gebiete auf der Karte, um Inserate zu filtern. Beginne mit dem Zeichnen durch Klick auf das Quadrat-Symbol oben links auf der Karte. Klicke auf die Karte, um Punkte des Polygons hinzuzufügen. Wähle den ersten Punkt, um das Polygon zu schließen. Klicke danach auf eine freie Kartenfläche, um das Polygon anzuwenden (Farbe wechselt von Gelb zu Blau). Um ein Polygon zu löschen, wähle es zuerst aus und klicke dann auf das Papierkorb-Symbol.",
"jobs.mutation.sectionSharing": "Mit Benutzer teilen",
"jobs.mutation.sharingHelp": "Du kannst diesen Job mit anderen Benutzern teilen. Diese können die Inserate einsehen, aber nur du (als Ersteller) kannst den Job bearbeiten. Admins sind aus dieser Liste ausgeblendet, da sie Zugriff auf alles haben.",
"jobs.mutation.sharingNoUsers": "Keine Benutzer zum Teilen gefunden. Bitte erstelle weitere Nicht-Admin-Benutzer.",
"jobs.mutation.sharingSearchPlaceholder": "Benutzer suchen",
"jobs.mutation.sectionActivation": "Job-Aktivierung",
"jobs.mutation.activationHelp": "Gibt an, ob der Job aktiviert ist. Inaktive Jobs werden ignoriert, wenn Fredy nach neuen Inseraten sucht.",
"jobs.deletion.title": "Job löschen",
"jobs.deletion.message": "Bist du sicher, dass du diesen Job löschen möchtest? Alle zugehörigen Inserate werden aus der Datenbank entfernt.",
"listings.title": "Inserate",
"listings.watchlistTitle": "Watchlist",
"listings.searchPlaceholder": "Suchen",
"listings.filterAll": "Alle",
"listings.filterActive": "Aktiv",
"listings.filterInactive": "Inaktiv",
"listings.filterWatched": "Beobachtet",
"listings.filterUnwatched": "Nicht beobachtet",
"listings.filterStatusPlaceholder": "Status",
"listings.filterStatusApplied": "Beworben",
"listings.filterStatusRejected": "Abgelehnt",
"listings.filterStatusAccepted": "Angenommen",
"listings.filterStatusNone": "Kein Status",
"listings.filterProviderPlaceholder": "Anbieter",
"listings.filterJobPlaceholder": "Job",
"listings.sortByJobName": "Job-Name",
"listings.sortByDate": "Inserat-Datum",
"listings.sortByPrice": "Preis",
"listings.sortByProvider": "Anbieter",
"listings.sortPrefix": "Sortieren nach",
"listings.sortAscending": "Aufsteigend",
"listings.sortDescending": "Absteigend",
"listings.tooltipGridView": "Rasteransicht",
"listings.tooltipTableView": "Tabellenansicht",
"listings.empty": "Noch keine Inserate vorhanden...",
"listings.toastAddedToWatchlist": "Inserat zur Watchlist hinzugefügt",
"listings.toastRemovedFromWatchlist": "Inserat von der Watchlist entfernt",
"listings.toastWatchlistError": "Watchlist-Aktion fehlgeschlagen",
"listings.toastStatusCleared": "Status zurückgesetzt",
"listings.toastStatusMarked": "Als {{status}} markiert",
"listings.toastStatusUpdateError": "Status konnte nicht aktualisiert werden",
"listings.toastDeleted": "Inserat erfolgreich entfernt",
"listings.toastDeleteError": "Fehler beim Löschen des Inserats",
"listings.cardInactive": "Inaktiv",
"listings.tooltipAddToWatchlist": "Zur Watchlist hinzufügen",
"listings.tooltipRemoveFromWatchlist": "Von der Watchlist entfernen",
"listings.tooltipOriginalListing": "Original-Inserat",
"listings.tooltipViewInFredy": "In Fredy anzeigen",
"listings.tooltipRemove": "Entfernen",
"listing.detail.back": "Zurück",
"listing.detail.defaultTitle": "Inserat-Details",
"listing.detail.noAddress": "Keine Adresse angegeben",
"listing.detail.watch": "Beobachten",
"listing.detail.watched": "Beobachtet",
"listing.detail.openListing": "Inserat öffnen",
"listing.detail.delete": "Löschen",
"listing.detail.noImageAlt": "Kein Bild verfügbar",
"listing.detail.notesTitle": "Notizen",
"listing.detail.notesPlaceholder": "Deine privaten Notizen zu diesem Inserat…",
"listing.detail.storeNotes": "Notizen speichern",
"listing.detail.detailsTitle": "Details",
"listing.detail.descriptionTitle": "Beschreibung",
"listing.detail.noDescription": "Keine Beschreibung verfügbar.",
"listing.detail.distanceToHome": "Entfernung nach Hause:",
"listing.detail.locationTitle": "Lage",
"listing.detail.noGeoWarning": "Dieses Inserat hat keine gültigen Geokoordinaten und kann daher nicht auf der Karte angezeigt werden.",
"listing.detail.fieldPrice": "Preis",
"listing.detail.fieldPriceHelp": "Der Angebotspreis dieses Inserats laut Anbieter.",
"listing.detail.fieldSize": "Größe",
"listing.detail.fieldSizeHelp": "Wohnfläche des Inserats in Quadratmetern.",
"listing.detail.fieldRooms": "Zimmer",
"listing.detail.fieldRoomsHelp": "Anzahl der Zimmer im Inserat.",
"listing.detail.fieldJob": "Job",
"listing.detail.fieldJobHelp": "Der Fredy-Job, der dieses Inserat gefunden hat.",
"listing.detail.fieldProvider": "Anbieter",
"listing.detail.fieldProviderHelp": "Das Immobilienportal, von dem dieses Inserat gescrapt wurde.",
"listing.detail.fieldAdded": "Hinzugefügt",
"listing.detail.fieldAddedHelp": "Wann Fredy dieses Inserat erstmals zur Datenbank hinzugefügt hat.",
"listing.detail.fieldStatus": "Status",
"listing.detail.statusApplied": "Beworben",
"listing.detail.statusAccepted": "Akzeptiert",
"listing.detail.statusRejected": "Abgelehnt",
"listing.detail.statusSetAt": "(gesetzt am {{date}})",
"listing.detail.fieldStatusHelp": "Der von dir gesetzte Status für dieses Inserat und wann du ihn gesetzt hast.",
"listing.detail.fieldRoomsValue": "{{count}} Zimmer",
"listing.detail.mapPopupListingLocation": "Inserat-Standort",
"listing.detail.mapPopupHomeAddress": "Heimatadresse",
"listing.detail.toastDeleted": "Inserat erfolgreich entfernt",
"listing.detail.toastDeleteError": "Fehler beim Löschen des Inserats",
"listing.detail.toastWatchlistAdded": "Zur Watchlist hinzugefügt",
"listing.detail.toastWatchlistRemoved": "Von der Watchlist entfernt",
"listing.detail.toastWatchlistError": "Watchlist-Aktion fehlgeschlagen",
"listing.detail.toastNotesSaved": "Notizen gespeichert",
"listing.detail.toastNotesError": "Notizen konnten nicht gespeichert werden",
"listing.detail.toastLoadError": "Inserat-Details konnten nicht geladen werden",
"listing.deletion.title": "Inserate löschen",
"listing.deletion.message": "Wie möchtest du die ausgewählten Inserate löschen?",
"listing.deletion.confirm": "Bestätigen",
"listing.deletion.cancel": "Abbrechen",
"listing.deletion.softLabel": "Als gelöscht markieren (Soft Delete)",
"listing.deletion.softDescription": "Inserate bleiben in der Datenbank, werden aber als ausgeblendet markiert. Sie erscheinen beim nächsten Scraping nicht erneut.",
"listing.deletion.hardLabel": "Aus Datenbank entfernen (Hard Delete)",
"listing.deletion.hardDescription": "Inserate werden vollständig aus der Datenbank entfernt.",
"listing.deletion.hardConsequence": "Folge: Sie könnten beim nächsten Scraping wieder erscheinen, da Fredy nicht weiß, dass sie bereits gefunden wurden.",
"listing.deletion.rememberChoice": "Meine Wahl merken und diesen Dialog beim nächsten Mal überspringen",
"listings.status.none": "Kein",
"listings.status.applied": "Beworben",
"listings.status.rejected": "Abgelehnt",
"listings.status.accepted": "Angenommen",
"listings.status.statusLabel": "Status",
"listings.status.tooltip": "Verfolge deinen Stand bei diesem Inserat: Beworben, sobald du Kontakt aufgenommen hast, Abgelehnt wenn es nicht geklappt hat, oder Angenommen wenn du es bekommen hast.",
"map.title": "Kartenansicht",
"map.noHomeAddress": "Keine Heimatadresse gesetzt. Konfiguriere sie in den Benutzereinstellungen, um den Entfernungsfilter zu nutzen.",
"map.onlyValidAddresses": "Auf dieser Karte werden nur Inserate mit gültigen Adressen angezeigt.",
"map.filterJobLabel": "Job",
"map.filterJobPlaceholder": "Alle Jobs",
"map.filterDistanceLabel": "Entfernung",
"map.filterDistanceNone": "Keine",
"map.filterPriceLabel": "Preis (€)",
"map.filterStyleLabel": "Stil",
"map.filterStyleStandard": "Standard",
"map.filterStyleSatellite": "Satellit",
"map.filter3dBuildings": "3D-Gebäude",
"map.popupPrice": "Preis:",
"map.popupAddress": "Adresse:",
"map.popupJob": "Job:",
"map.popupProvider": "Anbieter:",
"map.popupSize": "Größe:",
"map.popupViewDetails": "Details anzeigen",
"map.popupRemove": "Entfernen",
"map.popupHomeAddress": "Heimatadresse",
"map.noHomeAddressBefore": "Keine Heimadresse gesetzt. Konfiguriere sie in den ",
"map.noHomeAddressLink": "Benutzereinstellungen",
"map.noHomeAddressAfter": ", um den Entfernungsfilter zu nutzen.",
"map.toastDeleted": "Inserat erfolgreich entfernt",
"map.toastDeleteError": "Fehler beim Löschen des Inserats",
"users.title": "Benutzer",
"users.newUser": "Neuer Benutzer",
"users.tableColumnUser": "Benutzer",
"users.tableColumnLastLogin": "Letzter Login",
"users.tableColumnJobs": "Jobs",
"users.tableColumnMcpToken": "MCP-Token",
"users.tableAdminBadge": "ADMIN",
"users.emptyState": "Keine Benutzer gefunden.",
"users.toastRemoved": "Benutzer erfolgreich entfernt",
"users.removalModal.title": "Benutzer entfernen",
"users.removalModal.message": "Das Entfernen dieses Benutzers entfernt auch alle zugehörigen Jobs.",
"users.mutation.editTitle": "Benutzer bearbeiten",
"users.mutation.newTitle": "Neuer Benutzer",
"users.mutation.back": "Zurück",
"users.mutation.save": "Speichern",
"users.mutation.cancel": "Abbrechen",
"users.mutation.saved": "Benutzer erfolgreich gespeichert...",
"users.mutation.sectionUsername": "Benutzername",
"users.mutation.usernameHelp": "Der Benutzername für den Login bei Fredy",
"users.mutation.usernamePlaceholder": "Benutzername",
"users.mutation.sectionPassword": "Passwort",
"users.mutation.passwordHelp": "Das Passwort für den Login bei Fredy",
"users.mutation.passwordPlaceholder": "Passwort",
"users.mutation.sectionRetypePassword": "Passwort wiederholen",
"users.mutation.retypePasswordHelp": "Passwort wiederholen, um die Übereinstimmung zu prüfen",
"users.mutation.retypePasswordPlaceholder": "Passwort wiederholen",
"users.mutation.sectionIsAdmin": "Ist der Benutzer ein Admin?",
"users.mutation.isAdminHelp": "Aktivieren, wenn der Benutzer ein Administrator ist",
"settings.title": "Einstellungen",
"settings.tabSystem": "System",
"settings.tabExecution": "Ausführung",
"settings.tabUserSettings": "Benutzereinstellungen",
"settings.tabBackup": "Backup & Wiederherstellung",
"settings.save": "Speichern",
"settings.port": "Port",
"settings.portHelp": "Der Port, auf dem Fredy läuft.",
"settings.portPlaceholder": "Port",
"settings.baseUrl": "Basis-URL",
"settings.baseUrlHelp": "Öffentliche URL, unter der Fredy erreichbar ist (z. B. http://192.168.1.10:9998). Wird für 'In Fredy öffnen'-Links in Benachrichtigungen verwendet.",
"settings.baseUrlPlaceholder": "Basis-URL",
"settings.sqlitePath": "SQLite-Datenbankpfad",
"settings.sqlitePathHelp": "Das Verzeichnis, in dem Fredy seine SQLite-Datenbankdateien speichert.",
"settings.sqlitePathWarning": "Das Ändern dieses Pfades kann zu Datenverlust führen. Starte Fredy sofort nach dem Speichern neu.",
"settings.sqlitePathPlaceholder": "Datenbankordnerpfad",
"settings.analytics": "Analysen",
"settings.analyticsHelp": "Anonyme Nutzungsdaten zur Verbesserung von Fredy (Anbieter, Adapter-Namen, Betriebssystem, Node-Version und Architektur).",
"settings.analyticsEnable": "Analysen aktivieren",
"settings.demoMode": "Demo-Modus",
"settings.demoModeHelp": "Im Demo-Modus sucht Fredy nicht nach Immobilien und alle Daten werden um Mitternacht auf Standardwerte zurückgesetzt.",
"settings.demoModeEnable": "Demo-Modus aktivieren",
"settings.searchInterval": "Suchintervall",
"settings.searchIntervalHelp": "Intervall in Minuten für Anfragen an konfigurierte Dienste. Gehe nicht unter 5 Minuten, um nicht als Bot erkannt zu werden.",
"settings.searchIntervalPlaceholder": "Intervall in Minuten",
"settings.searchIntervalSuffix": "Minuten",
"settings.workingHours": "Arbeitszeiten",
"settings.workingHoursHelp": "Fredy sucht nur während dieser Zeiten nach Inseraten. Leer lassen, um rund um die Uhr zu suchen.",
"settings.workingHoursFrom": "Von",
"settings.workingHoursUntil": "Bis",
"settings.proxyUrl": "Proxy-URL",
"settings.proxyUrlHelp": "Optional. Leitet den Scraping-Browser durch einen Proxy. Server/Rechenzentrum-IPs werden von Anbietern (z. B. Immowelt) unabhängig vom Browser-Fingerprint häufig blockiert. Ein deutscher Wohnproxy lässt Anfragen wie einen normalen Haushalt erscheinen. Format: http://benutzer:passwort@host:port oder socks5://benutzer:passwort@host:port. Leer lassen zum Deaktivieren.",
"settings.proxyUrlPlaceholder": "http://benutzer:passwort@host:port",
"settings.homeAddress": "Heimatadresse",
"settings.homeAddressHelp": "Wird zur Berechnung der Entfernung zwischen deinem Standort und jedem Inserat verwendet. Eine Aktualisierung berechnet die Entfernungen für alle aktiven Inserate neu.",
"settings.homeAddressPlaceholder": "Heimatadresse eingeben",
"settings.homeAddressGeoError": "Adresse gefunden, konnte aber nicht genau geokodiert werden.",
"settings.providerDetails": "Anbieter-Details",
"settings.providerDetailsHelp": "Zusätzliche Details (Beschreibung, Attribute, Maklerinfos) für Inserate abrufen. Erfordert einen zusätzlichen API-Aufruf pro Inserat.",
"settings.providerDetailsWarning": "Das Aktivieren dieser Funktion erhöht die API-Anfragen an Anbieter erheblich und erhöht das Risiko von Rate-Limiting oder Blockierung. Auf eigene Gefahr verwenden.",
"settings.providerDetailsPlaceholder": "Anbieter für Detail-Abruf auswählen...",
"settings.providerDetailsUpdated": "Anbieter-Detail-Einstellung aktualisiert.",
"settings.providerDetailsUpdateError": "Einstellung konnte nicht aktualisiert werden.",
"settings.listingDeletion": "Inserate löschen",
"settings.listingDeletionHelp": "Wähle den Standard-Löschmodus. Soft Delete blendet Inserate aus ohne erneutes Scraping; Hard Delete entfernt sie aus der Datenbank.",
"settings.listingDeletionSoftLabel": "Als gelöscht markieren (Soft Delete)",
"settings.listingDeletionSoftDesc": "Inserate bleiben in der Datenbank, werden aber als ausgeblendet markiert. Sie erscheinen beim nächsten Scraping nicht erneut.",
"settings.listingDeletionHardLabel": "Aus Datenbank entfernen (Hard Delete)",
"settings.listingDeletionHardDesc": "Inserate werden vollständig aus der Datenbank entfernt.",
"settings.listingDeletionHardConsequence": "Folge: Sie könnten beim nächsten Scraping wieder erscheinen, da Fredy nicht weiß, dass sie bereits gefunden wurden.",
"settings.listingDeletionSkipPrompt": "Bestätigungsdialog überspringen",
"settings.userSettingsSaved": "Einstellungen gespeichert. Entfernungsberechnungen laufen im Hintergrund.",
"settings.userSettingsSaveError": "Fehler beim Speichern der Einstellungen",
"settings.backupDownload": "Backup herunterladen",
"settings.backupRestoreFromZip": "Aus ZIP wiederherstellen",
"settings.backupHelp": "Lade ein gezipptes Backup deiner Datenbank herunter oder stelle es aus einem Backup-ZIP wieder her.",
"settings.backupSectionName": "Backup & Wiederherstellung",
"settings.backupDemoWarning": "Backup und Wiederherstellung sind im Demo-Modus nicht verfügbar.",
"settings.backupDownloadError": "Unerwarteter Fehler beim Herunterladen des Backups.",
"settings.backupAnalyzeError": "Backup konnte nicht analysiert werden.",
"settings.backupRestoreCompleted": "Wiederherstellung abgeschlossen. Bitte starte das Fredy-Backend jetzt neu!",
"settings.backupRestoreError": "Unerwarteter Fehler bei der Wiederherstellung des Backups.",
"settings.restoreModalTitle": "Datenbank wiederherstellen",
"settings.restoreNow": "Jetzt wiederherstellen",
"settings.restoreAnyway": "Trotzdem wiederherstellen",
"settings.restoreProblemDetected": "Problem erkannt",
"settings.restoreMigrationsApplied": "Automatische Migrationen werden angewendet",
"settings.restoreCompatible": "Backup ist kompatibel",
"settings.restoreMigrationInfo": "Backup-Migration: {{backupMigration}} | Erforderliche Migration: {{requiredMigration}}",
"settings.toastIntervalEmpty": "Das Intervall darf nicht leer sein.",
"settings.toastPortEmpty": "Der Port darf nicht leer sein.",
"settings.toastWorkingHoursIncomplete": "Arbeitszeiten Von und Bis müssen beide gesetzt sein, wenn eines davon gesetzt wurde.",
"settings.toastSqlitePathEmpty": "Der SQLite-Datenbankpfad darf nicht leer sein.",
"settings.toastSavedReloading": "Einstellungen erfolgreich gespeichert. Der Browser wird in 3 Sekunden neu geladen.",
"settings.toastSaveError": "Fehler beim Speichern der Einstellungen.",
"watchlist.sectionName": "Benachrichtigung für Watchlist",
"watchlist.sectionHelp": "Du kannst bei Änderungen an Inseraten auf deiner Watchlist benachrichtigt werden.",
"watchlist.noteTitle": "Hinweis",
"watchlist.noteDescription": "Du erhältst Benachrichtigungen nur für Inserate auf deiner Watchlist. Um Inserate hinzuzufügen, öffne den Bereich 'Inserate' und markiere die gewünschten.",
"watchlist.notifyMeWhen": "Benachrichtige mich wenn:",
"watchlist.activityChanges": "Inserat-Status ändert sich (z. B. Inserat wird inaktiv)",
"watchlist.priceChanges": "Inserat-Preis ändert sich",
"watchlist.notifyMeWith": "Benachrichtige mich per:",
"watchlist.selectNotificationMethod": "Benachrichtigungsmethode auswählen",
"watchlist.addNotificationTitle": "Benachrichtigungsmethode hinzufügen",
"watchlist.addNotificationDescription": "Wenn sich etwas geändert hat, benachrichtigt dich Fredy über den ausgewählten Benachrichtigungs-Adapter. Hinweis: Einige Adapter wie SQLite sind hier nicht verfügbar.",
"notification.defaultTitle": "Neuen Benachrichtigungs-Adapter hinzufügen",
"notification.description": "Wenn Fredy neue Inserate findet, möchten wir dich darüber informieren. Dazu können Benachrichtigungs-Adapter konfiguriert werden. Es gibt mehrere Wege, wie Fredy neue Inserate an dich senden kann. Wähle deinen Kanal...",
"notification.selectPlaceholder": "Benachrichtigungs-Adapter auswählen",
"notification.try": "Testen",
"notification.cancel": "Abbrechen",
"notification.save": "Speichern",
"notification.trySuccess": "Es scheint geklappt zu haben! Bitte überprüfe deinen Dienst.",
"notification.tryError": "Das hat leider nicht funktioniert :-( Ich habe folgenden Fehler erhalten: {{error}}",
"notification.errorTitle": "Fehler",
"notification.successTitle": "Super!",
"notification.validationAllMandatory": "Alle Felder sind Pflichtfelder und müssen ausgefüllt werden.",
"notification.validationNumberField": "Ein Zahlenfeld darf nur Zahlen enthalten und muss größer 0 sein.",
"notification.validationBooleanField": "Ein Boolean-Feld darf keinen anderen Typ haben.",
"notification.infoTitle": "Information",
"notification.tableEmptyState": "Keine Benachrichtigungs-Adapter gefunden.",
"notification.tableColumnName": "Name",
"provider.defaultTitle": "Neuen Anbieter hinzufügen",
"provider.editTitle": "Bestehenden Anbieter bearbeiten",
"provider.save": "Speichern",
"provider.description": "Anbieter sind das Herzstück von Fredy. Wir unterstützen mehrere Anbieter wie Immowelt, Immoscout usw. Wähle einen Anbieter aus der Liste. Fredy öffnet dann die URL des Anbieters in einem neuen Tab.",
"provider.descriptionStep2": "Du musst deine Suchparameter konfigurieren, so wie du es bei einer normalen Suche auf der Anbieter-Website tun würdest. Wenn die Suchergebnisse angezeigt werden, kopiere die URL und füge sie in das Textfeld ein.",
"provider.editDescription": "Du kannst jetzt die URL des Anbieters {{name}} im Eingabefeld unten bearbeiten.",
"provider.selectPlaceholder": "Anbieter auswählen",
"provider.urlPlaceholder": "Anbieter-URL",
"provider.validationSelectAndUrl": "Bitte wähle einen Anbieter aus und kopiere die Browser-URL in das Textfeld, nachdem du deine Suchparameter konfiguriert hast.",
"provider.validationInvalidUrl": "Die kopierte URL ist ungültig.",
"provider.errorTitle": "Fehler",
"provider.tableEmptyState": "Keine Anbieter gefunden.",
"provider.tableColumnName": "Name",
"provider.tableColumnUrl": "URL",
"provider.tableOpenProvider": "Anbieter öffnen",
"news.videoFallback": "Dein Browser unterstützt das Video-Tag nicht.",
"version.newVersionAvailable": "Neue Version verfügbar",
"version.currentLabel": "Aktuell: {{version}}",
"version.releaseNotes": "Versionshinweise",
"version.newBadge": "Neu",
"version.modalClose": "Schließen",
"version.viewOnGithub": "Auf GitHub ansehen",
"version.yourVersion": "Deine Version",
"version.latestVersion": "Neueste Version",
"tracking.okText": "Ja! Ich möchte helfen",
"tracking.cancelText": "Nein, danke",
"tracking.greeting": "Hey 👋",
"tracking.paragraph1": "Genug von Popups? Ich auch. Aber dieses hier ist wichtig, und es wird nur einmal erscheinen ;)",
"tracking.paragraph2": "Fredy ist völlig kostenlos (und wird es immer bleiben). Wenn du möchtest, kannst du mich über GitHub unterstützen, aber das ist absolut keine Pflicht.",
"tracking.paragraph3": "Es wäre jedoch eine große Hilfe, wenn du mir erlaubst, einige Analysedaten zu sammeln. Warte, bevor du auf 'Nein' klickst, lass mich erklären. Wenn du zustimmst, sendet Fredy alle 6 Stunden einen Ping an mein internes Tracking-Projekt. (Wird bald open-source)",
"tracking.paragraph4": "Die Daten umfassen: Namen aktiver Adapter/Anbieter, Betriebssystem, Architektur, Node-Version und Sprache. Die Informationen sind vollständig anonym und helfen mir zu verstehen, welche Adapter/Anbieter am häufigsten genutzt werden.",
"tracking.thanks": "Danke🤘",
"permission.title": "Unzureichende Berechtigung :(",
"footer.madeWith": "Mit ❤️ entwickelt von",
"dashboard.noData": "Keine Daten",
"common.save": "Speichern",
"common.cancel": "Abbrechen",
"common.delete": "Löschen",
"common.edit": "Bearbeiten",
"common.back": "Zurück",
"common.confirm": "Bestätigen",
"common.yes": "Ja",
"common.no": "Nein",
"common.na": "k. A.",
"common.loading": "Laden...",
"common.ariaGridView": "Rasteransicht",
"common.ariaTableView": "Tabellenansicht",
"common.startNow": "Jetzt starten",
"settings.language": "Sprache",
"settings.languageHelp": "Die Sprache der Benutzeroberfläche.",
"settings.languageSaveError": "Spracheinstellung konnte nicht gespeichert werden."
}

456
ui/src/locales/en.json Normal file
View File

@@ -0,0 +1,456 @@
{
"_meta": {
"flag": "🇬🇧",
"name": "English",
"locale": "en-US",
"semiLocale": "en_US"
},
"app.demoBanner": "You're currently viewing the demo version of Fredy. Jobs won't scrape websites, and any changes you make will be reverted at midnight.",
"nav.dashboard": "Dashboard",
"nav.jobs": "Jobs",
"nav.listings": "Listings",
"nav.listingsOverview": "Overview",
"nav.mapView": "Map View",
"nav.watchlist": "Watchlist",
"nav.settings": "Settings",
"nav.userManagement": "User Management",
"nav.settingsPage": "Settings",
"nav.expandSidebar": "Expand sidebar",
"nav.collapseSidebar": "Collapse sidebar",
"login.usernamePlaceholder": "Username",
"login.passwordPlaceholder": "Password",
"login.loginButton": "Login",
"login.errorMandatory": "Username and password are mandatory.",
"login.errorInvalid": "Login unsuccessful. Please check your username and password.",
"login.demoBanner": "This is the demo version of Fredy. Use 'demo' as both the username and password to log in.",
"dashboard.title": "Dashboard",
"dashboard.sectionGeneral": "General",
"dashboard.sectionOverview": "Overview",
"dashboard.sectionProviderInsights": "Provider Insights",
"dashboard.searchInterval": "Search Interval",
"dashboard.searchIntervalDesc": "Time interval for job execution",
"dashboard.lastSearch": "Last Search",
"dashboard.lastSearchDesc": "Last execution timestamp",
"dashboard.nextSearch": "Next Search",
"dashboard.nextSearchDesc": "Next execution timestamp",
"dashboard.searchNow": "Search Now",
"dashboard.searchNowDesc": "Run a search now",
"dashboard.searchNowButton": "Search now",
"dashboard.searchNowStarted": "Successfully triggered Fredy search.",
"dashboard.searchNowFailed": "Failed to trigger search",
"dashboard.kpiJobs": "Jobs",
"dashboard.kpiJobsDesc": "Total number of jobs",
"dashboard.kpiListings": "Listings",
"dashboard.kpiListingsDesc": "Total listings found",
"dashboard.kpiActiveListings": "Active Listings",
"dashboard.kpiActiveListingsDesc": "Total active listings",
"dashboard.kpiMedianPrice": "Median Price",
"dashboard.kpiMedianPriceDesc": "Median Price of listings",
"jobs.title": "Jobs",
"jobs.newJob": "New Job",
"jobs.searchPlaceholder": "Search",
"jobs.filterAll": "All",
"jobs.filterActive": "Active",
"jobs.filterInactive": "Inactive",
"jobs.sortByName": "Name",
"jobs.sortByListings": "Number of Listings",
"jobs.sortByStatus": "Status",
"jobs.sortPrefix": "Sort by",
"jobs.sortAscending": "Ascending",
"jobs.sortDescending": "Descending",
"jobs.tooltipGridView": "Grid view",
"jobs.tooltipTableView": "Table view",
"jobs.empty": "No jobs available yet...",
"jobs.cardListings": "Listings",
"jobs.cardProviders": "Providers",
"jobs.cardAdapters": "Adapters",
"jobs.cardActive": "Active",
"jobs.cardSharedReadOnly": "This job has been shared with you - read only.",
"jobs.cardRunning": "RUNNING",
"jobs.popoverRunJob": "Run Job",
"jobs.popoverEditJob": "Edit a Job",
"jobs.popoverCloneJob": "Clone Job",
"jobs.popoverDeleteListings": "Delete all found Listings of this Job",
"jobs.popoverDeleteJob": "Delete Job",
"jobs.toastFinished": "Job finished",
"jobs.toastRunStarted": "Job run started",
"jobs.toastRunRequested": "Job run requested",
"jobs.toastAlreadyRunning": "Job is already running",
"jobs.toastNotAllowed": "You are not allowed to run this job",
"jobs.toastNotFound": "Job not found",
"jobs.toastRunFailed": "Failed to trigger job",
"jobs.toastStatusChanged": "Job status successfully changed",
"jobs.toastDeletedWithListings": "Job and listings successfully removed",
"jobs.toastListingsDeleted": "Listings successfully removed",
"jobs.toastDeleteError": "Error performing deletion",
"jobs.tableSharedTooltip": "Shared with you - read only",
"jobs.tableRunJob": "Run Job",
"jobs.tableEditJob": "Edit Job",
"jobs.tableCloneJob": "Clone Job",
"jobs.tableDeleteListings": "Delete all found Listings",
"jobs.tableDeleteJob": "Delete Job",
"jobs.mutation.editTitle": "Edit Job",
"jobs.mutation.createTitle": "Create new Job",
"jobs.mutation.back": "Back",
"jobs.mutation.save": "Save",
"jobs.mutation.cancel": "Cancel",
"jobs.mutation.saved": "Job successfully saved...",
"jobs.mutation.sectionName": "Name",
"jobs.mutation.namePlaceholder": "Name",
"jobs.mutation.sectionProviders": "Providers",
"jobs.mutation.providersHelp": "A provider is essentially the service (e.g. ImmoScout24, Kleinanzeigen) that Fredy searches for new listings. Fredy will open a new tab pointing to the website of this provider. You have to adjust your search parameter and click on \"Search\". If the results are being shown, copy the browser URL in here.",
"jobs.mutation.addProvider": "Add new Provider",
"jobs.mutation.sectionNotifications": "Notification Adapters",
"jobs.mutation.notificationsHelp": "Fredy supports multiple ways to notify you about new findings. These are called notification adapter. You can chose between email, Telegram etc.",
"jobs.mutation.addNotification": "Add new Notification Adapter",
"jobs.mutation.sectionBlacklist": "Blacklist",
"jobs.mutation.blacklistHelp": "If a listing contains one of these words, it will be filtered out. Type in a word, then hit enter.",
"jobs.mutation.blacklistPlaceholder": "Add a word for filtering...",
"jobs.mutation.sectionCriteriaFilter": "Criteria Filter",
"jobs.mutation.criteriaFilterHelp": "Filter listings by specific criteria. Only numbers are allowed. You can leave fields empty if you don't want to filter by them.",
"jobs.mutation.criteriaNumberPlaceholder": "Add a number",
"jobs.mutation.filterMaxPrice": "Max Price",
"jobs.mutation.filterMinSize": "Min Size (m²)",
"jobs.mutation.filterMinRooms": "Min Rooms",
"jobs.mutation.sectionAreaFilter": "Area Filter",
"jobs.mutation.areaFilterHelp": "Define multiple geographic areas on the map to filter listings. Start drawing by clicking on the square symbol in the top left corner of the map. Click on the map to add points of the polygon. Select the first point to close the polygon. After that, click on a free area of the map to apply this polygon (the color will change from yellow to blue). To delete a polygon, select it first and then click on the trash symbol.",
"jobs.mutation.sectionSharing": "Sharing with user",
"jobs.mutation.sharingHelp": "You can share this job with other users. They will be able to see the listings, but only (as the creator) you can edit the job. Admins are filtered from this list as they have access to everything.",
"jobs.mutation.sharingNoUsers": "No users found to share this Job to. Please create additional non-admin user.",
"jobs.mutation.sharingSearchPlaceholder": "Search user",
"jobs.mutation.sectionActivation": "Job activation",
"jobs.mutation.activationHelp": "Whether or not the job is activated. Inactive jobs will be ignored when Fredy checks for new listings.",
"jobs.deletion.title": "Delete Job",
"jobs.deletion.message": "Are you sure you want to delete this job? All associated listings will be removed from the database.",
"listings.title": "Listings",
"listings.watchlistTitle": "Watchlist",
"listings.searchPlaceholder": "Search",
"listings.filterAll": "All",
"listings.filterActive": "Active",
"listings.filterInactive": "Inactive",
"listings.filterWatched": "Watched",
"listings.filterUnwatched": "Unwatched",
"listings.filterStatusPlaceholder": "Status",
"listings.filterStatusApplied": "Applied",
"listings.filterStatusRejected": "Rejected",
"listings.filterStatusAccepted": "Accepted",
"listings.filterStatusNone": "No status",
"listings.filterProviderPlaceholder": "Provider",
"listings.filterJobPlaceholder": "Job",
"listings.sortByJobName": "Job Name",
"listings.sortByDate": "Listing Date",
"listings.sortByPrice": "Price",
"listings.sortByProvider": "Provider",
"listings.sortPrefix": "Sort by",
"listings.sortAscending": "Ascending",
"listings.sortDescending": "Descending",
"listings.tooltipGridView": "Grid view",
"listings.tooltipTableView": "Table view",
"listings.empty": "No listings available yet...",
"listings.toastAddedToWatchlist": "Listing added to Watchlist",
"listings.toastRemovedFromWatchlist": "Listing removed from Watchlist",
"listings.toastWatchlistError": "Failed to operate Watchlist",
"listings.toastStatusCleared": "Status cleared",
"listings.toastStatusMarked": "Marked as {{status}}",
"listings.toastStatusUpdateError": "Failed to update status",
"listings.toastDeleted": "Listing successfully removed",
"listings.toastDeleteError": "Error deleting listing",
"listings.cardInactive": "Inactive",
"listings.tooltipAddToWatchlist": "Add to Watchlist",
"listings.tooltipRemoveFromWatchlist": "Remove from Watchlist",
"listings.tooltipOriginalListing": "Original Listing",
"listings.tooltipViewInFredy": "View in Fredy",
"listings.tooltipRemove": "Remove",
"listing.detail.back": "Back",
"listing.detail.defaultTitle": "Listing Detail",
"listing.detail.noAddress": "No address provided",
"listing.detail.watch": "Watch",
"listing.detail.watched": "Watched",
"listing.detail.openListing": "Open listing",
"listing.detail.delete": "Delete",
"listing.detail.noImageAlt": "No image available",
"listing.detail.notesTitle": "Notes",
"listing.detail.notesPlaceholder": "Your private notes about this listing…",
"listing.detail.storeNotes": "Store notes",
"listing.detail.detailsTitle": "Details",
"listing.detail.descriptionTitle": "Description",
"listing.detail.noDescription": "No description available.",
"listing.detail.distanceToHome": "Distance to home:",
"listing.detail.locationTitle": "Location",
"listing.detail.noGeoWarning": "This listing has no valid geocoordinates, so we cannot show it on the map.",
"listing.detail.fieldPrice": "Price",
"listing.detail.fieldPriceHelp": "The asking price of this listing, as reported by the provider.",
"listing.detail.fieldSize": "Size",
"listing.detail.fieldSizeHelp": "Living space of the listing in square meters.",
"listing.detail.fieldRooms": "Rooms",
"listing.detail.fieldRoomsHelp": "Number of rooms in the listing.",
"listing.detail.fieldJob": "Job",
"listing.detail.fieldJobHelp": "The Fredy job that found this listing.",
"listing.detail.fieldProvider": "Provider",
"listing.detail.fieldProviderHelp": "The real estate portal where this listing was scraped from.",
"listing.detail.fieldAdded": "Added",
"listing.detail.fieldAddedHelp": "When Fredy first added this listing to your database.",
"listing.detail.fieldStatus": "Status",
"listing.detail.statusApplied": "Applied",
"listing.detail.statusAccepted": "Accepted",
"listing.detail.statusRejected": "Rejected",
"listing.detail.statusSetAt": "(set {{date}})",
"listing.detail.fieldStatusHelp": "The status you marked for this listing and when you set it.",
"listing.detail.fieldRoomsValue": "{{count}} Rooms",
"listing.detail.mapPopupListingLocation": "Listing Location",
"listing.detail.mapPopupHomeAddress": "Home Address",
"listing.detail.toastDeleted": "Listing successfully removed",
"listing.detail.toastDeleteError": "Error deleting listing",
"listing.detail.toastWatchlistAdded": "Added to Watchlist",
"listing.detail.toastWatchlistRemoved": "Removed from Watchlist",
"listing.detail.toastWatchlistError": "Failed to operate Watchlist",
"listing.detail.toastNotesSaved": "Notes saved",
"listing.detail.toastNotesError": "Failed to save notes",
"listing.detail.toastLoadError": "Failed to load listing details",
"listing.deletion.title": "Delete Listings",
"listing.deletion.message": "How would you like to delete the selected listing(s)?",
"listing.deletion.confirm": "Confirm",
"listing.deletion.cancel": "Cancel",
"listing.deletion.softLabel": "Mark as deleted (Soft Delete)",
"listing.deletion.softDescription": "Listings are kept in the database but marked as hidden. They will not re-appear during the next scraping session.",
"listing.deletion.hardLabel": "Remove from database (Hard Delete)",
"listing.deletion.hardDescription": "Listings are completely removed from the database.",
"listing.deletion.hardConsequence": "Consequence: They might re-appear when scraping the next time because Fredy won't know they were previously found.",
"listing.deletion.rememberChoice": "Remember my choice and skip this dialog next time",
"listings.status.none": "None",
"listings.status.applied": "Applied",
"listings.status.rejected": "Rejected",
"listings.status.accepted": "Accepted",
"listings.status.statusLabel": "Status",
"listings.status.tooltip": "Track where you stand with this listing: Applied once you have reached out, Rejected if it did not work out, or Accepted if you got it.",
"map.title": "Map View",
"map.noHomeAddress": "No home address set. Configure it in user settings to use the distance filter.",
"map.onlyValidAddresses": "Only listings with valid addresses are shown on this map.",
"map.filterJobLabel": "Job",
"map.filterJobPlaceholder": "All jobs",
"map.filterDistanceLabel": "Distance",
"map.filterDistanceNone": "None",
"map.filterPriceLabel": "Price (€)",
"map.filterStyleLabel": "Style",
"map.filterStyleStandard": "Standard",
"map.filterStyleSatellite": "Satellite",
"map.filter3dBuildings": "3D Buildings",
"map.popupPrice": "Price:",
"map.popupAddress": "Address:",
"map.popupJob": "Job:",
"map.popupProvider": "Provider:",
"map.popupSize": "Size:",
"map.popupViewDetails": "View Details",
"map.popupRemove": "Remove",
"map.popupHomeAddress": "Home Address",
"map.noHomeAddressBefore": "No home address set. Configure it in ",
"map.noHomeAddressLink": "user settings",
"map.noHomeAddressAfter": " to use the distance filter.",
"map.toastDeleted": "Listing successfully removed",
"map.toastDeleteError": "Error deleting listing",
"users.title": "Users",
"users.newUser": "New User",
"users.tableColumnUser": "User",
"users.tableColumnLastLogin": "Last login",
"users.tableColumnJobs": "Jobs",
"users.tableColumnMcpToken": "MCP Token",
"users.tableAdminBadge": "ADMIN",
"users.emptyState": "No users found.",
"users.toastRemoved": "User successfully removed",
"users.removalModal.title": "Removing user",
"users.removalModal.message": "Removing this user will also remove all associated jobs.",
"users.mutation.editTitle": "Edit User",
"users.mutation.newTitle": "New User",
"users.mutation.back": "Back",
"users.mutation.save": "Save",
"users.mutation.cancel": "Cancel",
"users.mutation.saved": "User successfully saved...",
"users.mutation.sectionUsername": "Username",
"users.mutation.usernameHelp": "The username used to login to Fredy",
"users.mutation.usernamePlaceholder": "Username",
"users.mutation.sectionPassword": "Password",
"users.mutation.passwordHelp": "The password used to login to Fredy",
"users.mutation.passwordPlaceholder": "Password",
"users.mutation.sectionRetypePassword": "Retype password",
"users.mutation.retypePasswordHelp": "Retype the password to make sure they match",
"users.mutation.retypePasswordPlaceholder": "Retype password",
"users.mutation.sectionIsAdmin": "Is user an admin?",
"users.mutation.isAdminHelp": "Check this if the user is an administrator",
"settings.title": "Settings",
"settings.tabSystem": "System",
"settings.tabExecution": "Execution",
"settings.tabUserSettings": "User Settings",
"settings.tabBackup": "Backup & Restore",
"settings.save": "Save",
"settings.port": "Port",
"settings.portHelp": "The port on which Fredy is running.",
"settings.portPlaceholder": "Port",
"settings.baseUrl": "Base URL",
"settings.baseUrlHelp": "Public URL where Fredy is reachable (e.g. http://192.168.1.10:9998). Used for 'Open in Fredy' links in notifications.",
"settings.baseUrlPlaceholder": "Base-Url",
"settings.sqlitePath": "SQLite Database Path",
"settings.sqlitePathHelp": "The directory where Fredy stores its SQLite database files.",
"settings.sqlitePathWarning": "Changing this path may result in data loss. Restart Fredy immediately after saving.",
"settings.sqlitePathPlaceholder": "Database folder path",
"settings.analytics": "Analytics",
"settings.analyticsHelp": "Anonymous usage data to help improve Fredy - provider names, adapter names, OS, Node version, and architecture.",
"settings.analyticsEnable": "Enable analytics",
"settings.demoMode": "Demo Mode",
"settings.demoModeHelp": "In demo mode, Fredy will not search for real estates and all data resets to defaults at midnight.",
"settings.demoModeEnable": "Enable demo mode",
"settings.searchInterval": "Search Interval",
"settings.searchIntervalHelp": "Interval in minutes for running queries against configured services. Do not go below 5 minutes to avoid being detected as a bot.",
"settings.searchIntervalPlaceholder": "Interval in minutes",
"settings.searchIntervalSuffix": "minutes",
"settings.workingHours": "Working Hours",
"settings.workingHoursHelp": "Fredy will only search for listings during these hours. Leave empty to search around the clock.",
"settings.workingHoursFrom": "From",
"settings.workingHoursUntil": "Until",
"settings.proxyUrl": "Proxy URL",
"settings.proxyUrlHelp": "Optional. Routes the scraping browser through a proxy. Server/datacenter IPs are frequently blocked by providers (e.g. immowelt) regardless of browser fingerprint, a German residential proxy makes requests look like a normal household and is the most effective fix. Format: http://user:pass@host:port or socks5://user:pass@host:port. Leave empty to disable.",
"settings.proxyUrlPlaceholder": "http://user:pass@host:port",
"settings.homeAddress": "Home Address",
"settings.homeAddressHelp": "Used to calculate distances between your location and each listing. Updating this recalculates distances for all active listings.",
"settings.homeAddressPlaceholder": "Enter your home address",
"settings.homeAddressGeoError": "Address found but could not be geocoded accurately.",
"settings.providerDetails": "Provider Details",
"settings.providerDetailsHelp": "Fetch additional details (description, attributes, agent info) for listings. Needs an extra API call per listing.",
"settings.providerDetailsWarning": "Enabling this significantly increases API requests to providers that have implemented this feature, raising the chance of rate limiting or blocking. Use at your own risk.",
"settings.providerDetailsPlaceholder": "Select providers to fetch details from...",
"settings.providerDetailsUpdated": "Provider details setting updated.",
"settings.providerDetailsUpdateError": "Failed to update setting.",
"settings.listingDeletion": "Listing deletion",
"settings.listingDeletionHelp": "Choose the default deletion mode. Soft delete hides them without re-scraping; hard delete removes them from the database.",
"settings.listingDeletionSoftLabel": "Mark as deleted (Soft Delete)",
"settings.listingDeletionSoftDesc": "Listings are kept in the database but marked as hidden. They will not re-appear during the next scraping session.",
"settings.listingDeletionHardLabel": "Remove from database (Hard Delete)",
"settings.listingDeletionHardDesc": "Listings are completely removed from the database.",
"settings.listingDeletionHardConsequence": "Consequence: They might re-appear when scraping the next time because Fredy won't know they were previously found.",
"settings.listingDeletionSkipPrompt": "Skip confirmation dialog",
"settings.userSettingsSaved": "Settings saved. Distance calculations are running in the background.",
"settings.userSettingsSaveError": "Error while saving settings",
"settings.backupDownload": "Download Backup",
"settings.backupRestoreFromZip": "Restore from Zip",
"settings.backupHelp": "Download a zipped backup of your database or restore from a backup zip.",
"settings.backupSectionName": "Backup & Restore",
"settings.backupDemoWarning": "Backup and restore are not available in demo mode.",
"settings.backupDownloadError": "Unexpected error while downloading backup.",
"settings.backupAnalyzeError": "Failed to analyze backup.",
"settings.backupRestoreCompleted": "Restore completed. Please restart the Fredy backend now!",
"settings.backupRestoreError": "Unexpected error while restoring backup.",
"settings.restoreModalTitle": "Restore database",
"settings.restoreNow": "Restore now",
"settings.restoreAnyway": "Restore anyway",
"settings.restoreProblemDetected": "Problem detected",
"settings.restoreMigrationsApplied": "Automatic migrations will be applied",
"settings.restoreCompatible": "Backup is compatible",
"settings.restoreMigrationInfo": "Backup migration: {{backupMigration}} | Required migration: {{requiredMigration}}",
"settings.toastIntervalEmpty": "Interval may not be empty.",
"settings.toastPortEmpty": "Port may not be empty.",
"settings.toastWorkingHoursIncomplete": "Working hours to and from must be set if either to or from has been set before.",
"settings.toastSqlitePathEmpty": "SQLite db path cannot be empty.",
"settings.toastSavedReloading": "Settings stored successfully. We will reload your browser in 3 seconds.",
"settings.toastSaveError": "Error while trying to store settings.",
"watchlist.sectionName": "Notification for Watch List",
"watchlist.sectionHelp": "You can get notified for changes on listings from your watch list.",
"watchlist.noteTitle": "Note",
"watchlist.noteDescription": "You'll receive notifications only for listings that are on your watch list. To add listings to it, open the 'Listings' section and tag the ones you want to follow.",
"watchlist.notifyMeWhen": "Notify me when:",
"watchlist.activityChanges": "Listing state changes (e.g. listing becomes inactive)",
"watchlist.priceChanges": "Listing price changes",
"watchlist.notifyMeWith": "Notify me with:",
"watchlist.selectNotificationMethod": "Select notification method",
"watchlist.addNotificationTitle": "Add notification method",
"watchlist.addNotificationDescription": "When something has changed, Fredy will notify you using the selected notification adapter. Note, some adapter like SqLite are not available here.",
"notification.defaultTitle": "Adding a new Notification Adapter",
"notification.description": "When Fredy finds new listings, we like to report them to you. To do so, notification adapter can be configured. There are multiple ways how Fredy can send new listings to you. Chose your weapon...",
"notification.selectPlaceholder": "Select a notification adapter",
"notification.try": "Try",
"notification.cancel": "Cancel",
"notification.save": "Save",
"notification.trySuccess": "It seems like it worked! Please check your service.",
"notification.tryError": "This did not work :-( I've received the following error: {{error}}",
"notification.errorTitle": "Error",
"notification.successTitle": "Yay!",
"notification.validationAllMandatory": "All fields are mandatory and must be set.",
"notification.validationNumberField": "A number field cannot contain anything else and must be > 0.",
"notification.validationBooleanField": "A boolean field cannot be of a different type.",
"notification.infoTitle": "Information",
"notification.tableEmptyState": "No notification adapters found.",
"notification.tableColumnName": "Name",
"provider.defaultTitle": "Adding a new Provider",
"provider.editTitle": "Editing an existing Provider",
"provider.save": "Save",
"provider.description": "Provider are the heart of Fredy. We're supporting multiple Provider such as Immowelt, Immoscout etc. Select a provider from the list below. Fredy will then open the provider's url in a new tab.",
"provider.descriptionStep2": "You will need to configure your search parameter like you would do when you do a regular search on the provider's website. When the search results are shown on the website, copy the url and paste it into the textfield below.",
"provider.editDescription": "You can now edit the {{name}} provider's URL in the input field below.",
"provider.selectPlaceholder": "Select a provider",
"provider.urlPlaceholder": "Provider Url",
"provider.validationSelectAndUrl": "Please select a provider and copy the browser url into the textfield after configuring your search parameter.",
"provider.validationInvalidUrl": "The url you have copied is not valid.",
"provider.errorTitle": "Error",
"provider.tableEmptyState": "No providers found.",
"provider.tableColumnName": "Name",
"provider.tableColumnUrl": "URL",
"provider.tableOpenProvider": "Open Provider",
"news.videoFallback": "Your browser does not support the video tag.",
"version.newVersionAvailable": "New version available",
"version.currentLabel": "Current: {{version}}",
"version.releaseNotes": "Release notes",
"version.newBadge": "New",
"version.modalClose": "Close",
"version.viewOnGithub": "View on GitHub",
"version.yourVersion": "Your Version",
"version.latestVersion": "Latest Version",
"tracking.okText": "Yes! I want to help",
"tracking.cancelText": "No, thanks",
"tracking.greeting": "Hey 👋",
"tracking.paragraph1": "Fed up with popups? Yeah, me too. But this one's important, and I promise it will only appear once ;)",
"tracking.paragraph2": "Fredy is completely free (and will always remain free). If you'd like, you can support me by donating through my GitHub, but there's absolutely no obligation to do so.",
"tracking.paragraph3": "However, it would be a huge help if you'd allow me to collect some analytical data. Wait, before you click \"no\", let me explain. If you agree, Fredy will send a ping once every 6 hours to my internal tracking project. (Will be open-sourced soon)",
"tracking.paragraph4": "The data includes: names of active adapters/providers, OS, architecture, Node version, and language. The information is entirely anonymous and helps me understand which adapters/providers are most frequently used.",
"tracking.thanks": "Thanks🤘",
"permission.title": "Insufficient permission :(",
"footer.madeWith": "Made with ❤️ by",
"dashboard.noData": "No Data",
"common.save": "Save",
"common.cancel": "Cancel",
"common.delete": "Delete",
"common.edit": "Edit",
"common.back": "Back",
"common.confirm": "Confirm",
"common.yes": "Yes",
"common.no": "No",
"common.na": "N/A",
"common.loading": "Loading...",
"common.ariaGridView": "Grid view",
"common.ariaTableView": "Table view",
"common.startNow": "Start now",
"settings.language": "Language",
"settings.languageHelp": "The language used throughout the interface.",
"settings.languageSaveError": "Failed to save language preference."
}

136
ui/src/services/i18n/i18n.jsx Normal file
View File

@@ -0,0 +1,136 @@
/*
* Copyright (c) 2026 by Christian Kellner.
* Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
*/
import { createContext, useContext, useMemo } from 'react';
// Auto-discover all locale JSON files at build time
const localeModules = import.meta.glob('../../locales/*.json', { eager: true });
/**
* Build resources object: { en: {...translations}, de: {...translations}, ... }
* Strips _meta from each locale file.
* @type {Record<string, Record<string, string>>}
*/
const resources = {};
/**
* Build availableLanguages array: [{ code, flag, name, locale }, ...]
* Uses _meta from each locale file with fallbacks.
* @type {Array<{code: string, flag: string, name: string, locale: string}>}
*/
const availableLanguages = [];
/** Maps language code to BCP 47 locale string (e.g. 'de' → 'de-DE') */
const localeMap = {};
for (const [path, module] of Object.entries(localeModules)) {
// Extract locale code from path: '../../locales/en.json' -> 'en'
const match = path.match(/\/(\w+)\.json$/);
if (!match) continue;
const code = match[1];
const localeData = module.default || module;
// Extract _meta and build resources
const { _meta, ...translations } = localeData;
resources[code] = translations;
// Build availableLanguages entry
const flag = _meta?.flag || '';
const name = _meta?.name || code;
const locale = _meta?.locale || code;
const semiLocale = _meta?.semiLocale || null;
localeMap[code] = locale;
availableLanguages.push({ code, flag, name, locale, semiLocale });
}
if (availableLanguages.length === 0) {
console.warn('i18n: No locale files found in locales/');
}
if (!resources.en) {
console.error('i18n: English locale (en.json) is required as the fallback language');
}
/**
* Translation context
* @type {React.Context<{t: (key: string, vars?: Record<string, string>) => string, locale: string}>}
*/
const TranslationContext = createContext(null);
/**
* I18nProvider component
* Accepts a language prop and provides a t() function via context.
* Falls back to English, then to key itself if translation missing.
* Supports {{varName}} interpolation.
*
* @param {Object} props
* @param {string} props.language - Active language code (e.g., 'en', 'de')
* @param {React.ReactNode} props.children - Child components
* @returns {React.ReactNode}
*/
export function I18nProvider({ language = 'en', children }) {
/**
* Translate a key with optional variable interpolation
* @param {string} key - Translation key (e.g., 'nav.dashboard')
* @param {Record<string, string>} [vars] - Variables for {{varName}} interpolation
* @returns {string}
*/
const t = (key, vars = {}) => {
// Try active language
let translation = resources[language]?.[key];
// Fallback to English
if (!translation) {
translation = resources.en?.[key];
}
// Fallback to key itself
if (!translation) {
translation = key;
}
// Interpolate variables: replace {{varName}} with values
if (vars && Object.keys(vars).length > 0) {
translation = translation.replace(/\{\{(\w+)\}\}/g, (match, varName) => {
return vars[varName] !== undefined ? String(vars[varName]) : match;
});
}
return translation;
};
const locale = localeMap[language] ?? localeMap.en ?? 'en-US';
const value = useMemo(() => ({ t, locale }), [language]);
return <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>;
}
/**
* Hook to access the translation function from context.
* @returns {(key: string, vars?: Record<string, string>) => string}
*/
export function useTranslation() {
const context = useContext(TranslationContext);
if (!context) {
throw new Error('useTranslation must be used within an I18nProvider');
}
return context.t;
}
/**
* Hook to access the active BCP 47 locale string (e.g. 'de-DE', 'en-US').
* Use this with Intl APIs for locale-aware date/number formatting.
* @returns {string}
*/
export function useLocale() {
const context = useContext(TranslationContext);
if (!context) {
throw new Error('useLocale must be used within an I18nProvider');
}
return context.locale;
}
// Export resources and availableLanguages for other uses
export { resources, availableLanguages };

14
ui/src/services/state/store.js
View File

@@ -379,6 +379,20 @@ export const useFredyState = create(
throw Exception;
}
},
async setLanguage(language) {
try {
await xhrPost('/api/user/settings/language', { language });
set((state) => ({
userSettings: {
...state.userSettings,
settings: { ...state.userSettings.settings, language },
},
}));
} catch (Exception) {
console.error('Error while trying to update language setting. Error:', Exception);
throw Exception;
}
},
},
};

4
ui/src/services/time/timeService.js
View File

@@ -3,8 +3,8 @@
* Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
*/
export function format(ts, showSeconds = true) {
return new Intl.DateTimeFormat('default', {
export function format(ts, showSeconds = true, locale = 'default') {
return new Intl.DateTimeFormat(locale, {
year: 'numeric',
month: 'numeric',
day: 'numeric',

55
ui/src/views/dashboard/Dashboard.jsx
View File

@@ -25,8 +25,11 @@ import Headline from '../../components/headline/Headline.jsx';
import './Dashboard.less';
import { xhrPost } from '../../services/xhr.js';
import { format } from '../../services/time/timeService.js';
import { useTranslation, useLocale } from '../../services/i18n/i18n.jsx';
export default function Dashboard() {
const t = useTranslation();
const locale = useLocale();
const actions = useActions();
const dashboard = useSelector((state) => state.dashboard.data);
React.useEffect(() => {
@@ -38,111 +41,111 @@ export default function Dashboard() {
return (
<div className="dashboard">
<Headline text="Dashboard" />
<Headline text={t('dashboard.title')} />
<div className="dashboard__section-label">General</div>
<div className="dashboard__section-label">{t('dashboard.sectionGeneral')}</div>
<Row gutter={[16, 16]} className="dashboard__row">
<Col xs={24} sm={12} md={12} lg={6} xl={6}>
<KpiCard
title="Search Interval"
title={t('dashboard.searchInterval')}
value={`${dashboard?.general?.interval} min`}
icon={<IconClock />}
description="Time interval for job execution"
description={t('dashboard.searchIntervalDesc')}
/>
</Col>
<Col xs={24} sm={12} md={12} lg={6} xl={6}>
<KpiCard
title="Last Search"
title={t('dashboard.lastSearch')}
value={
dashboard?.general?.lastRun == null || dashboard?.general?.lastRun === 0
? '---'
: format(dashboard?.general?.lastRun)
: format(dashboard?.general?.lastRun, true, locale)
}
icon={<IconDoubleChevronLeft />}
description="Last execution timestamp"
description={t('dashboard.lastSearchDesc')}
/>
</Col>
<Col xs={24} sm={12} md={12} lg={6} xl={6}>
<KpiCard
title="Next Search"
title={t('dashboard.nextSearch')}
value={
dashboard?.general?.nextRun == null || dashboard?.general?.nextRun === 0
? '---'
: format(dashboard?.general?.nextRun)
: format(dashboard?.general?.nextRun, true, locale)
}
icon={<IconDoubleChevronRight />}
description="Next execution timestamp"
description={t('dashboard.nextSearchDesc')}
/>
</Col>
<Col xs={24} sm={12} md={12} lg={6} xl={6}>
<KpiCard title="Search Now" icon={<IconSearch />} description="Run a search now">
<KpiCard title={t('dashboard.searchNow')} icon={<IconSearch />} description={t('dashboard.searchNowDesc')}>
<Button
size="small"
style={{ marginTop: '.2rem' }}
icon={<IconPlayCircle />}
aria-label="Start now"
aria-label={t('common.startNow')}
onClick={async () => {
try {
await xhrPost('/api/jobs/startAll', null);
Toast.success('Successfully triggered Fredy search.');
Toast.success(t('dashboard.searchNowStarted'));
} catch {
Toast.error('Failed to trigger search');
Toast.error(t('dashboard.searchNowFailed'));
}
}}
>
Search now
{t('dashboard.searchNowButton')}
</Button>
</KpiCard>
</Col>
</Row>
<div className="dashboard__section-label">Overview</div>
<div className="dashboard__section-label">{t('dashboard.sectionOverview')}</div>
<Row gutter={[16, 16]} className="dashboard__row">
<Col xs={24} sm={12} md={12} lg={6} xl={6}>
<KpiCard
title="Jobs"
title={t('dashboard.kpiJobs')}
color="blue"
value={!kpis.totalJobs ? '---' : kpis.totalJobs}
icon={<IconTerminal />}
description="Total number of jobs"
description={t('dashboard.kpiJobsDesc')}
/>
</Col>
<Col xs={24} sm={12} md={12} lg={6} xl={6}>
<KpiCard
title="Listings"
title={t('dashboard.kpiListings')}
color="orange"
value={!kpis.totalListings ? '---' : kpis.totalListings}
icon={<IconStarStroked />}
description="Total listings found"
description={t('dashboard.kpiListingsDesc')}
/>
</Col>
<Col xs={24} sm={12} md={12} lg={6} xl={6}>
<KpiCard
title="Active Listings"
title={t('dashboard.kpiActiveListings')}
color="green"
value={!kpis.numberOfActiveListings ? '---' : kpis.numberOfActiveListings}
icon={<IconStar />}
description="Total active listings"
description={t('dashboard.kpiActiveListingsDesc')}
/>
</Col>
<Col xs={24} sm={12} md={12} lg={6} xl={6}>
<KpiCard
title="Median Price"
title={t('dashboard.kpiMedianPrice')}
color="purple"
value={`${
!kpis.medianPriceOfListings
? '---'
: new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(
: new Intl.NumberFormat(locale, { style: 'currency', currency: 'EUR' }).format(
kpis.medianPriceOfListings,
)
}`}
icon={<IconNoteMoney />}
description="Median Price of listings"
description={t('dashboard.kpiMedianPriceDesc')}
/>
</Col>
</Row>
<div className="dashboard__section-label">Provider Insights</div>
<div className="dashboard__section-label">{t('dashboard.sectionProviderInsights')}</div>
<div className="dashboard__pie-wrapper">
<PieChartCard data={pieData} />
</div>

199
ui/src/views/generalSettings/GeneralSettings.jsx
View File

@@ -6,6 +6,7 @@
import React, { useEffect, useState, useMemo } from 'react';
import { useActions, useSelector, useIsLoading } from '../../services/state/store';
import { useTranslation, availableLanguages } from '../../services/i18n/i18n.jsx';
import {
Tabs,
@@ -56,10 +57,12 @@ function formatFromTBackend(time) {
const GeneralSettings = function GeneralSettings() {
const actions = useActions();
const t = useTranslation();
const [loading, setLoading] = React.useState(true);
const settings = useSelector((state) => state.generalSettings.settings);
const currentUser = useSelector((state) => state.user.currentUser);
const language = useSelector((state) => state.userSettings.settings.language);
const [interval, setInterval] = React.useState('');
const [proxyUrl, setProxyUrl] = React.useState('');
@@ -86,6 +89,7 @@ const GeneralSettings = function GeneralSettings() {
const [listingDeleteHard, setListingDeleteHard] = useState(false);
const [listingDeleteSkipPrompt, setListingDeleteSkipPrompt] = useState(false);
const saving = useIsLoading(actions.userSettings.setHomeAddress);
const savingLanguage = useIsLoading(actions.userSettings.setLanguage);
const [dataSource, setDataSource] = useState([]);
React.useEffect(() => {
@@ -127,22 +131,22 @@ const GeneralSettings = function GeneralSettings() {
const handleStore = async () => {
if (nullOrEmpty(interval)) {
Toast.error('Interval may not be empty.');
Toast.error(t('settings.toastIntervalEmpty'));
return;
}
if (nullOrEmpty(port)) {
Toast.error('Port may not be empty.');
Toast.error(t('settings.toastPortEmpty'));
return;
}
if (
(!nullOrEmpty(workingHourFrom) && nullOrEmpty(workingHourTo)) ||
(nullOrEmpty(workingHourFrom) && !nullOrEmpty(workingHourTo))
) {
Toast.error('Working hours to and from must be set if either to or from has been set before.');
Toast.error(t('settings.toastWorkingHoursIncomplete'));
return;
}
if (nullOrEmpty(sqlitePath)) {
Toast.error('SQLite db path cannot be empty.');
Toast.error(t('settings.toastSqlitePathEmpty'));
return;
}
try {
@@ -164,11 +168,11 @@ const GeneralSettings = function GeneralSettings() {
if (exception?.json?.message != null) {
Toast.error(exception.json.message);
} else {
Toast.error('Error while trying to store settings.');
Toast.error(t('settings.toastSaveError'));
}
return;
}
Toast.success('Settings stored successfully. We will reload your browser in 3 seconds.');
Toast.success(t('settings.toastSavedReloading'));
setTimeout(() => {
location.reload();
}, 3000);
@@ -179,7 +183,7 @@ const GeneralSettings = function GeneralSettings() {
await downloadBackupZip();
} catch (e) {
console.error(e);
Toast.error('Unexpected error while downloading backup.');
Toast.error(t('settings.backupDownloadError'));
}
}, []);
@@ -190,7 +194,7 @@ const GeneralSettings = function GeneralSettings() {
setRestoreModalVisible(true);
} catch (e) {
console.error(e);
Toast.error('Failed to analyze backup.');
Toast.error(t('settings.backupAnalyzeError'));
}
}, []);
@@ -199,10 +203,10 @@ const GeneralSettings = function GeneralSettings() {
try {
setRestoreBusy(true);
await clientRestore(selectedRestoreFile, force);
Toast.success('Restore completed. Please restart the Fredy backend now!');
Toast.success(t('settings.backupRestoreCompleted'));
} catch (e) {
console.error(e);
Toast.error(e?.message || 'Unexpected error while restoring backup.');
Toast.error(e?.message || t('settings.backupRestoreError'));
} finally {
setRestoreBusy(false);
}
@@ -236,9 +240,9 @@ const GeneralSettings = function GeneralSettings() {
hardDelete: listingDeleteHard,
});
await actions.userSettings.getUserSettings();
Toast.success('Settings saved. Distance calculations are running in the background.');
Toast.success(t('settings.userSettingsSaved'));
} catch (error) {
Toast.error(error.json?.error || 'Error while saving settings');
Toast.error(error.json?.error || t('settings.userSettingsSaveError'));
}
};
@@ -266,7 +270,7 @@ const GeneralSettings = function GeneralSettings() {
return (
<div className="generalSettings">
<Headline text="Settings" />
<Headline text={t('settings.title')} />
{!loading && (
<>
<Tabs type="line">
@@ -274,17 +278,17 @@ const GeneralSettings = function GeneralSettings() {
tab={
<span>
<IconSignal size="small" style={{ marginRight: 6 }} />
System
{t('settings.tabSystem')}
</span>
}
itemKey="system"
>
<div className="generalSettings__tab-content">
<SegmentPart name="Port" helpText="The port on which Fredy is running.">
<SegmentPart name={t('settings.port')} helpText={t('settings.portHelp')}>
<InputNumber
min={0}
max={99999}
placeholder="Port"
placeholder={t('settings.portPlaceholder')}
value={port}
formatter={(value) => `${value}`.replace(/\D/g, '')}
onChange={(value) => setPort(value)}
@@ -292,53 +296,46 @@ const GeneralSettings = function GeneralSettings() {
/>
</SegmentPart>
<SegmentPart
name="Base URL"
helpText="Public URL where Fredy is reachable (e.g. http://192.168.1.10:9998). Used for 'Open in Fredy' links in notifications."
>
<Input type="text" placeholder="Base-Url" value={baseUrl} onChange={(value) => setBaseUrl(value)} />
<SegmentPart name={t('settings.baseUrl')} helpText={t('settings.baseUrlHelp')}>
<Input
type="text"
placeholder={t('settings.baseUrlPlaceholder')}
value={baseUrl}
onChange={(value) => setBaseUrl(value)}
/>
</SegmentPart>
<SegmentPart
name="SQLite Database Path"
helpText="The directory where Fredy stores its SQLite database files."
>
<SegmentPart name={t('settings.sqlitePath')} helpText={t('settings.sqlitePathHelp')}>
<Banner
fullMode={false}
type="warning"
closeIcon={null}
style={{ marginBottom: '12px' }}
description="Changing this path may result in data loss. Restart Fredy immediately after saving."
description={t('settings.sqlitePathWarning')}
/>
<Input
type="text"
placeholder="Database folder path"
placeholder={t('settings.sqlitePathPlaceholder')}
value={sqlitePath}
onChange={(value) => setSqlitePath(value)}
/>
</SegmentPart>
<SegmentPart
name="Analytics"
helpText="Anonymous usage data to help improve Fredy - provider names, adapter names, OS, Node version, and architecture."
>
<SegmentPart name={t('settings.analytics')} helpText={t('settings.analyticsHelp')}>
<Checkbox checked={analyticsEnabled} onChange={(e) => setAnalyticsEnabled(e.target.checked)}>
Enable analytics
{t('settings.analyticsEnable')}
</Checkbox>
</SegmentPart>
<SegmentPart
name="Demo Mode"
helpText="In demo mode, Fredy will not search for real estates and all data resets to defaults at midnight."
>
<SegmentPart name={t('settings.demoMode')} helpText={t('settings.demoModeHelp')}>
<Checkbox checked={demoMode} onChange={(e) => setDemoMode(e.target.checked)}>
Enable demo mode
{t('settings.demoModeEnable')}
</Checkbox>
</SegmentPart>
<div className="generalSettings__save-row">
<Button type="primary" theme="solid" onClick={handleStore} icon={<IconSave />}>
Save
{t('settings.save')}
</Button>
</div>
</div>
@@ -348,36 +345,30 @@ const GeneralSettings = function GeneralSettings() {
tab={
<span>
<IconRefresh size="small" style={{ marginRight: 6 }} />
Execution
{t('settings.tabExecution')}
</span>
}
itemKey="execution"
>
<div className="generalSettings__tab-content">
<SegmentPart
name="Search Interval"
helpText="Interval in minutes for running queries against configured services. Do not go below 5 minutes to avoid being detected as a bot."
>
<SegmentPart name={t('settings.searchInterval')} helpText={t('settings.searchIntervalHelp')}>
<InputNumber
min={5}
max={1440}
placeholder="Interval in minutes"
placeholder={t('settings.searchIntervalPlaceholder')}
value={interval}
formatter={(value) => `${value}`.replace(/\D/g, '')}
onChange={(value) => setInterval(value)}
suffix={'minutes'}
suffix={t('settings.searchIntervalSuffix')}
style={{ maxWidth: 200 }}
/>
</SegmentPart>
<SegmentPart
name="Working Hours"
helpText="Fredy will only search for listings during these hours. Leave empty to search around the clock."
>
<SegmentPart name={t('settings.workingHours')} helpText={t('settings.workingHoursHelp')}>
<div className="generalSettings__timePickerContainer">
<TimePicker
format={'HH:mm'}
insetLabel="From"
insetLabel={t('settings.workingHoursFrom')}
value={formatFromTBackend(workingHourFrom)}
placeholder=""
onChange={(val) => {
@@ -386,7 +377,7 @@ const GeneralSettings = function GeneralSettings() {
/>
<TimePicker
format={'HH:mm'}
insetLabel="Until"
insetLabel={t('settings.workingHoursUntil')}
value={formatFromTBackend(workingHourTo)}
placeholder=""
onChange={(val) => {
@@ -396,13 +387,10 @@ const GeneralSettings = function GeneralSettings() {
</div>
</SegmentPart>
<SegmentPart
name="Proxy URL"
helpText="Optional. Routes the scraping browser through a proxy. Server/datacenter IPs are frequently blocked by providers (e.g. immowelt) regardless of browser fingerprint, a German residential proxy makes requests look like a normal household and is the most effective fix. Format: http://user:pass@host:port or socks5://user:pass@host:port. Leave empty to disable."
>
<SegmentPart name={t('settings.proxyUrl')} helpText={t('settings.proxyUrlHelp')}>
<Input
type="text"
placeholder="http://user:pass@host:port"
placeholder={t('settings.proxyUrlPlaceholder')}
value={proxyUrl}
onChange={(value) => setProxyUrl(value)}
/>
@@ -410,7 +398,7 @@ const GeneralSettings = function GeneralSettings() {
<div className="generalSettings__save-row">
<Button type="primary" theme="solid" onClick={handleStore} icon={<IconSave />}>
Save
{t('settings.save')}
</Button>
</div>
</div>
@@ -420,42 +408,55 @@ const GeneralSettings = function GeneralSettings() {
tab={
<span>
<IconHome size="small" style={{ marginRight: 6 }} />
User Settings
{t('settings.tabUserSettings')}
</span>
}
itemKey="userSettings"
>
<div className="generalSettings__tab-content">
<SegmentPart
name="Home Address"
helpText="Used to calculate distances between your location and each listing. Updating this recalculates distances for all active listings."
>
<SegmentPart name={t('settings.language')} helpText={t('settings.languageHelp')}>
<Select
style={{ width: 240 }}
value={language ?? 'en'}
disabled={savingLanguage}
optionList={availableLanguages.map((lang) => ({
label: `${lang.flag} ${lang.name}`,
value: lang.code,
}))}
onChange={async (code) => {
try {
await actions.userSettings.setLanguage(code);
} catch {
Toast.error(t('settings.languageSaveError'));
}
}}
/>
</SegmentPart>
<SegmentPart name={t('settings.homeAddress')} helpText={t('settings.homeAddressHelp')}>
<AutoComplete
data={dataSource}
value={address}
showClear
onChange={(v) => setAddress(v)}
onSearch={searchAddress}
placeholder="Enter your home address"
placeholder={t('settings.homeAddressPlaceholder')}
style={{ width: '100%' }}
/>
{coords && coords.lat === -1 && (
<Banner
type="danger"
description="Address found but could not be geocoded accurately."
description={t('settings.homeAddressGeoError')}
closeIcon={null}
style={{ marginTop: 8 }}
/>
)}
</SegmentPart>
<SegmentPart
name="Provider Details"
helpText="Fetch additional details (description, attributes, agent info) for listings. Needs an extra API call per listing."
>
<SegmentPart name={t('settings.providerDetails')} helpText={t('settings.providerDetailsHelp')}>
<Banner
type="warning"
description="Enabling this significantly increases API requests to providers that have implemented this feature, raising the chance of rate limiting or blocking. Use at your own risk."
description={t('settings.providerDetailsWarning')}
closeIcon={null}
style={{ marginBottom: 12 }}
/>
@@ -464,47 +465,38 @@ const GeneralSettings = function GeneralSettings() {
style={{ width: '100%' }}
value={Array.isArray(providerDetails) ? providerDetails : []}
optionList={(allProviders ?? []).map((p) => ({ label: p.name, value: p.id }))}
placeholder="Select providers to fetch details from..."
placeholder={t('settings.providerDetailsPlaceholder')}
onChange={async (selected) => {
try {
await actions.userSettings.setProviderDetails(selected);
Toast.success('Provider details setting updated.');
Toast.success(t('settings.providerDetailsUpdated'));
} catch {
Toast.error('Failed to update setting.');
Toast.error(t('settings.providerDetailsUpdateError'));
}
}}
/>
</SegmentPart>
<SegmentPart
name="Listing deletion"
helpText="Choose the default deletion mode. Soft delete hides them without re-scraping; hard delete removes them from the database."
>
<SegmentPart name={t('settings.listingDeletion')} helpText={t('settings.listingDeletionHelp')}>
<RadioGroup
value={listingDeleteHard ? 'hard' : 'soft'}
onChange={(e) => setListingDeleteHard(e.target.value === 'hard')}
>
<Radio value="soft">
<div>
<Text strong>Mark as deleted (Soft Delete)</Text>
<Text strong>{t('settings.listingDeletionSoftLabel')}</Text>
<br />
<Text type="secondary">
Listings are kept in the database but marked as hidden. They will <b>not</b> re-appear during
the next scraping session.
</Text>
<Text type="secondary">{t('settings.listingDeletionSoftDesc')}</Text>
</div>
</Radio>
<Radio value="hard">
<div>
<Text strong>Remove from database (Hard Delete)</Text>
<Text strong>{t('settings.listingDeletionHardLabel')}</Text>
<br />
<Text type="secondary">
Listings are completely removed from the database.
{t('settings.listingDeletionHardDesc')}
<br />
<Text type="warning">
Consequence: They might re-appear when scraping the next time because Fredy won't know they
were previously found.
</Text>
<Text type="warning">{t('settings.listingDeletionHardConsequence')}</Text>
</Text>
</div>
</Radio>
@@ -514,7 +506,7 @@ const GeneralSettings = function GeneralSettings() {
onChange={(e) => setListingDeleteSkipPrompt(e.target.checked)}
style={{ marginTop: 12 }}
>
Skip confirmation dialog
{t('settings.listingDeletionSkipPrompt')}
</Checkbox>
</SegmentPart>
@@ -526,7 +518,7 @@ const GeneralSettings = function GeneralSettings() {
onClick={handleSaveUserSettings}
loading={saving}
>
Save
{t('settings.save')}
</Button>
</div>
</div>
@@ -536,7 +528,7 @@ const GeneralSettings = function GeneralSettings() {
tab={
<span>
<IconFolder size="small" style={{ marginRight: 6 }} />
Backup & Restore
{t('settings.tabBackup')}
</span>
}
itemKey="backup"
@@ -548,13 +540,10 @@ const GeneralSettings = function GeneralSettings() {
type="warning"
closeIcon={null}
style={{ marginBottom: '12px' }}
description="Backup and restore are not available in demo mode."
description={t('settings.backupDemoWarning')}
/>
)}
<SegmentPart
name="Backup & Restore"
helpText="Download a zipped backup of your database or restore from a backup zip."
>
<SegmentPart name={t('settings.backupSectionName')} helpText={t('settings.backupHelp')}>
<div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
<Button
theme="solid"
@@ -562,7 +551,7 @@ const GeneralSettings = function GeneralSettings() {
onClick={handleDownloadBackup}
disabled={demoMode && !currentUser?.isAdmin}
>
Download Backup
{t('settings.backupDownload')}
</Button>
<input
type="file"
@@ -577,7 +566,7 @@ const GeneralSettings = function GeneralSettings() {
icon={<IconFolder />}
disabled={demoMode && !currentUser?.isAdmin}
>
Restore from Zip
{t('settings.backupRestoreFromZip')}
</Button>
</div>
</SegmentPart>
@@ -589,11 +578,11 @@ const GeneralSettings = function GeneralSettings() {
{restoreModalVisible && (
<Modal
title="Restore database"
title={t('settings.restoreModalTitle')}
visible={restoreModalVisible}
onCancel={() => setRestoreModalVisible(false)}
onOk={() => performRestore(!precheckInfo?.compatible)}
okText={precheckInfo?.compatible ? 'Restore now' : 'Restore anyway'}
okText={precheckInfo?.compatible ? t('settings.restoreNow') : t('settings.restoreAnyway')}
okType={precheckInfo?.compatible ? 'primary' : 'danger'}
confirmLoading={restoreBusy}
>
@@ -602,7 +591,7 @@ const GeneralSettings = function GeneralSettings() {
type="danger"
fullMode={false}
closeIcon={null}
title={<div style={{ fontWeight: 600, fontSize: '14px' }}>Problem detected</div>}
title={<div style={{ fontWeight: 600, fontSize: '14px' }}>{t('settings.restoreProblemDetected')}</div>}
description={<div>{precheckInfo?.message}</div>}
/>
)}
@@ -611,7 +600,7 @@ const GeneralSettings = function GeneralSettings() {
type="warning"
fullMode={false}
closeIcon={null}
title={<div style={{ fontWeight: 600, fontSize: '14px' }}>Automatic migrations will be applied</div>}
title={<div style={{ fontWeight: 600, fontSize: '14px' }}>{t('settings.restoreMigrationsApplied')}</div>}
description={<div>{precheckInfo?.message}</div>}
/>
)}
@@ -620,13 +609,15 @@ const GeneralSettings = function GeneralSettings() {
type="success"
fullMode={false}
closeIcon={null}
title={<div style={{ fontWeight: 600, fontSize: '14px' }}>Backup is compatible</div>}
title={<div style={{ fontWeight: 600, fontSize: '14px' }}>{t('settings.restoreCompatible')}</div>}
description={<div>{precheckInfo?.message}</div>}
/>
)}
<div style={{ marginTop: '0.5rem', fontSize: '12px', color: 'var(--semi-color-text-2)' }}>
Backup migration: {precheckInfo?.backupMigration ?? 'unknown'} | Required migration:{' '}
{precheckInfo?.requiredMigration ?? 'unknown'}
{t('settings.restoreMigrationInfo', {
backupMigration: precheckInfo?.backupMigration ?? 'unknown',
requiredMigration: precheckInfo?.requiredMigration ?? 'unknown',
})}
</div>
</Modal>
)}

6
ui/src/views/jobs/Jobs.jsx
View File

@@ -9,16 +9,18 @@ import { IconPlusCircle } from '@douyinfe/semi-icons';
import JobGrid from '../../components/grid/jobs/JobGrid.jsx';
import Headline from '../../components/headline/Headline.jsx';
import './Jobs.less';
import { useTranslation } from '../../services/i18n/i18n.jsx';
export default function Jobs() {
const t = useTranslation();
const navigate = useNavigate();
return (
<div className="jobs">
<Headline
text="Jobs"
text={t('jobs.title')}
actions={
<Button type="primary" theme="solid" icon={<IconPlusCircle />} onClick={() => navigate('/jobs/new')}>
New Job
{t('jobs.newJob')}
</Button>
}
/>

75
ui/src/views/jobs/mutation/JobMutation.jsx
View File

@@ -27,14 +27,17 @@ import {
IconUser,
IconFilter,
} from '@douyinfe/semi-icons';
const SPEC_FILTERS = [
{ key: 'maxPrice', translation: 'Max Price' },
{ key: 'minSize', translation: 'Min Size (m²)' },
{ key: 'minRooms', translation: 'Min Rooms' },
];
import { useTranslation } from '../../../services/i18n/i18n.jsx';
export default function JobMutator() {
const t = useTranslation();
const SPEC_FILTERS = [
{ key: 'maxPrice', translation: t('jobs.mutation.filterMaxPrice') },
{ key: 'minSize', translation: t('jobs.mutation.filterMinSize') },
{ key: 'minRooms', translation: t('jobs.mutation.filterMinRooms') },
];
const jobs = useSelector((state) => state.jobsData.jobs);
const shareableUserList = useSelector((state) => state.jobsData.shareableUserList);
const params = useParams();
@@ -105,7 +108,7 @@ export default function JobMutator() {
jobId: jobToBeEdit?.id || null,
});
await actions.jobsData.getJobs();
Toast.success('Job successfully saved...');
Toast.success(t('jobs.mutation.saved'));
navigate('/jobs');
} catch (Exception) {
console.error(Exception.json.message);
@@ -146,7 +149,7 @@ export default function JobMutator() {
)}
<Headline
text={jobToBeEdit ? 'Edit Job' : 'Create new Job'}
text={jobToBeEdit ? t('jobs.mutation.editTitle') : t('jobs.mutation.createTitle')}
actions={
<Button
icon={<IconArrowLeft />}
@@ -154,17 +157,17 @@ export default function JobMutator() {
theme="borderless"
style={{ color: '#909090' }}
>
Back
{t('jobs.mutation.back')}
</Button>
}
/>
<form>
<SegmentPart name="Name" Icon={IconPaperclip}>
<SegmentPart name={t('jobs.mutation.sectionName')} Icon={IconPaperclip}>
<Input
autoFocus
type="text"
maxLength={40}
placeholder="Name"
placeholder={t('jobs.mutation.namePlaceholder')}
width={6}
value={name}
onChange={(value) => setName(value)}
@@ -172,13 +175,9 @@ export default function JobMutator() {
</SegmentPart>
<Divider margin="1rem" />
<SegmentPart
name="Providers"
name={t('jobs.mutation.sectionProviders')}
Icon={IconBriefcase}
helpText={`
A provider is essentially the service (e.g. ImmoScout24, Kleinanzeigen) that Fredy searches for new listings.
Fredy will open a new tab pointing to the website of this provider. You have to adjust your search parameter
and click on "Search". If the results are being shown, copy the browser URL in here.
`}
helpText={t('jobs.mutation.providersHelp')}
>
<Button
type="primary"
@@ -189,7 +188,7 @@ export default function JobMutator() {
setProviderCreationVisibility(true);
}}
>
Add new Provider
{t('jobs.mutation.addProvider')}
</Button>
<ProviderTable
@@ -206,8 +205,8 @@ export default function JobMutator() {
<Divider margin="1rem" />
<SegmentPart
Icon={IconBell}
name="Notification Adapters"
helpText="Fredy supports multiple ways to notify you about new findings. These are called notification adapter. You can chose between email, Telegram etc."
name={t('jobs.mutation.sectionNotifications')}
helpText={t('jobs.mutation.notificationsHelp')}
>
<Button
type="primary"
@@ -215,7 +214,7 @@ export default function JobMutator() {
icon={<IconPlusCircle />}
onClick={() => setNotificationCreationVisibility(true)}
>
Add new Notification Adapter
{t('jobs.mutation.addNotification')}
</Button>
<NotificationAdapterTable
@@ -233,20 +232,20 @@ export default function JobMutator() {
<Divider margin="1rem" />
<SegmentPart
Icon={IconFilter}
name="Blacklist"
helpText="If a listing contains one of these words, it will be filtered out. Type in a word, then hit enter."
name={t('jobs.mutation.sectionBlacklist')}
helpText={t('jobs.mutation.blacklistHelp')}
>
<TagInput
value={blacklist || []}
placeholder="Add a word for filtering..."
placeholder={t('jobs.mutation.blacklistPlaceholder')}
onChange={(v) => setBlacklist([...v])}
/>
</SegmentPart>
<Divider margin="1rem" />
<SegmentPart
Icon={IconFilter}
name="Criteria Filter"
helpText="Filter listings by specific criteria. Only numbers are allowed. You can leave fields empty if you don't want to filter by them."
name={t('jobs.mutation.sectionCriteriaFilter')}
helpText={t('jobs.mutation.criteriaFilterHelp')}
>
<div className="jobMutation__specFilter">
{SPEC_FILTERS.map((filter) => (
@@ -254,7 +253,7 @@ export default function JobMutator() {
<div className="jobMutation__specFilterLabel">{filter.translation}</div>
<Input
type="number"
placeholder="Add a number"
placeholder={t('jobs.mutation.criteriaNumberPlaceholder')}
value={specFilter?.[filter.key]}
onChange={(value) => handleSpecFilterChange(filter.key, value)}
/>
@@ -265,24 +264,20 @@ export default function JobMutator() {
<Divider margin="1rem" />
<SegmentPart
Icon={IconFilter}
name="Area Filter"
helpText="Define multiple geographic areas on the map to filter listings. Start drawing by clicking on the square symbol in the top left corner of the map. Click on the map to add points of the polygon. Select the first point to close the polygon. After that, click on a free area of the map to apply this polygon (the color will change from yellow to blue). To delete a polygon, select it first and then click on the trash symbol."
name={t('jobs.mutation.sectionAreaFilter')}
helpText={t('jobs.mutation.areaFilterHelp')}
>
<AreaFilter spatialFilter={spatialFilter} onChange={handleSpatialFilterChange} />
</SegmentPart>
<Divider margin="1rem" />
<SegmentPart
Icon={IconUser}
name="Sharing with user"
helpText="You can share this job with other users. They will be able to see the listings, but only (as the creator) you can edit the job. Admins are filtered from this list as they have access to everything."
>
<SegmentPart Icon={IconUser} name={t('jobs.mutation.sectionSharing')} helpText={t('jobs.mutation.sharingHelp')}>
{shareableUserList.length === 0 ? (
<div>No users found to share this Job to. Please create additional non-admin user.</div>
<div>{t('jobs.mutation.sharingNoUsers')}</div>
) : (
<Select
filter
multiple
placeholder="Search user"
placeholder={t('jobs.mutation.sharingSearchPlaceholder')}
autoClearSearchValue={false}
defaultValue={shareWithUsers}
onChange={(value) => setShareWithUsers(value)}
@@ -298,17 +293,17 @@ export default function JobMutator() {
<Divider margin="1rem" />
<SegmentPart
Icon={IconPlayCircle}
name="Job activation"
helpText="Whether or not the job is activated. Inactive jobs will be ignored when Fredy checks for new listings."
name={t('jobs.mutation.sectionActivation')}
helpText={t('jobs.mutation.activationHelp')}
>
<Switch className="jobMutation__spaceTop" onChange={(checked) => setEnabled(checked)} checked={enabled} />
</SegmentPart>
<Divider margin="1rem" />
<Button type="danger" style={{ marginRight: '1rem' }} onClick={() => navigate('/jobs')}>
Cancel
{t('jobs.mutation.cancel')}
</Button>
<Button type="primary" icon={<IconPlusCircle />} disabled={!isSavingEnabled()} onClick={mutateJob}>
Save
{t('jobs.mutation.save')}
</Button>
</form>
</Fragment>

54
ui/src/views/jobs/mutation/components/notificationAdapter/NotificationAdapterMutator.jsx
View File

@@ -13,6 +13,7 @@ import { Banner, Button, Form, Modal, Select, Switch } from '@douyinfe/semi-ui-1
import './NotificationAdapterMutator.less';
import { useScreenWidth } from '../../../../../hooks/screenWidth.js';
import { useTranslation } from '../../../../../services/i18n/i18n.jsx';
const sortAdapter = (a, b) => {
if (a.name < b.name) {
@@ -24,11 +25,11 @@ const sortAdapter = (a, b) => {
return 0;
};
const validate = (selectedAdapter) => {
const validate = (selectedAdapter, t) => {
const results = [];
for (let uiElement of Object.values(selectedAdapter.fields || [])) {
if (uiElement.value == null && !uiElement.optional && uiElement.type !== 'boolean') {
results.push('All fields are mandatory and must be set.');
results.push(t('notification.validationAllMandatory'));
continue;
}
if (uiElement.type === 'boolean' && typeof uiElement.value !== 'boolean') {
@@ -37,16 +38,16 @@ const validate = (selectedAdapter) => {
if (uiElement.type === 'number') {
const numberValue = parseFloat(uiElement.value);
if (isNaN(numberValue) || numberValue < 0) {
results.push('A number field cannot contain anything else and must be > 0.');
results.push(t('notification.validationNumberField'));
continue;
}
}
if (uiElement.type === 'boolean' && typeof uiElement.value !== 'boolean') {
results.push('A boolean field cannot be of a different type.');
results.push(t('notification.validationBooleanField'));
continue;
}
if (typeof uiElement.value === 'string' && uiElement.value.length === 0 && !uiElement.optional) {
results.push('All fields are mandatory and must be set.');
results.push(t('notification.validationAllMandatory'));
}
}
@@ -70,6 +71,7 @@ export default function NotificationAdapterMutator({
editNotificationAdapter,
onData,
} = {}) {
const t = useTranslation();
const adapter = useSelector((state) => state.notificationAdapter);
const preFilledSelectedAdapter =
@@ -88,7 +90,7 @@ export default function NotificationAdapterMutator({
const onSubmit = (doStore) => {
if (doStore) {
const validationResults = validate(selectedAdapter);
const validationResults = validate(selectedAdapter, t);
if (validationResults.length > 0) {
setValidationMessage(validationResults.join('<br/>'));
return;
@@ -114,7 +116,7 @@ export default function NotificationAdapterMutator({
setValidationMessage(null);
setSuccessMessage(null);
const validationResults = validate(selectedAdapter);
const validationResults = validate(selectedAdapter, t);
if (validationResults.length > 0) {
setValidationMessage(validationResults.join('<br/>'));
return;
@@ -127,11 +129,9 @@ export default function NotificationAdapterMutator({
},
})
.then(() => {
setSuccessMessage('It seems like it worked! Please check your service.');
setSuccessMessage(t('notification.trySuccess'));
})
.catch((error) =>
setValidationMessage(`This did not work :-( I've received the following error: ${error.json.message}`),
);
.catch((error) => setValidationMessage(t('notification.tryError', { error: error.json.message })));
};
const setValue = (selectedAdapter, uiElement, key, value) => {
@@ -195,37 +195,29 @@ export default function NotificationAdapterMutator({
return (
<Modal
title={title != null ? title : 'Adding a new Notification Adapter'}
title={title != null ? title : t('notification.defaultTitle')}
visible={visible}
style={{ width: isMobile ? '95%' : '50rem' }}
onCancel={() => onSubmit(false)}
footer={
<div>
<Button type="secondary" disabled={selectedAdapter == null} style={{ float: 'left' }} onClick={onTry}>
Try
{t('notification.try')}
</Button>
<Button theme="light" type="tertiary" onClick={() => onSubmit(false)}>
Cancel
{t('notification.cancel')}
</Button>
<Button theme="solid" type="primary" onClick={() => onSubmit(true)}>
Save
{t('notification.save')}
</Button>
</div>
}
>
{description != null ? (
<p>{description}</p>
) : (
<p>
When Fredy finds new listings, we like to report them to you. To do so, notification adapter can be
configured. <br />
There are multiple ways how Fredy can send new listings to you. Chose your weapon...
</p>
)}
{description != null ? <p>{description}</p> : <p>{t('notification.description')}</p>}
<Select
filter
placeholder="Select a notification adapter"
placeholder={t('notification.selectPlaceholder')}
className="providerMutator__fields"
value={selectedAdapter == null ? '' : selectedAdapter.id}
optionList={adapter
@@ -265,7 +257,11 @@ export default function NotificationAdapterMutator({
fullMode={false}
type="danger"
closeIcon={null}
title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>Error</div>}
title={
<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>
{t('notification.errorTitle')}
</div>
}
style={{ marginBottom: '1rem' }}
description={<p dangerouslySetInnerHTML={{ __html: validationMessage }} />}
/>
@@ -275,7 +271,11 @@ export default function NotificationAdapterMutator({
fullMode={false}
type="success"
closeIcon={null}
title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>Yay!</div>}
title={
<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>
{t('notification.successTitle')}
</div>
}
style={{ marginBottom: '1rem' }}
description={<p dangerouslySetInnerHTML={{ __html: successMessage }} />}
/>

40
ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx
View File

@@ -8,9 +8,10 @@ import { useState, useEffect } from 'react';
import { Banner, Modal, Select, Input } from '@douyinfe/semi-ui-19';
import { transform } from '../../../../../services/transformer/providerTransformer';
import { useSelector } from '../../../../../services/state/store';
import { IconLikeHeart } from '@douyinfe/semi-icons';
import './ProviderMutator.less';
import { useScreenWidth } from '../../../../../hooks/screenWidth.js';
import { useTranslation } from '../../../../../services/i18n/i18n.jsx';
const sortProvider = (a, b) => {
if (a.key < b.key) {
@@ -33,6 +34,7 @@ export default function ProviderMutator({
onEditData,
providerToEdit,
} = {}) {
const t = useTranslation();
const provider = useSelector((state) => state.provider);
const [selectedProvider, setSelectedProvider] = useState(null);
const [providerUrl, setProviderUrl] = useState(null);
@@ -53,16 +55,16 @@ export default function ProviderMutator({
const validate = () => {
if (selectedProvider == null || selectedProvider.length === 0 || providerUrl == null || providerUrl.length === 0) {
return 'Please select a provider and copy the browser url into the textfield after configuring your search parameter.';
return t('provider.validationSelectAndUrl');
}
try {
const url = new URL(providerUrl);
if (selectedProvider.baseUrl.indexOf(url.origin) === -1) {
return 'The url you have copied is not valid.';
return t('provider.validationInvalidUrl');
}
/* eslint-disable no-unused-vars */
} catch (ignored) {
return 'The url you have copied is not valid.';
return t('provider.validationInvalidUrl');
}
return null;
};
@@ -104,46 +106,36 @@ export default function ProviderMutator({
return (
<Modal
title={providerToEdit ? 'Editing an existing Provider' : 'Adding a new Provider'}
title={providerToEdit ? t('provider.editTitle') : t('provider.defaultTitle')}
visible={visible}
onOk={() => onSubmit(true)}
onCancel={() => onSubmit(false)}
style={{ width: isMobile ? '95%' : '50rem' }}
okText="Save"
okText={t('provider.save')}
>
{validationMessage != null && (
<Banner
fullMode={false}
type="danger"
closeIcon={null}
title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>Error</div>}
title={
<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>{t('provider.errorTitle')}</div>
}
style={{ marginBottom: '1rem' }}
description={validationMessage}
/>
)}
{providerToEdit != null ? (
<p>
You can now edit the <strong>{providerToEdit.name}</strong> provider's URL in the input field below.
</p>
<p>{t('provider.editDescription', { name: providerToEdit.name })}</p>
) : (
<>
<p>
Provider are the <IconLikeHeart style={{ color: '#ff0000' }} /> of Fredy. We're supporting multiple Provider
such as Immowelt, Kalaydo etc. Select a provider from the list below.
<br />
Fredy will then open the provider's url in a new tab.
</p>
<p>
You will need to configure your search parameter like you would do when you do a regular search on the
provider's website.
<br />
When the search results are shown on the website, copy the url and paste it into the textfield below.
</p>
<p>{t('provider.description')}</p>
<p>{t('provider.descriptionStep2')}</p>
</>
)}
<Select
filter
placeholder="Select a provider"
placeholder={t('provider.selectPlaceholder')}
className="providerMutator__fields"
disabled={providerToEdit != null}
optionList={provider
@@ -167,7 +159,7 @@ export default function ProviderMutator({
<br />
<Input
type="text"
placeholder="Provider Url"
placeholder={t('provider.urlPlaceholder')}
width={10}
className="providerMutator__fields"
value={providerUrl}

116
ui/src/views/listings/ListingDetail.jsx
View File

@@ -49,6 +49,7 @@ import ListingDeletionModal from '../../components/ListingDeletionModal.jsx';
import Headline from '../../components/headline/Headline.jsx';
import StatusControl from '../../components/listings/StatusControl.jsx';
import './ListingDetail.less';
import { useTranslation, useLocale } from '../../services/i18n/i18n.jsx';
const { Title, Text } = Typography;
@@ -57,6 +58,8 @@ const STYLES = {
};
export default function ListingDetail() {
const t = useTranslation();
const locale = useLocale();
const { listingId } = useParams();
const navigate = useNavigate();
const actions = useActions();
@@ -79,7 +82,7 @@ export default function ListingDetail() {
await actions.listingsData.getListing(listingId);
} catch (e) {
console.error('Failed to load listing details:', e);
Toast.error('Failed to load listing details');
Toast.error(t('listing.detail.toastLoadError'));
navigate('/listings');
} finally {
setLoading(false);
@@ -114,13 +117,21 @@ export default function ListingDetail() {
new maplibregl.Marker({ color: '#3FB1CE' })
.setLngLat([listing.longitude, listing.latitude])
.setPopup(new maplibregl.Popup({ offset: 25 }).setHTML(`<h4>Listing Location</h4><p>${listing.address}</p>`))
.setPopup(
new maplibregl.Popup({ offset: 25 }).setHTML(
`<h4>${t('listing.detail.mapPopupListingLocation')}</h4><p>${listing.address}</p>`,
),
)
.addTo(map.current);
if (homeAddress?.coords) {
new maplibregl.Marker({ color: 'red' })
.setLngLat([homeAddress.coords.lng, homeAddress.coords.lat])
.setPopup(new maplibregl.Popup({ offset: 25 }).setHTML(`<h4>Home Address</h4><p>${homeAddress.address}</p>`))
.setPopup(
new maplibregl.Popup({ offset: 25 }).setHTML(
`<h4>${t('listing.detail.mapPopupHomeAddress')}</h4><p>${homeAddress.address}</p>`,
),
)
.addTo(map.current);
const bounds = getBoundsFromCoords([
@@ -261,10 +272,10 @@ export default function ListingDetail() {
await actions.userSettings.setListingDeletionPreference({ skipPrompt: true, hardDelete });
}
await xhrDelete('/api/listings/', { ids: [listing.id], hardDelete });
Toast.success('Listing successfully removed');
Toast.success(t('listing.detail.toastDeleted'));
navigate('/listings');
} catch (e) {
Toast.error(e.message || 'Error deleting listing');
Toast.error(e.message || t('listing.detail.toastDeleteError'));
} finally {
setDeleteModalVisible(false);
}
@@ -273,11 +284,13 @@ export default function ListingDetail() {
const handleWatch = async () => {
try {
await xhrPost('/api/listings/watch', { listingId: listing.id });
Toast.success(listing.isWatched === 1 ? 'Removed from Watchlist' : 'Added to Watchlist');
Toast.success(
listing.isWatched === 1 ? t('listing.detail.toastWatchlistRemoved') : t('listing.detail.toastWatchlistAdded'),
);
actions.listingsData.getListing(listingId);
} catch (e) {
console.error('Failed to operate Watchlist:', e);
Toast.error('Failed to operate Watchlist');
Toast.error(t('listing.detail.toastWatchlistError'));
}
};
@@ -285,10 +298,10 @@ export default function ListingDetail() {
try {
await actions.listingsData.setListingStatus(listing.id, next);
await actions.listingsData.getListing(listingId);
Toast.success(next ? `Marked as ${next}` : 'Status cleared');
Toast.success(next ? t('listings.toastStatusMarked', { status: next }) : t('listings.toastStatusCleared'));
} catch (e) {
console.error('Failed to update status:', e);
Toast.error('Failed to update status');
Toast.error(t('listings.toastStatusUpdateError'));
}
};
@@ -298,10 +311,10 @@ export default function ListingDetail() {
try {
await actions.listingsData.setListingNotes(listing.id, notesDraft);
await actions.listingsData.getListing(listingId);
Toast.success('Notes saved');
Toast.success(t('listing.detail.toastNotesSaved'));
} catch (e) {
console.error('Failed to save notes:', e);
Toast.error('Failed to save notes');
Toast.error(t('listing.detail.toastNotesError'));
} finally {
setNotesSaving(false);
}
@@ -317,69 +330,74 @@ export default function ListingDetail() {
if (!listing) return null;
const statusLabel = listing.status?.status
? listing.status.status.charAt(0).toUpperCase() + listing.status.status.slice(1)
: null;
const statusKeyMap = {
applied: 'listing.detail.statusApplied',
accepted: 'listing.detail.statusAccepted',
rejected: 'listing.detail.statusRejected',
};
const statusLabel = listing.status?.status ? t(statusKeyMap[listing.status.status] ?? listing.status.status) : null;
const data = [
{
key: 'Price',
key: t('listing.detail.fieldPrice'),
value: listing.price ? (
<span className="listing-detail__price">{formatEuroPrice(listing.price)}</span>
) : (
'N/A'
t('common.na')
),
Icon: <IconCart />,
helpText: 'The asking price of this listing, as reported by the provider.',
helpText: t('listing.detail.fieldPriceHelp'),
},
{
key: 'Size',
value: listing.size ? `${listing.size} m²` : 'N/A',
key: t('listing.detail.fieldSize'),
value: listing.size ? `${listing.size} m²` : t('common.na'),
Icon: <IconExpand />,
helpText: 'Living space of the listing in square meters.',
helpText: t('listing.detail.fieldSizeHelp'),
},
{
key: 'Rooms',
value: listing.rooms ? `${listing.rooms} Rooms` : 'N/A',
key: t('listing.detail.fieldRooms'),
value: listing.rooms ? t('listing.detail.fieldRoomsValue', { count: listing.rooms }) : t('common.na'),
Icon: <IconGridView />,
helpText: 'Number of rooms in the listing.',
helpText: t('listing.detail.fieldRoomsHelp'),
},
{
key: 'Job',
key: t('listing.detail.fieldJob'),
value: listing.job_name,
Icon: <IconBriefcase />,
helpText: 'The Fredy job that found this listing.',
helpText: t('listing.detail.fieldJobHelp'),
},
{
key: 'Provider',
key: t('listing.detail.fieldProvider'),
value: listing.provider ? listing.provider.charAt(0).toUpperCase() + listing.provider.slice(1) : 'Unknown',
Icon: <IconBriefcase />,
helpText: 'The real estate portal where this listing was scraped from.',
helpText: t('listing.detail.fieldProviderHelp'),
},
{
key: 'Added',
value: timeService.format(listing.created_at),
key: t('listing.detail.fieldAdded'),
value: timeService.format(listing.created_at, true, locale),
Icon: <IconClock />,
helpText: 'When Fredy first added this listing to your database.',
helpText: t('listing.detail.fieldAddedHelp'),
},
];
if (statusLabel) {
data.push({
key: 'Status',
value: listing.status?.setAt ? `${statusLabel} (set ${timeService.format(listing.status.setAt)})` : statusLabel,
key: t('listing.detail.fieldStatus'),
value: listing.status?.setAt
? `${statusLabel} ${t('listing.detail.statusSetAt', { date: timeService.format(listing.status.setAt, true, locale) })}`
: statusLabel,
Icon: <IconActivity />,
helpText: 'The status you marked for this listing and when you set it.',
helpText: t('listing.detail.fieldStatusHelp'),
});
}
return (
<div className="listing-detail">
<Headline
text={listing?.title || 'Listing Detail'}
text={listing?.title || t('listing.detail.defaultTitle')}
actions={
<Button icon={<IconArrowLeft />} onClick={() => navigate(-1)} theme="borderless" style={{ color: '#909090' }}>
Back
{t('listing.detail.back')}
</Button>
}
/>
@@ -398,7 +416,7 @@ export default function ListingDetail() {
{listing.address}
</a>
) : (
<Text type="secondary">No address provided</Text>
<Text type="secondary">{t('listing.detail.noAddress')}</Text>
)}
</Space>
<Space wrap className="listing-detail__header-actions">
@@ -408,12 +426,12 @@ export default function ListingDetail() {
theme="borderless"
className={`listing-detail__watch-btn${listing.isWatched === 1 ? ' listing-detail__watch-btn--active' : ''}`}
>
{listing.isWatched === 1 ? 'Watched' : 'Watch'}
{listing.isWatched === 1 ? t('listing.detail.watched') : t('listing.detail.watch')}
</Button>
<StatusControl status={listing.status?.status ?? null} onChange={handleStatusChange} />
<a href={listing.link} target="_blank" rel="noopener noreferrer" className="listing-detail__open-btn">
<IconLink style={{ marginRight: 6 }} />
Open listing
{t('listing.detail.openListing')}
</a>
<Button
icon={<IconDelete />}
@@ -427,7 +445,7 @@ export default function ListingDetail() {
theme="light"
type="danger"
>
Delete
{t('listing.detail.delete')}
</Button>
</Space>
</div>
@@ -439,7 +457,7 @@ export default function ListingDetail() {
>
<Image
src={listing.image_url ?? no_image}
fallback={<img src={no_image} alt="No image available" />}
fallback={<img src={no_image} alt={t('listing.detail.noImageAlt')} />}
style={{ width: '100%', height: '100%' }}
preview={!!listing.image_url}
/>
@@ -447,12 +465,12 @@ export default function ListingDetail() {
<div className="listing-detail__notes">
<Title heading={4} className="listing-detail__notes-title">
Notes
{t('listing.detail.notesTitle')}
</Title>
<TextArea
value={notesDraft}
onChange={(val) => setNotesDraft(val)}
placeholder="Your private notes about this listing…"
placeholder={t('listing.detail.notesPlaceholder')}
rows={5}
autosize={{ minRows: 4, maxRows: 12 }}
className="listing-detail__notes-textarea"
@@ -466,7 +484,7 @@ export default function ListingDetail() {
disabled={notesSaving || (notesDraft ?? '') === (listing.notes ?? '')}
onClick={handleSaveNotes}
>
Store notes
{t('listing.detail.storeNotes')}
</Button>
</Space>
</div>
@@ -474,7 +492,7 @@ export default function ListingDetail() {
<Col span={24} lg={12}>
<div className="listing-detail__info-section">
<Title heading={4} style={{ marginBottom: '1rem' }}>
Details
{t('listing.detail.detailsTitle')}
</Title>
<Descriptions column={1}>
{data.map((item, index) => (
@@ -490,10 +508,10 @@ export default function ListingDetail() {
</Descriptions>
<Divider margin="1.5rem" />
<Title heading={4} style={{ marginBottom: '1rem' }}>
Description
{t('listing.detail.descriptionTitle')}
</Title>
<Text type="secondary" style={{ whiteSpace: 'pre-wrap' }}>
{listing.description || 'No description available.'}
{listing.description || t('listing.detail.noDescription')}
</Text>
{listing.distance_to_destination && (
@@ -501,7 +519,7 @@ export default function ListingDetail() {
<Divider margin="1.5rem" />
<Space align="center">
<IconActivity style={{ fontSize: '18px', color: 'var(--semi-color-primary)' }} />
<Text strong>Distance to home:</Text>
<Text strong>{t('listing.detail.distanceToHome')}</Text>
<Tag color="blue">{listing.distance_to_destination} m</Tag>
</Space>
</>
@@ -512,12 +530,12 @@ export default function ListingDetail() {
</Card>
<div className="listing-detail__map-wrapper">
<Title heading={3}>Location</Title>
<Title heading={3}>{t('listing.detail.locationTitle')}</Title>
{!hasGeo ? (
<Banner
type="warning"
bordered
description="This listing has no valid geocoordinates, so we cannot show it on the map."
description={t('listing.detail.noGeoWarning')}
style={{ marginTop: '1rem' }}
/>
) : (

4
ui/src/views/listings/Listings.jsx
View File

@@ -5,12 +5,14 @@
import ListingsOverview from '../../components/listings/ListingsOverview.jsx';
import Headline from '../../components/headline/Headline.jsx';
import { useTranslation } from '../../services/i18n/i18n.jsx';
/**
* @param {{ mode?: 'all' | 'watchlist' }} props
*/
export default function Listings({ mode = 'all' }) {
const title = mode === 'watchlist' ? 'Watchlist' : 'Listings';
const t = useTranslation();
const title = mode === 'watchlist' ? t('listings.watchlistTitle') : t('listings.title');
return (
<>
<Headline text={title} />

51
ui/src/views/listings/Map.jsx
View File

@@ -22,12 +22,14 @@ import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import ListingDeletionModal from '../../components/ListingDeletionModal.jsx';
import Map from '../../components/map/Map.jsx';
import Headline from '../../components/headline/Headline.jsx';
import { useTranslation } from '../../services/i18n/i18n.jsx';
const RangeSlider = _RangeSlider?.default ?? _RangeSlider;
const { Text } = Typography;
export default function MapView() {
const t = useTranslation();
const mapContainer = useRef(null);
const map = useRef(null);
const markers = useRef([]);
@@ -63,10 +65,10 @@ export default function MapView() {
await actions.userSettings.setListingDeletionPreference({ skipPrompt: true, hardDelete });
}
await xhrDelete('/api/listings/', { ids: [id], hardDelete });
Toast.success('Listing successfully removed');
Toast.success(t('map.toastDeleted'));
fetchListings();
} catch (error) {
Toast.error(error.message || 'Error deleting listing');
Toast.error(error.message || t('map.toastDeleteError'));
} finally {
setDeleteModalVisible(false);
setListingToDelete(null);
@@ -236,7 +238,7 @@ export default function MapView() {
.setLngLat([homeAddress.coords.lng, homeAddress.coords.lat])
.setPopup(
new maplibregl.Popup({ offset: 25 }).setHTML(
`<div class="map-popup-content"><h4>Home Address</h4><p>${homeAddress.address}</p></div>`,
`<div class="map-popup-content"><h4>${t('map.popupHomeAddress')}</h4><p>${homeAddress.address}</p></div>`,
),
)
.addTo(map.current);
@@ -313,11 +315,11 @@ export default function MapView() {
/>
<h4>${listing.title}</h4>
<div class="info">
<span><strong>Price:</strong> ${listing.price ? listing.price + ' €' : 'N/A'}</span>
<span><strong>Address:</strong> ${listing.address || 'N/A'}</span>
<span><strong>Job:</strong> ${listing.job_name || 'N/A'}</span>
<span><strong>Provider:</strong> ${capitalizedProvider}</span>
<span><strong>Size:</strong> ${listing.size != null ? `${listing.size} m²` : 'N/A'}</span>
<span><strong>${t('map.popupPrice')}</strong> ${listing.price ? listing.price + ' €' : t('common.na')}</span>
<span><strong>${t('map.popupAddress')}</strong> ${listing.address || t('common.na')}</span>
<span><strong>${t('map.popupJob')}</strong> ${listing.job_name || t('common.na')}</span>
<span><strong>${t('map.popupProvider')}</strong> ${capitalizedProvider}</span>
<span><strong>${t('map.popupSize')}</strong> ${listing.size != null ? `${listing.size} m²` : t('common.na')}</span>
<div style="display: flex; gap: 8px; margin-top: 8px; justify-content: space-between;">
<div class="map-popup-content__linkButton">
<a href="${listing.link}" target="_blank" rel="noopener noreferrer">
@@ -326,14 +328,14 @@ export default function MapView() {
</div>
<button
class="map-popup-content__detailsButton"
title="View Details"
title="${t('map.popupViewDetails')}"
onclick="viewDetails('${listing.id}')"
>
${renderToString(<IconEyeOpened />)}
</button>
<button
class="map-popup-content__deleteButton"
title="Remove"
title="${t('map.popupRemove')}"
onclick="deleteListing('${listing.id}')"
>
${renderToString(<IconDelete />)}
@@ -369,7 +371,7 @@ export default function MapView() {
return (
<>
<Headline text="Map View" />
<Headline text={t('map.title')} />
<div className="map-view-container">
{!homeAddress && (
<Banner
@@ -380,8 +382,9 @@ export default function MapView() {
style={{ marginBottom: '8px' }}
description={
<span>
No home address set. Configure it in <Link to="/userSettings">user settings</Link> to use the distance
filter.
{t('map.noHomeAddressBefore')}
<Link to="/userSettings">{t('map.noHomeAddressLink')}</Link>
{t('map.noHomeAddressAfter')}
</span>
}
/>
@@ -393,7 +396,7 @@ export default function MapView() {
bordered
closeIcon={null}
style={{ marginBottom: '8px' }}
description="Only listings with valid addresses are shown on this map."
description={t('map.onlyValidAddresses')}
/>
<div className="map-view-container__map-wrapper">
@@ -408,10 +411,10 @@ export default function MapView() {
<div className="map-view-container__floating-panel">
<div className="map-view-container__panel-row">
<Text size="small" strong style={{ color: '#8892a4' }}>
Job
{t('map.filterJobLabel')}
</Text>
<Select
placeholder="All jobs"
placeholder={t('map.filterJobPlaceholder')}
showClear
size="small"
onChange={(val) => setJobId(val)}
@@ -428,16 +431,16 @@ export default function MapView() {
<div className="map-view-container__panel-row">
<Text size="small" strong style={{ color: '#8892a4' }}>
Distance
{t('map.filterDistanceLabel')}
</Text>
<Select
placeholder="None"
placeholder={t('map.filterDistanceNone')}
size="small"
onChange={(val) => setDistanceFilter(val)}
value={distanceFilter}
style={{ width: 100 }}
>
<Select.Option value={0}>None</Select.Option>
<Select.Option value={0}>{t('map.filterDistanceNone')}</Select.Option>
<Select.Option value={5}>5 km</Select.Option>
<Select.Option value={10}>10 km</Select.Option>
<Select.Option value={15}>15 km</Select.Option>
@@ -448,7 +451,7 @@ export default function MapView() {
<div className="map-view-container__panel-row">
<Text size="small" strong style={{ color: '#8892a4' }}>
Price (€)
{t('map.filterPriceLabel')}
</Text>
<div className="map-view-container__price-slider">
<div className="map__rangesliderLabels">
@@ -461,17 +464,17 @@ export default function MapView() {
<div className="map-view-container__panel-row">
<Text size="small" strong style={{ color: '#8892a4' }}>
Style
{t('map.filterStyleLabel')}
</Text>
<Select size="small" value={style} onChange={(val) => handleMapStyle(val)} style={{ width: 110 }}>
<Select.Option value="STANDARD">Standard</Select.Option>
<Select.Option value="SATELLITE">Satellite</Select.Option>
<Select.Option value="STANDARD">{t('map.filterStyleStandard')}</Select.Option>
<Select.Option value="SATELLITE">{t('map.filterStyleSatellite')}</Select.Option>
</Select>
</div>
<div className="map-view-container__panel-row">
<Text size="small" strong style={{ color: '#8892a4' }}>
3D Buildings
{t('map.filter3dBuildings')}
</Text>
<Switch
size="small"

28
ui/src/views/listings/management/WatchlistManagement.jsx
View File

@@ -8,8 +8,10 @@ import { IconHorn } from '@douyinfe/semi-icons';
import { SegmentPart } from '../../../components/segment/SegmentPart.jsx';
import { Banner, Button, Checkbox, Space, Typography } from '@douyinfe/semi-ui-19';
import NotificationAdapterMutator from '../../jobs/mutation/components/notificationAdapter/NotificationAdapterMutator.jsx';
import { useTranslation } from '../../../services/i18n/i18n.jsx';
export default function WatchlistManagement() {
const t = useTranslation();
const [notificationChooserVisible, setNotificationChooserVisible] = useState(false);
const [notificationAdapterData, setNotificationAdapterData] = useState([]);
//TODO: Set default
@@ -17,39 +19,37 @@ export default function WatchlistManagement() {
const [priceChanges, setPriceChanges] = useState(false);
return (
<div>
<SegmentPart
name="Notification for Watch List"
helpText="You can get notified for changes on listings from your watch list."
Icon={IconHorn}
>
<SegmentPart name={t('watchlist.sectionName')} helpText={t('watchlist.sectionHelp')} Icon={IconHorn}>
<Banner
fullMode={false}
type="info"
closeIcon={null}
title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>Note</div>}
description="You’ll receive notifications only for listings that are on your watch list. To add listings to it, open the 'Listings' section and tag the ones you want to follow."
title={
<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>{t('watchlist.noteTitle')}</div>
}
description={t('watchlist.noteDescription')}
/>
<Space />
<Typography.Title heading={5} style={{ marginTop: '1rem' }}>
Notify me when:
{t('watchlist.notifyMeWhen')}
</Typography.Title>
<Checkbox checked={activityChanges} onChange={(e) => setActivityChanges(e.target.checked)}>
Listing state changes (e.g. listing becomes inactive)
{t('watchlist.activityChanges')}
</Checkbox>
<Checkbox checked={priceChanges} onChange={(e) => setPriceChanges(e.target.checked)}>
Listing price changes
{t('watchlist.priceChanges')}
</Checkbox>
<Space />
<Typography.Title heading={5} style={{ marginTop: '1rem' }}>
Notify me with:
{t('watchlist.notifyMeWith')}
</Typography.Title>
<Button onClick={() => setNotificationChooserVisible(true)}>Select notification method</Button>
<Button onClick={() => setNotificationChooserVisible(true)}>{t('watchlist.selectNotificationMethod')}</Button>
<NotificationAdapterMutator
title="Add notification method"
description="When something has changed, Fredy will notify you using the selected notification adapter. Note, some adapter like SqLite are not available here."
title={t('watchlist.addNotificationTitle')}
description={t('watchlist.addNotificationDescription')}
visible={notificationChooserVisible}
onVisibilityChanged={(visible) => {
setNotificationChooserVisible(visible);

14
ui/src/views/login/Login.jsx
View File

@@ -14,8 +14,10 @@ import { Input, Button, Banner } from '@douyinfe/semi-ui-19';
import './login.less';
import { IconUser, IconLock } from '@douyinfe/semi-icons';
import { useTranslation } from '../../services/i18n/i18n.jsx';
export default function Login() {
const t = useTranslation();
const actions = useActions();
const [username, setUserName] = React.useState('');
const [password, setPassword] = React.useState('');
@@ -33,7 +35,7 @@ export default function Login() {
const tryLogin = async () => {
if (!username?.trim() || !password) {
setError('Username and password are mandatory.');
setError(t('login.errorMandatory'));
return;
}
setError(null);
@@ -45,7 +47,7 @@ export default function Login() {
});
/* eslint-disable no-unused-vars */
} catch (ignored) {
setError('Login unsuccessful. Please check your username and password.');
setError(t('login.errorInvalid'));
return;
}
@@ -67,7 +69,7 @@ export default function Login() {
type="info"
bordered
closeIcon={null}
description="This is the demo version of Fredy. Use 'demo' as both the username and password to log in."
description={t('login.demoBanner')}
style={{ marginBottom: '1.5rem' }}
/>
)}
@@ -78,7 +80,7 @@ export default function Login() {
<Input
size="large"
prefix={<IconUser />}
placeholder="Username"
placeholder={t('login.usernamePlaceholder')}
value={username}
showClear
autoFocus
@@ -97,7 +99,7 @@ export default function Login() {
mode="password"
prefix={<IconLock />}
value={password}
placeholder="Password"
placeholder={t('login.passwordPlaceholder')}
onChange={(value) => setPassword(value)}
onKeyPress={async (e) => {
if (e.key === 'Enter') {
@@ -108,7 +110,7 @@ export default function Login() {
</div>
<Button block type="primary" onClick={tryLogin} theme="solid" style={{ marginTop: '1rem' }}>
Login
{t('login.loginButton')}
</Button>
</form>
</div>

7
ui/src/views/user/UserRemovalModal.jsx
View File

@@ -4,10 +4,13 @@
*/
import { Modal } from '@douyinfe/semi-ui-19';
import { useTranslation } from '../../services/i18n/i18n.jsx';
const UserRemovalModal = function UserRemovalModal({ onOk, onCancel }) {
const t = useTranslation();
return (
<Modal title="Removing user" visible={true} closable={false} onOk={onOk} onCancel={onCancel}>
<p>Removing this user will also remove all associated jobs.</p>
<Modal title={t('users.removalModal.title')} visible={true} closable={false} onOk={onOk} onCancel={onCancel}>
<p>{t('users.removalModal.message')}</p>
</Modal>
);
};

8
ui/src/views/user/Users.jsx
View File

@@ -13,8 +13,10 @@ import { xhrDelete } from '../../services/xhr';
import { useNavigate } from 'react-router-dom';
import Headline from '../../components/headline/Headline.jsx';
import './Users.less';
import { useTranslation } from '../../services/i18n/i18n.jsx';
const Users = function Users() {
const t = useTranslation();
const actions = useActions();
const [loading, setLoading] = React.useState(true);
const users = useSelector((state) => state.user.users);
@@ -32,7 +34,7 @@ const Users = function Users() {
const onUserRemoval = async () => {
try {
await xhrDelete('/api/admin/users', { userId: userIdToBeRemoved });
Toast.success('User successfully removed');
Toast.success(t('users.toastRemoved'));
setUserIdToBeRemoved(null);
await actions.jobsData.getJobs();
await actions.user.getUsers();
@@ -45,10 +47,10 @@ const Users = function Users() {
return (
<div className="users">
<Headline
text="Users"
text={t('users.title')}
actions={
<Button type="primary" theme="solid" icon={<IconPlus />} onClick={() => navigate('/users/new')}>
New User
{t('users.newUser')}
</Button>
}
/>

32
ui/src/views/user/mutation/UserMutator.jsx
View File

@@ -13,8 +13,10 @@ import './UserMutator.less';
import { SegmentPart } from '../../../components/segment/SegmentPart';
import { IconPlusCircle, IconArrowLeft } from '@douyinfe/semi-icons';
import Headline from '../../../components/headline/Headline.jsx';
import { useTranslation } from '../../../services/i18n/i18n.jsx';
const UserMutator = function UserMutator() {
const t = useTranslation();
const params = useParams();
const [username, setUsername] = React.useState('');
const [password, setPassword] = React.useState('');
@@ -55,7 +57,7 @@ const UserMutator = function UserMutator() {
isAdmin,
});
await actions.user.getUsers();
Toast.success('User successfully saved...');
Toast.success(t('users.mutation.saved'));
navigate('/users');
} catch (error) {
console.error(error);
@@ -66,7 +68,7 @@ const UserMutator = function UserMutator() {
return (
<>
<Headline
text={params.userId ? 'Edit User' : 'New User'}
text={params.userId ? t('users.mutation.editTitle') : t('users.mutation.newTitle')}
actions={
<Button
icon={<IconArrowLeft />}
@@ -74,17 +76,17 @@ const UserMutator = function UserMutator() {
theme="borderless"
style={{ color: '#909090' }}
>
Back
{t('users.mutation.back')}
</Button>
}
/>
<form className="userMutator">
<SegmentPart name="Username" helpText="The username used to login to Fredy">
<SegmentPart name={t('users.mutation.sectionUsername')} helpText={t('users.mutation.usernameHelp')}>
<Input
type="text"
label="Username"
label={t('users.mutation.sectionUsername')}
maxLength={30}
placeholder="Username"
placeholder={t('users.mutation.usernamePlaceholder')}
autoFocus
width={6}
value={username}
@@ -92,38 +94,38 @@ const UserMutator = function UserMutator() {
/>
</SegmentPart>
<Divider margin="1rem" />
<SegmentPart name="Password" helpText="The password used to login to Fredy">
<SegmentPart name={t('users.mutation.sectionPassword')} helpText={t('users.mutation.passwordHelp')}>
<Input
mode="password"
label="Password"
placeholder="Password"
label={t('users.mutation.sectionPassword')}
placeholder={t('users.mutation.passwordPlaceholder')}
width={6}
value={password}
onChange={(val) => setPassword(val)}
/>
</SegmentPart>
<Divider margin="1rem" />
<SegmentPart name="Retype password" helpText="Retype the password to make sure they match">
<SegmentPart name={t('users.mutation.sectionRetypePassword')} helpText={t('users.mutation.retypePasswordHelp')}>
<Input
mode="password"
label="Retype password"
placeholder="Retype password"
label={t('users.mutation.sectionRetypePassword')}
placeholder={t('users.mutation.retypePasswordPlaceholder')}
width={6}
value={password2}
onChange={(val) => setPassword2(val)}
/>
</SegmentPart>
<Divider margin="1rem" />
<SegmentPart name="Is user an admin?" helpText="Check this if the user is an administrator">
<SegmentPart name={t('users.mutation.sectionIsAdmin')} helpText={t('users.mutation.isAdminHelp')}>
<Switch checked={isAdmin} onChange={(checked) => setIsAdmin(checked)} />
</SegmentPart>
<Divider margin="1rem" />
<div className="userMutator__actions">
<Button size="small" theme="borderless" style={{ color: '#909090' }} onClick={() => navigate('/users')}>
Cancel
{t('users.mutation.cancel')}
</Button>
<Button size="small" type="primary" theme="solid" icon={<IconPlusCircle />} onClick={saveUser}>
Save
{t('users.mutation.save')}
</Button>
</div>
</form>