Skip to content
This repository was archived by the owner on Mar 13, 2018. It is now read-only.

Commit 662fe56

Browse files
frankiefufrankiefu
committed
Shuttle v2
1 parent 95ecfcf commit 662fe56

16 files changed

+1180
-0
lines changed

‎shiny/Shuttle-v2/assets/ic_check_darkreg.png

3.2 KB
Loading

‎shiny/Shuttle-v2/assets/ic_star_sm_darkalt.png

3.14 KB
Loading

‎shiny/Shuttle-v2/assets/ic_star_sm_darkreg.png

3.14 KB
Loading

‎shiny/Shuttle-v2/assets/ic_swaphoriz_darkreg.png

3.13 KB
Loading

‎shiny/Shuttle-v2/assets/ic_swapvert_darkreg.png

3.13 KB
Loading

‎shiny/Shuttle-v2/index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Shuttle</title>
5+
<meta name="viewport" content="width=device-width">
6+
<script src="../../../polymer/polymer.js" shadow="native"></script>
7+
<script src="https://uitoolkit.googleplex.com/schedule.js"></script>
8+
<script src="mock_schedule.js"></script>
9+
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
10+
<link rel="import" href="shuttle-app.html">
11+
<link rel="stylesheet" href="../../../polymer-ui-elements/basic.css">
12+
<style>
13+
shuttle-app {
14+
-webkit-user-select: none;
15+
}
16+
</style>
17+
</head>
18+
<body class="polymer-ui-body-text">
19+
<shuttle-app class="polymer-ui-fit" theme="polymer-ui-light-theme"></shuttle-app>
20+
</body>
21+
</html>

‎shiny/Shuttle-v2/mock_schedule.js

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
(function() {
2+
3+
if (!window.Shuttle || Polymer.flags.mock) {
4+
window.Shuttle = {
5+
isMock: true,
6+
groups: [
7+
{
8+
name: 'Remote'
9+
},
10+
{
11+
name: 'Office'
12+
}
13+
],
14+
stops: [
15+
{
16+
description: 'Pick up is located near the main park gate.',
17+
group: 0,
18+
in_lat: 38.15966,
19+
in_lon: -122.26149,
20+
is_work: false,
21+
name: 'Kimberly Park, American Canyon',
22+
out_lat: 38.15966,
23+
out_lon: -122.26149,
24+
short_name: 'Kimberly Park',
25+
trips: [0, 1]
26+
},
27+
{
28+
description: 'Pick up in on the eastside of office building.',
29+
group: 1,
30+
in_lat: 37.77935,
31+
in_lon: -122.41874,
32+
is_work: true,
33+
name: 'City Hall, San Francisco',
34+
out_lat: 37.77935,
35+
out_lon: -122.41874,
36+
short_name: 'City Hall',
37+
trips: [0, 1]
38+
}
39+
],
40+
trips: [
41+
{
42+
businfo: "11",
43+
dir: "in",
44+
headsign: "head",
45+
name: "KP CH",
46+
stops: [
47+
{
48+
stop: 0,
49+
time: "07:00 AM"
50+
},
51+
{
52+
stop: 1,
53+
time: "08:30 AM"
54+
}
55+
]
56+
},
57+
{
58+
businfo: "99",
59+
dir: "out",
60+
headsign: "head",
61+
name: "CH KP",
62+
stops: [
63+
{
64+
stop: 1,
65+
time: "05:10 PM"
66+
},
67+
{
68+
stop: 0,
69+
time: "06:40 PM"
70+
}
71+
]
72+
}
73+
]
74+
};
75+
}
76+
77+
})();

‎shiny/Shuttle-v2/shuttle-app.html

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<link rel="import" href="../../../polymer-elements/polymer-grid-layout/polymer-grid-layout.html">
2+
<link rel="import" href="../../../polymer-elements/polymer-media-query/polymer-media-query.html">
3+
<link rel="import" href="../../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html">
4+
<link rel="import" href="../../../polymer-ui-elements/polymer-ui-icon/polymer-ui-icon.html">
5+
<link rel="import" href="../../../polymer-ui-elements/polymer-ui-tabs/polymer-ui-tabs.html">
6+
<link rel="import" href="../../../polymer-ui-elements/polymer-ui-overlay/polymer-ui-overlay.html">
7+
<link rel="import" href="../../../polymer-ui-elements/polymer-ui-card/polymer-ui-card.html">
8+
<link rel="import" href="../../../more-elements/google-map/google-map.html">
9+
<link rel="import" href="shuttle-data.html">
10+
<link rel="import" href="shuttle-schedule.html">
11+
<link rel="import" href="shuttle-favorites.html">
12+
<link rel="import" href="shuttle-map.html">
13+
14+
<polymer-element name="shuttle-app">
15+
<template>
16+
<style>
17+
#tabbar {
18+
height: 45px !important;
19+
background: -webkit-linear-gradient(-60deg, #3d3d3d, #353535);
20+
background: -moz-linear-gradient(-60deg, #3d3d3d, #353535);
21+
background: -ms-linear-gradient(-60deg, #3d3d3d, #353535);
22+
/* TODO(ffu): need this for grid-layout on iOS; need to investigate */
23+
bottom: 0;
24+
}
25+
26+
#tabbar > * {
27+
height: 45px !important;
28+
line-height: 45px !important;
29+
text-align: center;
30+
}
31+
32+
#tabbar > [hidden] {
33+
display: none !important;
34+
}
35+
36+
#tabbar > .polymer-selected {
37+
background-color: #1e1d1d !important;
38+
}
39+
40+
#tabbar > * {
41+
text-align: center;
42+
}
43+
44+
#main {
45+
margin: 20px;
46+
max-height: 88%;
47+
overflow: hidden;
48+
}
49+
50+
#main::x-overlay {
51+
background: transparent;
52+
}
53+
54+
#favoritesContainer {
55+
background: white;
56+
}
57+
58+
#schedule, #favorites {
59+
width: 320px;
60+
}
61+
</style>
62+
63+
<polymer-media-query query="max-width: 600px" queryMatches="{{queryMatches}}"></polymer-media-query>
64+
<shuttle-data id="data" route="{{route}}" officeStops="{{officeStops}}" remoteStops="{{remoteStops}}" favorites="{{favorites}}"></shuttle-data>
65+
66+
<polymer-ui-overlay id="main" modal active>
67+
<div id="scheduleContainer">
68+
<shuttle-schedule id="schedule" route="{{route}}" officeStops="{{officeStops}}" remoteStops="{{remoteStops}}"
69+
centerStop="{{centerStop}}" fromStop="{{fromStop}}" toStop="{{toStop}}"
70+
favorites="{{favorites}}" favorite="{{favorite}}" filteredStops="{{filteredStops}}"
71+
selectedFilteredStop="{{selectedFilteredStop}}" on-shuttle-data-save="saveData"></shuttle-schedule>
72+
</div>
73+
<polymer-ui-card id="favoritesContainer">
74+
<shuttle-favorites id="favorites" favorites="{{favorites}}" favorite="{{favorite}}"
75+
on-polymer-activate="favoriteSelect" on-shuttle-favorites-change="favoritesChange"></shuttle-favorites>
76+
</dipolymer-ui-cardv>
77+
</polymer-ui-overlay>
78+
79+
<div id="basement">
80+
<polymer-grid-layout nodes="{{nodes}}" layout="{{layout}}"></polymer-grid-layout>
81+
<shuttle-map id="map" class="{{desktop : !queryMatches}}" centerStop="{{centerStop}}"
82+
fromStop="{{fromStop}}" toStop="{{toStop}}"
83+
filteredStops="{{filteredStops}}" selectedFilteredStop="{{selectedFilteredStop}}"></shuttle-map>
84+
85+
<polymer-ui-tabs id="tabbar" theme="polymer-ui-dark-theme" selected="{{selected}}">
86+
<div flex><polymer-ui-icon icon="time"></polymer-ui-icon></div>
87+
<div flex><polymer-ui-icon icon="favorite"></polymer-ui-icon></div>
88+
</polymer-ui-tabs>
89+
</div>
90+
</template>
91+
<script>
92+
Polymer('shuttle-app', {
93+
selected: null,
94+
queryMatches: false,
95+
created: function() {
96+
this.nodes = [
97+
this.$.map, this.$.tabbar
98+
];
99+
this.layout = [
100+
[1],
101+
[1],
102+
[2]
103+
];
104+
this.selected = 0;
105+
window.addEventListener('resize', function() {
106+
this.$.map.resize();
107+
}.bind(this));
108+
},
109+
queryMatchesChanged: function() {
110+
},
111+
selectedChanged: function() {
112+
this.$.scheduleContainer.style.display = this.selected ? 'none' : '';
113+
this.$.favoritesContainer.style.display = this.selected ? '' : 'none';
114+
},
115+
favoriteSelect: function() {
116+
this.selected = 0;
117+
},
118+
favoritesChange: function() {
119+
this.$.schedule.updateFav();
120+
this.saveData();
121+
},
122+
saveData: function() {
123+
this.$.data.save();
124+
}
125+
});
126+
</script>
127+
</polymer-element>

‎shiny/Shuttle-v2/shuttle-data.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<link rel="import" href="../../../polymer-elements/polymer-localstorage/polymer-localstorage.html">
2+
3+
<polymer-element name="shuttle-data" attributes="route officeStops remoteStops favorites">
4+
<template>
5+
<polymer-localstorage id="storage" name="shuttle-storage5" value="{{userData}}" on-polymer-localstorage-load="populateUserData"></polymer-localstorage>
6+
</template>
7+
<script>
8+
Polymer('shuttle-data', {
9+
created: function() {
10+
this.populateStops();
11+
},
12+
populateStops: function() {
13+
Shuttle.stops.forEach(function(s, i) {
14+
s.index = i;
15+
});
16+
this.officeStops = Shuttle.stops.filter(function(s) {
17+
return s.is_work;
18+
});
19+
// office/campus stops
20+
this.officeStops = JSON.parse(JSON.stringify(this.officeStops));
21+
// all stops
22+
this.remoteStops = JSON.parse(JSON.stringify(Shuttle.stops));
23+
},
24+
populateUserData: function() {
25+
if (!this.userData) {
26+
this.userData = {
27+
route: {},
28+
favorites: []
29+
};
30+
}
31+
this.favorites = this.userData.favorites;
32+
this.route = this.userData.route;
33+
this.route.officeSelected = Shuttle.isMock ? 'City Hall, San Francisco' :
34+
(this.route.officeSelected || 'Main Campus (B40-43)');
35+
this.route.remoteSelected = Shuttle.isMock ? 'Kimberly Park, American Canyon' :
36+
(this.route.remoteSelected || 'Civic Center');
37+
},
38+
save: function() {
39+
if (!Shuttle.isMock) {
40+
this.$.storage.save();
41+
}
42+
}
43+
});
44+
</script>
45+
</polymer-element>

‎shiny/Shuttle-v2/shuttle-favorites.html

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<link rel="import" href="../../../polymer-elements/polymer-selector/polymer-selector.html">
2+
<link rel="import" href="../../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html">
3+
<link rel="import" href="../../../polymer-ui-elements/polymer-ui-card/polymer-ui-card.html">
4+
5+
<polymer-element name="shuttle-favorites" attributes="favorites favorite">
6+
<template>
7+
<style>
8+
@host {
9+
* {
10+
display: block;
11+
}
12+
}
13+
14+
.label {
15+
padding-left: 20px;
16+
}
17+
18+
.favorites {
19+
display: block;
20+
overflow-y: auto;
21+
overflow-x: hidden;
22+
}
23+
24+
.fav-item {
25+
display: block;
26+
height: 59px;
27+
line-height: 59px;
28+
padding: 0 20px;
29+
font-size: 14px;
30+
font-weight: bold;
31+
white-space: nowrap;
32+
overflow: hidden;
33+
text-overflow: ellipsis;
34+
}
35+
36+
.to {
37+
padding-left: 4px;
38+
font-size: 12px;
39+
font-weight: normal;
40+
opacity: 0.5;
41+
}
42+
</style>
43+
44+
<polymer-ui-toolbar>
45+
<div class="label">Favorites</div>
46+
</polymer-ui-toolbar>
47+
<polymer-selector class="favorites" selected="{{selected}}" selectedModel="{{favorite}}">
48+
<template repeat="{{favorites}}">
49+
<polymer-ui-card class="fav-item" swipeable on-polymer-card-swipe-away="swipeAway">
50+
{{fromStop.name}} <span class="to">to {{toStop.name}}</span>
51+
</polymer-ui-card>
52+
</template>
53+
</polymer-selector>
54+
</template>
55+
<script>
56+
Polymer('shuttle-favorites', {
57+
created: function() {
58+
this.transitionEndListener = this.transitionEnd.bind(this);
59+
},
60+
addListeners: function(node) {
61+
node.addEventListener('webkitTransitionEnd',
62+
this.transitionEndListener);
63+
node.addEventListener('transitionend', this.transitionEndListener);
64+
},
65+
removeListeners: function(node) {
66+
node.removeEventListener('webkitTransitionEnd',
67+
this.transitionEndListener);
68+
node.removeEventListener('transitionend', this.transitionEndListener);
69+
},
70+
clearSelection: function() {
71+
this.selected = null;
72+
},
73+
swipeAway: function(e, detail, sender) {
74+
this.asyncMethod(function() {
75+
this.addListeners(sender);
76+
sender.style.height = 0;
77+
sender.style.marginTop = 0;
78+
});
79+
},
80+
transitionEnd: function(e) {
81+
this.removeListeners(e.target);
82+
var fav = e.target.templateInstance.model;
83+
this.removeFav(fav);
84+
},
85+
removeFav: function(fav) {
86+
var f = fav;
87+
var i = this.favorites.indexOf(f);
88+
if (i > -1) {
89+
this.favorites.splice(i, 1);
90+
this.fire('shuttle-favorites-change');
91+
}
92+
}
93+
});
94+
</script>
95+
</polymer-element>

0 commit comments

Comments
 (0)