From ecfd973db40605405f724dcf37b79371e5f0c4be Mon Sep 17 00:00:00 2001 From: Iuri Matias Date: Fri, 11 Jan 2019 16:52:50 -0500 Subject: [PATCH] mode RunTab to a class --- src/app/tabs/run-tab.js | 338 ++++++++++++++++++++-------------------- 1 file changed, 172 insertions(+), 166 deletions(-) diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js index c3e4a48609..29a21af149 100644 --- a/src/app/tabs/run-tab.js +++ b/src/app/tabs/run-tab.js @@ -1,7 +1,7 @@ var $ = require('jquery') var yo = require('yo-yo') var EventManager = require('../../lib/events') -var globlalRegistry = require('../../global/registry') +var globalRegistry = require('../../global/registry') var executionContext = require('../../execution-context') var Card = require('../ui/card') var css = require('./styles/run-tab-styles') @@ -15,177 +15,183 @@ var ContractDropdownUI = require('./runTab/contractDropdown.js') var Recorder = require('./runTab/model/recorder.js') var RecorderUI = require('./runTab/recorder.js') -function runTab (opts, localRegistry) { - var self = this - self.event = new EventManager() - self._view = {} - self.data = { - count: 0, - text: `All transactions (deployed contracts and function executions) in this environment can be saved and replayed in - another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3.` - } - self._components = {} - self._components.registry = localRegistry || globlalRegistry - self._components.transactionContextAPI = { - getAddress: (cb) => { - cb(null, $('#txorigin').val()) - }, - getValue: (cb) => { - try { - var number = document.querySelector('#value').value - var select = document.getElementById('unit') - var index = select.selectedIndex - var selectedUnit = select.querySelectorAll('option')[index].dataset.unit - var unit = 'ether' // default - if (['ether', 'finney', 'gwei', 'wei'].indexOf(selectedUnit) >= 0) { - unit = selectedUnit +class RunTab { + + constructor (opts, localRegistry) { + var self = this + self.event = new EventManager() + self._view = {} + self.data = { + count: 0, + text: `All transactions (deployed contracts and function executions) in this environment can be saved and replayed in + another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3.` + } + self._components = {} + self._components.registry = localRegistry || globalRegistry + self._components.transactionContextAPI = { + getAddress: (cb) => { + cb(null, $('#txorigin').val()) + }, + getValue: (cb) => { + try { + var number = document.querySelector('#value').value + var select = document.getElementById('unit') + var index = select.selectedIndex + var selectedUnit = select.querySelectorAll('option')[index].dataset.unit + var unit = 'ether' // default + if (['ether', 'finney', 'gwei', 'wei'].indexOf(selectedUnit) >= 0) { + unit = selectedUnit + } + cb(null, executionContext.web3().toWei(number, unit)) + } catch (e) { + cb(e) } - cb(null, executionContext.web3().toWei(number, unit)) - } catch (e) { - cb(e) + }, + getGasLimit: (cb) => { + cb(null, $('#gasLimit').val()) } - }, - getGasLimit: (cb) => { - cb(null, $('#gasLimit').val()) } - } - // dependencies - self._deps = { - udapp: self._components.registry.get('udapp').api, - udappUI: self._components.registry.get('udappUI').api, - config: self._components.registry.get('config').api, - fileManager: self._components.registry.get('filemanager').api, - editor: self._components.registry.get('editor').api, - logCallback: self._components.registry.get('logCallback').api, - filePanel: self._components.registry.get('filepanel').api, - pluginManager: self._components.registry.get('pluginmanager').api, - compilersArtefacts: self._components.registry.get('compilersartefacts').api - } - self._deps.udapp.resetAPI(self._components.transactionContextAPI) - self._view.recorderCount = yo`0` - self._view.instanceContainer = yo`
` - self._view.clearInstanceElement = yo` - self.event.trigger('clearInstance', [])} - title="Clear instances list and reset recorder" aria-hidden="true"> - ` - self._view.instanceContainerTitle = yo` -
- Deployed Contracts - ${self._view.clearInstanceElement} -
` - self._view.noInstancesText = yo` -
- Currently you have no contract instances to interact with. -
` - - var container = yo`
` - - var recorder = new Recorder(self._deps.udapp, self._deps.fileManager, self._deps.config) - recorder.event.register('newTxRecorded', (count) => { - this.data.count = count - this._view.recorderCount.innerText = count - }) - recorder.event.register('cleared', () => { - this.data.count = 0 - this._view.recorderCount.innerText = 0 - }) - executionContext.event.register('contextChanged', recorder.clearAll.bind(recorder)) - self.event.register('clearInstance', recorder.clearAll.bind(recorder)) - - var recorderInterface = new RecorderUI(recorder, self._deps.logCallback) - - recorderInterface.event.register('newScenario', (abi, address, contractName) => { - var noInstancesText = this._view.noInstancesText - if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) } - this._view.instanceContainer.appendChild(this._deps.udappUI.renderInstanceFromABI(abi, address, contractName)) - }) - - recorderInterface.render() - - self._view.collapsedView = yo` -
-
${self._view.recorderCount}
-
` - - self._view.expandedView = yo` -
-
- ${self.data.text} -
-
- ${recorderInterface.recordButton} - ${recorderInterface.runButton} + // dependencies + self._deps = { + udapp: self._components.registry.get('udapp').api, + udappUI: self._components.registry.get('udappUI').api, + config: self._components.registry.get('config').api, + fileManager: self._components.registry.get('filemanager').api, + editor: self._components.registry.get('editor').api, + logCallback: self._components.registry.get('logCallback').api, + filePanel: self._components.registry.get('filepanel').api, + pluginManager: self._components.registry.get('pluginmanager').api, + compilersArtefacts: self._components.registry.get('compilersartefacts').api + } + self._deps.udapp.resetAPI(self._components.transactionContextAPI) + self._view.recorderCount = yo`0` + self._view.instanceContainer = yo`
` + self._view.clearInstanceElement = yo` + self.event.trigger('clearInstance', [])} + title="Clear instances list and reset recorder" aria-hidden="true"> + ` + self._view.instanceContainerTitle = yo` +
+ Deployed Contracts + ${self._view.clearInstanceElement} +
` + self._view.noInstancesText = yo` +
+ Currently you have no contract instances to interact with. +
` + + var container = yo`
` + + var recorder = new Recorder(self._deps.udapp, self._deps.fileManager, self._deps.config) + recorder.event.register('newTxRecorded', (count) => { + this.data.count = count + this._view.recorderCount.innerText = count + }) + recorder.event.register('cleared', () => { + this.data.count = 0 + this._view.recorderCount.innerText = 0 + }) + executionContext.event.register('contextChanged', recorder.clearAll.bind(recorder)) + self.event.register('clearInstance', recorder.clearAll.bind(recorder)) + + var recorderInterface = new RecorderUI(recorder, self._deps.logCallback) + + recorderInterface.event.register('newScenario', (abi, address, contractName) => { + var noInstancesText = this._view.noInstancesText + if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) } + this._view.instanceContainer.appendChild(this._deps.udappUI.renderInstanceFromABI(abi, address, contractName)) + }) + + recorderInterface.render() + + self._view.collapsedView = yo` +
+
${self._view.recorderCount}
+
` + + self._view.expandedView = yo` +
+
+ ${self.data.text}
-
-
` +
+ ${recorderInterface.recordButton} + ${recorderInterface.runButton} +
+
+ ` + + self.recorderOpts = { + title: 'Transactions recorded:', + collapsedView: self._view.collapsedView + } - self.recorderOpts = { - title: 'Transactions recorded:', - collapsedView: self._view.collapsedView + var recorderCard = new Card({}, {}, self.recorderOpts) + recorderCard.event.register('expandCollapseCard', (arrow, body, status) => { + body.innerHTML = '' + status.innerHTML = '' + if (arrow === 'down') { + status.appendChild(self._view.collapsedView) + body.appendChild(self._view.expandedView) + } else if (arrow === 'up') { + status.appendChild(self._view.collapsedView) + } + }) + + var settings = new Settings(self._deps.udapp) + var settingsUI = new SettingsUI(settings) + + self.event.register('clearInstance', () => { + this._view.instanceContainer.innerHTML = '' // clear the instances list + this._view.instanceContainer.appendChild(self._view.instanceContainerTitle) + this._view.instanceContainer.appendChild(self._view.noInstancesText) + }) + settingsUI.event.register('clearInstance', () => { + this.event.trigger('clearInstance', []) + }) + + var dropdownLogic = new DropdownLogic( + this._deps.fileManager, + this._deps.pluginManager, + this._deps.compilersArtefacts, + this._deps.compiler, + this._deps.config, + this._deps.editor, + this._deps.udapp, + this._deps.filePanel + ) + var contractDropdownUI = new ContractDropdownUI(dropdownLogic, this._deps.logCallback) + + contractDropdownUI.event.register('clearInstance', () => { + var noInstancesText = this._view.noInstancesText + if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) } + }) + contractDropdownUI.event.register('newContractABIAdded', (abi, address) => { + this._view.instanceContainer.appendChild(this._deps.udappUI.renderInstanceFromABI(abi, address, address)) + }) + contractDropdownUI.event.register('newContractInstanceAdded', (contractObject, address, value) => { + this._view.instanceContainer.appendChild(this._deps.udappUI.renderInstance(contractObject, address, value)) + }) + + this._view.instanceContainer.appendChild(this._view.instanceContainerTitle) + this._view.instanceContainer.appendChild(this._view.noInstancesText) + + var el = yo` +
+ ${settingsUI.render()} + ${contractDropdownUI.render()} + ${recorderCard.render()} + ${self._view.instanceContainer} +
+ ` + container.appendChild(el) + this.container = container } - var recorderCard = new Card({}, {}, self.recorderOpts) - recorderCard.event.register('expandCollapseCard', (arrow, body, status) => { - body.innerHTML = '' - status.innerHTML = '' - if (arrow === 'down') { - status.appendChild(self._view.collapsedView) - body.appendChild(self._view.expandedView) - } else if (arrow === 'up') { - status.appendChild(self._view.collapsedView) - } - }) - - var settings = new Settings(self._deps.udapp) - var settingsUI = new SettingsUI(settings) - - self.event.register('clearInstance', () => { - this._view.instanceContainer.innerHTML = '' // clear the instances list - this._view.instanceContainer.appendChild(self._view.instanceContainerTitle) - this._view.instanceContainer.appendChild(self._view.noInstancesText) - }) - settingsUI.event.register('clearInstance', () => { - this.event.trigger('clearInstance', []) - }) - - var dropdownLogic = new DropdownLogic( - this._deps.fileManager, - this._deps.pluginManager, - this._deps.compilersArtefacts, - this._deps.compiler, - this._deps.config, - this._deps.editor, - this._deps.udapp, - this._deps.filePanel - ) - var contractDropdownUI = new ContractDropdownUI(dropdownLogic, this._deps.logCallback) - - contractDropdownUI.event.register('clearInstance', () => { - var noInstancesText = this._view.noInstancesText - if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) } - }) - contractDropdownUI.event.register('newContractABIAdded', (abi, address) => { - this._view.instanceContainer.appendChild(this._deps.udappUI.renderInstanceFromABI(abi, address, address)) - }) - contractDropdownUI.event.register('newContractInstanceAdded', (contractObject, address, value) => { - this._view.instanceContainer.appendChild(this._deps.udappUI.renderInstance(contractObject, address, value)) - }) - - this._view.instanceContainer.appendChild(this._view.instanceContainerTitle) - this._view.instanceContainer.appendChild(this._view.noInstancesText) - - var el = yo` -
- ${settingsUI.render()} - ${contractDropdownUI.render()} - ${recorderCard.render()} - ${self._view.instanceContainer} -
- ` - container.appendChild(el) - - return { render () { return container } } + render () { + return this.container + } } -module.exports = runTab +module.exports = RunTab