emh/blazerapp
1
0
Fork 0
mirror of https://github.com/Blair-SGA-Dev-Team/blazerapp.git synced 2024-11-24 13:41:16 -05:00
Code Issues Packages Projects Releases Wiki Activity

added pop up modal+format+style

Browse Source
This commit is contained in:
Emily Liu 2020-10-25 02:57:39 -04:00
parent 10462ff55b
commit a2dcb7a623
7 changed files with 194 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/ChallengeWeek.js
View File

@ -6,6 +6,7 @@ import {
View, View,
Text, Text,
StatusBar, StatusBar,
Linking,
} from 'react-native'; } from 'react-native';
import { import {
@ -15,7 +16,7 @@ import {
DebugInstructions, DebugInstructions,
ReloadInstructions, ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen'; } from 'react-native/Libraries/NewAppScreen';
import styles from './styles/liststyles';
import { url } from './resources/fetchInfo.json' import { url } from './resources/fetchInfo.json'
class ChallengeWeek extends React.Component { class ChallengeWeek extends React.Component {
@ -43,9 +44,10 @@ class ChallengeWeek extends React.Component {
return <View/> return <View/>
} else { } else {
return ( return (
<View style={{alignItems:'center',paddingTop:'5%',paddingLeft:'10%',paddingRight:'10%'}}> <View style={{alignItems:'center',paddingTop:'5%',paddingiorizontal:'10%', height: '100%', backgroundColor: 'white'}}>
<Text style={{fontSize:32,marginBottom:'10%',textAlign:'center'}}>{this.state.data.title}</Text> <Text style={{fontSize: 32, fontWeight: 'bold', marginBottom: '10%', color: 'red'}}>{this.state.data.title}</Text>
<Text style={{textAlign:'center'}}>{this.state.data.text}</Text> <Text style={{textAlign:'center', fontSize: 24, marginBottom: '5%'}}>{this.state.data.text}</Text>
<Text style={{textAlign:'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: "solid", textDecorationColor: "#000",}} onPress={() => Linking.openURL(this.state.data.link)}>{this.state.data.link}</Text>
</View> </View>
) )
} }

59
app/Home.js
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { useState } from 'react';
import { import {
SafeAreaView, SafeAreaView,
StyleSheet, StyleSheet,
@ -6,6 +6,9 @@ import {
View, View,
Text, Text,
StatusBar, StatusBar,
Modal,
TouchableHighlight,
Image,
} from 'react-native'; } from 'react-native';
import { import {
@ -15,15 +18,61 @@ import {
DebugInstructions, DebugInstructions,
ReloadInstructions, ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen'; } from 'react-native/Libraries/NewAppScreen';
import styles from './styles/morestyles'
function Home1() {
const [modalVisible, setModalVisible] = useState(true);
return (
<View>
<View>
<Modal animationType="slide" transparent={true} visible={modalVisible}>
<View style={styles.modal}>
<View style={{display: 'flex', flexDirection:'row', justifyContent: 'flex-end'}}>
<TouchableHighlight onPress={() => {setModalVisible(!modalVisible);}}>
<Image source = {require('./assets/exit.png')} style = {{height: 40, width: 40}}/>
</TouchableHighlight>
</View>
<View>
<Image source = {require('./assets/blair_logo.png')} style = {{alignSelf: 'center', marginTop: '5%', height: 325, width: 325}}/>
<Text style={styles.modalText}>hgjriwogjewope</Text>
</View>
</View>
</Modal>
</View>
<View>
</View>
</View>
)
}
class Home extends React.Component { class Home extends React.Component {
constructor(props) {
super(props)
this.state = {
data: [],
isLoading:true
}
}
/*componentDidMount() {
fetch(`${url}/api/en/popup`,{
headers: {
'Cache-Control': 'no-cache'
}}
).then((response) => {
return response.text();
}).then((json) => {
this.setState({data: JSON.parse(json),isLoading:false});
}).catch((error) => console.error(error))
}*/
render() { render() {
return ( return (
<View> <View>
<Home1></Home1>
</View> </View>
) )
} }
} }
export default Home; export default Home;

169
app/LunchEvents.js
View File

@ -24,93 +24,98 @@ import styles from './styles/liststyles'
import { url } from './resources/fetchInfo.json' import { url } from './resources/fetchInfo.json'
const Stack = createStackNavigator(); const Stack = createStackNavigator();
const LunchEvent = (props) => {
const item = props.item
return(
<View>
<TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('LunchInfo', {data:props.data,name:props.name,text:item.text,loc:item.loc})} activeOpacity={0.8}>
<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<Image source = {require('./assets/lunch.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
<Text style={styles.title}>{item.title}</Text>
</View>
</TouchableOpacity>
</View>
)
}
export const LunchInfo = ({route}) => { export const LunchInfo = ({route}) => {
const item = route.params; const item = route.params;
return ( return (
<View style = {{padding: 10}}> <View style = {{padding: 10}}>
<View style ={styles.infoContainer}> <Text style = {styles.eventTitle}>{item.name}</Text>
<Text style = {styles.title1}>Description: </Text> <View style ={styles.infoContainer}>
<Text style = {styles.title}>{item.text}</Text> <Text style = {styles.title1}>Description: </Text>
</View> <Text style = {styles.title}>{item.text}</Text>
<View style ={styles.infoContainer}> </View>
<Text style = {styles.title1}>Location: </Text> <View style ={styles.infoContainer}>
<Text style = {styles.link}>{item.loc}</Text> <Text style = {styles.title1}>Location: </Text>
</View> <Text style = {styles.title}>{item.loc}</Text>
</View> </View>
) </View>
} )
}
function LunchEvent (props) {
const item = props.item
return(
<View>
<TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('LunchInfo', {data:props.data,name:item.title,text:item.text,loc:item.loc})} activeOpacity={0.8}>
<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<Image source = {require('./assets/lunch.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
<Text style={styles.title}>{item.title}</Text>
</View>
</TouchableOpacity>
</View>
)
}
function Lunch () { function Lunch () {
return ( return (
<NavigationContainer independent={true}> <NavigationContainer independent={true}>
<Stack.Navigator> <Stack.Navigator>
<Stack.Screen <Stack.Screen
name = "LunchEvents" name = "LunchEvents"
component = {LunchEvents} component = {LunchEvents}
options={({ options={({
headerShown: false headerShown: false
})} })}
/> />
<Stack.Screen <Stack.Screen
name = "LunchInfo" name = "LunchInfo"
component = {LunchInfo} component = {LunchInfo}
options={({route})=>({ options={({route})=>({
title:route.params.name headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
})} title:route.params.name
/> })}
</Stack.Navigator> />
</NavigationContainer> </Stack.Navigator>
) </NavigationContainer>
)
} }
class LunchEvents extends React.Component { class LunchEvents extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
data: [] data: []
} }
} }
componentDidMount() { componentDidMount() {
fetch(`${url}/api/en/lunchEvents`,{ fetch(`${url}/api/en/lunchEvents`,{
headers: { headers: {
'Cache-Control': 'no-cache' 'Cache-Control': 'no-cache'
} }
} }
) )
.then((response) => { .then((response) => {
return response.text(); return response.text();
}) })
.then((json) => { .then((json) => {
this.setState({data: JSON.parse(json)}); this.setState({data: JSON.parse(json)});
}) })
.catch((error) => console.error(error)) .catch((error) => console.error(error))
} }
render() { render() {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<FlatList <FlatList
data={this.state.data} data={this.state.data}
renderItem={({item}) => <LunchEvent item={item} name={item.title} navigation={this.props.navigation}/>} renderItem={({item}) => <LunchEvent item={item} name={this.props.title} navigation={this.props.navigation}/>}
keyExtractor={item=>JSON.stringify(item)} keyExtractor={item=>JSON.stringify(item)}
/> />
</View> </View>
) )
} }
} }
export default Lunch; export default Lunch;

3
app/SSLOps.js
View File

@ -30,13 +30,14 @@ export const SSLInfo = ({route}) => {
console console
return ( return (
<View style = {{padding: 10}}> <View style = {{padding: 10}}>
<Text style = {styles.eventTitle}>{item.name}</Text>
<View style ={styles.infoContainer}> <View style ={styles.infoContainer}>
<Text style = {styles.title1}>Description: </Text> <Text style = {styles.title1}>Description: </Text>
<Text style = {styles.title}>{item.text}</Text> <Text style = {styles.title}>{item.text}</Text>
</View> </View>
<View style ={styles.infoContainer}> <View style ={styles.infoContainer}>
<Text style = {styles.title1}>Who: </Text> <Text style = {styles.title1}>Who: </Text>
<Text style = {styles.link}>{item.teacher}</Text> <Text style = {styles.title}>{item.teacher}</Text>
</View> </View>
<View style ={styles.infoContainer}> <View style ={styles.infoContainer}>
<Text style = {styles.title1}>Where: </Text> <Text style = {styles.title1}>Where: </Text>

BIN
app/assets/exit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

18
app/styles/liststyles.js
View File

@ -34,6 +34,14 @@ const styles = StyleSheet.create({
fontSize: 28, fontSize: 28,
fontWeight: 'bold', fontWeight: 'bold',
}, },
title2: {
fontSize: 22,
fontWeight: 'bold',
color: 'red',
textDecorationLine: 'underline',
textDecorationStyle: "solid",
textDecorationColor: "red",
},
link: { link: {
fontSize: 28, fontSize: 28,
textDecorationLine: 'underline', textDecorationLine: 'underline',
@ -45,6 +53,16 @@ const styles = StyleSheet.create({
borderRadius: 6, borderRadius: 6,
padding: 5, padding: 5,
marginBottom: 10, marginBottom: 10,
},
headerTitle: {
fontSize: 24,
},
eventTitle: {
textAlign: 'center',
fontSize: 32,
fontWeight: 'bold',
padding: 5,
marginBottom: 10,
} }
}); });

27
app/styles/morestyles.js
View File

@ -57,6 +57,33 @@ const styles=StyleSheet.create({
tabBarIcon: { tabBarIcon: {
height: 50, height: 50,
width: 50, width: 50,
},
popup: {
height: '90%',
display: 'flex',
flexDirection: 'column',
justifyContent: "center",
alignItems: "center",
},
modal: {
marginHorizontal: 20,
marginTop: '20%',
height: '100%',
backgroundColor: "white",
borderRadius: 20,
padding: 15,
shadowColor: "black",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.5,
shadowRadius: 7,
},
modalText: {
marginVertical: '10%',
textAlign: "center",
fontSize: 20,
} }
}); });