Add install calendar dialog

geneit_app/src/dialogs/accommodations/InstallCalendarDialog.tsx

@@ -0,0 +1,76 @@
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  Button,
+  Typography,
+  FormControl,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  OutlinedInput,
+} from "@mui/material";
+import {
+  AccommodationCalendarURL,
+  AccommodationsCalendarURLApi,
+} from "../../api/accommodations/AccommodationsCalendarURLApi";
+import { VisibilityOff, Visibility } from "@mui/icons-material";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { CopyToClipboard } from "../../widgets/CopyToClipboard";
+import QRCode from "react-qr-code";
+
+export function InstallCalendarDialog(p: {
+  cal?: AccommodationCalendarURL;
+  onClose: () => void;
+}): React.ReactElement {
+  if (!p.cal) return <></>;
+
+  return (
+    <Dialog open={true} onClose={p.onClose}>
+      <DialogTitle>Installation du calendrier</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          <Typography>
+            Afin d'installer le calendrier <i>{p.cal.name}</i> sur votre
+            appareil, veuillez utiliser l'URL suivante :
+          </Typography>
+          <br />
+          <FormControl fullWidth variant="outlined">
+            <InputLabel>URL</InputLabel>
+            <OutlinedInput
+              value={AccommodationsCalendarURLApi.CalendarURL(p.cal!)}
+              endAdornment={
+                <InputAdornment position="end">
+                  <CopyToClipboard
+                    content={AccommodationsCalendarURLApi.CalendarURL(p.cal!)}
+                  >
+                    <IconButton>
+                      <ContentCopyIcon />
+                    </IconButton>
+                  </CopyToClipboard>
+                </InputAdornment>
+              }
+              label="Password"
+            />
+            <div
+              style={{
+                margin: "20px auto",
+                padding: "20px",
+                backgroundColor: "white",
+              }}
+            >
+              <QRCode
+                value={AccommodationsCalendarURLApi.CalendarURL(p.cal!)}
+              />
+            </div>
+          </FormControl>
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={p.onClose}>Fermer</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}