@olea-bps/components 1.0.0

package/CourseDetail/index.js

@@ -0,0 +1,357 @@
+/**
+ * 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 PropTypes from 'prop-types';
+
+import {
+    ScrollView, StyleSheet, Text,
+    View, SafeAreaView, Share, Linking
+} from 'react-native';
+import {Appbar, Headline, List, withTheme} from "react-native-paper";
+
+import { connect } from 'react-redux'
+import merge from 'lodash/merge';
+
+import componentStyles from "./styles"
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+import IconsOpenasist from "@olea-bps/icons-openasist";
+import {withTranslation} from "react-i18next";
+
+
+/**
+ * Course Detail Component
+ *
+ * Shows the detailed information of a course with room, time, lecturer and so on.
+ * Provides a share functionality.
+ *
+ * Parameters:
+ *  - course: Course object with all information about the course
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+class CourseDetailComponent extends React.Component {
+
+
+    // Styles of this component
+    styles;
+
+    course = null;
+
+    constructor(props) {
+        super(props);
+
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+
+        const { pluginStyles,theme } = this.props;
+        this.styles = componentStyles(theme);
+
+        if(pluginStyles) {
+            this.styles = merge(componentStyles, pluginStyles);
+        }
+
+        this.styles = StyleSheet.create(this.styles);
+
+        // ------------------------------------------------------------------------
+        this.course = this.props.route.params.course;
+    };
+
+    /**
+     * Share function for book
+     *
+     * @returns {Promise<void>}
+     * @private
+     */
+    async _onShare() {
+        try {
+            const { t } = this.props;
+            let keys = this._getSortedKeys();
+            let message = '';
+
+            keys.forEach(key => {
+                let item = this.course[key];
+
+                switch(key) {
+                    case 'title':
+                        message += item.data + '\n\n';
+                    case 'lecturer':
+                        if(item && item.length > 0) {
+                            let title = '';
+                            let content = '';
+                            item.forEach(lecturerItem => {
+                                title = lecturerItem.displayname;
+                                content += lecturerItem.data + '\n';
+                            });
+                            message += title + ': \n' + content + '\n';
+                        }
+                        break;
+                    case 'times':
+                        if(item && item.length > 0) {
+                            let title = '';
+                            let times = '';
+                            item.forEach(timeItem => {
+                                title = timeItem.displayname;
+                                times += timeItem.start + ' - ' + timeItem.end + ' ' + t('common:time') +'\n';
+                            });
+                            message += title + ': \n' + times + '\n';
+                        }
+                        break;
+                    case 'room':
+                        if(item && item.length > 0) {
+                            const showRoomNumbers = item.length > 1;
+                            let rooms = '';
+                            item.forEach((roomItem, i) => {
+                                let roomNumber = (showRoomNumbers) ? (i+1) +'. ' : '';
+                                rooms += roomNumber +
+                                    roomItem.displayname +
+                                    ': \n' +
+                                    roomItem.data +
+                                    ' (' + roomItem.url + ')' +
+                                    '\n';
+                            });
+                            message += rooms + '\n'
+                        }
+                        break;
+                    default:
+                        if(item && item.displayname && item.data)
+                            message += item.displayname + ': \n' + item.data + '\n\n';
+                        break;
+                }
+            });
+
+            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);
+        }
+    };
+
+    /**
+     * Sort course keys by list and alphabetically
+     *
+     * @returns {string[]}
+     * @private
+     */
+    _getSortedKeys() {
+        if(!this.course) {
+            return;
+        }
+
+        let sortOrder = ['title', 'type', 'times', 'room', 'lecturer'];
+        return Object.keys(this.course).sort((a,b) => {
+            // First sort by our defined order
+            if(sortOrder.indexOf(a) >= 0 && sortOrder.indexOf(b) >= 0)
+                return sortOrder.indexOf(a) - sortOrder.indexOf(b);
+
+            // If only a is a key of our sort order, move it up
+            if(sortOrder.indexOf(a) >= 0)
+                return -1;
+
+            // If a nor b is within the sort order, sort alphabetically
+            if(sortOrder.indexOf(b) === -1)
+                return a - b;
+
+            return 0;
+        });
+    }
+
+    /**
+     * Render _renderItems
+     *
+     * @returns {*}
+     * @private
+     */
+    _renderItems = () => {
+        if(!this.course) {
+            return;
+        }
+        const {colors} = this.props.theme;
+        const {t} = this.props;
+
+        let keys = this._getSortedKeys();
+        let itemList = [];
+
+        keys.forEach(key => {
+            if(key === 'title') return;
+            let item = this.course[key];
+
+            switch(key) {
+                case 'lecturer':
+                    if(item && item.length > 0) {
+                        item.forEach(lecturerItem => {
+                            itemList.push(
+                                <List.Item key={key} title={lecturerItem.displayname ? lecturerItem.displayname : t('course:lecturer')}
+                                           description={lecturerItem.data}
+                                           titleStyle={this.styles.listTitle}
+                                           descriptionStyle={this.styles.listDescription}
+                                           descriptionNumberOfLines={200}
+                                />);
+                        });
+                    }
+                    break;
+                case 'times':
+                    if(item && item.length > 0) {
+                        let title = '';
+                        let times = '';
+                        item.forEach(timeItem => {
+                            title = timeItem.displayname;
+                            times += timeItem.start + ' - ' + timeItem.end + ' ' + t('common:time') + ' - ' + timeItem.mode + '\n';
+                        });
+                        itemList.push(
+                            <List.Item key={key} title={title}
+                                       description={times}
+                                       titleStyle={this.styles.listTitle}
+                                       descriptionStyle={this.styles.listDescription}
+                                       descriptionNumberOfLines={200} />);
+                    }
+                    break;
+                case 'room':
+                    if(item && item.length > 0) {
+                        const showRoomNumbers = item.length > 1;
+                        item.forEach((roomItem, i) => {
+                            let roomNumber = (showRoomNumbers) ? (i+1) +'. ' : '';
+                            itemList.push(
+                                <List.Item
+                                    key={key + '_' + i}
+                                    title={roomNumber + roomItem.displayname}
+                                    description={roomItem.data}
+                                    titleStyle={this.styles.listTitle}
+                                    descriptionStyle={this.styles.listDescription}
+                                    right={props =>
+                                        <List.Icon {...props}
+                                                   icon={props => <IconsOpenasist icon={"map-search"} size={25}
+                                                                                  color={colors.icon}/>}/>
+                                    }
+                                    onPress={() => Linking.openURL(roomItem.url)}
+                                />);
+                        });
+                    } else if(item.data) {
+                        itemList.push(
+                            <List.Item
+                                key={key}
+                                title={t('room:title')}
+                                description={item.data}
+                                titleStyle={this.styles.listTitle}
+                                descriptionStyle={this.styles.listDescription}
+                                right={props =>
+                                    item.url ? (
+                                        <List.Icon {...props}
+                                               icon={props => <IconsOpenasist icon={"map-search"} size={25}
+                                                                              color={colors.icon}/>}/>
+                                    ) : null
+                                }
+                                disabled={!item.url}
+                                onPress={() =>   item.url && Linking.openURL(item.url)}
+                            />);
+                    }
+                    break;
+                default:
+                    if(item && item.displayname && item.data)
+                        itemList.push(
+                            <List.Item key={key} title={item.displayname}
+                                       description={item.data}
+                                       titleStyle={this.styles.listTitle}
+                                       descriptionStyle={this.styles.listDescription}
+                                       descriptionNumberOfLines={200}
+                                       onPress={() => item.url && Linking.openURL(item.url)}
+                                       right={
+                                       props => item.url && <List.Icon {...props}
+                                                                icon={props => <IconsOpenasist
+                                                                    icon={"forward"} size={25}
+                                                                    color={colors.icon}/>}/>}
+                            />);
+                    break;
+            }
+        });
+
+        return (
+            <>
+                {itemList}
+            </>
+        )
+    };
+
+    /**
+     * Render book details content
+     *
+     * @returns {*}
+     * @private
+     */
+    _renderContent = () => {
+      const {themeStyles} = this.props.theme;
+        return (
+            <View style={[themeStyles.container, this.styles.containerInner]}>
+                <Headline style={this.styles.titleHeadline}>{this.course.title.data}</Headline>
+                <ScrollView>
+                    {this._renderItems()}
+                </ScrollView>
+            </View>
+        );
+    };
+
+    render() {
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent />;
+        }
+        // ------------------------------------------------------------------------
+
+        const {themeStyles} = this.props.theme;
+        const { course, t } = this.props;
+
+        if(!this.course){
+            return (
+                <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
+                    <AppbarComponent {...this.props}
+                                     title={t('course:lectureInformation')}/>
+                    <Text>{t('course:couldNotLoad')}</Text>
+                </SafeAreaView>
+            );
+        }
+
+        return (
+            <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
+                <AppbarComponent {...this.props}
+                                 title={t('course:lectureInformation')}
+                                 rightAction={<Appbar.Action icon="share-variant" onPress={this._onShare.bind(this)}/>}/>
+                {this._renderContent()}
+            </SafeAreaView>
+        );
+    }
+}
+
+
+const mapStateToProps = state => {
+    return {
+    };
+};
+
+export default connect(mapStateToProps, null)(withTranslation()(withTheme(CourseDetailComponent)))

package/CourseDetail/styles.js

@@ -0,0 +1,59 @@
+export default function(theme) {
+    return {
+        container: {
+            flex: 1,
+            backgroundColor: theme.colors.contentBackground,
+        },
+        containerInner: {
+            flex: 1,
+            paddingHorizontal: 20,
+            paddingVertical: 20
+        },
+        activity: {
+            marginTop: 20
+        },
+        listTitle: {
+            ...theme.fonts.regular,
+            fontSize: theme.fontSizes.m,
+            lineHeight: theme.lineHeights.xs
+        },
+        listDescription: {
+            ...theme.fonts.regular,
+            fontSize: theme.fontSizes.s,
+            lineHeight: theme.lineHeights.xxs,
+            color: theme.colors.categoryBadgeColor,
+        },
+        titleHeadline : {
+            ...theme.fonts.medium,
+            fontSize: theme.fontSizes.xl,
+            lineHeight: theme.lineHeights.l,
+            marginBottom: theme.paddings.small,
+            paddingHorizontal: 15
+        },
+        buttonText: {
+            ...theme.fonts.medium,
+            color: theme.colors.messages.noticeText,
+            marginLeft: theme.paddings.small
+        },
+        buttonHeadline: {
+            fontSize: theme.fontSizes.xl,
+            lineHeight: theme.lineHeights.l
+        },
+        buttonContainer: {
+            flex: 1,
+            justifyContent: 'flex-end',
+            marginBottom: theme.paddings.large + theme.paddings.default
+        },
+        button: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: theme.paddings.small,
+        },
+        campusFinderUrl: {
+            backgroundColor: theme.colors.primary,
+            marginBottom: theme.paddings.small + theme.paddings.xsmall
+        }
+    };
+}

package/CourseDetailDialog/index.js

@@ -0,0 +1,169 @@
+/**
+ * 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,
+    Linking,
+    TouchableOpacity
+} from 'react-native';
+
+import { useTheme, Text, Dialog, Portal } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+
+import IconsOpenasist from '@olea-bps/icons-openasist';
+import { useIncreaseFontSize } from '@olea-bps/core';
+
+import componentStyles from './styles';
+
+/**
+ * Ein Dialog, der sich über die derzeitige Ansicht legt, welcher die Detailinformationen zu einer Vorlesung anzeigt.
+ *
+ * @param {object} props
+ * @param {object} props.course Das JSON-Objekt, welches die Daten der Vorlesung enthält
+ * @param {boolean} props.visible `true`, wenn der Dialog angezeigt werden soll, ansonsten `false`
+ * @param {() => void} [props.onClose]
+ * @param {() => void} [props.onDismiss]
+ * @example
+ * const [showDetailDialog, setShowDetailDialog] = useState(true);
+ *
+ * const course = {
+ *     title:     { displayName: 'Bezeichnung', data: 'Programierung' },
+ *     room:      { displayName: 'Raum',        data: '13.344.3' },
+ *     startTime: { displayName: 'Begin',       data: '12:00' }
+ * };
+ *
+ * return (
+ *     <CourseDetailDialog
+ *         course={course}
+ *         visible={showDetailDialog}
+ *         onDismiss={() => setShowDetailDialog(false)}
+ *         onClose={() => setShowDetailDialog(false)}
+ *     />
+ * );
+ */
+export default function CourseDetailDialog({ course, visible, onClose, onDismiss }) {
+    const theme = useTheme();
+    const { t } = useTranslation();
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    );
+
+    const { room, url, info, title, times, type, lecturer, ...extraCourseData } = course ?? {};
+    const courseDetails = [
+        { ...room, key: 'room', displayName: t('timetable:detail.room'), icon: 'map-search' },
+        { key: 'startTimes', data: times?.[0]?.start, displayName: t('timetable:detail.start') },
+        { key: 'endTimes', data: times?.[0]?.end, displayName: t('timetable:detail.end') },
+        { ...type, key: 'type', displayName: t('timetable:detail.type') },
+        { ...lecturer?.[0], key: 'lecturer', displayName: t('timetable:detail.lecturer') },
+        { ...url, key: 'url', displayName: t('timetable:detail.url'), icon: 'forward' },
+        { ...info, key: 'info', displayName: t('timetable:detail.info') },
+
+        // Restliche Daten werden in Format gebracht und angefügt
+        ...Object.entries(extraCourseData)
+            .map(
+                ([courseDataKey, courseDataValue]) =>
+                (
+                    {
+                        key: courseDataKey,
+                        displayName: courseDataValue?.displayname,
+                        ...courseDataValue,
+                    }
+                )
+            )
+    ]
+        .filter(courseDetail => courseDetail?.data ? true : false);
+
+    return (
+        <Portal>
+            <Dialog visible={visible} onDismiss={onDismiss}>
+                <Dialog.Title>{title?.data ?? 'Keine weiteren Informationen'}</Dialog.Title>
+                <Dialog.Content>
+                    {
+                        courseDetails
+                            ? courseDetails.map(
+                                courseDetail =>
+                                    <CourseDetailDialogText
+                                        key={courseDetail?.displayName}
+                                        title={courseDetail?.displayName}
+                                        content={courseDetail?.data}
+                                        url={courseDetail?.url}
+                                        icon={courseDetail?.icon}
+                                    />
+                            )
+                            : <Text>
+                                Keine Informationen verfügbar
+                            </Text>
+                    }
+                </Dialog.Content>
+                <Dialog.Actions>
+                    <TouchableOpacity onPress={onClose}>
+                        <Text style={styles.dismissButton}>{t('timetable:close')}</Text>
+                    </TouchableOpacity>
+                </Dialog.Actions>
+            </Dialog>
+        </Portal>
+    );
+}
+
+/**
+ * Eine einzelne Information im {@link CourseDetailDialog}
+ *
+ * @param {object} props
+ * @param {string} props.title
+ * @param {string} props.content
+ * @param {string} props.url
+ * @param {string} props.icon
+ */
+function CourseDetailDialogText({ title, content, url, icon }) {
+    const increaseFontSize = useIncreaseFontSize();
+
+    const theme = useTheme();
+    const { colors } = theme;
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    );
+
+    return (
+        <TouchableOpacity
+            style={[styles.detailContainer, styles.textDetail]}
+            onPress={
+                url
+                    ? () => Linking.openURL(url)
+                    : null
+            }
+            disabled={
+                url
+                    ? false
+                    : true
+            }
+        >
+            <Text style={[styles.detailLabel, increaseFontSize ? styles.textDetailBigFont : styles.textDetail]} >
+                {title}
+            </Text>
+            <Text style={[styles.detailValue, increaseFontSize ? styles.textDetailBigFont : styles.textDetail]} ellipsizeMode='tail' >
+                {content}
+            </Text>
+            {
+                icon && url
+                    ? <IconsOpenasist icon={icon} size={25} color={colors.icon} />
+                    : null
+            }
+        </TouchableOpacity>
+    )
+}

package/CourseDetailDialog/styles.js

@@ -0,0 +1,116 @@
+export default function(theme) {
+    return {
+        courseCard: {
+            paddingLeft: 5,
+        },
+        verticalSeperator: {
+          height: "100%",
+          marginLeft: theme.paddings.small,
+          width: 1,
+          backgroundColor: theme.colors.listSeperator
+        },
+        verticalSeperatorSmall: {
+          height: "15%",
+          width: 1,
+          backgroundColor: theme.colors.listSeperator,
+        },
+        courseTimeContainer: {
+          width:"15%",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor:theme.colors.background
+        },
+        courseTimeContainerBigFont: {
+            width: "25%",
+        },
+        timeText: {
+          fontSize: theme.fontSizes.subtitle,
+          paddingTop: theme.paddings.small,
+          paddingBottom: theme.paddings.small
+        },
+        timeTextBig: {
+            fontSize: theme.fontSizes.m
+        },
+        courseContainer: {
+          flex: 1,
+          flexDirection: "column",
+          paddingLeft: theme.paddings.small,
+          width:"85%",
+          backgroundColor:theme.colors.background,
+          paddingTop: theme.paddings.xsmall,
+          paddingBottom: theme.paddings.xsmall
+        },
+        courseContainerBigFont: {
+            width: "75%",
+        },
+        type: {
+          fontSize: theme.fontSizes.subtitle,
+          color: theme.colors.subtitle
+        },
+        title: {
+          fontSize: theme.fontSizes.xl,
+          paddingTop: theme.paddings.xsmall,
+        },
+        titleBigFont: {
+            fontSize: theme.fontSizes.xl,
+            paddingTop: theme.paddings.xsmall,
+        },
+        room: {
+          fontSize: theme.fontSizes.l,
+          paddingTop: theme.paddings.xsmall,
+          fontWeight: "bold",
+        },
+        addLeftRightPadding: {
+          paddingLeft: theme.paddings.xsmall,
+          paddingRight: theme.paddings.xsmall,
+        },
+        professorText: {
+          fontSize: theme.fontSizes.l,
+          paddingTop: theme.paddings.xsmall,
+          color: theme.colors.subtitle
+        },
+        professorName: {
+          color: theme.colors.lecturerNameText
+        },
+        otherCourseContainer:{
+          padding: theme.paddings.xsmall,
+          width: "100%",
+          backgroundColor: theme.colors.background
+        },
+        btnPosition: {
+          position: 'absolute',
+          bottom: 7,
+          right: 7
+        },
+        textDetail: {
+          fontSize: theme.fontSizes.l,
+          paddingTop: theme.paddings.small,
+        },
+        textDetailBigFont: {
+            fontSize: theme.fontSizes.xl,
+            paddingTop: theme.paddings.small,
+        },
+        indentedText: {
+          marginLeft: 10,
+        },
+        detailContainer: {
+          flexDirection: 'row',
+          alignItems: 'center',
+        },
+        detailLabel: {
+          width: '25%',
+        },
+        detailValue: {
+          flexShrink: 1,
+          width: '70%',
+        },
+        dismissButton: {
+          color: '#007bff',
+          textAlign: 'right',
+          fontWeight: 'bold',
+          fontSize: 16,
+          marginBottom: 8,
+          marginRight: 10
+        },
+    }
+};