Added ability to set a custom dashboard via settings

locales/en.json

@@ -6,7 +6,8 @@
       "categories": {
         "amicale": "The Amicale",
         "students": "Student services",
-        "insa": "INSA services"
+        "insa": "INSA services",
+        "special": "Proxiwash"
       },
       "descriptions": {
         "clubs": "See info about your favorite club and discover new ones",
@@ -23,7 +24,9 @@
         "mails": "Check your INSA mails",
         "ent": "See your grades",
         "insaAccount": "See your information and change your password",
-        "equipment": "Book a BBQ or other equipment"
+        "equipment": "Book a BBQ or other equipment",
+        "washers": "Number of available washers",
+        "dryers": "Number of available dryers"
       },
       "mascotDialog": {
         "title": "So handy!",
@@ -320,9 +323,16 @@
       "nightModeAutoSub": "Follows the mode chosen by your system",
       "startScreen": "Start Screen",
       "startScreenSub": "Select which screen to start the app on",
+      "dashboard": "Dashboard",
+      "dashboardSub": "Edit what services to display on the dashboard",
       "proxiwashNotifReminder": "Machine running reminder",
       "proxiwashNotifReminderSub": "How many minutes before",
-      "information": "Information"
+      "information": "Information",
+      "dashboardEdit": {
+        "title": "Edit dashboard",
+        "message": "The five items above represent your dashboard.\nYou can replace one of its services by selecting it, and then by clicking on the desired new service in the list bellow.",
+        "undo": "Undo changes"
+      }
     },
     "about": {
       "title": "About",

locales/fr.json

@@ -6,7 +6,8 @@
       "categories": {
         "amicale": "L' Amicale",
         "students": "Services étudiants",
-        "insa": "Services de l'INSA"
+        "insa": "Services de l'INSA",
+        "special": "Proxiwash"
       },
       "descriptions": {
         "clubs": "Tous les clubs et leurs infos",
@@ -23,7 +24,9 @@
         "mails": "Vérifie tes mails INSA",
         "ent": "Retrouve tes notes",
         "insaAccount": "Accède à tes infos INSA et modifie ton mot de passe",
-        "equipment": "Réserve un BBQ ou autre matériel"
+        "equipment": "Réserve un BBQ ou autre matériel",
+        "washers": "Nombre de lave-Linges disponibles",
+        "dryers": "Nombre de sèche-Linges disponibles"
       },
       "mascotDialog": {
         "title": "Un peu perdu ?",
@@ -319,9 +322,16 @@
       "nightModeAutoSub": "Suit le mode sélectionné par le système",
       "startScreen": "Écran de démarrage",
       "startScreenSub": "Choisis l'écran sur lequel démarre Campus",
+      "dashboard": "Dashboard",
+      "dashboardSub": "Choisis les services à afficher sur la dashboard",
       "proxiwashNotifReminder": "Rappel de machine en cours",
       "proxiwashNotifReminderSub": "Combien de minutes avant",
-      "information": "Informations"
+      "information": "Informations",
+      "dashboardEdit": {
+        "title": "Modifier la dashboard",
+        "message": "Les 5 icones ci-dessus représentent ta dashboard.\nTu peux remplacer un de ses services en cliquant dessus, puis en sélectionnant le nouveau service de ton choix dans la liste ci-dessous.",
+        "undo": "Annuler les changements"
+      }
     },
     "about": {
       "title": "À Propos",

src/components/Lists/DashboardEdit/DashboardEditAccordion.js

@@ -0,0 +1,72 @@
+// @flow
+
+import * as React from 'react';
+import {withTheme} from 'react-native-paper';
+import {FlatList, Image, View} from "react-native";
+import DashboardEditItem from "./DashboardEditItem";
+import AnimatedAccordion from "../../Animations/AnimatedAccordion";
+import type {ServiceCategory, ServiceItem} from "../../../managers/ServicesManager";
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
+import type {CustomTheme} from "../../../managers/ThemeManager";
+
+type Props = {
+    item: ServiceCategory,
+    activeDashboard: Array<string>,
+    onPress: (service: ServiceItem) => void,
+    theme: CustomTheme,
+}
+
+const LIST_ITEM_HEIGHT = 64;
+
+class DashboardEditAccordion extends React.Component<Props> {
+
+    renderItem = ({item}: { item: ServiceItem }) => {
+        return (
+            <DashboardEditItem
+                height={LIST_ITEM_HEIGHT}
+                item={item}
+                isActive={this.props.activeDashboard.includes(item.key)}
+                onPress={() => this.props.onPress(item)}/>
+        );
+    }
+
+    itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
+
+    render() {
+        const item = this.props.item;
+        return (
+            <View>
+                <AnimatedAccordion
+                    title={item.title}
+                    left={props => typeof item.image === "number"
+                        ? <Image
+                            {...props}
+                            source={item.image}
+                            style={{
+                                width: 40,
+                                height: 40
+                            }}
+                        />
+                        : <MaterialCommunityIcons
+                            //$FlowFixMe
+                            name={item.image}
+                            color={this.props.theme.colors.primary}
+                            size={40}/>}
+                >
+                    {/*$FlowFixMe*/}
+                    <FlatList
+                        data={item.content}
+                        extraData={this.props.activeDashboard.toString()}
+                        renderItem={this.renderItem}
+                        listKey={item.key}
+                        // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
+                        getItemLayout={this.itemLayout}
+                        removeClippedSubviews={true}
+                    />
+                </AnimatedAccordion>
+            </View>
+        );
+    }
+}
+
+export default withTheme(DashboardEditAccordion)

src/components/Lists/DashboardEdit/DashboardEditItem.js

@@ -0,0 +1,55 @@
+// @flow
+
+import * as React from 'react';
+import {Image} from "react-native";
+import {List, withTheme} from 'react-native-paper';
+import type {CustomTheme} from "../../../managers/ThemeManager";
+import type {ServiceItem} from "../../../managers/ServicesManager";
+
+type Props = {
+    item: ServiceItem,
+    isActive: boolean,
+    height: number,
+    onPress: () => void,
+    theme: CustomTheme,
+}
+
+class DashboardEditItem extends React.Component<Props> {
+
+    shouldComponentUpdate(nextProps: Props) {
+        return (nextProps.isActive !== this.props.isActive);
+    }
+
+    render() {
+        return (
+            <List.Item
+                title={this.props.item.title}
+                description={this.props.item.subtitle}
+                onPress={this.props.isActive ? null : this.props.onPress}
+                left={props =>
+                    <Image
+                        {...props}
+                        source={{uri: this.props.item.image}}
+                        style={{
+                            width: 40,
+                            height: 40
+                        }}
+                    />}
+                right={props => this.props.isActive
+                    ? <List.Icon
+                        {...props}
+                        icon={"check"}
+                        color={this.props.theme.colors.success}
+                    /> : null}
+                style={{
+                    height: this.props.height,
+                    justifyContent: 'center',
+                    paddingLeft: 30,
+                    backgroundColor: this.props.isActive ? this.props.theme.colors.proxiwashFinishedColor : "transparent"
+                }}
+            />
+        );
+    }
+}
+
+export default withTheme(DashboardEditItem);

src/components/Lists/DashboardEdit/DashboardEditPreviewItem.js

@@ -0,0 +1,58 @@
+// @flow
+
+import * as React from 'react';
+import {TouchableRipple, withTheme} from 'react-native-paper';
+import {Dimensions, Image, View} from "react-native";
+import type {CustomTheme} from "../../../managers/ThemeManager";
+
+type Props = {
+    image: string,
+    isActive: boolean,
+    onPress: () => void,
+    theme: CustomTheme,
+};
+
+/**
+ * Component used to render a small dashboard item
+ */
+class DashboardEditPreviewItem extends React.Component<Props> {
+
+    itemSize: number;
+
+    constructor(props: Props) {
+        super(props);
+        this.itemSize = Dimensions.get('window').width / 8;
+    }
+
+    render() {
+        const props = this.props;
+        return (
+            <TouchableRipple
+                onPress={this.props.onPress}
+                borderless={true}
+                style={{
+                    marginLeft: 5,
+                    marginRight: 5,
+                    backgroundColor: this.props.isActive ? this.props.theme.colors.textDisabled : "transparent",
+                    borderRadius: 5
+                }}
+            >
+                <View style={{
+                    width: this.itemSize,
+                    height: this.itemSize,
+                }}>
+                    <Image
+                        source={{uri: props.image}}
+                        style={{
+                            width: "100%",
+                            height: "100%",
+                        }}
+                    />
+                </View>
+            </TouchableRipple>
+        );
+    }
+
+}
+
+export default withTheme(DashboardEditPreviewItem)

src/managers/ServicesManager.js

@@ -31,6 +31,8 @@ const ACCOUNT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Account
 const WASHER_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ProxiwashLaveLinge.png";
 const DRYER_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ProxiwashSecheLinge.png";
 
+const AMICALE_LOGO = require("../../assets/amicale.png");
+
 export const SERVICES_KEY = {
     CLUBS: "clubs",
     PROFILE: "profile",
@@ -51,6 +53,14 @@ export const SERVICES_KEY = {
     DRYERS: "dryers",
 }
 
+export const SERVICES_CATEGORIES_KEY = {
+    AMICALE: "amicale",
+    STUDENTS: "students",
+    INSA: "insa",
+    SPECIAL: "special",
+}
+
+
 export type ServiceItem = {
     key: string,
     title: string,
@@ -60,6 +70,15 @@ export type ServiceItem = {
     badgeFunction?: (dashboard: fullDashboard) => number,
 }
 
+export type ServiceCategory = {
+    key: string,
+    title: string,
+    subtitle: string,
+    image: string | number,
+    content: Array<ServiceItem>
+}
+
+
 export default class ServicesManager {
 
     navigation: StackNavigationProp;
@@ -69,6 +88,8 @@ export default class ServicesManager {
     insaDataset: Array<ServiceItem>;
     specialDataset: Array<ServiceItem>;
 
+    categoriesDataset: Array<ServiceCategory>;
+
     constructor(nav: StackNavigationProp) {
         this.navigation = nav;
         this.amicaleDataset = [
@@ -213,7 +234,7 @@ export default class ServicesManager {
             {
                 key: SERVICES_KEY.WASHERS,
                 title: i18n.t('screens.proxiwash.washers'),
-                subtitle: i18n.t('screens.proxiwash.title'), // TODO add description
+                subtitle: i18n.t('screens.services.descriptions.washers'),
                 image: WASHER_IMAGE,
                 onPress: () => nav.navigate("proxiwash"),
                 badgeFunction: (dashboard: fullDashboard) => dashboard.available_washers
@@ -221,12 +242,42 @@ export default class ServicesManager {
             {
                 key: SERVICES_KEY.DRYERS,
                 title: i18n.t('screens.proxiwash.dryers'),
-                subtitle: i18n.t('screens.proxiwash.title'), // TODO add description
+                subtitle: i18n.t('screens.services.descriptions.washers'),
                 image: DRYER_IMAGE,
                 onPress: () => nav.navigate("proxiwash"),
                 badgeFunction: (dashboard: fullDashboard) => dashboard.available_dryers
             }
-        ]
+        ];
+        this.categoriesDataset = [
+            {
+                key: SERVICES_CATEGORIES_KEY.AMICALE,
+                title: i18n.t("screens.services.categories.amicale"),
+                subtitle: i18n.t("screens.services.more"),
+                image: AMICALE_LOGO,
+                content: this.amicaleDataset
+            },
+            {
+                key: SERVICES_CATEGORIES_KEY.STUDENTS,
+                title: i18n.t("screens.services.categories.students"),
+                subtitle: i18n.t("screens.services.more"),
+                image: 'account-group',
+                content: this.studentsDataset
+            },
+            {
+                key: SERVICES_CATEGORIES_KEY.INSA,
+                title: i18n.t("screens.services.categories.insa"),
+                subtitle: i18n.t("screens.services.more"),
+                image: 'school',
+                content: this.insaDataset
+            },
+            {
+                key: SERVICES_CATEGORIES_KEY.SPECIAL,
+                title: i18n.t("screens.services.categories.special"),
+                subtitle: i18n.t("screens.services.categories.special"),
+                image: 'star',
+                content: this.specialDataset
+            },
+        ];
     }
 
     /**
@@ -249,7 +300,7 @@ export default class ServicesManager {
      * @param sourceList The item list to use as source
      * @returns {[]}
      */
-    getStrippedList(idList: Array<string>, sourceList: Array<ServiceItem>) {
+    getStrippedList(idList: Array<string>, sourceList: Array<{key: string, [key: string]: any}>) {
         let newArray = [];
         for (let i = 0; i < sourceList.length; i++) {
             const item = sourceList[i];
@@ -311,4 +362,17 @@ export default class ServicesManager {
             return this.specialDataset;
     }
 
+    /**
+     * Gets all services sorted by category
+     *
+     * @param excludedItems Ids of categories to exclude from the returned list
+     * @returns {Array<ServiceCategory>}
+     */
+    getCategories(excludedItems?: Array<string>) {
+        if (excludedItems != null)
+            return this.getStrippedList(excludedItems, this.categoriesDataset)
+        else
+            return this.categoriesDataset;
+    }
+
 }

src/navigation/MainNavigator.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import SettingsScreen from '../screens/Other/SettingsScreen';
+import SettingsScreen from '../screens/Other/Settings/SettingsScreen';
 import AboutScreen from '../screens/About/AboutScreen';
 import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
 import DebugScreen from '../screens/About/DebugScreen';
@@ -26,6 +26,7 @@ import WebsiteScreen from "../screens/Services/WebsiteScreen";
 import EquipmentScreen from "../screens/Amicale/Equipment/EquipmentListScreen";
 import EquipmentLendScreen from "../screens/Amicale/Equipment/EquipmentRentScreen";
 import EquipmentConfirmScreen from "../screens/Amicale/Equipment/EquipmentConfirmScreen";
+import DashboardEditScreen from "../screens/Other/Settings/DashboardEditScreen";
 
 const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
 
@@ -62,6 +63,13 @@ function MainStackComponent(props: { createTabNavigator: () => React.Node }) {
                     title: i18n.t('screens.settings.title'),
                 }}
             />
+            <MainStack.Screen
+                name="dashboard-edit"
+                component={DashboardEditScreen}
+                options={{
+                    title: i18n.t('screens.settings.dashboardEdit.title'),
+                }}
+            />
             <MainStack.Screen
                 name="about"
                 component={AboutScreen}

src/screens/Other/Settings/DashboardEditScreen.js

@@ -0,0 +1,148 @@
+// @flow
+
+import * as React from 'react';
+import {StackNavigationProp} from "@react-navigation/stack";
+import type {CustomTheme} from "../../../managers/ThemeManager";
+import {Button, Paragraph, withTheme} from "react-native-paper";
+import type {ServiceCategory, ServiceItem} from "../../../managers/ServicesManager";
+import DashboardManager from "../../../managers/DashboardManager";
+import DashboardItem from "../../../components/Home/EventDashboardItem";
+import {FlatList} from "react-native";
+import {View} from "react-native-animatable";
+import DashboardEditAccordion from "../../../components/Lists/DashboardEdit/DashboardEditAccordion";
+import DashboardEditPreviewItem from "../../../components/Lists/DashboardEdit/DashboardEditPreviewItem";
+import AsyncStorageManager from "../../../managers/AsyncStorageManager";
+import i18n from "i18n-js";
+
+type Props = {
+    navigation: StackNavigationProp,
+    theme: CustomTheme,
+};
+
+type State = {
+    currentDashboard: Array<ServiceItem>,
+    currentDashboardIdList: Array<string>,
+    activeItem: number,
+};
+
+/**
+ * Class defining the Settings screen. This screen shows controls to modify app preferences.
+ */
+class DashboardEditScreen extends React.Component<Props, State> {
+
+    content: Array<ServiceCategory>;
+    initialDashboard: Array<ServiceItem>;
+    initialDashboardIdList: Array<string>;
+
+    constructor(props: Props) {
+        super(props);
+        let dashboardManager = new DashboardManager(this.props.navigation);
+        this.initialDashboardIdList = JSON.parse(AsyncStorageManager.getInstance().preferences.dashboardItems.current);
+        this.initialDashboard = dashboardManager.getCurrentDashboard();
+        this.state = {
+            currentDashboard: [...this.initialDashboard],
+            currentDashboardIdList: [...this.initialDashboardIdList],
+            activeItem: 0,
+        }
+        this.content = dashboardManager.getCategories();
+    }
+
+    dashboardRowRenderItem = ({item, index}: { item: DashboardItem, index: number }) => {
+        return (
+            <DashboardEditPreviewItem
+                image={item.image}
+                onPress={() => this.setState({activeItem: index})}
+                isActive={this.state.activeItem === index}
+            />
+        );
+    };
+
+    getDashboard(content: Array<DashboardItem>) {
+        return (
+            <FlatList
+                data={content}
+                extraData={this.state}
+                renderItem={this.dashboardRowRenderItem}
+                horizontal={true}
+                contentContainerStyle={{
+                    marginLeft: 'auto',
+                    marginRight: 'auto',
+                    marginTop: 5,
+                }}
+            />);
+    }
+
+    renderItem = ({item}: { item: ServiceCategory }) => {
+        return (
+            <DashboardEditAccordion
+                item={item}
+                onPress={this.updateDashboard}
+                activeDashboard={this.state.currentDashboardIdList}
+            />
+        );
+    };
+
+    updateDashboard = (service: ServiceItem) => {
+        let currentDashboard = this.state.currentDashboard;
+        let currentDashboardIdList = this.state.currentDashboardIdList;
+        currentDashboard[this.state.activeItem] = service;
+        currentDashboardIdList[this.state.activeItem] = service.key;
+        this.setState({
+            currentDashboard: currentDashboard,
+            currentDashboardIdList: currentDashboardIdList,
+        });
+        AsyncStorageManager.getInstance().savePref(
+            AsyncStorageManager.getInstance().preferences.dashboardItems.key,
+            JSON.stringify(currentDashboardIdList)
+        );
+    }
+
+    undoDashboard= () => {
+        this.setState({
+            currentDashboard: [...this.initialDashboard],
+            currentDashboardIdList: [...this.initialDashboardIdList]
+        });
+        AsyncStorageManager.getInstance().savePref(
+            AsyncStorageManager.getInstance().preferences.dashboardItems.key,
+            JSON.stringify(this.initialDashboardIdList)
+        );
+    }
+
+
+    render() {
+        return (
+            <View style={{flex: 1}}>
+                <View style={{
+                    padding: 5
+                }}>
+                    <Button
+                        mode={"contained"}
+                        onPress={this.undoDashboard}
+                        style={{
+                            marginLeft: "auto",
+                            marginRight: "auto",
+                        }}
+                    >
+                        {i18n.t("screens.settings.dashboardEdit.undo")}
+                    </Button>
+                    <View style={{
+                        height: 50
+                    }}>
+                        {this.getDashboard(this.state.currentDashboard)}
+                    </View>
+
+                </View>
+                    <FlatList
+                        data={this.content}
+                        renderItem={this.renderItem}
+                        ListHeaderComponent={<Paragraph>{i18n.t("screens.settings.dashboardEdit.message")}</Paragraph>}
+                        style={{
+                        }}
+                    />
+            </View>
+        );
+    }
+
+}
+
+export default withTheme(DashboardEditScreen);

src/screens/Other/Settings/SettingsScreen.js

@@ -2,13 +2,13 @@
 
 import * as React from 'react';
 import {ScrollView, View} from "react-native";
-import type {CustomTheme} from "../../managers/ThemeManager";
+import type {CustomTheme} from "../../../managers/ThemeManager";
-import ThemeManager from '../../managers/ThemeManager';
+import ThemeManager from '../../../managers/ThemeManager';
 import i18n from "i18n-js";
-import AsyncStorageManager from "../../managers/AsyncStorageManager";
+import AsyncStorageManager from "../../../managers/AsyncStorageManager";
 import {Card, List, Switch, ToggleButton, withTheme} from 'react-native-paper';
 import {Appearance} from "react-native-appearance";
-import CustomSlider from "../../components/Overrides/CustomSlider";
+import CustomSlider from "../../../components/Overrides/CustomSlider";
 import {StackNavigationProp} from "@react-navigation/stack";
 
 type Props = {
@@ -203,6 +203,12 @@ class SettingsScreen extends React.Component<Props, State> {
                             left={props => <List.Icon {...props} icon="power"/>}
                         />
                         {this.getStartScreenPicker()}
+                        <List.Item
+                            title={i18n.t('screens.settings.dashboard')}
+                            description={i18n.t('screens.settings.dashboardSub')}
+                            onPress={() => this.props.navigation.navigate("dashboard-edit")}
+                            left={props => <List.Icon {...props} icon="view-dashboard"/>}
+                        />
                     </List.Section>
                 </Card>
                 <Card style={{margin: 5}}>

src/screens/Services/ServicesScreen.js

@@ -16,7 +16,7 @@ import {StackNavigationProp} from "@react-navigation/stack";
 import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
 import MascotPopup from "../../components/Mascot/MascotPopup";
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
-import ServicesManager from "../../managers/ServicesManager";
+import ServicesManager, {SERVICES_CATEGORIES_KEY} from "../../managers/ServicesManager";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -36,14 +36,9 @@ export type listItem = {
     content: cardList,
 }
 
-const AMICALE_LOGO = require("../../../assets/amicale.png");
 
 class ServicesScreen extends React.Component<Props, State> {
 
-    amicaleDataset: cardList;
-    studentsDataset: cardList;
-    insaDataset: cardList;
-
     finalDataset: Array<listItem>
 
     state = {
@@ -53,29 +48,7 @@ class ServicesScreen extends React.Component<Props, State> {
     constructor(props) {
         super(props);
         const services = new ServicesManager(props.navigation);
-        this.amicaleDataset = services.getAmicaleServices();
+        this.finalDataset = services.getCategories([SERVICES_CATEGORIES_KEY.SPECIAL])
-        this.studentsDataset = services.getStudentServices();
-        this.insaDataset = services.getINSAServices();
-        this.finalDataset = [
-            {
-                title: i18n.t("screens.services.categories.amicale"),
-                description: i18n.t("screens.services.more"),
-                image: AMICALE_LOGO,
-                content: this.amicaleDataset
-            },
-            {
-                title: i18n.t("screens.services.categories.students"),
-                description: i18n.t("screens.services.more"),
-                image: 'account-group',
-                content: this.studentsDataset
-            },
-            {
-                title: i18n.t("screens.services.categories.insa"),
-                description: i18n.t("screens.services.more"),
-                image: 'school',
-                content: this.insaDataset
-            },
-        ];
     }
 
     componentDidMount() {