@olea-bps/views 1.0.0

package/Opal/styles.js

@@ -0,0 +1,11 @@
+export default function(theme) {
+    return {
+        container: {
+            flex: 1,
+            backgroundColor: theme.colors.background,
+        },
+        activity: {
+            padding: 20
+        }
+    }
+};

package/PublicTransportTicket/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 { useState, useEffect, useMemo, useCallback } from 'react';
+import { AppState, SafeAreaView, View, ScrollView, StyleSheet, Alert, useWindowDimensions, RefreshControl } from 'react-native';
+
+import { useTheme, Text, Button } from 'react-native-paper';
+import { useFocusEffect } from '@react-navigation/native';
+import { useTranslation } from 'react-i18next';
+import QRCode from 'react-native-qrcode-svg';
+
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+import { useUser } from '@olea-bps/context-user';
+import { usePublicTransportTicket } from '@olea-bps/context-public-transport-ticket';
+
+import componentStyles from './styles';
+
+/**
+ * View zum Anzeigen eines OPNV-Tickets.
+ */
+export default function PublicTransportTicketView() {
+    const componentName = PublicTransportTicketView.name;
+    // Get theme from theme context
+    const theme = useTheme();
+    const { themeStyles } = theme;
+    // Get translation function from translation hook
+    const { t } = useTranslation();
+
+    const [user, login] = useUser();
+    const [ticketBarcode, ticketOwner, ticketValidFrom, ticketValidTo, refreshTicket] = usePublicTransportTicket();
+    const { width } = useWindowDimensions();
+
+    const [refreshingTicketScrollView, setRefreshingTicketScrollView] = useState(false);
+
+    // Create styles object using useMemo to prevent unnecessary re-renders
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    );
+
+    useFocusEffect(
+        useCallback(
+            () => {
+                console.log(componentName, ':', 'useFocusEffect', ':', 'update ticket');
+                refreshTicket?.()
+            },
+            [refreshTicket]
+        )
+    );
+
+    useEffect(
+        () => {
+            const focusSubscription = AppState.addEventListener(
+                'focus',
+                () => {
+                    console.log(componentName, ':', 'focus', ':', 'update ticket');
+                    refreshTicket?.();
+                }
+            );
+
+            return () => {
+                focusSubscription.remove();
+            };
+        },
+        []
+    );
+
+    const onRefreshTicketScrollView = useCallback(
+        () => {
+            if (refreshTicket) {
+                setRefreshingTicketScrollView(true);
+                refreshTicket()
+                    .finally(() => setRefreshingTicketScrollView(false));
+            }
+        },
+        [setRefreshingTicketScrollView, refreshTicket]
+    );
+
+    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 title={t('publictransportticket:title')} />
+
+            {/* This View contains the main content of the screen. */}
+            <View accessible={false} style={themeStyles.container}>
+                {
+                    user
+                        ? <ScrollView
+                            style={
+                                {
+                                    padding: '10%',
+                                }
+                            }
+                            refreshControl={
+                                <RefreshControl
+                                    refreshing={refreshingTicketScrollView}
+                                    onRefresh={onRefreshTicketScrollView}
+                                />
+                            }
+                        >
+                            {
+                                ticketBarcode
+                                    ? <>
+                                        <View>
+                                            <QRCode
+                                                value={ticketBarcode}
+                                                size={width * 0.8}
+                                            />
+                                        </View>
+                                        <Text>
+                                            <Text
+                                                style={styles.infoName}
+                                            >
+                                                Inhaber:
+                                            </Text>
+                                            {ticketOwner}
+                                        </Text>
+                                        <Text>
+                                            <Text
+                                                style={styles.infoName}
+                                            >
+                                                Gültigkeit:
+                                            </Text>
+                                            {ticketValidFrom} - {ticketValidTo}
+                                        </Text>
+                                    </>
+                                    : null
+                            }
+                        </ScrollView>
+                        : <>
+                            <Text>
+                                Sie sind nicht eingeloogt
+                            </Text>
+                            <Button
+                                onPress={
+                                    () =>
+                                        login
+                                            ? login()
+                                                .catch(
+                                                    reason => {
+                                                        console.debug(componentName, ':', 'login failed', ':', reason);
+                                                        Alert.alert(
+                                                            t('user:loginFailed'),
+                                                            t('user:tryLoginAgain'),
+                                                        );
+                                                    }
+                                                )
+                                            : Alert.alert(
+                                                t('user:connectionError'),
+                                                t('user:connectionErrorTryLoginAgain'),
+                                            )
+                                }
+                            >
+                                {t('user:logginButton')}
+                            </Button>
+                        </>
+                }
+            </View>
+        </SafeAreaView>
+    );
+}

package/PublicTransportTicket/styles.js

@@ -0,0 +1,17 @@
+export default function (theme) {
+    return {
+        infoName: {
+            fontSize: theme.fontSizes.l,
+            fontWeight: 'bold'
+        },
+        userinfoHeadline: {
+            paddingLeft: '5%',
+            fontWeight: 'bold',
+            fontSize: theme.fontSizes.l,
+        },
+        userinfoValue: {
+            paddingLeft: '10%',
+            fontSize: theme.fontSizes.l,
+        },
+    }
+}

package/Search/index.js

@@ -0,0 +1,186 @@
+/**
+ * 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, useEffect, useMemo } from 'react';
+import { StyleSheet, SafeAreaView, View, ActivityIndicator } from 'react-native';
+import { connect } from 'react-redux'
+import { Searchbar, Text, withTheme } from 'react-native-paper';
+import { TabView, TabBar } from 'react-native-tab-view';
+import { withTranslation } from "react-i18next";
+
+import NetInfo from '@react-native-community/netinfo';
+
+import { SearchService } from "@olea-bps/core";
+
+import componentStyles from "./styles";
+import IconsOpenasist from "@olea-bps/icons-openasist";
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+import { SearchResults as SearchResultsComponent } from '@olea-bps/components';
+
+
+/**
+ * Search View
+ *
+ * Shows a search view with taps for every category.
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+
+
+function SearchView(props) {
+    const [searchTabIndex, setSearchTabIndex] = useState(0);
+    const [hasConnection, setHasConnection] = useState(true);
+    const [inProgress, setInProgress] = useState(false);
+    const [searchString, setSearchString] = useState(props.searchTopic ? props.searchTopic : '');
+
+    const { theme, theme: { themeStyles, colors }, t } = props;
+    const activeSearchCategories = props?.theme?.appSettings?.modules?.search?.activeCategories ?? SearchService.categories;
+
+    const searchTabRoutes = useMemo(
+        () => [
+            { key: 'all', title: t('search:tabs.all') },
+            ...activeSearchCategories.map(activeSearchCategory => ({
+                key: activeSearchCategory,
+                title: t(`search:tabs.${activeSearchCategory}`)
+            }))
+        ],
+        [activeSearchCategories, t]
+    );
+
+    useEffect(
+        () => NetInfo.addEventListener(state => setHasConnection(state.isInternetReachable && state.isConnected)),
+        [NetInfo]
+    );
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    )
+
+    const _onPressButton = () => {
+        if (searchString.length > 0) {
+            _executeSearch();
+        }
+    };
+
+    const _executeSearch = () => {
+        const includedSearches = props.theme.appSettings.modules.search.activeCategories;
+        const searchService = new SearchService();
+
+        setInProgress(true);
+
+        if (searchTabIndex > 0 && searchTabRoutes.length > 0) {
+            searchService.searchByType(
+                searchTabRoutes[searchTabIndex]?.key,
+                searchString,
+                () => {
+                    setInProgress(false);
+                });
+        } else {
+            searchService.searchAll(searchString, () => {
+                setInProgress(false);
+            }, includedSearches);
+        }
+    };
+
+    /**
+     * Render the top bar for categories
+     *
+     * @param props
+     * @returns {*}
+     * @private
+     */
+    const _renderTabBar = (props) => {
+
+        return (
+            <View style={styles.tabBarContainer}>
+                <TabBar
+                    {...props}
+                    scrollEnabled
+                    style={themeStyles.tabs}
+                    activeColor={themeStyles.tabs.activeColor}
+                    inactiveColor={themeStyles.tabs.inactiveColor}
+                    labelStyle={themeStyles.tab}
+                    indicatorStyle={themeStyles.tabIndicator}
+                    tabStyle={{ width: 'auto', paddingHorizontal: 20 }}
+                />
+                <Searchbar
+                    onSubmitEditing={() => _onPressButton()}
+                    onIconPress={() => _onPressButton()}
+                    onChangeText={setSearchString}
+                    icon={(props) =>
+                        <IconsOpenasist icon={"search"} size={32} color={colors.icon} />
+                    }
+                    style={styles.searchBar}
+                    inputStyle={styles.searchBarInput}
+                    value={searchString}
+                    placeholder={t('search:title') + ' ...'}
+                    placeholderTextColor={colors.textLighter}
+                    clearAccessibilityLabel={t('accessibility:search:searchBarClearButton')}
+                />
+            </View>
+        );
+    };
+
+    return (
+        <SafeAreaView style={[styles.container, themeStyles.appSafeAreaContainer]}>
+            <AppbarComponent title={t('search:title')} {...props} />
+            <TabView
+                style={styles}
+                navigationState={{ index: searchTabIndex, routes: searchTabRoutes }}
+                renderScene={
+                    ({ route, jumpTo }) =>
+                        hasConnection
+                          ? <View style={styles.containerInner}>
+                                {
+                                    inProgress
+                                      ? <View style={[styles.containerInner, styles.containerLoading]}>
+                                            <Text>{t('search:inProgress')}</Text>
+                                            <ActivityIndicator style={styles.activity} size="large" color={props.theme.colors.loadingIndicator} />
+                                        </View>
+                                      : <SearchResultsComponent type={route.key} {...props} />
+                                }
+                            </View>
+                          : <View style={[styles.containerInner, styles.containerLoading]}>
+                                <IconsOpenasist icon={"search"} size={48} color={props.theme.colors.loadingIndicator} />
+                                <Text style={styles.title}>{t('search:noInternetTitle')}</Text>
+                                <Text style={styles.subtitle}>{t('search:noInternetSubtitle')}</Text>
+                            </View>
+
+                }
+                renderTabBar={_renderTabBar}
+                onIndexChange={setSearchTabIndex}
+            />
+        </SafeAreaView>
+    );
+
+}
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.search.component,
+        pluginStyles: state.pluginReducer.search.styles,
+        searchTopic: state.stateReducer.searchTopic
+    };
+};
+
+export default connect(mapStateToProps, null)(withTranslation()(withTheme(SearchView)));
+
+
+
+

package/Search/styles.js

@@ -0,0 +1,67 @@
+export default function(theme) {
+    return {
+        container: {
+            flex: 1,
+        },
+        containerInner: {
+            flex: 1,
+            backgroundColor: theme.colors.contentBackground
+        },
+        containerLoading: {
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignContent: 'center',
+            alignItems: 'center'
+        },
+        tabs: {
+            backgroundColor: theme.colors.primary,
+        },
+        tab: {
+            ...theme.fonts.medium,
+        },
+        tabBarContainer: {
+            position: 'relative',
+            zIndex: 2
+        },
+        tabIndicator: {
+            backgroundColor: theme.colors.tabs.tabIndicator,
+            height: 5
+        },
+        searchBar: {
+            borderRadius: 0,
+            height: 50,
+            paddingHorizontal: theme.paddings.small,
+            shadowOpacity: 0.0,
+            borderBottomColor: theme.colors.accent,
+            borderBottomWidth: 1,
+            fontSize: theme.fontSizes.searchBar
+        },
+        searchBarInput: {
+            fontSize: theme.fontSizes.xl
+        },
+        activity: {
+            marginTop: theme.paddings.default,
+            width: 160,
+            height: 160
+        },
+
+        title : {
+            fontSize: theme.fontSizes.title,
+            color: theme.colors.text,
+            textAlign: 'center',
+            marginTop: theme.paddings.default,
+            marginLeft: theme.paddings.default,
+            marginRight: theme.paddings.default,
+        },
+
+        subtitle : {
+            fontSize: theme.fontSizes.subtitle,
+            color: theme.colors.text,
+            textAlign: 'center',
+            marginTop: theme.paddings.default,
+            marginLeft: theme.paddings.default,
+            marginRight: theme.paddings.default,
+        },
+
+    }
+};

package/SettingsAccessibility/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 React from 'react';
+import {SafeAreaView, View, Alert} from 'react-native';
+import { reloadAppAsync } from 'expo'
+
+import {connect} from 'react-redux'
+import { withTheme, Checkbox} from "react-native-paper";
+import {withTranslation} from "react-i18next";
+
+import merge from 'lodash/merge';
+
+import { onSettingAccessibilityOverride, store } from "@olea-bps/core";
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+import componentStyles from "./styles";
+
+/**
+ * Settings Accessibility
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+class AccessibilitySettingsView extends React.Component {
+    // Styles of this component
+    styles;
+
+    constructor(props) {
+        super(props);
+
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+
+        const {pluginStyles, theme, settings} = this.props;
+        this.styles = componentStyles(theme);
+
+        if (pluginStyles) {
+            this.styles = merge(this.styles, pluginStyles);
+        }
+
+        const {highContrast, increaseFontSize} = settings.settingsAccessibility;
+
+        this.state = {
+            highContrast:  highContrast ? highContrast : false,
+            increaseFontSize: increaseFontSize ? increaseFontSize : false
+        };
+    }
+
+
+    /**
+     * update the settings
+     *
+     * @private
+     */
+    _handleChange(key) {
+        const {t} = this.props;
+        if(key in this.state){
+            const settings = Object.assign({}, this.state, {[key]: !this.state[key]});
+            Alert.alert(
+                t('settings:accessibility.restartRequired'),
+                t('settings:accessibility.restartRequiredDesc'),
+                [
+                    {
+                        text: t('settings:accessibility.cancelRestart'),
+                        style: 'cancel',
+                        onPress: () => {}
+                    },
+                    {
+                        text: t('settings:accessibility.doRestart'),
+                        onPress: async () => {
+                            this.setState(settings)
+                            store.dispatch(onSettingAccessibilityOverride('accessibilitySettings',  settings));
+                            setTimeout(async () => {
+                                await reloadAppAsync();
+                            }, 500);
+                        },
+                    },
+                ]
+            );
+        }
+    }
+
+
+    render() {
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent />;
+        }
+        // ------------------------------------------------------------------------
+
+        const { theme: { themeStyles, colors }, t } = this.props;
+        const { highContrast, increaseFontSize } = this.state;
+        const accessibilitySettings = [
+            {key: 'highContrast',       checked: highContrast,      title: t('settings:accessibility.highContrast')     },
+            {key: 'increaseFontSize',   checked: increaseFontSize,  title: t('settings:accessibility.increaseFontSize') }
+        ].map(({key, checked, title}) =>
+            <Checkbox.Item
+                key={key}
+                status={checked ? 'checked' : 'unchecked'}
+                label={title}
+                labelStyle={this.styles.labelStyle}
+                onPress={() => this._handleChange(key)}
+                color={colors.checkboxChecked}
+                uncheckedColor={colors.checkboxUnchecked}
+                mode={'android'}
+            />
+        );
+
+
+
+        return (
+            <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
+                <AppbarComponent {...this.props} title={t('settings:accessibility.title')}/>
+                <View style={themeStyles.container}>
+                    {accessibilitySettings}
+                </View>
+            </SafeAreaView>
+        );
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.settingsAccessibility.component,
+        pluginStyles: state.pluginReducer.settingsAccessibility.styles,
+        settings: state.settingReducer
+    };
+};
+
+export default connect(mapStateToProps, null)(withTranslation()(withTheme(AccessibilitySettingsView)))

package/SettingsAccessibility/styles.js

@@ -0,0 +1,13 @@
+export default function(theme) {
+    return {
+        selectOption: {
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between'
+        },
+        labelStyle: {
+            fontSize: theme.fontSizes.l,
+            color: theme.colors.text
+        }
+    }
+};