1+ import * as Surplus from 'surplus' ;
2+ import * as S from 's-js' ;
3+ import { App } from './controller' ;
4+
5+ Surplus ;
6+
7+ const USE_NON_KEYED_TBODY = location . search . indexOf ( 'keyed' ) === - 1 ;
8+
9+ type RowTr = HTMLTableRowElement & { _id : HTMLTableCellElement , _label : HTMLAnchorElement } ;
10+
11+ export let AppView = ( app : App ) =>
12+ < div className = "container" >
13+ < div className = "jumbotron" >
14+ < div className = "row" >
15+ < div className = "col-md-6" >
16+ < h1 > Surplus v0.4.0</ h1 >
17+ </ div >
18+ < div className = "col-md-6" >
19+ < div className = "row" >
20+ < div className = "col-sm-6 smallpad" >
21+ < button type = "button" className = "btn btn-primary btn-block" id = "run" onClick = { e => app . run ( ) } > Create 1,000 rows</ button >
22+ </ div >
23+ < div className = "col-sm-6 smallpad" >
24+ < button type = "button" className = "btn btn-primary btn-block" id = "runlots" onClick = { e => app . runLots ( ) } > Create 10,000 rows</ button >
25+ </ div >
26+ < div className = "col-sm-6 smallpad" >
27+ < button type = "button" className = "btn btn-primary btn-block" id = "add" onClick = { e => app . add ( ) } > Append 1,000 rows</ button >
28+ </ div >
29+ < div className = "col-sm-6 smallpad" >
30+ < button type = "button" className = "btn btn-primary btn-block" id = "update" onClick = { e => app . update ( ) } > Update every 10th row</ button >
31+ </ div >
32+ < div className = "col-sm-6 smallpad" >
33+ < button type = "button" className = "btn btn-primary btn-block" id = "clear" onClick = { e => app . clear ( ) } > Clear</ button >
34+ </ div >
35+ < div className = "col-sm-6 smallpad" >
36+ < button type = "button" className = "btn btn-primary btn-block" id = "swaprows" onClick = { e => app . swapRows ( ) } > Swap Rows</ button >
37+ </ div >
38+ </ div >
39+ </ div >
40+ </ div >
41+ </ div >
42+ < table className = "table table-hover table-striped test-data"
43+ onClick = { ( e : any ) => e . target . matches ( '.delete' ) ? app . delete ( rowId ( e ) ) : app . select ( rowId ( e ) ) } >
44+ { USE_NON_KEYED_TBODY ? TBodyNonKeyed ( app ) : TBodyKeyed ( app ) }
45+ </ table >
46+ < span className = "preloadicon glyphicon glyphicon-remove" > </ span >
47+ </ div > ,
48+ rowId = ( { target : el } : { target : HTMLElement } ) => {
49+ while ( el . tagName !== 'TR' ) el = el . parentElement ! ;
50+ return + el . childNodes [ 0 ] . textContent ! ;
51+ } ,
52+ TBodyKeyed = ( app : App ) =>
53+ < tbody >
54+ { app . store . data . mapSample ( row =>
55+ < tr className = { row . id === app . store . selected ( ) ? 'danger' : '' } >
56+ < td className = "col-md-1" innerText = { row . id } > </ td >
57+ < td className = "col-md-4" >
58+ < a innerText = { row . label ( ) } > </ a >
59+ </ td >
60+ < td className = "col-md-1" > < a > < span className = "glyphicon glyphicon-remove delete" > </ span > </ a > </ td >
61+ < td className = "col-md-6" > </ td >
62+ </ tr >
63+ ) }
64+ </ tbody > ,
65+ TBodyNonKeyed = ( app : App ) => {
66+ var tbody = < tbody > </ tbody > ,
67+ trs = [ ] as RowTr [ ] ;
68+
69+ S ( ( ) => { // keeps trs in sync with data
70+ let rows = app . store . data ( ) ,
71+ selectedId = app . store . selected ( ) ;
72+
73+ if ( rows . length === 0 ) {
74+ tbody . textContent = '' ;
75+ trs = [ ] ;
76+ } else for ( let i = trs . length - 1 ; i >= rows . length ; i -- ) {
77+ tbody . removeChild ( trs [ i ] ) ;
78+ trs . pop ( ) ;
79+ }
80+
81+ for ( let i = 0 ; i < rows . length ; i ++ ) {
82+ var row = rows [ i ] ,
83+ tr : RowTr | undefined = i < trs . length ? trs [ i ] : tbody . appendChild (
84+ ( < tr ref = { tr } >
85+ < td ref = { tr ! . _id } className = "col-md-1" > </ td >
86+ < td className = "col-md-4" >
87+ < a ref = { tr ! . _label } className = "select" > </ a >
88+ </ td >
89+ < td className = "col-md-1" > < a className = "delete" > < span className = "glyphicon glyphicon-remove delete" > </ span > </ a > </ td >
90+ < td className = "col-md-6" > </ td >
91+ </ tr > as RowTr ,
92+ trs . push ( tr ! ) ,
93+ tr ! ) ) ;
94+
95+ tr . className = row . id === selectedId ? 'danger' : '' ;
96+ tr . _id . innerText = row . id + '' ;
97+ tr . _label . innerText = row . label ( ) ;
98+ }
99+ } ) ;
100+
101+ return tbody ;
102+ } ;
0 commit comments