Shuttle v2

googlearchive · Sep 5, 2013 · 662fe56 · 662fe56
1 parent 95ecfcf
commit 662fe56
Show file tree

Hide file tree

Showing 16 changed files with 1,180 additions and 0 deletions.
diff --git a/shiny/Shuttle-v2/assets/ic_check_darkreg.png b/shiny/Shuttle-v2/assets/ic_check_darkreg.png
diff --git a/shiny/Shuttle-v2/assets/ic_star_sm_darkalt.png b/shiny/Shuttle-v2/assets/ic_star_sm_darkalt.png
diff --git a/shiny/Shuttle-v2/assets/ic_star_sm_darkreg.png b/shiny/Shuttle-v2/assets/ic_star_sm_darkreg.png
diff --git a/shiny/Shuttle-v2/assets/ic_swaphoriz_darkreg.png b/shiny/Shuttle-v2/assets/ic_swaphoriz_darkreg.png
diff --git a/shiny/Shuttle-v2/assets/ic_swapvert_darkreg.png b/shiny/Shuttle-v2/assets/ic_swapvert_darkreg.png
diff --git a/shiny/Shuttle-v2/index.html b/shiny/Shuttle-v2/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+<head>
+  <title>Shuttle</title>
+  <meta name="viewport" content="width=device-width">
+  <script src="../../../polymer/polymer.js" shadow="native"></script>
+  <script src="https://uitoolkit.googleplex.com/schedule.js"></script>
+  <script src="mock_schedule.js"></script>
+  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
+  <link rel="import" href="shuttle-app.html">
+  <link rel="stylesheet" href="../../../polymer-ui-elements/basic.css">
+  <style>
+    shuttle-app {
+      -webkit-user-select: none;
+    }
+  </style>
+</head>
+<body class="polymer-ui-body-text">
+  <shuttle-app class="polymer-ui-fit" theme="polymer-ui-light-theme"></shuttle-app>
+</body>
+</html>
diff --git a/shiny/Shuttle-v2/mock_schedule.js b/shiny/Shuttle-v2/mock_schedule.js
@@ -0,0 +1,77 @@
+(function() {
+
+if (!window.Shuttle || Polymer.flags.mock) {
+  window.Shuttle = {
+    isMock: true,
+    groups: [
+      {
+        name: 'Remote'
+      },
+      {
+        name: 'Office'
+      }
+    ],
+    stops: [
+      {
+        description: 'Pick up is located near the main park gate.',
+        group: 0,
+        in_lat: 38.15966,
+        in_lon: -122.26149,
+        is_work: false,
+        name: 'Kimberly Park, American Canyon',
+        out_lat: 38.15966,
+        out_lon: -122.26149,
+        short_name: 'Kimberly Park',
+        trips: [0, 1]
+      },
+      {
+        description: 'Pick up in on the eastside of office building.',
+        group: 1,
+        in_lat: 37.77935,
+        in_lon: -122.41874,
+        is_work: true,
+        name: 'City Hall, San Francisco',
+        out_lat: 37.77935,
+        out_lon: -122.41874,
+        short_name: 'City Hall',
+        trips: [0, 1]
+      }
+    ],
+    trips: [
+      {
+        businfo: "11",
+        dir: "in",
+        headsign: "head",
+        name: "KP CH",
+        stops: [
+          {
+            stop: 0,
+            time: "07:00 AM"
+          },
+          {
+            stop: 1,
+            time: "08:30 AM"
+          }
+        ]
+      },
+      {
+        businfo: "99",
+        dir: "out",
+        headsign: "head",
+        name: "CH KP",
+        stops: [
+          {
+            stop: 1,
+            time: "05:10 PM"
+          },
+          {
+            stop: 0,
+            time: "06:40 PM"
+          }
+        ]
+      }
+    ]
+  };
+}
+
+})();
diff --git a/shiny/Shuttle-v2/shuttle-app.html b/shiny/Shuttle-v2/shuttle-app.html
@@ -0,0 +1,127 @@
+<link rel="import" href="../../../polymer-elements/polymer-grid-layout/polymer-grid-layout.html">
+<link rel="import" href="../../../polymer-elements/polymer-media-query/polymer-media-query.html">
+<link rel="import" href="../../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html">
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-icon/polymer-ui-icon.html">
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-tabs/polymer-ui-tabs.html">
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-overlay/polymer-ui-overlay.html">
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-card/polymer-ui-card.html">
+<link rel="import" href="../../../more-elements/google-map/google-map.html">
+<link rel="import" href="shuttle-data.html">
+<link rel="import" href="shuttle-schedule.html">
+<link rel="import" href="shuttle-favorites.html">
+<link rel="import" href="shuttle-map.html">
+
+<polymer-element name="shuttle-app">
+  <template>
+    <style>
+      #tabbar {
+        height: 45px !important;
+        background: -webkit-linear-gradient(-60deg, #3d3d3d, #353535);
+        background: -moz-linear-gradient(-60deg, #3d3d3d, #353535);
+        background: -ms-linear-gradient(-60deg, #3d3d3d, #353535);
+        /* TODO(ffu): need this for grid-layout on iOS; need to investigate */
+        bottom: 0;
+      }
+
+      #tabbar > * {
+        height: 45px !important;
+        line-height: 45px !important;
+        text-align: center;
+      }
+
+      #tabbar > [hidden] {
+        display: none !important;
+      }
+
+      #tabbar > .polymer-selected {
+        background-color: #1e1d1d !important;
+      }
+
+      #tabbar > * {
+        text-align: center;
+      }
+
+      #main {
+        margin: 20px;
+        max-height: 88%;
+        overflow: hidden;
+      }
+
+      #main::x-overlay {
+        background: transparent;
+      }
+
+      #favoritesContainer {
+        background: white;
+      }
+
+      #schedule, #favorites {
+        width: 320px;
+      }
+    </style>
+
+    <polymer-media-query query="max-width: 600px" queryMatches="{{queryMatches}}"></polymer-media-query>
+    <shuttle-data id="data" route="{{route}}" officeStops="{{officeStops}}" remoteStops="{{remoteStops}}" favorites="{{favorites}}"></shuttle-data>
+
+    <polymer-ui-overlay id="main" modal active>
+      <div id="scheduleContainer">
+        <shuttle-schedule id="schedule" route="{{route}}" officeStops="{{officeStops}}" remoteStops="{{remoteStops}}" 
+            centerStop="{{centerStop}}" fromStop="{{fromStop}}" toStop="{{toStop}}" 
+            favorites="{{favorites}}" favorite="{{favorite}}" filteredStops="{{filteredStops}}" 
+            selectedFilteredStop="{{selectedFilteredStop}}" on-shuttle-data-save="saveData"></shuttle-schedule>
+      </div>
+      <polymer-ui-card id="favoritesContainer">
+        <shuttle-favorites id="favorites" favorites="{{favorites}}" favorite="{{favorite}}" 
+            on-polymer-activate="favoriteSelect" on-shuttle-favorites-change="favoritesChange"></shuttle-favorites>
+      </dipolymer-ui-cardv>
+   </polymer-ui-overlay>
+
+    <div id="basement">
+      <polymer-grid-layout nodes="{{nodes}}" layout="{{layout}}"></polymer-grid-layout>
+      <shuttle-map id="map" class="{{desktop : !queryMatches}}" centerStop="{{centerStop}}" 
+          fromStop="{{fromStop}}" toStop="{{toStop}}"
+          filteredStops="{{filteredStops}}" selectedFilteredStop="{{selectedFilteredStop}}"></shuttle-map>
+
+      <polymer-ui-tabs id="tabbar" theme="polymer-ui-dark-theme" selected="{{selected}}">
+        <div flex><polymer-ui-icon icon="time"></polymer-ui-icon></div>
+        <div flex><polymer-ui-icon icon="favorite"></polymer-ui-icon></div>
+      </polymer-ui-tabs>
+    </div>
+  </template>
+  <script>
+    Polymer('shuttle-app', {
+      selected: null,
+      queryMatches: false,
+      created: function() {
+        this.nodes = [
+          this.$.map, this.$.tabbar
+        ];
+        this.layout = [
+          [1],
+          [1], 
+          [2]
+        ];
+        this.selected = 0;
+        window.addEventListener('resize', function() {
+          this.$.map.resize();
+        }.bind(this));
+      },
+      queryMatchesChanged: function() {
+      },
+      selectedChanged: function() {
+        this.$.scheduleContainer.style.display = this.selected ? 'none' : '';
+        this.$.favoritesContainer.style.display = this.selected ? '' : 'none';
+      },
+      favoriteSelect: function() {
+        this.selected = 0;
+      },
+      favoritesChange: function() {
+        this.$.schedule.updateFav();
+        this.saveData();
+      },
+      saveData: function() {
+        this.$.data.save();
+      }
+    });
+  </script>
+</polymer-element>
diff --git a/shiny/Shuttle-v2/shuttle-data.html b/shiny/Shuttle-v2/shuttle-data.html
@@ -0,0 +1,45 @@
+<link rel="import" href="../../../polymer-elements/polymer-localstorage/polymer-localstorage.html">
+
+<polymer-element name="shuttle-data" attributes="route officeStops remoteStops favorites">
+  <template>
+    <polymer-localstorage id="storage" name="shuttle-storage5" value="{{userData}}" on-polymer-localstorage-load="populateUserData"></polymer-localstorage>
+  </template>
+  <script>
+    Polymer('shuttle-data', {
+      created: function() {
+        this.populateStops();
+      },
+      populateStops: function() {
+        Shuttle.stops.forEach(function(s, i) {
+          s.index = i;
+        });
+        this.officeStops = Shuttle.stops.filter(function(s) {
+          return s.is_work;
+        });
+        // office/campus stops
+        this.officeStops = JSON.parse(JSON.stringify(this.officeStops));
+        // all stops
+        this.remoteStops = JSON.parse(JSON.stringify(Shuttle.stops));
+      },
+      populateUserData: function() {
+        if (!this.userData) {
+          this.userData = {
+            route: {},
+            favorites: []
+          };
+        }
+        this.favorites = this.userData.favorites;
+        this.route = this.userData.route;
+        this.route.officeSelected = Shuttle.isMock ? 'City Hall, San Francisco' : 
+            (this.route.officeSelected || 'Main Campus (B40-43)');
+        this.route.remoteSelected = Shuttle.isMock ? 'Kimberly Park, American Canyon' : 
+            (this.route.remoteSelected || 'Civic Center');
+      },
+      save: function() {
+        if (!Shuttle.isMock) {
+          this.$.storage.save();
+        }
+      }
+    });
+  </script>
+</polymer-element>
diff --git a/shiny/Shuttle-v2/shuttle-favorites.html b/shiny/Shuttle-v2/shuttle-favorites.html
@@ -0,0 +1,95 @@
+<link rel="import" href="../../../polymer-elements/polymer-selector/polymer-selector.html">
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html">
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-card/polymer-ui-card.html">
+
+<polymer-element name="shuttle-favorites" attributes="favorites favorite">
+  <template>
+    <style>
+      @host {
+        * {
+          display: block;
+        }
+      }
+
+      .label {
+        padding-left: 20px;
+      }
+
+      .favorites {
+        display: block;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+
+      .fav-item {
+        display: block;
+        height: 59px;
+        line-height: 59px;
+        padding: 0 20px;
+        font-size: 14px;
+        font-weight: bold;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .to {
+        padding-left: 4px;
+        font-size: 12px;
+        font-weight: normal;
+        opacity: 0.5;
+      }
+    </style>
+
+    <polymer-ui-toolbar>
+      <div class="label">Favorites</div>
+    </polymer-ui-toolbar>
+    <polymer-selector class="favorites" selected="{{selected}}" selectedModel="{{favorite}}">
+      <template repeat="{{favorites}}">
+        <polymer-ui-card class="fav-item" swipeable on-polymer-card-swipe-away="swipeAway">
+          {{fromStop.name}} <span class="to">to {{toStop.name}}</span>
+        </polymer-ui-card>
+      </template>
+    </polymer-selector>
+  </template>
+  <script>
+    Polymer('shuttle-favorites', {
+      created: function() {
+        this.transitionEndListener = this.transitionEnd.bind(this);
+      },
+      addListeners: function(node) {
+        node.addEventListener('webkitTransitionEnd', 
+            this.transitionEndListener);
+        node.addEventListener('transitionend', this.transitionEndListener);
+      },
+      removeListeners: function(node) {
+        node.removeEventListener('webkitTransitionEnd', 
+            this.transitionEndListener);
+        node.removeEventListener('transitionend', this.transitionEndListener);
+      },
+      clearSelection: function() {
+        this.selected = null;
+      },
+      swipeAway: function(e, detail, sender) {
+        this.asyncMethod(function() {
+          this.addListeners(sender);
+          sender.style.height = 0;
+          sender.style.marginTop = 0;
+        });
+      },
+      transitionEnd: function(e) {
+        this.removeListeners(e.target);
+        var fav = e.target.templateInstance.model;
+        this.removeFav(fav);
+      },
+      removeFav: function(fav) {
+        var f = fav;
+        var i = this.favorites.indexOf(f);
+        if (i > -1) {
+          this.favorites.splice(i, 1);
+          this.fire('shuttle-favorites-change');
+        }
+      }
+    });
+  </script>
+</polymer-element>