heinrich/klatab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code aufgeräumt

Browse Source
This commit is contained in:
Heinrich Thaler
2024-09-19 16:29:47 +02:00
parent b7a7dbec61
commit cf151f428a
1 changed files with 31 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
common/FilterModal.tsx
View File

@@ -1,19 +1,19 @@
import React, { useState, useEffect } from 'react'; import React, { useState } from 'react';
import { Modal, View, StyleSheet, Text } from 'react-native'; import { Modal, View, StyleSheet, Text } from 'react-native';
import { useColors } from '../common/colors';
import { ThemeButton, ThemeText } from '../common/ThemeTypes';
import RNPickerSelect from 'react-native-picker-select'; import RNPickerSelect from 'react-native-picker-select';
import { FontAwesome } from '@expo/vector-icons'; import { FontAwesome } from '@expo/vector-icons';
import { useColors } from '../common/colors';
import { ThemeButton, ThemeText } from '../common/ThemeTypes';
import { getDefaultFilter } from '../utils/getDefaultFilter'; import { getDefaultFilter } from '../utils/getDefaultFilter';
const categories = { class: 'Klasse', room: 'Raum', teacher: 'Lehrer' }; const categories = { class: 'Klasse', room: 'Raum', teacher: 'Lehrer' };
type FilterModalTypes = { type FilterModalTypes = {
filter?: any, filter?: any;
setFilter?: (date: any) => void, setFilter?: (date: any) => void;
userInformation: any, userInformation: any;
baseData: any, baseData: any;
} };
const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterModalTypes) => { const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterModalTypes) => {
const colors = useColors(); const colors = useColors();
@@ -21,13 +21,6 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
const [showFilterModal, setShowFilterModal] = useState(false); const [showFilterModal, setShowFilterModal] = useState(false);
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
paddingRight: 10,
gap: 10,
},
modalContainer: { modalContainer: {
flex: 1, flex: 1,
justifyContent: 'center', justifyContent: 'center',
@@ -39,21 +32,14 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
backgroundColor: colors.backSecondary, backgroundColor: colors.backSecondary,
borderRadius: 20, borderRadius: 20,
width: '80%', width: '80%',
padding: 20,
borderWidth: 5,
borderColor: colors.backSecondary,
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { shadowOffset: { width: 0, height: 2 },
width: 0,
height: 2,
},
shadowOpacity: 0.25, shadowOpacity: 0.25,
shadowRadius: 4, shadowRadius: 4,
elevation: 5, elevation: 5,
borderWidth: 5,
borderColor: colors.backSecondary,
padding: 20,
},
modalTitle: {
fontWeight: 'bold',
fontSize: 20,
}, },
modalSubtitle: { modalSubtitle: {
fontSize: 16, fontSize: 16,
@@ -94,7 +80,7 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
onValueChange={(itemValue) => { onValueChange={(itemValue) => {
setTempFilter(prevState => ({ ...prevState, type: itemValue, value: null })); setTempFilter(prevState => ({ ...prevState, type: itemValue, value: null }));
}} }}
items={Object.keys(baseData).map((item) => ({ items={Object.keys(baseData).map(item => ({
label: categories[item], label: categories[item],
value: item, value: item,
}))} }))}
@@ -113,7 +99,7 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
onValueChange={(itemValue) => { onValueChange={(itemValue) => {
setTempFilter(prevState => ({ ...prevState, value: itemValue })); setTempFilter(prevState => ({ ...prevState, value: itemValue }));
}} }}
items={baseData[tempFilter.type].map((item) => ({ items={baseData[tempFilter.type].map(item => ({
label: item.name, label: item.name,
value: item.id, value: item.id,
}))} }))}
@@ -121,6 +107,7 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
/> />
</View> </View>
)} )}
<View> <View>
<ThemeText style={styles.modalSubtitle}>Gruppe</ThemeText> <ThemeText style={styles.modalSubtitle}>Gruppe</ThemeText>
<RNPickerSelect <RNPickerSelect
@@ -139,11 +126,21 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
]} ]}
placeholder={{}} placeholder={{}}
/> />
</View> </View>
<View style={styles.modalButtons}> <View style={styles.modalButtons}>
<ThemeButton onPress={() => { setTempFilter(getDefaultFilter(userInformation)); }}><Text>Zurücksetzen</Text></ThemeButton> <ThemeButton onPress={() => setTempFilter(getDefaultFilter(userInformation))}>
<ThemeButton onPress={() => { setFilter(tempFilter); setShowFilterModal(false) }} disabled={!Boolean(tempFilter.value) || (tempFilter.type == 'class' && !Boolean(tempFilter.value))}><Text>Anwenden</Text></ThemeButton> <Text>Zurücksetzen</Text>
</ThemeButton>
<ThemeButton
onPress={() => {
setFilter(tempFilter);
setShowFilterModal(false);
}}
disabled={!Boolean(tempFilter.value) || (tempFilter.type === 'class' && !Boolean(tempFilter.value))}
>
<Text>Anwenden</Text>
</ThemeButton>
</View> </View>
</View> </View>
</View> </View>
@@ -152,7 +149,9 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
return ( return (
<> <>
<ThemeButton onPress={() => { setTempFilter(filter); setShowFilterModal(true) }} ><FontAwesome name="filter" size={24} /></ThemeButton> <ThemeButton onPress={() => { setTempFilter(filter); setShowFilterModal(true); }}>
<FontAwesome name="filter" size={24} />
</ThemeButton>
{renderFilterModal()} {renderFilterModal()}
</> </>
); );