poanetwork
/
poa-dapps-voting
mirror of https://github.com/poanetwork/poa-dapps-voting.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Cards values

This commit is contained in:
viktor 2017-12-22 20:46:49 +03:00
parent ac74440ca2
commit 6ea4392bcb
6 changed files with 215 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/BallotKeysCard.jsx
View File

@ -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 {
</div>
<div className="ballots-about-td">
<p className="ballots-i--name">Suleyman Duyar</p>
<p className="ballots-i--created">31/10/2017 7:22 AM</p>
<p className="ballots-i--created">{this.startTime}</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_action">
@ -34,7 +115,7 @@ export class BallotKeysCard extends React.Component {
<p className="ballots-about-i--title">Key type</p>
</div>
<div className="ballots-about-td">
<p>Mining</p>
<p>{this.affectedKeyTypeDisplayName}</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_mining-key">
@ -42,7 +123,7 @@ export class BallotKeysCard extends React.Component {
<p className="ballots-about-i--title">Affected key</p>
</div>
<div className="ballots-about-td">
<p>0xA1Cf735Ab55e9840Be820261D9b404959fcB5e41</p>
<p>{this.affectedKey}</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_time">
@ -50,7 +131,7 @@ export class BallotKeysCard extends React.Component {
<p className="ballots-about-i--title">Time</p>
</div>
<div className="ballots-about-td">
<p className="ballots-i--time">17:49</p>
<p className="ballots-i--time">{this.timeToFinish}</p>
<p className="ballots-i--to-close">To close</p>
</div>
</div>

57
src/components/BallotMinThresholdCard.jsx
View File

@ -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 {
</div>
<div className="ballots-about-td">
<p className="ballots-i--name">Suleyman Duyar</p>
<p className="ballots-i--created">31/10/2017 7:22 AM</p>
<p className="ballots-i--created">{this.startTime}</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_proposed-min-threshold">
<div className="ballots-about-td">
<p className="ballots-about-i--title">Proposed min gthreshold</p>
<p className="ballots-about-i--title">Proposed min threshold</p>
</div>
<div className="ballots-about-td">
<p>0xA1Cf735Ab55e9840Be820261D9b404959fcB5e41</p>
<p>{this.proposedValue}</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_time">
@ -34,7 +81,7 @@ export class BallotMinThresholdCard extends React.Component {
<p className="ballots-about-i--title">Time</p>
</div>
<div className="ballots-about-td">
<p className="ballots-i--time">17:49</p>
<p className="ballots-i--time">{this.timeToFinish}</p>
<p className="ballots-i--to-close">To close</p>
</div>
</div>

69
src/components/BallotProxyCard.jsx
View File

@ -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 (
<div className="ballots-i">
<div className="ballots-about">
@ -18,7 +77,7 @@ export class BallotProxyCard extends React.Component {
</div>
<div className="ballots-about-td">
<p className="ballots-i--name">Suleyman Duyar</p>
<p className="ballots-i--created">31/10/2017 7:22 AM</p>
<p className="ballots-i--created">{this.startTime}</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_contract-type">
@ -26,7 +85,7 @@ export class BallotProxyCard extends React.Component {
<p className="ballots-about-i--title">Contract type</p>
</div>
<div className="ballots-about-td">
<p>VotingToChangeKeys</p>
<p>{ballotStore.ProxyBallotType[this.contractType]}</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_proposed-address">
@ -34,7 +93,7 @@ export class BallotProxyCard extends React.Component {
<p className="ballots-about-i--title">Proposed contract address</p>
</div>
<div className="ballots-about-td">
<p>0xA1Cf735Ab55e9840Be820261D9b404959fcB5e41</p>
<p>{this.proposedAddress}</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_time">
@ -42,7 +101,7 @@ export class BallotProxyCard extends React.Component {
<p className="ballots-about-i--title">Time</p>
</div>
<div className="ballots-about-td">
<p className="ballots-i--time">17:49</p>
<p className="ballots-i--time">{this.timeToFinish}</p>
<p className="ballots-i--to-close">To close</p>
</div>
</div>

10
src/components/BallotProxyMetadata.jsx
View File

@ -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] },
]}
>
</Select>

2
src/components/Ballots.jsx
View File

@ -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")

7
src/stores/BallotStore.js
View File

@ -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;