Add WebUI settings (#460)
* Add WebUI settings * [VersionMapping] Require server version "r1427" for preview
This commit is contained in:
schroda
158
src/components/settings/SelectSetting.tsx
Normal file
158
src/components/settings/SelectSetting.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
/*
|
||||
* Copyright (C) Contributors to the Suwayomi project
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
FormControl,
|
||||
ListItemText,
|
||||
MenuItem,
|
||||
Select,
|
||||
Stack,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import DialogContentText from '@mui/material/DialogContentText';
|
||||
import InfoIcon from '@mui/icons-material/Info';
|
||||
import { TranslationKey } from '@/typings.ts';
|
||||
|
||||
export type SelectSettingValueDisplayInfo = {
|
||||
text: TranslationKey;
|
||||
description?: TranslationKey;
|
||||
disclaimer?: TranslationKey;
|
||||
};
|
||||
|
||||
export type SelectSettingValue<Value> = [Value: Value, DisplayInfo: SelectSettingValueDisplayInfo];
|
||||
|
||||
export const SelectSetting = <SettingValue extends string | number>({
|
||||
settingName,
|
||||
dialogDescription,
|
||||
value,
|
||||
defaultValue,
|
||||
values,
|
||||
handleChange,
|
||||
disabled = false,
|
||||
}: {
|
||||
settingName: string;
|
||||
dialogDescription?: string;
|
||||
value?: SettingValue;
|
||||
defaultValue: SettingValue;
|
||||
values: SelectSettingValue<SettingValue>[];
|
||||
handleChange: (value: SettingValue) => void;
|
||||
disabled?: boolean;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
const [dialogValue, setDialogValue] = useState(value ?? defaultValue);
|
||||
|
||||
const valueDisplayText = useMemo(() => values.find(([key]) => key === value)?.[1]?.text, [value]);
|
||||
const dialogValueDisplayInfo = useMemo(() => values.find(([key]) => key === dialogValue)![1], [dialogValue]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
|
||||
setDialogValue(value);
|
||||
}, [value]);
|
||||
|
||||
const closeDialog = (resetValue: boolean = true) => {
|
||||
if (resetValue) {
|
||||
setDialogValue(value ?? defaultValue);
|
||||
}
|
||||
|
||||
setIsDialogOpen(false);
|
||||
};
|
||||
|
||||
const updateSetting = () => {
|
||||
closeDialog(false);
|
||||
handleChange(dialogValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ListItemButton disabled={disabled} onClick={() => setIsDialogOpen(true)}>
|
||||
<ListItemText
|
||||
primary={settingName}
|
||||
secondary={valueDisplayText ? t(valueDisplayText) : t('global.label.loading')}
|
||||
secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
|
||||
/>
|
||||
</ListItemButton>
|
||||
|
||||
<Dialog open={isDialogOpen} onClose={() => closeDialog()} fullWidth>
|
||||
<DialogContent>
|
||||
<DialogTitle sx={{ paddingLeft: 0 }}>{settingName}</DialogTitle>
|
||||
{!!dialogDescription && (
|
||||
<DialogContentText sx={{ paddingBottom: '10px' }}>{dialogDescription}</DialogContentText>
|
||||
)}
|
||||
{(!!dialogValueDisplayInfo.description || !!dialogValueDisplayInfo.disclaimer) && (
|
||||
<DialogContentText sx={{ paddingBottom: '10px' }} component="div">
|
||||
{dialogValueDisplayInfo.description && (
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
whiteSpace: 'pre-line',
|
||||
}}
|
||||
>
|
||||
{t(dialogValueDisplayInfo.description)}
|
||||
</Typography>
|
||||
)}
|
||||
{dialogValueDisplayInfo.disclaimer && (
|
||||
<Stack direction="row" alignItems="center">
|
||||
<InfoIcon color="warning" />
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
marginLeft: '10px',
|
||||
marginTop: '5px',
|
||||
whiteSpace: 'pre-line',
|
||||
}}
|
||||
>
|
||||
{t(dialogValueDisplayInfo.disclaimer)}
|
||||
</Typography>
|
||||
</Stack>
|
||||
)}
|
||||
</DialogContentText>
|
||||
)}
|
||||
{/* {!!dialogValueDisplayInfo.disclaimer && ( */}
|
||||
{/* <DialogContentText sx={{ paddingBottom: '10px', color: 'orange' }}> */}
|
||||
{/* {t(dialogValueDisplayInfo.disclaimer)} */}
|
||||
{/* </DialogContentText> */}
|
||||
{/* )} */}
|
||||
<FormControl fullWidth>
|
||||
<Select
|
||||
id="dialog-select"
|
||||
value={dialogValue}
|
||||
onChange={(e) => setDialogValue(e.target.value as SettingValue)}
|
||||
>
|
||||
{values.map(([selectValue, { text: selectText }]) => (
|
||||
<MenuItem key={selectValue} value={selectValue}>
|
||||
{t(selectText)}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => closeDialog()} color="primary">
|
||||
{t('global.button.cancel')}
|
||||
</Button>
|
||||
<Button onClick={() => updateSetting()} color="primary">
|
||||
{t('global.button.ok')}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
84
src/components/settings/webUI/WebUIUpdateIntervalSetting.tsx
Normal file
84
src/components/settings/webUI/WebUIUpdateIntervalSetting.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
/*
|
||||
* Copyright (C) Contributors to the Suwayomi project
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { List, ListItem, ListItemText, Switch } from '@mui/material';
|
||||
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
|
||||
import { useCallback } from 'react';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
|
||||
import { getPersistedServerSetting, usePersistedValue } from '@/util/usePersistedValue.tsx';
|
||||
|
||||
const DEFAULT_VALUE = 23;
|
||||
const MIN_VALUE = 1;
|
||||
const MAX_VALUE = 23; // 1 month
|
||||
|
||||
export const WebUIUpdateIntervalSetting = ({ disabled = false }: { disabled?: boolean }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { data } = requestManager.useGetServerSettings();
|
||||
const updateCheckInterval = data?.settings.webUIUpdateCheckInterval;
|
||||
const shouldAutoUpdate = !!updateCheckInterval;
|
||||
const [mutateSettings] = requestManager.useUpdateServerSettings();
|
||||
const [currentUpdateCheckInterval, persistUpdateCheckInterval] = usePersistedValue(
|
||||
'lastUpdateCheckInterval',
|
||||
DEFAULT_VALUE,
|
||||
updateCheckInterval,
|
||||
getPersistedServerSetting,
|
||||
);
|
||||
|
||||
const updateSetting = useCallback(
|
||||
(webUIUpdateCheckInterval: number) => {
|
||||
persistUpdateCheckInterval(
|
||||
webUIUpdateCheckInterval === 0 ? currentUpdateCheckInterval : webUIUpdateCheckInterval,
|
||||
);
|
||||
mutateSettings({ variables: { input: { settings: { webUIUpdateCheckInterval } } } });
|
||||
},
|
||||
[currentUpdateCheckInterval],
|
||||
);
|
||||
|
||||
const setDoAutoUpdates = (enable: boolean) => {
|
||||
const globalUpdateInterval = enable ? currentUpdateCheckInterval : 0;
|
||||
updateSetting(globalUpdateInterval);
|
||||
};
|
||||
|
||||
return (
|
||||
<List>
|
||||
<ListItem disabled={disabled}>
|
||||
<ListItemText primary={t('settings.webui.auto_update.label.title')} />
|
||||
<ListItemSecondaryAction>
|
||||
<Switch
|
||||
disabled={disabled}
|
||||
edge="end"
|
||||
checked={shouldAutoUpdate}
|
||||
onChange={(e) => setDoAutoUpdates(e.target.checked)}
|
||||
/>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
<NumberSetting
|
||||
settingTitle={t('settings.webui.auto_update.label.interval')}
|
||||
settingValue={
|
||||
updateCheckInterval !== undefined
|
||||
? t('library.settings.global_update.auto_update.interval.label.value', {
|
||||
hours: currentUpdateCheckInterval,
|
||||
})
|
||||
: undefined
|
||||
}
|
||||
value={currentUpdateCheckInterval}
|
||||
minValue={MIN_VALUE}
|
||||
maxValue={MAX_VALUE}
|
||||
defaultValue={DEFAULT_VALUE}
|
||||
showSlider
|
||||
dialogTitle={t('settings.webui.auto_update.label.interval')}
|
||||
valueUnit={t('global.time.hour_short')}
|
||||
handleUpdate={updateSetting}
|
||||
disabled={disabled || !shouldAutoUpdate}
|
||||
/>
|
||||
</List>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user