|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+import React, {useState, useEffect} from 'react';
|
|
|
2
|
+import { View, StyleSheet, Text } from 'react-native';
|
|
|
3
|
+import axios from 'axios'
|
|
|
4
|
+import { Table, Row, Rows, TableWrapper, Col } from 'react-native-table-component';
|
|
|
5
|
+import {Picker} from '@react-native-community/picker'
|
|
|
6
|
+import * as SecureStore from 'expo-secure-store';
|
|
|
7
|
+
|
|
|
8
|
+
|
|
|
9
|
+const MyCurriculum = () =>{
|
|
|
10
|
+ const [year, setYear] = useState(2)
|
|
|
11
|
+ const [semester, setSemester] = useState(1)
|
|
|
12
|
+ const [tableHead, setTableHead] = useState(['','Code', 'Title', 'Credits', 'Grade'])
|
|
|
13
|
+ const [tableData, setTableData] = useState([])
|
|
|
14
|
+ const [tableTitle, setTableTitle] = useState([])
|
|
|
15
|
+
|
|
|
16
|
+ const getMyCurriculum = async()=>{
|
|
|
17
|
+ const token = await SecureStore.getItemAsync('token')
|
|
|
18
|
+ let id = await SecureStore.getItemAsync('id')
|
|
|
19
|
+ let user_id = parseInt(id)
|
|
|
20
|
+ let courses = []
|
|
|
21
|
+ let numbers = []
|
|
|
22
|
+
|
|
|
23
|
+ try {
|
|
|
24
|
+ let response = await axios(`http://8ad793de242b.ngrok.io/api/get_all_courses_by_semester?user_id=${user_id}&year=${year}&semestre=${semester}`, {
|
|
|
25
|
+ method: 'GET',
|
|
|
26
|
+ headers: {
|
|
|
27
|
+ 'content-type': 'application/json',
|
|
|
28
|
+ Authorization: `Token ${token}`
|
|
|
29
|
+ },
|
|
|
30
|
+ })
|
|
|
31
|
+ response = response.data.list // javaScript object
|
|
|
32
|
+
|
|
|
33
|
+ // setting a column with numbers
|
|
|
34
|
+ for (let i = 1; i < response.length + 1; i++){
|
|
|
35
|
+ numbers.push(i)
|
|
|
36
|
+ }
|
|
|
37
|
+ setTableTitle(numbers)
|
|
|
38
|
+
|
|
|
39
|
+ // convert javascript array of objects to a javascript 2d array
|
|
|
40
|
+ response.map((data)=>{
|
|
|
41
|
+ let info = [data.code, data.name, data.creditos, data.grade]
|
|
|
42
|
+ courses.push(info)
|
|
|
43
|
+
|
|
|
44
|
+ })
|
|
|
45
|
+ setTableData(courses)
|
|
|
46
|
+ } catch(error){
|
|
|
47
|
+ console.log(error)
|
|
|
48
|
+ }
|
|
|
49
|
+ }
|
|
|
50
|
+
|
|
|
51
|
+ useEffect(()=>{
|
|
|
52
|
+ console.log('dimelo')
|
|
|
53
|
+ getMyCurriculum()
|
|
|
54
|
+ }, [year, semester])
|
|
|
55
|
+
|
|
|
56
|
+
|
|
|
57
|
+ return (
|
|
|
58
|
+ <View style={styles.container}>
|
|
|
59
|
+ <Table borderStyle={{borderWidth: 2, borderColor: '#0f0f0f'}}>
|
|
|
60
|
+ <Row data={tableHead} flexArr={[0.9, 3.5, 10, 2.3, 2.3]} style={styles.head} textStyle={styles.text}/>
|
|
|
61
|
+ <TableWrapper style={styles.wrapper}>
|
|
|
62
|
+ <Col data ={tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.text}/>
|
|
|
63
|
+ <Rows data={tableData} flexArr={[3.5,10,2.3,2.3]} style={styles.row} textStyle={styles.text} />
|
|
|
64
|
+
|
|
|
65
|
+ </TableWrapper>
|
|
|
66
|
+ </Table>
|
|
|
67
|
+ <View style={{flexDirection: 'row'}}>
|
|
|
68
|
+ <View style={{margin: 8}}>
|
|
|
69
|
+ <Text>Year</Text>
|
|
|
70
|
+ <Picker
|
|
|
71
|
+ selectedValue={year}
|
|
|
72
|
+ style={{ width: 50}}
|
|
|
73
|
+ onValueChange={(itemValue, itemIndex) => setYear(itemValue) }>
|
|
|
74
|
+ <Picker.Item label="1" value="1" />
|
|
|
75
|
+ <Picker.Item label="2" value="2" />
|
|
|
76
|
+ <Picker.Item label="3" value="3" />
|
|
|
77
|
+ <Picker.Item label="4" value="4" />
|
|
|
78
|
+ <Picker.Item label="5" value="5" />
|
|
|
79
|
+ <Picker.Item label="6" value="6" />
|
|
|
80
|
+ </Picker>
|
|
|
81
|
+ </View>
|
|
|
82
|
+ <View style={{margin: 8}}>
|
|
|
83
|
+ <Text>Semester</Text>
|
|
|
84
|
+ <Picker
|
|
|
85
|
+ selectedValue={semester}
|
|
|
86
|
+ style={{ width: 50}}
|
|
|
87
|
+ onValueChange={(itemValue, itemIndex) => setSemester(itemValue) }>
|
|
|
88
|
+ <Picker.Item label="1" value="1" />
|
|
|
89
|
+ <Picker.Item label="2" value="2" />
|
|
|
90
|
+ <Picker.Item label="3" value="3" />
|
|
|
91
|
+ </Picker>
|
|
|
92
|
+ </View>
|
|
|
93
|
+ </View>
|
|
|
94
|
+ </View>
|
|
|
95
|
+ );
|
|
|
96
|
+}
|
|
|
97
|
+
|
|
|
98
|
+export default MyCurriculum
|
|
|
99
|
+
|
|
|
100
|
+const styles = StyleSheet.create({
|
|
|
101
|
+ container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
|
|
|
102
|
+ head: { height: 40, backgroundColor: '#e82020' },
|
|
|
103
|
+ wrapper: { flexDirection: 'row' },
|
|
|
104
|
+ title: { flex: 1, backgroundColor: '#e82020' },
|
|
|
105
|
+ row: { height: 28 },
|
|
|
106
|
+ text: { textAlign: 'center', fontSize:10 }
|
|
|
107
|
+ });
|
dmr1725
4 years ago