Added mascot to vote screen

This commit is contained in:
Arnaud Vergnet 2020-07-15 17:53:31 +02:00
parent 57c3e7d9d7
commit 9a379ffb3d
6 changed files with 129 additions and 87 deletions

View file

@ -230,6 +230,7 @@
},
"vote": {
"title": "Elections",
"noVote": "No vote available",
"select": {
"title": "Elections open",
"subtitle": "Vote now!",
@ -258,11 +259,10 @@
"totalVotes": "Total votes:",
"votes": "votes"
},
"main": {
"title": "The Elections",
"subtitle": "Why your vote is important",
"paragraph1": "The Amicale's elections is the right moment for you to choose the next team, which will handle different projects on the campus, help organizing your favorite events, animate the campus life during the whole year, and relay your ideas to the administration, so that your campus life is the most enjoyable possible!\nYour turn to make a change!\uD83D\uDE09",
"paragraph2": "Note: If there is only one list, it is still important to vote to show your support, so that the administration knows the current list is supported by students. It is always a plus when taking difficult decisions! \uD83D\uDE09"
"mascotDialog": {
"title": "Why vote?",
"message": "The Amicale's elections is the right moment for you to choose the next team, which will handle different projects on the campus, help organizing your favorite events, animate the campus life during the whole year, and relay your ideas to the administration, so that your campus life is the most enjoyable possible!\nYour turn to make a change!\uD83D\uDE09\n\nNote: If there is only one list, it is still important to vote to show your support, so that the administration knows the current list is supported by students. It is always a plus when taking difficult decisions! \uD83D\uDE09",
"button": "Ok"
}
},
"equipment": {

View file

@ -229,6 +229,7 @@
},
"vote": {
"title": "Élections",
"noVote": "Pas de vote en cours",
"select": {
"title": "Élections ouvertes",
"subtitle": "Vote maintenant !",
@ -257,11 +258,10 @@
"totalVotes": "Nombre total de votes :",
"votes": "votes"
},
"main": {
"title": "Les Élections",
"subtitle": "Pourquoi ton vote est important",
"paragraph1": "Les élections de l'amicale, c'est le moment pour toi de choisir la prochaine équipe qui portera les différents projets du campus, qui soutiendra les organisations de tes événements favoris, qui te proposera des animations tout au long de l'année, et qui poussera tes idées à ladministration pour que la vie de campus soit des plus riches !\nAlors à toi de jouer ! \uD83D\uDE09",
"paragraph2": "NB : Si par cas il n'y a qu'une liste qui se présente, il est important que tout le monde vote, afin qui la liste puisse montrer à ladministration que les INSAiens la soutiennent ! Ça compte toujours pour les décisions difficiles ! \uD83D\uDE09"
"mascotDialog": {
"title": "Pourquoi voter ?",
"message": "Les élections de l'amicale, c'est le moment pour toi de choisir la prochaine équipe qui portera les différents projets du campus, qui soutiendra les organisations de tes événements favoris, qui te proposera des animations tout au long de l'année, et qui poussera tes idées à ladministration pour que la vie de campus soit des plus riches !\nAlors à toi de jouer ! \uD83D\uDE09\n\nNB : Si par cas il n'y a qu'une liste qui se présente, il est important que tout le monde vote, afin qui la liste puisse montrer à ladministration que les INSAiens la soutiennent ! Ça compte toujours pour les décisions difficiles ! \uD83D\uDE09",
"button": "Oké"
}
},
"equipment": {

View file

@ -0,0 +1,37 @@
// @flow
import * as React from 'react';
import {View} from 'react-native';
import {Headline, withTheme} from "react-native-paper";
import i18n from 'i18n-js';
import type {CustomTheme} from "../../../managers/ThemeManager";
type Props = {
theme: CustomTheme
}
class VoteNotAvailable extends React.Component<Props> {
shouldComponentUpdate() {
return false;
}
render() {
return (
<View style={{
width: "100%",
marginTop: 10,
marginBottom: 10,
}}>
<Headline
style={{
color: this.props.theme.colors.textDisabled,
textAlign: "center",
}}
>{i18n.t("screens.vote.noVote")}</Headline>
</View>
);
}
}
export default withTheme(VoteNotAvailable);

View file

@ -1,48 +0,0 @@
// @flow
import * as React from 'react';
import {Card, Paragraph} from "react-native-paper";
import {Image, StyleSheet} from "react-native";
import i18n from 'i18n-js';
const ICON_AMICALE = require('../../../../assets/amicale.png');
export default class VoteTitle extends React.Component<{}> {
shouldComponentUpdate() {
return false;
}
render() {
return (
<Card style={styles.card}>
<Card.Title
title={i18n.t('screens.vote.main.title')}
subtitle={i18n.t('screens.vote.main.subtitle')}
left={(props) => <Image
{...props}
style={{
width: props.size,
height: props.size,
}}
source={ICON_AMICALE}
/>}
/>
<Card.Content>
<Paragraph>
{i18n.t('screens.vote.main.paragraph1')}
</Paragraph>
<Paragraph>
{i18n.t('screens.vote.main.paragraph2')}
</Paragraph>
</Card.Content>
</Card>
);
}
}
const styles = StyleSheet.create({
card: {
margin: 10,
},
});

View file

@ -89,6 +89,11 @@ export default class AsyncStorageManager {
default: '1',
current: '',
},
voteShowBanner: {
key: 'voteShowBanner',
default: '1',
current: '',
},
proxiwashWatchedMachines: {
key: 'proxiwashWatchedMachines',
default: '[]',

View file

@ -4,12 +4,17 @@ import * as React from 'react';
import {FlatList, RefreshControl, View} from "react-native";
import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
import {getTimeOnlyString, stringToDate} from "../../utils/Planning";
import VoteTitle from "../../components/Amicale/Vote/VoteTitle";
import VoteTease from "../../components/Amicale/Vote/VoteTease";
import VoteSelect from "../../components/Amicale/Vote/VoteSelect";
import VoteResults from "../../components/Amicale/Vote/VoteResults";
import VoteWait from "../../components/Amicale/Vote/VoteWait";
import {StackNavigationProp} from "@react-navigation/stack";
import i18n from "i18n-js";
import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
import MascotPopup from "../../components/Mascot/MascotPopup";
import AsyncStorageManager from "../../managers/AsyncStorageManager";
import {Button} from "react-native-paper";
import VoteNotAvailable from "../../components/Amicale/Vote/VoteNotAvailable";
export type team = {
id: number,
@ -37,10 +42,10 @@ type objectVoteDates = {
}
// const FAKE_DATE = {
// "date_begin": "2020-04-19 15:50",
// "date_end": "2020-04-19 15:50",
// "date_result_begin": "2020-04-19 19:50",
// "date_result_end": "2020-04-19 22:50",
// "date_begin": "2020-08-19 15:50",
// "date_end": "2020-08-19 15:50",
// "date_result_begin": "2020-08-19 19:50",
// "date_result_end": "2020-08-19 22:50",
// };
//
// const FAKE_DATE2 = {
@ -92,6 +97,7 @@ type Props = {
type State = {
hasVoted: boolean,
mascotDialogVisible: boolean,
}
/**
@ -101,6 +107,7 @@ export default class VoteScreen extends React.Component<Props, State> {
state = {
hasVoted: false,
mascotDialogVisible: AsyncStorageManager.getInstance().preferences.voteShowBanner.current === "1",
};
teams: Array<team>;
@ -200,11 +207,23 @@ export default class VoteScreen extends React.Component<Props, State> {
mainRenderItem = ({item}: { item: { key: string } }) => {
if (item.key === 'info')
return <VoteTitle/>;
else if (item.key === 'main' && this.dates != null)
return this.getContent();
return (
<View>
<Button
mode={"contained"}
icon={"help-circle"}
onPress={this.showMascotDialog}
style={{
marginLeft: "auto",
marginRight: "auto",
marginTop: 20
}}>
{i18n.t("screens.vote.mascotDialog.title")}
</Button>
</View>
);
else
return null;
return this.getContent();
};
getScreen = (data: Array<{ [key: string]: any } | null>) => {
@ -254,7 +273,7 @@ export default class VoteScreen extends React.Component<Props, State> {
else if (this.isResultRunning())
return this.getVoteResultCard();
else
return null;
return <VoteNotAvailable/>;
}
onVoteSuccess = () => this.setState({hasVoted: true});
@ -278,7 +297,7 @@ export default class VoteScreen extends React.Component<Props, State> {
this.datesString.date_result_end)}
/>;
else
return null;
return <VoteNotAvailable/>;
}
/**
@ -289,7 +308,7 @@ export default class VoteScreen extends React.Component<Props, State> {
return <VoteTease
startDate={this.getDateString(this.dates.date_begin, this.datesString.date_begin)}/>;
else
return null;
return <VoteNotAvailable/>;
}
/**
@ -304,6 +323,18 @@ export default class VoteScreen extends React.Component<Props, State> {
isVoteRunning={this.isVoteRunning()}/>;
}
showMascotDialog = () => {
this.setState({mascotDialogVisible: true})
};
hideMascotDialog = () => {
AsyncStorageManager.getInstance().savePref(
AsyncStorageManager.getInstance().preferences.voteShowBanner.key,
'0'
);
this.setState({mascotDialogVisible: false})
};
/**
* Renders the authenticated screen.
*
@ -313,23 +344,40 @@ export default class VoteScreen extends React.Component<Props, State> {
*/
render() {
return (
<AuthenticatedScreen
{...this.props}
ref={this.authRef}
requests={[
{
link: 'elections/teams',
params: {},
mandatory: false,
},
{
link: 'elections/dates',
params: {},
mandatory: false,
},
]}
renderFunction={this.getScreen}
/>
<View style={{flex: 1}}>
<AuthenticatedScreen
{...this.props}
ref={this.authRef}
requests={[
{
link: 'elections/teams',
params: {},
mandatory: false,
},
{
link: 'elections/dates',
params: {},
mandatory: false,
},
]}
renderFunction={this.getScreen}
/>
<MascotPopup
visible={this.state.mascotDialogVisible}
title={i18n.t("screens.vote.mascotDialog.title")}
message={i18n.t("screens.vote.mascotDialog.message")}
icon={"vote"}
buttons={{
action: null,
cancel: {
message: i18n.t("screens.vote.mascotDialog.button"),
icon: "check",
onPress: this.hideMascotDialog,
}
}}
emotion={MASCOT_STYLE.CUTE}
/>
</View>
);
}
}