SSLOps, LunchEvent pg to match design team+style

This commit is contained in:
Emily Liu 2020-10-21 15:35:35 -04:00
parent 6f75ac5260
commit 10462ff55b
7 changed files with 143 additions and 24 deletions

View File

@ -10,7 +10,8 @@ import {
FlatList, FlatList,
TouchableOpacity, TouchableOpacity,
Image, Image,
TouchableHighlight TouchableHighlight,
Linking
} from 'react-native'; } from 'react-native';
import { import {
@ -25,6 +26,7 @@ import { createStackNavigator } from '@react-navigation/stack'
import { SearchBar } from 'react-native-elements'; import { SearchBar } from 'react-native-elements';
import styles from './styles/liststyles' import styles from './styles/liststyles'
import { url } from './resources/fetchInfo.json' import { url } from './resources/fetchInfo.json'
import LinearGradient from 'react-native-linear-gradient';
const Stack = createStackNavigator(); const Stack = createStackNavigator();
@ -32,7 +34,18 @@ export const ClubInfo = ({route}) => {
const item = route.params; const item = route.params;
return ( return (
<View style = {{padding: 10}}> <View style = {{padding: 10}}>
<Text style = {{fontSize: 28}}>Meeting Time and Day: {'\n'}{item.meeting}{"\n\n"}Zoom Link: {'\n'}{item.link}{"\n\n"}Sponsor: {'\n'}{item.sponsor}</Text> <View style ={styles.infoContainer}>
<Text style = {styles.title1}>Meeting Time and Day: </Text>
<Text style = {styles.title}>{item.meeting}</Text>
</View>
<View style ={styles.infoContainer}>
<Text style = {styles.title1}>Zoom Link: </Text>
<Text style = {styles.link} onPress={() => Linking.openURL(item.link)}>{item.link}</Text>
</View>
<View style ={styles.infoContainer}>
<Text style = {styles.title1}>Sponsor: </Text>
<Text style = {styles.title}>{item.sponsor}</Text>
</View>
</View> </View>
) )
} }

View File

@ -8,6 +8,7 @@ import {
StatusBar, StatusBar,
FlatList, FlatList,
TouchableOpacity, TouchableOpacity,
Image,
} from 'react-native'; } from 'react-native';
import { import {
@ -17,22 +18,62 @@ import {
DebugInstructions, DebugInstructions,
ReloadInstructions, ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen'; } from 'react-native/Libraries/NewAppScreen';
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import styles from './styles/liststyles' import styles from './styles/liststyles'
import { url } from './resources/fetchInfo.json' import { url } from './resources/fetchInfo.json'
const Stack = createStackNavigator();
const LunchEvent = ({item}) => { const LunchEvent = (props) => {
const [visible, setVisible] = useState(0) const item = props.item
const extra = visible?(<Text>{'\n'}{item.item.text}{'\n\n'}Location: {item.item.loc}</Text>):(<></>);
return( return(
<View> <View>
<TouchableOpacity style={styles.item} onPress={()=>setVisible(!visible)} activeOpacity={0.8}> <TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('LunchInfo', {data:props.data,name:props.name,text:item.text,loc:item.loc})} activeOpacity={0.8}>
<Text style={styles.title}>{item.item.title}</Text> <View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
{extra} <Image source = {require('./assets/lunch.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
<Text style={styles.title}>{item.title}</Text>
</View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
) )
} }
export const LunchInfo = ({route}) => {
const item = route.params;
return (
<View style = {{padding: 10}}>
<View style ={styles.infoContainer}>
<Text style = {styles.title1}>Description: </Text>
<Text style = {styles.title}>{item.text}</Text>
</View>
<View style ={styles.infoContainer}>
<Text style = {styles.title1}>Location: </Text>
<Text style = {styles.link}>{item.loc}</Text>
</View>
</View>
)
}
function Lunch () {
return (
<NavigationContainer independent={true}>
<Stack.Navigator>
<Stack.Screen
name = "LunchEvents"
component = {LunchEvents}
options={({
headerShown: false
})}
/>
<Stack.Screen
name = "LunchInfo"
component = {LunchInfo}
options={({route})=>({
title:route.params.name
})}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
class LunchEvents extends React.Component { class LunchEvents extends React.Component {
@ -64,7 +105,7 @@ class LunchEvents extends React.Component {
<View style={styles.container}> <View style={styles.container}>
<FlatList <FlatList
data={this.state.data} data={this.state.data}
renderItem={item=><LunchEvent item={item}/>} renderItem={({item}) => <LunchEvent item={item} name={item.title} navigation={this.props.navigation}/>}
keyExtractor={item=>JSON.stringify(item)} keyExtractor={item=>JSON.stringify(item)}
/> />
</View> </View>
@ -72,4 +113,4 @@ class LunchEvents extends React.Component {
} }
} }
export default LunchEvents; export default Lunch;

View File

@ -8,6 +8,7 @@ import {
StatusBar, StatusBar,
FlatList, FlatList,
TouchableOpacity, TouchableOpacity,
Image,
} from 'react-native'; } from 'react-native';
import { import {
@ -17,21 +18,69 @@ import {
DebugInstructions, DebugInstructions,
ReloadInstructions, ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen'; } from 'react-native/Libraries/NewAppScreen';
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import styles from './styles/liststyles'; import styles from './styles/liststyles';
import { url } from './resources/fetchInfo.json'; import { url } from './resources/fetchInfo.json';
const SSLElement = ({item}) => { const Stack = createStackNavigator();
const [visible, setVisible] = useState(0)
const extra = visible?(<Text>{'\n'}Details: {item.item.text}{"\n\n"}Where: {item.item.loc}{"\n\n"}Teacher: {item.item.teacher}</Text>):(<></>); export const SSLInfo = ({route}) => {
return( const item = route.params;
<View> console
<TouchableOpacity style={styles.item} onPress={()=>setVisible(!visible)} activeOpacity={0.8}> return (
<Text style={styles.title}>{item.item.title}</Text> <View style = {{padding: 10}}>
{extra} <View style ={styles.infoContainer}>
</TouchableOpacity> <Text style = {styles.title1}>Description: </Text>
</View> <Text style = {styles.title}>{item.text}</Text>
</View>
<View style ={styles.infoContainer}>
<Text style = {styles.title1}>Who: </Text>
<Text style = {styles.link}>{item.teacher}</Text>
</View>
<View style ={styles.infoContainer}>
<Text style = {styles.title1}>Where: </Text>
<Text style = {styles.title}>{item.loc}</Text>
</View>
</View>
)
}
function SSLElement (props) {
const item = props.item;
return(
<View>
<TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('SSLInfo', {data: props.data, name: item.item.title, text: item.item.text, loc:item.item.loc, teacher: item.item.teacher})} activeOpacity={0.8}>
<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<Image source = {require('./assets/sslopps.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
<Text style={styles.title}>{item.item.title}</Text>
</View>
</TouchableOpacity>
</View>
) )
} }
function SSLOpp () {
return (
<NavigationContainer independent={true}>
<Stack.Navigator>
<Stack.Screen
name = "SSLOps"
component = {SSLOps}
options={({
headerShown: false
})}
/>
<Stack.Screen
name = "SSLInfo"
component = {SSLInfo}
options={({route})=>({
title:route.params.title
})}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
class SSLOps extends React.Component { class SSLOps extends React.Component {
@ -63,7 +112,7 @@ class SSLOps extends React.Component {
<View style={styles.container}> <View style={styles.container}>
<FlatList <FlatList
data={this.state.data} data={this.state.data}
renderItem={item=><SSLElement item={item}/>} renderItem={item=><SSLElement item={item} name={item.title} navigation={this.props.navigation}/>}
keyExtractor={item=>JSON.stringify(item)} keyExtractor={item=>JSON.stringify(item)}
/> />
</View> </View>
@ -71,4 +120,4 @@ class SSLOps extends React.Component {
} }
} }
export default SSLOps; export default SSLOpp;

View File

@ -30,7 +30,7 @@ const StaffElement = ({item}) => {
<View> <View>
<TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}> <TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}> <View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<Image source = {require('./assets/clubs.png')} style = {{height: 40, width: 40, marginRight: 10}}/> <Image source = {require('./assets/staff.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
<Text style={styles.title}>{item.item.name}</Text> <Text style={styles.title}>{item.item.name}</Text>
</View> </View>
{visible?extra:<></>} {visible?extra:<></>}

BIN
app/assets/lunch.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
app/assets/sslopps.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

View File

@ -29,6 +29,22 @@ const styles = StyleSheet.create({
alignSelf:'flex-end', alignSelf:'flex-end',
marginTop:'-3%', marginTop:'-3%',
marginRight:'-3%' marginRight:'-3%'
},
title1: {
fontSize: 28,
fontWeight: 'bold',
},
link: {
fontSize: 28,
textDecorationLine: 'underline',
textDecorationStyle: "solid",
textDecorationColor: "#000",
},
infoContainer: {
backgroundColor: 'white',
borderRadius: 6,
padding: 5,
marginBottom: 10,
} }
}); });