This commit is contained in:
Christophe Coenraets 2017-07-26 11:15:32 -04:00
Коммит 58cdd508d7
392 изменённых файлов: 54218 добавлений и 0 удалений

11
.gitignore поставляемый Normal file
Просмотреть файл

@ -0,0 +1,11 @@
.classpath
.DS_Store
.sfdx
.project
.salesforce
node_modules
.idea
.tern-project
.settings
selenium-client-jars/
test/artifacts

31
README.md Normal file
Просмотреть файл

@ -0,0 +1,31 @@
## DreamHouse Sample Application
1. Install Salesforce DX. Enable the Dev Hub in your org or sign up for a Dev Hub trial org and install the Salesforce DX CLI. Follow the instructions in the Salesforce DX Setup Guide or in the App Development with Salesforce DX Trailhead module.
1. Clone the northern-trail repository:
```
git clone https://github.com/dreamhouseapp/dreamhouse-sfdx
cd dreamhouse-sfdx
```
1. Create a scratch org and provide it with an alias (nto):
```
sfdx force:org:create -s -f config/project-scratch-def.json -a dh
```
1. Push the app to your scratch org:
```
sfdx force:source:push
```
1. Assign the **dreamhouse** permission set to the default user:
```
sfdx force:user:permset:assign -n dreamhouse
```
1. Open the scratch org:
```
sfdx force:org:open
```
1. Import Data. Select the **DreamHouse** app in App Launcher, click the **Data Import** tab, and click **Initialize Sample Data**.

Просмотреть файл

@ -0,0 +1,7 @@
{
"orgName": "ccoenraets Company",
"edition": "Developer",
"orgPreferences" : {
"enabled": ["S1DesktopEnabled"]
}
}

Просмотреть файл

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<CustomApplication xmlns="http://soap.sforce.com/2006/04/metadata">
<brand>
<headerColor>#84BF41</headerColor>
<logo>dreamhouselogosquare</logo>
<logoVersion>1</logoVersion>
</brand>
<description>DreamHouse helps you connect with your Customers in a whole new way.</description>
<formFactors>Large</formFactors>
<label>DreamHouse</label>
<navType>Standard</navType>
<tab>standard-home</tab>
<tab>Property__c</tab>
<tab>Broker__c</tab>
<tab>standard-Contact</tab>
<tab>Property_Explorer1</tab>
<tab>Command_Center</tab>
<tab>Einstein_Vision</tab>
<tab>standard-report</tab>
<tab>standard-Dashboard</tab>
<tab>standard-Event</tab>
<tab>Heat_Map_Mock</tab>
<tab>Heat_Map</tab>
<tab>Sample_Data_Import</tab>
<tab>Bot_Command__c</tab>
<tab>standard-File</tab>
<uiType>Lightning</uiType>
<utilityBar>dreamhouseApplicationUtilityBar</utilityBar>
</CustomApplication>

Просмотреть файл

@ -0,0 +1,80 @@
<aura:component implements="flexipage:availableForAllPageTypes" controller="BotController" >
<aura:attribute name="question" type="String" default=""/>
<aura:attribute name="messages" type="Object[]"/>
<aura:attribute name="session" type="Array"/>
<aura:attribute name="height" type="String" default="500px"/>
<aura:attribute name="files" type="Object[]"/>
<div style="{#'height: '+v.height}" class="slds-p-vertical--x-small">
<div aura:id="content" class="content">
<aura:iteration items="{!v.messages}" var="message">
<lightning:layout >
<lightning:layoutitem padding="around-small">
<lightning:icon iconName="{#message.author == 'Me' ? 'standard:avatar_loading' : 'standard:custom_notification'}" size="small"/>
</lightning:layoutitem>
<lightning:layoutitem padding="around-small" flexibility="grow">
<p><strong>{#message.author}</strong></p>
<p class="slds-text-body">{#message.messageText}</p>
<aura:if isTrue="{!message.imageURL}">
<figure class="slds-image slds-image--card slds-m-top--x-small">
<img src='{#message.imageURL}'/>
</figure>
</aura:if>
<aura:iteration items="{!message.buttons}" var="button">
<lightning:button label="{#button.label}" name="{#button.value}" onclick="{!c.postbackButtonClickHandler}" class="message-button"/>
</aura:iteration>
<aura:iteration items="{!message.records}" var="record">
<dl class="slds-list--horizontal slds-wrap">
<aura:iteration items="{!record.fields}" var="field">
<dt class="slds-item--label slds-text-color--weak slds-truncate">{!field.name}:</dt>
<dd class="slds-item--detail slds-truncate">
<aura:if isTrue="{!field.linkURL}">
<a href="{#field.linkURL}">{#field.value}</a>
<aura:set attribute="else">
{#field.value}
</aura:set>
</aura:if>
</dd>
</aura:iteration>
</dl>
</aura:iteration>
<aura:iteration items="{!message.items}" var="item">
<aura:if isTrue="{!item.linkURL}">
<div class="list-item"><a href="{#item.linkURL}" target="_blank">{#item.name}</a></div>
<aura:set attribute="else">
<div class="list-item">{#item.name}</div>
</aura:set>
</aura:if>
</aura:iteration>
</lightning:layoutitem>
</lightning:layout>
</aura:iteration>
</div>
<div class="footer slds-form-element slds-p-horizontal--x-small">
<div class="slds-form-element__control">
<input aura:id="utterance" type="text" class="slds-input" placeholder="Ask DreamBot..." onkeypress="{!c.utteranceHandler}" />
<lightning:input aura:id="fileInput"
type="file" name="file"
multiple="false"
accept="image/*;capture=camera"
files="{!v.files}"
onchange="{!c.uploadFile}"
label="Select a file"/>
</div>
</div>
</div>
</aura:component>

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>39.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,59 @@
.THIS {
position: relative;
box-sizing: border-box;
overflow: hidden !important;
}
.THIS>.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 80px;
overflow: scroll;
}
.THIS>.footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.THIS>.author {
font-weight: bold;
}
.THIS dl {
padding: 4px 0 4px 0;
border-bottom: solid 1px #f4f6f9;
}
.THIS .list-item {
margin: 4px 0 4px 0;
border-bottom: solid 1px #f4f6f9;
}
.THIS .slds-post {
border-top: none !important;
}
.THIS .message-button {
display: block;
width:100%;
margin-top: 4px;
margin-left: 0;
}
.THIS .slds-form-element__label {
display: none;
}
.THIS .slds-file-selector {
margin-top: 4px;
width: 100% !important;
}
.THIS .slds-file-selector__dropzone {
width: 100% !important;
}

Просмотреть файл

@ -0,0 +1,3 @@
<design:component >
<design:attribute name="height" label="Height (in pixels)" default="500px" description="Component height" />
</design:component>

Просмотреть файл

@ -0,0 +1,64 @@
({
utteranceHandler : function(component, event, helper) {
if (event.keyCode !== 13) {
return;
}
var utterance = event.target.value;
var messages = component.get("v.messages");
messages.push({author: "Me", messageText: utterance});
event.target.value = "";
component.set("v.messages", messages);
helper.submit(component, utterance, component.get('v.session'), null, null, function(answer) {
if (answer) {
console.log(answer);
component.set("v.session", answer.session);
Array.prototype.push.apply(messages, answer.messages);
component.set("v.messages", messages);
}
});
},
postbackButtonClickHandler : function(component, event, helper) {
var utterance = event.getSource().get("v.label");
var messages = component.get("v.messages");
messages.push({author: "Me", messageText: utterance});
component.set("v.messages", messages);
helper.submit(component, utterance, component.get('v.session'), null, null, function(answer) {
if (answer) {
console.log(answer);
component.set("v.session", answer.session);
Array.prototype.push.apply(messages, answer.messages);
component.set("v.messages", messages);
}
});
},
uploadFile: function(component, event, helper) {
var files = component.get("v.files");
if (files && files.length > 0) {
var file = files[0][0];
if (!file.type.match(/(image.*)/)) {
return alert('Image file not supported');
}
var reader = new FileReader();
reader.onloadend = function() {
var dataURL = reader.result;
var content = dataURL.match(/,(.*)$/)[1];
var messages = component.get("v.messages");
var utterance = component.find('utterance').getElement().value;
messages.push({author: "Me", messageText: "Uploading file " + file.name, imageURL: dataURL});
component.set("v.messages", messages);
helper.submit(component, utterance, component.get('v.session'), file.name, content, function(answer) {
if (answer) {
console.log(answer);
component.set("v.session", answer.session);
Array.prototype.push.apply(messages, answer.messages);
component.set("v.messages", messages);
}
});
};
reader.readAsDataURL(file);
}
}
})

Просмотреть файл

@ -0,0 +1,33 @@
({
submit: function(component, utterance, session, fileName, base64Data, callback) {
var action = component.get("c.submit");
action.setParams({
utterance: utterance,
session: session,
fileName: fileName,
fileContent: base64Data
});
action.setCallback(this, function(a) {
var state = a.getState();
if (state === "SUCCESS") {
callback(a.getReturnValue());
} else if (state === 'ERROR') {
var errors = a.getError();
console.log(errors);
if (errors) {
if (errors[0] && errors[0].message) {
alert("Error message: " + errors[0].message);
}
} else {
console.log("Unknown error");
}
} else if (state === "INCOMPLETE") {
console.log("Incomplete");
}
});
$A.enqueueAction(action);
}
})

Просмотреть файл

@ -0,0 +1,13 @@
({
rerender: function (component, helper) {
this.superRerender();
window.setTimeout(
$A.getCallback(function() {
if (component.isValid()) {
var el = component.find("content").getElement();
el.scrollTop = el.scrollHeight;
}
}),200);
}
})

Просмотреть файл

@ -0,0 +1,69 @@
<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes"
access="global">
<!--
A component used to predict the number of days a property will stay on the market based on the asking price.
The prediction service is stubbed in this version of the component.
-->
<ltng:require scripts="{!$Resource.countup7}" />
<aura:attribute name="recordId" type="Id"/>
<aura:attribute name="property" type="Property__c"/>
<aura:attribute name="price" type="Long"/>
<aura:attribute name="formattedPrice" type="String"/>
<aura:attribute name="newPrice" type="Long"/>
<aura:attribute name="days" type="Integer" default="0"/>
<aura:attribute name="color" type="String" default="green"/>
<aura:attribute name="waiting" type="Boolean" default="false"/>
<force:recordData aura:id="propertyService"
recordId="{!v.recordId}"
targetFields="{!v.property}"
fields="['Id', 'Price__c', 'Assessed_Value__c', 'Address__c', 'City__c', 'Date_Listed__c']"
mode="EDIT"
recordUpdated="{!c.onRecordUpdated}"/>
<aura:handler event="ltng:selectSObject" action="{!c.onRecordSelected}"/>
<lightning:card >
<aura:set attribute="title">
<lightning:icon iconName="utility:magicwand" size="small"/>
Days on Market Estimator
</aura:set>
<aura:set attribute="actions">
<lightning:button label="Save as New Price" onclick="{!c.onSavePriceBtnClicked}"/>
</aura:set>
<aura:if isTrue="{!v.property==undefined}">
<div aura:id="selectSection" class="select slds-text-color--weak">
Select a property
</div>
</aura:if>
<aura:if isTrue="{!v.property!=undefined}">
<div aura:id="dataPanel">
<div class="summary">
{!v.property.Address__c},&nbsp;{!v.property.City__c} ・ Current Price: <lightning:formattedNumber value="{!v.property.Price__c}" style="currency" currencyCode="USD"/>
</div>
<div class="container">
<div class="left">
<h1>{!v.formattedPrice}</h1>
<input class="slider" min='{!v.property.Price__c * 0.7}' max='{!v.property.Price__c * 1.3}' type='range' value='{!v.property.Price__c}'
step="1000" onchange='{!c.onPriceChange}' oninput='{!c.onPriceInput}'/>
</div>
<div class="right">
<h1><span aura:id="days"></span> days</h1>
<div aura:id="bar" style="{! 'width:' + v.days / 90 * 100 + '%;background-color:' + v.color }" class="bar"/>
</div>
</div>
</div>
</aura:if>
<aura:if isTrue="{! v.waiting }">
<lightning:spinner size="large"/>
</aura:if>
</lightning:card>
</aura:component>

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>38.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,75 @@
.THIS {
position:relative;
}
.THIS .slds-card__body {
height: 140px;
}
.THIS h1 {
font-weight: 300;
color: #0070D2;
font-size: 24px;
}
.THIS .hidden {
display: none;
}
.THIS .container {
display: flex;
align-items: center;
}
.THIS .left {
text-align: center;
width: 160px;
margin-right: 20px
}
.THIS .right {
border-left: solid 1px #DDDDDD;
text-align: center;
flex: 1;
}
.THIS .slider {
display: block;
width:100%;
margin: 8px 0 16px 0;
}
.THIS .bar {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
height: 60px;
width: 1px;
background-color: green;
transition: all 2s ease-in-out;
border-radius: 0 4px 4px 0;
margin-bottom: 8px;
}
.THIS .slds-card__body {
padding: 0 20px;
}
.THIS .slds-icon-standard-solution {
background-color: transparent;
}
.THIS .slds-icon-standard-solution svg {
fill: #54698D;
}
.THIS .select {
padding-top: 50px;
text-align: center;
}
.THIS .summary {
width: 100%;
text-align: left;
padding-top: 4px;
padding-bottom: 8px;
}

Просмотреть файл

@ -0,0 +1,3 @@
<design:component label="Days on Market Estimator">
</design:component>

Просмотреть файл

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="88.316px" height="88.318px" viewBox="0 0 88.316 88.318" enable-background="new 0 0 88.316 88.318" xml:space="preserve">
<g id="Layer_1_copy">
<path fill="#EA74A2" d="M88.316,73.268c0,8.312-6.738,15.051-15.054,15.051H15.05C6.737,88.319,0,81.581,0,73.268V15.052
C0,6.74,6.737,0,15.05,0h58.215c8.312,0,15.054,6.74,15.054,15.052L88.316,73.268L88.316,73.268z"/>
</g>
<g id="Layer_5">
<g>
<path fill="#FFFFFF" d="M77.931,50.581H40.867c-0.722,0-1.354,0.633-1.354,1.356v22.146c0,1.99,1.627,3.616,3.615,3.616h32.543
c1.99,0,3.616-1.626,3.616-3.616V51.937C79.287,51.214,78.654,50.581,77.931,50.581z M53.072,70.469
c0,0.544-0.362,0.903-0.904,0.903h-3.616c-0.543,0-0.902-0.359-0.902-0.903v-3.615c0-0.543,0.359-0.904,0.902-0.904h3.616
c0.542,0,0.904,0.361,0.904,0.904V70.469z M53.072,61.427c0,0.544-0.362,0.904-0.904,0.904h-3.616
c-0.543,0-0.902-0.36-0.902-0.904v-3.615c0-0.543,0.359-0.903,0.902-0.903h3.616c0.542,0,0.904,0.36,0.904,0.903V61.427z
M62.111,70.469c0,0.544-0.362,0.903-0.903,0.903h-3.616c-0.543,0-0.903-0.359-0.903-0.903v-3.615c0-0.543,0.36-0.904,0.903-0.904
h3.616c0.541,0,0.903,0.361,0.903,0.904V70.469z M62.111,61.427c0,0.544-0.362,0.904-0.903,0.904h-3.616
c-0.543,0-0.903-0.36-0.903-0.904v-3.615c0-0.543,0.36-0.903,0.903-0.903h3.616c0.541,0,0.903,0.36,0.903,0.903V61.427z
M71.151,70.469c0,0.544-0.362,0.903-0.904,0.903h-3.615c-0.542,0-0.903-0.359-0.903-0.903v-3.615
c0-0.543,0.361-0.904,0.903-0.904h3.615c0.542,0,0.904,0.361,0.904,0.904V70.469z M71.151,61.427c0,0.544-0.362,0.904-0.904,0.904
h-3.615c-0.542,0-0.903-0.36-0.903-0.904v-3.615c0-0.543,0.361-0.903,0.903-0.903h3.615c0.542,0,0.904,0.36,0.904,0.903V61.427z
M75.671,38.829h-4.52v-1.808c0-1.447-1.175-2.712-2.712-2.712c-1.447,0-2.712,1.175-2.712,2.712v1.808H53.072v-1.808
c0-1.447-1.175-2.712-2.712-2.712c-1.447,0-2.712,1.175-2.712,2.712v1.808h-4.521c-1.987,0-3.616,1.628-3.616,3.616v2.261
c0,0.722,0.634,1.355,1.355,1.355H77.93c0.723,0,1.354-0.635,1.354-1.355v-2.261C79.287,40.457,77.661,38.829,75.671,38.829z"/>
</g>
<path fill="#FFFFFF" d="M32.7,30.25c-0.4-0.398-1-0.398-1.4,0L7.4,54.15c-1.2,1.199-1.2,3,0,4.199s3,1.199,4.2,0L35.5,34.45
c0.4-0.4,0.4-1,0-1.4L32.7,30.25z"/>
<path fill="#FFFFFF" d="M39.7,30.25l3.2-3.2c0.6-0.6,0.6-1.5,0-2.1l-2.102-2.1c-0.6-0.602-1.5-0.602-2.1,0l-3.2,3.198
c-0.399,0.4-0.399,1,0,1.4l2.8,2.8C38.7,30.649,39.3,30.649,39.7,30.25z"/>
<path fill="#FFFFFF" d="M14.9,20.85c3.8,1.198,6.8,4.1,8,8c0.2,0.6,1,0.6,1.2,0c1.199-3.802,4.1-6.802,8-8
c0.601-0.201,0.601-1,0-1.201c-3.801-1.199-6.801-4.101-8-8c-0.2-0.601-1-0.601-1.2,0c-1.2,3.8-4.101,6.8-8,8
C14.4,19.85,14.4,20.649,14.9,20.85z"/>
<path fill="#FFFFFF" d="M42.8,17.649c2.602,0.801,4.5,2.701,5.301,5.301c0.101,0.4,0.699,0.4,0.801,0c0.8-2.6,2.699-4.5,5.3-5.301
c0.399-0.101,0.399-0.699,0-0.799c-2.601-0.802-4.5-2.701-5.3-5.302c-0.102-0.399-0.7-0.399-0.801,0
c-0.801,2.601-2.699,4.5-5.301,5.302C42.4,16.95,42.4,17.55,42.8,17.649z"/>
<path fill="#FFFFFF" d="M42.875,34.91c3.8,1.199,6.8,4.1,8,8c0.201,0.6,1,0.6,1.201,0c1.199-3.801,4.1-6.801,7.999-8
c0.601-0.201,0.601-1,0-1.201c-3.8-1.199-6.8-4.1-7.999-8c-0.201-0.6-1-0.6-1.201,0c-1.199,3.801-4.1,6.801-8,8
C42.375,33.91,42.375,34.709,42.875,34.91z"/>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 3.5 KiB

Просмотреть файл

@ -0,0 +1,41 @@
({
onRecordSelected : function(component, event) {
var id = event.getParam("recordId");
component.set("v.recordId", id);
var service = component.find("propertyService");
service.reloadRecord();
},
onRecordUpdated : function(component, event, helper) {
var changeType = event.getParams().changeType;
if (changeType === "CHANGED") {
var service = component.find("propertyService");
service.reloadRecord();
} else {
var property = component.get("v.property");
helper.setFormattedPrice(component, property.Price__c);
helper.calculateDays(component, helper, property.Price__c);
}
},
// Sliding price range input
onPriceInput: function(component, event, helper) {
helper.setFormattedPrice(component, event.target.value);
},
// Releasing price range input
onPriceChange: function(component, event, helper) {
var property = component.get("v.property");
var newPrice = event.target.value;
property.Price__c = newPrice;
helper.calculateDays(component, helper, newPrice);
},
onSavePriceBtnClicked : function(component) {
var property = component.get("v.property");
if (property) {
component.find("propertyService").saveRecord();
}
}
})

Просмотреть файл

@ -0,0 +1,55 @@
({
setFormattedPrice: function(component, price) {
var formattedPrice = Number(price).toLocaleString("en-US", {style: "currency", currency: 'USD'});
component.set("v.formattedPrice", formattedPrice);
},
calculateDays: function(component, helper, price) {
var property = component.get("v.property");
var ellapsed = (new Date() - new Date(property.Date_Listed__c)) / 24 / 60 / 60 / 1000;
var currentDays = component.get("v.days") || ellapsed;
component.set("v.waiting", true);
helper.predictDaysOnMarket(component, property, price, function(days) {
if (component.isValid()) {
component.set("v.waiting", false);
var color = '#00716B';
if (days > 60) {
color = '#C23934';
} else if (days > 30) {
color = '#FFB75D';
}
component.set("v.color", color);
var daysEl = component.find("days").getElement();
var daysAnim = new CountUp(daysEl, currentDays, days, 0, 2);
daysAnim.start();
component.set("v.days", days);
}
});
},
predictDaysOnMarket: function(component, property, price, callback) {
// Stubbed service call. Make call to PredictionIO here.
// More info: http://www.dreamhouseapp.io/pio/
window.setTimeout($A.getCallback(function() {
if (component.isValid()) {
var days;
var assessedValue = property.Assessed_Value__c;
if (price < assessedValue) {
days = 2;
} else if (price < assessedValue * 1.1) {
days = price / assessedValue * 10;
} else if (price < assessedValue * 1.2) {
days = price / assessedValue * 30;
} else if (price < assessedValue * 1.3) {
days = price / assessedValue * 40;
} else if (price < assessedValue * 1.4) {
days = price / assessedValue * 60;
} else {
days = 90;
}
callback(days);
}
}), 300);
}
})

Просмотреть файл

@ -0,0 +1,32 @@
<aura:component implements="force:appHostable" access="global" controller="EinsteinVisionController">
<aura:attribute name="modelId" type="String"/>
<aura:attribute name="files" type="Object[]"/>
<aura:attribute name="predictions" type="Object[]"/>
<aura:attribute name="waiting" type="Boolean" default="false"/>
<aura:attribute name="pictureSrc" type="String" />
<aura:registerEvent name="einsteinVisionEvent" type="c:EinsteinVisionEvent"/>
<div>
<lightning:input aura:id="fileInput" type="file" name="file" multiple="false" accept="image/*;capture=camera" files="{!v.files}" onchange="{! c.readFile }"
label="Select a picture:"/>
<img src="{!v.pictureSrc}"/>
<aura:iteration items="{!v.predictions}" var="prediction">
<lightning:layout >
<lightning:layoutitem ><lightning:icon iconName="utility:preview" size="x-small"/></lightning:layoutitem>
<lightning:layoutitem >{! prediction.formattedProbability}</lightning:layoutitem>
<lightning:layoutitem flexibility="grow">{!prediction.label}</lightning:layoutitem>
</lightning:layout>
</aura:iteration>
<aura:if isTrue="{! v.waiting }">
<lightning:spinner size="large"/>
</aura:if>
</div>
</aura:component>

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>39.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,50 @@
.THIS {
margin: 12px;
}
.THIS td {
padding: 2px;
}
.THIS .probability {
padding-right: 4px;
text-align: right;
}
.THIS {
position: relative;
}
.THIS img {
margin: 8px 0;
height: 150px;
}
.THIS table {
display: block;
width: 100%;
}
.THIS tr {
border-top: 1px dashed rgb(216, 221, 230);
width: 100%;
}
.THIS .slds-grid > div {
padding: 2px 3px 0 3px;
font-size: 12px;
border-bottom: 1px dashed rgb(216, 221, 230);
}
.THIS .slds-file-selector {
margin-top: 4px;
width: 100% !important;
}
.THIS .slds-file-selector__dropzone {
width: 100% !important;
}
.THIS .slds-form-element__label {
display: none;
}

Просмотреть файл

@ -0,0 +1,3 @@
<design:component >
</design:component>

Просмотреть файл

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="#2A739E"/>
<path d="M77.7383308,20 L61.1640113,20 L44.7300055,63.2000173 L56.0543288,63.2000173 L40,99.623291 L72.7458388,54.5871812 L60.907727,54.5871812 L77.7383308,20 Z" id="Path-1" fill="#FFFFFF"/>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 661 B

Просмотреть файл

@ -0,0 +1,20 @@
({
readFile: function(component, event, helper) {
var files = component.get("v.files");
if (files && files.length > 0) {
var file = files[0][0];
if (!file.type.match(/(image.*)/)) {
return alert('Image file not supported');
}
var reader = new FileReader();
reader.onloadend = function() {
var dataURL = reader.result;
component.set("v.pictureSrc", dataURL);
helper.upload(component, file, dataURL.match(/,(.*)$/)[1]);
};
reader.readAsDataURL(file);
}
}
})

Просмотреть файл

@ -0,0 +1,40 @@
({
upload: function(component, file, base64Data) {
var action = component.get("c.predict");
var modelId = component.get("v.modelId");
action.setParams({
fileName: file.name,
content: base64Data,
modelId: modelId
});
action.setCallback(this, function(a) {
component.set("v.waiting", false);
var state = a.getState();
if (state === 'ERROR') {
console.log(a.getError());
alert("An error has occurred");
}
var result = a.getReturnValue();
var predictions = [];
if (result && result.length) {
for (var i=0; i<result.length; i++) {
predictions.push({
label: result[i].label,
formattedProbability: '' + Math.round(result[i].probability * 100) + '%'
});
}
component.set("v.predictions", predictions);
var myEvent = $A.get("e.c:EinsteinVisionEvent");
myEvent.setParams({
"predictions": result
});
myEvent.fire();
}
});
component.set("v.predictions", null);
component.set("v.waiting", true);
$A.enqueueAction(action);
}
})

Просмотреть файл

@ -0,0 +1,9 @@
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<aura:attribute name="modelId" type="String"/>
<lightning:card title="Image-Based Search" iconName="utility:preview">
<c:EinsteinVision modelId="{!v.modelId}" />
</lightning:card>
</aura:component>

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>39.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,3 @@
.THIS {
height: 330px;
}

Просмотреть файл

@ -0,0 +1,3 @@
<design:component label="Image-Based Search">
<design:attribute name="modelId" label="Model Id" description="Einstein Vision Model Id" />
</design:component>

Просмотреть файл

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="240px" height="240px" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>Slice</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#5AA9C8" x="0" y="0" width="240" height="240" rx="8"></rect>
<g id="Group" transform="translate(30.000000, 63.000000)" fill-rule="nonzero" fill="#FFFFFF">
<path d="M176,53.6666667 C160.333333,22 127.666667,0 90,0 C52.3333333,0 19.6666667,22 4,53.6666667 C3,55.6666667 3,58 4,59.6666667 C19.6666667,91.3333333 52.3333333,113.333333 90,113.333333 C127.666667,113.333333 160.333333,91.3333333 176,59.6666667 C177,57.6666667 177,55.6666667 176,53.6666667 L176,53.6666667 Z M90,93.3333333 C69.6666667,93.3333333 53.3333333,77 53.3333333,56.6666667 C53.3333333,36.3333333 69.6666667,20 90,20 C110.333333,20 126.666667,36.3333333 126.666667,56.6666667 C126.666667,77 110.333333,93.3333333 90,93.3333333 L90,93.3333333 Z M90,33.3333333 C77,33.3333333 66.6666667,43.6666667 66.6666667,56.6666667 C66.6666667,69.6666667 77,80 90,80 C103,80 113.333333,69.6666667 113.333333,56.6666667 C113.333333,43.6666667 103,33.3333333 90,33.3333333 L90,33.3333333 Z" id="Shape"></path>
</g>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 1.4 KiB

Просмотреть файл

@ -0,0 +1,5 @@
({
myAction : function(component, event, helper) {
}
})

Просмотреть файл

@ -0,0 +1,35 @@
<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="EinsteinVisionController">
<aura:attribute name="datasets" type="Object[]"/>
<aura:attribute name="pathToZip" type="String" default="https://s3-us-west-1.amazonaws.com/sfdc-demo/houses.zip"/>
<aura:attribute name="waiting" type="Boolean" default="false"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div>
<lightning:layout verticalAlign="end" class="path-to-zip slds-m-around--small">
<lightning:layoutitem flexibility="grow">
<lightning:input label="ZIP file URL:" value="{!v.pathToZip}"/>
</lightning:layoutitem>
<lightning:layoutitem >
<lightning:button onclick="{!c.onCreateDataset}">Create Dataset</lightning:button>
<lightning:button onclick="{!c.onRefresh}">Refresh Datasets</lightning:button>
</lightning:layoutitem>
</lightning:layout>
<lightning:layout multipleRows="true">
<aura:iteration items="{!v.datasets}" var="dataset">
<lightning:layoutitem size="6" padding="around-small">
<c:EinsteinVisionDataset dataset="{!dataset}" onchange="{!c.datasetChange}"/>
</lightning:layoutitem>
</aura:iteration>
</lightning:layout>
<aura:if isTrue="{! v.waiting }">
<lightning:spinner size="large"/>
</aura:if>
</div>
</aura:component>

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>39.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,7 @@
.THIS .path-to-zip {
margin-bottom: 12px;
}
.THIS .path-to-zip .slds-button {
margin-left: 8px;
}

Просмотреть файл

@ -0,0 +1,40 @@
({
doInit: function(component, event, helper) {
helper.getDatasets(component);
},
onRefresh: function(component, event, helper) {
helper.getDatasets(component);
},
onCreateDataset: function(component, event, helper) {
var action = component.get("c.createDataset");
action.setParams({
pathToZip: component.get("v.pathToZip")
});
action.setCallback(this, function(response) {
component.set("v.waiting", false);
var state = response.getState();
console.log(state);
if (state === 'ERROR') {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
return alert(errors[0].message);
}
} else {
return console.log("Unknown error");
}
}
var result = response.getReturnValue();
helper.getDatasets(component);
});
component.set("v.waiting", true);
$A.enqueueAction(action);
},
datasetChange: function(component, event, helper) {
helper.getDatasets(component);
}
})

Просмотреть файл

@ -0,0 +1,24 @@
({
getDatasets : function(component) {
var action = component.get("c.getDatasets");
action.setCallback(this, function(response) {
component.set("v.waiting", false);
var state = response.getState();
console.log(state);
if (state === 'ERROR') {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
return alert(errors[0].message);
}
} else {
return console.log("Unknown error");
}
}
var result = response.getReturnValue();
component.set("v.datasets", JSON.parse(result).data);
});
component.set("v.waiting", true);
$A.enqueueAction(action);
}
})

Просмотреть файл

@ -0,0 +1,85 @@
<aura:component controller="EinsteinVisionController">
<aura:attribute name="dataset" type="Object"/>
<aura:attribute name="models" type="Object[]"/>
<aura:attribute name="currentTab" type="String" default="labels"/>
<aura:registerEvent name="onchange" type="c:EinsteinVisionDatasetEvent"/>
<lightning:card title="{!v.dataset.name}" iconName="utility:preview">
<aura:set attribute="actions">
<aura:if isTrue="{!v.currentTab=='labels'}">
<lightning:button label="Train" onclick="{!c.onTrainModel}" />
<lightning:button label="Delete" onclick="{!c.onDeleteDataset}" />
</aura:if>
<aura:if isTrue="{!v.currentTab=='models'}">
<lightning:button label="Refresh Models" onclick="{!c.onRefresh}" />
</aura:if>
</aura:set>
Dataset Id: {!v.dataset.id}
<lightning:tabset >
<lightning:tab label="Labels" onactive="{!c.onLabelsTab}">
<table class="slds-table slds-table--bordered slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">
<div class="slds-truncate" title="Name">Label</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Examples">Examples</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.dataset.labelSummary.labels}" var="label">
<tr>
<td data-label="Account Name">
<div class="slds-truncate" title="{!label.name}">{!label.name}</div>
</td>
<td data-label="Account Name">
<div class="slds-truncate" title="{!label.numExamples}">{!label.numExamples}</div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</lightning:tab>
<lightning:tab label="Models" onactive="{!c.onModelsTab}">
<table class="slds-table slds-table--bordered slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">
<div class="slds-truncate" title="Model Id">Model Id</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Progress">Progress</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Status">Status</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.models}" var="model">
<tr>
<td data-label="Model Id">
<div class="slds-truncate" title="{!model.modelId}">{!model.modelId}</div>
</td>
<td data-label="Progress">
<div class="slds-truncate" title="{!model.progress}">{!model.progress}</div>
</td>
<td data-label="Status">
<div class="slds-truncate" title="{!model.status}">{!model.status}</div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</lightning:tab>
</lightning:tabset>
</lightning:card>
</aura:component>

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>39.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,7 @@
.THIS {
height: 320px;
}
.THIS .slds-card__body {
padding: 0 12px;
}

Просмотреть файл

@ -0,0 +1,68 @@
({
onModelsTab: function(component, event, helper) {
helper.getModelsByDataset(component);
component.set('v.currentTab', 'models');
},
onLabelsTab: function(component, event, helper) {
component.set('v.currentTab', 'labels');
},
onRefresh: function(component, event, helper) {
helper.getModelsByDataset(component);
},
onDeleteDataset: function(component, event, helper) {
var action = component.get("c.deleteDataset");
action.setParams({
datasetId: component.get("v.dataset").id
});
action.setCallback(this, function(response) {
var changeEvent = component.getEvent("onchange");
changeEvent.fire();
var state = response.getState();
console.log(state);
if (state === 'ERROR') {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
alert("Error message: " + errors[0].message);
}
} else {
console.log("Unknown error");
}
}
var result = response.getReturnValue();
console.log(result);
});
$A.enqueueAction(action);
},
onTrainModel: function(component, event, helper) {
var action = component.get("c.trainModel");
var dataset = component.get("v.dataset");
action.setParams({
modelName: dataset.name + " model",
datasetId: dataset.id
});
action.setCallback(this, function(response) {
var state = response.getState();
console.log(state);
if (state === 'ERROR') {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
alert("Error message: " + errors[0].message);
}
} else {
console.log("Unknown error");
}
}
var result = response.getReturnValue();
console.log(result);
//alert("Started training model");
});
$A.enqueueAction(action);
},
})

Просмотреть файл

@ -0,0 +1,34 @@
({
getModelsByDataset : function(component) {
var action = component.get("c.getModelsByDataset");
action.setParams({
datasetId: component.get("v.dataset").id
});
action.setCallback(this, function(response) {
var state = response.getState();
console.log(state);
if (state === 'ERROR') {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
alert("Error message: " + errors[0].message);
}
} else {
console.log("Unknown error");
}
}
var models = JSON.parse(response.getReturnValue()).data;
for (var i=0; i<models.length; i++) {
console.log(models[i].progress);
if (models[i].progress) {
models[i].progress = parseFloat(models[i].progress) * 100 + "%";
console.log(models[i].progress);
} else {
console.log('n/a');
}
}
component.set("v.models", models);
});
$A.enqueueAction(action);
}
})

Просмотреть файл

@ -0,0 +1 @@
<aura:event type="APPLICATION" description="Event template" />

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>39.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,3 @@
<aura:event type="APPLICATION" description="Event template">
<aura:attribute name="predictions" type="List"/>
</aura:event>

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>39.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,10 @@
<aura:component >
<aura:attribute name="value" type="Object"/>
<aura:attribute name="formattedValue" type="String"/>
<aura:handler name="change" value="{!v.value}" action="{!c.valueChangeHandler}"/>
{!v.formattedValue}
</aura:component>

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>38.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,7 @@
({
valueChangeHandler : function(component) {
var value = component.get("v.value");
var formattedValue = new Date(value).toLocaleString('en-US', {month: 'short', year: 'numeric', day: 'numeric'});
component.set("v.formattedValue", formattedValue);
}
})

Просмотреть файл

@ -0,0 +1,17 @@
<aura:component access="global">
<ltng:require styles="{!$Resource.leaflet1 + '/leaflet.css'}"
scripts="{!$Resource.leaflet1 + '/leaflet.js'}"
afterScriptsLoaded="{!c.jsLoaded}" />
<aura:attribute name="location" type="SObject"/>
<aura:attribute name="jsLoaded" type="boolean" default="false"/>
<aura:method name="setLocation" action="{!c.setLocation}">
<aura:attribute name="lat" type="String" />
<aura:attribute name="long" type="String" />
</aura:method>
<div aura:id="map"></div>
</aura:component>

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>36.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,4 @@
.THIS {
width: 100%;
height: 100%;
}

Просмотреть файл

@ -0,0 +1,2 @@
<design:component label="Map">
</design:component>

Просмотреть файл

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Slice</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#62B7ED" x="0" y="0" width="100" height="100" rx="8"></rect>
<path d="M84.225,26.0768044 L62.925,15.4268044 C61.8895833,14.9830544 60.70625,14.9830544 59.81875,15.4268044 L40.1458333,25.3372211 L20.325,15.4268044 C19.1416667,14.8351377 17.6625,14.8351377 16.6270833,15.5747211 C15.5916667,16.1663877 15,17.3497211 15,18.5330544 L15,71.7830544 C15,73.1143044 15.7395833,74.2976377 16.9229167,74.8893044 L38.2229167,85.5393044 C39.2583333,85.9830544 40.4416667,85.9830544 41.3291667,85.5393044 L61.15,75.6288877 L80.8229167,85.5393044 C81.2666667,85.8351377 81.8583333,85.9830544 82.45,85.9830544 C83.0416667,85.9830544 83.78125,85.8351377 84.3729167,85.3913877 C85.4083333,84.7997211 86,83.6163877 86,82.4330544 L86,29.1830544 C86,27.8518044 85.4083333,26.6684711 84.225,26.0768044 L84.225,26.0768044 Z M78.6041667,32.8809711 L78.6041667,60.9851377 C78.6041667,62.6122211 77.125,63.7955544 75.6458333,63.2038877 C70.1729167,61.1330544 74.6104167,51.9622211 70.6166667,46.9330544 C66.91875,42.3476377 62.1854167,47.0809711 57.6,39.8330544 C53.3104167,32.8809711 59.0791667,27.8518044 64.4041667,25.1893044 C65.14375,24.8934711 65.8833333,24.8934711 66.475,25.1893044 L77.4208333,30.6622211 C78.3083333,31.1059711 78.6041667,31.9934711 78.6041667,32.8809711 L78.6041667,32.8809711 Z M48.8729167,74.0018044 C47.9854167,74.4455544 46.95,74.2976377 46.2104167,73.7059711 C44.73125,72.3747211 43.5479167,70.3038877 43.5479167,68.2330544 C43.5479167,64.6830544 37.63125,65.8663877 37.63125,58.7663877 C37.63125,52.9976377 30.8270833,51.5184711 25.0583333,52.1101377 C23.5791667,52.2580544 22.54375,51.2226377 22.54375,49.7434711 L22.54375,28.1476377 C22.54375,26.3726377 24.31875,25.1893044 25.7979167,26.0768044 L38.51875,32.4372211 C38.6666667,32.4372211 38.8145833,32.5851377 38.8145833,32.5851377 L39.2583333,32.8809711 C44.5833333,35.9872211 43.5479167,38.5018044 41.3291667,42.3476377 C38.8145833,46.6372211 37.7791667,42.3476377 34.2291667,41.1643044 C30.6791667,39.9809711 27.1291667,42.3476377 28.3125,44.7143044 C29.4958333,47.0809711 33.0458333,44.7143044 35.4125,47.0809711 C37.7791667,49.4476377 37.7791667,52.9976377 44.8791667,50.6309711 C51.9791667,48.2643044 53.1625,49.4476377 55.5291667,51.8143044 C57.8958333,54.1809711 59.0791667,58.9143044 55.5291667,62.4643044 C53.4583333,64.5351377 52.5708333,68.9726377 51.6833333,71.9309711 C51.5354167,72.5226377 51.0916667,73.1143044 50.5,73.4101377 L48.8729167,74.0018044 L48.8729167,74.0018044 Z" id="Shape" fill="#FFFFFF"></path>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 2.9 KiB

Просмотреть файл

@ -0,0 +1,17 @@
({
jsLoaded: function(component) {
component.set("v.jsLoaded", true);
},
setLocation: function(component, event, helper) {
var params = event.getParam('arguments');
if (params) {
component.set("v.location", {
lat: params.lat,
long: params.long
});
}
}
})

Просмотреть файл

@ -0,0 +1,5 @@
({
helperMethod: function() {
}
})

Просмотреть файл

@ -0,0 +1,35 @@
({
rerender: function (component) {
var nodes = this.superRerender();
// If the Leaflet library is not yet loaded, we can't draw the map: return
if (!window.L) {
return nodes;
}
// Draw the map if it hasn't been drawn yet
if (!component.map) {
var mapElement = component.find("map").getElement();
component.map = L.map(mapElement, {zoomControl: true}).setView([42.356045, -71.085650], 13);
component.map.scrollWheelZoom.disable();
window.L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {attribution: 'Tiles © Esri'}).addTo(component.map);
}
var location = component.get('v.location');
if (location && location.lat && location.long) {
var latLng = [location.lat, location.long];
if (component.marker) {
component.marker.setLatLng(latLng);
} else {
component.marker = window.L.marker(latLng);
component.marker.addTo(component.map);
}
component.map.setView(latLng);
}
return nodes;
}
})

Просмотреть файл

@ -0,0 +1,46 @@
<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes"
access="global">
<aura:attribute name="recordId" type="Id" />
<aura:attribute name="dsRecordId" type="Id" />
<aura:attribute name="sObject" type="SObject" />
<aura:attribute name="fullScreen" type="Boolean" default="false" />
<aura:attribute name="titleField" type="String" default="Name"/>
<aura:attribute name="latField" type="String" default="Location__Latitude__s" />
<aura:attribute name="longField" type="String" default="Location__Longitude__s" />
<aura:attribute name="title" type="String" />
<aura:attribute name="fields" type="String[]" default="['Id']" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<force:recordData aura:id="service"
recordId="{!v.dsRecordId}"
targetFields="{!v.sObject}"
fields="{!v.fields}"
recordUpdated="{!c.onRecordUpdated}"/>
<aura:handler event="ltng:selectSObject" action="{!c.recordChangeHandler}"/>
<lightning:card >
<aura:set attribute="title">
<lightning:icon iconName="utility:checkin" size="small" />
<span class="title">{!v.title}</span>
</aura:set>
<aura:set attribute="actions">
<lightning:buttonIcon onclick="{!c.fullScreen}" size="large" iconName="utility:expand" />
</aura:set>
<c:Map aura:id="map"/>
<aura:if isTrue="{!v.fullScreen==true}">
<div role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<c:Map aura:id="bigMap" />
</div>
<div class="btn slds-modal__close close x-large">
<lightning:buttonIcon variant="border-filled" onclick="{!c.closeDialog}" size="large" iconName="utility:close" />
</div>
</div>
<div class="slds-backdrop slds-backdrop--open"></div>
</aura:if>
</lightning:card>
</aura:component>

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>39.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,22 @@
.THIS .slds-card__body {
height: 220px;
margin-bottom : 0;
}
.THIS .slds-modal__container {
margin-top: 100px;
height: 90%;
width: 90%;
max-width: initial;
}
.THIS .slds-modal__close {
position: absolute;
top: 100px;
right: 5%;
}
.THIS .title {
padding-left: 10px;
padding-top: 6px;
}

Просмотреть файл

@ -0,0 +1,7 @@
<design:component label="Map">
<design:attribute name="titleField" label="Title Field" default="Name"/>
<design:attribute name="latField" label="Latitude Field" default="Location__Latitude__s" />
<design:attribute name="longField" label="Longitude Field" default="Location__Longitude__s" />
</design:component>

Просмотреть файл

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Slice</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#EF6E64" x="0" y="0" width="100" height="100" rx="8"></rect>
<path d="M50.2611863,13 C34.0905307,13 21,26.0905307 21,42.4151925 C21,62.7440166 41.9448491,81.3787721 48.4131113,86.3069719 C49.491155,87.2310094 51.0312175,87.2310094 52.2632674,86.3069719 C58.7315297,81.2247659 79.5223725,62.7440166 79.5223725,42.4151925 C79.5223725,26.0905307 66.4318418,13 50.2611863,13 L50.2611863,13 Z M50.2611863,54.5816857 C43.4849116,54.5816857 37.9406868,49.037461 37.9406868,42.2611863 C37.9406868,35.4849116 43.4849116,29.9406868 50.2611863,29.9406868 C57.037461,29.9406868 62.5816857,35.4849116 62.5816857,42.2611863 C62.5816857,49.037461 57.037461,54.5816857 50.2611863,54.5816857 L50.2611863,54.5816857 Z" id="Shape" fill="#FFFFFF"></path>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 1.2 KiB

Просмотреть файл

@ -0,0 +1,40 @@
({
doInit : function(component) {
component.set("v.fields", ["Id", component.get("v.latField"), component.get("v.longField"), component.get("v.titleField")]);
var recordId = component.get("v.recordId");
component.set("v.dsRecordId", recordId);
var service = component.find("service");
service.reloadRecord();
},
fullScreen : function(component) {
console.log(component.get("v.property"));
component.set("v.fullScreen", true);
var sObject = component.get("v.sObject");
if (sObject) {
component.find("bigMap").setLocation(sObject[component.get("v.latField")], sObject[component.get("v.longField")]);
}
},
closeDialog : function(component) {
component.set("v.fullScreen", false);
},
recordChangeHandler : function(component, event) {
console.log('recordChangeHandler');
var id = event.getParam("recordId");
component.set("v.dsRecordId", id);
var service = component.find("service");
service.reloadRecord();
},
onRecordUpdated : function(component, event) {
console.log('onRecordUpdated');
var sObject = component.get("v.sObject");
if (sObject) {
component.set("v.title", sObject[component.get("v.titleField")]);
component.find("map").setLocation(sObject[component.get("v.latField")], sObject[component.get("v.longField")]);
}
}
})

Просмотреть файл

@ -0,0 +1,35 @@
<aura:component implements="flexipage:availableForAllPageTypes">
<aura:attribute name="amortization" type="Object[]"/>
<aura:handler event="c:MortgageChange" action="{!c.mortgageChange}"/>
<table>
<thead>
<tr>
<th>Year</th>
<th class="principal">Principal</th>
<th class="stretch"></th>
<th class="interest">Interest</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.amortization}" var="year" indexVar="index">
<tr>
<td>{!index + 1}</td>
<td class="principal"><ui:outputCurrency value="{!year.principalY}" format="$#,###"/></td>
<td class="stretch">
<div class="flex">
<div class="bar principal" style="{!'flex:'+year.principalY+';-webkit-flex:'+year.principalY}"></div>
<div class="bar interest" style="{!'flex:'+year.interestY+';-webkit-flex:'+year.interestY}"></div>
</div>
</td>
<td class="interest"><ui:outputCurrency value="{!year.interestY}" format="$#,###"/></td>
<td><ui:outputCurrency value="{!year.balance}" format="$#,##0"/></td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:component>

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>34.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,58 @@
.THIS {
margin: 8px;
border-collapse: collapse;
font-weight: light;
font-size: 14px;
}
.THIS td {
font-family: menlo;
font-weight: 300;
}
.THIS .principal {
color: #0288D1;
}
.THIS .interest {
color: #EF6C00;
}
.THIS th {
text-align: right;
font-weight: 600;
}
.THIS th,
.THIS td {
text-align: right;
border: solid 1px #EEEEEE !important;
padding: 1px 4px;
vertical-align: middle;
}
.THIS .bar {
display: inline-block;
border: none;
height: 8px;
}
.THIS .bar.principal {
background-color: #0288D1;
margin-right:1px;
}
.THIS .bar.interest {
background-color: #EF6C00;
margin-left:1px;
}
.THIS .stretch {
width: 100%;
padding-left:0;
padding-right:0;
}
.THIS .flex {
display: -webkit-flex;
display: flex;
}

Просмотреть файл

@ -0,0 +1,2 @@
<design:component label="Mortgage Amortization Chart">
</design:component>

Просмотреть файл

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Slice</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#4BC076" x="0" y="0" width="100" height="100" rx="8"></rect>
<path d="M42.1842105,26.0894737 C42.4684211,26.9421053 43.3210526,27.3684211 44.1736842,27.3684211 L55.6842105,27.3684211 C56.5368421,27.3684211 57.3894737,26.9421053 57.6736842,26.0894737 L62.2210526,17.7052632 C62.5052632,16.8526316 61.9368421,16 61.0842105,16 L38.9157895,16 C38.0631579,16 37.4947368,16.8526316 37.9210526,17.5631579 L42.1842105,26.0894737 L42.1842105,26.0894737 Z M56.6789474,34.0473684 L43.3210526,34.0473684 C32.0947368,34.0473684 23,43.2842105 23,54.6526316 L23,77.3894737 C23,81.0842105 25.9842105,84.2105263 29.8210526,84.2105263 L70.1789474,84.2105263 C73.8736842,84.2105263 77,81.0842105 77,77.3894737 L77,54.6526316 C77,43.2842105 67.7631579,34.0473684 56.6789474,34.0473684 L56.6789474,34.0473684 Z M53.4105263,72.4157895 L53.4105263,76.2526316 C53.4105263,76.9631579 52.7,77.3894737 51.9894737,77.3894737 L47.4421053,77.3894737 C46.7315789,77.3894737 46.5894737,76.9631579 46.5894737,76.2526316 L46.5894737,72.5578947 C43.1789474,71.8473684 40.3368421,70.4263158 39.6263158,69.7157895 C38.7736842,68.8631579 38.4894737,68.1526316 39.2,67.1578947 L40.6210526,64.8842105 C40.9052632,64.3157895 41.6157895,64.0315789 42.3263158,64.0315789 C42.7526316,64.0315789 43.1789474,64.1736842 43.4631579,64.3157895 L43.6052632,64.3157895 C45.8789474,65.7368421 47.8684211,66.3052632 49.2894737,66.3052632 C50.8526316,66.3052632 52.1315789,65.4526316 52.1315789,64.6 C52.1315789,63.8894737 51.7052632,62.7526316 47.4421053,61.3315789 C43.6052632,59.9105263 38.9157895,57.6368421 38.9157895,52.3789474 C38.9157895,49.2526316 40.9052632,45.7 46.5894737,44.5631579 L46.5894737,41.1526316 C46.5894737,40.4421053 46.8736842,40.0157895 47.4421053,40.0157895 L51.9894737,40.0157895 C52.7,40.0157895 53.4105263,40.4421053 53.4105263,41.1526316 L53.4105263,44.4210526 C55.6842105,44.9894737 58.1,46.1263158 58.9526316,46.6947368 C59.3789474,46.9789474 59.6631579,47.5473684 59.8052632,48.1157895 C59.9473684,48.6842105 59.6631579,49.2526316 59.3789474,49.5368421 L57.3894737,51.5263158 C56.9631579,52.0947368 56.1105263,52.5210526 55.5421053,52.5210526 C55.2578947,52.5210526 54.8315789,52.3789474 54.5473684,52.2368421 C52.2736842,50.9578947 50.4263158,50.2473684 49.1473684,50.2473684 C47.3,50.2473684 46.4473684,51.1 46.4473684,51.6684211 C46.4473684,52.5210526 46.8736842,53.3736842 50.7105263,54.7947368 C55.4,56.3578947 60.6578947,58.9157895 60.6578947,64.3157895 C60.8,68.0105263 57.8157895,71.2789474 53.4105263,72.4157895 L53.4105263,72.4157895 Z" id="Shape" fill="#FFFFFF"></path>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 3.0 KiB

Просмотреть файл

@ -0,0 +1,24 @@
({
mortgageChange : function(component, event) {
var principal = event.getParam("principal");
var years = event.getParam("years");
var rate = event.getParam("rate");
var monthlyPayment = event.getParam("monthlyPayment");
var monthlyRate = rate / 100 / 12;
var balance = principal;
var amortization = [];
for (var y=0; y<years; y=y+1) {
var interestY = 0; //Interest payment for year y
var principalY = 0; //Principal payment for year y
for (var m=0; m<12; m=m+1) {
var interestM = balance * monthlyRate; //Interest payment for month m
var principalM = monthlyPayment - interestM; //Principal payment for month m
interestY = interestY + interestM;
principalY = principalY + principalM;
balance = balance - principalM;
}
amortization.push({principalY: Math.round(principalY), interestY: Math.round(interestY), balance: Math.round(balance)});
}
component.set("v.amortization", amortization);
}
})

Просмотреть файл

@ -0,0 +1,5 @@
({
helperMethod : function() {
}
})

Просмотреть файл

@ -0,0 +1,41 @@
<aura:component implements="flexipage:availableForAllPageTypes"
access="global">
<aura:attribute name="recordId" type="Id" />
<aura:attribute name="property" type="Property__c" />
<force:recordData recordId="{!v.recordId}"
targetFields="{!v.property}"
layoutType="FULL"
recordUpdated="{!c.recordUpdated}"/>
<aura:attribute name="principal" type="Integer" default="200000"/>
<aura:attribute name="years" type="Integer" default="30"/>
<aura:attribute name="rate" type="Integer" default="5"/>
<aura:attribute name="monthlyPayment" type="Decimal"/>
<aura:registerEvent name="change" type="c:MortgageChange"/>
<aura:handler name="change" value="{!v.principal}" action="{!c.calculateMonthlyPayment}"/>
<aura:handler name="change" value="{!v.years}" action="{!c.calculateMonthlyPayment}"/>
<aura:handler name="change" value="{!v.rate}" action="{!c.calculateMonthlyPayment}"/>
<aura:handler name="init" value="{!this}" action="{!c.calculateMonthlyPayment}" />
<div>
<div class="input">
<lightning:input aura:id="principal" type="number" label="Principal:" value="{!v.principal}"/>
<lightning:select name="select1" label="Years:" value="{!v.years}">
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
</lightning:select>
<lightning:input aura:id="rate" type="text" label="Rate:" value="{!v.rate}"/>
</div>
<div class="result">
Monthly Payment:
<lightning:formattedNumber value="{!v.monthlyPayment}" style="currency" currencyCode="USD"/>
</div>
</div>
</aura:component>

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>34.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,17 @@
.THIS {
height: 300px;
text-align: center;
}
.THIS .result {
font-weight: 300;
font-size: 20px;
display: block;
color: #0288D1;
margin-top: 10px;
}
.THIS .input {
margin:16px;
text-align:left;
}

Просмотреть файл

@ -0,0 +1,5 @@
<design:component label="Mortgage Calculator">
<design:attribute name="principal" label="Principal" description="Mortgage principal" />
<design:attribute name="years" label="Years" description="Mortgage years" />
<design:attribute name="rate" label="Rate" description="Mortgage rate" />
</design:component>

Просмотреть файл

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Slice</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#E1D951" x="0" y="0" width="100" height="100" rx="8"></rect>
<text id="%" font-family="SalesforceSans-Regular, Salesforce Sans" font-size="64" font-weight="light" fill="#FFFFFF">
<tspan x="10.46" y="73">%</tspan>
</text>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 750 B

Просмотреть файл

@ -0,0 +1,9 @@
({
calculateMonthlyPayment : function(component, event, helper) {
helper.calculateMonthlyPayment(component);
},
recordUpdated : function(component) {
component.set("v.principal", component.get("v.property").Price__c);
}
})

Просмотреть файл

@ -0,0 +1,21 @@
({
calculateMonthlyPayment : function(component) {
// 1. Calculate monthly payment
var principal = component.get("v.principal");
var years = component.get("v.years");
var rate = component.get("v.rate");
if (rate && rate > 0) {
var monthlyRate = rate / 100 / 12;
var monthlyPayment = principal * monthlyRate / (1 - (Math.pow(1/(1 + monthlyRate), years * 12)));
component.set("v.monthlyPayment", monthlyPayment);
// 2. Fire event with new mortgage data
var event = $A.get("e.c:MortgageChange");
event.setParams({"principal": principal,
"years": years,
"rate": rate,
"monthlyPayment": monthlyPayment});
event.fire();
}
}
})

Просмотреть файл

@ -0,0 +1,14 @@
<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes"
access="global">
<aura:attribute name="recordId" type="Id"/>
<aura:attribute name="principal" type="Integer" default="200000"/>
<aura:attribute name="years" type="Integer" default="30"/>
<aura:attribute name="rate" type="Integer" default="5"/>
<lightning:card iconName="utility:chart" title="Mortgage Calculator">
<c:MortgageCalculator recordId="{!v.recordId}" principal="{!v.principal}" years="{!v.years}" rate="{!v.rate}"/>
</lightning:card>
</aura:component>

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>38.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,5 @@
<design:component label="Mortgage Calculator Card">
<design:attribute name="principal" label="Principal" description="Mortgage principal" />
<design:attribute name="years" label="Years" description="Mortgage years" />
<design:attribute name="rate" label="Rate" description="Mortgage rate" />
</design:component>

Просмотреть файл

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Slice</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#779EF2" x="0" y="0" width="100" height="100" rx="8"></rect>
<text id="%" font-family="SalesforceSans-Regular, Salesforce Sans" font-size="64" font-weight="normal" fill="#FFFFFF">
<tspan x="10.46" y="73">%</tspan>
</text>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 751 B

Просмотреть файл

@ -0,0 +1,5 @@
({
myAction : function() {
}
})

Просмотреть файл

@ -0,0 +1,6 @@
<aura:event type="APPLICATION">
<aura:attribute name="principal" type="Decimal"/>
<aura:attribute name="years" type="Integer"/>
<aura:attribute name="rate" type="Decimal"/>
<aura:attribute name="monthlyPayment" type="Decimal"/>
</aura:event>

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>34.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,21 @@
<aura:component access="global">
<aura:attribute name="slideIndex" type="Integer" default="0"/>
<aura:attribute name="slideWidth" type="Integer" default="0"/>
<aura:attribute name="slides" type="Object[]"/>
<div aura:id="gallery" class="gallery">
<div class="filmstrip" style="{! 'margin-left: -' + (v.slideIndex * v.slideWidth) + 'px'}">
<aura:iteration items="{!v.slides}" var="slide" indexVar="index">
<div class="slide" style="{!'width:' + v.slideWidth + 'px;background-image:url(' + slide + ')'}"></div>
</aura:iteration>
</div>
<div class="{! v.slideWidth>640 ? 'btn prev x-large' : 'btn prev'}">
<lightning:buttonIcon variant="border-filled" onclick="{!c.prev}" size="large" iconName="utility:chevronleft" />
</div>
<div class="{! v.slideWidth>640 ? 'btn next x-large' : 'btn next'}">
<lightning:buttonIcon variant="border-filled" onclick="{!c.next}" size="large" iconName="utility:chevronright" />
</div>
</div>
</aura:component>

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>38.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,57 @@
.THIS {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.THIS * {
box-sizing: border-box;
}
.THIS .filmstrip {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all .5s ease-in-out;
height: 100%;
display: inline-block;
white-space: nowrap;
}
.THIS .slide {
height: 100%;
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.THIS .btn {
position: absolute;
}
.THIS .btn.next {
top: 44%;
right: 6px;
}
.THIS .btn.prev {
top: 44%;
left: 6px;
}
.THIS .btn.fullscreen,
.THIS .btn.close
{
bottom: 0;
left: 0;
}
.THIS .btn.x-large .slds-button {
width: 3.5rem;
height: 3.5rem;
}
.THIS .btn.x-large .slds-button__icon {
width: 1.7rem;
height: 1.7rem;
}

Просмотреть файл

@ -0,0 +1,19 @@
({
next: function(component) {
var slideIndex = component.get("v.slideIndex");
var slides = component.get("v.slides");
if (slideIndex + 1 < slides.length) {
slideIndex = slideIndex + 1;
component.set("v.slideIndex", slideIndex);
}
},
prev: function(component) {
var slideIndex = component.get("v.slideIndex");
if (slideIndex > 0) {
slideIndex = slideIndex - 1;
component.set("v.slideIndex", slideIndex);
}
}
})

Просмотреть файл

@ -0,0 +1,6 @@
({
setSlideWidth: function (component) {
var slideWidth = component.find("gallery").getElement().offsetWidth;
component.set("v.slideWidth", slideWidth);
}
})

Просмотреть файл

@ -0,0 +1,6 @@
({
afterRender: function (component, helper) {
this.superAfterRender();
helper.setSlideWidth(component, helper);
}
})

Просмотреть файл

@ -0,0 +1,30 @@
<aura:component implements="flexipage:availableForAllPageTypes"
access="global">
<aura:attribute name="fullScreen" type="Boolean" default="false"/>
<aura:attribute name="animations" type="Boolean" default="true"/>
<aura:attribute name="slides" type="Object[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:card iconName="utility:image" title="Picture Gallery">
<aura:set attribute="actions">
<lightning:buttonIcon onclick="{!c.fullScreen}" size="large" iconName="utility:expand" />
</aura:set>
<c:PictureCarousel slides="{!v.slides}"/>
<aura:if isTrue="{!v.fullScreen==true}">
<div role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<c:PictureCarousel slides="{!v.slides}"/>
</div>
<div class="btn slds-modal__close close x-large">
<lightning:buttonIcon variant="border-filled" onclick="{!c.closeDialog}" size="large" iconName="utility:close" />
</div>
</div>
<div class="slds-backdrop slds-backdrop--open"></div>
</aura:if>
</lightning:card>
</aura:component>

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>38.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,21 @@
.THIS * {
box-sizing: border-box;
}
.THIS .slds-card__body {
height: 340px;
margin-bottom: 0;
}
.THIS .slds-modal__container {
margin-top: 100px;
height: 90%;
width: 90%;
max-width: initial;
}
.THIS .slds-modal__close {
position: absolute;
top: 100px;
right: 5%;
}

Просмотреть файл

@ -0,0 +1,3 @@
<design:component label="Picture Gallery">
<design:attribute name="animations" label="Animations" description="Animated transitions" />
</design:component>

Просмотреть файл

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="96px" height="97px" viewBox="0 0 96 97" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>image</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="image" fill="#54698D">
<g id="Layer_1_copy_2">
<path d="M95.5238095,10.126294 C95.5238095,4.95031056 91.6628057,0.80952381 87.3728014,0.80952381 L8.43672244,0.80952381 C4.14671815,0.80952381 0.285714286,4.95031056 0.285714286,10.126294 L0.285714286,86.7308489 C0.285714286,91.9068323 4.14671815,96.047619 8.43672244,96.047619 L87.3728014,96.047619 C91.6628057,96.047619 95.5238095,91.9068323 95.5238095,86.7308489 L95.5238095,10.126294 L95.5238095,10.126294 Z M78.3809524,75.5714286 L14.5714286,75.5714286 C11.7142857,75.5714286 10.2857143,72.7142857 11.7142857,70.8095238 L31.2380952,37 C31.7142857,35.5714286 34.0952381,35.5714286 34.5714286,37 L46.4761905,57 C47.4285714,58.4285714 49.3333333,58.4285714 50.2857143,57.4761905 L59.8095238,43.6666667 C60.2857143,42.2380952 62.6666667,42.2380952 63.1428571,43.6666667 L80.7619048,71.2857143 C82.1904762,73.1904762 80.7619048,75.5714286 78.3809524,75.5714286 L78.3809524,75.5714286 Z M72.6666667,36.047619 C67.9047619,36.047619 63.6190476,32.2380952 63.6190476,27.4761905 C63.6190476,22.7142857 67.9047619,18.4285714 72.6666667,18.4285714 C77.4285714,18.4285714 81.2380952,22.7142857 81.2380952,27.4761905 C81.2380952,32.2380952 77.4285714,36.047619 72.6666667,36.047619 L72.6666667,36.047619 Z" id="Shape"></path>
</g>
</g>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 1.8 KiB

Просмотреть файл

@ -0,0 +1,19 @@
({
doInit : function(component) {
// Hardcoding images in this demo component
component.set("v.slides", [
'https://s3-us-west-1.amazonaws.com/sfdc-demo/houses/living_room.jpg',
'https://s3-us-west-1.amazonaws.com/sfdc-demo/houses/eatinkitchen.jpg',
'https://s3-us-west-1.amazonaws.com/sfdc-demo/houses/kitchen.jpg'
]);
},
fullScreen : function(component) {
component.set("v.fullScreen", true);
},
closeDialog : function(component) {
component.set("v.fullScreen", false);
}
})

Просмотреть файл

@ -0,0 +1,17 @@
<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global" >
<ltng:require styles="{!$Resource.nouislider + '/nouislider.css'}"
scripts="{!$Resource.nouislider + '/nouislider.js'}"
afterScriptsLoaded="{!c.jsLoaded}" />
<aura:registerEvent name="rangeChange" type="c:RangeChange"/>
<aura:attribute name="min" type="String" default="0"/>
<aura:attribute name="max" type="String" default="1000"/>
<aura:attribute name="step" type="String" default="10"/>
<div>
<div aura:id="slider" class="slider"/>
</div>
</aura:component>

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>39.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

Просмотреть файл

@ -0,0 +1,19 @@
.THIS .slider {
margin: 40px auto 0 auto;
max-width: 350px;
}
.THIS .noUi-connect {
background: #0070D2;
}
.THIS .noUi-target,
.THIS .noUi-handle {
box-shadow: none !important;
}
.THIS .noUi-target {
background: #FFFFFF;
border: 1px solid rgb(216, 221, 230);
border-radius: .25rem;
}

Просмотреть файл

@ -0,0 +1,5 @@
<design:component >
<design:attribute name="min" label="Min Value" default="0"/>
<design:attribute name="max" label="Max Value" default="1000"/>
<design:attribute name="step" label="Step" default="10"/>
</design:component>

Просмотреть файл

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="#2A739E"/>
<path d="M77.7383308,20 L61.1640113,20 L44.7300055,63.2000173 L56.0543288,63.2000173 L40,99.623291 L72.7458388,54.5871812 L60.907727,54.5871812 L77.7383308,20 Z" id="Path-1" fill="#FFFFFF"/>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 661 B

Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше