@olea-bps/components 1.0.0

package/QuickLinks/index.js

@@ -0,0 +1,127 @@
+/**
+ * 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 { useMemo } from 'react';
+import { StyleSheet, Text, View, Linking, TouchableOpacity, useWindowDimensions } from 'react-native';
+import { withTheme, Badge } from "react-native-paper";
+import { useTranslation } from 'react-i18next';
+
+import componentStyles from "./styles"
+import IconsOpenasist from "@olea-bps/icons-openasist";
+
+/**
+ * Quicklink Component
+ *
+ * Shows important links to university webside.
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+function QuickLinksComponent({ theme, theme: { colors } }) {
+  const { t, i18n } = useTranslation();
+  const { width, height } = useWindowDimensions();
+
+  const quicklinks = theme?.appSettings?.modules?.dashboard?.quicklinks ?? [];
+
+  const styles = useMemo(
+    () => StyleSheet.create(componentStyles(theme, width, height)),
+    [theme, width, height]
+  )
+
+  return (
+    // If quicklinks are in settings.js defined return content, otherwise return nothing to render
+    Array.isArray(quicklinks) && quicklinks.length > 0
+      ?
+      <View style={styles.container}>
+        <View style={[styles.innerContainer, { alignItems: "center" }]}>
+          <Text style={[styles.headline, { marginRight: 5 }]}>{t('quicklinks:title')}</Text>
+          <IconsOpenasist
+            icon={"open-external"}
+            color={colors.secondaryText}
+            size={10}
+            accessibilityLabel={t('accessibility:quicklinks.externalLinkSymbol')}
+          />
+        </View>
+
+        <View style={
+          [
+            styles.innerContainer,
+            {
+              justifyContent: quicklinks.length > 2
+                ? 'space-between'
+                : 'space-around'
+            },
+          ]}
+        >
+          {
+            quicklinks.map(
+              quicklink => {
+                const title = t(quicklink?.title);
+                const accessibilityTitle = i18n.exists(quicklink?.accessibilityTitle) ? t(quicklink?.accessibilityTitle) : title;
+                const icon = quicklink?.icon;
+                const url = i18n.exists(quicklink?.url) ? t(quicklink?.url) : quicklink?.url;
+                const badgeContent = quicklink?.badgeContent?.();
+
+                return (
+                  <TouchableOpacity
+                    key={`${title}_${icon}`}
+                    accessibilityLabel={accessibilityTitle}
+                    accessibilityRole='button'
+                    onPress={
+                      () =>
+                        Linking.canOpenURL(url)
+                          .then(
+                            supported => {
+                              if (supported) {
+                                Linking.openURL(url);
+                              }
+                            }
+                          )
+                    }
+                  >
+                    <View style={styles.roundButtons}>
+                      <IconsOpenasist icon={icon} color={colors.primaryText} size={35} />
+                      <View style={styles.linkextern}>
+                        <Text style={styles.quicklinkLabel}>
+                          {title}
+                        </Text>
+                      </View>
+                    </View >
+                    <View style={styles.badgeContainer}>
+                      <Badge
+                        visible={
+                          badgeContent
+                            ? true
+                            : false
+                        }
+                        style={styles.badge}
+                      >
+                        {badgeContent}
+                      </Badge>
+                    </View>
+                  </TouchableOpacity>
+                )
+              }
+            )
+          }
+        </View>
+      </View >
+      : null
+  );
+}
+
+export default (withTheme(QuickLinksComponent))

package/QuickLinks/styles.js

@@ -0,0 +1,45 @@
+export default function (theme, width, height) {
+
+  const roundButtonWidth = width / 5;
+
+  return {
+    container: {
+      flex: 1,
+      flexDirection: 'column',
+      paddingHorizontal: theme.paddings.default,
+      paddingVertical: theme.paddings.small,
+      paddingTop: theme.paddings.xsmall,
+    },
+    innerContainer: {
+      flex: 1,
+      flexDirection: 'row',
+      paddingVertical: theme.paddings.small,
+    },
+    headline: {
+      ...theme.fonts.regular,
+      fontSize: theme.fontSizes.m,
+      textTransform: 'uppercase'
+    },
+    roundButtons: {
+      width: roundButtonWidth,
+      height: roundButtonWidth,
+      borderRadius: roundButtonWidth / 2,
+      backgroundColor: theme.colors.quicklinksBackground,
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    badgeContainer: {
+      position: 'absolute',
+      width: roundButtonWidth,
+    },
+    badge: {
+      backgroundColor: 'red',
+    },
+    quicklinkLabel: {
+      color: theme.colors.primaryText,
+      fontSize: theme.fontSizes.s,
+      lineHeight: theme.fontSizes.subtitle * 1.1,
+      textAlign: 'center',
+    },
+  }
+};

package/RoomDetail/index.js

@@ -0,0 +1,281 @@
+/**
+ * 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,
+    StyleSheet,
+    View,
+    Share,
+    TouchableOpacity, ActivityIndicator
+} from 'react-native';
+import {connect} from 'react-redux'
+import {Appbar, Headline, List, withTheme} from "react-native-paper";
+import {withTranslation} from "react-i18next";
+import merge from 'lodash/merge';
+
+
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+import IconsOpenasist from "@olea-bps/icons-openasist";
+
+import componentStyles from "./styles";
+import {WebView} from "react-native-webview";
+
+/**
+ * Room Detail Component
+ *
+ * Shows the webview for the room directory.
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+class RoomDetailComponent extends React.Component {
+    static navigationOptions = {
+        header: null
+    };
+
+
+    state = {
+        refreshing: false,
+        webview: {
+            url: '',
+            title: ''
+        }
+    };
+
+    // Styles of this component
+    styles;
+
+    webView =  {
+        canGoBack: false,
+        ref: null,
+    };
+
+    constructor(props) {
+        super(props);
+
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+
+        const {pluginStyles, theme} = this.props;
+        this.styles = componentStyles(theme);
+
+        if (pluginStyles) {
+            this.styles = merge(this.styles, pluginStyles);
+        }
+
+        this.styles = StyleSheet.create(this.styles);
+
+        // ------------------------------------------------------------------------
+    }
+
+    /**
+     * Share function for room
+     *
+     * @returns {Promise<void>}
+     * @private
+     */
+    async _onShare() {
+        try {
+            const { room, theme, t } = this.props;
+            let roomTitle = room.code2017 || room.title;
+            roomTitle += room.codeDez1 ? ' (' + t('room:old') + ': ' + room.codeDez1 + ')' : '' ;
+
+            let message = t('room:title') + ' - ' + roomTitle +
+                ((room.building.name)           ? "\n" + t('room:building') + ": " + room.building.name : '') +
+                ((room.building.postaladdress)  ? "\n" + t('room:address') + ": " + room.building.postaladdress + ", " + (room.building.postalcode ? "\n" + room.building.postalcode + ' ' + theme.appSettings.defaultCity : '') : '') +
+                ((room.codeDez1)                ? "\n" + t('room:campusFinderLink') + ": " + room.url : '') +
+                ((room.codeDez1)                ? "\n" + t('room:googleMapsLink') + ": " + theme.appSettings.googleMapsUrl + room.building.coordinates.replace(/\s/g,'') : '');
+
+            const result = await Share.share({
+                message: message
+            });
+
+            if (result.action === Share.sharedAction) {
+                if (result.activityType) {
+                    // shared with activity type of result.activityType
+                } else {
+                    // shared
+                }
+            } else if (result.action === Share.dismissedAction) {
+                // dismissed
+            }
+        } catch (error) {
+            alert(error.message);
+        }
+    };
+
+
+    /**
+     * Render room details content
+     *
+     * @returns a view that includes the full name of the room, its building plus address, one button for opening the campus-navigator and one for opening google-maps
+     * @private
+     */
+    _renderContent = () => {
+        const { room, t, theme } = this.props;
+        const { themeStyles } = theme;
+        const { colors } = theme;
+
+        let roomTitle = room.code2017 || room.title;
+        roomTitle += room.codeDez1 ? ' (' + t('room:old') + ': ' + room.codeDez1 + ')' : '';
+
+        return (
+            <View style={this.styles.containerInner}>
+                <Headline style={this.styles.titleHeadline}>{roomTitle}</Headline>
+                {
+                    room?.building ?? null
+                      ? <>
+                            <List.Item
+                                key="building"
+                                title={t('room:building')}
+                                description={room.building.name}
+                                descriptionStyle={themeStyles.textLighter}
+                                titleStyle={themeStyles.searchDetailTitle}
+                            />
+                            <List.Item
+                                key="address"
+                                title={t('room:address')}
+                                description={
+                                    room.building.postaladdress + (
+                                        room?.building?.postalcode ?? false
+                                            ? "\n" + room.building.postalcode + ' ' + theme.appSettings.defaultCity
+                                            : ''
+                                    )
+                                }
+                                descriptionStyle={themeStyles.textLighter} titleStyle={themeStyles.searchDetailTitle}
+                            />
+                        </>
+                        : null
+                }
+                <View style={this.styles.buttonContainer} key={'buttonContainer'}>
+                    {
+                        room?.url ?? null
+                          ? <TouchableOpacity
+                                style={{ ...this.styles.button, ...this.styles.campusFinderUrl }}
+                                key={'campusFinderUrl'}
+                                onPress={() => {
+                                    this.setState({
+                                        webview: {
+                                            url: room.url,
+                                            title: t('room:campusFinder')
+                                        }
+                                    })
+                                }}
+                            >
+                                <IconsOpenasist
+                                    icon={'map-search'}
+                                    size={25}
+                                    color={colors.messages.noticeText}
+                                />
+                                <Headline
+                                    style={this.styles.buttonText}
+                                >
+                                    {t('room:campusFinderLink')}
+                                </Headline>
+                            </TouchableOpacity>
+                            : null
+                    }
+                    {
+                        room?.building?.coordinates ?? null
+                          ? <TouchableOpacity
+                                style={this.styles.button}
+                                key={'googleMapsUrl'}
+                                onPress={() => {
+                                    this.setState({
+                                        webview: {
+                                            url: theme.appSettings.googleMapsUrl + room.building.coordinates,
+                                            title: t('room:googleMaps')
+                                        }
+                                    })
+                                }}
+                            >
+                                <IconsOpenasist
+                                    icon={'location'}
+                                    size={25}
+                                    color={colors.messages.noticeText}
+                                />
+                                <Headline
+                                    style={this.styles.buttonText}
+                                >
+                                    {t('room:googleMapsLink')}
+                                </Headline>
+                            </TouchableOpacity>
+                            : null
+                    }
+                </View>
+            </View>
+        );
+    };
+
+
+    render() {
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent />;
+        }
+        // ------------------------------------------------------------------------
+
+        const {themeStyles, customScript} = this.props.theme;
+        const {t} = this.props;
+        const {title, url} = this.state.webview;
+        const {colors} = this.props.theme;
+
+        if(title && url) {
+            return (
+                <SafeAreaView style={[this.styles.container, themeStyles.safeAreaContainer]}>
+                    <AppbarComponent {...this.props}
+                                    title={title}
+                                    leftAction={<Appbar.Action
+                                        icon={props => <IconsOpenasist {...props} icon={'back'} color={colors.primaryText} /> }
+                                        onPress={() => this.setState({webview: {title: '', url: ''}})} />}/>
+                    <WebView
+                        ref={ref => this.webView.ref = ref}
+                        source={{uri: url}}
+                        injectedJavaScript={customScript}
+                        startInLoadingState={true}
+                        renderLoading={() => <ActivityIndicator style={this.styles.activity} size="large" color={colors.loadingIndicator}/>}
+                        onNavigationStateChange={(navState) => { this.webView.canGoBack = navState.canGoBack; }}
+                    />
+                </SafeAreaView>
+            );
+        }
+
+
+        return (
+            <SafeAreaView style={[this.styles.container, themeStyles.safeAreaContainer]}>
+                <AppbarComponent {...this.props}
+                             title={t('room:directory')}
+                             rightAction={<Appbar.Action icon="share-variant" onPress={this._onShare.bind(this)}/>}/>
+                {this._renderContent()}
+            </SafeAreaView>
+        );
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.roomDirectory.component,
+        pluginStyles: state.pluginReducer.roomDirectory.styles,
+    };
+};
+
+export default connect(mapStateToProps, null)(withTranslation()(withTheme(RoomDetailComponent)))

package/RoomDetail/styles.js

@@ -0,0 +1,56 @@
+export default function(theme) {
+    return {
+        titleHeadline : {
+            ...theme.fonts.medium,
+            fontSize: theme.fontSizes.xl,
+            lineHeight: theme.lineHeights.l,
+            marginBottom: theme.paddings.small
+        },
+        container: {
+            flex: 1,
+        },
+        containerInner: {
+            flex: 1,
+            paddingHorizontal: 20,
+            paddingVertical: 20
+        },
+        activity: {
+            marginTop: 20
+        },
+        badges: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            paddingHorizontal: 10
+        },
+        badge: {
+            marginRight: 5,
+            marginBottom: 5
+        },
+        title: {
+            paddingLeft: 15
+        },
+        buttonText: {
+            color: theme.colors.messages.noticeText,
+            ...theme.fonts.medium,
+            fontSize: theme.fontSizes.xl,
+            lineHeight: theme.lineHeights.l,
+            marginLeft: theme.paddings.small
+        },
+        buttonContainer: {
+            flex: 1,
+            justifyContent: 'flex-end',
+            marginBottom: theme.paddings.large + theme.paddings.default
+        },
+        button: {
+            ...theme.themeStyles.button,
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: theme.paddings.small,
+        },
+        campusFinderUrl: {
+            marginBottom: theme.paddings.small + theme.paddings.xsmall
+        }
+    };
+};

package/ScaledImage/index.js

@@ -0,0 +1,92 @@
+/**
+ * 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 {Image, View} from 'react-native';
+import PropTypes from "prop-types";
+
+/**
+ * Scaled Image Component
+ *
+ * This component calculates the height and width of the image (provided via uri)
+ * and renders the image in correct height an width. If a width and / or height is set,
+ * the image will be resized according to the provided values.
+ *
+ * Parameters:
+ *  - uri: Image Uri
+ *  - width: Desired width of the image (height will be calculated)
+ *  - height: Desired height of the image (width will be calculated)
+ *
+ * Navigation-Parameters:
+ *  - none
+ *
+ *
+ *
+ *  Sample usage (will render a image with full width of the current device):
+ *
+    <ScaledImageComponent uri={news.imageUrl} width={Dimensions.get('window').width} />
+ */
+export default class ScaledImageComponent extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            source: { uri: this.props.uri },
+            width: this.props.width || undefined,
+            height: this.props.height || undefined
+        };
+    }
+
+    componentDidMount() {
+        Image.getSize(this.props.uri, (width, height) => {
+            if (this.props.width && !this.props.height) {
+                this.setState({
+                    width: this.props.width,
+                    height: height * (this.props.width / width)
+                });
+            } else if (!this.props.width && this.props.height) {
+                this.setState({
+                    width: width * (this.props.height / height),
+                    height: this.props.height
+                });
+            } else {
+                this.setState({ width: width, height: height });
+            }
+        });
+    }
+
+    render() {
+        // Don't render until dimensions are calculated
+        if (!this.state.width || !this.state.height) {
+            return <View style={this.props.style && this.props.style} />;
+        }
+
+        return (
+            <View style={this.props.style && this.props.style}>
+                <Image
+                    source={this.state.source}
+                    style={{ height: this.state.height, width: this.state.width }}
+                />
+            </View>
+        );
+    }
+}
+
+
+
+ScaledImageComponent.propTypes = {
+    uri: PropTypes.string.isRequired,
+    width: PropTypes.number,
+    height: PropTypes.number
+};