Split index.html into some more components (#298)

client/app/app.js

@@ -49,29 +49,31 @@ const electron = require('electron')
 const remote = electron.remote
 const Menu = remote.Menu
 
-const InputMenu = Menu.buildFromTemplate([{
-  label: 'Undo',
-  role: 'undo'
-}, {
-  label: 'Redo',
-  role: 'redo'
-}, {
-  type: 'separator'
-}, {
-  label: 'Cut',
-  role: 'cut'
-}, {
-  label: 'Copy',
-  role: 'copy'
-}, {
-  label: 'Paste',
-  role: 'paste'
-}, {
-  type: 'separator'
-}, {
-  label: 'Select all',
-  role: 'selectall'
-} ])
+const InputMenu = Menu.buildFromTemplate([
+  {
+    label: 'Undo',
+    role: 'undo'
+  }, {
+    label: 'Redo',
+    role: 'redo'
+  }, {
+    type: 'separator'
+  }, {
+    label: 'Cut',
+    role: 'cut'
+  }, {
+    label: 'Copy',
+    role: 'copy'
+  }, {
+    label: 'Paste',
+    role: 'paste'
+  }, {
+    type: 'separator'
+  }, {
+    label: 'Select all',
+    role: 'selectall'
+  }
+])
 
 document.body.addEventListener('contextmenu', (e) => {
   e.preventDefault()

client/app/assets/app.css

@@ -257,6 +257,12 @@ span.name {
     border-top: 1px solid #ccc;
 }
 
+account-box {
+  min-width: 50%;
+  border-radius: 10px;
+  overflow: hidden;
+  opacity: 0.9;
+}
 #home-box-accounts {
     min-height: 180px;
 }

client/app/src/components/dashboard/account-box.controller.js

@@ -0,0 +1,25 @@
+;(function () {
+  'use strict'
+
+  /**
+   * NOTE This component uses the entire AccountController yet: it's the first
+   * step to refactor the `index.html`
+   */
+
+  angular
+    .module('arkclient.components')
+    .component('accountBox', {
+      templateUrl: 'src/components/dashboard/account-box.html',
+      bindings: {
+        accountCtrl: '='
+      },
+      controller: AccountBoxController
+    })
+
+  function AccountBoxController ($scope) {
+    this.$onInit = () => {
+      this.ul = this.accountCtrl
+    }
+  }
+
+})()

client/app/src/components/dashboard/account-box.html

@@ -0,0 +1,54 @@
+<div id="home-box-accounts" md-whiteframe="3">
+  <md-toolbar layout="row" md-scroll-shrink>
+    <div class="md-toolbar-tools">
+      <h2>
+        <translate>My Accounts</translate> {{$ctrl.ul.network.symbol}}{{$ctrl.ul.myAccountsBalance()}} / {{$ctrl.ul.myAccountsCurrencyBalance() | formatCurrency:$ctrl.ul}}
+      </h2>
+      <span flex></span>
+      <md-button class="share" ng-click="$ctrl.ul.refreshAccountBalances()" aria-label="Refresh balances">
+        <md-icon md-font-library="material-icons">cached</md-icon>
+      </md-button>
+    </div>
+  </md-toolbar>
+  <div style="min-height: 100px; max-height: 300px; height: auto; border-radius:0 0 10px 10px" layout="column">
+    <md-toolbar class="md-hue-2">
+      <div class="md-toolbar-tools">
+        <md-button ng-click="$ctrl.ul.importAccount()">
+          <md-icon>file_download</md-icon>
+          <translate>Import Account</translate>
+        </md-button>
+
+        <md-button ng-click="$ctrl.ul.createAccount()">
+          <md-icon>account_box</md-icon>
+          <translate>Create Account</translate>
+        </md-button>
+      </div>
+    </md-toolbar>
+    <md-content style="min-height: 70px;" flex>
+      <md-list md-no-ink>
+        <md-list-item ng-click="$ctrl.ul.selectLedgerAccount()" ng-if="$ctrl.ul.ledger.connected">
+          <span>
+            <md-icon md-svg-icon="ledger"></md-icon>
+            Ledger Nano S
+          </span>
+          <span class="md-secondary">
+            <md-progress-circular ng-if="!$ctrl.ul.ledgerAccounts" md-mode="indeterminate"></md-progress-circular>
+            <md-chip ng-if="$ctrl.ul.ledgerAccounts">{{$ctrl.ul.ledgerAccounts.length}} <translate>Accounts</translate></md-chip>
+          </span>
+        </md-list-item>
+
+        <md-list-item ng-click="$ctrl.ul.selectAccount(it)" ng-repeat="it in $ctrl.ul.myAccounts() track by $index">
+          <span ng-class="{'selected' : it.address === $ctrl.ul.selected.address }">
+            <md-icon ng-if="!it.delegate&&!it.cold" md-font-library="material-icons">account_balance</md-icon>
+            <md-icon ng-if="!it.delegate&&it.cold" md-font-library="material-icons">cloud_off</md-icon>
+            <md-icon ng-if="it.delegate" md-font-library="material-icons">security</md-icon>
+            {{it.username||it.address}}  <span ng-if="it.delegate">({{it.delegate.rate}})</span>
+          </span>
+          <span class="md-secondary">
+            {{$ctrl.ul.network.symbol}}{{it.balance/100000000}}
+          </span>
+        </md-list-item>
+      </md-list>
+    </md-content>
+  </div>
+</div>

client/app/src/components/dashboard/market-box.controller.js

@@ -0,0 +1,25 @@
+;(function () {
+  'use strict'
+
+  /**
+   * NOTE This component uses the entire AccountController yet: it's the first
+   * step to refactor the `index.html`
+   */
+
+  angular
+    .module('arkclient.components')
+    .component('marketBox', {
+      templateUrl: 'src/components/dashboard/market-box.html',
+      bindings: {
+        accountCtrl: '='
+      },
+      controller: MarketController
+    })
+
+  function MarketController ($scope) {
+    this.$onInit = () => {
+      this.ul = this.accountCtrl
+    }
+  }
+
+})()

client/app/src/components/dashboard/market-box.html

@@ -0,0 +1,22 @@
+<md-content ng-if="$ctrl.ul.connectedPeer.market.marketCap" id="home-box-price" style="opacity:0.9; border-radius:10px; width: 360px; margin:10px;" md-whiteframe="3">
+  <md-list>
+    <md-list-item>
+      <div>
+        <b><translate>Price</translate></b>
+      </div>
+
+      <span class="md-secondary">{{$ctrl.ul.connectedPeer.market.price[$ctrl.ul.currency.name] | formatCurrency:$ctrl.ul}}</span>
+    </md-list-item>
+    <md-list-item>
+      <b translate>Change 1h/7h/7d</b>
+      <span class="md-secondary">
+        <span md-colors="{'color' : $ctrl.ul.connectedPeer.market.change1h[$ctrl.ul.currency.name]>=0?'default-green':'default-red' }">{{$ctrl.ul.connectedPeer.market.change1h[$ctrl.ul.currency.name]}}%</span> /
+      <span md-colors="{'color' : $ctrl.ul.connectedPeer.market.change7h[$ctrl.ul.currency.name]>=0?'default-green':'default-red' }">{{$ctrl.ul.connectedPeer.market.change7h[$ctrl.ul.currency.name]}}%</span> /
+      <span md-colors="{'color' : $ctrl.ul.connectedPeer.market.change7d[$ctrl.ul.currency.name]>=0?'default-green':'default-red' }">{{$ctrl.ul.connectedPeer.market.change7d[$ctrl.ul.currency.name]}}%</span>
+      </span>
+    </md-list-item>
+    <md-list-item>
+      <b translate>Market Cap.</b> <span class="md-secondary">{{$ctrl.ul.connectedPeer.market.marketCap[$ctrl.ul.currency.name] | formatCurrency:$ctrl.ul}}</span>
+    </md-list-item>
+  </md-list>
+</md-content>

client/app/src/components/dashboard/network-box.controller.js

@@ -0,0 +1,25 @@
+;(function () {
+  'use strict'
+
+  /**
+   * NOTE This component uses the entire AccountController yet: it's the first
+   * step to refactor the `index.html`
+   */
+
+  angular
+    .module('arkclient.components')
+    .component('networkBox', {
+      templateUrl: 'src/components/dashboard/network-box.html',
+      bindings: {
+        accountCtrl: '='
+      },
+      controller: NetworkController
+    })
+
+  function NetworkController ($scope) {
+    this.$onInit = () => {
+      this.ul = this.accountCtrl
+    }
+  }
+
+})()

client/app/src/components/dashboard/network-box.html

@@ -0,0 +1,15 @@
+<md-content id="home-box-network" style="opacity:0.9; border-radius:10px; width: 360px; margin:10px;" md-whiteframe="3">
+  <md-list flex>
+    <md-list-item>
+      <b translate>Network</b>
+      <md-button class="md-secondary" aria-label="Switch Network" md-prevent-menu-close ng-click="$ctrl.ul.switchNetwork()">{{$ctrl.ul.connectedPeer.network}}/{{$ctrl.ul.connectedPeer.height}}</md-button>
+    </md-list-item>
+    <md-list-item>
+      <b translate>Peer</b>
+      <md-button class="md-secondary" aria-label="Pick Random Peer" md-prevent-menu-close ng-click="$ctrl.ul.pickRandomPeer()">{{$ctrl.ul.connectedPeer.ip}}</md-button>
+    </md-list-item>
+    <md-list-item>
+      <b translate>Last checked</b> <span class="md-secondary">{{$ctrl.ul.connectedPeer.lastConnection | date:'shortTime'}}</span>
+    </md-list-item>
+  </md-list>
+</md-content>

client/app/src/components/layout/main-navbar.controller.js

@@ -0,0 +1,25 @@
+;(function () {
+  'use strict'
+
+  /**
+   * NOTE This component uses the entire AccountController yet: it's the first
+   * step to refactor the `index.html`
+   */
+
+  angular
+    .module('arkclient.components')
+    .component('mainNavbar', {
+      templateUrl: 'src/components/layout/main-navbar.html',
+      bindings: {
+        accountCtrl: '='
+      },
+      controller: MainNavbarController
+    })
+
+  function MainNavbarController ($scope) {
+    this.$onInit = () => {
+      this.ul = this.accountCtrl
+    }
+  }
+
+})()