Created
October 5, 2017 01:20
-
-
Save Pharoah19/dc65cea2a93c42f7d9292dd6b6ed8bb6 to your computer and use it in GitHub Desktop.
CanJS Bus Demo Chicago Bus Routes - Start // source https://jsbin.com/nalinut
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Chicago Bus Routes - Start"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>CanJS Bus Demo</title> | |
| <link href="https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet"> | |
| <style id="jsbin-css"> | |
| html, | |
| body { | |
| height: 100%; | |
| } | |
| body { | |
| font-family: 'Catamaran', sans-serif; | |
| background-color: #f2f2f2; | |
| display: flex; | |
| flex-direction: column; | |
| margin: 0; | |
| } | |
| .top { | |
| flex-grow: 1; | |
| overflow-y: auto; | |
| height: 10%; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .bottom { | |
| height: 250px; | |
| position: relative; | |
| } | |
| .gmap { | |
| width: 100%; | |
| height: 230px; | |
| background-color: grey; | |
| } | |
| .header { | |
| box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1); | |
| background-color: #313131; | |
| color: white; | |
| min-height: 60px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| line-height: 1.2; | |
| } | |
| .header h1 { | |
| text-align: center; | |
| font-size: 18px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin: 0; | |
| } | |
| .route-selected { | |
| line-height: 1; | |
| position: absolute; | |
| z-index: 1; | |
| text-align: right; | |
| background: rgba(6, 6, 6, 0.6); | |
| top: 10px; | |
| right: 10px; | |
| padding: 6px 10px; | |
| color: white; | |
| border-radius: 2px; | |
| cursor: pointer; | |
| } | |
| .route-selected small { | |
| display: block; | |
| font-size: 14px; | |
| color: #ddd; | |
| } | |
| .route-selected .error-message { | |
| font-size: 14px; | |
| background-color: #FF5722; | |
| border-radius: 10px; | |
| padding: 4px 8px 1px; | |
| margin-top: 5px; | |
| } | |
| .routes-list { | |
| padding: 20px 0; | |
| margin: 0; | |
| overflow-y: auto; | |
| } | |
| .routes-list li { | |
| list-style: none; | |
| cursor: pointer; | |
| background: white; | |
| border: 1px solid #dedede; | |
| padding: 8px 8px 6px; | |
| margin: 1% 2%; | |
| border-radius: 25px; | |
| color: #2196F3; | |
| width: 41%; | |
| display: inline-flex; | |
| font-size: 14px; | |
| line-height: 1.2; | |
| } | |
| .routes-list li:hover { | |
| border-color: transparent; | |
| background-color: #008eff; | |
| color: white; | |
| box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.2); | |
| } | |
| .routes-list li .check { | |
| display: none; | |
| } | |
| .routes-list li.active { | |
| color: #666; | |
| background-color: #e8e8e8; | |
| } | |
| .routes-list li.active .check { | |
| display: inline-block; | |
| margin-left: 5px; | |
| color: #2cc532; | |
| } | |
| .routes-list li.active:hover { | |
| border-color: #dedede; | |
| box-shadow: none; | |
| } | |
| .route-number { | |
| display: inline-block; | |
| border-right: 1px solid #dedede; | |
| padding-right: 5px; | |
| margin-right: 5px; | |
| min-width: 18px; | |
| text-align: right; | |
| } | |
| p { | |
| text-align: center; | |
| margin: 0; | |
| color: #ccc; | |
| font-size: 14px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script id="app-view" type="text/stache"> | |
| <div class="top"> | |
| <div class="header"> | |
| <h1>{{title}}</h1> | |
| {{#if routesPromise.isPending}}<p>Loading routes…</p>{{/if}} | |
| </div> | |
| <ul class="routes-list"> | |
| {{#each routesPromise.value}} | |
| <li on:click="pickRoute(this)" {{#eq this route}}class="active"{{/eq}}> | |
| <span class="route-number">{{this.rt}}</span> | |
| <span class="route-name">{{this.rtnm}}</span> | |
| <span class="check">✔</span> | |
| </li> | |
| {{/each}} | |
| </ul> | |
| </div> | |
| <div class="bottom"> | |
| {{#if route}} | |
| <div class="route-selected"> | |
| <small>Route {{route.rt}}:</small> {{route.rtnm}} | |
| <div class="error-message">No vehicles available for this route</div> | |
| </div> | |
| {{/if}} | |
| <google-map-view/> | |
| </div> | |
| bus count: {{vehiclesPromise.value.length}} | |
| </script> | |
| <script src="https://unpkg.com/can@3/dist/global/can.all.js"></script> | |
| <script> | |
| window.googleAPI = new Promise(function(resolve){ | |
| const script = document.createElement("script"); | |
| script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyD7POAQA-i16Vws48h4yRFVGBZzIExOAJI"; | |
| document.body.appendChild( script ); | |
| script.onload = resolve; | |
| }); | |
| </script> | |
| <script id="jsbin-javascript"> | |
| var proxyUrl = "https://can-cors.herokuapp.com/"; | |
| var token = "?key=piRYHjJ5D2Am39C9MxduHgRZc&format=json"; | |
| var apiRoot = "http://www.ctabustracker.com/bustime/api/v2/" | |
| var getRoutesEnpoint = apiRoot + "getroutes" + token; | |
| var getVehiclesEndpoint = apiRoot + "getvehicles" + token; | |
| var BusTrackerVM = can.DefineMap.extend({ | |
| title: { | |
| value: "Chicago CTA Bus Tracker" | |
| }, | |
| routesPromise: { | |
| value() { | |
| return fetch(proxyUrl + getRoutesEnpoint) | |
| .then(response => response.json()) | |
| .then(data => data["bustime-response"].routes); | |
| } | |
| }, | |
| route: 'any', | |
| vehiclesPromise: "any", | |
| pickRoute: function(route) { | |
| this.route = route; | |
| fetch(proxyUrl + getVehiclesEndpoint + "&rt=" + route.rt) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data["bustime-response"].error) { | |
| return Promise.reject(data["bustime-response"].error); | |
| } else { | |
| return data["bustime-response"].vehicle; | |
| } | |
| }); | |
| } | |
| }); | |
| can.Component.extend({ | |
| tag: "google-map-view", | |
| view: can.stache(`<div class='gmap'></div>`), | |
| ViewModel: { | |
| map: "any", | |
| vehicles: "any", | |
| markers: "any" | |
| }, | |
| events: { | |
| "{element} inserted": function() { | |
| googleAPI.then(() => { | |
| this.viewModel.map = new google.maps.Map(this.element.firstChild, { | |
| zoom: 10, | |
| center: { | |
| lat: 41.881, | |
| lng: -87.623 | |
| } | |
| }); | |
| }); | |
| } | |
| } | |
| }); | |
| var viewModel = new BusTrackerVM(); | |
| var view = can.stache.from("app-view"); | |
| var frag = view(viewModel); | |
| document.body.appendChild(frag); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Chicago Bus Routes - Start"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>CanJS Bus Demo</title> | |
| <link href="https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <script id="app-view" type="text/stache"> | |
| <div class="top"> | |
| <div class="header"> | |
| <h1>{{title}}</h1> | |
| {{#if routesPromise.isPending}}<p>Loading routes…</p>{{/if}} | |
| </div> | |
| <ul class="routes-list"> | |
| {{#each routesPromise.value}} | |
| <li on:click="pickRoute(this)" {{#eq this route}}class="active"{{/eq}}> | |
| <span class="route-number">{{this.rt}}</span> | |
| <span class="route-name">{{this.rtnm}}</span> | |
| <span class="check">✔</span> | |
| </li> | |
| {{/each}} | |
| </ul> | |
| </div> | |
| <div class="bottom"> | |
| {{#if route}} | |
| <div class="route-selected"> | |
| <small>Route {{route.rt}}:</small> {{route.rtnm}} | |
| <div class="error-message">No vehicles available for this route</div> | |
| </div> | |
| {{/if}} | |
| <google-map-view/> | |
| </div> | |
| bus count: {{vehiclesPromise.value.length}} | |
| <\/script> | |
| <script src="https://unpkg.com/can@3/dist/global/can.all.js"><\/script> | |
| <script> | |
| window.googleAPI = new Promise(function(resolve){ | |
| const script = document.createElement("script"); | |
| script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyD7POAQA-i16Vws48h4yRFVGBZzIExOAJI"; | |
| document.body.appendChild( script ); | |
| script.onload = resolve; | |
| }); | |
| <\/script> | |
| </body> | |
| </html> | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">html, | |
| body { | |
| height: 100%; | |
| } | |
| body { | |
| font-family: 'Catamaran', sans-serif; | |
| background-color: #f2f2f2; | |
| display: flex; | |
| flex-direction: column; | |
| margin: 0; | |
| } | |
| .top { | |
| flex-grow: 1; | |
| overflow-y: auto; | |
| height: 10%; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .bottom { | |
| height: 250px; | |
| position: relative; | |
| } | |
| .gmap { | |
| width: 100%; | |
| height: 230px; | |
| background-color: grey; | |
| } | |
| .header { | |
| box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1); | |
| background-color: #313131; | |
| color: white; | |
| min-height: 60px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| line-height: 1.2; | |
| } | |
| .header h1 { | |
| text-align: center; | |
| font-size: 18px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin: 0; | |
| } | |
| .route-selected { | |
| line-height: 1; | |
| position: absolute; | |
| z-index: 1; | |
| text-align: right; | |
| background: rgba(6, 6, 6, 0.6); | |
| top: 10px; | |
| right: 10px; | |
| padding: 6px 10px; | |
| color: white; | |
| border-radius: 2px; | |
| cursor: pointer; | |
| } | |
| .route-selected small { | |
| display: block; | |
| font-size: 14px; | |
| color: #ddd; | |
| } | |
| .route-selected .error-message { | |
| font-size: 14px; | |
| background-color: #FF5722; | |
| border-radius: 10px; | |
| padding: 4px 8px 1px; | |
| margin-top: 5px; | |
| } | |
| .routes-list { | |
| padding: 20px 0; | |
| margin: 0; | |
| overflow-y: auto; | |
| } | |
| .routes-list li { | |
| list-style: none; | |
| cursor: pointer; | |
| background: white; | |
| border: 1px solid #dedede; | |
| padding: 8px 8px 6px; | |
| margin: 1% 2%; | |
| border-radius: 25px; | |
| color: #2196F3; | |
| width: 41%; | |
| display: inline-flex; | |
| font-size: 14px; | |
| line-height: 1.2; | |
| } | |
| .routes-list li:hover { | |
| border-color: transparent; | |
| background-color: #008eff; | |
| color: white; | |
| box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.2); | |
| } | |
| .routes-list li .check { | |
| display: none; | |
| } | |
| .routes-list li.active { | |
| color: #666; | |
| background-color: #e8e8e8; | |
| } | |
| .routes-list li.active .check { | |
| display: inline-block; | |
| margin-left: 5px; | |
| color: #2cc532; | |
| } | |
| .routes-list li.active:hover { | |
| border-color: #dedede; | |
| box-shadow: none; | |
| } | |
| .route-number { | |
| display: inline-block; | |
| border-right: 1px solid #dedede; | |
| padding-right: 5px; | |
| margin-right: 5px; | |
| min-width: 18px; | |
| text-align: right; | |
| } | |
| p { | |
| text-align: center; | |
| margin: 0; | |
| color: #ccc; | |
| font-size: 14px; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var proxyUrl = "https://can-cors.herokuapp.com/"; | |
| var token = "?key=piRYHjJ5D2Am39C9MxduHgRZc&format=json"; | |
| var apiRoot = "http://www.ctabustracker.com/bustime/api/v2/" | |
| var getRoutesEnpoint = apiRoot + "getroutes" + token; | |
| var getVehiclesEndpoint = apiRoot + "getvehicles" + token; | |
| var BusTrackerVM = can.DefineMap.extend({ | |
| title: { | |
| value: "Chicago CTA Bus Tracker" | |
| }, | |
| routesPromise: { | |
| value() { | |
| return fetch(proxyUrl + getRoutesEnpoint) | |
| .then(response => response.json()) | |
| .then(data => data["bustime-response"].routes); | |
| } | |
| }, | |
| route: 'any', | |
| vehiclesPromise: "any", | |
| pickRoute: function(route) { | |
| this.route = route; | |
| fetch(proxyUrl + getVehiclesEndpoint + "&rt=" + route.rt) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data["bustime-response"].error) { | |
| return Promise.reject(data["bustime-response"].error); | |
| } else { | |
| return data["bustime-response"].vehicle; | |
| } | |
| }); | |
| } | |
| }); | |
| can.Component.extend({ | |
| tag: "google-map-view", | |
| view: can.stache(`<div class='gmap'></div>`), | |
| ViewModel: { | |
| map: "any", | |
| vehicles: "any", | |
| markers: "any" | |
| }, | |
| events: { | |
| "{element} inserted": function() { | |
| googleAPI.then(() => { | |
| this.viewModel.map = new google.maps.Map(this.element.firstChild, { | |
| zoom: 10, | |
| center: { | |
| lat: 41.881, | |
| lng: -87.623 | |
| } | |
| }); | |
| }); | |
| } | |
| } | |
| }); | |
| var viewModel = new BusTrackerVM(); | |
| var view = can.stache.from("app-view"); | |
| var frag = view(viewModel); | |
| document.body.appendChild(frag);</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, | |
| body { | |
| height: 100%; | |
| } | |
| body { | |
| font-family: 'Catamaran', sans-serif; | |
| background-color: #f2f2f2; | |
| display: flex; | |
| flex-direction: column; | |
| margin: 0; | |
| } | |
| .top { | |
| flex-grow: 1; | |
| overflow-y: auto; | |
| height: 10%; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .bottom { | |
| height: 250px; | |
| position: relative; | |
| } | |
| .gmap { | |
| width: 100%; | |
| height: 230px; | |
| background-color: grey; | |
| } | |
| .header { | |
| box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1); | |
| background-color: #313131; | |
| color: white; | |
| min-height: 60px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| line-height: 1.2; | |
| } | |
| .header h1 { | |
| text-align: center; | |
| font-size: 18px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin: 0; | |
| } | |
| .route-selected { | |
| line-height: 1; | |
| position: absolute; | |
| z-index: 1; | |
| text-align: right; | |
| background: rgba(6, 6, 6, 0.6); | |
| top: 10px; | |
| right: 10px; | |
| padding: 6px 10px; | |
| color: white; | |
| border-radius: 2px; | |
| cursor: pointer; | |
| } | |
| .route-selected small { | |
| display: block; | |
| font-size: 14px; | |
| color: #ddd; | |
| } | |
| .route-selected .error-message { | |
| font-size: 14px; | |
| background-color: #FF5722; | |
| border-radius: 10px; | |
| padding: 4px 8px 1px; | |
| margin-top: 5px; | |
| } | |
| .routes-list { | |
| padding: 20px 0; | |
| margin: 0; | |
| overflow-y: auto; | |
| } | |
| .routes-list li { | |
| list-style: none; | |
| cursor: pointer; | |
| background: white; | |
| border: 1px solid #dedede; | |
| padding: 8px 8px 6px; | |
| margin: 1% 2%; | |
| border-radius: 25px; | |
| color: #2196F3; | |
| width: 41%; | |
| display: inline-flex; | |
| font-size: 14px; | |
| line-height: 1.2; | |
| } | |
| .routes-list li:hover { | |
| border-color: transparent; | |
| background-color: #008eff; | |
| color: white; | |
| box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.2); | |
| } | |
| .routes-list li .check { | |
| display: none; | |
| } | |
| .routes-list li.active { | |
| color: #666; | |
| background-color: #e8e8e8; | |
| } | |
| .routes-list li.active .check { | |
| display: inline-block; | |
| margin-left: 5px; | |
| color: #2cc532; | |
| } | |
| .routes-list li.active:hover { | |
| border-color: #dedede; | |
| box-shadow: none; | |
| } | |
| .route-number { | |
| display: inline-block; | |
| border-right: 1px solid #dedede; | |
| padding-right: 5px; | |
| margin-right: 5px; | |
| min-width: 18px; | |
| text-align: right; | |
| } | |
| p { | |
| text-align: center; | |
| margin: 0; | |
| color: #ccc; | |
| font-size: 14px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var proxyUrl = "https://can-cors.herokuapp.com/"; | |
| var token = "?key=piRYHjJ5D2Am39C9MxduHgRZc&format=json"; | |
| var apiRoot = "http://www.ctabustracker.com/bustime/api/v2/" | |
| var getRoutesEnpoint = apiRoot + "getroutes" + token; | |
| var getVehiclesEndpoint = apiRoot + "getvehicles" + token; | |
| var BusTrackerVM = can.DefineMap.extend({ | |
| title: { | |
| value: "Chicago CTA Bus Tracker" | |
| }, | |
| routesPromise: { | |
| value() { | |
| return fetch(proxyUrl + getRoutesEnpoint) | |
| .then(response => response.json()) | |
| .then(data => data["bustime-response"].routes); | |
| } | |
| }, | |
| route: 'any', | |
| vehiclesPromise: "any", | |
| pickRoute: function(route) { | |
| this.route = route; | |
| fetch(proxyUrl + getVehiclesEndpoint + "&rt=" + route.rt) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data["bustime-response"].error) { | |
| return Promise.reject(data["bustime-response"].error); | |
| } else { | |
| return data["bustime-response"].vehicle; | |
| } | |
| }); | |
| } | |
| }); | |
| can.Component.extend({ | |
| tag: "google-map-view", | |
| view: can.stache(`<div class='gmap'></div>`), | |
| ViewModel: { | |
| map: "any", | |
| vehicles: "any", | |
| markers: "any" | |
| }, | |
| events: { | |
| "{element} inserted": function() { | |
| googleAPI.then(() => { | |
| this.viewModel.map = new google.maps.Map(this.element.firstChild, { | |
| zoom: 10, | |
| center: { | |
| lat: 41.881, | |
| lng: -87.623 | |
| } | |
| }); | |
| }); | |
| } | |
| } | |
| }); | |
| var viewModel = new BusTrackerVM(); | |
| var view = can.stache.from("app-view"); | |
| var frag = view(viewModel); | |
| document.body.appendChild(frag); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment