Fakultas Ilmu Komputer UI

Commit 9c6a4670 authored by Farhan Farasdak's avatar Farhan Farasdak
Browse files

[#33] [#140655219] Transcript JS

parent 136f3bab
import React from 'react';
import CourseList from './components/CourseList';
export default class TranscriptPage extends React.Component {
constructor(props) {
super(props);
/* istanbul ignore next */
this.state = {
data: {"transcript":[{
"url": "http://api.cs.ui.ac.id/siakngcs/riwayat-mahasiswa/99731/",
"npm": "1406622616",
"kelas": {
"url": "http://api.cs.ui.ac.id/siakngcs/kelas/473569/",
"kd_kls": "473569",
"nm_kls": "MD 1 - B",
"nm_mk_cl": {
"url": "http://api.cs.ui.ac.id/siakngcs/matakuliah/817/",
"kd_mk": "CSF1600100",
"nm_mk": "Matematika Diskret 1",
"kd_org": "06.00.12.01",
"kd_kur": "06.00.12.01-2012",
"jml_sks": 3
},
"kd_kur_cl": "06.00.12.01-2012",
"kd_mk_cl": "CSF1600100",
"periode": {
"url": "http://api.cs.ui.ac.id/siakngcs/periode/25/",
"term": 1,
"tahun": 2014
},
"pengajar": [
{
"url":
"http://api.cs.ui.ac.id/siakngcs/dosen/196111251992031001/",
"nomor": "196111251992031001",
"nama": "Prof. Drs. T. Basaruddin M.Sc., Ph.D",
"id_skema": 1,
"nm_skema": "Skema Inti",
"maks_sks": 8
}
]
},
"kd_kls": "473569",
"kd_kur": "06.00.12.01-2012",
"kd_mk": "CSF1600100",
"kd_org": "01.00.12.01",
"term": 1,
"tahun": 2014,
"nilai": "A"
}],"name":"Si jagoan neon" }};//ambil dari database
}
render() {
return (
<CourseList data={this.state.data.transcript} name={this.state.data.name}/>
);
}
}
import React from 'react';
import { Table } from 'semantic-ui-react';
export default class Course extends React.Component {
static propTypes = {
courseName: React.PropTypes.string.isRequired,
grade: React.PropTypes.string.isRequired,
};
render() {
return (
<Table.Row>
<Table.Cell>{this.props.courseName}</Table.Cell>
<Table.Cell>{this.props.grade}</Table.Cell>
</Table.Row>
);
}
}
import React from 'react';
import { Grid, Segment, Table } from 'semantic-ui-react';
import Course from './Course';
export default class CourseList extends React.Component {
static propTypes = {
data: React.PropTypes.array.isRequired,
name: React.PropTypes.array.isRequired,
};
constructor(props) {
super(props);
/* istanbul ignore next */
this.state = { course: this.props.data };
}
generateCourse() {
return this.state.course.map((course, index) =>
<Course
key={index}
courseName={course.kelas.nm_kls}
grade={course.nilai}
/>,
);
}
render = () => (
<Grid.Column centered>
<Segment>
<h2>Nama : {this.props.name}</h2>
<Table unstackable>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Mata Kuliah</Table.HeaderCell>
<Table.HeaderCell>Nilai</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{ this.generateCourse() }
</Table.Body>
</Table>
</Segment>
</Grid.Column>
);
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment