import React from 'react';
import './tracklist.scss'




class Tracklist extends React.Component
{
    render()
    {
        
        return(
                <div className="tracklist">
                    <table>
                        <thead>
                        <tr className='TracklistHeader'>
                            <th className='TracklistHeaderCell'>Name</th>
                            <th className='TracklistHeaderCell'>Course</th>
                            <th className='TracklistHeaderCell'>Speed</th>
                            <th className='TracklistHeaderCell'>Lat</th>
                            <th className='TracklistHeaderCell'>Lon</th>
                            <th className='TracklistHeaderCell'>Kind</th>
                            <th className='TracklistHeaderCell'>Side</th>

                        </tr>
                        </thead>
                        <tbody>
                        { this.props.entities.map((val,index) => {
                            return (
                                <tr key={index}>
                                    <td >{val.Name}</td>
                                    <td className='TracklistCell'>{val.Course}</td>
                                    <td className='TracklistCell'>{val.Speed}</td>
                                    <td className='TracklistCell'>{val.Position[0]}</td>
                                    <td className='TracklistCell'>{val.Position[1]}</td>
                                    <td className='TracklistCell'>{val.Type}</td>
                                    <td className='TracklistCell'>{val.Side}</td>

                                </tr>
                            )
                        })}
                        </tbody>
                    </table>
                </div>
        );
    }

}

export default Tracklist;