From 3a5dfdd115f7f41a81c77e5958d2f55beeeebd1f Mon Sep 17 00:00:00 2001 From: Linus Miller Date: Fri, 24 Feb 2017 18:22:26 +0100 Subject: [PATCH] Display results nicer --- assets/less/main.less | 21 +++++++++++-- client/actions/results.js | 51 ++++++++++++++++++++++++++++++++ client/components/Link.jsx | 13 ++++++++ client/components/Result.jsx | 25 ++++++++++++++++ client/components/ResultList.jsx | 24 +++++++++++++++ client/index.js | 16 ++++++---- client/master.jsx | 2 +- client/reducers/results.js | 16 ++++++++++ client/reducers/root.js | 7 +++++ client/store.js | 15 ++++++++++ client/util/formatTime.js | 3 ++ package.json | 9 +++++- server/routers/api.js | 29 ++++++++++++++---- 13 files changed, 216 insertions(+), 15 deletions(-) create mode 100644 client/actions/results.js create mode 100644 client/components/Link.jsx create mode 100644 client/components/Result.jsx create mode 100644 client/components/ResultList.jsx create mode 100644 client/reducers/results.js create mode 100644 client/reducers/root.js create mode 100644 client/store.js create mode 100644 client/util/formatTime.js diff --git a/assets/less/main.less b/assets/less/main.less index daa0bbc..a2e72cc 100644 --- a/assets/less/main.less +++ b/assets/less/main.less @@ -31,7 +31,22 @@ div.item { align-items: center; } -pre { - width: 100%; - overflow: scroll; +#results { + > ul { + > li { + padding: 5px 0; + cursor: pointer; + &:hover { + background: #ddd; + } + > ul { + display: none; + } + &.expand { + > ul { + display: block; + } + } + } + } } diff --git a/client/actions/results.js b/client/actions/results.js new file mode 100644 index 0000000..e2d2532 --- /dev/null +++ b/client/actions/results.js @@ -0,0 +1,51 @@ +import { pick } from 'lowline'; + +export const DELETE_RESULT = 'DELETE_RESULT'; + +const baseUrl = '/api/results'; + +const headers = { + 'X-Requested-With': 'XMLHttpRequest', + accept: 'application/json', +}; + +export const FETCH_RESULTS = 'FETCH_RESULTS'; + +// query can be a query string (without ?, ie not a search string) +export function fetchResults(query = {}) { + query = typeof query === 'string' ? query : qs.stringify(query); + + return (dispatch) => { + fetch(`${baseUrl}${query ? `?${query}` : ''}`, { + credentials: 'same-origin', + headers, + }).then((res) => res.json()) + .then((json) => { + const actions = [receiveResults(json.results || [])]; + + if (json.perPage) { + actions.push(setPagination(pick(json, 'perPage', 'totalCount'))); + } + + dispatch(batchActions(actions)); + }); + }; +} + +export const RECEIVE_RESULTS = 'RECEIVE_RESULTS'; + +export function receiveResults(json) { + return { + type: RECEIVE_RESULTS, + payload: json, + receivedAt: Date.now(), + }; +} + +export const REMOVE_RESULTS = 'REMOVE_RESULTS'; + +export function removeResults() { + return { + type: REMOVE_RESULTS, + }; +} diff --git a/client/components/Link.jsx b/client/components/Link.jsx new file mode 100644 index 0000000..800b538 --- /dev/null +++ b/client/components/Link.jsx @@ -0,0 +1,13 @@ +import { h } from 'preact'; + +import formatTime from '../util/formatTime'; + +export default (props) => ( +
  • + {props.Line.Name} + +
    • +); diff --git a/client/components/Result.jsx b/client/components/Result.jsx new file mode 100644 index 0000000..87e1460 --- /dev/null +++ b/client/components/Result.jsx @@ -0,0 +1,25 @@ +import { h, Component } from 'preact'; + +import Link from './Link'; + +import formatTime from '../util/formatTime'; + +export default class Result extends Component { + toggle() { + console.log('toggle'); + this.setState({ + expand: !this.state.expand, + }) + } + + render(props, { expand }) { + return ( +
  • this.toggle()}> + {formatTime(props.DepDateTime)} - {formatTime(props.ArrDateTime)} + +
    • + ); + } +} diff --git a/client/components/ResultList.jsx b/client/components/ResultList.jsx new file mode 100644 index 0000000..39f5f52 --- /dev/null +++ b/client/components/ResultList.jsx @@ -0,0 +1,24 @@ +import { h, Component } from 'preact'; + +import Result from './Result'; +import store from '../store'; + +export default class ResultList extends Component { + componentDidMount() { + this.unsubscribe = store.subscribe(() => this.forceUpdate()); + } + + componentWillUnmount() { + this.unsubscribe(); + } + + render() { + const { results } = store.getState(); + console.log(results); + + return ( + + ); + } +} + diff --git a/client/index.js b/client/index.js index 55a70d5..4a5b9be 100644 --- a/client/index.js +++ b/client/index.js @@ -1,7 +1,11 @@ import { $, $$ } from 'dollr'; import dragula from 'dragula'; +import { h, render } from 'preact'; +import ResultList from './components/ResultList'; +import store from './store'; +import { receiveResults } from './actions/results'; const result = $('pre'); const containers = $$('.location'); @@ -34,7 +38,8 @@ drake.on('drop', (el, target, source) => { return res.json(); }).then((json) => { console.log(json); - result.textContent = JSON.stringify(json, null, ' ') + // result.textContent = JSON.stringify(json, null, ' ') + store.dispatch(receiveResults(json)); }).catch((err) => { console.log('error'); console.log(err); @@ -46,10 +51,6 @@ function prevent(e) { e.preventDefault(); } -document.body.addEventListener('touchmove', (e) => { - if (e.target.classList.contains('item')) e.preventDefault(); -}, { passive: false }); - drake.on('over', (el, target, source) => { if (target !== source) { target.classList.add('over'); @@ -62,3 +63,8 @@ drake.on('out', (el, target, source) => { } }); +render( + , + $('#results') +); + diff --git a/client/master.jsx b/client/master.jsx index 4378d37..ee553ca 100644 --- a/client/master.jsx +++ b/client/master.jsx @@ -18,7 +18,7 @@ export default ({ articleUrl, protocol, hostname, websocketsPort, INITIAL_STATE,
    Brother
    The Rapist
    - 
    
+