Skip to content
Snippets Groups Projects
Commit 7c996aa8 authored by borzechof99's avatar borzechof99 :whale2:
Browse files

Added Asides and more Formatting

parent 6d2c2584
No related branches found
No related tags found
No related merge requests found
...@@ -7,6 +7,10 @@ import { SportList, SportEdit, SportCreate } from './sportList'; ...@@ -7,6 +7,10 @@ import { SportList, SportEdit, SportCreate } from './sportList';
import { IncompleteList, IncompleteEdit } from './incompleteList'; import { IncompleteList, IncompleteEdit } from './incompleteList';
import { QuestionList, QuestionEdit, QuestionCreate } from './questionList'; import { QuestionList, QuestionEdit, QuestionCreate } from './questionList';
import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
import SportsFootballIcon from '@material-ui/icons/SportsFootball';
import PlaylistAddCheckIcon from '@material-ui/icons/PlaylistAddCheck';
const App = () => ( const App = () => (
<Admin <Admin
dataProvider={dataProviderMapper} // A custom mapper is used because different resources need different dataProviders dataProvider={dataProviderMapper} // A custom mapper is used because different resources need different dataProviders
...@@ -15,6 +19,7 @@ const App = () => ( ...@@ -15,6 +19,7 @@ const App = () => (
<Resource <Resource
name='sport' // name of the API endpoint name='sport' // name of the API endpoint
icon={SportsFootballIcon}
options={{ label: 'Sport Management' }} // if we do not rename the resource, the API name will be used options={{ label: 'Sport Management' }} // if we do not rename the resource, the API name will be used
list={SportList} list={SportList}
edit={SportEdit} edit={SportEdit}
...@@ -23,6 +28,7 @@ const App = () => ( ...@@ -23,6 +28,7 @@ const App = () => (
<Resource <Resource
name='sport-incomplete' name='sport-incomplete'
icon={PlaylistAddCheckIcon}
options={{ label: 'Incomplete Sports' }} options={{ label: 'Incomplete Sports' }}
list={IncompleteList} list={IncompleteList}
edit={IncompleteEdit} edit={IncompleteEdit}
...@@ -30,6 +36,7 @@ const App = () => ( ...@@ -30,6 +36,7 @@ const App = () => (
<Resource <Resource
name='question' name='question'
icon={QuestionAnswerIcon}
options={{ label: 'Question Management' }} options={{ label: 'Question Management' }}
list={QuestionList} list={QuestionList}
edit={QuestionEdit} edit={QuestionEdit}
......
...@@ -19,6 +19,41 @@ import { ...@@ -19,6 +19,41 @@ import {
import { criterionEditValidator } from './criterionEditValidator.js'; import { criterionEditValidator } from './criterionEditValidator.js';
import Typography from '@material-ui/core/Typography'
import Card from '@material-ui/core/Card'
import CardContent from '@material-ui/core/CardContent'
const AsideIncompleteList = () => (
<div style={{ width: 400, margin: '1em' }}>
<Card>
<CardContent>
<Typography variant="h4" align="center">Tipps&Tricks</Typography>
<br />
<ul>
<li>Klicke auf die ID von dem Sport, um den gesamten Sport zu bearbeiten.</li>
<br />
<li>Klicke auf eine Reihe, um diese aufzuklappen. Hier können die bisher noch nicht angegebenen Kriterienwertungen ausfüllt werden.</li>
<br />
<li><b>Die Zahl -1 bedeutet, dass das Kriterium nicht bewertet worden ist.</b></li>
<br />
<li>Wenn ein Sport vollständig bewertet ist, verschwindet er von dieser Liste.</li>
<br />
<li>Nach dem Bearbeiten: Speichern nicht vergessen!</li>
</ul>
</CardContent>
</Card>
</div>
);
// Eliminates the delete function while editing the incomplete list // Eliminates the delete function while editing the incomplete list
const IncompleteEditToolbar = props => ( const IncompleteEditToolbar = props => (
<Toolbar {...props} > <Toolbar {...props} >
...@@ -28,7 +63,7 @@ const IncompleteEditToolbar = props => ( ...@@ -28,7 +63,7 @@ const IncompleteEditToolbar = props => (
export const IncompleteList = props => ( export const IncompleteList = props => (
<List {...props}> <List {...props} aside={<AsideIncompleteList />}>
{/* rowClick expand means that no edit page is opened, but instead shown below the data row itself without reloading */} {/* rowClick expand means that no edit page is opened, but instead shown below the data row itself without reloading */}
<Datagrid rowClick="expand" expand={IncompleteEdit} > <Datagrid rowClick="expand" expand={IncompleteEdit} >
...@@ -63,9 +98,14 @@ export const IncompleteEdit = props => { ...@@ -63,9 +98,14 @@ export const IncompleteEdit = props => {
return ( return (
<Edit {...props} mutationMode="pessimistic" onSuccess={onSuccess}> <Edit {...props} mutationMode="pessimistic" onSuccess={onSuccess}>
<SimpleForm toolbar={<IncompleteEditToolbar />}> <SimpleForm toolbar={<IncompleteEditToolbar />}>
<Typography variant="h5" fullWidth>Fehlende Kriterien ausfüllen</Typography>
{/* Documentation for formatting https://marmelab.com/react-admin/CreateEdit.html#custom-row-container */}
<TextField source="id" /> <TextField source="id" />
<TextField source="name" /> <TextField source="name" />
<ArrayInput source="criteria">
<ArrayInput source="criteria" label="">
<SimpleFormIterator disableAdd disableRemove> <SimpleFormIterator disableAdd disableRemove>
{/* Documentation is wrong, look here! https://github.com/marmelab/react-admin/issues/2500 {/* Documentation is wrong, look here! https://github.com/marmelab/react-admin/issues/2500
...@@ -76,7 +116,7 @@ export const IncompleteEdit = props => { ...@@ -76,7 +116,7 @@ export const IncompleteEdit = props => {
getSource(); getSource();
return ( return (
<TextField <TextField
source={"name"} record={scopedFormData} source={"name"} record={scopedFormData} label="Kriterienname"
/> />
); );
}} }}
......
...@@ -9,13 +9,87 @@ import { ...@@ -9,13 +9,87 @@ import {
Create Create
} from 'react-admin'; } from 'react-admin';
import Typography from '@material-ui/core/Typography'
import Card from '@material-ui/core/Card'
import CardContent from '@material-ui/core/CardContent'
const AsideQuestionList = () => (
<div style={{ width: 400, margin: '1em' }}>
<Card>
<CardContent>
<Typography variant="h4" align="center">Tipps&Tricks</Typography>
<br />
<ul>
<li>Klicke auf eine Datenreihe, um sie zu bearbeiten.</li>
<br />
<li>Fragen müssen eine deutsche Übersetzung und können eine englische Übersetzung haben.</li>
<br />
<li>Kriterien sind einzigartig. Das heißt, dass ein Kriterium nicht doppelt vergeben werden kann!</li>
</ul>
</CardContent>
</Card>
</div>
);
const AsideQuestionEdit = () => (
<div style={{ width: 400, margin: '1em' }}>
<Card>
<CardContent>
<Typography variant="h4" align="center">Tipps&Tricks</Typography>
<br />
<ul>
<li>Pflichtangaben sind:
<ul>
<li>Deutscher Fragetext</li>
<li>Name des Kriteriums</li>
</ul>
</li>
<br />
<li>Wenn ein Kriterium umbenannt wird, wird es automatisch bei allen Sportarten aktualisiert.</li>
<br />
<li>Kriterien sind einzigartig. Das heißt, dass ein Kriterium nicht doppelt vergeben werden kann!</li>
</ul>
</CardContent>
</Card>
</div>
);
const AsideQuestionCreate = () => (
<div style={{ width: 400, margin: '1em' }}>
<Card>
<CardContent>
<Typography variant="h4" align="center">Tipps&Tricks</Typography>
<br />
<ul>
<li>Pflichtangaben sind:
<ul>
<li>Deutscher Fragetext</li>
<li>Name des Kriteriums</li>
</ul>
</li>
<br />
<li>Kriterien sind einzigartig. Das heißt, dass ein Kriterium nicht doppelt vergeben werden kann!
Hier muss also ein neuer Kriterienname angegeben werden.</li>
</ul>
</CardContent>
</Card>
</div>
);
export const QuestionList = props => ( export const QuestionList = props => (
<List {...props}> <List {...props} aside={<AsideQuestionList />}>
<Datagrid rowClick="edit"> <Datagrid rowClick="edit">
<TextField source="text_de" label="Deutsch" /> <TextField source="text_de" label="Deutscher Fragetext" />
<TextField source="text_en" label="Englisch" /> <TextField source="text_en" label="Englischer Fragetext" />
<TextField source="criterion" label="Name des Kriteriums" /> <TextField source="criterion" label="Name des Kriteriums" />
</Datagrid> </Datagrid>
</List> </List>
...@@ -24,21 +98,25 @@ export const QuestionList = props => ( ...@@ -24,21 +98,25 @@ export const QuestionList = props => (
// mutationMode pessimistic deactivates the optimistic rendering // mutationMode pessimistic deactivates the optimistic rendering
// Now the request will be sent first and rendered after getting the return code // Now the request will be sent first and rendered after getting the return code
export const QuestionEdit = props => ( export const QuestionEdit = props => (
<Edit {...props} mutationMode="pessimistic"> <Edit {...props} mutationMode="pessimistic" aside={<AsideQuestionEdit />}>
<SimpleForm> <SimpleForm>
<TextInput source="text_de" label="Frage auf Deutsch" fullWidth /> <Typography variant="h5" fullWidth >Frage bearbeiten</Typography>
<TextInput source="text_en" label="Frage auf Englisch" fullWidth /> <TextInput source="text_de" label="Deutscher Fragetext" fullWidth required />
<TextInput source="criterion" label="Name des Kriteriums" /> <TextInput source="text_en" label="Englischer Fragetext" fullWidth />
<TextInput source="criterion" label="Name des Kriteriums" required />
</SimpleForm> </SimpleForm>
</Edit> </Edit>
); );
export const QuestionCreate = props => ( export const QuestionCreate = props => (
<Create {...props} >
<Create {...props} aside={<AsideQuestionCreate />}>
<SimpleForm redirect="list"> <SimpleForm redirect="list">
<TextInput source="text_de" label="Frage auf Deutsch" fullWidth /> <Typography variant="h5" fullWidth >Frage erstellen</Typography>
<TextInput source="text_en" label="Frage auf Englisch" fullWidth />
<TextInput source="criterion" label="Name des Kriteriums" /> <TextInput source="text_de" label="Deutscher Fragetext" fullWidth required />
<TextInput source="text_en" label="Englischer Fragetext" fullWidth />
<TextInput source="criterion" label="Name des Kriteriums" required />
</SimpleForm> </SimpleForm>
</Create> </Create>
); );
\ No newline at end of file
...@@ -13,18 +13,89 @@ import { ...@@ -13,18 +13,89 @@ import {
SimpleFormIterator, SimpleFormIterator,
NumberInput, NumberInput,
Create, Create,
FormDataConsumer
} from 'react-admin'; } from 'react-admin';
import Typography from '@material-ui/core/Typography'
import Card from '@material-ui/core/Card'
import CardContent from '@material-ui/core/CardContent'
import { criterionEditValidator } from './criterionEditValidator.js'; import { criterionEditValidator } from './criterionEditValidator.js';
const AsideSportList = () => (
<div style={{ width: 400, margin: '1em' }}>
<Card>
<CardContent>
<Typography variant="h4" align="center">Tipps&Tricks</Typography>
<br />
<ul>
<li>Klicke auf eine Datenreihe, um den Eintrag zu bearbeiten.</li>
<br />
<li>Neue Sportarten können durch "Create" hinzugefügt werden.</li>
<br />
<li>Die Sportarten können inkl. ihrer Kriterienwertungen über "Export" als .csv-Datei heruntergeladen werden.</li> {/* Das Implementieren */}
</ul>
</CardContent>
</Card>
</div>
);
const AsideSportEdit = () => (
<div style={{ width: 400, margin: '1em' }}>
<Card>
<CardContent>
<Typography variant="h4" align="center">Tipps&Tricks</Typography>
<br />
<ul>
<li>Der Slider "Wird aktuell angeboten" entscheidet, ob der Sport beim Quiz als Ergebnis auftreten kann.</li>
<br />
<li>Wenn "Wird aktuell angeboten" deaktiviert wird,
rutscht der Sport in das Archiv und wird im Sport Management oder der Incomplete List nicht mehr angezeigt.</li>
<br />
<li>Das Feld "Zuletzt genutzt" sagt aus, wann der Sport zu der aktiven Auswahl hinzugefügt worden ist.
Das passiert entweder durch manuelles Aktivieren oder durch das Scrapen von neuen Informationen von <a href="https://www.buchsys.de/fu-berlin/angebote/aktueller_zeitraum/index.html">buchsys.de</a>.</li>
<br />
<li>
<p>Für jedes Kriterium kann ein ganzzahliger Wert zwischen 1 und 9 eingesetzt werden.
Das ist die Gewichtung des Sports in dem jeweiligen Kriterium.
</p>
<p>
Es kann auch eine -1 für das Kriterium eingetragen werden.
<b> Das bedeutet, dass das Kriterium als nicht ausgefüllt gilt und in der Incomplete Sport List erscheinen wird.</b>
</p>
</li>
</ul>
</CardContent>
</Card >
</div >
);
const AsideSportCreate = () => (
<div style={{ width: 400, margin: '1em' }}>
<Card>
<CardContent>
<Typography variant="h4" align="center">Tipps&Tricks</Typography>
<br />
<ul>
<li>Die Kriterien können ausgefüllt werden, nachdem der Sport erstellt wurde.
Du wirst automatisch auf die richtige Seite weitergeleitet.</li>
</ul>
</CardContent>
</Card>
</div>
);
export const SportList = props => ( export const SportList = props => (
<List {...props}> <List {...props} aside={<AsideSportList />}>
<Datagrid rowClick="edit"> <Datagrid rowClick="edit">
<TextField source="id" /> <TextField source="id" />
<TextField source="name" /> <TextField source="name" />
<UrlField source="url" /> <UrlField source="url" />
<BooleanField source="is_filled" /> <BooleanField source="is_filled" label="Kriterien ausgefüllt?" />
</Datagrid> </Datagrid>
</List > </List >
); );
...@@ -32,16 +103,37 @@ export const SportList = props => ( ...@@ -32,16 +103,37 @@ export const SportList = props => (
export const SportEdit = props => ( export const SportEdit = props => (
<Edit {...props}> <Edit {...props} aside={<AsideSportEdit />}>
<SimpleForm> <SimpleForm>
<TextInput disabled source="id" />
<TextInput source="name" fullWidth /> <Typography variant="h4" fullWidth>Sport bearbeiten</Typography>
<TextInput source="url" fullWidth />
<BooleanInput source="currently_active" /> <TextInput disabled source="id" label="ID" />
<DateInput disabled source="last_used" /> <TextInput source="name" fullWidth required />
<ArrayInput source="criteria"> <TextInput source="url" label="URL" fullWidth required />
<BooleanInput source="currently_active" label="Wird aktuell angeboten" />
<DateInput disabled source="last_used" label="Zuletzt genutzt" />
<Typography variant="h5" align="left">Kriterien</Typography>
<ArrayInput source="criteria" label="">
<SimpleFormIterator disableAdd disableRemove> {/* Used because you cannot know how many objects will be sent */} <SimpleFormIterator disableAdd disableRemove> {/* Used because you cannot know how many objects will be sent */}
<TextInput disabled source="name" label="Kriterienname" />
{/* Documentation is wrong, look here! https://github.com/marmelab/react-admin/issues/2500
getSource() needs to get called without arguments before the return,
instead of as the source parameter of the TextField with "name" as argument */}
<FormDataConsumer>
{({ getSource, scopedFormData }) => {
getSource();
return (
<TextField
source={"name"} record={scopedFormData} label="Kriterienname"
/>
);
}}
</FormDataConsumer>
{/* criterionEditValidator checks input if it is within 1-9 or -1 and sets it accordingly */} {/* criterionEditValidator checks input if it is within 1-9 or -1 and sets it accordingly */}
<NumberInput <NumberInput
source="value" source="value"
...@@ -56,10 +148,11 @@ export const SportEdit = props => ( ...@@ -56,10 +148,11 @@ export const SportEdit = props => (
// sportCreate cannot know at this point how many and which criteria are used, so they are editable after creating the sport // sportCreate cannot know at this point how many and which criteria are used, so they are editable after creating the sport
export const SportCreate = props => ( export const SportCreate = props => (
<Create {...props}> <Create {...props} aside={<AsideSportCreate />}>
<SimpleForm> <SimpleForm>
<TextInput source="name" fullWidth /> <Typography variant="h4" align="left">Sport erstellen</Typography>
<TextInput source="url" fullWidth /> <TextInput source="name" fullWidth required />
<TextInput source="url" fullWidth required />
</SimpleForm> </SimpleForm>
</Create> </Create>
); );
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment