added auto scroll

This commit is contained in:
proddy
2024-09-11 22:30:38 +02:00
parent 1e3285b299
commit 57709d7dbb

View File

@@ -87,6 +87,7 @@ const SystemLog = () => {
const [logEntries, setLogEntries] = useState<LogEntry[]>([]); const [logEntries, setLogEntries] = useState<LogEntry[]>([]);
const [lastIndex, setLastIndex] = useState<number>(0); const [lastIndex, setLastIndex] = useState<number>(0);
const [autoscroll, setAutoscroll] = useState(true);
const updateFormValue = updateValueDirty( const updateFormValue = updateValueDirty(
origData, origData,
@@ -112,7 +113,7 @@ const SystemLog = () => {
}); });
onError(() => { onError(() => {
toast.error('No connection to Log server'); toast.error('No connection to Log service');
}); });
// called on page load to reset pointer and fetch all log entries // called on page load to reset pointer and fetch all log entries
@@ -157,7 +158,7 @@ const SystemLog = () => {
// handle scrolling // handle scrolling
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
if (logEntries.length) { if (logEntries.length && autoscroll) {
ref.current?.scrollIntoView({ ref.current?.scrollIntoView({
behavior: 'smooth', behavior: 'smooth',
block: 'end' block: 'end'
@@ -173,12 +174,12 @@ const SystemLog = () => {
return ( return (
<> <>
<Grid container spacing={2} alignItems="center"> <Grid container spacing={2} alignItems="center">
<Grid size={2}> <Grid>
<TextField <TextField
name="level" name="level"
label={LL.LOG_LEVEL()} label={LL.LOG_LEVEL()}
value={data.level} value={data.level}
fullWidth sx={{ width: '15ch' }}
variant="outlined" variant="outlined"
onChange={updateFormValue} onChange={updateFormValue}
margin="normal" margin="normal"
@@ -193,12 +194,12 @@ const SystemLog = () => {
</TextField> </TextField>
</Grid> </Grid>
{data.psram && ( {data.psram && (
<Grid size={2}> <Grid>
<TextField <TextField
name="max_messages" name="max_messages"
label={LL.BUFFER_SIZE()} label={LL.BUFFER_SIZE()}
value={data.max_messages} value={data.max_messages}
fullWidth sx={{ width: '15ch' }}
variant="outlined" variant="outlined"
onChange={updateFormValue} onChange={updateFormValue}
margin="normal" margin="normal"
@@ -222,6 +223,16 @@ const SystemLog = () => {
} }
label={LL.COMPACT()} label={LL.COMPACT()}
/> />
<BlockFormControlLabel
control={
<Checkbox
checked={autoscroll}
onChange={() => setAutoscroll(!autoscroll)}
name="autoscroll"
/>
}
label="Auto scroll"
/>
</Grid> </Grid>
<Button <Button
startIcon={<DownloadIcon />} startIcon={<DownloadIcon />}