115 lines
3.5 KiB
JavaScript
115 lines
3.5 KiB
JavaScript
import { PureComponent } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import DialogTitle from '@mui/material/DialogTitle';
|
|
import DialogContent from '@mui/material/DialogContent';
|
|
import DialogContentText from '@mui/material/DialogContentText';
|
|
import DialogActions from '@mui/material/DialogActions';
|
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
import SystemUpdateAltIcon from '@mui/icons-material/SystemUpdateAlt';
|
|
import AppDialog from './AppDialog';
|
|
import pwaAutomat from '../automats/pwaAutomat';
|
|
|
|
/**
|
|
* PWA Update prompt dialog.
|
|
* Appears when a new service worker update has been downloaded in the background.
|
|
* Allows the user to reload the page to apply the update immediately,
|
|
* or postpone it ("Später") without losing ongoing form input.
|
|
*/
|
|
export default class PwaUpdateDialog extends PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
dialogOpen: pwaAutomat.state.dialogOpen,
|
|
updating: pwaAutomat.state.updating,
|
|
};
|
|
this.handleUpdate = this.handleUpdate.bind(this);
|
|
this.handleClose = this.handleClose.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.unsub = pwaAutomat.subscribe(this, ['dialogOpen', 'updating']);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.unsub?.();
|
|
}
|
|
|
|
handleClose() {
|
|
if (this.state.updating) return;
|
|
pwaAutomat.actions.closeDialog();
|
|
}
|
|
|
|
handleUpdate() {
|
|
pwaAutomat.actions.applyUpdate();
|
|
}
|
|
|
|
render() {
|
|
const { dialogOpen, updating } = this.state;
|
|
|
|
return (
|
|
<AppDialog
|
|
open={dialogOpen}
|
|
onClose={this.handleClose}
|
|
maxWidth="xs"
|
|
fullWidth
|
|
aria-labelledby="pwa-update-dialog-title"
|
|
>
|
|
<DialogTitle
|
|
id="pwa-update-dialog-title"
|
|
sx={{ display: 'flex', alignItems: 'center', gap: 1.5, pb: 1 }}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: 38,
|
|
height: 38,
|
|
borderRadius: '50%',
|
|
bgcolor: 'primary.main',
|
|
color: 'primary.contrastText',
|
|
}}
|
|
>
|
|
<SystemUpdateAltIcon fontSize="small" />
|
|
</Box>
|
|
Aktualisierung verfügbar
|
|
</DialogTitle>
|
|
|
|
<DialogContent>
|
|
<DialogContentText sx={{ color: 'text.primary', mb: 1, fontWeight: 500 }}>
|
|
Eine neue Version von <strong>Dashfront</strong> ist bereit.
|
|
</DialogContentText>
|
|
<DialogContentText variant="body2" color="text.secondary">
|
|
Möchten Sie die Anwendung jetzt neu laden, um die Änderungen zu übernehmen?
|
|
Stellen Sie sicher, dass wichtige Eingaben gespeichert sind.
|
|
</DialogContentText>
|
|
</DialogContent>
|
|
|
|
<DialogActions sx={{ px: 3, pb: 2.5, pt: 1, gap: 1 }}>
|
|
<Button
|
|
onClick={this.handleClose}
|
|
color="inherit"
|
|
disabled={updating}
|
|
sx={{ textTransform: 'none' }}
|
|
>
|
|
Später
|
|
</Button>
|
|
<Button
|
|
onClick={this.handleUpdate}
|
|
variant="contained"
|
|
disabled={updating}
|
|
startIcon={
|
|
updating ? <CircularProgress size={16} color="inherit" /> : null
|
|
}
|
|
autoFocus
|
|
sx={{ textTransform: 'none', px: 2 }}
|
|
>
|
|
{updating ? 'Aktualisiere…' : 'Jetzt neu laden'}
|
|
</Button>
|
|
</DialogActions>
|
|
</AppDialog>
|
|
);
|
|
}
|
|
}
|