-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
231 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,170 @@ | ||
| import { | ||
| Box, | ||
| Button, | ||
| Checkbox, | ||
| FormControl, | ||
| FormControlLabel, | ||
| Grid, | ||
| Paper, | ||
| Tooltip, | ||
| Typography, | ||
| } from "@mui/material"; | ||
| import { useConfirm } from "material-ui-confirm"; | ||
| import { HelpCircleOutline } from "mdi-material-ui"; | ||
| import { useSnackbar } from "notistack"; | ||
| import { ChangeEvent, useState } from "react"; | ||
| import { LoadingSkeleton } from "../components/LoadingSkeleton"; | ||
| import { useFetch } from "../hooks/useFetch"; | ||
| import { | ||
| adjustableSettings, | ||
| converSettingsJSON, | ||
| Settings, | ||
| } from "../types/settings"; | ||
| import { patchApi } from "../util/fetch"; | ||
|
|
||
| const defaultSettings: Settings = { | ||
| id: -1, | ||
| createdAt: new Date(), | ||
| scanInOut: false, | ||
| leaderboard: false, | ||
| public: false, | ||
| }; | ||
|
|
||
| const saveSuccess = "Settings saved successfully"; | ||
| const saveFailure = "Unable to save settings"; | ||
| const handleDeleteContent = ( | ||
| <Box> | ||
| <Typography gutterBottom> | ||
| Are you sure you want to delete all your data? | ||
| </Typography> | ||
| <Typography variant="h5" color="error" mb={5}> | ||
| This is irreversible! | ||
| </Typography> | ||
| </Box> | ||
| ); | ||
|
|
||
| export const SettingsOverview = () => { | ||
| const [settings, setSettings] = useState<Settings>(defaultSettings); | ||
| const { loading } = useFetch<Settings>( | ||
| "settings", | ||
| setSettings, | ||
| converSettingsJSON | ||
| ); | ||
| const { enqueueSnackbar } = useSnackbar(); | ||
| const confirm = useConfirm(); | ||
|
|
||
| const handleChange = (event: ChangeEvent<HTMLInputElement>) => { | ||
| setSettings({ | ||
| ...settings, | ||
| [event.target.name]: event.target.checked, | ||
| }); | ||
| }; | ||
|
|
||
| const handleSubmit = () => { | ||
| patchApi("settings", { | ||
| scanInOut: settings.scanInOut, | ||
| leaderboard: settings.leaderboard, | ||
| public: settings.public, | ||
| }) | ||
| .then(() => enqueueSnackbar(saveSuccess, { variant: "success" })) | ||
| .catch((error) => enqueueSnackbar(error, { variant: "error" })); | ||
| }; | ||
|
|
||
| const handleDelete = () => { | ||
| confirm({ | ||
| title: "Delete data", | ||
| content: handleDeleteContent, | ||
| acknowledgement: "Delete all my data", | ||
| confirmationText: "Delete", | ||
| confirmationButtonProps: { color: "error" }, | ||
| }) | ||
| .then(() => | ||
| enqueueSnackbar("This is not possible yet", { | ||
| variant: "error", | ||
| }) | ||
| ) | ||
| .catch(() => {}); | ||
| }; | ||
|
|
||
| return ( | ||
| <LoadingSkeleton loading={loading}> | ||
| <Grid | ||
| container | ||
| alignItems="stretch" | ||
| justifyContent="space-between" | ||
| columnSpacing={4} | ||
| rowSpacing={1} | ||
| > | ||
| <Grid item xs={6}> | ||
| <Paper elevation={4} sx={{ p: "10px" }}> | ||
| <FormControl> | ||
| {adjustableSettings.map((setting) => ( | ||
| <FormControlLabel | ||
| value="end" | ||
| control={ | ||
| <Checkbox | ||
| checked={ | ||
| settings[setting.id] as boolean | ||
| } | ||
| onChange={handleChange} | ||
| name={setting.id} | ||
| /> | ||
| } | ||
| label={ | ||
| <Box display="flex"> | ||
| <Typography> | ||
| {setting.name} | ||
| </Typography> | ||
| <Tooltip | ||
| title={setting.description} | ||
| placement="right" | ||
| > | ||
| <HelpCircleOutline | ||
| sx={{ | ||
| fontSize: "15px", | ||
| ml: ".3rem", | ||
| }} | ||
| /> | ||
| </Tooltip> | ||
| </Box> | ||
| } | ||
| key={setting.id} | ||
| /> | ||
| ))} | ||
| </FormControl> | ||
| </Paper> | ||
| </Grid> | ||
| <Grid item xs={6}> | ||
| <Paper elevation={4} sx={{ p: "10px", height: "100%" }}> | ||
| <Box | ||
| display="flex" | ||
| alignItems="center" | ||
| justifyContent="center" | ||
| height="100%" | ||
| width="100%" | ||
| > | ||
| <Typography variant="body2"> | ||
| More settings coming soon! | ||
| </Typography> | ||
| </Box> | ||
| </Paper> | ||
| </Grid> | ||
| <Grid item xs={12} sx={{ mt: "1rem" }}> | ||
| <Button variant="outlined" fullWidth onClick={handleSubmit}> | ||
| Save | ||
| </Button> | ||
| </Grid> | ||
| <Grid item xs={12}> | ||
| <Button | ||
| variant="outlined" | ||
| fullWidth | ||
| color="error" | ||
| onClick={handleDelete} | ||
| > | ||
| Delete data | ||
| </Button> | ||
| </Grid> | ||
| </Grid> | ||
| </LoadingSkeleton> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { Base, BaseJSON } from "./general"; | ||
|
|
||
| interface SettingsJSON extends BaseJSON { | ||
| scanInOut: boolean; | ||
| leaderboard: boolean; | ||
| public: boolean; | ||
| } | ||
|
|
||
| export interface Settings extends Base { | ||
| scanInOut: boolean; | ||
| leaderboard: boolean; | ||
| public: boolean; | ||
| } | ||
|
|
||
| export const converSettingsJSON = (settingsJSON: SettingsJSON): Settings => ({ | ||
| id: settingsJSON.id, | ||
| createdAt: new Date(settingsJSON.createdAt), | ||
| scanInOut: settingsJSON.scanInOut, | ||
| leaderboard: settingsJSON.leaderboard, | ||
| public: settingsJSON.public, | ||
| }); | ||
|
|
||
| interface AdjustableSettings { | ||
| id: keyof Settings; | ||
| name: string; | ||
| description: string; | ||
| } | ||
|
|
||
| export const adjustableSettings: AdjustableSettings[] = [ | ||
| { | ||
| id: "scanInOut", | ||
| name: "Scan in and out", | ||
| description: | ||
| "A second scan on the same day will be interpreted as a scan out", | ||
| }, | ||
| { | ||
| id: "leaderboard", | ||
| name: "Leaderboard", | ||
| description: "Show yourself on the leaderboard", | ||
| }, | ||
| { | ||
| id: "public", | ||
| name: "Public", | ||
| description: "Let others see you!", | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters