@olea-bps/components 1.0.7 → 1.0.9

package/TimetableDay/index.js

@@ -81,12 +81,14 @@ function CalendarDay({ selectedDate, theme, settings, calendarScrollOffsetMinute
                         course => (
                             {
                                 title: course.title.data,
-                                start: course.startDateTime,
-                                end: course.endDateTime,
+                                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,
                             }
                         )
                     ) ?? [];
@@ -174,24 +176,8 @@ function CalendarDay({ selectedDate, theme, settings, calendarScrollOffsetMinute
                         swipeEnabled={false}
                         onPressEvent={
                             showDetails
-                                ? (event) => {
-                                    const eventDateISO = DateTime.fromJSDate(event.start).toISODate();
-
-                                    const eventStartTime = event.start.getTime();
-                                    const originalCourse = courses[eventDateISO]
-                                        ?.find(
-                                            course =>
-                                                eventStartTime === course.startDateTime.getTime()
-                                                &&
-                                                event?.title === course?.title?.data
-                                                &&
-                                                event?.professor === course?.lecturer[0]?.data
-                                                &&
-                                                event?.room === course?.room?.data
-                                        );
-
-                                    onCourseSelected(originalCourse);
-                                }
+                                // Wenn eine Vorlesung im Kalender angeklickt wird, wird die ursprüngliche Vorlesung ausgelesen und selektiert
+                                ? (event) => onCourseSelected(event.origine)
                                 : null
                         }
                         scrollOffsetMinutes={calendarScrollOffsetMinutes}
@@ -263,4 +249,4 @@ const mapStateToProps = (state) => {
     };
 };
 
-export default connect(mapStateToProps, { onUpdateRefreshing })(withTranslation()(withTheme(CalendarDay)));
+export default connect(mapStateToProps, { onUpdateRefreshing })(withTranslation()(withTheme(CalendarDay)));

package/TimetableList/index.js

@@ -15,21 +15,23 @@
 import { useMemo } from 'react';
 import {
     StyleSheet,
+    TouchableOpacity,
     View,
 } from 'react-native';
 
 import { connect } from 'react-redux'
-import { useTheme, Text, Button } from "react-native-paper";
+import {
+    useTheme,
+    Text,
+} from "react-native-paper";
 import { useTranslation } from "react-i18next";
 
 import { onUpdateRefreshing } from "@olea-bps/core";
 
-import IconsOpenasist from "@olea-bps/icons-openasist";
+import { DateTime } from 'luxon';
 
 import componentStyles from "./styles";
 
-
-
 /**
  * Timetable List Component
  *
@@ -47,10 +49,38 @@ import componentStyles from "./styles";
 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 { 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;
@@ -60,48 +90,82 @@ function TimetableListComponent({ course, times, settings, onCourseSelected }) {
         [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;
-
+    const coursePressable = showDetails &&
+        (
+            courseTitle ||
+            courseType ||
+            courseRoom ||
+            courseLecturersAmount ||
+            courseInfo ||
+            courseUrl ||
+            courseStarTimeText ||
+            courseEndTimeText
+        );
 
     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
+        <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>
-            {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>
+        </TouchableOpacity>
     );
 }
 

package/TimetableList/styles.js

@@ -19,7 +19,6 @@ export default function (theme) {
             width: "15%",
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: theme.colors.background
         },
         courseTimeContainerBigFont: {
             width: "25%",
@@ -37,7 +36,6 @@ export default function (theme) {
             flexDirection: "column",
             paddingLeft: theme.paddings.small,
             width: "85%",
-            backgroundColor: theme.colors.background,
             paddingTop: theme.paddings.xsmall,
             paddingBottom: theme.paddings.xsmall
         },
@@ -76,7 +74,6 @@ export default function (theme) {
         otherCourseContainer: {
             padding: theme.paddings.xsmall,
             width: "100%",
-            backgroundColor: theme.colors.background
         },
         btnPosition: {
             position: 'absolute',

package/TimetableWeek/index.js

@@ -89,12 +89,14 @@ function CalendarWeek(props) {
               course => (
                 {
                   title: course.title.data,
-                  start: course.startDateTime,
-                  end: course.endDateTime,
+                  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,
                 }
               )
             ) ?? [];
@@ -170,24 +172,8 @@ function CalendarWeek(props) {
             weekStartsOn={1}
             date={route.weekbeginISODate}
             onPressEvent={
-              (event) => {
-                const eventDateISO = DateTime.fromJSDate(event.start).toISODate();
-
-                const eventStartTime = event.start.getTime();
-                const originalCourse = courses[eventDateISO]
-                  ?.find(
-                    course =>
-                      eventStartTime === course.startDateTime.getTime()
-                      &&
-                      event?.title === course?.title?.data
-                      &&
-                      event?.professor === course?.lecturer[0]?.data
-                      &&
-                      event?.room === course?.room?.data
-                  );
-
-                onCourseSelected(originalCourse);
-              }
+                            // Wenn eine Vorlesung im Kalender angeklickt wird, wird die ursprüngliche Vorlesung ausgelesen und selektiert
+                      (event) => onCourseSelected(event.origine)
             }
             swipeEnabled={false}
             scrollOffsetMinutes={calendarScrollOffsetMinutes}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olea-bps/components",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Consolidated components for OLEA",
   "main": "index.js",
   "repository": "https://github.com/tuc-urz/olea.git",
@@ -17,7 +17,7 @@
     "react-native-paper": "^5.14.5",
     "@olea-bps/core": "^1.0.0",
     "@olea-bps/context-connectivity": "^1.0.0",
-    "@olea-bps/context-event": "^1.0.0",
+    "@olea-bps/context-event": "^1.0.4",
     "@olea-bps/context-news": "^1.0.0",
     "@olea-bps/context-canteen": "^1.0.0",
     "@olea-bps/context-timetable": "^1.0.0",