From ec94255dea7f3addc87aacdeb021f44c525dc3e9 Mon Sep 17 00:00:00 2001 From: Paul Makles <paulmakles@gmail.com> Date: Fri, 14 Dec 2018 20:23:15 +0000 Subject: [PATCH] Started organising, condensing bus arrivals into one entry. --- .gitlab-ci.yml | 2 +- App.js | 130 ++++++++++++----------------------------- app.json | 4 +- package-lock.json | 145 ++++++++++++++++++++++++++++++++++++---------- package.json | 3 +- src/styles.js | 83 ++++++++++++++++++++++++++ 6 files changed, 239 insertions(+), 128 deletions(-) create mode 100644 src/styles.js diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index b9eb57a..1e5be05 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -3,7 +3,7 @@ image: timbru31/node-alpine-git stages: - deploy before_script: - - npm ci + - npm i deploy: stage: deploy script: diff --git a/App.js b/App.js index d42ce3c..a271395 100644 --- a/App.js +++ b/App.js @@ -1,44 +1,10 @@ import React, { Component } from 'react'; -import { ToastAndroid, Button, AsyncStorage, TextInput, ScrollView, StyleSheet, Text, View } from 'react-native'; +import { ToastAndroid, Button, AsyncStorage, TextInput, ScrollView, Text, View } from 'react-native'; import moment, { relativeTimeThreshold, updateLocale } from 'moment'; import Tabs from 'react-native-tabs'; - -const estyles = StyleSheet.create({ - container: { - width: '100%', - padding: 4, - }, - top: { - padding: 6, - display: 'flex', - flexDirection: 'row', - }, - line: { - fontWeight: '900', - fontSize: 26, - textAlign: 'left', - }, - destination: { - paddingLeft: 5, - fontSize: 18, - }, - arrival: { - padding: 8, - fontSize: 14, - flex: 1, - textAlign: 'right', - }, - header: { - backgroundColor: '#d3390a', - color: 'white', - fontWeight: '200', - textAlign: 'left', - fontSize: 24, - padding: 4, - paddingLeft: 8 - } -}); + +import { styles, element_styles } from './src/styles'; class BusArrival extends Component { constructor(props) { @@ -48,7 +14,8 @@ class BusArrival extends Component { id: props.item.id, line: props.item.line, destination: props.item.destination, - arrival: time.fromNow() + arrival: time.fromNow(), + next: props.item.next }; } @@ -64,12 +31,23 @@ class BusArrival extends Component { render() { return ( - <View style={[estyles.container, {backgroundColor: this.state.id % 2 ? '#fafafa' : '#fefefe'}]}> - <View style={estyles.top}> - <Text style={estyles.line}>{this.state.line}</Text> - <Text style={estyles.arrival}>{this.state.arrival}</Text> + <View style={[element_styles.container, {backgroundColor: this.state.id % 2 ? '#fafafa' : '#fefefe'}]}> + <View style={element_styles.top}> + <View> + <Text style={element_styles.line}>{this.state.line}</Text> + <Text style={element_styles.destination}>{this.state.destination}</Text> + </View> + <View style={{flex: 1, paddingTop: 3}}> + <Text style={element_styles.arrival}>{this.state.arrival}</Text> + { this.state.next.length > 0 ? + <Text style={[element_styles.arrival, {fontSize: 11}]}>then { + this.state.next.map(i => { + return Math.max(Math.floor(moment.duration(moment(i).diff(moment())).asMinutes()), 1); + }).join(', ') + } min</Text> + : null } + </View> </View> - <Text style={estyles.destination}>{this.state.destination}</Text> </View> ); } @@ -165,7 +143,7 @@ class BusArrivals extends Component { if (!this.state.visible) return null; return ( <View> - <Text style={estyles.header}>{this.state.name}</Text> + <Text style={element_styles.header}>{this.state.name}</Text> <Text style={styles.status}>Updated {this.state.updated}.</Text> {Object.keys(this.state.data).map(i => { return (<BusArrival item={this.state.data[i]} key={this.state.data[i].key} />); @@ -233,8 +211,19 @@ class BusArrivals extends Component { list.sort((a, b) => { return new Date(a.arrival) > new Date(b.arrival); }); + let parse = {}; list.forEach((x, i) => { - list[i].id = i; + x.id = i; + if (parse[x.line + x.destination]) { + parse[x.line + x.destination].next.push(x.arrival); + } else { + x.next = []; + parse[x.line + x.destination] = x; + } + }); + list = []; + Object.keys(parse).forEach(x => { + list.push(parse[x]); }); !this.isCancelled && this.setState({ data: list, @@ -327,8 +316,8 @@ class SearchEntry extends Component { render() { return ( - <View style={[estyles.container, {backgroundColor: this.state.i % 2 ? '#fafafa' : '#fefefe'}]}> - <Text style={estyles.destination}>{this.state.name}</Text> + <View style={[element_styles.container, {backgroundColor: this.state.i % 2 ? '#fafafa' : '#fefefe'}]}> + <Text style={element_styles.destination}>{this.state.name}</Text> <Button onPress={() => { let d = {id: this.state.id, name: this.state.name}; @@ -435,49 +424,4 @@ export default class App extends Component { </View> ); } -} - -const styles = StyleSheet.create({ - container: { - display: 'flex', - flex: 1, - flexDirection: 'column', - backgroundColor: '#fff', - alignItems: 'center', - }, - header: { - paddingLeft: 22, - paddingTop: 28, - paddingBottom: 8, - width: '100%', - backgroundColor: '#d3390a', - }, - header_addon: { - paddingLeft: 22, - paddingBottom: 8, - width: '100%', - backgroundColor: '#d3390a', - }, - child: { - width: '100%', - flex: 1, - }, - title: { - fontSize: 22, - color: 'white', - paddingBottom: 8, - }, - list: { - width: '100%', - maxHeight: '100%', - }, - status: { - backgroundColor: '#d3390a', - color: 'white', - padding: 2, - paddingLeft: 24 - }, - button: { - padding: 6 - } -}); \ No newline at end of file +} \ No newline at end of file diff --git a/app.json b/app.json index 2a13c24..bbbd460 100644 --- a/app.json +++ b/app.json @@ -6,8 +6,8 @@ "privacy": "public", "sdkVersion": "31.0.0", "platforms": ["ios", "android"], - "version": "1.0.1", - "orientation": "portrait", + "version": "1.0.2", + "orientation": "default", "icon": "./assets/icon.png", "splash": { "image": "./assets/splash.png", diff --git a/package-lock.json b/package-lock.json index 74a5b62..2f8d35b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "empty-project-template", + "name": "bustimes", "requires": true, "lockfileVersion": 1, "dependencies": { @@ -1912,6 +1912,19 @@ "resolve": "^1.4.0" } }, + "babel-plugin-react-transform": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/babel-plugin-react-transform/-/babel-plugin-react-transform-2.0.2.tgz", + "integrity": "sha1-UVu/qZaJOYEULZCx+bFjXeKZUQk=", + "requires": { + "lodash": "^4.6.1" + } + }, + "babel-plugin-syntax-async-functions": { + "version": "6.13.0", + "resolved": "http://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz", + "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=" + }, "babel-plugin-syntax-class-properties": { "version": "6.13.0", "resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz", @@ -2118,6 +2131,14 @@ "babel-runtime": "^6.22.0" } }, + "babel-plugin-transform-object-assign": { + "version": "6.22.0", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-assign/-/babel-plugin-transform-object-assign-6.22.0.tgz", + "integrity": "sha1-+Z0vZvGgsNSY40bFNZaEdAyqILo=", + "requires": { + "babel-runtime": "^6.22.0" + } + }, "babel-plugin-transform-object-rest-spread": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz", @@ -2145,6 +2166,35 @@ "babel-runtime": "^6.22.0" } }, + "babel-plugin-transform-react-jsx-source": { + "version": "6.22.0", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.22.0.tgz", + "integrity": "sha1-ZqwSFT9c0tF7PBkmj0vwGX9E7NY=", + "requires": { + "babel-plugin-syntax-jsx": "^6.8.0", + "babel-runtime": "^6.22.0" + } + }, + "babel-plugin-transform-regenerator": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz", + "integrity": "sha1-4HA2lvveJ/Cj78rPi03KL3s6jy8=", + "requires": { + "regenerator-transform": "^0.10.0" + }, + "dependencies": { + "regenerator-transform": { + "version": "0.10.1", + "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.10.1.tgz", + "integrity": "sha512-PJepbvDbuK1xgIgnau7Y90cwaAmO/LCLMI2mPvaXq2heGMR3aWW5/BQvYrhJ8jgmQjXewXvBjzfqKcVOmhjZ6Q==", + "requires": { + "babel-runtime": "^6.18.0", + "babel-types": "^6.19.0", + "private": "^0.1.6" + } + } + } + }, "babel-plugin-transform-strict-mode": { "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz", @@ -2224,6 +2274,42 @@ "babel-plugin-transform-flow-strip-types": "^6.22.0" } }, + "babel-preset-react-native": { + "version": "1.9.0", + "resolved": "http://registry.npmjs.org/babel-preset-react-native/-/babel-preset-react-native-1.9.0.tgz", + "integrity": "sha1-A1/AbGX08qAtAzahALLaFC822rE=", + "requires": { + "babel-plugin-check-es2015-constants": "^6.5.0", + "babel-plugin-react-transform": "2.0.2", + "babel-plugin-syntax-async-functions": "^6.5.0", + "babel-plugin-syntax-class-properties": "^6.5.0", + "babel-plugin-syntax-flow": "^6.5.0", + "babel-plugin-syntax-jsx": "^6.5.0", + "babel-plugin-syntax-trailing-function-commas": "^6.5.0", + "babel-plugin-transform-class-properties": "^6.5.0", + "babel-plugin-transform-es2015-arrow-functions": "^6.5.0", + "babel-plugin-transform-es2015-block-scoping": "^6.5.0", + "babel-plugin-transform-es2015-classes": "^6.5.0", + "babel-plugin-transform-es2015-computed-properties": "^6.5.0", + "babel-plugin-transform-es2015-destructuring": "^6.5.0", + "babel-plugin-transform-es2015-for-of": "^6.5.0", + "babel-plugin-transform-es2015-function-name": "^6.5.0", + "babel-plugin-transform-es2015-literals": "^6.5.0", + "babel-plugin-transform-es2015-modules-commonjs": "^6.5.0", + "babel-plugin-transform-es2015-parameters": "^6.5.0", + "babel-plugin-transform-es2015-shorthand-properties": "^6.5.0", + "babel-plugin-transform-es2015-spread": "^6.5.0", + "babel-plugin-transform-es2015-template-literals": "^6.5.0", + "babel-plugin-transform-flow-strip-types": "^6.5.0", + "babel-plugin-transform-object-assign": "^6.5.0", + "babel-plugin-transform-object-rest-spread": "^6.5.0", + "babel-plugin-transform-react-display-name": "^6.5.0", + "babel-plugin-transform-react-jsx": "^6.5.0", + "babel-plugin-transform-react-jsx-source": "^6.5.0", + "babel-plugin-transform-regenerator": "^6.5.0", + "react-transform-hmr": "^1.0.4" + } + }, "babel-register": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz", @@ -3464,6 +3550,7 @@ "qs": "^6.5.0", "react-native-branch": "2.2.5", "react-native-gesture-handler": "1.0.8", + "react-native-maps": "github:expo/react-native-maps#cb9d9ec23d4d176bddd6d465a583462f9c1056a0", "react-native-reanimated": "1.0.0-alpha.10", "react-native-screens": "1.0.0-alpha.15", "react-native-svg": "8.0.8", @@ -3471,6 +3558,16 @@ "serialize-error": "^2.1.0", "uuid-js": "^0.7.5", "whatwg-fetch": "^2.0.4" + }, + "dependencies": { + "react-native-maps": { + "version": "github:expo/react-native-maps#cb9d9ec23d4d176bddd6d465a583462f9c1056a0", + "from": "github:expo/react-native-maps#v0.22.0-exp.0", + "requires": { + "babel-plugin-module-resolver": "^3.1.0", + "babel-preset-react-native": "1.9.0" + } + } } }, "expo-ads-admob": { @@ -4323,8 +4420,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -4342,13 +4438,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4361,18 +4455,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -4475,8 +4566,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -4486,7 +4576,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4499,20 +4588,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.2.4", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -4529,7 +4615,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -4602,8 +4687,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -4613,7 +4697,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -4689,8 +4772,7 @@ }, "safe-buffer": { "version": "5.1.1", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -4720,7 +4802,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4738,7 +4819,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4777,13 +4857,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.0.2", - "bundled": true, - "optional": true + "bundled": true } } }, @@ -7785,6 +7863,11 @@ "prop-types": "^15.5.10" } }, + "react-native-maps": { + "version": "0.22.1", + "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.22.1.tgz", + "integrity": "sha512-JjBpAXjzZY8AW4HTcAZxX+cGk6e6i+J5Vd//DViMUe0bRkKKv92ds1W9rqZ+o9PhUqdP++3DvKv0jrB05icqKA==" + }, "react-native-reanimated": { "version": "1.0.0-alpha.10", "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.0.0-alpha.10.tgz", diff --git a/package.json b/package.json index 4357305..ce83b29 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "empty-project-template", + "name": "bustimes", "main": "node_modules/expo/AppEntry.js", "private": true, "scripts": { @@ -14,6 +14,7 @@ "moment": "^2.22.2", "react": "16.5.0", "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz", + "react-native-maps": "^0.22.1", "react-native-tabs": "^1.0.9" }, "devDependencies": { diff --git a/src/styles.js b/src/styles.js new file mode 100644 index 0000000..17021d7 --- /dev/null +++ b/src/styles.js @@ -0,0 +1,83 @@ +import { StyleSheet } from 'react-native'; + +const element_styles = StyleSheet.create({ + container: { + width: '100%', + padding: 4, + }, + top: { + padding: 6, + display: 'flex', + flexDirection: 'row', + }, + line: { + fontWeight: '900', + fontSize: 26, + textAlign: 'left', + }, + destination: { + paddingLeft: 5, + fontSize: 18, + }, + arrival: { + padding: 4, + fontSize: 14, + textAlign: 'right', + }, + header: { + backgroundColor: '#d3390a', + color: 'white', + fontWeight: '200', + textAlign: 'left', + fontSize: 24, + padding: 4, + paddingLeft: 8 + } +}); + +const styles = StyleSheet.create({ + container: { + display: 'flex', + flex: 1, + flexDirection: 'column', + backgroundColor: '#fff', + alignItems: 'center', + }, + header: { + paddingLeft: 22, + paddingTop: 28, + paddingBottom: 8, + width: '100%', + backgroundColor: '#d3390a', + }, + header_addon: { + paddingLeft: 22, + paddingBottom: 8, + width: '100%', + backgroundColor: '#d3390a', + }, + child: { + width: '100%', + flex: 1, + }, + title: { + fontSize: 22, + color: 'white', + paddingBottom: 8, + }, + list: { + width: '100%', + maxHeight: '100%', + }, + status: { + backgroundColor: '#d3390a', + color: 'white', + padding: 2, + paddingLeft: 24 + }, + button: { + padding: 6 + } +}); + +module.exports = { element_styles, styles }; \ No newline at end of file -- GitLab