From 6ea4392bcb8f7c089f28a001f41a184a88575497 Mon Sep 17 00:00:00 2001 From: viktor Date: Fri, 22 Dec 2017 20:46:49 +0300 Subject: [PATCH] Cards values --- src/components/BallotKeysCard.jsx | 91 +++++++++++++++++++++-- src/components/BallotMinThresholdCard.jsx | 57 ++++++++++++-- src/components/BallotProxyCard.jsx | 69 +++++++++++++++-- src/components/BallotProxyMetadata.jsx | 10 +-- src/components/Ballots.jsx | 2 +- src/stores/BallotStore.js | 7 ++ 6 files changed, 215 insertions(+), 21 deletions(-) diff --git a/src/components/BallotKeysCard.jsx b/src/components/BallotKeysCard.jsx index 89f19f2..77bf01d 100644 --- a/src/components/BallotKeysCard.jsx +++ b/src/components/BallotKeysCard.jsx @@ -1,11 +1,92 @@ import React from 'react'; +import moment from 'moment'; +import { observable, action, computed } from "mobx"; import { inject, observer } from "mobx-react"; -@inject("commonStore", "contractsStore", "ballotsStore") +@inject("contractsStore", "ballotStore") @observer export class BallotKeysCard extends React.Component { + @observable startTime; + @observable endTime; + @observable timeToFinish; + @observable affectedKey; + @observable affectedKeyType; + @observable affectedKeyTypeDisplayName; + + + @action("Get affectedKeyTypeDisplayName") + getAffectedKeyTypeDisplayName(affectedKeyType) { + const { ballotStore } = this.props; + console.log("this.affectedKeyType:", affectedKeyType) + switch(affectedKeyType) { + case ballotStore.KeyType.mining: + this.affectedKeyTypeDisplayName = "mining"; + break; + case ballotStore.KeyType.voting: + this.affectedKeyTypeDisplayName = "voting"; + break; + case ballotStore.KeyType.payout: + this.affectedKeyTypeDisplayName = "payout"; + break; + default: + this.affectedKeyTypeDisplayName = ""; + break; + } + } + + @action("Get start time of keys ballot") + getStartTime = async (_id) => { + const { contractsStore } = this.props; + let startTime = await contractsStore.votingToChangeKeys.votingToChangeKeysInstance.methods.getStartTime(_id).call() + console.log(startTime) + this.startTime = moment.utc(startTime*1000).format('DD/MM/YYYY h:mm A'); + } + + @action("Get end time of keys ballot") + getEndTime = async (_id) => { + const { contractsStore } = this.props; + let endTime = await contractsStore.votingToChangeKeys.votingToChangeKeysInstance.methods.getEndTime(_id).call() + console.log(endTime) + this.endTime = moment.utc(endTime*1000).format('DD/MM/YYYY h:mm A'); + } + + @action("Calculate time to finish") + calcTimeToFinish = (_id) => { + const now = moment(); + const finish = moment.utc(this.endTime*1000); + const totalHours = moment.duration(finish.diff(now)).hours(); + const totalMinutes = moment.duration(finish.diff(now)).minutes(); + const minutes = totalMinutes - totalHours * 60; + if (finish > now) + this.timeToFinish = moment(totalHours, "h").format("HH") + ":" + moment(minutes, "m").format("mm"); + else + this.timeToFinish = moment(0, "h").format("HH") + ":" + moment(0, "m").format("mm"); + } + + @action("Get affected key type of keys ballot") + getAffectedKeyType = async (_id) => { + const { contractsStore } = this.props; + let affectedKeyType = await contractsStore.votingToChangeKeys.votingToChangeKeysInstance.methods.getAffectedKeyType(_id).call() + console.log(affectedKeyType) + this.affectedKeyType = affectedKeyType; + this.getAffectedKeyTypeDisplayName(affectedKeyType); + } + + + @action("Get affected key of keys ballot") + getAffectedKey = async (_id) => { + const { contractsStore } = this.props; + let affectedKey = await contractsStore.votingToChangeKeys.votingToChangeKeysInstance.methods.getAffectedKey(_id).call() + console.log(affectedKey) + this.affectedKey = affectedKey; + } + constructor(props) { super(props); + this.getStartTime(this.props.id); + this.getEndTime(this.props.id); + this.getAffectedKey(this.props.id); + this.getAffectedKeyType(this.props.id); } render () { @@ -18,7 +99,7 @@ export class BallotKeysCard extends React.Component {

Suleyman Duyar

-

31/10/2017 7:22 AM

+

{this.startTime}

@@ -34,7 +115,7 @@ export class BallotKeysCard extends React.Component {

Key type

-

Mining

+

{this.affectedKeyTypeDisplayName}

@@ -42,7 +123,7 @@ export class BallotKeysCard extends React.Component {

Affected key

-

0xA1Cf735Ab55e9840Be820261D9b404959fcB5e41

+

{this.affectedKey}

@@ -50,7 +131,7 @@ export class BallotKeysCard extends React.Component {

Time

-

17:49

+

{this.timeToFinish}

To close

diff --git a/src/components/BallotMinThresholdCard.jsx b/src/components/BallotMinThresholdCard.jsx index faa2aef..bfa4d34 100644 --- a/src/components/BallotMinThresholdCard.jsx +++ b/src/components/BallotMinThresholdCard.jsx @@ -1,11 +1,58 @@ import React from 'react'; +import moment from 'moment'; +import { observable, action } from "mobx"; import { inject, observer } from "mobx-react"; -@inject("commonStore", "contractsStore", "ballotsStore") +@inject("contractsStore") @observer export class BallotMinThresholdCard extends React.Component { + @observable startTime; + @observable endTime; + @observable timeToFinish; + @observable proposedValue; + + @action("Get start time of min threshold ballot") + getStartTime = async (_id) => { + const { contractsStore } = this.props; + let startTime = await contractsStore.votingToChangeMinThreshold.votingToChangeMinThresholdInstance.methods.getStartTime(_id).call() + console.log(startTime) + this.startTime = moment.utc(startTime*1000).format('DD/MM/YYYY h:mm A'); + } + + @action("Get end time of min threshold ballot") + getEndTime = async (_id) => { + const { contractsStore } = this.props; + let endTime = await contractsStore.votingToChangeMinThreshold.votingToChangeMinThresholdInstance.methods.getEndTime(_id).call() + console.log(endTime) + this.endTime = moment.utc(endTime*1000).format('DD/MM/YYYY h:mm A'); + } + + @action("Calculate time to finish") + calcTimeToFinish = (_id) => { + const now = moment(); + const finish = moment.utc(this.endTime*1000); + const totalHours = moment.duration(finish.diff(now)).hours(); + const totalMinutes = moment.duration(finish.diff(now)).minutes(); + const minutes = totalMinutes - totalHours * 60; + if (finish > now) + this.timeToFinish = moment(totalHours, "h").format("HH") + ":" + moment(minutes, "m").format("mm"); + else + this.timeToFinish = moment(0, "h").format("HH") + ":" + moment(0, "m").format("mm"); + } + + @action("Get proposed value of min threshold ballot") + getProposedValue = async (_id) => { + const { contractsStore } = this.props; + let proposedValue = await contractsStore.votingToChangeMinThreshold.votingToChangeMinThresholdInstance.methods.getProposedValue(_id).call() + console.log(proposedValue) + this.proposedValue = proposedValue; + } + constructor(props) { super(props); + this.getStartTime(this.props.id); + this.getEndTime(this.props.id); + this.getProposedValue(this.props.id); } render () { @@ -18,15 +65,15 @@ export class BallotMinThresholdCard extends React.Component {

Suleyman Duyar

-

31/10/2017 7:22 AM

+

{this.startTime}

-

Proposed min gthreshold

+

Proposed min threshold

-

0xA1Cf735Ab55e9840Be820261D9b404959fcB5e41

+

{this.proposedValue}

@@ -34,7 +81,7 @@ export class BallotMinThresholdCard extends React.Component {

Time

-

17:49

+

{this.timeToFinish}

To close

diff --git a/src/components/BallotProxyCard.jsx b/src/components/BallotProxyCard.jsx index 8b41fe1..1cad423 100644 --- a/src/components/BallotProxyCard.jsx +++ b/src/components/BallotProxyCard.jsx @@ -1,14 +1,73 @@ import React from 'react'; +import moment from 'moment'; +import { observable, action, computed } from "mobx"; import { inject, observer } from "mobx-react"; -@inject("commonStore", "contractsStore", "ballotsStore") +@inject("contractsStore", "ballotStore") @observer export class BallotProxyCard extends React.Component { + @observable startTime; + @observable endTime; + @observable timeToFinish; + @observable proposedAddress; + @observable contractType; + + @action("Calculate time to finish") + calcTimeToFinish = (_id) => { + const now = moment(); + const finish = moment.utc(this.endTime*1000); + const totalHours = moment.duration(finish.diff(now)).hours(); + const totalMinutes = moment.duration(finish.diff(now)).minutes(); + const minutes = totalMinutes - totalHours * 60; + if (finish > now) + this.timeToFinish = moment(totalHours, "h").format("HH") + ":" + moment(minutes, "m").format("mm"); + else + this.timeToFinish = moment(0, "h").format("HH") + ":" + moment(0, "m").format("mm"); + } + + @action("Get start time of proxy ballot") + getStartTime = async (_id) => { + const { contractsStore } = this.props; + let startTime = await contractsStore.votingToChangeProxy.votingToChangeProxyInstance.methods.getStartTime(_id).call() + console.log(startTime) + this.startTime = moment.utc(startTime*1000).format('DD/MM/YYYY h:mm A'); + } + + @action("Get end time of proxy ballot") + getEndTime = async (_id) => { + const { contractsStore } = this.props; + let endTime = await contractsStore.votingToChangeProxy.votingToChangeProxyInstance.methods.getEndTime(_id).call() + console.log(endTime) + this.endTime = moment.utc(endTime*1000).format('DD/MM/YYYY h:mm A'); + } + + @action("Get proposed address of proxy ballot") + getProposedAddress = async (_id) => { + const { contractsStore } = this.props; + let proposedAddress = await contractsStore.votingToChangeProxy.votingToChangeProxyInstance.methods.getProposedValue(_id).call() + console.log(proposedAddress) + this.proposedAddress = proposedAddress; + } + + @action("Get contract type of proxy ballot") + getContractType = async (_id) => { + const { contractsStore } = this.props; + let contractType = await contractsStore.votingToChangeProxy.votingToChangeProxyInstance.methods.getContractType(_id).call() + console.log(contractType) + this.contractType = contractType; + } + constructor(props) { super(props); + this.getStartTime(this.props.id); + this.getEndTime(this.props.id); + this.getProposedAddress(this.props.id); + this.getContractType(this.props.id); + this.calcTimeToFinish(this.props.id); } render () { + const { ballotStore } = this.props; return (
@@ -18,7 +77,7 @@ export class BallotProxyCard extends React.Component {

Suleyman Duyar

-

31/10/2017 7:22 AM

+

{this.startTime}

@@ -26,7 +85,7 @@ export class BallotProxyCard extends React.Component {

Contract type

-

VotingToChangeKeys

+

{ballotStore.ProxyBallotType[this.contractType]}

@@ -34,7 +93,7 @@ export class BallotProxyCard extends React.Component {

Proposed contract address

-

0xA1Cf735Ab55e9840Be820261D9b404959fcB5e41

+

{this.proposedAddress}

@@ -42,7 +101,7 @@ export class BallotProxyCard extends React.Component {

Time

-

17:49

+

{this.timeToFinish}

To close

diff --git a/src/components/BallotProxyMetadata.jsx b/src/components/BallotProxyMetadata.jsx index 8b8d3bc..4745c8f 100644 --- a/src/components/BallotProxyMetadata.jsx +++ b/src/components/BallotProxyMetadata.jsx @@ -30,11 +30,11 @@ export class BallotProxyMetadata extends React.Component { onChange={e => ballotStore.changeBallotMetadata(e, "contractType", "ballotProxy")} options={[ { value: '', label: '' }, - { value: '1', label: 'KeysManager' }, - { value: '2', label: 'VotingToChangeKeys' }, - { value: '3', label: 'VotingToChangeMinThreshold' }, - { value: '4', label: 'VotingToChangeProxy' }, - { value: '5', label: 'BallotsStorage' }, + { value: '1', label: ballotStore.ProxyBallotType[1] }, + { value: '2', label: ballotStore.ProxyBallotType[2] }, + { value: '3', label: ballotStore.ProxyBallotType[3] }, + { value: '4', label: ballotStore.ProxyBallotType[4] }, + { value: '5', label: ballotStore.ProxyBallotType[5] }, ]} > diff --git a/src/components/Ballots.jsx b/src/components/Ballots.jsx index a48a8c3..6868e57 100644 --- a/src/components/Ballots.jsx +++ b/src/components/Ballots.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { inject, observer, observable } from "mobx-react"; +import { inject, observer } from "mobx-react"; import "babel-polyfill"; @inject("commonStore", "contractsStore", "ballotStore", "ballotsStore") diff --git a/src/stores/BallotStore.js b/src/stores/BallotStore.js index 7fb25b8..0d2cbc6 100644 --- a/src/stores/BallotStore.js +++ b/src/stores/BallotStore.js @@ -17,6 +17,13 @@ class BallotStore { voting: 2, payout: 3 }; + ProxyBallotType = { + 1: 'KeysManager', + 2: 'VotingToChangeKeys', + 3: 'VotingToChangeMinThreshold', + 4: 'VotingToChangeProxy', + 5: 'BallotsStorage' + } @observable ballotType; @observable endTime;