refactor run-tab

6 years ago · 1b92418aa3
parent 9e278b478f
commit 1b92418aa3
3 changed files with 95 additions and 84 deletions
--- a/src/app/tabs/run-tab.js
+++ b/src/app/tabs/run-tab.js
@ -1,7 +1,5 @@
 var yo = require('yo-yo')
 var EventManager = require('../../lib/events')
-var globalRegistry = require('../../global/registry')
-var executionContext = require('../../execution-context')
 var Card = require('../ui/card')
 var css = require('./styles/run-tab-styles')

@ -17,125 +15,132 @@ var RecorderUI = require('./runTab/recorder.js')
 class RunTab {

  constructor (udapp, udappUI, config, fileManager, editor, logCallback, filePanel, pluginManager, compilersArtefacts) {
-    var self = this
    this.event = new EventManager()

-    this._view = {}
-    this.registry = globalRegistry
+    this.renderInstanceContainer()
+    this.renderSettings(udapp)
+    this.renderDropdown(udappUI, fileManager, pluginManager, compilersArtefacts, config, editor, udapp, filePanel, logCallback)
+    this.renderRecorder(udapp, udappUI, fileManager, config, logCallback)
+    this.renderRecorderCard()
+    this.renderContainer()
+  }
+
+  renderContainer () {
+    this.container = yo`<div class="${css.runTabView}" id="runTabView" ></div>`

-    self._view.recorderCount = yo`<span>0</span>`
-    self._view.instanceContainer = yo`<div class="${css.instanceContainer}"></div>`
-    self._view.clearInstanceElement = yo`
-      <i class="${css.clearinstance} ${css.icon} fa fa-trash" onclick=${() => self.event.trigger('clearInstance', [])}
-      title="Clear instances list and reset recorder" aria-hidden="true">
-    </i>`
-    self._view.instanceContainerTitle = yo`
+    var el = yo`
+    <div>
+      ${this.settingsUI.render()}
+      ${this.contractDropdownUI.render()}
+      ${this.recorderCard.render()}
+      ${this.instanceContainer}
+    </div>
+    `
+    this.container.appendChild(el)
+  }
+
+  renderInstanceContainer () {
+    this.instanceContainer = yo`<div class="${css.instanceContainer}"></div>`
+
+    const instanceContainerTitle = yo`
      <div class=${css.instanceContainerTitle}
        title="Autogenerated generic user interfaces for interaction with deployed contracts">
        Deployed Contracts
-        ${self._view.clearInstanceElement}
+        <i class="${css.clearinstance} ${css.icon} fa fa-trash" onclick=${() => this.event.trigger('clearInstance', [])}
+          title="Clear instances list and reset recorder" aria-hidden="true">
+        </i>
      </div>`
-    self._view.noInstancesText = yo`
+
+    this.noInstancesText = yo`
      <div class="${css.noInstancesText}">
        Currently you have no contract instances to interact with.
      </div>`

-    var container = yo`<div class="${css.runTabView}" id="runTabView" ></div>`
+    this.event.register('clearInstance', () => {
+      this.instanceContainer.innerHTML = '' // clear the instances list
+      this.instanceContainer.appendChild(instanceContainerTitle)
+      this.instanceContainer.appendChild(this.noInstancesText)
+    })

-    var recorder = new Recorder(udapp, fileManager, config)
-    recorder.event.register('newTxRecorded', (count) => {
-      this._view.recorderCount.innerText = count
+    this.instanceContainer.appendChild(instanceContainerTitle)
+    this.instanceContainer.appendChild(this.noInstancesText)
+  }
+
+  renderSettings (udapp) {
+    var settings = new Settings(udapp)
+    this.settingsUI = new SettingsUI(settings)
+
+    this.settingsUI.event.register('clearInstance', () => {
+      this.event.trigger('clearInstance', [])
+    })
+  }
+
+  renderDropdown (udappUI, fileManager, pluginManager, compilersArtefacts, config, editor, udapp, filePanel, logCallback) {
+    var dropdownLogic = new DropdownLogic(fileManager, pluginManager, compilersArtefacts, config, editor, udapp, filePanel)
+    this.contractDropdownUI = new ContractDropdownUI(dropdownLogic, logCallback)
+
+    this.contractDropdownUI.event.register('clearInstance', () => {
+      var noInstancesText = this.noInstancesText
+      if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
    })
-    recorder.event.register('cleared', () => {
-      this._view.recorderCount.innerText = 0
+    this.contractDropdownUI.event.register('newContractABIAdded', (abi, address) => {
+      this.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, address))
    })
-    executionContext.event.register('contextChanged', recorder.clearAll.bind(recorder))
-    self.event.register('clearInstance', recorder.clearAll.bind(recorder))
+    this.contractDropdownUI.event.register('newContractInstanceAdded', (contractObject, address, value) => {
+      this.instanceContainer.appendChild(udappUI.renderInstance(contractObject, address, value))
+    })
+  }

-    var recorderInterface = new RecorderUI(recorder, logCallback)
+  renderRecorder (udapp, udappUI, fileManager, config, logCallback) {
+    this.recorderCount = yo`<span>0</span>`

-    recorderInterface.event.register('newScenario', (abi, address, contractName) => {
-      var noInstancesText = this._view.noInstancesText
+    var recorder = new Recorder(udapp, fileManager, config)
+    recorder.event.register('recorderCountChange', (count) => {
+      this.recorderCount.innerText = count
+    })
+    this.event.register('clearInstance', recorder.clearAll.bind(recorder))
+
+    this.recorderInterface = new RecorderUI(recorder, logCallback)
+
+    this.recorderInterface.event.register('newScenario', (abi, address, contractName) => {
+      var noInstancesText = this.noInstancesText
      if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
-      this._view.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, contractName))
+      this.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, contractName))
    })

-    recorderInterface.render()
+    this.recorderInterface.render()
+  }

-    self._view.collapsedView = yo`
+  renderRecorderCard () {
+    const collapsedView = yo`
      <div class=${css.recorderCollapsedView}>
-        <div class=${css.recorderCount}>${self._view.recorderCount}</div>
+        <div class=${css.recorderCount}>${this.recorderCount}</div>
      </div>`

-    self._view.expandedView = yo`
+    const expandedView = yo`
      <div class=${css.recorderExpandedView}>
        <div class=${css.recorderDescription}>
          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.
        </div>
        <div class="${css.transactionActions}">
-          ${recorderInterface.recordButton}
-          ${recorderInterface.runButton}
+          ${this.recorderInterface.recordButton}
+          ${this.recorderInterface.runButton}
          </div>
        </div>
      </div>`

-    self.recorderOpts = {
-      title: 'Transactions recorded:',
-      collapsedView: self._view.collapsedView
-    }
-
-    var recorderCard = new Card({}, {}, self.recorderOpts)
-    recorderCard.event.register('expandCollapseCard', (arrow, body, status) => {
+    this.recorderCard = new Card({}, {}, { title: 'Transactions recorded:', collapsedView: collapsedView })
+    this.recorderCard.event.register('expandCollapseCard', (arrow, body, status) => {
      body.innerHTML = ''
      status.innerHTML = ''
      if (arrow === 'down') {
-        status.appendChild(self._view.collapsedView)
-        body.appendChild(self._view.expandedView)
+        status.appendChild(collapsedView)
+        body.appendChild(expandedView)
      } else if (arrow === 'up') {
-        status.appendChild(self._view.collapsedView)
+        status.appendChild(collapsedView)
      }
    })
-
-    var settings = new Settings(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(fileManager, pluginManager, compilersArtefacts, null, config, editor, udapp, filePanel)
-    var contractDropdownUI = new ContractDropdownUI(dropdownLogic, 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(udappUI.renderInstanceFromABI(abi, address, address))
-    })
-    contractDropdownUI.event.register('newContractInstanceAdded', (contractObject, address, value) => {
-      this._view.instanceContainer.appendChild(udappUI.renderInstance(contractObject, address, value))
-    })
-
-    this._view.instanceContainer.appendChild(this._view.instanceContainerTitle)
-    this._view.instanceContainer.appendChild(this._view.noInstancesText)
-
-    var el = yo`
-    <div>
-      ${settingsUI.render()}
-      ${contractDropdownUI.render()}
-      ${recorderCard.render()}
-      ${self._view.instanceContainer}
-    </div>
-    `
-    container.appendChild(el)
-    this.container = container
  }

  render () {
--- a/src/app/tabs/runTab/model/dropdownlogic.js
+++ b/src/app/tabs/runTab/model/dropdownlogic.js
@ -9,10 +9,9 @@ var CompilerAbstract = require('../../../compiler/compiler-abstract')
 var EventManager = remixLib.EventManager

 class DropdownLogic {
-  constructor (fileManager, pluginManager, compilersArtefacts, compiler, config, editor, udapp, filePanel) {
+  constructor (fileManager, pluginManager, compilersArtefacts, config, editor, udapp, filePanel) {
    this.pluginManager = pluginManager
    this.compilersArtefacts = compilersArtefacts
-    this.compiler = compiler
    this.config = config
    this.editor = editor
    this.udapp = udapp
--- a/src/app/tabs/runTab/model/recorder.js
+++ b/src/app/tabs/runTab/model/recorder.js
@ -80,6 +80,13 @@ class Recorder {
      this.data._createdContracts[address] = timestamp
      this.data._createdContractsReverse[timestamp] = address
    })
+    executionContext.event.register('contextChanged', this.clearAll.bind(this))
+    this.event.register('newTxRecorded', (count) => {
+      this.event.trigger('recorderCountChange', [count])
+    })
+    this.event.register('cleared', () => {
+      this.event.trigger('recorderCountChange', [0])
+    })
  }

  /**