Skip to content
Snippets Groups Projects
Commit 67a6507b authored by Fabrice Salvaire's avatar Fabrice Salvaire
Browse files

react-table test

parent 02d3019a
No related branches found
No related tags found
No related merge requests found
......@@ -4,6 +4,7 @@
{% block head %}
<link rel="stylesheet" href={{ static('css-ext/bootstrap-slider.min.css') }}>
<link rel="stylesheet" href={{ static('css-ext/react-table.css') }}>
<link rel="stylesheet" href={{ static('css/main.css') }}>
{% endblock %}
......@@ -12,14 +13,14 @@
{# <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> #}
{# Fixme: else React is not defined #}
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
{# <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> #}
{# <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> #}
{# <script type="text/javascript" src={{ static('js-ext/react.development.js') }}></script> #}
{# <script type="text/javascript" src={{ static('js-ext/react-dom.development.js') }}></script> #}
{# <script type="text/javascript" src={{ static('js-ext/react.production.min.js') }}></script> #}
{# <script type="text/javascript" src={{ static('js-ext/react-dom.production.min.js') }}></script> #}
{# <script type="text/javascript" src={{ static('js-ext/react.production.min.js') }}></script> #}
{# <script type="text/javascript" src={{ static('js-ext/react-dom.production.min.js') }}></script> #}
{# <script src={{ static('js-ext/bootstrap-slider.min.js') }}></script> #}
{# <script src={{ static('js-ext/react-bootstrap-slider.js') }}></script> #}
......@@ -44,23 +45,24 @@
<div id="grade-filter" class="mx-auto slider-wrapper"></div>
<div id="inclination-filter" class=""></div>
<div id="profile-filter" class=""></div>
<div class="route-table-wrapper">
<table class="table">
<thead>
<tr>
<th scope="col">{{ _('Line Number') }}</th>
<th scope="col">{{ _('Sector') }}</th>
<th scope="col">{{ _('Profile') }}</th>
<th scope="col">{{ _('Inclination') }}</th>
<th scope="col">{{ _('Grade') }}</th>
<th scope="col">{{ _('Colour') }}</th>
<th scope="col">{{ _('Name') }}</th>
<th scope="col">{{ _('Comment') }}</th>
<th scope="col">{{ _('Opener') }}</th>
<th scope="col">{{ _('Opening date') }}</th>
</tr>
</thead>
<tbody id="route-table"></tbody>
</table>
</div>
{# <div class="route-table-wrapper"> #}
{# <table class="table"> #}
{# <thead> #}
{# <tr> #}
{# <th scope="col">{{ _('Line Number') }}</th> #}
{# <th scope="col">{{ _('Sector') }}</th> #}
{# <th scope="col">{{ _('Profile') }}</th> #}
{# <th scope="col">{{ _('Inclination') }}</th> #}
{# <th scope="col">{{ _('Grade') }}</th> #}
{# <th scope="col">{{ _('Colour') }}</th> #}
{# <th scope="col">{{ _('Name') }}</th> #}
{# <th scope="col">{{ _('Comment') }}</th> #}
{# <th scope="col">{{ _('Opener') }}</th> #}
{# <th scope="col">{{ _('Opening date') }}</th> #}
{# </tr> #}
{# </thead> #}
{# <tbody id="route-table"></tbody> #}
{# </table> #}
{# </div> #}
<div id="route-table"></div>
{% endblock %}
......@@ -135,14 +135,14 @@ class PropertyFilter extends React.Component {
const buttons = this._properties.map(property => {
var class_name = 'btn btn-sm btn-' + (toggled.has(property) ? 'success' : 'danger');
return (
<button Type="button" className={class_name} onClick={() => this._on_click(property)}>{property}</button>
<button key={property} type="button" className={class_name} onClick={() => this._on_click(property)}>{property}</button>
);
});
return (
<div className="btn-group" Role="group" Aria-Label="">
<button Type="button" className="btn btn-secondary btn-sm" onClick={this._on_click_all}><i className="fas fa-check"></i></button>
<button Type="button" className="btn btn-secondary btn-sm" onClick={this._on_click_inverse}><i className="fas fa-retweet"></i></button>
<button Type="button" className="btn btn-secondary btn-sm" onClick={this._on_click_clear}><i className="fas fa-trash-alt"></i></button>
<div className="btn-group" role="group" aria-label="">
<button key='all' type="button" className="btn btn-secondary btn-sm" onClick={this._on_click_all}><i className="fas fa-check"></i></button>
<button key='inverse' type="button" className="btn btn-secondary btn-sm" onClick={this._on_click_inverse}><i className="fas fa-retweet"></i></button>
<button key='clear' type="button" className="btn btn-secondary btn-sm" onClick={this._on_click_clear}><i className="fas fa-trash-alt"></i></button>
{buttons}
</div>
);
......
......@@ -31,6 +31,21 @@ import { RouteTable } from './route-table.jsx';
/**************************************************************************************************/
// import { injectIntl, defineMessages } from 'react-intl';
// const messages = defineMessages({
// widget1Header: {
// id: 'Widgets.widget1.header',
// defaultMessage: 'Creative header',
// },
// widget1Body: {
// id: 'Widgets.widget1.body',
// defaultMessage: 'Mark todays date: {date}',
// },
// });
/**************************************************************************************************/
var route_model = new RouteModel('/api/routes/?limit=1000');
var route_table = ReactDOM.render(
......
......@@ -25,9 +25,14 @@ import ReactDOM from 'react-dom';
import es6BindAll from 'es6bindall';
import ReactBootstrapSlider from 'react-bootstrap-slider';
// import ReactBootstrapSlider from '../../externals/react-bootstrap-slider.jsx';
import ReactTable from 'react-table';
import { FrenchGrade } from '../../tools/grade.js';
import { RouteRow } from './route-table-tpl.jsx';
import { hold_colours } from './hold-colour.js';
/**************************************************************************************************/
export
......@@ -58,9 +63,76 @@ class RouteTable extends React.Component {
return <div>Loading...</div>;
else
return (
<React.Fragment>
{routes.map(route => (<RouteRow key={route.id} route={route} />))}
</React.Fragment>
<ReactTable
data={routes}
columns={[
{
Header: 'Line Number',
accessor: 'line_number',
},
{
Header: 'Sector',
id: 'sector',
accessor: route => route.line.sector,
},
{
Header: 'Profile',
id: 'profile',
accessor: route => route.line.profile,
},
{
Header: 'Inclination',
id: 'inclination',
accessor: route => route.line.inclination,
},
{
Header: 'Grade',
accessor: 'grade',
sortMethod: (a, b) => {
if (!a || a == 'ENF')
a = '4a';
if (!b || b == 'ENF')
b = '4a';
a = new FrenchGrade(a).float;
b = new FrenchGrade(b).float;
if (a > b)
return 1;
if (a < b)
return -1;
return 0;
},
},
{
Header: 'Name',
accessor: 'name',
},
{
Header: 'Colour',
accessor: 'colour',
Cell: row => {
var class_name = 'hold-colour hold-colour-' + hold_colours[row.value];
return <div className={class_name}></div>;
},
},
{
Header: 'Comment',
accessor: 'comment',
},
{
Header: 'Opener',
accessor: 'opener',
},
{
Header: 'Opening Date',
accessor: 'opening_date',
}
]}
defaultPageSize={10}
className="-striped -highlight"
/>
// <React.Fragment>
// {routes.map(route => (<RouteRow key={route.id} route={route} />))}
// </React.Fragment>
);
}
}
../../static-src/node_modules/react-table/react-table.css
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment