@olea-bps/base 1.0.0

package/components/TimetableEvent/index.js

@@ -0,0 +1,163 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState, useMemo } from 'react';
+import {
+    StyleSheet,
+    View,
+    TouchableOpacity,
+    Pressable,
+    Linking,
+} from 'react-native';
+
+import { connect } from 'react-redux'
+import {
+    withTheme,
+    Text
+} from 'react-native-paper';
+import { withTranslation } from 'react-i18next';
+
+import { onUpdateRefreshing } from '../../libraries/core';
+import IconsOpenasist from '../../libraries/icons-openasist';
+
+import componentStyles from './styles';
+
+function TimetableEventComponent(props) {
+    const componentName = TimetableEventComponent.name;
+
+    const {
+        theme,
+        t,
+        settings,
+        times,
+        type,
+        title,
+        location,
+        locationUrl,
+        description,
+        starrable,
+        onSelectionChange
+    } = props;
+
+    const isBigFont = settings?.settingsAccessibility?.increaseFontSize ?? false;
+    const [isSelected, setIsSelected] = useState(false);
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    )
+
+    const handleSelectionChange = () => {
+        setIsSelected(isSelected => !isSelected);
+
+        onSelectionChange?.(!isSelected)
+    };
+
+    const accessibilityStartTime = t('accessibility:timetable:startTime') + times?.start.slice(0, 2) + ' ' + t('accessibility:pts:speechTime') + ' ' + (times?.start.slice(3, 5) !== '00' ? times?.start.slice(3, 5) : '') + ',';
+    const accessibilityEndTime = t('accessibility:timetable:endTime') + times?.end.slice(0, 2) + ' ' + t('accessibility:pts:speechTime') + ' ' + (times?.end.slice(3, 5) !== '00' ? times?.end.slice(3, 5) : '') + ',';
+    const courseContainerBigFont = isBigFont ? styles.courseContainerBigFont : null;
+    const titleStyle = isBigFont ? styles.titleBigFont : styles.title;
+
+    return (
+        <View style={[isBigFont ? [styles.card, styles.courseCard] : styles.card, { backgroundColor: 'rgba(0, 95, 80, 0.25)', elevation: 0 }]} onPress={() => { console.log("Clicking is currently not working. Don't try it!") }}>
+            {
+                //times
+                //    ? <View style={[isBigFont ? [styles.courseTimeContainer, styles.courseTimeContainerBigFont] : styles.courseTimeContainer, { backgroundColor: 'rgba(0, 95, 80, 0)' }]}>
+                //        <Text accessibilityLabel={accessibilityStartTime} style={isBigFont ? [styles.timeText, styles.timeTextBig] : styles.timeText}>{times?.start || ''}</Text>
+                //        <View style={styles.verticalSeperatorSmall} />
+                //        <Text accessibilityLabel={accessibilityEndTime} style={isBigFont ? [styles.timeText, styles.timeTextBig] : styles.timeText}>{times?.end || ''}</Text>
+                //    </View>
+                //    : null
+            }
+            {
+                //times ? <View style={styles.verticalSeperator} /> : null
+            }
+            <View style={[styles.otherCourseContainer, { backgroundColor: 'rgba(0, 95, 80, 0)' }]}>
+                {
+                    type || times
+                        ? <Text style={styles.type}>
+                            {
+                                type
+                                    ? <Text style={{ fontWeight: 'bold' }}>
+                                        {type}
+                                    </Text>
+                                    : null
+                            }
+                            {
+                                type && times
+                                    ? ' | '
+                                    : null
+                            }
+                            {
+                                times
+                                    ? `${times?.start} - ${times?.end} `
+                                    : null
+                            }
+                        </Text>
+                        : null
+                }
+                {title ? <Text style={styles.title}>{title}</Text> : null}
+                {
+                    description
+                        ? <Text style={styles.professorText}>
+                            <Text style={styles.professorName}>{description}</Text>
+                        </Text>
+                        : null
+                }
+                {
+                    location
+                        ? <Pressable
+                            onPress={
+                                locationUrl
+                                    ? () => Linking.openURL(locationUrl)
+                                        .catch(
+                                            reason => {
+                                                console.debug(componentName, ':', 'can`t open link', ':', reason);
+                                                alert('Link konnte nicht geöffnet werden.');
+                                            }
+                                        )
+                                    : null
+                            }
+                        >
+                            <Text
+                                style={[styles.location, locationUrl ? styles.locationLink : null]}
+                            >
+                                {location}
+                            </Text>
+                        </Pressable>
+                        : null
+                }
+            </View>
+            {
+                starrable
+                    ? <View style={styles.starPosition}>
+                        <TouchableOpacity onPress={handleSelectionChange}>
+                            <IconsOpenasist icon={isSelected ? 'star-selected' : 'star'} size={25} color='#005F50' />
+                        </TouchableOpacity>
+                    </View>
+                    : null
+            }
+        </View>
+    );
+}
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.timetable.component,
+        pluginStyles: state.pluginReducer.timetable.styles,
+        settings: state.settingReducer
+    };
+};
+
+export default connect(mapStateToProps, { onUpdateRefreshing })(withTranslation()(withTheme(TimetableEventComponent)))

package/components/TimetableEvent/styles.js

@@ -0,0 +1,108 @@
+export default function(theme) {
+    return {
+        card: {
+          marginLeft: theme.paddings.default,
+          marginRight: theme.paddings.default,
+          marginTop:   10,
+          marginBottom: 10,
+          backgroundColor: theme.colors.background,
+          paddingVertical: theme.paddings.small,
+          paddingHorizontal: theme.paddings.default,
+          flex: 1,
+          flexDirection: 'row',
+          shadowColor: theme.colors.shadow,
+          shadowOffset: {
+              width: 0,
+              height: 1,
+          },
+          shadowOpacity: 0.15,
+          shadowRadius: 0.32,
+          elevation: 3
+        },
+        courseCard: {
+          paddingLeft: 5,
+        },
+        verticalSeperator: {
+          height: "100%",
+          marginLeft: theme.paddings.small,
+          width: 1,
+          backgroundColor: theme.colors.listSeperator2,
+        },
+        verticalSeperatorSmall: {
+          height: "15%",
+          width: 1,
+          backgroundColor: theme.colors.listSeperator2,
+
+        },
+        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: {
+          paddingLeft: theme.paddings.small,
+          width:"100%",
+          backgroundColor:theme.colors.background,
+          paddingTop: theme.paddings.xsmall,
+          paddingBottom: theme.paddings.xsmall
+        },
+        courseContainerBigFont: {
+            width: "75%",
+        },
+        type: {
+          fontSize: theme.fontSizes.l,
+          color: theme.colors.lecturerNameText
+        },
+        title: {
+          fontSize: theme.fontSizes.xl,
+          paddingTop: theme.paddings.xsmall,
+        },
+        titleBigFont: {
+            fontSize: theme.fontSizes.xl,
+            paddingTop: theme.paddings.xsmall,
+        },
+        location: {
+          fontSize: theme.fontSizes.subtitle,
+          paddingTop: theme.paddings.xsmall,
+          color: theme.colors.secondaryText,
+        },
+        locationLink: {
+          textDecorationLine: 'underline',
+          color: 'blue'
+        },
+        addLeftRightPadding: {
+          paddingLeft: theme.paddings.xsmall,
+          paddingRight: theme.paddings.xsmall,
+        },
+        professorText: {
+          fontSize: theme.fontSizes.m,
+          paddingTop: theme.paddings.xsmall,
+          color: theme.colors.subtitle
+        },
+        professorName: {
+          color: theme.colors.lecturerNameText
+        },
+        otherCourseContainer:{
+          padding: theme.paddings.xsmall,
+          width: "100%",
+          backgroundColor: theme.colors.background
+        },
+        starPosition:{
+          position: 'absolute',
+          top: 10,
+          right: 10,
+        }
+    }
+};

package/components/TimetableList/index.js

@@ -0,0 +1,180 @@
+/**
+ * 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,
+    TouchableOpacity,
+    View,
+} from 'react-native';
+
+import { connect } from 'react-redux'
+import {
+    useTheme,
+    Text,
+} from "react-native-paper";
+import { useTranslation } from "react-i18next";
+
+import { onUpdateRefreshing } from '../../libraries/core';
+
+import { DateTime } from 'luxon';
+
+import componentStyles from "./styles";
+
+/**
+ * Timetable List Component
+ *
+ * Displays the list for timetable,
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ *
+ * @param {object} props
+ * @param {(course: object) => void} [props.onCourseSelected]
+ */
+function TimetableListComponent({ course, times, settings, onCourseSelected }) {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const { themeStyles, appSettings } = theme;
+
+    const courseTitle = course?.title?.data;
+    const courseType = course?.type?.data;
+    const courseRoom = course?.room?.data;
+    const courseStartDatetime = DateTime.fromISO(course.startDateTime);
+    const courseStarTimeText = courseStartDatetime.isValid
+        ? courseStartDatetime?.toLocaleString(DateTime.TIME_24_SIMPLE)
+        : undefined;
+    const courseEndDatetime = DateTime.fromISO(course.endDateTime);
+    const courseEndTimeText = courseEndDatetime.isValid
+        ? courseEndDatetime?.toLocaleString(DateTime.TIME_24_SIMPLE)
+        : undefined;
+    const courseTimesTextesAvaiable = courseStartDatetime && courseEndTimeText ? true : false;
+    const courseLecturers = course?.lecturer
+        ?.map(lecturer => lecturer.data);
+    const courseLecturersAmount = Array.isArray(courseLecturers)
+        ? courseLecturers.length
+        : 0;
+    const courseInfo = course?.info?.data;
+    const courseUrl = course?.url?.data;
+
+    const courseAccessibilityText = t(
+        'accessibility:timetable:courseSummary',
+        {
+            type: courseType,
+            title: courseTitle,
+            startTime: courseStarTimeText,
+            endTime: courseEndTimeText,
+            room: courseRoom,
+        }
+    );
+
+    const isBigFont = settings.settingsAccessibility.increaseFontSize;
+    const showDetails = appSettings?.modules?.timetable?.showDetails;
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    )
+
+    const courseContainerBigFont = isBigFont ? styles.courseContainerBigFont : null;
+    const titleStyle = isBigFont ? styles.titleBigFont : styles.title;
+    const coursePressable = showDetails &&
+        (
+            courseTitle ||
+            courseType ||
+            courseRoom ||
+            courseLecturersAmount ||
+            courseInfo ||
+            courseUrl ||
+            courseStarTimeText ||
+            courseEndTimeText
+        );
+
+    return (
+        <TouchableOpacity
+            style={isBigFont ? [themeStyles.card, styles.courseCard] : themeStyles.card}
+            accessibilityLabel={courseAccessibilityText}
+            onPress={
+                coursePressable
+                    ? () => onCourseSelected?.(course)
+                    : null
+            }
+            disabled={!coursePressable}
+        >
+            {
+                courseTimesTextesAvaiable
+                    ? <View style={isBigFont ? [styles.courseTimeContainer, styles.courseTimeContainerBigFont] : styles.courseTimeContainer}>
+                        <Text style={isBigFont ? [styles.timeText, styles.timeTextBig] : styles.timeText}>
+                            {courseStarTimeText}
+                        </Text>
+                        <View style={styles.verticalSeperatorSmall} />
+                        <Text style={isBigFont ? [styles.timeText, styles.timeTextBig] : styles.timeText}>
+                            {courseEndTimeText}
+                        </Text>
+                    </View>
+                    : null
+            }
+            {
+                courseTimesTextesAvaiable
+                    ? <View style={styles.verticalSeperator} />
+                    : null
+            }
+            <View style={courseTimesTextesAvaiable ? [styles.courseContainer, courseContainerBigFont] : styles.otherCourseContainer}>
+                {
+                    courseType
+                        ? <Text style={courseTimesTextesAvaiable ? [styles.type, styles.addLeftRightPadding] : styles.type} >
+                            {courseType}
+                        </Text>
+                        : null
+                }
+                {
+                    courseTitle
+                        ? <Text style={courseTimesTextesAvaiable ? [titleStyle, styles.addLeftRightPadding] : styles.title}>
+                            {courseTitle}
+                        </Text>
+                        : null}
+                {
+                    courseRoom
+                        ? <Text style={courseTimesTextesAvaiable ? [styles.room, styles.addLeftRightPadding] : styles.room} >
+                            {courseRoom}
+                        </Text>
+                        : null
+                }
+                {
+                    courseLecturersAmount ?
+                        <Text style={courseTimesTextesAvaiable ? [styles.professorText, styles.addLeftRightPadding] : styles.professorText}>
+                            Tutor:
+                            <Text style={styles.professorName}>
+                                {courseLecturers.join(', ')}
+                            </Text>
+                        </Text>
+                        : null
+                }
+            </View>
+        </TouchableOpacity>
+    );
+}
+
+const mapStateTo = state => {
+    return {
+        pluginComponent: state.pluginReducer.timetable.component,
+        pluginStyles: state.pluginReducer.timetable.styles,
+        settings: state.settingReducer
+    };
+};
+
+export default connect(mapStateTo, { onUpdateRefreshing })(TimetableListComponent)

package/components/TimetableList/styles.js

@@ -0,0 +1,106 @@
+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",
+        },
+        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%",
+            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%",
+        },
+        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%',
+        },
+    }
+};