@olea-bps/views 1.0.0

package/SettingsAppInfo/index.js

@@ -0,0 +1,86 @@
+/**
+ * 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 React from 'react';
+import {SafeAreaView, View, Image, TouchableOpacity, Linking} from 'react-native';
+
+import {List, withTheme} from 'react-native-paper';
+import {withTranslation} from "react-i18next";
+
+import * as Application from 'expo-application';
+
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+import componentStyles from "./styles";
+
+/**
+ * Settings app info
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+class AppInfoSettingsView extends React.Component {
+    // Styles of this component
+    styles;
+
+    constructor(props) {
+        super(props);
+
+        const {theme} = this.props;
+        this.styles = componentStyles(theme);
+    }
+
+    render() {
+        const { theme: { themeStyles, appSettings }, t } = this.props;
+
+        return (
+            <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
+                <AppbarComponent
+                    {...this.props}
+                    title={t('settings:version.title')}
+                />
+                <View style={themeStyles.container}>
+                    <List.Section>
+                        <List.Item
+                            key="version"
+                            title={t('settings:version.version')}
+                            description={Application.nativeApplicationVersion ?? t("settings:version.unknown")}
+                            titleNumberOfLines={2}
+                            titleStyle={this.styles.listItemTitle}
+                            descriptionStyle={this.styles.listItemDescription}
+                        >
+                        </List.Item>
+                    </List.Section>
+
+                  {
+                    appSettings.infoBanner &&
+                      <TouchableOpacity
+                        onPress={() => Linking.openURL(appSettings.infoBannerUrl)}
+                        activeOpacity={0.7}
+                      >
+                        <Image
+                          style={this.styles.infoBanner}
+                          source={appSettings.infoBanner}
+                          resizeMode="contain" />
+                      </TouchableOpacity>
+                  }
+                </View>
+            </SafeAreaView>
+        );
+    }
+}
+
+export default (withTranslation()(withTheme(AppInfoSettingsView)))

package/SettingsAppInfo/styles.js

@@ -0,0 +1,18 @@
+export default function(theme) {
+    return {
+        selectOption: {
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between'
+        },
+        listItemTitle: {
+            fontSize: theme.fontSizes.l
+        },
+        listItemDescription: {
+            fontSize: theme.fontSizes.m
+        },
+        infoBanner: {
+            width: '100%'
+        }
+    }
+}

package/SettingsCanteens/index.js

@@ -0,0 +1,249 @@
+/**
+ * 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 React, { useState, useMemo } from 'react';
+import { SafeAreaView, View, StyleSheet } from 'react-native';
+
+import { connect } from 'react-redux';
+import { useTheme } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+
+import { onSettingCanteenMerge, store } from '@olea-bps/core';
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+import { SettingsDialogSelect } from '@olea-bps/components';
+import { SettingsDialogRadio } from '@olea-bps/components';
+import { useCanteens, useFavoriteCanteens, usePriceGroupCode } from '@olea-bps/context-canteen';
+import { SettingSection } from '@olea-bps/components';
+
+import componentStyles from './styles';
+
+/**
+ * Renders the Canteens Settings view.
+ *
+ * @param {Object} props - The component props.
+ * @param {Object} props.settings - The settings object.
+ * @returns {React.JSX.Element} The rendered component.
+ */
+function CanteensSettingsView(props) {
+    // Get theme from theme context
+    const theme = useTheme();
+    // Get translation function from translation hook
+    const { t } = useTranslation();
+    // Get canteens from canteen context
+    const [canteens] = useCanteens();
+
+    // Extract required datas using destructuring
+    const { settings } = props;
+    const { appSettings: { mealSelections, groupsOfPersons, mealTypes }, themeStyles } = theme;
+
+    // Get canteen settings from settings property or use default
+    const settingsCanteens = settings?.settingsCanteens;
+    const favoriteSelection = Array.isArray(settingsCanteens?.favoriteSelection)
+        ? settingsCanteens.favoriteSelection
+        : [];
+    const [favoriteCanteens, setFavoriteCanteens] = useFavoriteCanteens();
+
+    // Eingestellter Mensapreis aus dem Mensa-Kontext holen
+    const [favoritePrice, setFavoritePrice] = usePriceGroupCode();
+
+    const activeMealTypes = Array.isArray(settingsCanteens?.favoriteMealTypes) && settingsCanteens?.favoriteMealTypes?.length
+        ? settingsCanteens.favoriteMealTypes
+        // If no meal type is active, all meal types are active
+        // By getting the code auf all avaiables meal types
+        : mealTypes?.map?.(mealType => mealType.code) ?? [];
+
+    // State variables for showing/hiding dialogs
+    const [showPriceDialog, setShowPriceDialog] = useState(false);
+    const [showSelectionsDialog, setShowSelectionsDialog] = useState(false);
+    const [showCanteensDialog, setShowCanteensDialog] = useState(false);
+    const [showMealTypesDialog, setShowMealTypesDialog] = useState(false);
+
+    // Create styles object using useMemo to prevent unnecessary re-renders
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    );
+
+    // JSX structure and Rendering for the component
+    return (
+        // SafeAreaView is used to render content within the safe area boundaries of a device.
+        <SafeAreaView style={[styles.container, themeStyles.appSafeAreaContainer]}>
+            {/* AppbarComponent is a custom component for the app's header bar. */}
+            <AppbarComponent {...props} t={t} title={t('settings:canteens.title')} />
+
+            {/* This View contains the main content of the screen. */}
+            <View accessible={false} style={themeStyles.container}>
+                {/* List.Section groups related content. */}
+                <SettingSection
+                    title={t('settings:canteens.priceSelection')}
+                    description={
+                        favoritePrice
+                            ? t(
+                                groupsOfPersons
+                                    .find(personGroup => personGroup.code === favoritePrice)
+                                    .labelKey
+                            )
+                            : groupsOfPersons
+                                .map(personGroup => personGroup.labelKey)
+                                .map(t)
+                                .join(', ')
+                    }
+                    onPress={() => setShowPriceDialog(true)}
+                />
+                <SettingsDialogRadio
+                    title={t('settings:canteens.priceSelection')}
+                    visible={showPriceDialog}
+                    selectedOption={favoritePrice}
+                    options={
+                        groupsOfPersons
+                            .map(
+                                personGroup =>
+                                ({
+                                    key: personGroup.code,
+                                    label: t(personGroup.labelKey),
+                                })
+                            )
+                    }
+                    onDismiss={() => setShowPriceDialog(false)}
+                    onOk={() => setShowPriceDialog(false)}
+                    onChange={setFavoritePrice}
+                />
+
+                {/* Conditional rendering based on whether mealSelections is an array. */}
+                {
+                    Array.isArray(mealSelections)
+                        ? <>
+                            <SettingSection
+                                title={t('settings:canteens.preferredSelections')}
+                                description={
+                                    mealSelections
+                                        .filter(selection => favoriteSelection.includes(selection.code))
+                                        .map(selection => selection.labelKey)
+                                        .map(selectionLabelKey => t(selectionLabelKey))
+                                        .join(', ')
+                                }
+                                onPress={() => setShowSelectionsDialog(true)}
+                            />
+                            <SettingsDialogSelect
+                                title={t('settings:canteens.preferredSelections')}
+                                selectedOptions={favoriteSelection}
+                                visible={showSelectionsDialog}
+                                options={
+                                    mealSelections.map(
+                                        selection =>
+                                        ({
+                                            key: selection.code,
+                                            label: t(selection.labelKey),
+                                        })
+                                    )
+                                }
+                                onDismiss={() => { setShowSelectionsDialog(false) }}
+                                onOk={() => { setShowSelectionsDialog(false) }}
+                                onChange={
+                                    selectedOptions =>
+                                        store.dispatch(
+                                            onSettingCanteenMerge(
+                                                'canteenSettings',
+                                                { favoriteSelection: selectedOptions }
+                                            )
+                                        )
+                                }
+                            />
+                        </>
+                        : null
+                }
+
+                <SettingSection
+                    title={t('canteen:favoriteCanteen:title')}
+                    description={
+                        Object.entries(canteens)
+                            .filter(([canteenId, canteenDatas]) => favoriteCanteens.includes(canteenId))
+                            .map(([canteenId, canteenDatas]) => canteenDatas.title)
+                            .join(', ')
+                    }
+                    onPress={() => setShowCanteensDialog(true)}
+                />
+                <SettingsDialogSelect
+                    title={t('canteen:favoriteCanteen:select')}
+                    selectedOptions={favoriteCanteens}
+                    visible={showCanteensDialog}
+                    options={
+                        Object.entries(canteens).map(
+                            ([canteenId, canteenDatas]) => ({
+                                key: canteenId,
+                                label: canteenDatas.title
+                            })
+                        )
+                    }
+                    onDismiss={() => setShowCanteensDialog(false)}
+                    onOk={() => setShowCanteensDialog(false)}
+                    onChange={setFavoriteCanteens}
+                />
+
+                {
+                    Array.isArray(mealTypes)
+                        ? <>
+                            <SettingSection
+                                title={t('settings:canteens:activeMealtypes:title')}
+                                description={
+                                    mealTypes
+                                        .filter(mealType => activeMealTypes.includes(mealType.code))
+                                        .map(mealType => mealType.labelKey)
+                                        .map(mealTypeLabelKey => t(mealTypeLabelKey))
+                                        .join(', ')
+                                }
+                                onPress={() => setShowMealTypesDialog(true)}
+                            />
+                            <SettingsDialogSelect
+                                title={t('settings:canteens:activeMealtypes:dialogTitle')}
+                                selectedOptions={activeMealTypes}
+                                visible={showMealTypesDialog}
+                                options={
+                                    mealTypes.map(
+                                        mealType =>
+                                        ({
+                                            key: mealType.code,
+                                            label: t(mealType.labelKey),
+                                        })
+                                    )
+                                }
+                                onDismiss={() => setShowMealTypesDialog(false)}
+                                onOk={() => setShowMealTypesDialog(false)}
+                                onChange={
+                                    selectedOptions =>
+                                        store.dispatch(
+                                            onSettingCanteenMerge(
+                                                'canteenSettings',
+                                                { favoriteMealTypes: selectedOptions }
+                                            )
+                                        )
+                                }
+                            />
+                        </>
+                        : null
+                }
+            </View>
+        </SafeAreaView>
+    );
+}
+
+// Map the Redux state to component props
+const mapStateToProps = (state) => {
+    return {
+        settings: state.settingReducer,
+    };
+};
+
+// Connect the component to Redux store and apply translation and theme
+export default connect(mapStateToProps)(CanteensSettingsView);

package/SettingsCanteens/styles.js

@@ -0,0 +1,33 @@
+export default function(theme) {
+    return {
+        selectOption: {
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between'
+        },
+        listItemTitle: {
+            fontSize: theme.fontSizes.l
+        },
+        listItemDescription: {
+            fontSize: theme.fontSizes.m,
+            color: theme.colors.textLighter
+        },
+        buttonLabel: {
+            fontSize: theme.fontSizes.m,
+            color: theme.colors.text,
+        },
+        dialogTitle: {
+            fontSize: theme.fontSizes.l,
+            lineHeight: theme.lineHeights.xxl
+        },
+        dialogContent: {
+            fontSize: theme.fontSizes.m,
+          color: theme.colors.text,
+        },
+        listItems: {
+            flex: 1,
+
+        }
+
+    }
+}

package/SettingsGeneral/index.js

@@ -0,0 +1,173 @@
+/**
+ * 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 React from 'react';
+import { SafeAreaView, View, Text } from 'react-native';
+
+import { connect } from 'react-redux'
+import { Button, List, Dialog, Portal, RadioButton, withTheme } from 'react-native-paper';
+import { withTranslation } from 'react-i18next';
+
+import merge from 'lodash/merge';
+
+import { onSettingGeneralOverride, store } from '@olea-bps/core';
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+
+import componentStyles from './styles';
+
+/**
+ * Settings General
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+class GeneralSettingsView extends React.Component {
+    // Styles of this component
+    styles;
+
+    constructor(props) {
+        super(props);
+
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+
+        const { pluginStyles, theme } = this.props;
+        this.styles = componentStyles(theme);
+
+        if (pluginStyles) {
+            this.styles = merge(this.styles, pluginStyles);
+        }
+
+        this.state = {
+            language: this.props.settings.settingsGeneral.language,
+        };
+    }
+
+    /**
+     * update the general settings
+     *
+     * @private
+     */
+    _updateGeneralSettings = () => {
+        const generalSettings = {
+            language: this.state.language
+        };
+        this.setState({ isChangeMessageVisible: false });
+        store.dispatch(onSettingGeneralOverride('generalSettings', generalSettings));
+    };
+
+    getLanguageByKey = () => {
+        const { theme } = this.props;
+        const languageCode = this.state.language;
+        const languageObject = theme.appSettings.languages.find((language) => language.code === languageCode);
+        return languageObject ? languageObject : theme.appSettings.languages[0];
+    };
+
+    _renderLanguages = () => {
+        const { theme, t } = this.props;
+        const { colors } = theme;
+        const languages = theme.appSettings.languages.map(language =>
+            <View key={'lanuage-' + language.code} >
+                <RadioButton.Item
+                    value={language.code}
+                    color={colors.checkboxChecked}
+                    label={t(language.labelKey)}
+                    labelStyle={this.styles.dialogContent}
+                    uncheckedColor={colors.checkboxUnchecked}
+                    mode={'android'}
+                />
+            </View>
+        );
+
+        return (
+            <RadioButton.Group
+                onValueChange={value => this.setState({ language: value })}
+                value={this.state.language}>
+                {languages}
+            </RadioButton.Group>
+        );
+    };
+
+    _showDialog = () => this.setState({ visible: true });
+
+    _hideDialog = () => this.setState({ visible: false });
+
+    render() {
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent />;
+        }
+        // ------------------------------------------------------------------------
+
+
+        const { theme: { themeStyles, colors }, t } = this.props;
+
+        return (
+            <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
+                <AppbarComponent {...this.props} title={t('settings:common.title')} />
+                <View accessible={false} style={themeStyles.container}>
+                    <List.Section>
+                        <List.Item accessible={false} key='language' title={t('settings:common.language')} description={t(this.getLanguageByKey().labelKey)}
+                            titleStyle={this.styles.listItemTitle} descriptionStyle={this.styles.listItemDescription}
+                            right={() => <Button accessible={true} labelStyle={this.styles.buttonLabel} onPress={this._showDialog} color={colors.buttonText}>{t('common:changeLabel')}</Button>
+                            }>
+                        </List.Item>
+                    </List.Section>
+                    <Portal>
+                        <Dialog visible={this.state.visible}
+                            onDismiss={this._hideDialog}>
+                            <Dialog.Title style={this.styles.dialogTitle}>{t('settings:common.language')}</Dialog.Title>
+                            <Dialog.Content>
+                                {this._renderLanguages()}
+                            </Dialog.Content>
+                            <Dialog.Actions>
+                                <Button labelStyle={this.styles.dialogContent} onPress={() => { this.setState({ isChangeMessageVisible: true }); this._hideDialog(); }} color={colors.buttonText}>{t('common:okLabel')}</Button>
+                            </Dialog.Actions>
+                        </Dialog>
+                    </Portal>
+                    <Portal>
+                        <Dialog visible={this.state.isChangeMessageVisible}
+                            onDismiss={() => this.setState({ isChangeMessageVisible: false })}>
+                            <Dialog.Title style={this.styles.dialogTitle}>{t('settings:common.languageChange')}</Dialog.Title>
+                            <Dialog.Content>
+                                <Text style={this.styles.dialogContent}>{t('settings:common.languageChangeText')}</Text>
+                            </Dialog.Content>
+                            <Dialog.Actions>
+                                <Button labelStyle={this.styles.dialogContent} onPress={this._updateGeneralSettings} color={colors.buttonText}>{t('settings:common.languageChangeOk')}</Button>
+                                <Button labelStyle={this.styles.dialogContent} onPress={() => this.setState({ isChangeMessageVisible: false })} color={colors.buttonText}>{t('common:cancelLabel')}</Button>
+                            </Dialog.Actions>
+                        </Dialog>
+                    </Portal>
+                </View>
+            </SafeAreaView>
+        );
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.settingsGeneral.component,
+        pluginStyles: state.pluginReducer.settingsGeneral.styles,
+        settings: state.settingReducer
+    };
+};
+
+export default connect(mapStateToProps, null)(withTranslation()(withTheme(GeneralSettingsView)))

package/SettingsGeneral/styles.js

@@ -0,0 +1,28 @@
+export default function(theme) {
+    return {
+        selectOption: {
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between'
+        },
+        listItemTitle: {
+            fontSize: theme.fontSizes.l
+        },
+        listItemDescription: {
+            fontSize: theme.fontSizes.m,
+            color: theme.colors.textLighter
+        },
+        buttonLabel: {
+            fontSize: theme.fontSizes.m,
+            color: theme.colors.text,
+        },
+        dialogTitle: {
+            fontSize: theme.fontSizes.l,
+            lineHeight: theme.lineHeights.xxl
+        },
+        dialogContent: {
+            fontSize: theme.fontSizes.m,
+          color: theme.colors.text,
+        }
+    }
+}