emh/blazerapp
1
0
Fork 0
mirror of https://github.com/Blair-SGA-Dev-Team/blazerapp.git synced 2024-12-22 06:22:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

sotw ui

Browse Source
This commit is contained in:
emilyliublair 2021-07-29 11:26:38 -04:00
parent 388fcff001
commit 0d1e240b20
6 changed files with 65 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
app/StudentWeek.js
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import {
SafeAreaView,
StyleSheet,
@ -7,6 +7,7 @@ import {
Text,
StatusBar,
Image,
TouchableOpacity
} from 'react-native';
import {
@ -23,9 +24,29 @@ class StudentWeek extends React.Component {
constructor(props) {
super(props)
this.state = {
isLoading: true
isLoading: true,
hobbyExpanded: false,
achievementExpanded: false,
messageExpanded: false,
hobbyArrow:require('./assets/expand.png'),
achievementArrow:require('./assets/expand.png'),
messageArrow:require('./assets/expand.png')
}
}
clickHobby() {
if (!this.state.hobbyExpanded) this.setState({hobbyExpanded:true, hobbyArrow: require('./assets/collapse.png')});
else this.setState({hobbyExpanded: false,hobbyArrow:require('./assets/expand.png')});
}
clickAchievements() {
if (!this.state.achievementExpanded) this.setState({achievementExpanded:true, achievementArrow: require('./assets/collapse.png')});
else this.setState({achievementExpanded: false, achievementArrow:require('./assets/expand.png')});
}
clickMessages() {
if (!this.state.messageExpanded) this.setState({messageExpanded:true, messageArrow: require('./assets/collapse.png')});
else this.setState({messageExpanded: false, messageArrow:require('./assets/expand.png')});
}
componentDidMount() {
fetch(`${url}/api/en/student`,{
@ -44,35 +65,53 @@ class StudentWeek extends React.Component {
return <View/>
} else {
const iconURI = this.state.data.icon !== undefined?`data:image/png;charset=utf-8;base64,${this.state.data.icon}`:'';
const hobbyText = (<Text style = {{marginLeft: 50, paddingHorizontal: '2%', paddingBottom: '2%'}}>{this.state.data.hobbies}</Text>)
const achievementText = (<Text style = {{marginLeft: 50, paddingHorizontal: '2%', paddingBottom: '2%'}}>{this.state.data.achievements}</Text>)
const messageText = (<Text style = {{marginLeft: 50, paddingHorizontal: '2%', paddingBottom: '2%'}}>{this.state.data.messages}</Text>)
return (
<View style={{paddingTop:'5%',paddingHorizontal:'10%', backgroundColor: 'white', height: '100%'}}>
<View style = {{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
<View>
<Text style={{fontSize:28,marginBottom:'10%',textAlign:'center'}}>{this.state.data.name}</Text>
<Text style={{fontSize:20}}>{'\t'}Grade: {this.state.data.year}</Text>
</View>
<View style = {{height: 150, width: 150}}>
<Image style = {{height: '100%', width:'100%', borderRadius: 6}}source={{iconURI}} />
<ScrollView style={{paddingTop:'5%',paddingHorizontal:'10%', backgroundColor: 'white', height: '100%'}}>
<View style={{backgroundColor: 'white',borderRadius: 150, height: 300, width: 300, alignSelf: 'center', shadowColor: 'red', shadowOffset: {width: 0, height: 2}, shadowOpacity: 0.5, shadowRadius: 7}}>
<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>
<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>
<Image source = {this.state.hobbyArrow} style={{alignSelf:'center'}}/>
</View>
</View>
{this.state.hobbyExpanded?hobbyText:<></>}
</TouchableOpacity>
<TouchableOpacity onPress = {this.clickAchievements.bind(this)}>
<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>
<Image source = {this.state.achievementArrow} style={{alignSelf:'center'}}/>
</View>
</View>
{this.state.achievementExpanded?achievementText:<></>}
</TouchableOpacity>
<TouchableOpacity onPress = {this.clickMessages.bind(this)}>
<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>
<Image source = {this.state.messageArrow} style={{alignSelf:'center'}}/>
</View>
</View>
{this.state.messageExpanded?messageText:<></>}
</TouchableOpacity>
</View>
</View>
<View style = {{paddingTop:'10%', height: '55%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
<View>
<Text style={{fontSize: 20, fontWeight: 'bold'}}>{"\n"}Hobbies:</Text>
<Text style={{fontSize: 20}}>{'\t'}{this.state.data.hobbies}</Text>
</View>
<View>
<Text style={{fontSize: 20, fontWeight: 'bold'}}>{"\n"}Achievements: </Text>
<Text style={{fontSize: 20}}>{'\t'}{this.state.data.achievements}</Text>
</View>
<View>
<Text style={{fontSize: 20, fontWeight: 'bold'}}>{"\n"}Messages:</Text>
<Text style={{fontSize: 20}}>{'\t'}{this.state.data.messages}</Text>
</View>
</View>
</View>
</ScrollView>
)
}
}

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 183 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 186 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB