Snapshots

react/src/SnapshotDialog.tsx

@@ -0,0 +1,131 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/*
+* MIT License
+* 
+* Copyright (c) 2024 Robin E. R. Davies
+* 
+* Permission is hereby granted, free of charge, to any person obtaining a copy of
+* this software and associated documentation files (the "Software"), to deal in
+* the Software without restriction, including without limitation the rights to
+* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+* of the Software, and to permit persons to whom the Software is furnished to do
+* so, subject to the following conditions:
+* 
+* The above copyright notice and this permission notice shall be included in all
+* copies or substantial portions of the Software.
+* 
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*/
+
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import DialogEx from './DialogEx';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import IconButton from '@mui/material/IconButton';
+import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
+import ResizeResponsiveComponent from './ResizeResponsiveComponent';
+import { TransitionProps } from '@mui/material/transitions';
+
+import Fade from '@mui/material/Fade';
+import SnapshotPanel from './SnapshotPanel';
+
+const styles = {
+    dialogPaper: {
+        minHeight: '80vh',
+        maxHeight: '80vh',
+    },
+};
+
+
+const Transition = React.forwardRef(function Transition(
+    props: TransitionProps & {
+        children: React.ReactElement<any, any>;
+    },
+    ref: React.Ref<unknown>,
+) {
+    return <Fade in={true} ref={ref} {...props} />;
+});
+
+
+
+export interface SnapshotDialogProps {
+    open: boolean,
+    onOk: () => void,
+};
+
+export interface SnapshotDialogState {
+    fullScreen: boolean,
+};
+
+export default class SnapshotDialog extends ResizeResponsiveComponent<SnapshotDialogProps, SnapshotDialogState> {
+    private model: PiPedalModel;
+
+    constructor(props: SnapshotDialogProps) {
+        super(props);
+        this.model = PiPedalModelFactory.getInstance();
+        this.state = {
+            fullScreen: this.getFullScreen(),
+        };
+    }
+
+    componentDidMount(): void {
+        super.componentDidMount();
+    }
+
+    componentWillUnmount(): void {
+        super.componentWillUnmount();
+
+    }
+
+    getFullScreen() {
+        return window.innerHeight < 450;
+    }
+    onWindowSizeChanged(width: number, height: number): void {
+        this.setState(
+            {
+                fullScreen: this.getFullScreen(),
+            }
+        );
+    }
+
+
+    render() {
+        return (
+            <DialogEx fullWidth={true} tag="shapshot" open={this.props.open} onClose={() => this.props.onOk()} fullScreen={this.state.fullScreen}
+                TransitionComponent={Transition} keepMounted
+                style={{ userSelect: "none", }}
+                PaperProps={{
+                    style: {
+                      maxWidth: '1000px'
+                      
+                    },
+                  }}
+            >
+                <DialogTitle>
+                    <div>
+                        <IconButton edge="start" color="inherit" onClick={() => { this.props.onOk(); }} aria-label="back"
+                        >
+                            <ArrowBackIcon fontSize="small" style={{ opacity: "0.6" }} />
+                        </IconButton>
+                        <Typography display="inline" variant="body1" color="textSecondary" >Snapshots</Typography>
+                    </div>
+
+                </DialogTitle>
+                <DialogContent style={{
+                    overflow: "hidden", margin: 0, height: "80vh",
+                    paddingLeft: 16, paddingRight: 16, paddingTop: 0, paddingBottom: 24,
+                }}>
+                    <SnapshotPanel panelHeight="80vh" />
+                </DialogContent>
+            </DialogEx>
+        );
+    }
+}