@olea-bps/views 1.0.0

package/Callmanager/index.js

@@ -0,0 +1,148 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState, useMemo } from 'react';
+import {
+    SafeAreaView,
+    StyleSheet,
+    View,
+    Switch,
+    Alert,
+    RefreshControl,
+} from 'react-native';
+
+import { connect } from 'react-redux'
+import { useTheme, Text, Button } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+
+import { useParallelCalls } from '@olea-bps/context-callmanager';
+import { useUser } from '@olea-bps/context-user';
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+
+import componentStyles from './styles';
+
+export default function CallManagerView(props) {
+    const componentName = CallManagerView.name;
+    const theme = useTheme();
+    const themeStyles = theme?.themeStyles;
+
+    const { t } = useTranslation();
+
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    )
+
+    const [user, login, logout] = useUser();
+    const [parallelCalls, refreshParallelCalls, changeParallelCall] = useParallelCalls();
+
+    const [remoteDestinationProfilesRefreshing, setRemoteDestinationProfilesRefreshing] = useState(false);
+
+    return (
+        <SafeAreaView style={themeStyles.appSafeAreaContainer}>
+            <AppbarComponent {...props}
+                title={t('menu:titles.callmanager')}
+            />
+            <View style={themeStyles.container}>
+                {
+                    // Wenn ein Nutzer in der App angemeldet ist, werden dessen Parralelrufe angezeigt. Ansonsten wird der Nutzer zum Loggin aufgefordert.
+                    user
+                        ? <RefreshControl
+                            refreshing={remoteDestinationProfilesRefreshing}
+                            onRefresh={() => {
+                                setRemoteDestinationProfilesRefreshing(true);
+                                refreshParallelCalls()
+                                    .finally(() => setRemoteDestinationProfilesRefreshing(false));
+                            }}
+                        >
+                            <Text>
+                                {t('callmanager:userInfo', { userName: user.name, userPhoneNumber: user.phone_number })}
+                            </Text>
+                            {
+                                parallelCalls?.map?.(
+                                    parallelCall => {
+                                        const isActive = parallelCall?.enableMobileConnect;
+
+                                        return (
+                                            <View
+                                                key={parallelCall?.destination}
+                                            >
+                                                <Text>
+                                                    {parallelCall?.destination ?? t('callmanager:numberNotDisplayable')}
+                                                </Text>
+                                                <Switch
+                                                    value={isActive}
+                                                    onValueChange={
+                                                        value =>
+                                                            changeParallelCall(parallelCall?.destination, { enableMobileConnect: value })
+                                                                .then(() => refreshParallelCalls())
+                                                    }
+                                                />
+                                            </View >
+                                        )
+                                    }
+                                )
+                            }
+                            <Button
+                                onPress={() => Alert.alert(
+                                    t('callmanager:logout'),
+                                    t('callmanager:logoutConfirmation'),
+                                    [
+                                        {
+                                            text: t('callmanager:logoutOkButton'),
+                                            onPress: () => logout?.(),
+                                        },
+                                        {
+                                            text: t('callmanager:logoutNoButton'),
+                                            isPreferred: true,
+                                        }
+                                    ]
+                                )}
+                            >
+                                {t('callmanager:logout')}
+                            </Button>
+                        </RefreshControl>
+                        : <>
+                            <Text>
+                                {t('callmanager:notLoggedIn')}
+                            </Text>
+                            <Button
+                                onPress={
+                                    () =>
+                                        login
+                                            ? login()
+                                                .catch(
+                                                    reason => {
+                                                        Alert.alert(
+                                                            t('callmanager:loginFailed'),
+                                                            t('callmanager:tryLoginAgain'),
+                                                        );
+                                                        console.debug(componentName, ':', 'login failed', ':', reason);
+                                                    }
+                                                )
+                                            : Alert.alert(
+                                                t('callmanager:connectionError'),
+                                                t('callmanager:connectionErrorTryLoginAgain'),
+                                            )
+                                }
+                            >
+                                {t('callmanager:logginButton')}
+                            </Button>
+                        </>
+                }
+            </View>
+        </SafeAreaView >
+    )
+}

package/Callmanager/styles.js

@@ -0,0 +1,62 @@
+export default function(theme) {
+    return {
+      activity: {
+        padding: 20
+      },
+      arrowIcon: {
+        marginStart: 'auto',
+        marginEnd: 10,
+      },
+      companyCity:{
+        fontSize: theme.fontSizes.s,
+        paddingTop: theme.paddings.xsmall,
+        color: theme.colors.secondaryText
+      },
+      container: {
+          flex: 1,
+          backgroundColor: theme.colors.background,
+      },
+      containerErrorMsg: {
+        flex: 1,
+        justifyContent: 'center',
+        alignContent: 'center',
+        alignItems: 'center',
+        margin: theme.paddings.default,
+      },
+      content: {
+        backgroundColor: theme.colors.background,
+        flex: 1
+      },
+      date:{
+        fontSize: theme.fontSizes.s,
+        paddingTop: theme.paddings.xsmall
+      },
+      header: {
+        backgroundColor: theme.colors.background,
+        padding: 10,
+        flexDirection: "row",
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+      },
+      headerText: {
+        fontSize: theme.fontSizes.l,
+        ...theme.fonts.light,
+        marginTop: 10,
+        marginBottom: 10
+      },
+      innerContainer: {
+        padding: 40,
+        marginTop: 200
+      },
+      title:{
+        fontSize: theme.fontSizes.xxl,
+        color: theme.colors.jobsTitleColor
+      },
+      titleNoJobs:{
+        fontSize: theme.fontSizes.xxl,
+        color: theme.colors.jobsTitleColor,
+        textAlign: 'center',
+        marginBottom: theme.paddings.default
+      },  
+    }
+};

package/Canteens/index.js

@@ -0,0 +1,383 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState, useEffect, useMemo } from 'react';
+import {
+    View,
+    ActivityIndicator,
+    SafeAreaView,
+    StyleSheet,
+    Text
+} from 'react-native';
+
+import { useTheme } from 'react-native-paper';
+import { AccordionList } from 'accordion-collapse-react-native';
+import { TabView, TabBar, TabBarItem } from 'react-native-tab-view';
+import { useTranslation } from 'react-i18next';
+import { CommonActions, useNavigation, useRoute } from '@react-navigation/native';
+
+import { DateTime, Duration } from 'luxon';
+
+import moment from 'moment';
+import 'moment/locale/de';
+
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+import IconsOpenasist from '@olea-bps/icons-openasist';
+import { MensaMenu } from '@olea-bps/components';
+import { useCanteen, useCanteens, useFilteredMenu } from '@olea-bps/context-canteen';
+import { useLanguage } from '@olea-bps/core';
+
+import componentStyles from './styles';
+
+/**
+ * Generiert die Tabs/Routen für die Mensa-Tabview
+ *
+ * @param {DateTime} begin Tag mit dem die Generierung der Tabs/Routen beginnen soll
+ * @param {Number} daysToRender Anzahl der Tage, die gerendert werden sollen
+ * @param {string} language Sprache, welche für die Datumsformatierung der Tabs verwendet werden soll
+ * @param {Number[]} disabledWeekdays Liste an Wochentagen welche nicht mit in die Tabs aufgenommen werden sollen im ISO Wochentagsnummer-Format
+ * @returns
+ */
+function generateDayRoutes(begin, daysToRender, language, disabledWeekdays = []) {
+    return Array?.from(
+        { length: daysToRender },
+        (_, index) => {
+            const currentDay = begin.setLocale(language).plus({ days: index }).startOf('day');
+            const isoDayDate = currentDay?.toISODate();
+            return {
+                key: isoDayDate,
+                date: currentDay,
+            }
+        }
+    )?.filter(dayRoute => !disabledWeekdays?.includes(dayRoute?.date?.weekday));
+}
+
+function CanteensAccordionHeader({ canteenId, menuDate, isExpanded, styles }) {
+    const { t } = useTranslation();
+    const [canteen] = useCanteen(canteenId);
+    const [, refreshMenu, mealAmount, filteredMealAmount, activeSelections] = useFilteredMenu(canteenId, menuDate);
+    const { themeStyles, colors } = useTheme();
+
+    useEffect(
+        () => {
+            refreshMenu();
+        },
+        [canteenId, menuDate]
+    )
+
+    return (
+        <View style={styles.header}>
+            <View style={[themeStyles.cardLeftIcon, { marginStart: 5 }]}>
+                {
+                    canteen?.type
+                        ? <IconsOpenasist icon={((canteen.type === 'cafeteria') ? 'coffee' : 'mensa')} size={25} color={colors.icon} />
+                        : null
+                }
+            </View>
+            <View>
+                <Text style={styles.headerText}>{canteen?.title ?? `Fehler: Mensa mit ID ${canteenId} kann nicht angezeigt werden. Bitte melden!`}</Text>
+                {
+                    Array.isArray(activeSelections) && activeSelections.length > 0
+                        ? <Text>
+                            {
+                                t(
+                                    'canteen:amountOfFilteredMeals',
+                                    { filteredMealAmount, mealAmount, filters: activeSelections.map(favoriteSelection => t(favoriteSelection.labelKey)) }
+                                )
+                            }
+                        </Text>
+                        : null
+                }
+            </View>
+            <View style={styles.arrowIcon}>
+                <IconsOpenasist icon={isExpanded ? 'up' : 'down'} size={20} color={colors.grayLight5} />
+            </View>
+        </View>
+    );
+}
+
+/**
+ * Akkordion, welches die Mensen einer Universität anzeigt.
+ * Es werden automatisch die Mensen aus dem Mensa-Kontext geladen.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} props.menuDate - Datum des Essensangebotes, welches als String im ISO 8601 Format zu übergeben ist.
+ * @param {string} [props.expandedCanteenId] - ID der Mensa, dessen Akkordion-Element geöffent sein soll.
+ * @param {JSX.Element} [props.CanteensEmptyComponent] - JSX, welches angezeigt werden soll, wenn keine Mensen angezeigt werden können.
+ * @param {(expandedCanteenId: string) => void} [props.onCanteenSelect] - Event welches ausgelöst wird, wenn der Nutzer ein Akkordion-Element öffnet oder schließt.
+ * @returns {JSX.Element}
+ *
+ * @example
+ * const [activeCanteen, setActiveCanteen] = useState(null);
+ *
+ * return (
+ *     <CanteensAccordion
+ *         menuDate={'01-12-2020'}
+ *         expandedCanteenId={activeCanteen}
+ *         onCanteenSelect={
+ *             expandedCanteenId => setActiveCanteen(expandedCanteenId)
+ *         }
+ *         CanteensEmptyComponent={
+ *             <Text>Keine Mensa gefunden</Text>
+ *         }
+ *     />
+ * )
+ */
+function CanteensAccordion({ expandedCanteenId, menuDate, onCanteenSelect, CanteensEmptyComponent }) {
+
+    const [canteens] = useCanteens();
+    const canteensIds = useMemo(
+        () => Object.keys(canteens),
+        [canteens]
+    )
+    const theme = useTheme();
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    );
+
+    return (
+        <AccordionList
+            list={canteensIds}
+            expandedKey={expandedCanteenId}
+            onToggle={
+                // Wenn eine Mensa-Akkordion-Element vim Nutzer angeklickt wird, soll dessen ID bzw. Key an die onCanteenSelect-Funktion gegeben werden.
+                // Wird das Akkordion-Element geschlossen, wird null übergeben.
+                // Somit kann eine Eltern-Komponente die Kontrolle über die geöffenten Akkordion-Elemente übernehmen (siehe expandedCanteenId).
+                (key, index, isExpanded) => onCanteenSelect?.(
+                    // Wenn isExpanded == false, wurde die Mensa gerade geschlossen, ansonsten wurde die Mensa vom Nutzer geöffnet.
+                    isExpanded
+                        // Mensa-Akkordion-Element wurde geöffnet. Es wird der Mensa-Key zurückgeben.
+                        ? key
+                        // Mensa-Akkordion-Element wurde geschlossen. Es wird kein Mensa-Key zurückgeben.
+                        : null
+                )
+            }
+            keyExtractor={(canteenId, index) => canteenId}
+            header={
+                (canteenId, index, isExpanded) =>
+                    <CanteensAccordionHeader
+                        canteenId={canteenId}
+                        menuDate={menuDate}
+                        isExpanded={isExpanded}
+                        styles={styles}
+                    />
+            }
+            body={
+                canteenId =>
+                    < View style={styles.content} >
+                        <MensaMenu
+                            canteenId={canteenId}
+                            menuDate={menuDate}
+                        />
+                    </View >
+            }
+            ListEmptyComponent={CanteensEmptyComponent}
+        />
+    )
+}
+
+/**
+ * Canteens View
+ *
+ * In this view the tabbar and the scenes for the different canteens for each day are rendered
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+
+
+//TODO:
+//  - remove unused dependencies
+//  - add comments
+//  - recheck code
+//  - rename to view-canteens?
+
+export default function CanteensView(props) {
+    const language = useLanguage();
+    const route = useRoute();
+
+    const { style } = props;
+
+    const theme = useTheme();
+    const { themeStyles, colors } = theme;
+    const { t } = useTranslation();
+    const navigation = useNavigation();
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    );
+
+    const disabledWeekdays = theme?.appSettings?.modules?.canteen?.disabledWeekdays ?? [];
+    const weeksToRender = theme?.appSettings?.modules?.canteen?.weeksToRender ?? 1;
+    const daysToRender = Duration.fromDurationLike({ week: weeksToRender }).as('days');
+    const now = DateTime.now();
+    const begin = now.startOf('week');
+    const daysTabViewRoutes = generateDayRoutes(begin, daysToRender, language, disabledWeekdays);
+
+    // Derzeitiger Tag
+    const today = now.startOf('day');
+    // Suche nach dem Index des heutigen Tages oder den Tag danach. Kann kein Index gefunden werden, wird -1 genommen.
+    let initialDayTabIndex = daysTabViewRoutes.findIndex(dayTab => dayTab.date >= today);
+    // Wenn kein Index gefunden werden konnte, wird der letzte Tab genommen
+    // Wenn nur eine Woche gerendert wird und die Wochenendtagen ausgeschalten wird, wird kein folgetag gefunden.
+    initialDayTabIndex = initialDayTabIndex === -1 ? daysTabViewRoutes.length - 1 : initialDayTabIndex;
+
+    // Dieser State wird an alle Mensa-Akkordions in jedem Tages-Tab weitergeben, damit jedes Mensa-Akkordion die selbe Mensa öffen hat.
+    // Ein null-Wert, heißt dass alle Mensa-Akkordion-Elemente geschlossen sind.
+    const [activeCanteen, setActiveCanteen] = useState(null);
+
+    const [index, setIndex] = useState(initialDayTabIndex);
+
+    useEffect(() => {
+        const unsubscribeFocusListener = navigation.addListener('focus', () => {
+            _setActiveCanteenFromRoute();
+            _setTabViewIndexFromRoute();
+        });
+
+        // Cleanup function
+        return () => {
+            unsubscribeFocusListener();
+        };
+    }, [route.params?.canteenId]);
+
+    // Generieren der Tagestabs
+    const routes = useMemo(
+        () => generateDayRoutes(begin, daysToRender, language, disabledWeekdays),
+        [begin.toISODate(), daysToRender, language, disabledWeekdays]
+    )
+
+    /*
+     When a user presses a component meal item in dashboard she is taken to the Canteen Tab View.
+     To automatically expand the canteen with the pressed meal in the accordion, the canteen id is passed as a route param.
+     This method is responsible for setting the component state from the route param values which in turn controls the tab view.
+     (active canteen = the canteen which is expanded in accordion)
+     */
+    const _setActiveCanteenFromRoute = () => {
+        const canteenId = route?.params?.canteenId;
+        if (canteenId) {
+            setActiveCanteen(canteenId);
+
+            /*
+            After setting the active canteen state, the passedCanteenId needs to get set as undefined.
+            so the lastly collapsed canteen will stay collapsed after navigating through the main tab navigation
+            and not the canteen with the lastly passed id
+            */
+            navigation.dispatch(CommonActions.setParams({ canteenId: undefined }));
+        }
+    };
+
+    const _setTabViewIndexFromRoute = () => {
+        const menuDate = route.params?.menuDate;
+
+        if (!menuDate) return;
+
+        const menuDateIndex = routes.findIndex(route => route.date.toISODate() === menuDate);
+        setIndex(menuDateIndex);
+        navigation.dispatch(CommonActions.setParams({ menuDate: undefined }));
+    };
+
+    const _renderTabBar = props => {
+        return (
+            <TabBar
+                {...props}
+                scrollEnabled
+                style={themeStyles.tabs}
+                activeColor={themeStyles.tabs.activeColor}
+                inactiveColor={themeStyles.tabs.inactiveColor}
+                indicatorStyle={themeStyles.tabIndicator}
+                tabStyle={{ width: 'auto', paddingHorizontal: 20 }}
+                renderTabBarItem={({ route, navigationState, ...rest}) =>
+                  <TabBarItem
+                    {...rest}
+                    key={route.key}
+                    route={route}
+                    navigationState={navigationState}
+                    labelStyle={themeStyles.tab}
+                    activeColor={themeStyles.tabs.activeColor}
+                    inactiveColor={themeStyles.tabs.inactiveColor}
+                    // Die einbindung von moment.js zum Anzeigen des Wochentages sollte langfristig entfernt werden.
+                    // Funktioniert die Luxon funktionalität der Wochenanzeige nicht unter iOS datetime.toFormat('ccc')
+                    labelText={`${moment.unix(route.date.toUnixInteger()).locale(language).format('dd')}, ${route.date.toFormat('dd.LL.')}`}
+                    accessibilityLabel={route.date.toFormat('DDDD')}
+                  />
+                }
+            />
+        );
+    };
+
+    return (
+        <SafeAreaView style={[styles.container, themeStyles.appSafeAreaContainer]}>
+            <AppbarComponent
+                title={t('canteen:title')} {...props}
+            />
+            <View style={themeStyles.container}>
+                <TabView
+                    style={style}
+                    navigationState={{
+                        index,
+                        routes,
+
+                        // aktive Canteene wird mit übergeben, damit alle Tabs die selbe Mensa öffnen.
+                        activeCanteen,
+                    }}
+                    renderTabBar={_renderTabBar}
+                    onIndexChange={setIndex}
+                    renderScene={
+                        ({ route }) => {
+
+                            const menuDate = route?.key;
+
+                            return (
+                                <CanteensAccordion
+                                    menuDate={menuDate}
+                                    expandedCanteenId={activeCanteen}
+                                    onCanteenSelect={
+                                        // Wenn dieses Akkordion eine Mensa öffnet oder schließt, wird der activeCanteen statte mit der ID der Mensa aktualisiert.
+                                        // Falls der Nutzer die Mensa schließt und damit keine Mensa im Akkordion öffen ist, wird null in den State geschrieben.
+                                        expandedCanteenId => setActiveCanteen(expandedCanteenId)
+                                    }
+                                    CanteensEmptyComponent={
+                                        <View>
+                                            <Text>{t('canteen:notAvailable')}</Text>
+                                            <ActivityIndicator style={styles.activity} size='large' color={colors.loadingIndicator} />
+                                        </View>
+                                    }
+                                />
+                            )
+                        }
+                    }
+                    lazy
+                    lazyPreloadDistance={2}
+                    renderLazyPlaceholder={(route) =>
+                        <View style={styles.centerContainer}>
+                            <ActivityIndicator
+                                style={styles.activity}
+                                size={'large'}
+                                color={theme.colors.loadingIndicator}
+                            />
+                        </View>
+                    }
+                />
+            </View>
+
+        </SafeAreaView>
+    );
+}

package/Canteens/styles.js

@@ -0,0 +1,89 @@
+export default function(theme) {
+    return {
+        container: {
+            flex: 1
+        },
+        centerContainer: {
+            flex: 1,
+            justifyContent: 'center',
+            alignContent: 'center',
+        },
+        optionTextContainer: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center'
+        },
+        optionsTitleText: {
+            fontSize: theme.fontSizes.l,
+            marginLeft: 15,
+            marginTop: 0,
+            marginBottom: 0,
+            textAlign: 'left'
+        },
+        optionIconContainer: {
+            marginRight: 9,
+        },
+        option: {
+            backgroundColor: theme.colors.background,
+            paddingHorizontal: 0,
+            paddingVertical: 0,
+            borderBottomWidth: 0.4,
+            borderBottomColor: theme.colors.accent,
+        },
+        optionText: {
+            fontSize: theme.fontSizes.m,
+            marginTop: 1,
+        },
+        cardTitle: {
+            justifyContent: 'center',
+            alignItems: 'flex-start',
+            marginBottom: 0
+        },
+        cardContent: {
+            justifyContent: 'center',
+            alignItems: 'flex-start',
+            paddingTop: theme.paddings.small
+        },
+        favorite: {
+          backgroundColor: theme.colors.secondary
+        },
+        header: {
+            backgroundColor: theme.colors.background,
+            padding: 10,
+            flexDirection: "row",
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+        },
+        content: {
+            backgroundColor: theme.colors.background,
+            flex: 1
+        },
+        headerText: {
+            fontSize: theme.fontSizes.l,
+            ...theme.fonts.light,
+            marginTop: 10,
+            marginBottom: 10
+        },
+        accordian: {
+            borderBottomColor: theme.colors.accent,
+            borderBottomWidth: 1
+        },
+        arrowIcon: {
+            marginStart: 'auto',
+            marginEnd: 10,
+        },
+        tabItem: {
+            paddingHorizontal: 16
+        },
+        tabDay: {
+            textAlign: "center",
+            fontSize: theme.fontSizes.xxl,
+            color: theme.colors.primary
+        },
+        tabDate: {
+            ...theme.fonts.medium,
+            textAlign: "center",
+            color: theme.colors.primary,
+        }
+    }
+};