saint-lo/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Added mascot to equipment screen

Browse source
This commit is contained in:
Arnaud Vergnet 2020-07-15 18:05:56 +02:00
parent 9a379ffb3d
commit 8b201efabf
4 changed files with 94 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
locales/en.json
View file

@ -269,7 +269,6 @@
"title": "Equipment Booking",
"book": "Book",
"confirm": "Confirmation",
"message": "Thanks to the Amicale, students have access to some equipment like BBQs and others. To book one of those items, click the equipment of your choice in the list bellow, enter your lend dates, then come around the Amicale to claim it and give your bail.",
"bail": "Bail: %{cost}€",
"available": "Available %{date}",
"today": "today",
@ -284,7 +283,12 @@
"dialogTitle": "Confirm booking?",
"dialogTitleLoading": "Sending your booking...",
"dialogMessage": "Are you sure you want to confirm your booking?\n\nYou will then be able to claim the selected equipment at the Amicale for the duration of your booking in exchange of a bail.",
"bookingConfirmedMessage": "Do not forget to come by the Amicale to give your bail in exchange of the equipment."
"bookingConfirmedMessage": "Do not forget to come by the Amicale to give your bail in exchange of the equipment.",
"mascotDialog": {
"title": "How does it work ?",
"message": "Thanks to the Amicale, students have access to some equipment like BBQs and others. To book one of those items, click the equipment of your choice in the list bellow, enter your lend dates, then come around the Amicale to claim it and give your bail.",
"button": "Ok"
}
},
"scanner": {

8
locales/fr.json
View file

@ -268,7 +268,6 @@
"title": "Réservation de Matériel",
"book": "Réserver",
"confirm": "Confirmation",
"message": "L'Amicale met à disposition des étudiants du matériel comme des BBQ, des appareils à raclette et autres. Pour réserver l'un de ces formidables appareils, clique sur celui de ton choix dans la liste, indique les dates du prêt, puis passe à l'Amicale pour le récupérer et donner la caution.",
"bail": "Caution : %{cost}€",
"available": "Disponible %{date}",
"today": "aujourd'hui",
@ -283,7 +282,12 @@
"dialogTitle": "Confirmer la réservation ?",
"dialogTitleLoading": "Envoi de votre réservation...",
"dialogMessage": "Est-tu sûr de confirmer ta réservation ?\n\nTu pourras ensuite passer à l'Amicale récupérer le matériel pour la durée de la réservation en échange d'une caution.",
"bookingConfirmedMessage": "N'oublie pas de passer à L'Amicale pour donner la caution en échange du matériel."
"bookingConfirmedMessage": "N'oublie pas de passer à L'Amicale pour donner la caution en échange du matériel.",
"mascotDialog": {
"title": "Comme ça marche ?",
"message": "L'Amicale met à disposition des étudiants du matériel comme des BBQ, des appareils à raclette et autres. Pour réserver l'un de ces formidables appareils, clique sur celui de ton choix dans la liste, indique les dates du prêt, puis passe à l'Amicale pour le récupérer et donner la caution.",
"button": "Merci !"
}
},
"scanner": {

5
src/managers/AsyncStorageManager.js
View file

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

115
src/screens/Amicale/Equipment/EquipmentListScreen.js
View file

@ -1,8 +1,8 @@
// @flow
import * as React from 'react';
import {Animated, Image} from "react-native";
import {Card, Paragraph, withTheme} from 'react-native-paper';
import {Animated, View} from "react-native";
import {Button, withTheme} from 'react-native-paper';
import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
import {Collapsible} from "react-navigation-collapsible";
import {withCollapsible} from "../../../utils/withCollapsible";
@ -11,6 +11,9 @@ import type {CustomTheme} from "../../../managers/ThemeManager";
import i18n from "i18n-js";
import type {club} from "../Clubs/ClubListScreen";
import EquipmentListItem from "../../../components/Lists/Equipment/EquipmentListItem";
import MascotPopup from "../../../components/Mascot/MascotPopup";
import {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
import AsyncStorageManager from "../../../managers/AsyncStorageManager";
type Props = {
navigation: StackNavigationProp,
@ -18,6 +21,10 @@ type Props = {
collapsibleStack: Collapsible,
}
type State = {
mascotDialogVisible: boolean,
}
export type Device = {
id: number,
name: string,
@ -32,10 +39,13 @@ export type RentedDevice = {
end: string,
}
const ICON_AMICALE = require('../../../../assets/amicale.png');
const LIST_ITEM_HEIGHT = 64;
class EquipmentListScreen extends React.Component<Props> {
class EquipmentListScreen extends React.Component<Props, State> {
state = {
mascotDialogVisible: AsyncStorageManager.getInstance().preferences.equipmentShowBanner.current === "1"
}
data: Array<Device>;
userRents: Array<RentedDevice>;
@ -84,24 +94,24 @@ class EquipmentListScreen extends React.Component<Props> {
* @returns {*}
*/
getListHeader() {
return <Card style={{margin: 5}}>
<Card.Title
title={i18n.t('screens.equipment.title')}
left={(props) => <Image
{...props}
return (
<View style={{
width: "100%",
marginTop: 10,
marginBottom: 10,
}}>
<Button
mode={"contained"}
icon={"help-circle"}
onPress={this.showMascotDialog}
style={{
width: props.size,
height: props.size,
}}
source={ICON_AMICALE}
/>}
/>
<Card.Content>
<Paragraph>
{i18n.t('screens.equipment.message')}
</Paragraph>
</Card.Content>
</Card>;
marginRight: "auto",
marginLeft: "auto",
}}>
{i18n.t("screens.equipment.mascotDialog.title")}
</Button>
</View>
);
}
keyExtractor = (item: club) => item.id.toString();
@ -141,25 +151,54 @@ class EquipmentListScreen extends React.Component<Props> {
)
};
showMascotDialog = () => {
this.setState({mascotDialogVisible: true})
};
hideMascotDialog = () => {
AsyncStorageManager.getInstance().savePref(
AsyncStorageManager.getInstance().preferences.equipmentShowBanner.key,
'0'
);
this.setState({mascotDialogVisible: false})
};
render() {
return (
<AuthenticatedScreen
{...this.props}
ref={this.authRef}
requests={[
{
link: 'location/all',
params: {},
mandatory: true,
},
{
link: 'location/my',
params: {},
mandatory: false,
}
]}
renderFunction={this.getScreen}
/>
<View style={{flex: 1}}>
<AuthenticatedScreen
{...this.props}
ref={this.authRef}
requests={[
{
link: 'location/all',
params: {},
mandatory: true,
},
{
link: 'location/my',
params: {},
mandatory: false,
}
]}
renderFunction={this.getScreen}
/>
<MascotPopup
visible={this.state.mascotDialogVisible}
title={i18n.t("screens.equipment.mascotDialog.title")}
message={i18n.t("screens.equipment.mascotDialog.message")}
icon={"vote"}
buttons={{
action: null,
cancel: {
message: i18n.t("screens.equipment.mascotDialog.button"),
icon: "check",
onPress: this.hideMascotDialog,
}
}}
emotion={MASCOT_STYLE.WINK}
/>
</View>
);
}
}