calendar pg ui

This commit is contained in:
emilyliublair 2021-08-01 22:11:39 -04:00
parent 0f01056de7
commit 38d07e8747
3 changed files with 198 additions and 246 deletions

View File

@ -43,11 +43,10 @@ const Announcement = ({item}) => {
return (
<View style={{borderWidth: 1, borderColor: '#323232', padding: '2%', marginHorizontal: '2%', marginBottom: '2%', borderRadius: 12}}>
<View style = {{display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
{dateInfo!==undefined?<Text style={{fontSize: 12, fontWeight: '200'}}>{dateInfo}</Text>:<></>}
<View style = {{width: '75%'}}>
<View style = {{width: '100%'}}>
<Text style={styles.title}>{item.item.message}</Text>
</View>
{dateInfo!==undefined?<Text style={{fontSize: 12, fontWeight: '200'}}>{dateInfo}</Text>:<></>}
</View>
</View>
)
@ -76,8 +75,8 @@ export const TeacherList = ({route}) => {
else if (itemDate > todayDate && itemDate <= weekFutureDate) {
future.push(route.params.data[i])
}
else if (itemDate >= weekPastDate && itemDate < todayDate) {
//else if (itemDate < todayDate) {
//else if (itemDate >= weekPastDate && itemDate < todayDate) {
else if (itemDate < todayDate) {
past.push(route.params.data[i])
}
}

View File

@ -1,160 +1,3 @@
/*import React, {useState} from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
FlatList,
TouchableOpacity,
Image,
} from 'react-native';
import {
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import LinearGradient from 'react-native-linear-gradient';
//import I18n from './i18n';
import styles from './styles/liststyles'
import { url } from './resources/fetchInfo.json'
const getCurrentDate=()=>{
var date = new Date().getDate();
var month = new Date().getMonth() + 1;
var year = new Date().getFullYear();
return year + ',' + month + ',' + date;
}
const getWeekDate=()=>{
var date = new Date().getDate()-8;
var month = new Date().getMonth()+1;
var year = new Date().getFullYear();
return year + ',' + month + ',' + date;
}
const Event = ({item}) => {
const [visible, setVisible] = useState(false)
const today = new Date(getCurrentDate())
const itemDate = new Date(item.item.date)
const week = new Date(getWeekDate())
const extra = (
<>
<Text style={{fontSize:20, paddingHorizontal: '1%'}}>{item.item.text}</Text>
<View style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<View style={{width: '10%', display: 'flex', justifyContent: 'center'}}>
<Image source={require('./assets/location.png')} style={{height: 22, width: 22}}/>
</View>
<View style={{width: '90%'}}>
<Text style={{fontSize:20}}>{item.item.location}</Text>
</View>
</View>
</>
)
if (itemDate.getTime() >= today.getTime()) {
return (
<TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between'}}>
<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', width: '60%'}}>
<Image source ={require('./assets/calendar.png')} style = {{height: 40, width: 40, marginRight: 15}}/>
<Text style={styles.title3}>{item.item.title}</Text>
</View>
<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center'}}>
<Text style = {{fontSize: 16, alignSelf: 'center'}}>{item.item.date}</Text>
</View>
</View>
{visible?extra:<></>}
</TouchableOpacity>
)
}
else if (itemDate.getTime() >= week.getTime()){
return (
<TouchableOpacity style={{backgroundColor: '#e3e3e3', padding: 15, borderBottomWidth: 1, borderColor: 'black', width: '100%',}} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between'}}>
<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', width: '60%'}}>
<Image source ={require('./assets/calendar.png')} style = {{height: 40, width: 40, marginRight: 15}}/>
<Text style={styles.title3}>{item.item.title}</Text>
</View>
<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center'}}>
<Text style = {{fontSize: 16, alignSelf: 'center'}}>{item.item.date}</Text>
</View>
</View>
{visible?extra:<></>}
</TouchableOpacity>
)
}
else {
return (
null
)
}
}
class Calendar extends React.Component {
constructor(props) {
super(props)
this.state = {
data: []
}
}
componentDidMount() {
this.getData()
this.props.navigation.addListener(
'focus',
() => {
this.getData()
}
);
}
getData() {
fetch(`${url}/api/en/events`,{
headers: {
'Cache-Control': 'no-cache'
} })
.then((response) => {
return response.text();
})
.then((json) => {
const data = JSON.parse(json).data
data.sort((a,b)=>new Date(b.date).getTime()-new Date(a.date).getTime())
console.log(data);
this.setState({data: data});
})
.catch((error) => console.error(error))
}
render() {
return (
<View>
<View style = {{height: 90, display: 'flex'}}>
<LinearGradient
colors={['#f99', 'white']}
style = {{height: '100%', borderBottomColor:'black', borderBottomWidth:0.5, display: 'flex', justifyContent: 'flex-end', paddingBottom: '2.5%'}}
>
<Text style = {{fontSize: 24, fontWeight: 'bold', alignSelf: 'center'}}>Calendar Events</Text>
</LinearGradient>
</View>
<FlatList
data={this.state.data}
renderItem={item=><Event item={item}/>}
keyExtractor={item=>JSON.stringify(item)}
/>
</View>
)
}
}
export default Calendar;*/
import React, {useState} from 'react';
import {
SafeAreaView,
@ -171,71 +14,125 @@ import {
import {
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Icon from 'react-native-vector-icons/AntDesign'
import LinearGradient from 'react-native-linear-gradient';
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import styles from './styles/liststyles'
import { url } from './resources/fetchInfo.json'
import morestyles from './styles/morestyles'
const Stack = createStackNavigator();
const getCurrentDate=()=>{
var date = new Date().getDate();
var month = new Date().getMonth() + 1;
var year = new Date().getFullYear();
return year + '-' + month + '-' + date;
return new Date(year, month, date);
}
export const EventInfo = ({route}) => {
const item = route.params;
const itemDate = new Date(item.date)
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
const months = ['January','February','March','April','May','June','July','August','September','October','November','December',]
const dayOfWeek = days[itemDate.getDay()]
const month = months[itemDate.getMonth()]
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>
<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>
<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>
<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>
<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>
)
}
const Event = (props) => {
const item = props.item
const date = item.item.date.split('-')
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}>
<View style = {[styles.container2, {justifyContent: 'space-between'}]}>
<View style={{display: 'flex', flexDirection: 'row'}}>
<Ionicons name='calendar' size={32} color={'#323232'} style={{marginRight: 15}}/>
<View style = {{display: 'flex', alignContent: 'center', width: '80%'}}>
<Text style={styles.title}>{item.item.title}</Text>
<View style={{paddingBottom: '2%'}}><Text style = {{fontSize: 12, fontWeight: '200'}}>{`${date[1]}/${date[2]}/${date[0]}`}</Text></View>
</View>
</View>
<Image source = {require('./assets/forward.png')} style={{tintColor: '#b2b2b2'}}/>
</View>
</TouchableOpacity>
</View>
)
}
const Event = ({item}) => {
const [visible, setVisible] = useState(false)
const date = item.item.date.split('-')
const today = new Date(getCurrentDate())
const week = new Date().setDate(new Date().getDate() - 8)
const itemDate = new Date(item.item.date)
const background = (<LinearGradient
colors={['#f99', 'white']}
style = {{flex:1,borderBottomColor:'black',borderBottomWidth:0.5}}
/>)
const extra = (
<>
<Text style={{fontSize:20}}>{item.item.text}</Text>
<Text style={{fontSize:20}}>Location: {item.item.location}</Text>
</>
)
if (itemDate >= today) {
function CalendarEvents () {
return (
<NavigationContainer independent={true}>
<Stack.Navigator>
<Stack.Screen
name = "Calendar"
component = {Calendar}
options={({
headerShown: true,
headerTitleStyle:morestyles.headerTitle,
headerBackground: ()=>background,
headerleft: null,
headerTitleAlign: 'center'
})}
/>
return (
<TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between'}}>
<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', width: '60%'}}>
<Image source ={require('./assets/calendar.png')} style = {{height: 40, width: 40, marginRight: 15}}/>
<Text style={styles.title3}>{item.item.title}</Text>
</View>
<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center'}}>
<Text style = {{fontSize: 16, alignSelf: 'center'}}>{`${date[1]}/${date[2]}/${date[0]}`}</Text>
</View>
</View>
{visible?extra:<></>}
</TouchableOpacity>
<Stack.Screen
name = "EventInfo"
component = {EventInfo}
options={({route})=>({
title:route.params.title,
headerTitleStyle:morestyles.headerTitle,
headerBackground: ()=>background,
headerleft: null,
headerTitleAlign: 'center'
})}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
else if (itemDate >= week){
return (
<TouchableOpacity style={{backgroundColor: '#e3e3e3', padding: 15, borderBottomWidth: 1, borderColor: 'black', width: '100%',}} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between'}}>
<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', width: '60%'}}>
<Image source ={require('./assets/calendar.png')} style = {{height: 40, width: 40, marginRight: 15}}/>
<Text style={styles.title3}>{item.item.title}</Text>
</View>
<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center'}}>
<Text style = {{fontSize: 16, alignSelf: 'center'}}>{`${date[1]}/${date[2]}/${date[0]}`}</Text>
</View>
</View>
{visible?extra:<></>}
</TouchableOpacity>
)
}
else {
return (
null
)
}
}
class Calendar extends React.Component {
@ -275,25 +172,73 @@ class Calendar extends React.Component {
}
render() {
return (
<View>
<View style = {{height: global.headerHeight, display: 'flex'}}>
<LinearGradient
colors={['#f99', 'white']}
style = {{height: '100%', borderBottomColor:'black', borderBottomWidth:0.5, display: 'flex', justifyContent: 'flex-end', paddingBottom: '2.5%'}}
>
<Text style = {{fontSize: 24, fontWeight: 'bold', alignSelf: 'center'}}>Calendar Events</Text>
</LinearGradient>
const todayDate = getCurrentDate()
const weekPastDate = new Date();
var pastDate = weekPastDate.getDate() - 7;
weekPastDate.setDate(pastDate);
const weekFutureDate = new Date();
var futureDate = weekFutureDate.getDate() + 7;
weekFutureDate.setDate(futureDate);
const today = []
const past = []
const future = []
var todayBoolean = true
var pastBoolean = true
var futureBoolean = true
</View>
for (var i =0; i < this.state.data.length; i++) {
const itemDate = new Date(this.state.data[i].date)
if (itemDate == todayDate) {
today.push(this.state.data[i])
}
else if (itemDate > todayDate && itemDate <= weekFutureDate) {
future.push(this.state.data[i])
}
//else if (itemDate >= weekPastDate && itemDate < todayDate) {
else if (itemDate < todayDate) {
past.push(this.state.data[i])
}
}
if (today.length === 0) todayBoolean = false
if (past.length === 0) pastBoolean = false
if (future.length === 0) futureBoolean = false
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={this.state.data}
renderItem={item=><Event item={item}/>}
data={today}
renderItem={item=><Event item={item} name={item.name} navigation={this.props.navigation}/>}
keyExtractor={item=>JSON.stringify(item)}
/>
</View>
</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>:<></>}
</ScrollView>
)
}
}
export default Calendar;
export default CalendarEvents;

View File

@ -92,7 +92,8 @@ class More extends React.Component {
options={{
title:"More",
headerTitleStyle:styles.headerTitle,
headerBackground: ()=>background
headerBackground: ()=>background,
headerTitleAlign: 'center'
}}
/>
<Stack.Screen
@ -102,7 +103,8 @@ class More extends React.Component {
title:"Announcements",
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerLeft:null,
headerBackground: ()=>background
headerBackground: ()=>background,
headerTitleAlign: 'center'
}}
/>
<Stack.Screen
@ -110,9 +112,10 @@ class More extends React.Component {
component={Resources}
options={{
title:"Resources",
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerTitleStyle:styles.headerTitle,
headerLeft:null,
headerBackground: ()=>background
headerBackground: ()=>background,
headerTitleAlign: 'center'
}}
/>
<Stack.Screen
@ -120,9 +123,10 @@ class More extends React.Component {
component={StudentWeek}
options={{
title:"Student of the Week",
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerTitleStyle:styles.headerTitle,
headerLeft:null,
headerBackground: ()=>background
headerBackground: ()=>background,
headerTitleAlign: 'center'
}}
/>
<Stack.Screen
@ -130,9 +134,10 @@ class More extends React.Component {
component={LunchEvents}
options={{
title:"Lunch Events",
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerTitleStyle:styles.headerTitle,
headerLeft:null,
headerBackground: ()=>background
headerBackground: ()=>background,
headerTitleAlign: 'center'
}}
/>
<Stack.Screen
@ -140,9 +145,10 @@ class More extends React.Component {
component={SSLOps}
options={{
title:"SSL Opportunities",
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerTitleStyle:styles.headerTitle,
headerLeft:null,
headerBackground: ()=>background
headerBackground: ()=>background,
headerTitleAlign: 'center'
}}
/>
<Stack.Screen
@ -150,9 +156,10 @@ class More extends React.Component {
component={ChallengeWeek}
options={{
title:"Challenge of the Week",
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerTitleStyle:styles.headerTitle,
headerLeft:null,
headerBackground: ()=>background
headerBackground: ()=>background,
headerTitleAlign: 'center'
}}
/>
<Stack.Screen
@ -160,9 +167,10 @@ class More extends React.Component {
component={Poll}
options={{
title:"Polls",
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerTitleStyle:styles.headerTitle,
headerLeft:null,
headerBackground: ()=>background
headerBackground: ()=>background,
headerTitleAlign: 'center'
}}
/>
<Stack.Screen
@ -173,7 +181,7 @@ class More extends React.Component {
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerLeft:null,
headerBackground: ()=>background,
headerShown:false
headerShown:false,
}}
/>
<Stack.Screen