Skip to content

Instantly share code, notes, and snippets.

@calvinnr7
Created June 27, 2016 03:42
Show Gist options
  • Save calvinnr7/699af9f08e78dcd4449d0851577dc054 to your computer and use it in GitHub Desktop.
Save calvinnr7/699af9f08e78dcd4449d0851577dc054 to your computer and use it in GitHub Desktop.
<aura:component controller="AsteroidsController" implements="forceCommunity:availableForAllPageTypes">
<ltng:require styles="/resource/SLDS201/assets/styles/salesforce-lightning-design-system.css" />
<aura:attribute name="asteroids" type="List" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<!-- Use the Apex model and controller to fetch server side data -->
<div class="slds-page-header" role="banner">
<div class="slds-media slds-media--center">
<div class="slds-media__figure">
</div>
<div class="slds-media__body">
<p class="slds-page-header__title slds-truncate slds-align-middle" title="Asteroid Detection System">Asteroid Detection System</p>
<p class="slds-text-body--small page-header__info">Track which asteroids are up to no good near the Earth's vicinity</p>
</div>
</div>
</div>
<center><img src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/11/28/blastr_asteroid_354.jpg.CROP.cq5dam_web_1280_1280_jpeg.jpg"
align="middle" alt="Asteroid zooming towards Earth"/></center><br/>
<h4 class="slds-section-title--divider" title="Choose date range">Choose a date range (A limit of a 7 day range is enforced by the API)</h4>
<div class="container">
<form class="slds-form">
<div class="slds-form-element">
<div class="slds-grid">
<ui:inputDate aura:id="fromDate" label="From Date"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.fromDate}"
displayDatePicker="true" />
<ui:inputDate aura:id="toDate" label="To Date"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.toDate}"
displayDatePicker="true" />
<ui:button label="Go" press="c.doInit"/>
</div>
</div>
</form>
</div>
<table class="slds-table slds-table--bordered slds-table--striped">
<thead>
<tr>
<th scope="col"><span class="slds-truncate">Asteroid Name</span></th>
<th scope="col"><span class="slds-truncate">Magnitude</span></th>
<th scope="col"><span class="slds-truncate">Diameter(meters)</span></th>
<th scope="col"><span class="slds-truncate">Is it Dangerous?</span></th>
<th scope="col"><span class="slds-truncate">Closest Approach Date</span></th>
<th scope="col"><span class="slds-truncate">Velocity(kms)</span></th>
<th scope="col"><span class="slds-truncate">Will miss Earth by(kms)</span></th>
<th scope="col"><span class="slds-truncate">More Details</span></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.asteroids}" var="astro">
<tr>
<td>{!astro.str_Asteroid_Name}</td>
<td>{!astro.str_Magnitude}</td>
<td>{!astro.str_Estimated_Diameter_Max_Kms}</td>
<td>{!astro.isAsteroidDangerous}</td>
<td>{!astro.str_closest_Approach_Earth_Date}</td>
<td>{!astro.str_velocity_per_sec_kms}</td>
<td>{!astro.str_misses_Earth_by_kms}</td>
<td>
<a href="{!astro.str_NASA_URL}" target="_blank"> <c:button class="slds-button slds-button--neutral"
label="Details"
svgXlinkHref="/resource/SLDS201/assets/icons/standard-sprite/svg/symbols.svg#link"
svgClass="slds-icon slds-icon-text-default"
onclick="{!c.showDetails}"
data="{!astro.str_NASA_URL}"
/>
</a>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:component>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment