mirror of
https://github.com/Blair-SGA-Dev-Team/blazerapp.git
synced 2024-11-08 14:51:17 -05:00
SSLOps, LunchEvent pg to match design team+style
This commit is contained in:
parent
6f75ac5260
commit
10462ff55b
17
app/Clubs.js
17
app/Clubs.js
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
|
@ -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
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
BIN
app/assets/sslopps.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.7 KiB |
|
@ -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,
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user