diff --git a/src/screens/Amicale/VoteScreen.js b/src/screens/Amicale/VoteScreen.js index 38844fe..6b19a98 100644 --- a/src/screens/Amicale/VoteScreen.js +++ b/src/screens/Amicale/VoteScreen.js @@ -2,9 +2,20 @@ import * as React from 'react'; import {FlatList, StyleSheet} from "react-native"; -import {Avatar, Button, Card, Paragraph, RadioButton, withTheme} from 'react-native-paper'; +import { + ActivityIndicator, + Avatar, + Button, + Card, + List, + Paragraph, + ProgressBar, + RadioButton, + Subheading, + withTheme +} from 'react-native-paper'; import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen"; -import {stringToDate} from "../../utils/Planning"; +import {getTimeOnlyString, stringToDate} from "../../utils/Planning"; const ICON_AMICALE = require('../../../assets/amicale.png'); @@ -14,10 +25,10 @@ type Props = { } const FAKE_DATE = { - "date_begin": "2020-04-06 13:00", - "date_end": "2020-04-06 20:00", - "date_result_begin": "2020-04-06 20:15", - "date_result_end": "2020-04-07 12:00", + "date_begin": "2020-04-06 21:50", + "date_end": "2020-04-06 21:50", + "date_result_begin": "2020-04-06 21:50", + "date_result_end": "2020-04-06 21:50", }; const FAKE_DATE2 = { @@ -32,7 +43,26 @@ const FAKE_TEAMS = { teams: [ { id: 1, - name: "TEST TEAM", + name: "TEST TEAM1", + }, + { + id: 2, + name: "TEST TEAM2", + }, + ], +}; +const FAKE_TEAMS2 = { + has_voted: false, + teams: [ + { + id: 1, + name: "TEST TEAM1", + votes: 1, + }, + { + id: 2, + name: "TEST TEAM2", + votes: 9, }, ], }; @@ -44,12 +74,12 @@ type State = { class VoteScreen extends React.Component { state = { - selectedTeam: "0", + selectedTeam: "none", }; colors: Object; - teams: Array | null; + teams: Array; hasVoted: boolean; datesString: Object; dates: Object; @@ -57,12 +87,12 @@ class VoteScreen extends React.Component { today: Date; mainFlatListData: Array; + totalVotes: number; constructor(props) { super(props); this.colors = props.theme.colors; this.hasVoted = false; - this.teams = null; this.today = new Date(); this.mainFlatListData = [ @@ -81,7 +111,7 @@ class VoteScreen extends React.Component { }; getScreen = (data: Array) => { - data[0] = FAKE_TEAMS; + data[0] = FAKE_TEAMS2; data[1] = FAKE_DATE; if (data[0] !== null) { @@ -93,6 +123,7 @@ class VoteScreen extends React.Component { console.log(this.teams); console.log(this.datesString); return ( + //$FlowFixMe { console.log("vote sent"); }; + voteKeyExtractor = (item: Object) => item.id.toString(); + + voteRenderItem = ({item}: Object) => ; + /** * The user has not voted yet, and the votes are open */ @@ -199,6 +234,7 @@ class VoteScreen extends React.Component { onValueChange={this.onVoteSelectionChange} value={this.state.selectedTeam} > + {/*$FlowFixMe*/} { icon="send" mode="contained" onPress={this.onVotePress} - style={{marginLeft: 'auto'}}> + style={{marginLeft: 'auto'}} + disabled={this.state.selectedTeam === "none"} + > SEND VOTE @@ -220,30 +258,74 @@ class VoteScreen extends React.Component { ); } - voteKeyExtractor = (item: Object) => item.id.toString(); + sortByVotes = (a: Object, b: Object) => b.votes - a.votes; - voteRenderItem = ({item}: Object) => { - return - }; + getTotalVotes() { + let count = 0; + for (let i = 0; i < this.teams.length; i++) { + count += this.teams[i].votes; + } + return count; + } + + getWinnerId() { + return this.teams[0].id; + } /** * Votes have ended, results can be displayed */ getVoteResultCard() { + this.totalVotes = this.getTotalVotes(); + this.teams.sort(this.sortByVotes); return ( } /> - TEAM1 - TEAM2 + TOTAL VOTES : {this.totalVotes} + {/*$FlowFixMe*/} + ); } + resultRenderItem = ({item}: Object) => { + const isWinner = this.getWinnerId() === item.id; + return ( + + isWinner + ? + : null} + titleStyle={{ + color: isWinner + ? this.colors.primary + : this.colors.text + }} + style={{padding: 0}} + /> + + + ); + }; + /** * Vote will open shortly */ @@ -251,31 +333,59 @@ class VoteScreen extends React.Component { return ( } /> + + VOTE STARTS + AT {this.getDateString(this.dates.date_begin, this.datesString.date_begin)} + ); } /** - * User has voted, waiting for results + * Votes have ended waiting for results */ getWaitVoteCard() { return ( } /> + { + this.hasVoted + ? THX FOR THE VOTE + : null + } + { + this.dates.date_result_begin !== null + ? + RESULTS AVAILABLE + AT {this.getDateString(this.dates.date_result_begin, this.datesString.date_result_begin)} + + : RESULTS AVAILABLE SHORTLY + } ); } + getDateString(date: Date, dateString: string) { + if (this.today.getDate() === date.getDate()) + return getTimeOnlyString(dateString); + else + return dateString; + } + render() { return (