# HG changeset patch # User casties # Date 1453832363 -3600 # Node ID 0795207f3b904c3270a37c9235fe29079b061e29 # Parent f6f4177d0a814441d49acdc727f4e7f21d187e54 ng2-table now with pager, sorting and styling. diff -r f6f4177d0a81 -r 0795207f3b90 app/query-app.component.ts --- a/app/query-app.component.ts Tue Jan 26 16:54:38 2016 +0100 +++ b/app/query-app.component.ts Tue Jan 26 19:19:23 2016 +0100 @@ -14,6 +14,7 @@ @Component({ selector: 'query-app', template: ` +

ISMI-Lab Query Builder

Select a query step:
add step
- + + + `, directives: [QuerySelectComponent, QueryResultTableComponent], providers: [QueryService, NormalizationService, HTTP_PROVIDERS] diff -r f6f4177d0a81 -r 0795207f3b90 app/query-result-table.component.ts --- a/app/query-result-table.component.ts Tue Jan 26 16:54:38 2016 +0100 +++ b/app/query-result-table.component.ts Tue Jan 26 19:19:23 2016 +0100 @@ -1,6 +1,7 @@ import {Component, OnInit} from 'angular2/core'; import {NG_TABLE_DIRECTIVES} from 'ng2-table/ng2-table'; +import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap'; import {QueryState} from './query-state'; @@ -9,23 +10,52 @@ template: ` 
{{queryState.resultCypherQuery}}
-

Query results ({{queryState.resultInfo}}):

- +

Query result

+ 
{{queryState.resultInfo}}: page {{page}} of {{numPages}}
+ + +
`, - inputs: ['queryState'], - directives: [NG_TABLE_DIRECTIVES] + inputs: ['queryState', 'data', 'columns'], + directives: [NG_TABLE_DIRECTIVES, PAGINATION_DIRECTIVES] }) export class QueryResultTableComponent implements OnInit { public queryState: QueryState; + public data: Array; + public columns: Array; + + public rows: Array; + + public page: number = 1; + public itemsPerPage: number = 10; + public maxSize: number = 5; + public numPages: number = 1; + public length: number = 0; + + public config: any = { + paging: true, + sorting: {'columns': this.columns}, + //filtering: {filterString: '', columnName: 'position'} + }; ngOnChanges() { console.debug("result table changed! queryState=", this.queryState?this.queryState.resultColumns:''); + this.config.sorting = this.queryState.resultColumns; } ngOnInit() { @@ -36,4 +66,61 @@ console.debug("result table init!"); } + changePage(page:any, data:Array = this.data):Array { + let start = (page.page - 1) * page.itemsPerPage; + let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length; + return data.slice(start, end); + } + + changeSort(data: any, config: any) { + if (!config.sorting) { + return data; + } + let columns = this.columns.filter(c => c.sort); + + // simple sorting + return data.sort((previous: any, current: any) => { + //let columns = this.config.sorting.columns || []; + for (let i = 0; i < columns.length; i++) { + let sort = columns[i].sort; + if (!sort) continue; + let columnName = columns[i].name; + + if (previous[columnName] > current[columnName]) { + return sort === 'desc' ? -1 : 1; + } else if (previous[columnName] < current[columnName]) { + return sort === 'asc' ? -1 : 1; + } + } + return 0; + }); + } + + changeFilter(data: any, config: any): any { + if (!config.filtering) { + return data; + } + + let filteredData: Array = data.filter((item: any) => + item[config.filtering.columnName].match(this.config.filtering.filterString)); + + return filteredData; + } + + onChangeTable(config, page: any = config.paging) { + //console.debug("onChangeTable config=", config); + if (config.filtering) { + Object.assign(this.config.filtering, config.filtering); + } + if (config.sorting) { + Object.assign(this.config.sorting, config.sorting); + } + + let filteredData = this.changeFilter(this.data, this.config); + let sortedData = this.changeSort(filteredData, this.config); + + this.rows = (page && config.paging) ? this.changePage(page, sortedData) : sortedData; + this.length = sortedData.length; + } + } diff -r f6f4177d0a81 -r 0795207f3b90 app/query.service.ts --- a/app/query.service.ts Tue Jan 26 16:54:38 2016 +0100 +++ b/app/query.service.ts Tue Jan 26 19:19:23 2016 +0100 @@ -7,6 +7,7 @@ import {QueryMode, QUERY_MODES} from './query-mode'; import {QueryState} from './query-state'; import {QueryStep} from './query-step'; +import {ResultColumn} from './result-column'; @Injectable() export class QueryService { @@ -280,14 +281,14 @@ getColumns(attributes: string[]) { var cols = []; if (attributes.indexOf('ismi_id') > -1) { - cols.push({'name': 'ismi_id', 'title': 'ISMI ID'}); + cols.push(new ResultColumn('ismi_id', 'ISMI ID')); } if (attributes.indexOf('label') > -1) { - cols.push({'name': 'label', 'title': 'Label'}); + cols.push(new ResultColumn('label', 'Label', 'asc')); } attributes.forEach((att) => { if (att != 'ismi_id' && att != 'label' && att != 'type' && att[0] != '_') { - cols.push({'name': att, 'title': att}); + cols.push(new ResultColumn(att, att)); } }); diff -r f6f4177d0a81 -r 0795207f3b90 app/result-column.ts --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/app/result-column.ts Tue Jan 26 19:19:23 2016 +0100 @@ -0,0 +1,11 @@ +export class ResultColumn { + public name: string; + public title: string; + public sort: any; + + constructor (name: string, title: string, sort='') { + this.name = name; + this.title = title; + this.sort = sort; + } +} \ No newline at end of file diff -r f6f4177d0a81 -r 0795207f3b90 assets/css/glyphicons.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/assets/css/glyphicons.css Tue Jan 26 19:19:23 2016 +0100 @@ -0,0 +1,805 @@ +@font-face { + font-family: 'Glyphicons Halflings'; + + src: url('../fonts/glyphicons-halflings-regular.eot'); + src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); +} +.glyphicon { + position: relative; + top: 1px; + display: inline-block; + font-family: 'Glyphicons Halflings'; + font-style: normal; + font-weight: normal; + line-height: 1; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.glyphicon-asterisk:before { + content: "\2a"; +} +.glyphicon-plus:before { + content: "\2b"; +} +.glyphicon-euro:before, +.glyphicon-eur:before { + content: "\20ac"; +} +.glyphicon-minus:before { + content: "\2212"; +} +.glyphicon-cloud:before { + content: "\2601"; +} +.glyphicon-envelope:before { + content: "\2709"; +} +.glyphicon-pencil:before { + content: "\270f"; +} +.glyphicon-glass:before { + content: "\e001"; +} +.glyphicon-music:before { + content: "\e002"; +} +.glyphicon-search:before { + content: "\e003"; +} +.glyphicon-heart:before { + content: "\e005"; +} +.glyphicon-star:before { + content: "\e006"; +} +.glyphicon-star-empty:before { + content: "\e007"; +} +.glyphicon-user:before { + content: "\e008"; +} +.glyphicon-film:before { + content: "\e009"; +} +.glyphicon-th-large:before { + content: "\e010"; +} +.glyphicon-th:before { + content: "\e011"; +} +.glyphicon-th-list:before { + content: "\e012"; +} +.glyphicon-ok:before { + content: "\e013"; +} +.glyphicon-remove:before { + content: "\e014"; +} +.glyphicon-zoom-in:before { + content: "\e015"; +} +.glyphicon-zoom-out:before { + content: "\e016"; +} +.glyphicon-off:before { + content: "\e017"; +} +.glyphicon-signal:before { + content: "\e018"; +} +.glyphicon-cog:before { + content: "\e019"; +} +.glyphicon-trash:before { + content: "\e020"; +} +.glyphicon-home:before { + content: "\e021"; +} +.glyphicon-file:before { + content: "\e022"; +} +.glyphicon-time:before { + content: "\e023"; +} +.glyphicon-road:before { + content: "\e024"; +} +.glyphicon-download-alt:before { + content: "\e025"; +} +.glyphicon-download:before { + content: "\e026"; +} +.glyphicon-upload:before { + content: "\e027"; +} +.glyphicon-inbox:before { + content: "\e028"; +} +.glyphicon-play-circle:before { + content: "\e029"; +} +.glyphicon-repeat:before { + content: "\e030"; +} +.glyphicon-refresh:before { + content: "\e031"; +} +.glyphicon-list-alt:before { + content: "\e032"; +} +.glyphicon-lock:before { + content: "\e033"; +} +.glyphicon-flag:before { + content: "\e034"; +} +.glyphicon-headphones:before { + content: "\e035"; +} +.glyphicon-volume-off:before { + content: "\e036"; +} +.glyphicon-volume-down:before { + content: "\e037"; +} +.glyphicon-volume-up:before { + content: "\e038"; +} +.glyphicon-qrcode:before { + content: "\e039"; +} +.glyphicon-barcode:before { + content: "\e040"; +} +.glyphicon-tag:before { + content: "\e041"; +} +.glyphicon-tags:before { + content: "\e042"; +} +.glyphicon-book:before { + content: "\e043"; +} +.glyphicon-bookmark:before { + content: "\e044"; +} +.glyphicon-print:before { + content: "\e045"; +} +.glyphicon-camera:before { + content: "\e046"; +} +.glyphicon-font:before { + content: "\e047"; +} +.glyphicon-bold:before { + content: "\e048"; +} +.glyphicon-italic:before { + content: "\e049"; +} +.glyphicon-text-height:before { + content: "\e050"; +} +.glyphicon-text-width:before { + content: "\e051"; +} +.glyphicon-align-left:before { + content: "\e052"; +} +.glyphicon-align-center:before { + content: "\e053"; +} +.glyphicon-align-right:before { + content: "\e054"; +} +.glyphicon-align-justify:before { + content: "\e055"; +} +.glyphicon-list:before { + content: "\e056"; +} +.glyphicon-indent-left:before { + content: "\e057"; +} +.glyphicon-indent-right:before { + content: "\e058"; +} +.glyphicon-facetime-video:before { + content: "\e059"; +} +.glyphicon-picture:before { + content: "\e060"; +} +.glyphicon-map-marker:before { + content: "\e062"; +} +.glyphicon-adjust:before { + content: "\e063"; +} +.glyphicon-tint:before { + content: "\e064"; +} +.glyphicon-edit:before { + content: "\e065"; +} +.glyphicon-share:before { + content: "\e066"; +} +.glyphicon-check:before { + content: "\e067"; +} +.glyphicon-move:before { + content: "\e068"; +} +.glyphicon-step-backward:before { + content: "\e069"; +} +.glyphicon-fast-backward:before { + content: "\e070"; +} +.glyphicon-backward:before { + content: "\e071"; +} +.glyphicon-play:before { + content: "\e072"; +} +.glyphicon-pause:before { + content: "\e073"; +} +.glyphicon-stop:before { + content: "\e074"; +} +.glyphicon-forward:before { + content: "\e075"; +} +.glyphicon-fast-forward:before { + content: "\e076"; +} +.glyphicon-step-forward:before { + content: "\e077"; +} +.glyphicon-eject:before { + content: "\e078"; +} +.glyphicon-chevron-left:before { + content: "\e079"; +} +.glyphicon-chevron-right:before { + content: "\e080"; +} +.glyphicon-plus-sign:before { + content: "\e081"; +} +.glyphicon-minus-sign:before { + content: "\e082"; +} +.glyphicon-remove-sign:before { + content: "\e083"; +} +.glyphicon-ok-sign:before { + content: "\e084"; +} +.glyphicon-question-sign:before { + content: "\e085"; +} +.glyphicon-info-sign:before { + content: "\e086"; +} +.glyphicon-screenshot:before { + content: "\e087"; +} +.glyphicon-remove-circle:before { + content: "\e088"; +} +.glyphicon-ok-circle:before { + content: "\e089"; +} +.glyphicon-ban-circle:before { + content: "\e090"; +} +.glyphicon-arrow-left:before { + content: "\e091"; +} +.glyphicon-arrow-right:before { + content: "\e092"; +} +.glyphicon-arrow-up:before { + content: "\e093"; +} +.glyphicon-arrow-down:before { + content: "\e094"; +} +.glyphicon-share-alt:before { + content: "\e095"; +} +.glyphicon-resize-full:before { + content: "\e096"; +} +.glyphicon-resize-small:before { + content: "\e097"; +} +.glyphicon-exclamation-sign:before { + content: "\e101"; +} +.glyphicon-gift:before { + content: "\e102"; +} +.glyphicon-leaf:before { + content: "\e103"; +} +.glyphicon-fire:before { + content: "\e104"; +} +.glyphicon-eye-open:before { + content: "\e105"; +} +.glyphicon-eye-close:before { + content: "\e106"; +} +.glyphicon-warning-sign:before { + content: "\e107"; +} +.glyphicon-plane:before { + content: "\e108"; +} +.glyphicon-calendar:before { + content: "\e109"; +} +.glyphicon-random:before { + content: "\e110"; +} +.glyphicon-comment:before { + content: "\e111"; +} +.glyphicon-magnet:before { + content: "\e112"; +} +.glyphicon-chevron-up:before { + content: "\e113"; +} +.glyphicon-chevron-down:before { + content: "\e114"; +} +.glyphicon-retweet:before { + content: "\e115"; +} +.glyphicon-shopping-cart:before { + content: "\e116"; +} +.glyphicon-folder-close:before { + content: "\e117"; +} +.glyphicon-folder-open:before { + content: "\e118"; +} +.glyphicon-resize-vertical:before { + content: "\e119"; +} +.glyphicon-resize-horizontal:before { + content: "\e120"; +} +.glyphicon-hdd:before { + content: "\e121"; +} +.glyphicon-bullhorn:before { + content: "\e122"; +} +.glyphicon-bell:before { + content: "\e123"; +} +.glyphicon-certificate:before { + content: "\e124"; +} +.glyphicon-thumbs-up:before { + content: "\e125"; +} +.glyphicon-thumbs-down:before { + content: "\e126"; +} +.glyphicon-hand-right:before { + content: "\e127"; +} +.glyphicon-hand-left:before { + content: "\e128"; +} +.glyphicon-hand-up:before { + content: "\e129"; +} +.glyphicon-hand-down:before { + content: "\e130"; +} +.glyphicon-circle-arrow-right:before { + content: "\e131"; +} +.glyphicon-circle-arrow-left:before { + content: "\e132"; +} +.glyphicon-circle-arrow-up:before { + content: "\e133"; +} +.glyphicon-circle-arrow-down:before { + content: "\e134"; +} +.glyphicon-globe:before { + content: "\e135"; +} +.glyphicon-wrench:before { + content: "\e136"; +} +.glyphicon-tasks:before { + content: "\e137"; +} +.glyphicon-filter:before { + content: "\e138"; +} +.glyphicon-briefcase:before { + content: "\e139"; +} +.glyphicon-fullscreen:before { + content: "\e140"; +} +.glyphicon-dashboard:before { + content: "\e141"; +} +.glyphicon-paperclip:before { + content: "\e142"; +} +.glyphicon-heart-empty:before { + content: "\e143"; +} +.glyphicon-link:before { + content: "\e144"; +} +.glyphicon-phone:before { + content: "\e145"; +} +.glyphicon-pushpin:before { + content: "\e146"; +} +.glyphicon-usd:before { + content: "\e148"; +} +.glyphicon-gbp:before { + content: "\e149"; +} +.glyphicon-sort:before { + content: "\e150"; +} +.glyphicon-sort-by-alphabet:before { + content: "\e151"; +} +.glyphicon-sort-by-alphabet-alt:before { + content: "\e152"; +} +.glyphicon-sort-by-order:before { + content: "\e153"; +} +.glyphicon-sort-by-order-alt:before { + content: "\e154"; +} +.glyphicon-sort-by-attributes:before { + content: "\e155"; +} +.glyphicon-sort-by-attributes-alt:before { + content: "\e156"; +} +.glyphicon-unchecked:before { + content: "\e157"; +} +.glyphicon-expand:before { + content: "\e158"; +} +.glyphicon-collapse-down:before { + content: "\e159"; +} +.glyphicon-collapse-up:before { + content: "\e160"; +} +.glyphicon-log-in:before { + content: "\e161"; +} +.glyphicon-flash:before { + content: "\e162"; +} +.glyphicon-log-out:before { + content: "\e163"; +} +.glyphicon-new-window:before { + content: "\e164"; +} +.glyphicon-record:before { + content: "\e165"; +} +.glyphicon-save:before { + content: "\e166"; +} +.glyphicon-open:before { + content: "\e167"; +} +.glyphicon-saved:before { + content: "\e168"; +} +.glyphicon-import:before { + content: "\e169"; +} +.glyphicon-export:before { + content: "\e170"; +} +.glyphicon-send:before { + content: "\e171"; +} +.glyphicon-floppy-disk:before { + content: "\e172"; +} +.glyphicon-floppy-saved:before { + content: "\e173"; +} +.glyphicon-floppy-remove:before { + content: "\e174"; +} +.glyphicon-floppy-save:before { + content: "\e175"; +} +.glyphicon-floppy-open:before { + content: "\e176"; +} +.glyphicon-credit-card:before { + content: "\e177"; +} +.glyphicon-transfer:before { + content: "\e178"; +} +.glyphicon-cutlery:before { + content: "\e179"; +} +.glyphicon-header:before { + content: "\e180"; +} +.glyphicon-compressed:before { + content: "\e181"; +} +.glyphicon-earphone:before { + content: "\e182"; +} +.glyphicon-phone-alt:before { + content: "\e183"; +} +.glyphicon-tower:before { + content: "\e184"; +} +.glyphicon-stats:before { + content: "\e185"; +} +.glyphicon-sd-video:before { + content: "\e186"; +} +.glyphicon-hd-video:before { + content: "\e187"; +} +.glyphicon-subtitles:before { + content: "\e188"; +} +.glyphicon-sound-stereo:before { + content: "\e189"; +} +.glyphicon-sound-dolby:before { + content: "\e190"; +} +.glyphicon-sound-5-1:before { + content: "\e191"; +} +.glyphicon-sound-6-1:before { + content: "\e192"; +} +.glyphicon-sound-7-1:before { + content: "\e193"; +} +.glyphicon-copyright-mark:before { + content: "\e194"; +} +.glyphicon-registration-mark:before { + content: "\e195"; +} +.glyphicon-cloud-download:before { + content: "\e197"; +} +.glyphicon-cloud-upload:before { + content: "\e198"; +} +.glyphicon-tree-conifer:before { + content: "\e199"; +} +.glyphicon-tree-deciduous:before { + content: "\e200"; +} +.glyphicon-cd:before { + content: "\e201"; +} +.glyphicon-save-file:before { + content: "\e202"; +} +.glyphicon-open-file:before { + content: "\e203"; +} +.glyphicon-level-up:before { + content: "\e204"; +} +.glyphicon-copy:before { + content: "\e205"; +} +.glyphicon-paste:before { + content: "\e206"; +} +.glyphicon-alert:before { + content: "\e209"; +} +.glyphicon-equalizer:before { + content: "\e210"; +} +.glyphicon-king:before { + content: "\e211"; +} +.glyphicon-queen:before { + content: "\e212"; +} +.glyphicon-pawn:before { + content: "\e213"; +} +.glyphicon-bishop:before { + content: "\e214"; +} +.glyphicon-knight:before { + content: "\e215"; +} +.glyphicon-baby-formula:before { + content: "\e216"; +} +.glyphicon-tent:before { + content: "\26fa"; +} +.glyphicon-blackboard:before { + content: "\e218"; +} +.glyphicon-bed:before { + content: "\e219"; +} +.glyphicon-apple:before { + content: "\f8ff"; +} +.glyphicon-erase:before { + content: "\e221"; +} +.glyphicon-hourglass:before { + content: "\231b"; +} +.glyphicon-lamp:before { + content: "\e223"; +} +.glyphicon-duplicate:before { + content: "\e224"; +} +.glyphicon-piggy-bank:before { + content: "\e225"; +} +.glyphicon-scissors:before { + content: "\e226"; +} +.glyphicon-bitcoin:before { + content: "\e227"; +} +.glyphicon-btc:before { + content: "\e227"; +} +.glyphicon-xbt:before { + content: "\e227"; +} +.glyphicon-yen:before { + content: "\00a5"; +} +.glyphicon-jpy:before { + content: "\00a5"; +} +.glyphicon-ruble:before { + content: "\20bd"; +} +.glyphicon-rub:before { + content: "\20bd"; +} +.glyphicon-scale:before { + content: "\e230"; +} +.glyphicon-ice-lolly:before { + content: "\e231"; +} +.glyphicon-ice-lolly-tasted:before { + content: "\e232"; +} +.glyphicon-education:before { + content: "\e233"; +} +.glyphicon-option-horizontal:before { + content: "\e234"; +} +.glyphicon-option-vertical:before { + content: "\e235"; +} +.glyphicon-menu-hamburger:before { + content: "\e236"; +} +.glyphicon-modal-window:before { + content: "\e237"; +} +.glyphicon-oil:before { + content: "\e238"; +} +.glyphicon-grain:before { + content: "\e239"; +} +.glyphicon-sunglasses:before { + content: "\e240"; +} +.glyphicon-text-size:before { + content: "\e241"; +} +.glyphicon-text-color:before { + content: "\e242"; +} +.glyphicon-text-background:before { + content: "\e243"; +} +.glyphicon-object-align-top:before { + content: "\e244"; +} +.glyphicon-object-align-bottom:before { + content: "\e245"; +} +.glyphicon-object-align-horizontal:before { + content: "\e246"; +} +.glyphicon-object-align-left:before { + content: "\e247"; +} +.glyphicon-object-align-vertical:before { + content: "\e248"; +} +.glyphicon-object-align-right:before { + content: "\e249"; +} +.glyphicon-triangle-right:before { + content: "\e250"; +} +.glyphicon-triangle-left:before { + content: "\e251"; +} +.glyphicon-triangle-bottom:before { + content: "\e252"; +} +.glyphicon-triangle-top:before { + content: "\e253"; +} +.glyphicon-console:before { + content: "\e254"; +} +.glyphicon-superscript:before { + content: "\e255"; +} +.glyphicon-subscript:before { + content: "\e256"; +} +.glyphicon-menu-left:before { + content: "\e257"; +} +.glyphicon-menu-right:before { + content: "\e258"; +} +.glyphicon-menu-down:before { + content: "\e259"; +} +.glyphicon-menu-up:before { + content: "\e260"; +} diff -r f6f4177d0a81 -r 0795207f3b90 assets/css/prism-okaidia.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/assets/css/prism-okaidia.css Tue Jan 26 19:19:23 2016 +0100 @@ -0,0 +1,119 @@ +/** + * okaidia theme for JavaScript, CSS and HTML + * Loosely based on Monokai textmate theme by http://www.monokai.nl/ + * @author ocodia + */ + +code[class*="language-"], +pre[class*="language-"] { + color: #f8f8f2; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 0.3em; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #272822; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #f8f8f2; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.constant, +.token.symbol, +.token.deleted { + color: #f92672; +} + +.token.boolean, +.token.number { + color: #ae81ff; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #a6e22e; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string, +.token.variable { + color: #f8f8f2; +} + +.token.atrule, +.token.attr-value, +.token.function { + color: #e6db74; +} + +.token.keyword { + color: #66d9ef; +} + +.token.regex, +.token.important { + color: #fd971f; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff -r f6f4177d0a81 -r 0795207f3b90 assets/css/style.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/assets/css/style.css Tue Jan 26 19:19:23 2016 +0100 @@ -0,0 +1,248 @@ +/*! + * Bootstrap Docs (http://getbootstrap.com) + * Copyright 2011-2014 Twitter, Inc. + * Licensed under the Creative Commons Attribution 3.0 Unported License. For + * details, see http://creativecommons.org/licenses/by/3.0/. + */ + +.h1, .h2, .h3, h1, h2, h3 { + margin-top: 20px; + margin-bottom: 10px; +} + +.h1, h1 { + font-size: 36px; +} + +.btn-group-lg > .btn, .btn-lg { + font-size: 18px; +} + +section { + padding-top: 30px; +} + +.bd-pageheader { + margin-top: 51px; +} + +.page-header { + padding-bottom: 9px; + margin: 40px 0 20px; + border-bottom: 1px solid #eee; +} + +.navbar-default .navbar-nav > li > a { + color: #777; +} + +.navbar { + padding: 0; +} + +.navbar-nav .nav-item { + margin-left: 0 !important; +} + +.nav > li > a { + position: relative; + display: block; + padding: 10px 15px; +} + +.nav .navbar-brand { + float: left; + height: 50px; + padding: 15px 15px; + font-size: 18px; + line-height: 20px; + margin-right: 0 !important; +} + +.navbar-brand { + color: #777; + float: left; + height: 50px; + padding: 15px 15px; + font-size: 18px; + line-height: 20px; +} + +.navbar-toggler { + margin-top: 8px; + margin-right: 15px; +} + +.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { + color: #333; + background-color: transparent; +} + +.bd-pageheader, .bs-docs-masthead { + position: relative; + padding: 30px 0; + color: #cdbfe3; + text-align: center; + text-shadow: 0 1px 0 rgba(0, 0, 0, .1); + background-color: #6f5499; + background-image: -webkit-gradient(linear, left top, left bottom, from(#563d7c), to(#6f5499)); + background-image: -webkit-linear-gradient(top, #563d7c 0, #6f5499 100%); + background-image: -o-linear-gradient(top, #563d7c 0, #6f5499 100%); + background-image: linear-gradient(to bottom, #563d7c 0, #6f5499 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0); + background-repeat: repeat-x; +} + +.bd-pageheader { + margin-bottom: 40px; + font-size: 20px; +} + +.bd-pageheader h1 { + margin-top: 0; + color: #fff; +} + +.bd-pageheader p { + margin-bottom: 0; + font-weight: 300; + line-height: 1.4; +} + +.bd-pageheader .btn { + margin: 10px 0; +} + +.scrollable-menu .nav-link { + color: #337ab7; + font-size: 14px; +} + +.scrollable-menu .nav-link:hover { + color: #23527c; + background-color: #eee; +} + +@media (min-width: 992px) { + .bd-pageheader h1, .bd-pageheader p { + margin-right: 380px; + } +} + +@media (min-width: 768px) { + .bd-pageheader { + padding-top: 60px; + padding-bottom: 60px; + font-size: 24px; + text-align: left; + } + + .bd-pageheader h1 { + font-size: 60px; + line-height: 1; + } + + .navbar-nav > li > a.nav-link { + padding-top: 15px; + padding-bottom: 15px; + font-size: 14px; + } + + .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { + margin-left: -15px; + } +} + +@media (max-width: 767px) { + .hidden-xs { + display: none !important; + } + + .navbar .container { + width: 100%; + max-width: 100%; + } + .navbar .container, + .navbar .container .navbar-header { + padding: 0; + margin: 0; + } +} + +@media (max-width: 400px) { + code, kbd { + font-size: 60%; + } +} + +/** + * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units + * + * To overcome this, create media queries that target the width, height, and orientation of iOS devices. + * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing + * the height of element '.scrollable-menu' —which is a full width and height cover image. + * + * iOS Resolution Quick Reference: http://www.iosres.com/ + */ + +.scrollable-menu { + height: 90vh !important; + width: 100vw; + overflow-x: hidden; + padding: 0 0 20px; +} + +/** + * iPad with portrait orientation. + */ +@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) { + .scrollable-menu { + height: 1024px !important; + } +} + +/** + * iPad with landscape orientation. + */ +@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) { + .scrollable-menu { + height: 768px !important; + } +} + +/** + * iPhone 5 + * You can also target devices with aspect ratio. + */ +@media screen and (device-aspect-ratio: 40/71) { + .scrollable-menu { + height: 500px !important; + } +} + +.navbar-default .navbar-toggle .icon-bar { + background-color: #888; +} + +.navbar-toggle:focus { + outline: 0 +} + +.navbar-toggle .icon-bar { + display: block; + width: 22px; + height: 2px; + border-radius: 1px +} + +.navbar-toggle .icon-bar + .icon-bar { + margin-top: 4px +} + +pre { + white-space: pre-wrap; /* CSS 3 */ + white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ + white-space: -pre-wrap; /* Opera 4-6 */ + white-space: -o-pre-wrap; /* Opera 7 */ + word-wrap: break-word; /* Internet Explorer 5.5+ */ +} diff -r f6f4177d0a81 -r 0795207f3b90 assets/fonts/glyphicons-halflings-regular.eot Binary file assets/fonts/glyphicons-halflings-regular.eot has changed diff -r f6f4177d0a81 -r 0795207f3b90 assets/fonts/glyphicons-halflings-regular.svg --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/assets/fonts/glyphicons-halflings-regular.svg Tue Jan 26 19:19:23 2016 +0100 @@ -0,0 +1,288 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff -r f6f4177d0a81 -r 0795207f3b90 assets/fonts/glyphicons-halflings-regular.ttf Binary file assets/fonts/glyphicons-halflings-regular.ttf has changed diff -r f6f4177d0a81 -r 0795207f3b90 assets/fonts/glyphicons-halflings-regular.woff Binary file assets/fonts/glyphicons-halflings-regular.woff has changed diff -r f6f4177d0a81 -r 0795207f3b90 assets/fonts/glyphicons-halflings-regular.woff2 Binary file assets/fonts/glyphicons-halflings-regular.woff2 has changed diff -r f6f4177d0a81 -r 0795207f3b90 config.js --- a/config.js Tue Jan 26 16:54:38 2016 +0100 +++ b/config.js Tue Jan 26 19:19:23 2016 +0100 @@ -21,6 +21,7 @@ map: { "angular2": "npm:angular2@2.0.0-beta.1", + "ng2-bootstrap": "npm:ng2-bootstrap@1.0.1-beta.2", "ng2-table": "npm:ng2-table@1.0.0-beta.0", "plugin-typescript": "github:frankwallis/plugin-typescript@2.5.2", "reflect-metadata": "npm:reflect-metadata@0.1.3", @@ -63,6 +64,9 @@ "github:jspm/nodelibs-vm@0.1.0": { "vm-browserify": "npm:vm-browserify@0.0.4" }, + "github:jspm/nodelibs-zlib@0.1.0": { + "browserify-zlib": "npm:browserify-zlib@0.1.4" + }, "npm:angular2@2.0.0-beta.1": { "crypto": "github:jspm/nodelibs-crypto@0.1.0", "es6-promise": "npm:es6-promise@3.0.2", @@ -127,6 +131,14 @@ "parse-asn1": "npm:parse-asn1@5.0.0", "stream": "github:jspm/nodelibs-stream@0.1.0" }, + "npm:browserify-zlib@0.1.4": { + "assert": "github:jspm/nodelibs-assert@0.1.0", + "buffer": "github:jspm/nodelibs-buffer@0.1.0", + "pako": "npm:pako@0.2.8", + "process": "github:jspm/nodelibs-process@0.1.2", + "readable-stream": "npm:readable-stream@2.0.5", + "util": "github:jspm/nodelibs-util@0.1.0" + }, "npm:buffer-xor@1.0.3": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "systemjs-json": "github:systemjs/plugin-json@0.1.0" @@ -226,6 +238,17 @@ "bn.js": "npm:bn.js@4.8.1", "brorand": "npm:brorand@1.0.5" }, + "npm:ng2-bootstrap@1.0.1-beta.2": { + "fs": "github:jspm/nodelibs-fs@0.1.2", + "path": "github:jspm/nodelibs-path@0.1.0", + "process": "github:jspm/nodelibs-process@0.1.2", + "systemjs-json": "github:systemjs/plugin-json@0.1.0", + "zlib": "github:jspm/nodelibs-zlib@0.1.0" + }, + "npm:pako@0.2.8": { + "buffer": "github:jspm/nodelibs-buffer@0.1.0", + "process": "github:jspm/nodelibs-process@0.1.2" + }, "npm:parse-asn1@5.0.0": { "asn1.js": "npm:asn1.js@4.3.0", "browserify-aes": "npm:browserify-aes@1.0.6", @@ -247,6 +270,9 @@ "process": "github:jspm/nodelibs-process@0.1.2", "systemjs-json": "github:systemjs/plugin-json@0.1.0" }, + "npm:process-nextick-args@1.0.6": { + "process": "github:jspm/nodelibs-process@0.1.2" + }, "npm:process@0.11.2": { "assert": "github:jspm/nodelibs-assert@0.1.0" }, @@ -274,6 +300,17 @@ "stream-browserify": "npm:stream-browserify@1.0.0", "string_decoder": "npm:string_decoder@0.10.31" }, + "npm:readable-stream@2.0.5": { + "buffer": "github:jspm/nodelibs-buffer@0.1.0", + "core-util-is": "npm:core-util-is@1.0.2", + "events": "github:jspm/nodelibs-events@0.1.1", + "inherits": "npm:inherits@2.0.1", + "isarray": "npm:isarray@0.0.1", + "process": "github:jspm/nodelibs-process@0.1.2", + "process-nextick-args": "npm:process-nextick-args@1.0.6", + "string_decoder": "npm:string_decoder@0.10.31", + "util-deprecate": "npm:util-deprecate@1.0.2" + }, "npm:reflect-metadata@0.1.2": { "assert": "github:jspm/nodelibs-assert@0.1.0", "process": "github:jspm/nodelibs-process@0.1.2" @@ -304,6 +341,9 @@ "npm:string_decoder@0.10.31": { "buffer": "github:jspm/nodelibs-buffer@0.1.0" }, + "npm:util-deprecate@1.0.2": { + "util": "github:jspm/nodelibs-util@0.1.0" + }, "npm:util@0.10.3": { "inherits": "npm:inherits@2.0.1", "process": "github:jspm/nodelibs-process@0.1.2" diff -r f6f4177d0a81 -r 0795207f3b90 index.html --- a/index.html Tue Jan 26 16:54:38 2016 +0100 +++ b/index.html Tue Jan 26 19:19:23 2016 +0100 @@ -3,6 +3,12 @@ ISMI Query Builder + + + + + + diff -r f6f4177d0a81 -r 0795207f3b90 package.json --- a/package.json Tue Jan 26 16:54:38 2016 +0100 +++ b/package.json Tue Jan 26 19:19:23 2016 +0100 @@ -8,6 +8,7 @@ "jspm": { "dependencies": { "angular2": "npm:angular2@^2.0.0-beta.1", + "ng2-bootstrap": "npm:ng2-bootstrap@^1.0.1-beta.2", "ng2-table": "npm:ng2-table@^1.0.0-beta.0", "plugin-typescript": "github:frankwallis/plugin-typescript@^2.5.2", "reflect-metadata": "npm:reflect-metadata@^0.1.3",