u

src/components/PwaUpdateDialog.jsx

@@ -0,0 +1,114 @@
+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>
+    );
+  }
+}