123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333 |
- // @flow
-
- import * as React from 'react';
- import type {cardList} from "../../components/Lists/CardList/CardList";
- import CardList from "../../components/Lists/CardList/CardList";
- import CustomTabBar from "../../components/Tabbar/CustomTabBar";
- import {withCollapsible} from "../../utils/withCollapsible";
- import {Collapsible} from "react-navigation-collapsible";
- import {Animated, View} from "react-native";
- import {Avatar, Card, Divider, List, TouchableRipple, withTheme} from "react-native-paper";
- import type {CustomTheme} from "../../managers/ThemeManager";
- import i18n from 'i18n-js';
- import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
- import ConnectionManager from "../../managers/ConnectionManager";
- import {StackNavigationProp} from "@react-navigation/stack";
- import AvailableWebsites from "../../constants/AvailableWebsites";
- import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
- import MascotPopup from "../../components/Mascot/MascotPopup";
- import AsyncStorageManager from "../../managers/AsyncStorageManager";
-
- type Props = {
- navigation: StackNavigationProp,
- collapsibleStack: Collapsible,
- theme: CustomTheme,
- }
-
- type State = {
- mascotDialogVisible: boolean,
- }
-
-
- export type listItem = {
- title: string,
- description: string,
- image: string | number,
- shouldLogin: boolean,
- content: cardList,
- }
-
- const AMICALE_LOGO = require("../../../assets/amicale.png");
-
- const CLUBS_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Clubs.png";
- const PROFILE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ProfilAmicaliste.png";
- const EQUIPMENT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Materiel.png";
- const VOTE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Vote.png";
- const AMICALE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/WebsiteAmicale.png";
-
- const PROXIMO_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Proximo.png"
- const WIKETUD_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Wiketud.png";
- const EE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/EEC.png";
- const TUTORINSA_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/TutorINSA.png";
-
- const BIB_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Bib.png";
- const RU_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/RU.png";
- const ROOM_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Salles.png";
- const EMAIL_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Bluemind.png";
- const ENT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ENT.png";
- const ACCOUNT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Account.png";
-
- class ServicesScreen extends React.Component<Props, State> {
-
- amicaleDataset: cardList;
- studentsDataset: cardList;
- insaDataset: cardList;
-
- finalDataset: Array<listItem>
-
- state = {
- mascotDialogVisible: AsyncStorageManager.getInstance().preferences.servicesShowBanner.current === "1"
- }
-
- constructor(props) {
- super(props);
- const nav = props.navigation;
- this.amicaleDataset = [
- {
- title: i18n.t('screens.clubsAbout'),
- subtitle: i18n.t('servicesScreen.descriptions.clubs'),
- image: CLUBS_IMAGE,
- onPress: () => this.onAmicaleServicePress("club-list"),
- },
- {
- title: i18n.t('screens.profile'),
- subtitle: i18n.t('servicesScreen.descriptions.profile'),
- image: PROFILE_IMAGE,
- onPress: () => this.onAmicaleServicePress("profile"),
- },
- {
- title: i18n.t('screens.equipmentList'),
- subtitle: i18n.t('servicesScreen.descriptions.equipment'),
- image: EQUIPMENT_IMAGE,
- onPress: () => this.onAmicaleServicePress("equipment-list"),
- },
- {
- title: i18n.t('screens.amicaleWebsite'),
- subtitle: i18n.t('servicesScreen.descriptions.amicaleWebsite'),
- image: AMICALE_IMAGE,
- onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.AMICALE, title: i18n.t('screens.amicaleWebsite')}),
- },
- {
- title: i18n.t('screens.vote'),
- subtitle: i18n.t('servicesScreen.descriptions.vote'),
- image: VOTE_IMAGE,
- onPress: () => this.onAmicaleServicePress("vote"),
- },
- ];
- this.studentsDataset = [
- {
- title: i18n.t('screens.proximo'),
- subtitle: i18n.t('servicesScreen.descriptions.proximo'),
- image: PROXIMO_IMAGE,
- onPress: () => nav.navigate("proximo"),
- },
- {
- title: "Wiketud",
- subtitle: i18n.t('servicesScreen.descriptions.wiketud'),
- image: WIKETUD_IMAGE,
- onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.WIKETUD, title: "Wiketud"}),
- },
- {
- title: "Élus Étudiants",
- subtitle: i18n.t('servicesScreen.descriptions.elusEtudiants'),
- image: EE_IMAGE,
- onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.ELUS_ETUDIANTS, title: "Élus Étudiants"}),
- },
- {
- title: "Tutor'INSA",
- subtitle: i18n.t('servicesScreen.descriptions.tutorInsa'),
- image: TUTORINSA_IMAGE,
- onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.TUTOR_INSA, title: "Tutor'INSA"})
- },
- ];
- this.insaDataset = [
- {
- title: i18n.t('screens.menuSelf'),
- subtitle: i18n.t('servicesScreen.descriptions.self'),
- image: RU_IMAGE,
- onPress: () => nav.navigate("self-menu"),
- },
- {
- title: i18n.t('screens.availableRooms'),
- subtitle: i18n.t('servicesScreen.descriptions.availableRooms'),
- image: ROOM_IMAGE,
- onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.AVAILABLE_ROOMS, title: i18n.t('screens.availableRooms')}),
- },
- {
- title: i18n.t('screens.bib'),
- subtitle: i18n.t('servicesScreen.descriptions.bib'),
- image: BIB_IMAGE,
- onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.BIB, title: i18n.t('screens.bib')}),
- },
- {
- title: i18n.t('screens.bluemind'),
- subtitle: i18n.t('servicesScreen.descriptions.mails'),
- image: EMAIL_IMAGE,
- onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.BLUEMIND, title: i18n.t('screens.bluemind')}),
- },
- {
- title: i18n.t('screens.ent'),
- subtitle: i18n.t('servicesScreen.descriptions.ent'),
- image: ENT_IMAGE,
- onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.ENT, title: i18n.t('screens.ent')}),
- },
- {
- title: i18n.t('screens.insaAccount'),
- subtitle: i18n.t('servicesScreen.descriptions.insaAccount'),
- image: ACCOUNT_IMAGE,
- onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.INSA_ACCOUNT, title: i18n.t('screens.insaAccount')}),
- },
- ];
- this.finalDataset = [
- {
- title: i18n.t("servicesScreen.amicale"),
- description: "LOGIN",
- image: AMICALE_LOGO,
- shouldLogin: true,
- content: this.amicaleDataset
- },
- {
- title: i18n.t("servicesScreen.students"),
- description: "SERVICES OFFERED BY STUDENTS",
- image: 'account-group',
- shouldLogin: false,
- content: this.studentsDataset
- },
- {
- title: i18n.t("servicesScreen.insa"),
- description: "SERVICES OFFERED BY INSA",
- image: 'school',
- shouldLogin: false,
- content: this.insaDataset
- },
- ];
- }
-
- componentDidMount() {
- this.props.navigation.setOptions({
- headerRight: this.getAboutButton,
- });
- }
-
-
- /**
- * Callback used when closing the banner.
- * This hides the banner and saves to preferences to prevent it from reopening
- */
- onHideMascotDialog = () => {
- this.setState({mascotDialogVisible: false});
- AsyncStorageManager.getInstance().savePref(
- AsyncStorageManager.getInstance().preferences.servicesShowBanner.key,
- '0'
- );
- };
-
- getAboutButton = () =>
- <MaterialHeaderButtons>
- <Item title="information" iconName="information" onPress={this.onAboutPress}/>
- </MaterialHeaderButtons>;
-
- onAboutPress = () => this.props.navigation.navigate('amicale-contact');
-
- /**
- * Gets the list title image for the list.
- *
- * If the source is a string, we are using an icon.
- * If the source is a number, we are using an internal image.
- *
- * @param props Props to pass to the component
- * @param source The source image to display. Can be a string for icons or a number for local images
- * @returns {*}
- */
- getListTitleImage(props, source: string | number) {
- if (typeof source === "number")
- return <Avatar.Image
- {...props}
- size={48}
- source={source}
- style={{backgroundColor: 'transparent'}}
- />
- else
- return <Avatar.Icon
- {...props}
- size={48}
- icon={source}
- color={this.props.theme.colors.primary}
- style={{backgroundColor: 'transparent'}}
- />
- }
-
- /**
- * Redirects to the given route or to the login screen if user is not logged in.
- *
- * @param route The route to navigate to
- */
- onAmicaleServicePress(route: string) {
- if (ConnectionManager.getInstance().isLoggedIn())
- this.props.navigation.navigate(route);
- else
- this.props.navigation.navigate("login", {nextScreen: route});
- }
-
- /**
- * A list item showing a list of available services for the current category
- *
- * @param item
- * @returns {*}
- */
- renderItem = ({item}: { item: listItem }) => {
- return (
- <TouchableRipple
- style={{
- margin: 5,
- marginBottom: 20,
- }}
- onPress={() => this.props.navigation.navigate("services-section", {data: item})}
- >
- <View>
- <Card.Title
- title={item.title}
- left={(props) => this.getListTitleImage(props, item.image)}
- right={(props) => <List.Icon {...props} icon="chevron-right"/>}
- />
- <CardList
- dataset={item.content}
- isHorizontal={true}
- />
- </View>
- </TouchableRipple>
-
- );
- };
-
- keyExtractor = (item: listItem) => {
- return item.title;
- }
-
- render() {
- const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
- return (
- <View>
- <Animated.FlatList
- data={this.finalDataset}
- renderItem={this.renderItem}
- keyExtractor={this.keyExtractor}
- onScroll={onScroll}
- contentContainerStyle={{
- paddingTop: containerPaddingTop,
- paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
- }}
- scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
- ItemSeparatorComponent={() => <Divider/>}
- />
- <MascotPopup
- visible={this.state.mascotDialogVisible}
- title={i18n.t("servicesScreen.mascot.title")}
- message={i18n.t("servicesScreen.mascot.message")}
- icon={"calendar-range"}
- buttons={{
- action: null,
- cancel: {
- message: i18n.t("servicesScreen.mascot.button"),
- icon: "check",
- onPress: this.onHideMascotDialog,
- }
- }}
- emotion={MASCOT_STYLE.WINK}
- />
- </View>
- );
- }
- }
-
- export default withCollapsible(withTheme(ServicesScreen));
|