Adding hospitals.

MrMaksimize · Sep 5, 2017 · d241191 · d241191
1 parent 907e561
commit d241191
Show file tree

Hide file tree

Showing 3 changed files with 323 additions and 0 deletions.
diff --git a/src/fsd-app.html b/src/fsd-app.html
@@ -114,6 +114,7 @@ <h1 id="app-title">RefugiosPR </h1>
 
  <iron-selector id="fsd-main-nav" selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
  <a name="fsd-buildings" class="main-nav-link" href="/#/fsd-buildings">Refugios</a>
+ <a name="fsd-hospitals" class="main-nav-link" href="/#/fsd-hospitals">Hospitals</a>
  </iron-selector>
 
 
@@ -139,6 +140,9 @@ <h1 id="app-title">RefugiosPR </h1>
  <fsd-buildings name="fsd-buildings"
  processed-buildings="[[ processedBuildings ]]">
  </fsd-buildings>
+ <fsd-hospitals name="fsd-hospitals"
+ processed-hospitals="[[ processedHospitals ]]">
+ </fsd-hospitals>
 
  <!--<fsd-detail name="fsd-detail"
  processed-buildings="[[ processedBuildings ]]"
@@ -163,6 +167,17 @@ <h1 id="app-title">RefugiosPR </h1>
  auto verbose>
  </iron-ajax>
 
+
+ <iron-ajax
+ id="ajax"
+ url="https://cityofsandiego-admin.carto.com/api/v2/sql?format=GeoJSON&q=select%20*%20from%20hospitals_gen"
+ last-response="{{ processedHospitals }}"
+ handle-as="json"
+ debounce-duration="3000"
+ auto verbose>
+ </iron-ajax>
+
+
  </template>
 
  <script>
@@ -180,6 +195,12 @@ <h1 id="app-title">RefugiosPR </h1>
  type: Object,
  notify: true,
  observer: '_processedBuildingsChanged'
+ },
+
+ processedHospitals: {
+ type: Object,
+ notify: true,
+ observer: '_processedBuildingsChanged'
  }
  },
 

diff --git a/src/fsd-hospital-detail-view-card.html b/src/fsd-hospital-detail-view-card.html
@@ -0,0 +1,101 @@
+<!--
+@license
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http:https://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http:https://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http:https://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http:https://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../bower_components/iron-collapse/iron-collapse.html">
+<link rel="import" href="shared-styles.html">
+
+<dom-module id="fsd-hospital-detail-view-card">
+ <template>
+ <style include="shared-styles" is="custom-style">
+ :host {
+ h1 {
+ margin-top: 8px;
+ margin-bottom: 8px;
+ }
+ }
+ .title-container {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ }
+ .card-title {
+ font-size: 24px;
+ font-weight: bold;
+ }
+ strong {
+ font-weight: bold;
+ }
+
+ #building-details {
+ padding: 10px;
+ }
+
+
+
+
+
+ </style>
+
+ <div id="building-details" class="col12 clearfix">
+ <div class="title-container col12 clearfix">
+ <span class="card-title">[[ buildingItem.properties.nombre ]]</span>
+ <span class="map-link">
+ <a
+ href="https://www.google.com/maps/dir/?api=1&destination=[[ buildingItem.properties.lat ]],
+ [[ buildingItem.properties.lon ]]" target="_blank" title="Navigate">
+ (mapa)
+ </a>
+ </span>
+ </div>
+ <div class="col6">
+ <ul>
+ <li><strong> Direccion Fisica: </strong> [[ buildingItem.properties.full_addr ]]</li>
+ <li><strong> Tipo De Facilidad: </strong> [[ buildingItem.properties.tipo_de_facilidad ]]</li>
+ </ul>
+ </div>
+
+ <div class="col6">
+ <ul>
+ <li>
+ <strong> Telefono: </strong>
+ <a href="tel:+1-787-[[ buildingItem.properties.tel ]]">
+ (787) [[ buildingItem.properties.tel ]]
+ </a>
+ </li>
+ <li><strong> Pueblo: </strong> [[ buildingItem.properties.pueblo ]]</li>
+ </ul>
+ </div> <!-- right-col -->
+ </div> <!-- col-wrap -->
+ </template>
+
+
+ <script>
+ Polymer({
+ is: 'fsd-hospital-detail-view-card',
+ listeners: {
+ },
+ properties: {
+ buildingItem: {
+ type: Object,
+ notify: true,
+ observer: '_buildingItemChanged'
+ }
+ },
+ attached: function() {
+ },
+ _buildingItemChanged: function(oldVal, newVal) {
+ },
+ observers: [
+ ]
+ });
+ </script>
+</dom-module>
diff --git a/src/fsd-hospitals.html b/src/fsd-hospitals.html
@@ -0,0 +1,201 @@
+<!--
+@license
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http:https://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http:https://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http:https://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http:https://polymer.github.io/PATENTS.txt
+-->
+
+
+
+<!-- PolymerElement Components -->
+<link rel="import" href="../bower_components/polymer/polymer.html" />
+<link rel="import" href="../bower_components/px-data-table/px-data-table.html" />
+<link rel="import" href="../bower_components/paper-button/paper-button.html" />
+<link rel="import" href="../bower_components/app-route/app-route.html">
+<link rel="import" href="../bower_components/px-map-gl/px-map-gl-source-geojson.html" />
+<link rel="import" href="../bower_components/px-map-gl/px-map-gl-layer-symbol.html" />
+<link rel="import" href="../bower_components/px-map-gl/px-map-gl-popup-debug.html" />
+<link rel="import" href="../bower_components/px-map-gl/px-map-gl-control-nav.html" />
+<link rel="import" href="../bower_components/px-map-gl/px-map-gl-control-geolocate.html" />
+<link rel="import" href="../bower_components/px-map-gl/px-map-gl-control-scale.html" />
+<link rel="import" href="../bower_components/px-map-gl/px-map-gl-control-fullscreen.html" />
+<link rel="import" href="../bower_components/px-map-gl/px-map-gl-control-attribution.html" />
+<link rel="import" href="fsd-hospital-detail-view-card.html">
+<link rel="import" href="shared-styles.html">
+
+<!-- Predix UI Components -->
+<!--custom -->
+<!--<link rel="import" href="../components/px-map/px-map.html" />
+<link rel="import" href="../components/px-map/px-map-tile-layer.html" />
+<link rel="import" href="../components/px-map/px-map-control-zoom.html" />
+<link rel="import" href="../components/px-map/px-map-layer-geojson.html" />-->
+
+<!-- custom -->
+
+<!-- Theme/CSS -->
+<link rel="import" href="../bower_components/px-theme/px-theme-styles.html">
+
+
+<dom-module id="fsd-hospitals">
+ <template>
+ <style include="shared-styles">
+ /*:host {
+ display: block;
+
+ padding: 10px;
+ }*/
+
+ :host {
+ width: 100%;
+ height: 100%;
+ }
+ :root {
+ }
+
+ #building-info-card {
+ width:100%;
+ height: 30vh;
+ bottom: 0px;
+ background: white;
+ opacity: 0.9;
+ }
+ #map-card {
+ height: 70vh;
+ width: 100%;
+ margin: 0px;
+ display: flex;
+ padding: 0px;
+ background: url('/images/datasd_wp_640.jpg') fixed repeat center center black;
+ }
+ px-map-gl {
+ }
+
+ img#dancing-sd-placeholder {
+ float: right;
+ height: 200px;
+ }
+ #map-cta-placeholder{
+ float: left;
+ width: 100%;
+ font-size: 20px;
+ line-height: 25px;
+ }
+ #map-cta-placeholder ul {
+ list-style: circle;
+ }
+ #map-cta-placeholder ul li {
+ }
+
+ </style>
+
+
+ <div id="map-card">
+ <px-map-gl zoom="8"
+ bearing="0"
+ pitch="0"
+ flex-to-size
+ disable-attribution-control
+ disable-map-hash
+ style="mapbox:https://styles/mapbox/dark-v9"
+ mgl-token="pk.eyJ1IjoibXJtYWtzaW1pemUiLCJhIjoiRlRwLWwyVSJ9.--Y4RdEJ_5ZuJjSUkx34vQ"
+ lat="18.2208"
+ lng="-66.55901">
+
+ <px-map-gl-control-nav
+ position="top-left">
+ </px-map-gl-control-nav>
+
+ <px-map-gl-control-geolocate
+ position="top-left">
+ </px-map-gl-control-geolocate>
+
+
+ <px-map-gl-source-geojson
+ id="fac-hospitals"
+ data="{{ processedHospitals }}">
+ </px-map-gl-source-geojson>
+
+
+ <!-- filter='["in", "asset_type", "Library"]' -->
+ <px-map-gl-layer-symbol
+ layout='{
+ "icon-optional" : false,
+ "icon-image": "hospital-15",
+ "icon-size": 2
+ }'
+ id="hospital-layer"
+ source="fac-hospitals">
+ </px-map-gl-layer-symbol>
+
+ <px-map-gl-control-attribution position="bottom-right">
+ </px-map-gl-control-attribution>
+
+
+ </px-map-gl>
+
+ </div>
+ <div id="building-info-card" style="">
+ <template is="dom-if" if="{{ buildingInfo.properties.nombre }}">
+ <fsd-hospital-detail-view-card compact building-item="[[ buildingInfo ]]"></fsd-hospital-detail-view-card>
+ </template>
+ <template is="dom-if" if="{{ !buildingInfo.properties.nombre}}">
+ <div id="map-cta-placeholder">
+ <ul>
+ <li>
+ <a href="#" on-click="_triggerGeolocate">
+ Find nearest hospital
+ </a>
+ </li>
+ <li>Conozca sobre refugios por toda la isla</li>
+ <li>Oprima en un refugio para detalles</li>
+ <li>Oprima doble en el mapa para 'zoom in'</li>
+ </ul>
+ </div>
+ </template>
+ </div><!-- card -->
+
+
+ </template>
+
+ <script>
+ Polymer({
+ is: 'fsd-hospitals',
+ listeners: {
+ 'px-map-gl-layer-click': '_handleLayerClick'
+ },
+ properties: {
+ // Building Info to display on the infobox.
+ buildingInfo: {
+ type: Object,
+ notify: true,
+ readOnly: true,
+ value: function () {
+ return {};
+ }
+ },
+ // Prcessed bldg data coming from fsd-app.
+ processedHospitals: {
+ type: Object,
+ notify: true
+ }
+ },
+ observers: [
+ ],
+ _triggerGeolocate() {
+ console.log('tri');
+ },
+ _handleLayerClick(e) {
+ const emitterId = e.detail.emitter.id;
+ if (emitterId == 'hospital-layer' && e.detail.event.features[0].properties) {
+ var hospFeature = e.detail.event.features[0];
+ hospFeature.properties.lon = e.detail.event.lngLat.lng;
+ hospFeature.properties.lat = e.detail.event.lngLat.lat;
+ this._setBuildingInfo(hospFeature)
+ }
+ }
+ });
+ </script>
+</dom-module>