mirror of
https://github.com/Blair-SGA-Dev-Team/blazerapp.git
synced 2024-11-21 12:31:16 -05:00
sotw ui
This commit is contained in:
parent
388fcff001
commit
0d1e240b20
|
@ -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
BIN
app/assets/achievements.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.1 KiB |
BIN
app/assets/collapse.png
Normal file
BIN
app/assets/collapse.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 183 B |
BIN
app/assets/expand.png
Normal file
BIN
app/assets/expand.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 186 B |
BIN
app/assets/hobbies.png
Normal file
BIN
app/assets/hobbies.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.3 KiB |
BIN
app/assets/message.png
Normal file
BIN
app/assets/message.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.1 KiB |
Loading…
Reference in New Issue
Block a user