@olea-bps/components 1.0.0

package/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 '@olea-bps/core';
+import IconsOpenasist from '@olea-bps/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/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/TimetableList/index.js

@@ -0,0 +1,116 @@
+/**
+ * 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,
+    View,
+} from 'react-native';
+
+import { connect } from 'react-redux'
+import { useTheme, Text, Button } from "react-native-paper";
+import { useTranslation } from "react-i18next";
+
+import { onUpdateRefreshing } from "@olea-bps/core";
+
+import IconsOpenasist from "@olea-bps/icons-openasist";
+
+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 { colors, themeStyles, appSettings } = theme;
+
+    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 isBigFont = settings.settingsAccessibility.increaseFontSize;
+    const showDetails = appSettings?.modules?.timetable?.showDetails;
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    )
+
+    const renderTimeSlot = (
+        <View style={isBigFont ? [styles.courseTimeContainer, styles.courseTimeContainerBigFont] : styles.courseTimeContainer}>
+            <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>
+    );
+    var renderVerticalSeperator = (
+        <View
+            style={styles.verticalSeperator}
+        />
+    );
+
+    const { type, title, room, lecturer, info, url } = course;
+
+    const courseContainerBigFont = isBigFont ? styles.courseContainerBigFont : null;
+    const titleStyle = isBigFont ? styles.titleBigFont : styles.title;
+
+
+    return (
+
+        <View style={isBigFont ? [themeStyles.card, styles.courseCard] : themeStyles.card}>
+            {times ? renderTimeSlot : null}
+            {times ? renderVerticalSeperator : null}
+            <View style={times ? [styles.courseContainer, courseContainerBigFont] : styles.otherCourseContainer}>
+                {(type && type.data) ? <Text style={times ? [styles.type, styles.addLeftRightPadding] : styles.type} >{type.data}</Text> : null}
+                {(title && title.data) ? <Text style={times ? [titleStyle, styles.addLeftRightPadding] : styles.title}>{title.data}</Text> : null}
+                {(room && room.data) ? <Text style={times ? [styles.room, styles.addLeftRightPadding] : styles.room} >{room.data}</Text> : null}
+                {(lecturer && lecturer[0] && lecturer[0].data) ?
+                    <Text style={times ? [styles.professorText, styles.addLeftRightPadding] : styles.professorText}>
+                        Tutor: <Text style={styles.professorName}>{lecturer.map(lecturer => lecturer.data).join(',') || ''}</Text>
+                    </Text> : null
+                }
+            </View>
+            {showDetails && (room?.data || info?.data || url?.data) ?
+                <View style={styles.btnPosition}>
+                    <Button style={styles.btnAddionals} onPress={() => onCourseSelected?.(course)}>
+                        <IconsOpenasist icon={"info"} color={colors.secondaryText} size={22} />
+                    </Button>
+                </View>
+                : null}
+        </View>
+    );
+}
+
+const mapStateTo = state => {
+    return {
+        pluginComponent: state.pluginReducer.timetable.component,
+        pluginStyles: state.pluginReducer.timetable.styles,
+        settings: state.settingReducer
+    };
+};
+
+export default connect(mapStateTo, { onUpdateRefreshing })(TimetableListComponent)

package/TimetableList/styles.js

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

package/TimetableMonth/index.js

@@ -0,0 +1,156 @@
+/**
+ * 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, useEffect, useRef, useCallback } from 'react';
+import { Text, TouchableOpacity, StyleSheet, View } from 'react-native';
+import { connect } from 'react-redux';
+import { withTheme } from 'react-native-paper';
+import { withTranslation } from 'react-i18next';
+import { onUpdateRefreshing } from '@olea-bps/core';
+import componentStyles from "./styles";
+import { Calendar } from 'react-native-big-calendar';
+import { useCourses } from '@olea-bps/context-timetable';
+import CourseDetailDialog from '../component-course-detail-dialog';
+import CalendarStrip from 'react-native-calendar-strip';
+import { DateTime } from 'luxon';
+
+function CalendarMonth(props) {
+  const { theme, setMonth, today, locale, onMonthChanged } = props;
+  const styles = useMemo(
+    () => StyleSheet.create(componentStyles(theme)),
+    [theme]
+  );
+
+  const [courses, refreshCourses] = useCourses();
+  const selectedDate = useRef(new Date());
+  const [selectedDateState, setSelectedDateState] = useState(selectedDate.current);
+  const [dialogVisible, setDialogVisible] = useState(false);
+  const [selectedEvent, setSelectedEvent] = useState(null);
+
+  const selectedDateStartISO = DateTime.fromISO(JSON.stringify(selectedDate.current).slice(1, -1)).startOf('month').toISODate();
+  const selectedDateEndISO = DateTime.fromISO(JSON.stringify(selectedDate.current).slice(1, -1)).endOf('month').toISODate();
+
+  useEffect(() => {
+    refreshCourses(selectedDateStartISO, selectedDateEndISO);
+  }, [selectedDateStartISO, selectedDateEndISO]);
+
+  const handleDateChange = (date) => {
+    selectedDate.current = date;
+    setSelectedDateState(date);
+  };
+
+  const monthCourses = useMemo(() => {
+    const startDate = DateTime.fromISO(selectedDateStartISO);
+    const daysInMonth = startDate.daysInMonth;
+    const daysArray = Array.from({ length: daysInMonth }, (_, index) => startDate.plus({ days: index }).toISODate());
+    return daysArray.reduce((acc, date) => acc.concat(courses?.[date] ?? []), []);
+  }, [selectedDateStartISO, courses]);
+
+  const monthEvents = useMemo(() => {
+    try {
+      return monthCourses
+        .map(course => {
+          return {
+            title: course.title.data,
+            start: course.startDateTime,
+            end: course.endDateTime,
+            color: '#a3f2c5',
+            type: course.type?.data,
+            professor: course.lecturer[0]?.data,
+            room: course.room.data
+          };
+        });
+    } catch (error) {
+      console.error('Error in useMemo for monthEvents:', error);
+      return [];
+    }
+  }, [monthCourses]);
+
+  useEffect(() => {
+    handleDateChange(today);
+    setMonth(today.getMonth());
+  }, [today, setMonth]);
+
+  const renderEvent = useCallback((event, touchableOpacityProps) => {
+    const { style, ...restTouchableOpacityProps } = touchableOpacityProps;
+
+    return (
+      <TouchableOpacity {...restTouchableOpacityProps}
+        style={[style, styles.event]}
+      >
+        <Text style={styles.eventTitle} numberOfLines={1}>
+          {event.title}
+        </Text>
+      </TouchableOpacity>
+    );
+  }, [styles]);
+
+  const renderHeader = useCallback(() => (
+    <View pointerEvents="none">
+      <CalendarStrip
+        style={styles.strip}
+        locale={locale}
+        selectedDate={today}
+        showDayNumber={false}
+        dateNameStyle={{ fontWeight: 'bold', fontSize: 14 }}
+        highlightDateNameStyle={{ fontWeight: 'bold', fontSize: 14 }}
+        highlightDateContainerStyle={styles.highlightDateContainer}
+        iconStyle={{ display: 'none' }}
+        showMonth={false}
+        startingDate={selectedDate.current}
+      />
+
+    </View>
+  ), [selectedDate]);
+
+  return (
+    <>
+      <Calendar
+        events={monthEvents}
+        renderEvent={renderEvent}
+        renderHeaderForMonthView={renderHeader}
+        date={selectedDate.current}
+        height={800}
+        mode={'month'}
+        headerContentStyle={{ backgroundColor: 'transparent' }}
+        weekStartsOn={1}
+        onSwipeEnd={(date) => {
+          handleDateChange(date);
+          setMonth(new Date(date).getMonth());
+        }}
+        onPressEvent={(event) => {
+          setDialogVisible(true);
+          setSelectedEvent(event);
+        }}
+      />
+      {dialogVisible && selectedEvent && (
+        <CourseDetailDialog
+          visible={dialogVisible}
+          hideDialog={() => setDialogVisible(false)}
+          course={selectedEvent}
+          styles={styles}
+          {...props}
+        />
+      )}
+    </>
+  );
+}
+
+const mapStateToProps = (state) => {
+  return {
+    settings: state.settingReducer,
+  };
+};
+
+export default connect(mapStateToProps, { onUpdateRefreshing })(withTranslation()(withTheme(CalendarMonth)));

package/TimetableMonth/styles.js

@@ -0,0 +1,29 @@
+export default function (theme) {
+    return {
+        event: {
+            padding: 4,
+            borderRadius: 4,
+            backgroundColor: '#a3f2c5',
+            margin: 2,
+            overflow: 'hidden',
+        },
+        eventTitle: {
+            color: '#000000',
+            fontSize: 12,
+        },
+        strip: {
+            height: 65,
+            paddingTop: 5,
+            paddingBottom: 5,
+            backgroundColor: '#fff',
+            elevation: 4,
+        },
+        highlightDateContainer: {
+            borderRadius: 100,
+            borderWidth: 3,
+            borderColor: 'red',
+            height: 48,
+            width: 48,
+        }
+    };
+}