Skip to content

[DRAFT] Update Admin Dashboard Pokemon Filters Creation/Modification #302

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
versx wants to merge 1 commit into
base: v5-rewrite
Choose a base branch
from
Open

[DRAFT] Update Admin Dashboard Pokemon Filters Creation/Modification #302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
179 changes: 179 additions & 0 deletions src/ClientApp/src/components/Modals/AddPvpFilterModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
import React, { useState } from 'react';
import {
Box,
Button,
Grid,
FormControl,
InputLabel,
MenuItem,
Modal,
Select,
TextField,
Typography,
} from '@mui/material';

interface AddPvpFilterProps {
embeds: string[];
filters: string[];
geofences: string[];
open: boolean;
toggle: React.MouseEventHandler<HTMLButtonElement> | undefined;
onSubmit: any; //React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> | undefined;
}

export function AddPvpFilterModal(props: AddPvpFilterProps) {
const style = {
position: 'absolute' as 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
};

const [state, setState] = useState({
name: '',
description: '',
filters: '',
embeds: '',
geofences: [],
webhook: '',
});

const onInputChange = (e: any) => {
setState({ ...state, [e.target.name]: e.target.value });
};

return (
<div>
<Modal
open={props.open}
onClose={props.toggle}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<Typography id="modal-modal-title" variant="h6" component="h2">
Add PVP League Filter
</Typography>
<Typography id="modal-modal-description" sx={{ mt: 2 }}></Typography>
<Grid container spacing={2} style={{paddingTop: '20px', paddingBottom: '10px'}}>
<Grid item xs={12} sm={12}>
<TextField
id="name"
name="name"
variant="outlined"
label="Name"
value={state.name}
fullWidth
onChange={onInputChange}
/>
</Grid>
<Grid item xs={12} sm={12}>
<TextField
id="description"
name="description"
variant="outlined"
label="Description"
value={state.description}
fullWidth
onChange={onInputChange}
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormControl fullWidth>
<InputLabel id="filters-label">Filters</InputLabel>
<Select
labelId="filters-label"
id="filters"
name="filters"
label="Filters"
value={state.filters}
onChange={onInputChange}
>
{props.filters && props.filters.map((filter: string) => {
return (
<MenuItem key={filter} value={filter}>{filter}</MenuItem>
);
})}
</Select>
</FormControl>
</Grid>
<Grid item xs={12} sm={6}>
<FormControl fullWidth>
<InputLabel id="embeds-label">Embeds</InputLabel>
<Select
labelId="embeds-label"
id="embeds"
name="embeds"
value={state.embeds}
label="Embeds"
onChange={onInputChange}
>
{props.embeds && props.embeds.map((embed: string) => {
return (
<MenuItem key={embed} value={embed}>{embed}</MenuItem>
);
})}
</Select>
</FormControl>
</Grid>
<Grid item xs={12} sm={12}>
<FormControl fullWidth>
<InputLabel id="geofences-label">Geofences</InputLabel>
<Select
labelId="geofences-label"
id="geofences"
name="geofences"
value={state.geofences}
multiple
label="Geofences"
onChange={onInputChange}
>
{props.geofences && props.geofences.map((geofence: string) => {
return (
<MenuItem key={geofence} value={geofence}>{geofence}</MenuItem>
);
})}
</Select>
</FormControl>
</Grid>
<Grid item xs={12} sm={12}>
<TextField
id="webhook"
name="webhook"
variant="outlined"
label="Discord Webhook"
value={state.webhook}
fullWidth
onChange={onInputChange}
/>
</Grid>
<Grid item xs={12} sm={12}>
<Button
variant="contained"
color="primary"
onClick={(e) => {
props.onSubmit(state);
props.toggle!(e);
}}
>
Create
</Button>
<Button
variant="outlined"
color="primary"
onClick={props.toggle}
>
Cancel
</Button>
</Grid>
</Grid>
</Box>
</Modal>
</div>
);
}
141 changes: 141 additions & 0 deletions src/ClientApp/src/components/PvpFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import React, { useState } from 'react';
import {
FormControl,
Grid,
InputLabel,
MenuItem,
Select,
TextField,
} from '@mui/material';

export interface PvpFilterProps {
league: string;
min_rank: number;
max_rank: number;
min_cp: number;
max_cp: number;
min_percent: number;
max_percent: number;
gender: string;

allLeagues: string[];
}

export function PvpFilter(props: PvpFilterProps) {
console.log('pvp filter props:', props);
const [state, setState] = useState({
league: props.league ?? '',
min_rank: props.min_rank ?? '',
max_rank: props.max_rank ?? '',
min_cp: props.min_cp ?? '',
max_cp: props.max_cp ?? '',
min_percent: props.min_percent ?? '',
max_percent: props.max_percent ?? '',
gender: props.gender ?? '',
});

const onInputChange = (e: any) => {
setState({ ...state, [e.target.name]: e.target.value });
};

return (
<div>
<Grid container spacing={2} style={{paddingTop: '20px', paddingBottom: '10px'}}>
<Grid item xs={12} sm={12}>
<FormControl fullWidth>
<InputLabel id="leagues-label">Pvp League</InputLabel>
<Select
labelId="leagues-label"
id="league"
name="league"
value={state.league}
label="Leagues"
required
onChange={onInputChange}
>
{props.allLeagues && Object.keys(props.allLeagues).map((index: any) => {
const league = props.allLeagues[index].toString().toLowerCase();
console.log('league:', league);
return (
<MenuItem key={league} value={league}>{league}</MenuItem>
);
})}
</Select>
</FormControl>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
id="min_rank"
name="min_rank"
variant="outlined"
label="Minimum Rank"
type="number"
value={state.min_rank}
fullWidth
onChange={onInputChange}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
id="max_rank"
name="max_rank"
variant="outlined"
label="Maximum Rank"
type="number"
value={state.max_rank}
fullWidth
onChange={onInputChange}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
id="min_cp"
name="min_cp"
variant="outlined"
label="Minimum League CP"
type="number"
value={state.min_cp}
fullWidth
onChange={onInputChange}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
id="max_cp"
name="max_cp"
variant="outlined"
label="Maximum League CP"
type="number"
value={state.max_cp}
fullWidth
onChange={onInputChange}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
id="min_percent"
name="min_percent"
variant="outlined"
label="Minimum Percent"
type="number"
value={state.min_percent}
fullWidth
onChange={onInputChange}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
id="max_percent"
name="max_percent"
variant="outlined"
label="Maximum Percent"
type="number"
value={state.max_percent}
fullWidth
onChange={onInputChange}
/>
</Grid>
</Grid>
</div>
);
};
10 changes: 10 additions & 0 deletions src/ClientApp/src/pages/Alarms/EditAlarm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ class EditAlarm extends React.Component<IGlobalProps> {
enableRaids: false,
enableQuests: false,
enablePokestops: false,
enableInvasions: false,
enableGyms: false,
enableWeather: false,
alarms: [],
Expand Down Expand Up @@ -114,6 +115,7 @@ class EditAlarm extends React.Component<IGlobalProps> {
enableRaids: this.state.enableRaids,
enableQuests: this.state.enableQuests,
enablePokestops: this.state.enablePokestops,
enableInvasions: this.state.enableInvasions,
enableGyms: this.state.enableGyms,
enableWeather: this.state.enableWeather,
alarms: this.state.alarms,
Expand Down Expand Up @@ -266,6 +268,14 @@ class EditAlarm extends React.Component<IGlobalProps> {
label="Enable Pokestops"
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormControlLabel
id="enableInvasions"
name="enableInvasions"
control={<Switch checked={this.state.enableInvasions} onChange={handleCheckbox} />}
label="Enable Invasions"
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormControlLabel
id="enableGyms"
Expand Down
6 changes: 6 additions & 0 deletions src/ClientApp/src/pages/Alarms/ListAlarms.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,12 @@ function ListAlarms() {
flex: 1,
renderCell: (params) => params.row.enable_pokestops ? 'Yes' : 'No',
},
{
field: 'enable_invasions',
headerName: 'Enable Invasions',
flex: 1,
renderCell: (params) => params.row.enable_invasions ? 'Yes' : 'No',
},
{
field: 'enable_weather',
headerName: 'Enable Weather',
Expand Down
10 changes: 10 additions & 0 deletions src/ClientApp/src/pages/Alarms/NewAlarm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ class NewAlarm extends React.Component<IGlobalProps> {
enableRaids: false,
enableQuests: false,
enablePokestops: false,
enableInvasions: false,
enableGyms: false,
enableWeather: false,
alarms: [],
Expand Down Expand Up @@ -99,6 +100,7 @@ class NewAlarm extends React.Component<IGlobalProps> {
enableRaids: this.state.enableRaids,
enableQuests: this.state.enableQuests,
enablePokestops: this.state.enablePokestops,
enableInvasions: this.state.enableInvasions,
enableGyms: this.state.enableGyms,
enableWeather: this.state.enableWeather,
alarms: this.state.alarms,
Expand Down Expand Up @@ -251,6 +253,14 @@ class NewAlarm extends React.Component<IGlobalProps> {
label="Enable Pokestops"
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormControlLabel
id="enableInvasions"
name="enableInvasions"
control={<Switch checked={this.state.enableInvasions} onChange={handleCheckbox} />}
label="Enable Invasions"
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormControlLabel
id="enableGyms"
Expand Down
Loading