From 9120d67ad1e424c14de381ff8ab76ac572eb6337 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Sat, 4 Feb 2017 20:12:12 +0800 Subject: [PATCH] Basic add-contrib form --- app/components/add-contributor/component.js | 35 +++++++++++++++++++ app/components/add-contributor/template.hbs | 26 ++++++++++++++ app/controllers/application.js | 4 +++ app/controllers/index.js | 2 ++ app/services/kredits.js | 5 ++- app/styles/_layout.scss | 8 +++-- app/styles/app.scss | 1 + app/styles/components/_add-contributor.scss | 25 +++++++++++++ app/templates/index.hbs | 14 ++++++-- .../add-contributor/component-test.js | 16 +++++++++ tests/unit/controllers/application-test.js | 12 +++++++ 11 files changed, 143 insertions(+), 5 deletions(-) create mode 100644 app/components/add-contributor/component.js create mode 100644 app/components/add-contributor/template.hbs create mode 100644 app/controllers/application.js create mode 100644 app/styles/components/_add-contributor.scss create mode 100644 tests/integration/components/add-contributor/component-test.js create mode 100644 tests/unit/controllers/application-test.js diff --git a/app/components/add-contributor/component.js b/app/components/add-contributor/component.js new file mode 100644 index 0000000..db067b9 --- /dev/null +++ b/app/components/add-contributor/component.js @@ -0,0 +1,35 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + + id: null, + realName: null, + address: null, + + classId: function() { + let value = this.get('id'); + return (Ember.isEmpty(value)) ? null : 'valid'; + }.property('id'), + + classRealName: function() { + let value = this.get('realName'); + return (Ember.isEmpty(value)) ? null : 'valid'; + }.property('realName'), + + classAddress: function() { + let value = this.get('address'); + return (Ember.isEmpty(value)) ? null : 'valid'; + }.property('address'), + + + actions: { + + save() { + console.log('id', this.get('id')); + console.log('realName', this.get('realName')); + console.log('address', this.get('address')); + } + + } + +}); diff --git a/app/components/add-contributor/template.hbs b/app/components/add-contributor/template.hbs new file mode 100644 index 0000000..e8f215d --- /dev/null +++ b/app/components/add-contributor/template.hbs @@ -0,0 +1,26 @@ +
+

+ {{input name="id" + type="text" + placeholder="GitHub UID (123)" + value=id + class=classId}} +

+

+ {{input name="realname" + type="text" + placeholder="Carl Sagan" + value=realName + class=classRealName}} +

+

+ {{input name="address" + type="text" + placeholder="0xF18E631Ea191aE4ebE70046Fcb01a436554421BA4" + value=address + class=classAddress}} +

+

+ +

+
diff --git a/app/controllers/application.js b/app/controllers/application.js new file mode 100644 index 0000000..55ff9aa --- /dev/null +++ b/app/controllers/application.js @@ -0,0 +1,4 @@ +import Ember from 'ember'; + +export default Ember.Controller.extend({ +}); diff --git a/app/controllers/index.js b/app/controllers/index.js index ec0dcdf..d687d6d 100644 --- a/app/controllers/index.js +++ b/app/controllers/index.js @@ -11,4 +11,6 @@ export default Ember.Controller.extend({ kredits: service(), + contractInteractionEnabled: computed.alias('kredits.web3Provided'), + }); diff --git a/app/services/kredits.js b/app/services/kredits.js index f4f889d..7b9fb41 100644 --- a/app/services/kredits.js +++ b/app/services/kredits.js @@ -5,6 +5,7 @@ import config from 'kredits-web/config/environment'; export default Ember.Service.extend({ web3Instance: null, + web3Provided: false, // Web3 provided (using Mist Browser, Metamask et al.) web3: function() { if (Ember.isPresent(this.get('web3Instance'))) { @@ -16,6 +17,7 @@ export default Ember.Service.extend({ if (typeof window.web3 !== 'undefined') { Ember.Logger.debug('[web3] Using user-provided instance, e.g. from Mist browser or Metamask'); web3Instance = window.web3; + this.set('web3Provided', true); } else { Ember.Logger.debug('[web3] Creating new instance from npm module class'); let provider = new Web3.providers.HttpProvider("http://139.59.248.169:8545"); @@ -38,7 +40,8 @@ export default Ember.Service.extend({ }.property('web3'), totalSupply: function() { - return this.get('kreditsContract').totalSupply(); + return 23000; + // return this.get('kreditsContract').totalSupply(); }.property('kreditsContract'), contributorsCount: function() { diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss index 2a738f3..e3b93d0 100644 --- a/app/styles/_layout.scss +++ b/app/styles/_layout.scss @@ -1,11 +1,15 @@ section { @include outer-container; - margin-top: 6rem; margin-bottom: 8rem; + &:first-of-type { + margin-top: 6rem; + } @include media($mobile) { - margin-top: 2rem; margin-bottom: 5rem; + &:first-of-type { + margin-top: 2rem; + } } header { diff --git a/app/styles/app.scss b/app/styles/app.scss index 538c707..1878099 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -68,3 +68,4 @@ section { } @import "components/contributor-list"; +@import "components/add-contributor"; diff --git a/app/styles/components/_add-contributor.scss b/app/styles/components/_add-contributor.scss new file mode 100644 index 0000000..5ca7c24 --- /dev/null +++ b/app/styles/components/_add-contributor.scss @@ -0,0 +1,25 @@ +section#add-contributor { + + form { + + p { + margin-bottom: 1.2rem; + } + + input[type=text] { + width: 100%; + padding: 1.2rem; + line-height: 2rem; + border: none; + border-bottom: 1px solid rgba(255,255,255,0.2); + background-color: rgba(22, 21, 40, 0.3); + color: #fff; + font-size: 1.4rem; + &:focus, &.valid { + background-color: rgba(22, 21, 40, 0.6); + } + } + + } + +} diff --git a/app/templates/index.hbs b/app/templates/index.hbs index 512e749..6ca15dd 100644 --- a/app/templates/index.hbs +++ b/app/templates/index.hbs @@ -1,5 +1,4 @@
-

Kosmos Contributors

@@ -12,5 +11,16 @@ {{kredits.contributorsCount}} contributors.

-
+ +{{#if contractInteractionEnabled}} +
+
+

Add Contributor

+
+ +
+ {{add-contributor kredits=kredits}} +
+
+{{/if}} diff --git a/tests/integration/components/add-contributor/component-test.js b/tests/integration/components/add-contributor/component-test.js new file mode 100644 index 0000000..88e5113 --- /dev/null +++ b/tests/integration/components/add-contributor/component-test.js @@ -0,0 +1,16 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('add-contributor', 'Integration | Component | add contributor', { + integration: true +}); + +test('it renders', function(assert) { + + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + + this.render(hbs`{{add-contributor}}`); + + assert.equal(this.$().text().trim(), ''); +}); diff --git a/tests/unit/controllers/application-test.js b/tests/unit/controllers/application-test.js new file mode 100644 index 0000000..b71b4a5 --- /dev/null +++ b/tests/unit/controllers/application-test.js @@ -0,0 +1,12 @@ +import { moduleFor, test } from 'ember-qunit'; + +moduleFor('controller:application', 'Unit | Controller | application', { + // Specify the other units that are required for this test. + // needs: ['controller:foo'] +}); + +// Replace this with your real tests. +test('it exists', function(assert) { + let controller = this.subject(); + assert.ok(controller); +});