init
This commit is contained in:
Martin Donnelly
commit
c41d4b4cec
62
.eslintrc.json
Normal file
62
.eslintrc.json
Normal file
@ -0,0 +1,62 @@
|
||||
{
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2019,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"env": {
|
||||
"es6": true,
|
||||
"browser": true
|
||||
},
|
||||
"plugins": [
|
||||
"svelte3"
|
||||
],
|
||||
"overrides": [
|
||||
{
|
||||
"files": [
|
||||
"**/*.svelte"
|
||||
],
|
||||
"processor": "svelte3/svelte3"
|
||||
}
|
||||
],
|
||||
"rules": {
|
||||
"arrow-spacing": "error",
|
||||
"block-scoped-var": "error",
|
||||
"block-spacing": "error",
|
||||
"brace-style": ["error", "stroustrup", {}],
|
||||
"camelcase": "error",
|
||||
"comma-dangle": ["error", "never"],
|
||||
"comma-spacing": ["error", { "before": false, "after": true }],
|
||||
"comma-style": [1, "last"],
|
||||
"consistent-this": [1, "_this"],
|
||||
"curly": [1, "multi"],
|
||||
"eol-last": 1,
|
||||
"eqeqeq": 1,
|
||||
"func-names": 1,
|
||||
"indent": ["error", 2, { "SwitchCase": 1 }],
|
||||
"lines-around-comment": ["error", { "beforeBlockComment": true, "allowArrayStart": true }],
|
||||
"max-len": [1, 240, 2], // 2 spaces per tab, max 80 chars per line
|
||||
"new-cap": 1,
|
||||
"newline-before-return": "error",
|
||||
"no-array-constructor": 1,
|
||||
"no-inner-declarations": [1, "both"],
|
||||
"no-mixed-spaces-and-tabs": 1,
|
||||
"no-multi-spaces": 2,
|
||||
"no-new-object": 1,
|
||||
"no-shadow-restricted-names": 1,
|
||||
"object-curly-spacing": ["error", "always"],
|
||||
"padded-blocks": ["error", { "blocks": "never", "switches": "always" }],
|
||||
"prefer-const": "error",
|
||||
"prefer-template": "error",
|
||||
"one-var": 0,
|
||||
"quote-props": ["error", "always"],
|
||||
"quotes": [1, "single"],
|
||||
"radix": 1,
|
||||
"semi": [1, "always"],
|
||||
"space-before-blocks": [1, "always"],
|
||||
"space-infix-ops": 1,
|
||||
"vars-on-top": 1,
|
||||
"no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1 }],
|
||||
"spaced-comment": ["error", "always", { "markers": ["/"] }]
|
||||
}
|
||||
|
||||
}
|
||||
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
/node_modules/
|
||||
/public/build/
|
||||
|
||||
.DS_Store
|
||||
5
.idea/.gitignore
vendored
Normal file
5
.idea/.gitignore
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
6
.idea/inspectionProfiles/Project_Default.xml
Normal file
6
.idea/inspectionProfiles/Project_Default.xml
Normal file
@ -0,0 +1,6 @@
|
||||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
|
||||
</profile>
|
||||
</component>
|
||||
6
.idea/jsLibraryMappings.xml
Normal file
6
.idea/jsLibraryMappings.xml
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="JavaScriptLibraryMappings">
|
||||
<includedPredefinedLibrary name="Node.js Core" />
|
||||
</component>
|
||||
</project>
|
||||
6
.idea/misc.xml
Normal file
6
.idea/misc.xml
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="JavaScriptSettings">
|
||||
<option name="languageLevel" value="ES6" />
|
||||
</component>
|
||||
</project>
|
||||
8
.idea/modules.xml
Normal file
8
.idea/modules.xml
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/svelte-traintimes.iml" filepath="$PROJECT_DIR$/.idea/svelte-traintimes.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
12
.idea/svelte-traintimes.iml
Normal file
12
.idea/svelte-traintimes.iml
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
106
README.md
Normal file
106
README.md
Normal file
@ -0,0 +1,106 @@
|
||||
*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
|
||||
|
||||
---
|
||||
|
||||
# Updates
|
||||
|
||||
## 2020-04-17
|
||||
|
||||
Added [svelte-preprocess](https://www.npmjs.com/package/svelte-preprocess) preprocessor with support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript and Pug.
|
||||
|
||||
Added [rollup-plugin-node-builtins](https://www.npmjs.com/package/rollup-plugin-node-builtins) Allows the node builtins to be required/imported. Doing so gives the proper shims to support modules that were designed for Browserify, some modules require rollup-plugin-node-globals.
|
||||
|
||||
Added [rollup-plugin-node-globals](https://www.npmjs.com/package/rollup-plugin-node-globals) Plugin to insert node globals including so code that works with browserify should work even if it uses process or buffers.
|
||||
|
||||
|
||||
---
|
||||
|
||||
# svelte app
|
||||
|
||||
This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
|
||||
|
||||
To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
|
||||
|
||||
```bash
|
||||
npx degit sveltejs/template svelte-app
|
||||
cd svelte-app
|
||||
```
|
||||
|
||||
*Note that you will need to have [Node.js](https://nodejs.org) installed.*
|
||||
|
||||
|
||||
## Get started
|
||||
|
||||
Install the dependencies...
|
||||
|
||||
```bash
|
||||
cd svelte-app
|
||||
npm install
|
||||
```
|
||||
|
||||
...then start [Rollup](https://rollupjs.org):
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
|
||||
|
||||
By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
|
||||
|
||||
|
||||
## Building and running in production mode
|
||||
|
||||
To create an optimised version of the app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
|
||||
|
||||
|
||||
## Single-page app mode
|
||||
|
||||
By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
|
||||
|
||||
If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
|
||||
|
||||
```js
|
||||
"start": "sirv public --single"
|
||||
```
|
||||
|
||||
|
||||
## Deploying to the web
|
||||
|
||||
### With [now](https://zeit.co/now)
|
||||
|
||||
Install `now` if you haven't already:
|
||||
|
||||
```bash
|
||||
npm install -g now
|
||||
```
|
||||
|
||||
Then, from within your project folder:
|
||||
|
||||
```bash
|
||||
cd public
|
||||
now deploy --name my-project
|
||||
```
|
||||
|
||||
As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
|
||||
|
||||
### With [surge](https://surge.sh/)
|
||||
|
||||
Install `surge` if you haven't already:
|
||||
|
||||
```bash
|
||||
npm install -g surge
|
||||
```
|
||||
|
||||
Then, from within your project folder:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
surge public my-project.surge.sh
|
||||
```
|
||||
4197
package-lock.json
generated
Normal file
4197
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
33
package.json
Normal file
33
package.json
Normal file
@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "svelte-app",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"build": "rollup -c",
|
||||
"dev": "rollup -c -w",
|
||||
"start": "sirv public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^11.0.0",
|
||||
"@rollup/plugin-node-resolve": "^7.0.0",
|
||||
"autoprefixer": "^9.7.6",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-plugin-svelte3": "^2.7.3",
|
||||
"node-sass": "^4.13.1",
|
||||
"rollup": "^1.20.0",
|
||||
"rollup-plugin-livereload": "^1.0.0",
|
||||
"rollup-plugin-node-builtins": "^2.1.2",
|
||||
"rollup-plugin-node-globals": "^1.4.0",
|
||||
"rollup-plugin-svelte": "^5.0.3",
|
||||
"rollup-plugin-terser": "^5.1.2",
|
||||
"svelte": "^3.0.0",
|
||||
"svelte-preprocess": "^3.7.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.19.2",
|
||||
"muicss": "^0.10.1",
|
||||
"rollup-plugin-replace": "^2.2.0",
|
||||
"sirv-cli": "^0.4.4",
|
||||
"spectre.css": "^0.5.8",
|
||||
"svelte-spa-router": "^2.1.0"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
0
public/global.css
Normal file
0
public/global.css
Normal file
17
public/index.html
Normal file
17
public/index.html
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||
|
||||
<title>Svelte app</title>
|
||||
|
||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
||||
<link rel='stylesheet' href='/build/bundle.css'>
|
||||
|
||||
<script defer src='/build/bundle.js'></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
91
rollup.config.js
Normal file
91
rollup.config.js
Normal file
@ -0,0 +1,91 @@
|
||||
import svelte from 'rollup-plugin-svelte';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import livereload from 'rollup-plugin-livereload';
|
||||
import replace from 'rollup-plugin-replace';
|
||||
import { terser } from 'rollup-plugin-terser';
|
||||
import sveltePreprocess from 'svelte-preprocess';
|
||||
import builtins from 'rollup-plugin-node-builtins';
|
||||
import globals from 'rollup-plugin-node-globals';
|
||||
|
||||
const production = !process.env.ROLLUP_WATCH;
|
||||
|
||||
const preprocess = sveltePreprocess({
|
||||
'scss': {
|
||||
'includePaths': ['src']
|
||||
},
|
||||
'postcss': {
|
||||
'plugins': [require('autoprefixer')]
|
||||
}
|
||||
});
|
||||
|
||||
export default {
|
||||
'input': 'src/main.js',
|
||||
'output': {
|
||||
'sourcemap': (!production),
|
||||
'format': 'iife',
|
||||
'name': 'app',
|
||||
'file': 'public/build/bundle.js'
|
||||
},
|
||||
'plugins': [
|
||||
// globals(),
|
||||
// builtins(),
|
||||
svelte({
|
||||
// enable run-time checks when not in production
|
||||
'dev': !production,
|
||||
preprocess,
|
||||
// we'll extract any component CSS out into
|
||||
// a separate file - better for performance
|
||||
'css': css => {
|
||||
css.write('public/build/bundle.css');
|
||||
}
|
||||
}),
|
||||
|
||||
// If you have external dependencies installed from
|
||||
// npm, you'll most likely need these plugins. In
|
||||
// some cases you'll need additional configuration -
|
||||
// consult the documentation for details:
|
||||
// https://github.com/rollup/plugins/tree/master/packages/commonjs
|
||||
resolve({
|
||||
'browser': true,
|
||||
'dedupe': ['svelte']
|
||||
}),
|
||||
commonjs(),
|
||||
replace({
|
||||
'exclude': 'node_modules/**',
|
||||
'ENV': JSON.stringify(production ? 'production' : 'development')
|
||||
}),
|
||||
|
||||
// In dev mode, call `npm run start` once
|
||||
// the bundle has been generated
|
||||
!production && serve(),
|
||||
|
||||
// Watch the `public` directory and refresh the
|
||||
// browser on changes when not in production
|
||||
!production && livereload('public'),
|
||||
|
||||
// If we're building for production (npm run build
|
||||
// instead of npm run dev), minify
|
||||
production && terser()
|
||||
],
|
||||
'watch': {
|
||||
'clearScreen': false
|
||||
}
|
||||
};
|
||||
|
||||
function serve() {
|
||||
let started = false;
|
||||
|
||||
return {
|
||||
writeBundle() {
|
||||
if (!started) {
|
||||
started = true;
|
||||
|
||||
require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
|
||||
'stdio': ['ignore', 'inherit', 'inherit'],
|
||||
'shell': true
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
35
src/App.svelte
Normal file
35
src/App.svelte
Normal file
@ -0,0 +1,35 @@
|
||||
<script>
|
||||
import Router from 'svelte-spa-router';
|
||||
import {link, push, pop, replace, location, querystring} from 'svelte-spa-router';
|
||||
import active from 'svelte-spa-router/active'
|
||||
// Import the list of routes
|
||||
import routes from './routes'
|
||||
import Header from "./components/Header.svelte";
|
||||
|
||||
function conditionsFailed(event) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error('Caught event conditionsFailed', event.detail)
|
||||
}
|
||||
|
||||
// Handles the "routeLoaded" event dispatched by the router after a route has been successfully loaded
|
||||
function routeLoaded(event) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.info('Caught event routeLoaded', event.detail)
|
||||
}
|
||||
|
||||
// Handles event bubbling up from nested routes
|
||||
function routeEvent(event) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.info('Caught event routeEvent', event.detail)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss" global>
|
||||
@import "./css/custom.scss";
|
||||
</style>
|
||||
|
||||
|
||||
<Header/>
|
||||
<Router {routes} on:conditionsFailed={conditionsFailed} on:routeLoaded={routeLoaded} on:routeEvent={routeEvent} />
|
||||
32
src/components/Header.svelte
Normal file
32
src/components/Header.svelte
Normal file
@ -0,0 +1,32 @@
|
||||
<script>
|
||||
import {link, push, pop, replace, location, querystring} from 'svelte-spa-router';
|
||||
import active from 'svelte-spa-router/active'
|
||||
|
||||
let titleText = 'Traintimes';
|
||||
let currentMode = 1;
|
||||
|
||||
$: titleText = $location;
|
||||
function goBack() {
|
||||
console.log('>> Header:goBack');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<header id="header">
|
||||
<div class="mui-appbar mui--appbar-line-height mui--z2">
|
||||
{#if currentMode === 1}
|
||||
<div class='mui-col-xs-1 mui-col-md-1 mui--appbar-height'>
|
||||
<a on:click={goBack} class="">
|
||||
<i class="fa-3x fa fa-back mui--align-middle" style="color:white;"></i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
<div class='mui-col-xs-11 mui-col-md-11 mui--appbar-height titleBar'>{titleText}</div>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
17
src/components/TimetableList.svelte
Normal file
17
src/components/TimetableList.svelte
Normal file
@ -0,0 +1,17 @@
|
||||
<script>
|
||||
export let fromStation;
|
||||
export let destStation;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
background: #f55a4e;
|
||||
padding: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<span>TimetableList</span>
|
||||
{fromStation} to {destStation}
|
||||
</div>
|
||||
|
||||
89
src/components/TrainRoute.svelte
Normal file
89
src/components/TrainRoute.svelte
Normal file
@ -0,0 +1,89 @@
|
||||
<script>
|
||||
import {findStation} from '../libs/stations'
|
||||
import {minuteFloor, LocalStorage} from '../libs/utils'
|
||||
import {push} from 'svelte-spa-router';
|
||||
import axios from 'axios';
|
||||
|
||||
import {onMount, onDestroy} from 'svelte';
|
||||
|
||||
export let destStation;
|
||||
export let startStation;
|
||||
|
||||
let startStationName;
|
||||
let destStationName;
|
||||
let url;
|
||||
let baseUrl = 'http://localhost:8100';
|
||||
let displayTime;
|
||||
let trainData = {eta: 'OFF', sta: 'OFF'};
|
||||
let status;
|
||||
let timetablePath;
|
||||
let interval = 0;
|
||||
|
||||
$: {
|
||||
status = (trainData.eta === 'On time') ? 'ontime' : 'delayed';
|
||||
displayTime = (trainData.eta === 'On time') ? trainData.sta : trainData.eta;
|
||||
timetablePath = `#/timetable/${startStation}/${destStation}`
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if( LocalStorage.exists(`${startStation}${destStation}`)) {
|
||||
const fromLS = JSON.parse(LocalStorage.load(`${startStation}${destStation}`));
|
||||
trainData = {...trainData, ...fromLS};
|
||||
}
|
||||
|
||||
startStationName = findStation(startStation);
|
||||
destStationName = findStation(destStation);
|
||||
url = `${baseUrl}/getnexttraintimes?from=${startStation}&to=${destStation}`;
|
||||
updateTrain();
|
||||
});
|
||||
|
||||
onDestroy(async () => {
|
||||
clearInterval(interval);
|
||||
LocalStorage.save(`${startStation}${destStation}`, JSON.stringify(trainData));
|
||||
});
|
||||
|
||||
function onClick() {
|
||||
console.log('Onclick', timetablePath);
|
||||
push(timetablePath);
|
||||
}
|
||||
|
||||
async function updateTrain() {
|
||||
console.log(`Update: ${startStation} / ${destStation}`)
|
||||
const now = new Date()
|
||||
const hours = now.getHours()
|
||||
const limit = (hours < 6) ? 3600000 : 95000
|
||||
const mod = limit - (now.getTime() % limit)
|
||||
await getTrain()
|
||||
clearTimeout(interval)
|
||||
interval = 0
|
||||
interval = setTimeout(updateTrain, mod + 10)
|
||||
}
|
||||
|
||||
async function getTrain() {
|
||||
const minuteHash = minuteFloor()
|
||||
const workingUrl = url.concat(`&mh=${minuteHash}`)
|
||||
axios.get(workingUrl)
|
||||
.then((d) => {
|
||||
trainData = {...d.data}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.entry {
|
||||
height: 36px;
|
||||
margin: 6px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="mui-row card">
|
||||
<div class='mui-col-xs-7 mui-col-md-7 entry'>
|
||||
<div>{startStationName}</div>
|
||||
<div>{destStationName}</div>
|
||||
</div>
|
||||
<div class='mui-col-xs-5 mui-col-md-5 mui--text-right'>
|
||||
<span class="mui-btn mui-btn--flat time {status}" on:click={onClick}>{displayTime}</span>
|
||||
</div>
|
||||
</div>
|
||||
12
src/components/TrainService.svelte
Normal file
12
src/components/TrainService.svelte
Normal file
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
background: #f55a4e;
|
||||
padding: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<span>TrainService</span>
|
||||
88
src/css/common.css
Normal file
88
src/css/common.css
Normal file
@ -0,0 +1,88 @@
|
||||
body {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
min-height:48px;
|
||||
margin: 8px;
|
||||
border-bottom-color: #666666;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.mui--text-display4, .mui--text-display3 {
|
||||
font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial;
|
||||
}
|
||||
|
||||
.temp0, .temp1, .temp2, .temp3, .temp4, .temp5 {
|
||||
color: rgb(80,181,221)
|
||||
}
|
||||
|
||||
.temp6 {
|
||||
color: rgb(78,178,206)
|
||||
}
|
||||
|
||||
.temp7 {
|
||||
color: rgb(76, 176, 190)
|
||||
}
|
||||
|
||||
.temp8 {
|
||||
color: rgb(73, 173, 175)
|
||||
}
|
||||
|
||||
.temp9 {
|
||||
color: rgb(72, 171, 159)
|
||||
}
|
||||
|
||||
.temp10 {
|
||||
color: rgb(70, 168, 142)
|
||||
}
|
||||
|
||||
.temp11 {
|
||||
color: rgb(68, 166, 125)
|
||||
}
|
||||
|
||||
.temp12 {
|
||||
color: rgb(66, 164, 108)
|
||||
}
|
||||
|
||||
.temp13 {
|
||||
color: rgb(102, 173, 94)
|
||||
}
|
||||
|
||||
.temp14 {
|
||||
color: rgb(135, 190, 64)
|
||||
}
|
||||
|
||||
.temp15 {
|
||||
color: rgb(179, 204, 26)
|
||||
}
|
||||
|
||||
.temp16 {
|
||||
color: rgb(214, 213, 28)
|
||||
}
|
||||
|
||||
.temp17 {
|
||||
color: rgb(249, 202, 3)
|
||||
}
|
||||
|
||||
.temp18 {
|
||||
color: rgb(246, 181, 3)
|
||||
}
|
||||
|
||||
.temp19 {
|
||||
color: rgb(244, 150, 26)
|
||||
}
|
||||
|
||||
.temp20 {
|
||||
color: rgb(236, 110, 5)
|
||||
}
|
||||
|
||||
.day {
|
||||
font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.summary::first-letter {
|
||||
text-transform: capitalize
|
||||
}
|
||||
336
src/css/custom.scss
Normal file
336
src/css/custom.scss
Normal file
@ -0,0 +1,336 @@
|
||||
// import MUI colors
|
||||
@import "./node_modules/muicss/lib/sass/mui/colors";
|
||||
|
||||
// customize MUI variables
|
||||
$mui-primary-color: mui-color("blue-grey", "500");
|
||||
$mui-primary-color-dark: mui-color("blue-grey", "700");
|
||||
$mui-primary-color-light: mui-color("blue-grey", "100");
|
||||
|
||||
$mui-accent-color: mui-color("deep-purple", "900");
|
||||
$mui-accent-color-dark: mui-color("indigo", "A100");
|
||||
$mui-accent-color-light: mui-color("indigo", "A400");
|
||||
|
||||
$mui-base-font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, Verdana,
|
||||
"Trebuchet MS";
|
||||
|
||||
// import MUI SASS
|
||||
@import "./node_modules/muicss/lib/sass/mui";
|
||||
@import "./src/css/viewport";
|
||||
@import "./src/css/horscroll";
|
||||
@import "./src/css/spinner";
|
||||
////
|
||||
|
||||
body {
|
||||
background-color: mui-color("grey", "100");
|
||||
}
|
||||
|
||||
#header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
transition: left 0.2s;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0 4px 0 0;
|
||||
}
|
||||
|
||||
.dates {
|
||||
padding: 2px;
|
||||
border: solid 1px #80007e;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#btc,
|
||||
#fx,
|
||||
#trend {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
.up,
|
||||
.ontime,
|
||||
.trendUp {
|
||||
color: mui-color("green") !important;
|
||||
}
|
||||
|
||||
.down,
|
||||
.delayed,
|
||||
.trendDown {
|
||||
color: $mui-text-danger !important;
|
||||
}
|
||||
|
||||
.nochange {
|
||||
color: #000000;
|
||||
}
|
||||
.password {
|
||||
border: 1px solid mui-color("grey", "400");
|
||||
background-color: mui-color("grey", "200");
|
||||
font-family: monospace;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.trendUp:before {
|
||||
content: "▲";
|
||||
}
|
||||
|
||||
.trendDown:before {
|
||||
content: "▼";
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
min-height: 48px;
|
||||
margin: 8px;
|
||||
border-bottom-color: #666666;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.entry {
|
||||
height: 36px;
|
||||
margin: 6px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-family: "Roboto";
|
||||
}
|
||||
|
||||
.titleBar {
|
||||
font-family: "Gotham Light";
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
#trains,
|
||||
#trainResults {
|
||||
overflow-y: auto;
|
||||
transition: all 0.5s;
|
||||
-webkit-transition: all 0.5s;
|
||||
}
|
||||
|
||||
.tableBody {
|
||||
transition: all 0.5s;
|
||||
-webkit-transition: all 0.5s;
|
||||
}
|
||||
|
||||
.unsliced {
|
||||
height: 455px;
|
||||
}
|
||||
.sliced {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* The snackbar - position it at the bottom and in the middle of the screen */
|
||||
#snackbar {
|
||||
visibility: hidden; /* Hidden by default. Visible on click */
|
||||
min-width: 250px; /* Set a default minimum width */
|
||||
margin-left: -125px; /* Divide value of min-width by 2 */
|
||||
background-color: #333; /* Black background color */
|
||||
color: #fff; /* White text color */
|
||||
text-align: center; /* Centered text */
|
||||
border-radius: 2px; /* Rounded borders */
|
||||
padding: 16px; /* Padding */
|
||||
position: fixed; /* Sit on top of the screen */
|
||||
z-index: 1; /* Add a z-index if needed */
|
||||
left: 50%; /* Center the snackbar */
|
||||
bottom: 30px; /* 30px from the bottom */
|
||||
}
|
||||
|
||||
/* Show the snackbar when clicking on a button (class added with JavaScript) */
|
||||
#snackbar.show {
|
||||
visibility: visible; /* Show the snackbar */
|
||||
|
||||
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
|
||||
However, delay the fade out process for 2.5 seconds */
|
||||
/* -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
animation: fadein 0.5s, fadeout 0.5s 2.5s;*/
|
||||
|
||||
-webkit-animation: fadein 0.5s;
|
||||
animation: fadein 0.5s;
|
||||
}
|
||||
|
||||
/* Animations to fade the snackbar in and out */
|
||||
@-webkit-keyframes fadein {
|
||||
from {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
bottom: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
bottom: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeout {
|
||||
from {
|
||||
bottom: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeout {
|
||||
from {
|
||||
bottom: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.stop-scrolling {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
position: absolute;
|
||||
z-index: 5000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: mui-color("grey", "300");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
}
|
||||
|
||||
.fillpanel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: mui-color("amber", "50");
|
||||
}
|
||||
|
||||
.fullscreen .header {
|
||||
/*position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: +1;
|
||||
transition: left 0.2s;*/
|
||||
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
// overflow:auto;
|
||||
}
|
||||
|
||||
.box .headerSpacer {
|
||||
flex: 0 1 66px;
|
||||
}
|
||||
|
||||
.box .content {
|
||||
flex: 1 1 auto;
|
||||
background-color: mui-color("white");
|
||||
overflow: auto;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.newsarticle img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.tiny {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.medium {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.large {
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
.cardLink {
|
||||
color: mui-color("blue", "500");
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.endbumper {
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
.seemore {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#connectionStatus {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.trafficHeavy {
|
||||
color: #fa4a50;
|
||||
}
|
||||
|
||||
.trafficLight {
|
||||
color: #fdbd15;
|
||||
}
|
||||
|
||||
.trafficMedium {
|
||||
color: #fba010;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
#bymeImages {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.bbm-wrapper {
|
||||
z-index: 2000 !important;
|
||||
}
|
||||
|
||||
.cancelledRow {
|
||||
background: repeating-linear-gradient(
|
||||
-55deg,
|
||||
#ff000010,
|
||||
#ff000010 10px,
|
||||
#fff 10px,
|
||||
#fff 20px
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
.nrccAlert a {
|
||||
color:#212121;
|
||||
}
|
||||
52
src/css/horscroll.scss
Normal file
52
src/css/horscroll.scss
Normal file
@ -0,0 +1,52 @@
|
||||
|
||||
.scrolling-wrapper-flexbox {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
|
||||
.scrollCard, .scrollCardHalf, .imageCard, .hourlyCard {
|
||||
flex: 0 0 auto;
|
||||
margin-right: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollCard, .scrollCardHalf, .hourlyCard {
|
||||
width: 250px;
|
||||
height: 175px;
|
||||
overflow-y: hidden;
|
||||
border-radius: 3px;
|
||||
background-color: #f5f5f5;
|
||||
padding: 5px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.05), 0 2px 1px -2px rgba(0,0,0,0.05), 0 1px 5px 0 rgba(0,0,0,0.05)
|
||||
}
|
||||
|
||||
.scrollCardHalf {
|
||||
height: 85px;
|
||||
}
|
||||
|
||||
.hourlyCard {
|
||||
width: 42px;
|
||||
height:70px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.imageCard {
|
||||
// width: 250px;
|
||||
height: 175px;
|
||||
overflow-y: hidden;
|
||||
|
||||
}
|
||||
.imageCard img {
|
||||
max-height:100%;
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
.scrolling-wrapper, .scrolling-wrapper-flexbox {
|
||||
height: 75px;
|
||||
width: 100%;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
181
src/css/skeleton-min.css
vendored
Normal file
181
src/css/skeleton-min.css
vendored
Normal file
@ -0,0 +1,181 @@
|
||||
.container{position:relative;width:100%;max-width:960px;margin:0 auto;padding:0 20px;box-sizing:border-box;}
|
||||
.column,
|
||||
.columns{width:100%;float:left;box-sizing:border-box;}
|
||||
@media (min-width:400px){.container{width:85%;padding:0;}
|
||||
}
|
||||
@media (min-width:550px){.container{width:80%;}
|
||||
.column,
|
||||
.columns{margin-left:4%;}
|
||||
.column:first-child,
|
||||
.columns:first-child{margin-left:0;}
|
||||
.one.column,
|
||||
.one.columns{width:4.66666666667%;}
|
||||
.two.columns{width:13.3333333333%;}
|
||||
.three.columns{width:22%;}
|
||||
.four.columns{width:30.6666666667%;}
|
||||
.five.columns{width:39.3333333333%;}
|
||||
.six.columns{width:48%;}
|
||||
.seven.columns{width:56.6666666667%;}
|
||||
.eight.columns{width:65.3333333333%;}
|
||||
.nine.columns{width:74.0%;}
|
||||
.ten.columns{width:82.6666666667%;}
|
||||
.eleven.columns{width:91.3333333333%;}
|
||||
.twelve.columns{width:100%;margin-left:0;}
|
||||
.one-third.column{width:30.6666666667%;}
|
||||
.two-thirds.column{width:65.3333333333%;}
|
||||
.one-half.column{width:48%;}
|
||||
.offset-by-one.column,
|
||||
.offset-by-one.columns{margin-left:8.66666666667%;}
|
||||
.offset-by-two.column,
|
||||
.offset-by-two.columns{margin-left:17.3333333333%;}
|
||||
.offset-by-three.column,
|
||||
.offset-by-three.columns{margin-left:26%;}
|
||||
.offset-by-four.column,
|
||||
.offset-by-four.columns{margin-left:34.6666666667%;}
|
||||
.offset-by-five.column,
|
||||
.offset-by-five.columns{margin-left:43.3333333333%;}
|
||||
.offset-by-six.column,
|
||||
.offset-by-six.columns{margin-left:52%;}
|
||||
.offset-by-seven.column,
|
||||
.offset-by-seven.columns{margin-left:60.6666666667%;}
|
||||
.offset-by-eight.column,
|
||||
.offset-by-eight.columns{margin-left:69.3333333333%;}
|
||||
.offset-by-nine.column,
|
||||
.offset-by-nine.columns{margin-left:78.0%;}
|
||||
.offset-by-ten.column,
|
||||
.offset-by-ten.columns{margin-left:86.6666666667%;}
|
||||
.offset-by-eleven.column,
|
||||
.offset-by-eleven.columns{margin-left:95.3333333333%;}
|
||||
.offset-by-one-third.column,
|
||||
.offset-by-one-third.columns{margin-left:34.6666666667%;}
|
||||
.offset-by-two-thirds.column,
|
||||
.offset-by-two-thirds.columns{margin-left:69.3333333333%;}
|
||||
.offset-by-one-half.column,
|
||||
.offset-by-one-half.columns{margin-left:52%;}
|
||||
}
|
||||
html{font-size:62.5%;}
|
||||
body{font-size:1.5em;line-height:1.6;font-weight:400;font-family:"Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;color:#222;}
|
||||
h1, h2, h3, h4, h5, h6{margin-top:0;margin-bottom:2rem;font-weight:300;}
|
||||
h1{font-size:4.0rem;line-height:1.2;letter-spacing:-.1rem;}
|
||||
h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem;}
|
||||
h3{font-size:3.0rem;line-height:1.3;letter-spacing:-.1rem;}
|
||||
h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem;}
|
||||
h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem;}
|
||||
h6{font-size:1.5rem;line-height:1.6;letter-spacing:0;}
|
||||
@media (min-width:550px){h1{font-size:5.0rem;}
|
||||
h2{font-size:4.2rem;}
|
||||
h3{font-size:3.6rem;}
|
||||
h4{font-size:3.0rem;}
|
||||
h5{font-size:2.4rem;}
|
||||
h6{font-size:1.5rem;}
|
||||
}
|
||||
p{margin-top:0;}
|
||||
a{color:#1EAEDB;}
|
||||
a:hover{color:#0FA0CE;}
|
||||
.button,
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"]{display:inline-block;height:38px;padding:0 30px;color:#555;text-align:center;font-size:11px;font-weight:600;line-height:38px;letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;background-color:transparent;border-radius:4px;border:1px solid #bbb;cursor:pointer;box-sizing:border-box;}
|
||||
.button:hover,
|
||||
button:hover,
|
||||
input[type="submit"]:hover,
|
||||
input[type="reset"]:hover,
|
||||
input[type="button"]:hover,
|
||||
.button:focus,
|
||||
button:focus,
|
||||
input[type="submit"]:focus,
|
||||
input[type="reset"]:focus,
|
||||
input[type="button"]:focus{color:#333;border-color:#888;outline:0;}
|
||||
.button.button-primary,
|
||||
button.button-primary,
|
||||
input[type="submit"].button-primary,
|
||||
input[type="reset"].button-primary,
|
||||
input[type="button"].button-primary{color:#FFF;background-color:#33C3F0;border-color:#33C3F0;}
|
||||
.button.button-primary:hover,
|
||||
button.button-primary:hover,
|
||||
input[type="submit"].button-primary:hover,
|
||||
input[type="reset"].button-primary:hover,
|
||||
input[type="button"].button-primary:hover,
|
||||
.button.button-primary:focus,
|
||||
button.button-primary:focus,
|
||||
input[type="submit"].button-primary:focus,
|
||||
input[type="reset"].button-primary:focus,
|
||||
input[type="button"].button-primary:focus{color:#FFF;background-color:#1EAEDB;border-color:#1EAEDB;}
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="text"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
textarea,
|
||||
select{height:38px;padding:6px 10px;background-color:#fff;border:1px solid #D1D1D1;border-radius:4px;box-shadow:none;box-sizing:border-box;}
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="text"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;}
|
||||
textarea{min-height:65px;padding-top:6px;padding-bottom:6px;}
|
||||
input[type="email"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="password"]:focus,
|
||||
textarea:focus,
|
||||
select:focus{border:1px solid #33C3F0;outline:0;}
|
||||
label,
|
||||
legend{display:block;margin-bottom:.5rem;font-weight:600;}
|
||||
fieldset{padding:0;border-width:0;}
|
||||
input[type="checkbox"],
|
||||
input[type="radio"]{display:inline;}
|
||||
label > .label-body{display:inline-block;margin-left:.5rem;font-weight:normal;}
|
||||
ul{list-style:circle inside;}
|
||||
ol{list-style:decimal inside;}
|
||||
ol, ul{padding-left:0;margin-top:0;}
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ol,
|
||||
ol ul{margin:1.5rem 0 1.7rem 3rem;font-size:90%;}
|
||||
li{margin-bottom:1rem;}
|
||||
code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;background:#F1F1F1;border:1px solid #E1E1E1;border-radius:4px;}
|
||||
pre > code{display:block;padding:1rem 1.5rem;white-space:pre;}
|
||||
th,
|
||||
td{padding:12px 15px;text-align:left;border-bottom:1px solid #E1E1E1;}
|
||||
th:first-child,
|
||||
td:first-child{padding-left:0;}
|
||||
th:last-child,
|
||||
td:last-child{padding-right:0;}
|
||||
button,
|
||||
.button{margin-bottom:1rem;}
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
fieldset{margin-bottom:1.5rem;}
|
||||
pre,
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
table,
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
form{margin-bottom:2.5rem;}
|
||||
.u-full-width{width:100%;box-sizing:border-box;}
|
||||
.u-max-full-width{max-width:100%;box-sizing:border-box;}
|
||||
.u-pull-right{float:right;}
|
||||
.u-pull-left{float:left;}
|
||||
hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #E1E1E1;}
|
||||
.container:after,
|
||||
.row:after,
|
||||
.u-cf{content:"";display:table;clear:both;}
|
||||
@media (min-width:400px){}
|
||||
@media (min-width:550px){}
|
||||
@media (min-width:750px){}
|
||||
@media (min-width:1000px){}
|
||||
@media (min-width:1200px){}
|
||||
419
src/css/skeleton.css
vendored
Normal file
419
src/css/skeleton.css
vendored
Normal file
@ -0,0 +1,419 @@
|
||||
/*
|
||||
* Skeleton V2.0.4
|
||||
* Copyright 2014, Dave Gamache
|
||||
* www.getskeleton.com
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* 12/29/2014
|
||||
*/
|
||||
|
||||
|
||||
/* Table of contents
|
||||
––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
- Grid
|
||||
- Base Styles
|
||||
- Typography
|
||||
- Links
|
||||
- Buttons
|
||||
- Forms
|
||||
- Lists
|
||||
- Code
|
||||
- Tables
|
||||
- Spacing
|
||||
- Utilities
|
||||
- Clearing
|
||||
- Media Queries
|
||||
*/
|
||||
|
||||
|
||||
/* Grid
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box; }
|
||||
.column,
|
||||
.columns {
|
||||
width: 100%;
|
||||
float: left;
|
||||
box-sizing: border-box; }
|
||||
|
||||
/* For devices larger than 400px */
|
||||
@media (min-width: 400px) {
|
||||
.container {
|
||||
width: 85%;
|
||||
padding: 0; }
|
||||
}
|
||||
|
||||
/* For devices larger than 550px */
|
||||
@media (min-width: 550px) {
|
||||
.container {
|
||||
width: 80%; }
|
||||
.column,
|
||||
.columns {
|
||||
margin-left: 4%; }
|
||||
.column:first-child,
|
||||
.columns:first-child {
|
||||
margin-left: 0; }
|
||||
|
||||
.one.column,
|
||||
.one.columns { width: 4.66666666667%; }
|
||||
.two.columns { width: 13.3333333333%; }
|
||||
.three.columns { width: 22%; }
|
||||
.four.columns { width: 30.6666666667%; }
|
||||
.five.columns { width: 39.3333333333%; }
|
||||
.six.columns { width: 48%; }
|
||||
.seven.columns { width: 56.6666666667%; }
|
||||
.eight.columns { width: 65.3333333333%; }
|
||||
.nine.columns { width: 74.0%; }
|
||||
.ten.columns { width: 82.6666666667%; }
|
||||
.eleven.columns { width: 91.3333333333%; }
|
||||
.twelve.columns { width: 100%; margin-left: 0; }
|
||||
|
||||
.one-third.column { width: 30.6666666667%; }
|
||||
.two-thirds.column { width: 65.3333333333%; }
|
||||
|
||||
.one-half.column { width: 48%; }
|
||||
|
||||
/* Offsets */
|
||||
.offset-by-one.column,
|
||||
.offset-by-one.columns { margin-left: 8.66666666667%; }
|
||||
.offset-by-two.column,
|
||||
.offset-by-two.columns { margin-left: 17.3333333333%; }
|
||||
.offset-by-three.column,
|
||||
.offset-by-three.columns { margin-left: 26%; }
|
||||
.offset-by-four.column,
|
||||
.offset-by-four.columns { margin-left: 34.6666666667%; }
|
||||
.offset-by-five.column,
|
||||
.offset-by-five.columns { margin-left: 43.3333333333%; }
|
||||
.offset-by-six.column,
|
||||
.offset-by-six.columns { margin-left: 52%; }
|
||||
.offset-by-seven.column,
|
||||
.offset-by-seven.columns { margin-left: 60.6666666667%; }
|
||||
.offset-by-eight.column,
|
||||
.offset-by-eight.columns { margin-left: 69.3333333333%; }
|
||||
.offset-by-nine.column,
|
||||
.offset-by-nine.columns { margin-left: 78.0%; }
|
||||
.offset-by-ten.column,
|
||||
.offset-by-ten.columns { margin-left: 86.6666666667%; }
|
||||
.offset-by-eleven.column,
|
||||
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
|
||||
|
||||
.offset-by-one-third.column,
|
||||
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
|
||||
.offset-by-two-thirds.column,
|
||||
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
|
||||
|
||||
.offset-by-one-half.column,
|
||||
.offset-by-one-half.columns { margin-left: 52%; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Base Styles
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/* NOTE
|
||||
html is set to 62.5% so that all the REM measurements throughout Skeleton
|
||||
are based on 10px sizing. So basically 1.5rem = 15px :) */
|
||||
html {
|
||||
font-size: 62.5%; }
|
||||
body {
|
||||
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
font-family: 'Roboto', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #222; }
|
||||
|
||||
|
||||
/* Typography
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
|
||||
margin-top: 0;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: 300; }
|
||||
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
|
||||
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
|
||||
h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
|
||||
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; font-weight:700;}
|
||||
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
|
||||
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
|
||||
|
||||
/* Larger than phablet */
|
||||
@media (min-width: 550px) {
|
||||
h1 { font-size: 5.0rem; }
|
||||
h2 { font-size: 4.2rem; }
|
||||
h3 { font-size: 3.6rem; }
|
||||
h4 { font-size: 3.0rem; }
|
||||
h5 { font-size: 2.4rem; }
|
||||
h6 { font-size: 1.5rem; }
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0; }
|
||||
|
||||
|
||||
/* Links
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
a {
|
||||
color: #1EAEDB; }
|
||||
a:hover {
|
||||
color: #0FA0CE; }
|
||||
|
||||
|
||||
/* Buttons
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.button,
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
display: inline-block;
|
||||
height: 38px;
|
||||
padding: 0 30px;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 38px;
|
||||
letter-spacing: .1rem;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #bbb;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box; }
|
||||
.button:hover,
|
||||
button:hover,
|
||||
input[type="submit"]:hover,
|
||||
input[type="reset"]:hover,
|
||||
input[type="button"]:hover,
|
||||
.button:focus,
|
||||
button:focus,
|
||||
input[type="submit"]:focus,
|
||||
input[type="reset"]:focus,
|
||||
input[type="button"]:focus {
|
||||
color: #333;
|
||||
border-color: #888;
|
||||
outline: 0; }
|
||||
.button.button-primary,
|
||||
button.button-primary,
|
||||
input[type="submit"].button-primary,
|
||||
input[type="reset"].button-primary,
|
||||
input[type="button"].button-primary {
|
||||
color: #FFF;
|
||||
background-color: #33C3F0;
|
||||
border-color: #33C3F0; }
|
||||
.button.button-primary:hover,
|
||||
button.button-primary:hover,
|
||||
input[type="submit"].button-primary:hover,
|
||||
input[type="reset"].button-primary:hover,
|
||||
input[type="button"].button-primary:hover,
|
||||
.button.button-primary:focus,
|
||||
button.button-primary:focus,
|
||||
input[type="submit"].button-primary:focus,
|
||||
input[type="reset"].button-primary:focus,
|
||||
input[type="button"].button-primary:focus {
|
||||
color: #FFF;
|
||||
background-color: #1EAEDB;
|
||||
border-color: #1EAEDB; }
|
||||
|
||||
|
||||
/* Forms
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="text"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
textarea,
|
||||
select {
|
||||
height: 38px;
|
||||
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
|
||||
background-color: #fff;
|
||||
border: 1px solid #D1D1D1;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box; }
|
||||
/* Removes awkward default styles on some inputs for iOS */
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="text"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none; }
|
||||
textarea {
|
||||
min-height: 65px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px; }
|
||||
input[type="email"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="password"]:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border: 1px solid #33C3F0;
|
||||
outline: 0; }
|
||||
label,
|
||||
legend {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 600; }
|
||||
fieldset {
|
||||
padding: 0;
|
||||
border-width: 0; }
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: inline; }
|
||||
label > .label-body {
|
||||
display: inline-block;
|
||||
margin-left: .5rem;
|
||||
font-weight: normal; }
|
||||
|
||||
|
||||
/* Lists
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
ul {
|
||||
list-style: circle inside; }
|
||||
ol {
|
||||
list-style: decimal inside; }
|
||||
ol, ul {
|
||||
padding-left: 0;
|
||||
margin-top: 0; }
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ol,
|
||||
ol ul {
|
||||
margin: 1.5rem 0 1.5rem 3rem;
|
||||
font-size: 90%; }
|
||||
li {
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
|
||||
/* Code
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
code {
|
||||
padding: .2rem .5rem;
|
||||
margin: 0 .2rem;
|
||||
font-size: 90%;
|
||||
white-space: nowrap;
|
||||
background: #F1F1F1;
|
||||
border: 1px solid #E1E1E1;
|
||||
border-radius: 4px; }
|
||||
pre > code {
|
||||
display: block;
|
||||
padding: 1rem 1.5rem;
|
||||
white-space: pre; }
|
||||
|
||||
|
||||
/* Tables
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
th,
|
||||
td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #E1E1E1; }
|
||||
th:first-child,
|
||||
td:first-child {
|
||||
padding-left: 0; }
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
padding-right: 0; }
|
||||
|
||||
|
||||
/* Spacing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
button,
|
||||
.button {
|
||||
margin-bottom: 1rem; }
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
fieldset {
|
||||
margin-bottom: 1.5rem; }
|
||||
pre,
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
table,
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
form {
|
||||
margin-bottom: 2.5rem; }
|
||||
|
||||
|
||||
/* Utilities
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.u-full-width {
|
||||
width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.u-max-full-width {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.u-pull-right {
|
||||
float: right; }
|
||||
.u-pull-left {
|
||||
float: left; }
|
||||
|
||||
|
||||
/* Misc
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
hr {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3.5rem;
|
||||
border-width: 0;
|
||||
border-top: 1px solid #E1E1E1; }
|
||||
|
||||
|
||||
/* Clearing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
/* Self Clearing Goodness */
|
||||
.container:after,
|
||||
.row:after,
|
||||
.u-cf {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
|
||||
|
||||
/* Media Queries
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/*
|
||||
Note: The best way to structure the use of media queries is to create the queries
|
||||
near the relevant code. For example, if you wanted to change the styles for buttons
|
||||
on small devices, paste the mobile query code up in the buttons section and style it
|
||||
there.
|
||||
*/
|
||||
|
||||
|
||||
/* Larger than mobile */
|
||||
@media (min-width: 400px) {}
|
||||
|
||||
/* Larger than phablet (also point when grid becomes active) */
|
||||
@media (min-width: 550px) {}
|
||||
|
||||
/* Larger than tablet */
|
||||
@media (min-width: 750px) {}
|
||||
|
||||
/* Larger than desktop */
|
||||
@media (min-width: 1000px) {}
|
||||
|
||||
/* Larger than Desktop HD */
|
||||
@media (min-width: 1200px) {}
|
||||
93
src/css/spinner.scss
Normal file
93
src/css/spinner.scss
Normal file
@ -0,0 +1,93 @@
|
||||
$green: #008744;
|
||||
$blue: #0fa3ef;
|
||||
$red: #dc4f43;
|
||||
$yellow: #ffbe39;
|
||||
$white: #eee;
|
||||
$black: #301010;
|
||||
|
||||
// scaling... any units
|
||||
$width: 100px;
|
||||
|
||||
body {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
// demo-specific
|
||||
.showbox {
|
||||
position: absolute;
|
||||
top: 40vh;
|
||||
bottom: 60vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 5%;
|
||||
}
|
||||
// end demo-specific
|
||||
|
||||
.loader {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: $width;
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.circular {
|
||||
animation: rotate 2s linear infinite;
|
||||
height: 100%;
|
||||
transform-origin: center center;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.path {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35px;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes color {
|
||||
100%,
|
||||
0% {
|
||||
stroke: $red;
|
||||
}
|
||||
40% {
|
||||
stroke: $yellow;
|
||||
}
|
||||
66% {
|
||||
stroke: $blue;
|
||||
}
|
||||
80%,
|
||||
90% {
|
||||
stroke: $black;
|
||||
}
|
||||
}
|
||||
81
src/css/viewport.scss
Normal file
81
src/css/viewport.scss
Normal file
@ -0,0 +1,81 @@
|
||||
.viewport {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* encapsulate the various syntax in helper clases */
|
||||
/* inspired by http://infrequently.org/2009/08/css-3-progress/ */
|
||||
|
||||
/* items flex/expand vertically */
|
||||
.vbox {
|
||||
/* previous syntax */
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: box;
|
||||
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
-ms-box-orient: vertical;
|
||||
box-orient: vertical;
|
||||
|
||||
/* current syntax */
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flex;
|
||||
display: flex;
|
||||
|
||||
-webkit-flex-direction: column;
|
||||
-moz-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gradient {
|
||||
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
|
||||
background: #ebf1f6; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to bottom, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf1f6', endColorstr='#d5ebfb', GradientType=0); /* IE6-9 */
|
||||
}
|
||||
|
||||
.backgroundImage {
|
||||
background-image: url(http://via.placeholder.com/411x823);
|
||||
}
|
||||
|
||||
.appPanel {
|
||||
/* previous syntax */
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
-ms-box-flex: 1;
|
||||
box-flex: 1;
|
||||
|
||||
/* current syntax */
|
||||
-webkit-flex: 1;
|
||||
-moz-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
overflow-y: auto;
|
||||
/* background-color: white;*/
|
||||
}
|
||||
|
||||
[data-id~="main"] {
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
}
|
||||
|
||||
[data-id~="routeP"] {
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
}
|
||||
12
src/libs/stations.js
Normal file
12
src/libs/stations.js
Normal file
File diff suppressed because one or more lines are too long
120
src/libs/utils.js
Normal file
120
src/libs/utils.js
Normal file
@ -0,0 +1,120 @@
|
||||
function partOfDay (timeString, today) {
|
||||
console.log(new Date());
|
||||
if (timeString === undefined || timeString === null) timeString = (new Date()).getHours().toString();
|
||||
|
||||
if (today === undefined) today = false;
|
||||
|
||||
const hours = timeString.substring(0, 2);
|
||||
let dayBit = '';
|
||||
|
||||
console.log('Hours', hours);
|
||||
|
||||
if (hours >= 0 && hours < 4)
|
||||
dayBit = 'Late Night';
|
||||
|
||||
else if (hours >= 4 && hours < 7)
|
||||
dayBit = 'Early Morning';
|
||||
|
||||
else if (hours >= 7 && hours < 12)
|
||||
dayBit = 'Morning';
|
||||
|
||||
else if (hours >= 12 && hours < 17)
|
||||
dayBit = 'Afternoon';
|
||||
|
||||
else if (hours < 21)
|
||||
dayBit = 'Evening';
|
||||
|
||||
else dayBit = 'Night';
|
||||
|
||||
if (today)
|
||||
if (dayBit === 'night') {
|
||||
dayBit = 'tonight';
|
||||
}
|
||||
else {
|
||||
dayBit = `this ${dayBit}`;
|
||||
}
|
||||
|
||||
console.log('partOfDay', dayBit);
|
||||
|
||||
return dayBit;
|
||||
}
|
||||
|
||||
function toHour (extra = 0) {
|
||||
const now = new Date();
|
||||
|
||||
return (3600000 - (now.getTime() % 3600000)) + extra;
|
||||
}
|
||||
|
||||
function hourFloor () {
|
||||
const now = new Date();
|
||||
|
||||
return parseInt(~~(now.getTime() / 3600000) * 3600000, 10).toString(32);
|
||||
}
|
||||
|
||||
function minuteFloor () {
|
||||
const now = new Date();
|
||||
|
||||
return parseInt(~~(now.getTime() / 60000) * 60000, 10).toString(32);
|
||||
}
|
||||
|
||||
function distance (lat1, lon1, lat2, lon2) {
|
||||
const p = 0.017453292519943295; // Math.PI / 180
|
||||
const c = Math.cos;
|
||||
const a = 0.5 - c((lat2 - lat1) * p) / 2 +
|
||||
c(lat1 * p) * c(lat2 * p) *
|
||||
(1 - c((lon2 - lon1) * p)) / 2;
|
||||
|
||||
return 12742 * Math.asin(Math.sqrt(a)); // 2 * R; R = 6371 km
|
||||
}
|
||||
|
||||
/* function splitURL (url) {
|
||||
|
||||
} */
|
||||
|
||||
const maybePluralize = (count, noun, suffix = 's') =>
|
||||
`${count} ${noun}${count !== 1 ? suffix : ''}`;
|
||||
|
||||
function supportsLocalStorage() {
|
||||
try {
|
||||
if (!localStorage)return false;
|
||||
else return true;
|
||||
// May only need the above simple test
|
||||
// - old versions of firefox may cause problem?
|
||||
// return 'localStorage' in window && window['localStorage']!==null;
|
||||
}
|
||||
catch(e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
let LocalStorage = {};
|
||||
|
||||
if (supportsLocalStorage())
|
||||
LocalStorage = {
|
||||
'save':function ( i, v ) {
|
||||
localStorage[i] = v;
|
||||
},
|
||||
'load':function ( i ) {
|
||||
return localStorage[i];
|
||||
},
|
||||
'exists':function(i) {
|
||||
return !(typeof(localStorage[i]) === 'undefined');
|
||||
}
|
||||
};
|
||||
else
|
||||
LocalStorage = {
|
||||
'save':function ( i, v ) {
|
||||
document.cookie = `${i }=${ encodeURIComponent(v)}`;
|
||||
},
|
||||
'load':function ( i ) {
|
||||
var s = `; ${ document.cookie };`,
|
||||
p = s.indexOf(`; ${ i }=`);
|
||||
if (p < 0)return '';
|
||||
p = p + i.length + 3;
|
||||
var p2 = s.indexOf(';', p + 1);
|
||||
|
||||
return decodeURIComponent(s.substring(p, p2));
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = { partOfDay, toHour, hourFloor, distance, maybePluralize, minuteFloor, LocalStorage };
|
||||
10
src/main.js
Normal file
10
src/main.js
Normal file
@ -0,0 +1,10 @@
|
||||
import App from './App.svelte';
|
||||
|
||||
const app = new App({
|
||||
'target': document.body,
|
||||
'props': {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
export default app;
|
||||
20
src/pages/Home.svelte
Normal file
20
src/pages/Home.svelte
Normal file
@ -0,0 +1,20 @@
|
||||
<script>
|
||||
import TrainRoute from "../components/TrainRoute.svelte";
|
||||
|
||||
</script>
|
||||
|
||||
<div class="mui-container">
|
||||
<TrainRoute destStation="glq" startStation="dbe"/>
|
||||
<TrainRoute destStation="dbe" startStation="glq"/>
|
||||
<TrainRoute destStation="glc" startStation="ptk"/>
|
||||
<TrainRoute destStation="ptk" startStation="dbe"/>
|
||||
<TrainRoute destStation="glc" startStation="eus"/>
|
||||
<TrainRoute destStation="eus" startStation="glc"/>
|
||||
<TrainRoute destStation="pad" startStation="hxx"/>
|
||||
<TrainRoute destStation="glc" startStation="bhi"/>
|
||||
<TrainRoute destStation="bhi" startStation="glc"/>
|
||||
<TrainRoute destStation="dbe" startStation="dmr"/>
|
||||
<TrainRoute destStation="dmr" startStation="glc"/>
|
||||
|
||||
</div>
|
||||
|
||||
14
src/pages/NotFound.svelte
Normal file
14
src/pages/NotFound.svelte
Normal file
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
background: #f55a4e;
|
||||
padding: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="routetitle">NotFound</h2>
|
||||
|
||||
<p>Oops, this route doesn't exist!</p>
|
||||
12
src/pages/Service.svelte
Normal file
12
src/pages/Service.svelte
Normal file
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
background: #f55a4e;
|
||||
padding: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<span>Service</span>
|
||||
41
src/pages/Timetable.svelte
Normal file
41
src/pages/Timetable.svelte
Normal file
@ -0,0 +1,41 @@
|
||||
<script>
|
||||
import {onMount, onDestroy} from 'svelte';
|
||||
import TimetableList from "../components/TimetableList.svelte";
|
||||
import { findStation } from '../libs/stations'
|
||||
|
||||
export let params = {};
|
||||
|
||||
let fromStationName;
|
||||
let destStationName;
|
||||
let fromStation;
|
||||
let destStation;
|
||||
|
||||
onMount(async () => {
|
||||
|
||||
console.log('>> Timetable:', params);
|
||||
|
||||
fromStation = params.fromStation;
|
||||
destStation = params.destStation;
|
||||
fromStationName = findStation(fromStation);
|
||||
destStationName = findStation(destStation);
|
||||
});
|
||||
|
||||
onDestroy(async () => {
|
||||
console.log('>> onDestroy Timetable')
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<div class="mui--appbar-height"></div>
|
||||
<div class="mui-container">
|
||||
<div>
|
||||
<div class="mui--text-center mui--text-accent">{fromStationName} TO {destStationName}</div>
|
||||
<TimetableList {fromStation} {destStation}/>
|
||||
|
||||
<!--<timetable-list :fromStation="$route.params.fromStation" :destStation="$route.params.destStation"/>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
21
src/routes.js
Normal file
21
src/routes.js
Normal file
@ -0,0 +1,21 @@
|
||||
/**
|
||||
* Created by WebStorm.
|
||||
* User: martin
|
||||
* Date: 19/04/2020
|
||||
* Time: 21:19
|
||||
|
||||
*/
|
||||
// import { wrap } from 'svelte-spa-router';
|
||||
|
||||
import Home from './pages/Home.svelte';
|
||||
import Service from './pages/Service.svelte';
|
||||
import Timetable from './pages/Timetable.svelte';
|
||||
import NotFound from './pages/NotFound.svelte';
|
||||
|
||||
const routes = new Map();
|
||||
routes.set('/', Home);
|
||||
routes.set('/timetable/:fromStation/:destStation', Timetable);
|
||||
routes.set('/service/:serviceId', Service);
|
||||
routes.set('*', NotFound);
|
||||
|
||||
export default routes;
|
||||
Loading…
Reference in New Issue
Block a user