@olea-bps/base 1.0.0

package/components/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 '../../libraries/core';
+import componentStyles from "./styles";
+import { Calendar } from 'react-native-big-calendar';
+import { useCourses } from '../../context/context-timetable';
+import CourseDetailDialog from '../CourseDetailDialog';
+import CalendarStrip from 'react-native-calendar-strip';
+import { DateTime } from 'luxon';
+
+function CalendarMonth(props) {
+  const { theme, setMonth, today, locale, onMonthChanged, calendarHeight } = 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={calendarHeight}
+        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/components/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,
+        }
+    };
+}

package/components/TimetableWeek/index.js

@@ -0,0 +1,230 @@
+/**
+ * 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, useCallback } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, useWindowDimensions } from 'react-native';
+import { connect } from 'react-redux';
+import { withTheme } from 'react-native-paper';
+import { withTranslation } from 'react-i18next';
+import { Calendar } from 'react-native-big-calendar';
+import { useCourses } from '../../context/context-timetable';
+import CalendarStrip from 'react-native-calendar-strip';
+import { DateTime, Duration } from 'luxon';
+import { TabView } from 'react-native-tab-view';
+import { onUpdateRefreshing } from '../../libraries/core';
+import moment from 'moment';
+import 'moment/locale/de';
+
+import componentStyles from './styles';
+
+/**
+ * Die Zeitspanne, welche vor und nach heute angezeigt werden soll.
+ */
+const daysTabDuration = Duration.fromISO('P6M');
+
+/**
+ *
+ * @param {object} props
+ * @param {(DateTime)=> void} props.onWeekChanged
+ * @returns
+ */
+function CalendarWeek(props) {
+  const { selectedISOWeek, theme, settings, calendarScrollOffsetMinutes, calendarHeight, onWeekChanged, onCourseSelected } = props;
+
+  const styles = useMemo(
+    () => StyleSheet.create(componentStyles(theme)),
+    [theme]
+  );
+
+  const { width } = useWindowDimensions();
+
+  const [courses] = useCourses();
+
+  const language = settings?.settingsGeneral?.language;
+
+  const selectedWeekDate = useMemo(
+    () => DateTime.fromISO(selectedISOWeek),
+    [selectedISOWeek]
+  );
+
+  const now = DateTime.now()
+  const todayWeekNumber = now.weekNumber;
+  const todayWeekYearNumber = now.weekYear;
+
+  const weeksTabViewRoutes = useMemo(
+    () => {
+      const todayWeekYear = DateTime.fromObject({ weekNumber: todayWeekNumber, weekYear: todayWeekYearNumber }).startOf('week');
+      const beginWeekYear = todayWeekYear.minus(daysTabDuration).startOf('week');
+      const endWeekYear = todayWeekYear.plus(daysTabDuration).endOf('week');
+      let currentWeekYear = DateTime.fromObject(beginWeekYear.toObject());
+
+      const weekYearRoutes = [];
+
+      while (currentWeekYear <= endWeekYear) {
+        const currentISOWeekYear = currentWeekYear.toISOWeekDate();
+
+        const currentWeekYearBeginDate = currentWeekYear.startOf('week');
+        const currentWeekYearEndDate = currentWeekYear.endOf('week');
+        let currentWeekYearDate = DateTime.fromObject(currentWeekYearBeginDate.toObject());
+
+        const currentWeekYearCourses = [];
+
+        const eventColor = theme.colors.eventContainerSidebar;
+
+        while (currentWeekYearDate <= currentWeekYearEndDate) {
+          const currentWeekYearISODate = currentWeekYearDate.toISODate();
+          const currentWeekYearDateCourses = courses?.[currentWeekYearISODate]
+            ?.map(
+              course => (
+                {
+                  title: course.title.data,
+                  start: new Date(Date.parse(course.startDateTime)),
+                  end: new Date(Date.parse(course.endDateTime)),
+                  color: eventColor,
+                  type: course.type?.data,
+                  professor: course.lecturer[0]?.data,
+                  room: course.room.data,
+                  // Anfügen des Ürsprügnlichen Vorlesungsobjektes, damit es beim Klick zur Verfügung steht
+                  origine: course,
+                }
+              )
+            ) ?? [];
+
+          currentWeekYearCourses.push(currentWeekYearDateCourses);
+
+          currentWeekYearDate = currentWeekYearDate.plus({ day: 1 });
+        }
+
+        weekYearRoutes.push(
+          {
+            key: currentISOWeekYear,
+            weekbeginISODate: currentWeekYearBeginDate.toISODate(),
+            week: currentWeekYear.weekNumber,
+            weekYear: currentWeekYear.weekYear,
+            events: currentWeekYearCourses.flat(),
+          }
+        );
+
+        currentWeekYear = currentWeekYear.plus({ week: 1 });
+      }
+
+      return weekYearRoutes;
+    },
+    [todayWeekNumber, todayWeekYearNumber, courses]
+  );
+
+  const weeksTabViewIndexes = useMemo(
+    () => weeksTabViewRoutes
+      .reduce(
+        (accumulator, currentRoute, currentIndex) =>
+        (
+          {
+            ...accumulator,
+            [currentRoute.key]: currentIndex
+          }
+        ),
+        {}
+      ),
+    [weeksTabViewRoutes]
+  )
+
+  const weeksTabViewIndex = weeksTabViewIndexes[selectedISOWeek];
+
+  const renderEvent = useCallback((event, touchableOpacityProps) => {
+    const { style, ...restTouchableOpacityProps } = touchableOpacityProps;
+    return (
+      <>
+        <TouchableOpacity
+          {...restTouchableOpacityProps}
+          style={[style, styles.eventContainer, { borderTopColor: event.color || '#000' }]}
+        >
+          <View style={styles.eventHeader}>
+            <Text style={styles.eventTitle} numberOfLines={2} ellipsizeMode={'clip'} >{event.title}</Text>
+          </View>
+          <Text style={styles.eventRoom} numberOfLines={1} ellipsizeMode={'clip'}>{event.room}</Text>
+        </TouchableOpacity>
+      </>
+    );
+  }, [styles]);
+
+  const renderScene = useCallback(
+    ({ route }) => {
+      return (
+        <View style={{ flex: 1, width: width }}>
+          <Calendar
+            events={route.events}
+            renderEvent={renderEvent}
+            renderHeader={() => null}
+            mode={'week'}
+            height={calendarHeight}
+            headerContentStyle={{ backgroundColor: 'transparent' }}
+            weekStartsOn={1}
+            date={route.weekbeginISODate}
+            onPressEvent={
+                            // Wenn eine Vorlesung im Kalender angeklickt wird, wird die ursprüngliche Vorlesung ausgelesen und selektiert
+                      (event) => onCourseSelected(event.origine)
+            }
+            swipeEnabled={false}
+            scrollOffsetMinutes={calendarScrollOffsetMinutes}
+            hourStyle={styles.hourStyle}
+          />
+        </View>
+      );
+    },
+    [styles, width, courses, renderEvent]
+  );
+
+  return (
+    <>
+      <View style={styles.viewStrip}>
+        <View pointerEvents="none">
+          <CalendarStrip
+            style={styles.strip}
+            locale={{
+              name: language,
+              config: moment.localeData(language)
+            }}
+            highlightDateContainerStyle={styles.highlightDateContainer}
+            showMonth={false}
+            iconStyle={{ display: 'none' }}
+            startingDate={selectedWeekDate.plus({ day: 1 }).toJSDate()}
+            pointerEvents={'none'}
+          />
+        </View>
+      </View>
+
+      <TabView
+        navigationState={{ index: weeksTabViewIndex, routes: weeksTabViewRoutes }}
+        renderTabBar={() => null}
+        lazy
+        lazyPreloadDistance={2}
+        onIndexChange={
+          (index) => {
+            const deltaISOWeekYear = weeksTabViewRoutes?.[index]?.key;
+            onWeekChanged(deltaISOWeekYear);
+          }
+        }
+        renderScene={renderScene}
+      />
+    </>
+  );
+}
+
+const mapStateToProps = (state) => {
+  return {
+    settings: state.settingReducer,
+  };
+};
+
+export default connect(mapStateToProps, { onUpdateRefreshing })(withTranslation()(withTheme(CalendarWeek)));

package/components/TimetableWeek/styles.js

@@ -0,0 +1,58 @@
+export default function (theme) {
+	return {
+		eventContainer: {
+			borderTopWidth: 8,
+			paddingTop: 5,
+			paddingLeft: 5,
+			paddingBottom: 10,
+			marginBottom: 10,
+			backgroundColor: theme.colors.eventContainerBackground,
+			borderRadius: 8,
+			shadowColor: '#000',
+			shadowOffset: { width: 0, height: 2 },
+			shadowOpacity: 0.3,
+			shadowRadius: 3,
+			elevation: 5,
+			overflow: 'visible'
+		},
+		eventTitle: {
+			fontSize: 12,
+			fontWeight: 'bold',
+		},
+		eventRoom: {
+			fontSize: 11,
+			color: '#757575',
+		},
+		highlightDateContainer: {
+			borderRadius: 100,
+			borderWidth: 3,
+			borderColor: 'red',
+			height: 48,
+			width: 48,
+		},
+		line: {
+			backgroundColor: '#000',
+		},
+		strip: {
+			height: 65,
+			width: '89%',
+			paddingTop: 5,
+			paddingBottom: 5,
+			backgroundColor: '#fff',
+			alignSelf: 'flex-end'
+		},
+		viewStrip: {
+			height: 65,
+			backgroundColor: '#fff',
+			elevation: 4,
+			shadowColor: '#000',
+			shadowOffset: { width: 0, height: 3 },
+			shadowOpacity: 0.2,
+			shadowRadius: 2,
+		},
+		hourStyle: {
+			fontSize: 12,
+			color: theme.colors.text,
+		},
+	};
+}