emh/blazerapp
1
0
Fork 0
mirror of https://github.com/Blair-SGA-Dev-Team/blazerapp.git synced 2026-07-16 06:50:22 -04:00
Code Issues Packages Projects Releases Wiki Activity

home pg + language

Browse Source
This commit is contained in:
emilyliublair
2021-08-17 21:18:32 -04:00
parent 38d07e8747
commit 6fd0056c89
30 changed files with 2368 additions and 2275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Announcements.js
+27 -38
View File
@@ -25,21 +25,22 @@ import Icon from 'react-native-vector-icons/AntDesign'
import Ionicons from 'react-native-vector-icons/Ionicons';
import AsyncStorage from '@react-native-async-storage/async-storage'
import LinearGradient from 'react-native-linear-gradient';
import I18n from './i18n';
const STORAGE_KEY = "teacherAnnouncements"
const getCurrentDate=()=>{
var date = new Date().getDate();
var month = new Date().getMonth() + 1;
var month = new Date().getMonth();
var year = new Date().getFullYear();
return new Date(year, month, date);
}
const Announcement = ({item}) => {
const date = new Date
const dateStr = `${date.getMonth()+1}/${date.getDate()}/${date.getFullYear()}`
const dateInfo = dateStr===item.item.date&&item.item.time!==undefined?item.item.time:item.item.date;
const todayDate = getCurrentDate()
const itemDate = new Date(item.item.date)
const dateInfo = todayDate.getTime()===itemDate.getTime()&&item.item.time!==undefined?item.item.time:(item.item.date+", " + item.item.time)
return (
<View style={{borderWidth: 1, borderColor: '#323232', padding: '2%', marginHorizontal: '2%', marginBottom: '2%', borderRadius: 12}}>
<View style = {{display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
@@ -52,6 +53,21 @@ const Announcement = ({item}) => {
)
}
function NewTeacherList(props) {
return (
<View>
<LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
<Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>{I18n.t('dates.'+props.name)}</Text>
</LinearGradient>
<FlatList
data={props.list}
renderItem={item=><Announcement item={item}/>}
keyExtractor={item=>JSON.stringify(item)}
/>
</View>
)
}
export const TeacherList = ({route}) => {
const todayDate = getCurrentDate()
const weekPastDate = new Date();
@@ -69,14 +85,14 @@ export const TeacherList = ({route}) => {
for (var i = 0; i < route.params.data.length; i++) {
const itemDate = new Date(route.params.data[i].date)
if (itemDate == todayDate) {
if (itemDate.getTime() == todayDate.getTime()) {
today.push(route.params.data[i])
}
else if (itemDate > todayDate && itemDate <= weekFutureDate) {
else if (itemDate.getTime() > todayDate.getTime() && itemDate.getTime() <= weekFutureDate.getTime()) {
future.push(route.params.data[i])
}
//else if (itemDate >= weekPastDate && itemDate < todayDate) {
else if (itemDate < todayDate) {
else if (itemDate.getTime() < todayDate.getTime()) {
past.push(route.params.data[i])
}
}
@@ -87,37 +103,10 @@ export const TeacherList = ({route}) => {
return (
<ScrollView style={{flex:1, backgroundColor: 'white'}}>
{todayBoolean?<View>
<LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
<Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Today</Text>
</LinearGradient>
<FlatList
data={today}
renderItem={item=><Announcement item={item}/>}
keyExtractor={item=>JSON.stringify(item)}
/>
</View>: <></>}
{pastBoolean?<View>
<LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
<Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Past</Text>
</LinearGradient>
<FlatList
data={past}
renderItem={item=><Announcement item={item}/>}
keyExtractor={item=>JSON.stringify(item)}
/>
</View>:<></>}
{futureBoolean?<View>
<LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
<Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Future</Text>
</LinearGradient>
<FlatList
data={future}
renderItem={item=><Announcement item={item}/>}
keyExtractor={item=>JSON.stringify(item)}
/>
</View>:<></>}
{!noAnn?<Text style={{textAlign: 'center', fontSize: 20, paddingTop: '2%'}}>No Announcements</Text>:<></>}
{todayBoolean?<NewTeacherList name = 'today' list = {today} />:<></>}
{pastBoolean?<NewTeacherList name = 'past' list = {past} />:<></>}
{futureBoolean?<NewTeacherList name = 'future' list = {future} />:<></>}
{!noAnn?<Text style={{textAlign: 'center', fontSize: 20, paddingTop: '2%'}}>{I18n.t('announcements.noAnnouncements')}</Text>:<></>}
</ScrollView>
)
}
app/App.js
+10 -17
View File
@@ -27,25 +27,18 @@ import Staff from './Staff'
import OpeningPage from './OpeningPage';
import OpenPage from './OpenPage';
import Ionicons from 'react-native-vector-icons/Ionicons';
//import I18n from './i18n';
import AsyncStorage from '@react-native-community/async-storage'
import I18n from './i18n.js'
import AsyncStorage from '@react-native-async-storage/async-storage'
const Tab = createBottomTabNavigator();
/*AsyncStorage.getItem('language')
AsyncStorage.getItem('language')
.then((token) => {
console.log("lang: " + token);
I18n.locale = token;
});
*/
AsyncStorage.getItem('announcementNotifs')
.then((token) => {
console.log("announcementNotifs: " + token);
});
AsyncStorage.getItem('eventNotifs')
.then((token) => {
console.log("eventNotifs: " + token);
});
class App extends React.Component {
state = {
@@ -86,11 +79,11 @@ class App extends React.Component {
fontSize:16
}}}
>
<Tab.Screen name="Home" component={Home}/>
<Tab.Screen name="Calendar" component={Calendar}/>
<Tab.Screen name="Clubs" component={Clubs}/>
<Tab.Screen name="Staff" component={Staff}/>
<Tab.Screen name="More" component={More}/>
<Tab.Screen name={I18n.t("app.home")} component={Home}/>
<Tab.Screen name={I18n.t("app.calendar")} component={Calendar}/>
<Tab.Screen name={I18n.t("app.clubs")} component={Clubs}/>
<Tab.Screen name={I18n.t("app.staff")} component={Staff}/>
<Tab.Screen name={I18n.t("app.more")} component={More}/>
</Tab.Navigator>
: <OpenPage />}
</NavigationContainer>
app/Calendar.js
+43 -53
View File
@@ -22,6 +22,7 @@ import { createStackNavigator } from '@react-navigation/stack'
import styles from './styles/liststyles'
import { url } from './resources/fetchInfo.json'
import morestyles from './styles/morestyles'
import I18n from './i18n.js'
const Stack = createStackNavigator();
@@ -42,38 +43,36 @@ export const EventInfo = ({route}) => {
const date = itemDate.getDate()
return (
<View style = {{backgroundColor: 'white', flex:1}}>
<View style={{padding: '5%'}}>
<View style={{marginBottom: '7%'}}>
<Text style={[styles.title, {fontWeight: 'bold', marginBottom: '2%'}]}>Info</Text>
<Text style={[styles.title, {fontWeight: '200'}]}>{item.text}</Text>
</View>
<ScrollView style = {{backgroundColor: 'white', flex:1, padding: '5%', paddingRight: '10%'}}>
<View style={{marginBottom: '7%'}}>
<Text style={[styles.title, {fontWeight: 'bold', marginBottom: '2%'}]}>{I18n.t('calendar.info')}</Text>
<Text style={[styles.title, {fontWeight: '200'}]}>{item.text}</Text>
</View>
<View style={{}}>
<View style={{display: 'flex', flexDirection: 'row', marginBottom: '5%'}}>
<Ionicons name='location-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
<View style={{display: 'flex'}}>
<Text style={{fontSize: 16}}>Location</Text>
<View style={{display: 'flex', marginLeft: -15, paddingHorizontal: '5%'}}>
<Text style={{fontSize: 16}}>{I18n.t('calendar.location')}</Text>
<Text style={[styles.title, {fontSize: 16, fontWeight: '200'}]}>{item.location}</Text>
</View>
</View>
<View style={{display: 'flex', flexDirection: 'row', marginBottom: '5%'}}>
<Ionicons name='time-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
<View style={{display: 'flex'}}>
<Text style={{fontSize: 16}}>Date</Text>
<View style={{display: 'flex', marginLeft: -15, paddingHorizontal: '5%'}}>
<Text style={{fontSize: 16}}>{I18n.t('calendar.date')}</Text>
<Text style={[styles.title, {fontSize: 16, fontWeight: '200'}]}>{dayOfWeek}, {month} {date}</Text>
</View>
</View>
<View style={{display: 'flex', flexDirection: 'row'}}>
<Ionicons name='person-circle-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
<View style={{display: 'flex'}}>
<Text style={{fontSize: 16}}>Organizer</Text>
<View style={{display: 'flex', marginLeft: -15, paddingHorizontal: '5%'}}>
<Text style={{fontSize: 16}}>{I18n.t('calendar.organizer')}</Text>
<Text style={[styles.title, {fontSize: 16, fontWeight: '200'}]}>{item.name}</Text>
<Text style={[styles.title, {fontSize: 16, fontWeight: '200', textDecorationLine: 'underline'}]}>{item.emails}</Text>
</View>
</View>
</View>
</View>
</ScrollView>
)
}
const Event = (props) => {
@@ -82,7 +81,7 @@ const Event = (props) => {
return (
<View>
<TouchableOpacity style={[styles.listItem, {padding: '2%'}]} onPress={()=>props.navigation.navigate('EventInfo', {data:props.data,name:props.name, title: item.item.title,text:item.item.text,location:item.item.location,date:item.item.date, name:item.item.name, emails: item.item.emails})} activeOpacity={0.8}>
<TouchableOpacity style={[styles.listItem, {padding: '2%'}]} onPress={()=>props.navigation.navigate('EventInfo', {data:props.data, title: item.item.title,text:item.item.text,location:item.item.location,date:item.item.date, name:item.item.name, emails: item.item.emails})} activeOpacity={0.8}>
<View style = {[styles.container2, {justifyContent: 'space-between'}]}>
<View style={{display: 'flex', flexDirection: 'row'}}>
<Ionicons name='calendar' size={32} color={'#323232'} style={{marginRight: 15}}/>
@@ -108,17 +107,18 @@ function CalendarEvents () {
<NavigationContainer independent={true}>
<Stack.Navigator>
<Stack.Screen
name = "Calendar"
name = {I18n.t('calendar.calendar')}
component = {Calendar}
options={({
headerShown: true,
headerTitleStyle:morestyles.headerTitle,
headerBackground: ()=>background,
headerleft: null,
headerTitleAlign: 'center'
//headerLeft: null,
headerTitleAlign: 'center',
headerBackTitleVisible:false,
headerTintColor: 'black'
})}
/>
<Stack.Screen
name = "EventInfo"
component = {EventInfo}
@@ -126,8 +126,10 @@ function CalendarEvents () {
title:route.params.title,
headerTitleStyle:morestyles.headerTitle,
headerBackground: ()=>background,
headerleft: null,
headerTitleAlign: 'center'
//headerLeft: null,
headerTitleAlign: 'center',
headerBackTitleVisible:false,
headerTintColor: 'black'
})}
/>
</Stack.Navigator>
@@ -135,6 +137,21 @@ function CalendarEvents () {
)
}
function NewCalendarCategory (props) {
return (
<View>
<LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
<Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>{I18n.t('dates.'+props.name)}</Text>
</LinearGradient>
<FlatList
data={props.list}
renderItem={item=><Event item={item} name={props.itemname} navigation={props.navigation}/>}
keyExtractor={item=>JSON.stringify(item)}
/>
</View>
)
}
class Calendar extends React.Component {
constructor(props) {
@@ -205,37 +222,10 @@ class Calendar extends React.Component {
var noAnn = (todayBoolean||pastBoolean||futureBoolean)
return (
<ScrollView style={{flex:1, backgroundColor: 'white'}}>
{todayBoolean?<View>
<LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
<Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Today</Text>
</LinearGradient>
<FlatList
data={today}
renderItem={item=><Event item={item} name={item.name} navigation={this.props.navigation}/>}
keyExtractor={item=>JSON.stringify(item)}
/>
</View>: <></>}
{pastBoolean?<View>
<LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
<Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Past</Text>
</LinearGradient>
<FlatList
data={past}
renderItem={item=><Event item={item} name={item.name} navigation={this.props.navigation}/>}
keyExtractor={item=>JSON.stringify(item)}
/>
</View>:<></>}
{futureBoolean?<View>
<LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
<Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Future</Text>
</LinearGradient>
<FlatList
data={future}
renderItem={item=><Event item={item} name={item.name} navigation={this.props.navigation}/>}
keyExtractor={item=>JSON.stringify(item)}
/>
</View>:<></>}
{!noAnn?<Text style={{textAlign: 'center', fontSize: 20, paddingTop: '2%'}}>No Events</Text>:<></>}
{todayBoolean?<NewCalendarCategory name = 'today' list = {today} navigation={this.props.navigation} />: <></>}
{pastBoolean?<NewCalendarCategory name = 'past' list = {past} navigation={this.props.navigation} />: <></>}
{futureBoolean?<NewCalendarCategory name = 'future' list = {future} navigation={this.props.navigation} />: <></>}
{!noAnn?<Text style={{textAlign: 'center', fontSize: 20, paddingTop: '2%'}}>{I18n.t('calendar.noEvents')}</Text>:<></>}
</ScrollView>
)
}
app/ChallengeWeek.js
+8 -23
View File
@@ -21,6 +21,7 @@ import {
} from 'react-native/Libraries/NewAppScreen';
import styles from './styles/liststyles';
import { url } from './resources/fetchInfo.json'
import I18n from 'i18n-js';
class ChallengeWeek extends React.Component {
constructor(props) {
@@ -42,7 +43,7 @@ class ChallengeWeek extends React.Component {
this.setState({data: JSON.parse(json),isLoading:false});
}).catch((error) => console.error(error))
this.animatedValue=new Animated.Value(0);
/*this.animatedValue=new Animated.Value(0);
this.value=0;
this.animatedValue.addListener(({value}) => {
this.value=value;
@@ -54,10 +55,10 @@ class ChallengeWeek extends React.Component {
this.backInterpolate = this.animatedValue.interpolate({
inputRange:[0,180],
outputRange: ['180deg','360deg']
})
})*/
}
flipCard() {
/*flipCard() {
if (this.value >= 90) {
Animated.spring(this.animatedValue, {
toValue:0,
@@ -73,10 +74,10 @@ class ChallengeWeek extends React.Component {
}).start();
}
this.setState({flip:!this.state.flip})
}
}*/
render() {
const frontAnimatedStyle = {
{/*const frontAnimatedStyle = {
transform: [
{rotateY:this.frontInterpolate}
]
@@ -95,7 +96,7 @@ class ChallengeWeek extends React.Component {
else {
styling=({display:'none'})
styling2=({height: '100%', width: '100%', backgroundColor: 'white', borderRadius: 20, textAlign: 'center', display: 'flex', alignContent: 'center', padding: '5%', paddingTop: '15%', borderColor: 'red', borderWidth: 1})
}
}*/}
if (this.state.isLoading) {
return <View/>
@@ -104,23 +105,7 @@ class ChallengeWeek extends React.Component {
<View style={{alignItems:'center',paddingiorizontal:'10%', height: '100%', backgroundColor: 'white', justifyContent: 'center', padding: '2%'}}>
<Text style={{fontSize: 32, fontWeight: 'bold', marginBottom: '10%', color: 'red', textAlign: 'center'}}>{this.state.data.title}</Text>
<Text style={{textAlign:'center', fontSize: 24, marginBottom: '5%', textAlign: 'center', fontWeight: '200'}}>{this.state.data.text}</Text>
<Text style={{textAlign:'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: "solid", textDecorationColor: "#000"}} onPress={() => Linking.openURL(this.state.data.link)}>Link</Text>
{/*<TouchableOpacity onPress={()=>this.flipCard()} style={{height: '70%', width: '80%', borderRadius: 20, shadowColor: 'red', shadowOffset: {width: 0, height: 2}, shadowOpacity: 0.5, shadowRadius: 7, alignSelf: 'center'}}>
<Animated.View style={{backfaceVisibility: 'hidden'}, frontAnimatedStyle}>
<View style={styling}>
<View>{this.state.flip?<Text style={{textAlign: 'center', fontSize: 28}}>{this.state.data.title}</Text>:<></>}</View>
<Image source={require('./assets/blair_logo.png')} style = {{height: 200, width: 200, alignSelf: 'center', position: 'absolute', bottom: '20%'}}/>
<Image source={require('./assets/arrow_right.png')} style = {{alignSelf: 'center', position: 'absolute', bottom: '5%'}}/>
</View>
</Animated.View>
<Animated.View style={backAnimatedStyle}>
<View style={styling2}>
{!this.state.flip?<Text style={{textAlign: 'center', fontSize: 28}}>{this.state.data.text}</Text>:<></>}
<Text style={{textAlign:'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: "solid", textDecorationColor: "#000",}} onPress={() => Linking.openURL(this.state.data.link)}>{'\n'}Link</Text>
</View>
</Animated.View>
</TouchableOpacity>*/}
<Text style={{textAlign:'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: "solid", textDecorationColor: "#000"}} onPress={() => Linking.openURL(this.state.data.link)}>{I18n.t("challenge.link")}</Text>
</View>
)
}
app/Clubs.js
+39 -30
View File
@@ -29,50 +29,50 @@ import morestyles from './styles/morestyles'
import { url } from './resources/fetchInfo.json'
import LinearGradient from 'react-native-linear-gradient';
import I18n from './i18n';
import Ionicons from 'react-native-vector-icons/Ionicons';
const Stack = createStackNavigator();
export const ClubInfo = ({route}) => {
const item = route.params;
return (
<View style = {{padding: 10, backgroundColor: 'white', height: '100%'}}>
<View style ={[styles.infoContainer, {flexDirection: 'row', alignItems: 'center'}]}>
<View style={{width: '17%', display: 'flex', justifyContent: 'center'}}>
<Image source ={require('./assets/time.png')} style={{width: 50, height: 50}}/>
</View>
<View style={{width: '83%'}}>
<Text style = {{fontSize:20}}>{item.meeting}</Text>
<ScrollView style = {{backgroundColor: 'white', flex:1, padding: '5%', paddingRight: '10%'}}>
<View style={{display: 'flex', flexDirection: 'row', marginBottom: '5%'}}>
<Ionicons name='location-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
<View style={{display: 'flex', marginLeft: -15, paddingHorizontal: '5%'}}>
<Text style={{fontSize: 16}}>Meeting Location </Text>
<Text style={[styles.title, styles.linktext, {fontSize: 16, fontWeight: '200'}]} onPress={() => Linking.openURL(item.link)}>{item.link}</Text>
</View>
</View>
<View style ={[styles.infoContainer, {flexDirection: 'row', alignItems: 'center'}]}>
<View style={{width: '17%', display: 'flex', justifyContent: 'center'}}>
<Image source ={require('./assets/zoom.png')} style={{width: 50, height: 50}}/>
</View>
<View style={{width: '83%'}}>
<Text style = {[styles.linktext,{fontSize:20}]} onPress={() => Linking.openURL(item.link)}>{item.link}</Text>
<View style={{display: 'flex', flexDirection: 'row', marginBottom: '5%'}}>
<Ionicons name='time-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
<View style={{display: 'flex'}}>
<Text style={{fontSize: 16}}>Meeting Date</Text>
<Text style={[styles.title, {fontSize: 16, fontWeight: '200'}]}>{item.meeting}</Text>
</View>
</View>
<View style ={[styles.infoContainer, {flexDirection: 'row', alignItems: 'center'}]}>
<View style={{width: '17%', display: 'flex', justifyContent: 'center'}}>
<Image source ={require('./assets/sponsor.png')} style={{width: 50, height: 50}}/>
</View>
<View style={{width: '83%'}}>
<Text style = {{fontSize:20}}>{item.sponsor}</Text>
<View style={{display: 'flex', flexDirection: 'row'}}>
<Ionicons name='person-circle-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
<View style={{display: 'flex'}}>
<Text style={{fontSize: 16}}>Sponsor</Text>
<Text style={[styles.title, {fontSize: 16, fontWeight: '200'}]}>{item.sponsor}</Text>
</View>
</View>
</View>
</ScrollView>
)
}
function ClubElement (props) {
const item = props.item;
return(
<View>
<TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('ClubInfo', {data:props.data,name:props.name,meeting:item.meeting,link:item.link,sponsor:item.sponsor})} activeOpacity={0.8}>
<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<Image source = {require('./assets/clubs.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
<Text style={styles.title3}>{props.item.name}</Text>
<TouchableOpacity style={[styles.listItem]} onPress={()=>props.navigation.navigate('ClubInfo', {data:props.data,name:props.name,meeting:item.meeting,link:item.link,sponsor:item.sponsor})} activeOpacity={0.8}>
<View style = {[styles.container2, {justifyContent: 'space-between'}]}>
<View style={{display: 'flex', flexDirection: 'row'}}>
<Ionicons name = "ios-people-circle-outline" size={36} color={'#323232'} style={{marginRight: 15}} />
<Text style={[styles.title, {alignSelf:'center'}]}>{props.item.name}</Text>
</View>
<Image source = {require('./assets/forward.png')} style={{tintColor: '#b2b2b2'}}/>
</View>
</TouchableOpacity>
</View>
)
@@ -91,7 +91,14 @@ function Club () {
name = "Clubs"
component = {Clubs}
options={({
headerShown: false
headerShown: true,
headerTitleStyle:morestyles.headerTitle,
headerBackground: ()=>background,
//headerleft: null,
headerTitleAlign: 'center',
headerBackTitleVisible:false,
headerTintColor: 'black',
title:I18n.t('app.clubs'),
})}
/>
<Stack.Screen
@@ -100,7 +107,10 @@ function Club () {
options={({route})=>({
title:route.params.name,
headerTitleStyle:[morestyles.headerTitle,{alignSelf:'center'}],
headerBackground: ()=>background
headerBackground: ()=>background,
headerBackTitleVisible:false,
headerTintColor: 'black',
headerTitleAlign: 'center',
})}
/>
</Stack.Navigator>
@@ -157,10 +167,10 @@ class Clubs extends React.Component {
const { data , dataSearch,search} = this.state;
return (
<SafeAreaView style={styles.container}>
<SafeAreaView style={styles.moreDefault}>
<SearchBar
lightTheme
placeholder={'Search Clubs'}
placeholder={I18n.t('clubs.searchClubs')}
onChangeText={this.updateSearch}
onCancel={this.clearSearch}
onClear={this.clearSearch}
@@ -170,7 +180,6 @@ class Clubs extends React.Component {
renderItem={({item}) => <ClubElement item={item} name={item.name} navigation={this.props.navigation}/>}
keyExtractor={item => JSON.stringify(item)}
/>
</SafeAreaView>
);
app/Home.js
+332 -356
View File
File diff suppressed because one or more lines are too long
app/Images.js
-38
View File
@@ -1,38 +0,0 @@
import React, { useState } from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
Modal,
TouchableHighlight,
Image,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import styles from './styles/morestyles'
const Images = {
}
export default Images;
/*const Images = {
sslopps: require('./assets/sslopps.png'),
lunch: require('./assets/lunch.png'),
settings:require('./assets/settings.png'),
challenge:require('./assets/challenge.png'),
student:require('./assets/student.png'),
announcements:require('./assets/announcements.png'),
resources:require('./assets/resources.png'),
polls:require('./assets/polls.png'),
notifs:require('./assets/notifs.png'),
lang:require('./assets/lang.png'),
}*/
app/Language.js
+5 -5
View File
@@ -1,14 +1,14 @@
/*import React, { Component } from 'react';
import React, { Component } from 'react';
import { DevSettings } from 'react-native';
import { Platform, StyleSheet, TouchableOpacity, Text, ScrollView, View } from 'react-native';
import I18n from './i18n';
import AsyncStorage from '@react-native-community/async-storage'
import AsyncStorage from '@react-native-async-storage/async-storage'
const STORAGE_KEY = "language"
const language = [
{lang: <Text>{I18n.t('language.English')}</Text>, code: "en"},
{lang: <Text>{I18n.t('language.Spanish')}</Text>, code: "es"},
{lang: <Text>English</Text>, code: "en-US"},
{lang: <Text>Spanish</Text>, code: "es-US"},
]
export default class extends Component {
@@ -71,4 +71,4 @@ export default class extends Component {
</View>
);
}
}*/
}
app/Languages/en.js
+36 -3
View File
@@ -7,7 +7,20 @@ export default {
Hobbies: "Hobbies",
Achievements: "Achievements",
Messages: "Messages",
Announcements: "Announcements"
Announcements: "Announcements",
noAnnouncements: "No Announcements",
lunch: "Lunch Events",
news: "News",
shortcut: "Shortcut: ",
seeLunch: "See Lunch Events",
noNews: "No news for today",
noAnnouncements: "No announcements for today",
moreOn: "More on"
},
dates: {
today: "Today",
past: "Past",
future: "Future"
},
app: {
home: "Home",
@@ -17,7 +30,12 @@ export default {
more: "More"
},
calendar: {
calendarEvents: "Calendar Events"
calendar: "Calendar",
info: "Info",
location: "Location",
date: "Date",
organizer: "Organizer",
noEvents: "No Events"
},
clubs: {
searchClubs: "Search Clubs"
@@ -25,12 +43,27 @@ export default {
staff: {
searchStaff: "Search Staff"
},
announcements: {
noAnnouncements: "No Announcements"
},
student: {
Grade: "Grade",
Hobbies: "Hobbies",
Achievements: "Achievements",
Messages: "Messages",
},
lunch: {
information: "Information",
location: "Location"
},
ssl: {
information: "Information",
sponsor: "Sponsor",
location: "Location"
},
challenge: {
link: "Link"
},
polls: {
textInPoll: "Press the image to take the poll!"
},
@@ -38,7 +71,7 @@ export default {
Announcements: "Announcements",
Resources: "Resources",
SOTW: "Student of the Week",
lunch: "LunchEvents",
lunch: "Lunch Events",
ssl: "SSL Opportunities",
COTW: "Challenge of the Week",
Polls: "Polls",
app/Languages/es.js
+35 -2
View File
@@ -7,7 +7,20 @@ export default {
Hobbies: "El pasatiempo",
Achievements: "Logros",
Messages: "Mensajes",
Announcements: "Anuncios"
Announcements: "Anuncios",
noAnnouncements: "ESNo Announcements",
lunch: "Eventos de almuerzo",
news: "ESNews",
shortcut: "ESShortcut: ",
seeLunch: "ESSee Lunch Events",
noNews: "ESNo news for today",
noAnnouncements: "ESNo announcements for today",
moreOn: "ESMore on"
},
dates: {
today: "ESToday",
past: "ESPast",
future: "ESFuture"
},
app: {
home: "Casa",
@@ -17,7 +30,12 @@ export default {
more: "Más"
},
calendar: {
calendarEvents: "Eventos del calendario"
calendar: "ESCalendar",
info: "ESInfo",
location: "ESLocation",
date: "ESDate",
organizer: "ESOrganizer",
noEvents: "ESNo Events"
},
clubs: {
searchClubs: "Buscar clubes"
@@ -25,12 +43,27 @@ export default {
staff: {
searchStaff: "Personal de búsqueda"
},
announcements: {
noAnnouncements: "ESNo Announcements"
},
student: {
Grade: "El año",
Hobbies: "El pasatiempo",
Achievements: "Logros",
Messages: "Mensajes",
},
lunch: {
information: "ESInformation",
location: "ESLocation"
},
ssl: {
information: "ESInformation",
sponsor: "ESSponsor",
location: "ESLocation"
},
challenge: {
link: "ESLink"
},
polls: {
textInPoll: "¡Pulsa la imagen para realizar la encuesta!'"
},
app/LunchEvents.js
+4 -10
View File
@@ -25,9 +25,10 @@ import styles from './styles/liststyles'
import { url } from './resources/fetchInfo.json'
import LinearGradient from 'react-native-linear-gradient';
import Ionicons from 'react-native-vector-icons/Ionicons';
import I18n from 'i18n-js';
const Stack = createStackNavigator();
export const LunchInfo = ({route}) => {
{/*export const LunchInfo = ({route}) => {
const item = route.params;
return (
<View style = {{padding: 10, backgroundColor: 'white', height: '100%'}}>
@@ -49,7 +50,7 @@ export const LunchInfo = ({route}) => {
</View>
</View>
)
}
}*/}
function LunchEvent (props) {
const item = props.item
@@ -64,18 +65,11 @@ function LunchEvent (props) {
{expand?<LinearGradient start={{x: 0, y: 0.25}} end={{x: .5, y: 1}} colors={['red', '#FF7373']} style={{borderRadius: 24, alignSelf: 'center'}}><Image source = {require('./assets/collapse.png')} style={{tintColor: 'white'}}/></LinearGradient>:<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2', alignSelf: 'center'}}/>}
</View>
</View>
{expand?<View style={{marginLeft: 50}}><Text style={styles.accordianHeader}>Information</Text><Text style={styles.accordianText}>{item.text}</Text><Text style={styles.accordianHeader}>{'\n'}Location</Text><Text style={[styles.accordianText, {paddingBottom: '4%'}]}>{item.loc}</Text></View>:<></>}
{expand?<View style={{marginLeft: 50}}><Text style={styles.accordianHeader}>{I18n.t('lunch.information')}</Text><Text style={styles.accordianText}>{item.text}</Text><Text style={styles.accordianHeader}>{'\n'}{I18n.t('lunch.location')}</Text><Text style={[styles.accordianText, {paddingBottom: '4%'}]}>{item.loc}</Text></View>:<></>}
</TouchableOpacity>
</View>
)
}
/*<TouchableOpacity style={styles2.moreitem} onPress={()=>props.navigation.navigate('LunchInfo', {data:props.data,name:item.title,text:item.text,loc:item.loc})} activeOpacity={0.8}>
<Image source = {require('./assets/lunch.png')} style = {{height: 40, width: 40, marginRight: 10, tintColor: '#323232'}}/>
<View style = {{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '85%'}}>
<Text style={{fontSize: 20}}>{item.title}</Text>
<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2'}}/>
</View>
</TouchableOpacity>*/
class LunchEvents extends React.Component {
app/More.js
+101 -61
View File
@@ -21,7 +21,7 @@ import {
} from 'react-native/Libraries/NewAppScreen';
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack'
import styles from './styles/morestyles'
import Announcements, {TeacherList} from './Announcements'
@@ -30,12 +30,11 @@ import StudentWeek from './StudentWeek'
import SSLOps, {SSLInfo} from './SSLOps'
import LunchEvents, {LunchInfo} from './LunchEvents'
import ChallengeWeek from './ChallengeWeek'
import Settings from './Settings'
import Poll from './Poll'
import Images from './Images'
import Language from './Language'
import LinearGradient from 'react-native-linear-gradient'
import Ionicons from 'react-native-vector-icons/Ionicons';
//import I18n from './i18n';
import I18n from './i18n';
const Stack = createStackNavigator()
@@ -50,14 +49,14 @@ class MoreSwitch extends React.Component {
<View style={{flex:1,backgroundColor:'white', paddingHorizontal: '5%'}}>
<FlatList
data={[
{name:'Announcements',key:"announce", img:"megaphone-outline"},
{name:"Resources",key:"resources", img:"newspaper-outline"},
{name:"Student of the Week",key:"studentweek", img:"ribbon-outline"},
{name:"Lunch Events",key:"lunchevent", img:"fast-food-outline"},
{name:"SSL Opportunities",key:"sslopps", img:"school-outline"},
{name:"Challenge of the Week",key:"challengeweek", img:"golf-outline"},
{name:"Polls", key:"polls", img: "stats-chart-outline"},
{name:"Settings", key:"settings", img: "settings-outline"},
{name:I18n.t("more.Announcements"),key:"announce", img:"megaphone-outline"},
{name:I18n.t("more.Resources"),key:"resources", img:"newspaper-outline"},
{name:I18n.t("more.SOTW"),key:"studentweek", img:"ribbon-outline"},
{name:I18n.t("more.lunch"),key:"lunchevent", img:"fast-food-outline"},
{name:I18n.t("more.ssl"),key:"sslopps", img:"school-outline"},
{name:I18n.t("more.COTW"),key:"challengeweek", img:"golf-outline"},
{name:I18n.t("more.Polls"), key:"polls", img: "stats-chart-outline"},
{name:I18n.t("more.Settings"), key:"settings", img: "settings-outline"},
]}
renderItem={({item})=>
@@ -76,6 +75,35 @@ class MoreSwitch extends React.Component {
}
}
class SettingSwitch extends React.Component {
constructor(props) {
super(props)
this.props = props
}
render() {
return (
<View style={{flex:1,backgroundColor:'white', paddingHorizontal: '5%'}}>
<FlatList
data={[
{name:"Language",key:"language", img:'language-outline'}
]}
renderItem={({item})=>
<TouchableOpacity style={styles.moreitem} onPress={()=>this.props.navigation.navigate(item.key)}>
<Ionicons name={item.img} size={36} color={'#323232'}style={{marginRight: 15}}/>
<View style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '85%'}}>
<Text style={styles.moretext}>{I18n.t('settings.' + item.key)}</Text>
<Image source = {require('./assets/forward.png')} style={{tintColor: '#b2b2b2'}}/>
</View>
</TouchableOpacity>
}
/>
</View>
)
}
}
const background = (<LinearGradient
colors={['#f99', 'white']}
style = {{flex:1,borderBottomColor:'black',borderBottomWidth:0.5}}
@@ -90,7 +118,7 @@ class More extends React.Component {
name="Chooser"
component={MoreSwitch}
options={{
title:"More",
title:I18n.t("more.More"),
headerTitleStyle:styles.headerTitle,
headerBackground: ()=>background,
headerTitleAlign: 'center'
@@ -100,118 +128,130 @@ class More extends React.Component {
name="announce"
component={Announcements}
options={{
title:"Announcements",
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerLeft:null,
title:I18n.t("more.Announcements"),
headerTitleStyle:[styles.headerTitle],
headerBackground: ()=>background,
headerTitleAlign: 'center'
headerTitleAlign: 'center',
headerBackTitleVisible:false,
headerTintColor: 'black'
}}
/>
<Stack.Screen
name="resources"
component={Resources}
options={{
title:"Resources",
title:I18n.t("more.Resources"),
headerTitleStyle:styles.headerTitle,
headerLeft:null,
//headerLeft:null,
headerBackground: ()=>background,
headerTitleAlign: 'center'
headerTitleAlign: 'center',
headerBackTitleVisible:false,
headerTintColor: 'black'
}}
/>
<Stack.Screen
name="studentweek"
component={StudentWeek}
options={{
title:"Student of the Week",
title:I18n.t("more.SOTW"),
headerTitleStyle:styles.headerTitle,
headerLeft:null,
//headerLeft:null,
headerBackground: ()=>background,
headerTitleAlign: 'center'
headerTitleAlign: 'center',
headerBackTitleVisible:false,
headerTintColor: 'black'
}}
/>
<Stack.Screen
name="lunchevent"
component={LunchEvents}
options={{
title:"Lunch Events",
title:I18n.t("more.lunch"),
headerTitleStyle:styles.headerTitle,
headerLeft:null,
//headerLeft:null,
headerBackground: ()=>background,
headerTitleAlign: 'center'
headerTitleAlign: 'center',
headerBackTitleVisible:false,
headerTintColor: 'black'
}}
/>
<Stack.Screen
name="sslopps"
component={SSLOps}
options={{
title:"SSL Opportunities",
title:I18n.t("more.ssl"),
headerTitleStyle:styles.headerTitle,
headerLeft:null,
//headerLeft:null,
headerBackground: ()=>background,
headerTitleAlign: 'center'
headerTitleAlign: 'center',
headerBackTitleVisible:false,
headerTintColor: 'black'
}}
/>
<Stack.Screen
name="challengeweek"
component={ChallengeWeek}
options={{
title:"Challenge of the Week",
title:I18n.t("more.COTW"),
headerTitleStyle:styles.headerTitle,
headerLeft:null,
//headerLeft:null,
headerBackground: ()=>background,
headerTitleAlign: 'center'
headerTitleAlign: 'center',
headerBackTitleVisible:false,
headerTintColor: 'black'
}}
/>
<Stack.Screen
name="polls"
component={Poll}
options={{
title:"Polls",
title:I18n.t("more.Polls"),
headerTitleStyle:styles.headerTitle,
headerLeft:null,
//headerLeft:null,
headerBackground: ()=>background,
headerTitleAlign: 'center'
headerTitleAlign: 'center',
headerBackTitleVisible:false,
headerTintColor: 'black'
}}
/>
<Stack.Screen
name="settings"
component={Settings}
component={SettingSwitch}
options={{
title:"Settings",
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerLeft:null,
title:I18n.t("more.Settings"),
headerTitleStyle:[styles.headerTitle],
//headerLeft:null,
headerBackground: ()=>background,
headerShown:false,
headerBackTitleVisible:false,
headerTintColor: 'black',
headerTitleAlign: 'center'
}}
/>
<Stack.Screen
name="language"
component={Language}
options={{
title:I18n.t("settings.language"),
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerBackground: ()=>background,
//headerLeft: null,
headerBackTitleVisible:false,
headerTintColor: 'black',
headerTitleAlign: 'center'
}}
/>
<Stack.Screen
name="TeacherList"
component={TeacherList}
options={({route})=>({
headerTitleStyle:[styles.headerTitle,{alignSelf:'center',fontSize:Math.min(24,24*23/route.params.name.length)}],
headerTitleStyle:[styles.headerTitle],
title:route.params.name,
headerRight:()=>(<></>),
headerBackground: ()=>background
})}
/>
<Stack.Screen
name="LunchInfo"
component={LunchInfo}
options={({route})=>({
headerTitleStyle:[styles.headerTitle,{alignSelf:'center',fontSize:Math.min(24,24*23/route.params.name.length)}],
title:route.params.name,
headerRight:()=>(<></>),
headerBackground: ()=>background
})}
/>
<Stack.Screen
name="SSLInfo"
component={SSLInfo}
options={({route})=>({
headerTitleStyle:[styles.headerTitle,{alignSelf:'center',fontSize:Math.min(24,24*23/route.params.name.length)}],
title:route.params.name,
headerBackground: ()=>background,
headerRight:()=>(<></>)
headerBackTitleVisible:false,
headerTintColor: 'black',
headerTitleAlign: 'center'
//headerLeft: null,
})}
/>
</Stack.Navigator>
app/Resources.js
+1 -1
View File
@@ -30,7 +30,7 @@ function ResourceLink(props) {
<View style={{aspectRatio: 1}}>
<Image source={props.img} style={{width: '100%', height: '100%', borderRadius: 30}}/>
</View>
<Text style={{fontColor: 'black', alignSelf: 'center', textAlign: 'center', marginTop: '2%', fontSize: 16}}>{props.name}</Text>
<Text style={{color: 'black', alignSelf: 'center', textAlign: 'center', marginTop: '2%', fontSize: 16}}>{props.name}</Text>
</View>
</TouchableOpacity>
)
app/SSLOps.js
+4 -4
View File
@@ -25,11 +25,11 @@ import styles from './styles/liststyles';
import { url } from './resources/fetchInfo.json';
import LinearGradient from 'react-native-linear-gradient';
import Ionicons from 'react-native-vector-icons/Ionicons';
//import I18n from './i18n';
import I18n from './i18n';
const Stack = createStackNavigator();
export const SSLInfo = ({route}) => {
{/*export const SSLInfo = ({route}) => {
const item = route.params;
console
return (
@@ -60,7 +60,7 @@ export const SSLInfo = ({route}) => {
</View>
</View>
)
}
}*/}
function SSLElement (props) {
const item = props.item;
@@ -75,7 +75,7 @@ function SSLElement (props) {
{expand?<LinearGradient start={{x: 0, y: 0.25}} end={{x: .5, y: 1}} colors={['red', '#FF7373']} style={{borderRadius: 24, alignSelf: 'center'}}><Image source = {require('./assets/collapse.png')} style={{tintColor: 'white'}}/></LinearGradient>:<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2', alignSelf: 'center'}}/>}
</View>
</View>
{expand?<View style={{marginLeft: 50}}><Text style={styles.accordianHeader}>Information</Text><Text style={styles.accordianText}>{item.item.text}</Text><Text style={styles.accordianHeader}>{'\n'}Sponsor</Text><Text style={styles.accordianText}>{item.item.teacher}</Text><Text style={styles.accordianHeader}>{'\n'}Location</Text><Text style={[styles.accordianText, {paddingBottom: '4%'}]}>{item.item.loc}</Text></View>:<></>}
{expand?<View style={{marginLeft: 50}}><Text style={styles.accordianHeader}>{I18n.t('ssl.information')}</Text><Text style={styles.accordianText}>{item.item.text}</Text><Text style={styles.accordianHeader}>{'\n'}{I18n.t('ssl.sponsor')}</Text><Text style={styles.accordianText}>{item.item.teacher}</Text><Text style={styles.accordianHeader}>{'\n'}{I18n.t('ssl.location')}</Text><Text style={[styles.accordianText, {paddingBottom: '4%'}]}>{item.item.loc}</Text></View>:<></>}
</TouchableOpacity>
</View>
)
app/Settings.js
-129
View File
@@ -1,129 +0,0 @@
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
Modal,
TouchableHighlight,
Image,
FlatList,
TouchableOpacity,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import styles from './styles/morestyles'
import LinearGradient from 'react-native-linear-gradient'
import Images from './Images'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
//import I18n from './i18n';
//import Language from './Language'
//import Notifications from './Notifications'
const Stack = createStackNavigator()
class placeHoldingForNow extends React.Component{
constructor(props) {
super(props)
this.props = props
}
render() {
return (
<View style={{flex:1,backgroundColor:'red'}}>
<Text>
Coming Soon...
</Text>
</View>
)
}
}
/*class SettingSwitch extends React.Component {
constructor(props) {
super(props)
this.props = props
}
render() {
return (
<View style={{flex:1,backgroundColor:'red'}}>
<FlatList
data={[
//{name:"Language",key:"language", img:Images.lang}
//{name:"Notifications",key:"notifications", img:Images.notifs},
]}
renderItem={({item})=>
<TouchableOpacity style={styles.moreitem} onPress={()=>this.props.navigation.navigate(item.key)}>
<Image source = {item.img} style = {{height: 40, width: 40, marginRight: 10, tintColor: '#e3e3e3'}}/>
<Text style={styles.moretext}>{I18n.t('settings.' + item.key)}</Text>
</TouchableOpacity>
}
/>
</View>
)
}
}
*/
const background = (<LinearGradient
colors={['#f99', 'white']}
style = {{flex:1,borderBottomColor:'black',borderBottomWidth:0.5}}
/>)
class Settings extends React.Component {
render() {
return (
<View style={{flex:1,backgroundColor:'red'}}>
<Text>
Coming Soon...
</Text>
</View>
/*<NavigationContainer independent={true}>
<Stack.Navigator>
<Stack.Screen
name="Chooser"
component={placeHoldingForNow}
options={{
title:'Settings',
headerTitleStyle:styles.headerTitle,
headerBackground: ()=>background
}}
/>
{/*<Stack.Screen
name="language"
component={Language}
options={{
title:'Language',
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerLeft:null,
headerBackground: ()=>background
}}
/>}*/
/*{<Stack.Screen
name="notifications"
component={Notifications}
options={{
title:'Notifications',
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerLeft:null,
headerBackground: ()=>background
}}
/>}
</Stack.Navigator>
</NavigationContainer>*/
)
}
}
export default Settings;
app/Staff.js
+82 -29
View File
@@ -10,6 +10,7 @@ import {
FlatList,
TouchableOpacity,
Image,
TouchableHighlight,
Linking
} from 'react-native';
@@ -20,43 +21,93 @@ import {
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { SearchBar } from 'react-native-elements';
import styles from './styles/liststyles'
import morestyles from './styles/morestyles'
import { url } from './resources/fetchInfo.json'
//import I18n from './i18n';
import LinearGradient from 'react-native-linear-gradient';
import Ionicons from 'react-native-vector-icons/Ionicons';
import I18n from './i18n';
const StaffElement = ({item}) => {
const [visible, setVisible] = useState(false)
const extra = (
[
...item.item.emails.map(email=>(
<View style={{display: 'flex', flexDirection: 'row', alignItems: 'center', marginTop: '2%', paddingHorizontal: '1%'}}>
<View style={{width: '10%', display: 'flex', justifyContent: 'center'}}>
<Image source={require('./assets/email.png')} style={{height: 22, width: 22}}/>
const Stack = createStackNavigator();
export const StaffInfo = ({route}) => {
const item = route.params;
return (
<View style = {{padding: 10, backgroundColor: 'white', height: '100%'}}>
{item.emails.map(email =>
<View style ={[styles.infoContainer, {flexDirection: 'row', alignItems: 'center'}]}>
<View style={{display: 'flex', justifyContent: 'center'}}>
<Ionicons name='mail-outline' size={28} style={{marginRight: 15}}/>
</View>
<View style={{}}>
<Text style = {{fontSize:16}}>{email}</Text>
</View>
</View>
<View style={{width: '90%'}}>
<Text key={email}><Text style={styles.linktext} onPress={()=>Linking.openURL("mailto:"+email)}><Text></Text>{email}</Text></Text>
</View>
</View>
))
]
)}
</View>
)
//const extra = [...item.item.emails.map(email=>(<Text key={email}>{'\n'}Email: <Text style={styles.linktext} onPress={()=>Linking.openURL("mailto:"+email)}>{email}</Text></Text>))]
}
function StaffElement (props) {
const item = props.item;
return(
<View>
<TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<Image source = {require('./assets/staff.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
<Text style={styles.title3}>{item.item.name}</Text>
</View>
{visible?extra:<></>}
</TouchableOpacity>
<TouchableOpacity style={[styles.listItem]} onPress={()=>props.navigation.navigate('StaffInfo', {data:props.data,name:props.name,emails:item.emails})} activeOpacity={0.8}>
<View style = {[styles.container2, {justifyContent: 'space-between'}]}>
<View style={{display: 'flex', flexDirection: 'row'}}>
<Ionicons name = "ios-nutrition-outline" size={36} color={'#323232'} style={{marginRight: 15}} />
<Text style={[styles.title, {alignSelf:'center'}]}>{props.item.name}</Text>
</View>
<Image source = {require('./assets/forward.png')} style={{tintColor: '#b2b2b2'}}/>
</View>
</TouchableOpacity>
</View>
)
}
class Staff extends React.Component {
const background = (<LinearGradient
colors={['#f99', 'white']}
style = {{flex:1,borderBottomColor:'black',borderBottomWidth:0.5}}
/>)
function Staff () {
return (
<NavigationContainer independent={true}>
<Stack.Navigator>
<Stack.Screen
name = "Staff"
component = {Staffs}
options={({
headerShown: true,
headerTitleStyle:morestyles.headerTitle,
headerBackground: ()=>background,
//headerleft: null,
title:I18n.t('app.staff'),
headerBackTitleVisible:false,
headerTintColor: 'black',
headerTitleAlign: 'center'
})}
/>
<Stack.Screen
name = "StaffInfo"
component = {StaffInfo}
options={({route})=>({
title:route.params.name,
headerTitleStyle:[morestyles.headerTitle,{alignSelf:'center'}],
headerBackground: ()=>background,
headerBackTitleVisible:false,
headerTintColor: 'black',
headerTitleAlign: 'center',
})}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
class Staffs extends React.Component {
constructor(props) {
super(props);
@@ -95,7 +146,7 @@ class Staff extends React.Component {
updateSearch = (search) => {
this.setState({ search:search });
const searchPool = search.startsWith(this.state.search)?this.state.dataSearch:this.state.data;
const ds = searchPool.filter((thing)=>{return thing.name.toLowerCase().split(' ').some(x=>x.startsWith(search.toLowerCase()))})
const ds = searchPool.filter((thing)=>{return thing.name.toLowerCase().startsWith(search.toLowerCase())})
this.setState({dataSearch: ds})
};
clearSearch = (search)=>{
@@ -104,21 +155,23 @@ class Staff extends React.Component {
}
render() {
const { data , dataSearch,search} = this.state;
return (
<SafeAreaView style={styles.container}>
<SafeAreaView style={styles.moreDefault}>
<SearchBar
lightTheme
placeholder="Staff Search"
placeholder={I18n.t('staff.searchStaff')}
onChangeText={this.updateSearch}
onCancel={this.clearSearch}
onClear={this.clearSearch}
value={this.state.search}/>
<FlatList
data={dataSearch}
renderItem={item => <StaffElement item={item}/>}
renderItem={({item}) => <StaffElement item={item} name={item.name} navigation={this.props.navigation}/>}
keyExtractor={item => JSON.stringify(item)}
/>
</SafeAreaView>
);
}
}
app/StudentWeek.js
+5 -6
View File
@@ -17,9 +17,8 @@ import {
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
//import I18n from './i18n';
import I18n from './i18n';
import { url } from './resources/fetchInfo.json'
import LinearGradient from 'react-native-linear-gradient';
class StudentWeek extends React.Component {
@@ -76,14 +75,14 @@ class StudentWeek extends React.Component {
<Image style={{resizeMode: 'cover',borderRadius: 150, height: 300, width: 300, alignSelf: 'center'}} source = {{iconURI}} />
</View>
<Text style={{fontSize:28,marginTop:'5%',textAlign:'center'}}>{this.state.data.name}</Text>
<Text style={{fontSize:20,textAlign:'center', fontWeight: '200'}}>Grade {this.state.data.year}</Text>
<Text style={{fontSize:20,textAlign:'center', fontWeight: '200'}}>{I18n.t('student.Grade')} {this.state.data.year}</Text>
<View>
<View style={{display: 'flex', padding:'2%', borderRadius: 8, marginTop:'5%'}}>
<TouchableOpacity onPress = {this.clickHobby.bind(this)}>
<View style={{display:'flex', flexDirection: 'row'}}>
<Image source = {require('./assets/hobbies.png')} />
<View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}>
<Text style={{fontSize: 20, alignSelf: 'center'}}>Hobbies</Text>
<Text style={{fontSize: 20, alignSelf: 'center'}}>{I18n.t('student.Hobbies')}</Text>
{this.state.hobbyExpanded?<LinearGradient start={{x: 0, y: 0.25}} end={{x: .5, y: 1}} colors={['red', '#FF7373']} style={{borderRadius: 24, alignSelf: 'center'}}><Image source = {require('./assets/collapse.png')} style={{tintColor: 'white'}}/></LinearGradient>:<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2', alignSelf: 'center'}}/>}
</View>
</View>
@@ -93,7 +92,7 @@ class StudentWeek extends React.Component {
<View style={{display: 'flex', borderTopWidth: 1, borderTopColor: '#8D8D8D', shadowColor: 'black', flexDirection: 'row'}}>
<Image source = {require('./assets/achievements.png')} />
<View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}>
<Text style={{fontSize: 20, alignSelf: 'center'}}>Achievements</Text>
<Text style={{fontSize: 20, alignSelf: 'center'}}>{I18n.t('student.Achievements')}</Text>
{this.state.achievementExpanded?<LinearGradient start={{x: 0, y: 0.25}} end={{x: .5, y: 1}} colors={['red', '#FF7373']} style={{borderRadius: 24, alignSelf: 'center'}}><Image source = {require('./assets/collapse.png')} style={{tintColor: 'white'}}/></LinearGradient>:<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2', alignSelf: 'center'}}/>}
</View>
</View>
@@ -103,7 +102,7 @@ class StudentWeek extends React.Component {
<View style={{display: 'flex', borderTopWidth: 1, borderTopColor: '#8D8D8D', shadowColor: 'black', flexDirection: 'row'}}>
<Image source = {require('./assets/message.png')} />
<View style = {{display: 'flex', flexDirection: 'row', width: '85%', justifyContent: 'space-between', paddingHorizontal:'2%',}}>
<Text style={{fontSize: 20, alignSelf: 'center'}}>Messages</Text>
<Text style={{fontSize: 20, alignSelf: 'center'}}>{I18n.t('student.Messages')}</Text>
{this.state.messageExpanded?<LinearGradient start={{x: 0, y: 0.25}} end={{x: .5, y: 1}} colors={['red', '#FF7373']} style={{borderRadius: 24, alignSelf: 'center'}}><Image source = {require('./assets/collapse.png')} style={{tintColor: 'white'}}/></LinearGradient>:<Image source = {require('./assets/expand.png')} style={{tintColor: '#b2b2b2', alignSelf: 'center'}}/>}
</View>
</View>
app/assets/arrow_right.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 361 B

app/assets/calendar.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.1 KiB

app/assets/dep.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.5 KiB

app/assets/desc.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.6 KiB

app/i18n.js
+16 -10
View File
@@ -1,12 +1,18 @@
//'use strict';
//import I18n from 'react-native-i18n';
//import en from './Languages/en'
//import es from './Languages/es'
import I18n from "i18n-js";
import * as RNLocalize from "react-native-localize";
import en from "./Languages/en.js";
import es from "./Languages/es.js";
//I18n.fallbacks = true;
//I18n.translations = {
//en,
//es,
//};
const locales = RNLocalize.getLocales();
//export default I18n;
if (Array.isArray(locales)) {
I18n.locale = locales[0].languageTag;
}
I18n.fallbacks = true;
I18n.translations = {
en,
es
};
export default I18n;
app/styles/liststyles.js
+1 -1
View File
@@ -3,7 +3,7 @@ import {StyleSheet, StatusBar, Dimensions} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0
marginTop: /*StatusBar.currentHeight ||*/ 0
},
item: {
backgroundColor: 'white',