Skip to content

B
baas-ide
Commit e60272e7 authored by serapath's avatar serapath
Browse files
Options

prepare refactor compileTab to class indentation

parent 2a78b811
Hide whitespace changes
Inline Side-by-side
Showing with 245 additions and 247 deletions
src/app/tabs/compile-tab.js
View file @ e60272e7
...@@ -14,293 +14,291 @@ var publishOnSwarm = require('../contract/publishOnSwarm') ...@@ -14,293 +14,291 @@ var publishOnSwarm = require('../contract/publishOnSwarm')
var styles = styleGuide.chooser() var styles = styleGuide.chooser()
var x = { var x = {
compileTab: compileTab compileTab: function compileTab (appAPI = {}, appEvents = {}, opts = {}) {
} // Containers
var warnCompilationSlow = yo`<i title="Copy Address" style="display:none" class="${css.warnCompilationSlow} fa fa-exclamation-triangle" aria-hidden="true"></i>`
function compileTab (appAPI = {}, appEvents = {}, opts = {}) { var compileIcon = yo`<i class="fa fa-refresh ${css.icon}" aria-hidden="true"></i>`
// Containers var compileContainer = yo`
var warnCompilationSlow = yo`<i title="Copy Address" style="display:none" class="${css.warnCompilationSlow} fa fa-exclamation-triangle" aria-hidden="true"></i>` <div class="${css.compileContainer}">
var compileIcon = yo`<i class="fa fa-refresh ${css.icon}" aria-hidden="true"></i>` <div class="${css.compileButtons}">
var compileContainer = yo` <div class="${css.compileButton} "id="compile" title="Compile source code">${compileIcon} Start to compile</div>
<div class="${css.compileContainer}"> <div class="${css.autocompileContainer}">
<div class="${css.compileButtons}"> <input class="${css.autocompile}" id="autoCompile" type="checkbox" title="Auto compile">
<div class="${css.compileButton} "id="compile" title="Compile source code">${compileIcon} Start to compile</div> <span class="${css.autocompileText}">Auto compile</span>
<div class="${css.autocompileContainer}"> </div>
<input class="${css.autocompile}" id="autoCompile" type="checkbox" title="Auto compile"> ${warnCompilationSlow}
<span class="${css.autocompileText}">Auto compile</span>
</div> </div>
${warnCompilationSlow}
</div> </div>
</div> `
`
compileContainer.querySelector('#compile').addEventListener('click', () => { compileContainer.querySelector('#compile').addEventListener('click', () => {
appAPI.runCompiler() appAPI.runCompiler()
}) })
var compileTimeout = null var compileTimeout = null
function scheduleCompilation () { function scheduleCompilation () {
if (!opts.config.get('autoCompile')) { if (!opts.config.get('autoCompile')) {
return return
} }
if (compileTimeout) { if (compileTimeout) {
window.clearTimeout(compileTimeout) window.clearTimeout(compileTimeout)
}
compileTimeout = window.setTimeout(() => {
appAPI.runCompiler()
}, 300)
} }
compileTimeout = window.setTimeout(() => {
appAPI.runCompiler()
}, 300)
}
appEvents.editor.register('contentChanged', () => { appEvents.editor.register('contentChanged', () => {
scheduleCompilation() scheduleCompilation()
}) })
appEvents.editor.register('sessionSwitched', () => { appEvents.editor.register('sessionSwitched', () => {
scheduleCompilation() scheduleCompilation()
}) })
// ----------------- autoCompile ----------------- // ----------------- autoCompile -----------------
var autoCompileInput = compileContainer.querySelector('#autoCompile') var autoCompileInput = compileContainer.querySelector('#autoCompile')
var autoCompile = false var autoCompile = false
if (opts.config.exists('autoCompile')) { if (opts.config.exists('autoCompile')) {
autoCompile = opts.config.get('autoCompile') autoCompile = opts.config.get('autoCompile')
} }
opts.config.set('autoCompile', autoCompile) opts.config.set('autoCompile', autoCompile)
if (autoCompile) { if (autoCompile) {
autoCompileInput.setAttribute('checked', autoCompile) autoCompileInput.setAttribute('checked', autoCompile)
} }
autoCompileInput.addEventListener('change', function () { autoCompileInput.addEventListener('change', function () {
opts.config.set('autoCompile', autoCompileInput.checked) opts.config.set('autoCompile', autoCompileInput.checked)
}) })
// REGISTER EVENTS // REGISTER EVENTS
// compilationDuration // compilationDuration
appEvents.compiler.register('compilationDuration', function tabHighlighting (speed) { appEvents.compiler.register('compilationDuration', function tabHighlighting (speed) {
if (speed > 1000) { if (speed > 1000) {
warnCompilationSlow.setAttribute('title', `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`) warnCompilationSlow.setAttribute('title', `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`)
warnCompilationSlow.style.display = 'inline-block' warnCompilationSlow.style.display = 'inline-block'
} else { } else {
warnCompilationSlow.style.display = 'none'
}
})
// loadingCompiler
appEvents.editor.register('contentChanged', function changedFile () {
var compileTab = document.querySelector('.compileView')
compileTab.style.color = styles.colors.red
compileIcon.classList.add(`${css.bouncingIcon}`)
})
appEvents.compiler.register('loadingCompiler', function start () {
compileIcon.classList.add(`${css.spinningIcon}`)
warnCompilationSlow.style.display = 'none' warnCompilationSlow.style.display = 'none'
} compileIcon.setAttribute('title', 'compiler is loading, please wait a few moments.')
}) })
// loadingCompiler appEvents.compiler.register('compilationFinished', function finish () {
appEvents.editor.register('contentChanged', function changedFile () { var compileTab = document.querySelector('.compileView')
var compileTab = document.querySelector('.compileView') compileTab.style.color = styles.colors.black
compileTab.style.color = styles.colors.red compileIcon.style.color = styles.colors.black
compileIcon.classList.add(`${css.bouncingIcon}`) compileIcon.classList.remove(`${css.spinningIcon}`)
}) compileIcon.classList.remove(`${css.bouncingIcon}`)
appEvents.compiler.register('loadingCompiler', function start () { compileIcon.setAttribute('title', 'idle')
compileIcon.classList.add(`${css.spinningIcon}`) })
warnCompilationSlow.style.display = 'none' appEvents.compiler.register('compilationStarted', function start () {
compileIcon.setAttribute('title', 'compiler is loading, please wait a few moments.') compileIcon.classList.remove(`${css.bouncingIcon}`)
}) compileIcon.classList.add(`${css.spinningIcon}`)
appEvents.compiler.register('compilationFinished', function finish () { compileIcon.setAttribute('title', 'compiling...')
var compileTab = document.querySelector('.compileView') })
compileTab.style.color = styles.colors.black appEvents.compiler.register('compilerLoaded', function loaded () {
compileIcon.style.color = styles.colors.black compileIcon.classList.remove(`${css.spinningIcon}`)
compileIcon.classList.remove(`${css.spinningIcon}`) compileIcon.setAttribute('title', '')
compileIcon.classList.remove(`${css.bouncingIcon}`) })
compileIcon.setAttribute('title', 'idle')
})
appEvents.compiler.register('compilationStarted', function start () {
compileIcon.classList.remove(`${css.bouncingIcon}`)
compileIcon.classList.add(`${css.spinningIcon}`)
compileIcon.setAttribute('title', 'compiling...')
})
appEvents.compiler.register('compilerLoaded', function loaded () {
compileIcon.classList.remove(`${css.spinningIcon}`)
compileIcon.setAttribute('title', '')
})
var errorContainer = yo`<div class='error'></div>` var errorContainer = yo`<div class='error'></div>`
var el = yo` var el = yo`
<div class="${css.compileTabView}" id="compileTabView"> <div class="${css.compileTabView}" id="compileTabView">
${compileContainer} ${compileContainer}
${contractNames(appAPI, appEvents, opts)} ${contractNames(appAPI, appEvents, opts)}
${errorContainer} ${errorContainer}
</div> </div>
` `
/* ------------------------------------------------ /* ------------------------------------------------
section CONTRACT DROPDOWN, DETAILS AND PUBLISH section CONTRACT DROPDOWN, DETAILS AND PUBLISH
------------------------------------------------ */ ------------------------------------------------ */
function contractNames (appAPI, appEvents, opts) { function contractNames (appAPI, appEvents, opts) {
var contractsDetails = {} var contractsDetails = {}
appEvents.compiler.register('compilationStarted', () => { appEvents.compiler.register('compilationStarted', () => {
errorContainer.innerHTML = '' errorContainer.innerHTML = ''
}) })
appEvents.compiler.register('compilationFinished', function (success, data, source) { appEvents.compiler.register('compilationFinished', function (success, data, source) {
// reset the contractMetadata list (used by the publish action) // reset the contractMetadata list (used by the publish action)
contractsDetails = {} contractsDetails = {}
// refill the dropdown list // refill the dropdown list
getContractNames(success, data) getContractNames(success, data)
// hightlight the tab if error // hightlight the tab if error
if (success) { if (success) {
document.querySelector('.compileView').style.color = '' document.querySelector('.compileView').style.color = ''
} else { } else {
document.querySelector('.compileView').style.color = styles.colors.red document.querySelector('.compileView').style.color = styles.colors.red
} }
// display warning error if any // display warning error if any
var error = false var error = false
if (data['error']) { if (data['error']) {
error = true error = true
opts.renderer.error(data['error'].formattedMessage, $(errorContainer), {type: data['error'].severity}) opts.renderer.error(data['error'].formattedMessage, $(errorContainer), {type: data['error'].severity})
} }
if (data['errors']) { if (data['errors']) {
if (data['errors'].length) error = true if (data['errors'].length) error = true
data['errors'].forEach(function (err) { data['errors'].forEach(function (err) {
opts.renderer.error(err.formattedMessage, $(errorContainer), {type: err.severity}) opts.renderer.error(err.formattedMessage, $(errorContainer), {type: err.severity})
})
}
if (!error) {
if (data.contracts) {
opts.compiler.visitContracts((contract) => {
opts.renderer.error(contract.name, $(errorContainer), {type: 'success'})
}) })
} }
} if (!error) {
}) if (data.contracts) {
opts.compiler.visitContracts((contract) => {
opts.renderer.error(contract.name, $(errorContainer), {type: 'success'})
})
}
}
})
appEvents.staticAnalysis.register('staticAnaysisWarning', (count) => { appEvents.staticAnalysis.register('staticAnaysisWarning', (count) => {
if (count) { if (count) {
opts.renderer.error(`Static Analysis raised ${count} warning(s) that requires your attention.`, $(errorContainer), { opts.renderer.error(`Static Analysis raised ${count} warning(s) that requires your attention.`, $(errorContainer), {
type: 'warning', type: 'warning',
click: () => appAPI.switchTab('staticanalysisView') click: () => appAPI.switchTab('staticanalysisView')
}) })
} }
}) })
var el = yo` var el = yo`
<div class="${css.container}"> <div class="${css.container}">
<select class="${css.contractNames}" disabled></select> <select class="${css.contractNames}" disabled></select>
<div class="${css.contractButtons}"> <div class="${css.contractButtons}">
<div title="Display Contract Details" class="${css.details}" onclick=${() => { details() }}>Details</div> <div title="Display Contract Details" class="${css.details}" onclick=${() => { details() }}>Details</div>
<div title="Publish on Swarm" class="${css.publish}" onclick=${() => { publish(appAPI) }}>Publish on Swarm</div> <div title="Publish on Swarm" class="${css.publish}" onclick=${() => { publish(appAPI) }}>Publish on Swarm</div>
</div>
</div> </div>
</div> `
`
// HELPERS // HELPERS
// GET NAMES OF ALL THE CONTRACTS // GET NAMES OF ALL THE CONTRACTS
function getContractNames (success, data) { function getContractNames (success, data) {
var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`) var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`)
contractNames.innerHTML = '' contractNames.innerHTML = ''
if (success) { if (success) {
contractNames.removeAttribute('disabled') contractNames.removeAttribute('disabled')
opts.compiler.visitContracts((contract) => { opts.compiler.visitContracts((contract) => {
contractsDetails[contract.name] = parseContracts(contract.name, contract.object, opts.compiler.getSource(contract.file)) contractsDetails[contract.name] = parseContracts(contract.name, contract.object, opts.compiler.getSource(contract.file))
var contractName = yo` var contractName = yo`
<option> <option>
${contract.name} ${contract.name}
</option>` </option>`
contractNames.appendChild(contractName) contractNames.appendChild(contractName)
}) })
appAPI.resetDapp(contractsDetails) appAPI.resetDapp(contractsDetails)
} else { } else {
contractNames.setAttribute('disabled', true) contractNames.setAttribute('disabled', true)
appAPI.resetDapp({}) appAPI.resetDapp({})
}
} }
}
function details () { function details () {
var select = el.querySelector('select') var select = el.querySelector('select')
if (select.children.length > 0 && select.selectedIndex >= 0) { if (select.children.length > 0 && select.selectedIndex >= 0) {
var contractName = select.children[select.selectedIndex].innerHTML var contractName = select.children[select.selectedIndex].innerHTML
var contractProperties = contractsDetails[contractName] var contractProperties = contractsDetails[contractName]
var log = yo`<div class="${css.detailsJSON}"></div>` var log = yo`<div class="${css.detailsJSON}"></div>`
Object.keys(contractProperties).map(propertyName => { Object.keys(contractProperties).map(propertyName => {
var copyDetails = yo`<span class="${css.copyDetails}"> var copyDetails = yo`<span class="${css.copyDetails}">
${copyToClipboard(() => contractProperties[propertyName])} ${copyToClipboard(() => contractProperties[propertyName])}
</span>` </span>`
var questionMark = yo`<span class="${css.questionMark}"><i title="${detailsHelpSection()[propertyName]}" class="fa fa-question-circle" aria-hidden="true"></i></span>` var questionMark = yo`<span class="${css.questionMark}"><i title="${detailsHelpSection()[propertyName]}" class="fa fa-question-circle" aria-hidden="true"></i></span>`
log.appendChild(yo` log.appendChild(yo`
<div class=${css.log}> <div class=${css.log}>
<div class="${css.key}">${propertyName} ${copyDetails} ${questionMark}</div> <div class="${css.key}">${propertyName} ${copyDetails} ${questionMark}</div>
${insertValue(contractProperties, propertyName)} ${insertValue(contractProperties, propertyName)}
</div> </div>
`) `)
}) })
modalDialog(contractName, log, {label: ''}, {label: 'Close'}) modalDialog(contractName, log, {label: ''}, {label: 'Close'})
}
} }
}
function insertValue (details, propertyName) { function insertValue (details, propertyName) {
var value = yo`<pre class="${css.value}"></pre>` var value = yo`<pre class="${css.value}"></pre>`
var node var node
if (propertyName === 'web3Deploy' || propertyName === 'name' || propertyName === 'Assembly') { if (propertyName === 'web3Deploy' || propertyName === 'name' || propertyName === 'Assembly') {
node = yo`<pre>${details[propertyName]}</pre>` node = yo`<pre>${details[propertyName]}</pre>`
} else if (propertyName === 'abi' || propertyName === 'metadata') { } else if (propertyName === 'abi' || propertyName === 'metadata') {
var treeView = new TreeView({ var treeView = new TreeView({
extractData: function (item, parent, key) { extractData: function (item, parent, key) {
var ret = {} var ret = {}
if (item instanceof Array) { if (item instanceof Array) {
ret.children = item.map((item, index) => { ret.children = item.map((item, index) => {
return {key: index, value: item} return {key: index, value: item}
}) })
ret.self = '' ret.self = ''
} else if (item instanceof Object) { } else if (item instanceof Object) {
ret.children = Object.keys(item).map((key) => { ret.children = Object.keys(item).map((key) => {
return {key: key, value: item[key]} return {key: key, value: item[key]}
}) })
ret.self = '' ret.self = ''
} else { } else {
ret.self = item ret.self = item
ret.children = [] ret.children = []
}
return ret
} }
return ret })
} if (details[propertyName] !== '') {
}) try {
if (details[propertyName] !== '') { node = yo`<div>${treeView.render(typeof details[propertyName] === 'object' ? details[propertyName] : JSON.parse(details[propertyName]))}</div>` // catch in case the parsing fails.
try { } catch (e) {
node = yo`<div>${treeView.render(typeof details[propertyName] === 'object' ? details[propertyName] : JSON.parse(details[propertyName]))}</div>` // catch in case the parsing fails. node = yo`<div>Unable to display "${propertyName}": ${e.message}</div>`
} catch (e) { }
node = yo`<div>Unable to display "${propertyName}": ${e.message}</div>` } else {
node = yo`<div> - </div>`
} }
} else { } else {
node = yo`<div> - </div>` node = yo`<div>${JSON.stringify(details[propertyName], null, 4)}</div>`
} }
} else { if (node) value.appendChild(node)
node = yo`<div>${JSON.stringify(details[propertyName], null, 4)}</div>` return value
} }
if (node) value.appendChild(node)
return value
}
function publish (appAPI) { function publish (appAPI) {
var selectContractNames = document.querySelector(`.${css.contractNames.classNames[0]}`) var selectContractNames = document.querySelector(`.${css.contractNames.classNames[0]}`)
if (selectContractNames.children.length > 0 && selectContractNames.selectedIndex >= 0) { if (selectContractNames.children.length > 0 && selectContractNames.selectedIndex >= 0) {
var contract = contractsDetails[selectContractNames.children[selectContractNames.selectedIndex].innerHTML] var contract = contractsDetails[selectContractNames.children[selectContractNames.selectedIndex].innerHTML]
if (contract.metadata === undefined || contract.metadata.length === 0) { if (contract.metadata === undefined || contract.metadata.length === 0) {
modalDialogCustom.alert('This contract does not implement all functions and thus cannot be published.') modalDialogCustom.alert('This contract does not implement all functions and thus cannot be published.')
} else { } else {
publishOnSwarm(contract, appAPI, function (err) { publishOnSwarm(contract, appAPI, function (err) {
if (err) { if (err) {
try { try {
err = JSON.stringify(err) err = JSON.stringify(err)
} catch (e) {} } catch (e) {}
modalDialogCustom.alert(yo`<span>Failed to publish metadata file to swarm, please check the Swarm gateways is available ( swarm-gateways.net ).<br /> modalDialogCustom.alert(yo`<span>Failed to publish metadata file to swarm, please check the Swarm gateways is available ( swarm-gateways.net ).<br />
${err}</span>`) ${err}</span>`)
} else { } else {
modalDialogCustom.alert(yo`<span>Metadata published successfully.<br />The Swarm address of the metadata file is available in the contract details.</span>`) modalDialogCustom.alert(yo`<span>Metadata published successfully.<br />The Swarm address of the metadata file is available in the contract details.</span>`)
} }
}, function (item) { }, function (item) {
// triggered each time there's a new verified publish (means hash correspond) // triggered each time there's a new verified publish (means hash correspond)
appAPI.fileProvider('swarm').addReadOnly(item.hash, item.content) appAPI.fileProvider('swarm').addReadOnly(item.hash, item.content)
}) })
}
} }
} }
return el
} }
return el return { render () { return el } }
} }
return { render () { return el } }
} }
function detailsHelpSection () { function detailsHelpSection () {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment