forked from vergnet/application-amicale
Fix planning management to match new api
This commit is contained in:
parent
dafd454a42
commit
ea7321eb9d
6 changed files with 33 additions and 140 deletions
|
@ -4,12 +4,12 @@ import * as React from 'react';
|
||||||
import {StyleSheet, View} from 'react-native';
|
import {StyleSheet, View} from 'react-native';
|
||||||
import i18n from 'i18n-js';
|
import i18n from 'i18n-js';
|
||||||
import {Avatar, Button, Card, TouchableRipple} from 'react-native-paper';
|
import {Avatar, Button, Card, TouchableRipple} from 'react-native-paper';
|
||||||
import {getFormattedEventTime, isDescriptionEmpty} from '../../utils/Planning';
|
import {getTimeOnlyString, isDescriptionEmpty} from '../../utils/Planning';
|
||||||
import CustomHTML from '../Overrides/CustomHTML';
|
import CustomHTML from '../Overrides/CustomHTML';
|
||||||
import type {EventType} from '../../screens/Home/HomeScreen';
|
import type {PlanningEventType} from '../../utils/Planning';
|
||||||
|
|
||||||
type PropsType = {
|
type PropsType = {
|
||||||
event?: EventType | null,
|
event?: PlanningEventType | null,
|
||||||
clickAction: () => void,
|
clickAction: () => void,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -62,19 +62,13 @@ class PreviewEventDashboardItem extends React.Component<PropsType> {
|
||||||
{hasImage ? (
|
{hasImage ? (
|
||||||
<Card.Title
|
<Card.Title
|
||||||
title={event.title}
|
title={event.title}
|
||||||
subtitle={getFormattedEventTime(
|
subtitle={getTimeOnlyString(event.date_begin)}
|
||||||
event.date_begin,
|
|
||||||
event.date_end,
|
|
||||||
)}
|
|
||||||
left={getImage}
|
left={getImage}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Card.Title
|
<Card.Title
|
||||||
title={event.title}
|
title={event.title}
|
||||||
subtitle={getFormattedEventTime(
|
subtitle={getTimeOnlyString(event.date_begin)}
|
||||||
event.date_begin,
|
|
||||||
event.date_end,
|
|
||||||
)}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{!isEmpty ? (
|
{!isEmpty ? (
|
||||||
|
|
|
@ -28,6 +28,7 @@ import MascotPopup from '../../components/Mascot/MascotPopup';
|
||||||
import DashboardManager from '../../managers/DashboardManager';
|
import DashboardManager from '../../managers/DashboardManager';
|
||||||
import type {ServiceItemType} from '../../managers/ServicesManager';
|
import type {ServiceItemType} from '../../managers/ServicesManager';
|
||||||
import {getDisplayEvent, getFutureEvents} from '../../utils/Home';
|
import {getDisplayEvent, getFutureEvents} from '../../utils/Home';
|
||||||
|
import type {PlanningEventType} from '../../utils/Planning';
|
||||||
// import DATA from "../dashboard_data.json";
|
// import DATA from "../dashboard_data.json";
|
||||||
|
|
||||||
const DATA_URL =
|
const DATA_URL =
|
||||||
|
@ -49,24 +50,12 @@ export type FeedItemType = {
|
||||||
page_id: string,
|
page_id: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
export type EventType = {
|
|
||||||
id: number,
|
|
||||||
title: string,
|
|
||||||
logo: string | null,
|
|
||||||
date_begin: string,
|
|
||||||
date_end: string,
|
|
||||||
description: string,
|
|
||||||
club: string,
|
|
||||||
category_id: number,
|
|
||||||
url: string,
|
|
||||||
};
|
|
||||||
|
|
||||||
export type FullDashboardType = {
|
export type FullDashboardType = {
|
||||||
today_menu: Array<{[key: string]: {...}}>,
|
today_menu: Array<{[key: string]: {...}}>,
|
||||||
proximo_articles: number,
|
proximo_articles: number,
|
||||||
available_dryers: number,
|
available_dryers: number,
|
||||||
available_washers: number,
|
available_washers: number,
|
||||||
today_events: Array<EventType>,
|
today_events: Array<PlanningEventType>,
|
||||||
available_tutorials: number,
|
available_tutorials: number,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -193,7 +182,7 @@ class HomeScreen extends React.Component<PropsType, StateType> {
|
||||||
* @param content
|
* @param content
|
||||||
* @return {*}
|
* @return {*}
|
||||||
*/
|
*/
|
||||||
getDashboardEvent(content: Array<EventType>): React.Node {
|
getDashboardEvent(content: Array<PlanningEventType>): React.Node {
|
||||||
const futureEvents = getFutureEvents(content);
|
const futureEvents = getFutureEvents(content);
|
||||||
const displayEvent = getDisplayEvent(futureEvents);
|
const displayEvent = getDisplayEvent(futureEvents);
|
||||||
// const clickPreviewAction = () =>
|
// const clickPreviewAction = () =>
|
||||||
|
|
|
@ -5,7 +5,7 @@ import {View} from 'react-native';
|
||||||
import {Card} from 'react-native-paper';
|
import {Card} from 'react-native-paper';
|
||||||
import i18n from 'i18n-js';
|
import i18n from 'i18n-js';
|
||||||
import {StackNavigationProp} from '@react-navigation/stack';
|
import {StackNavigationProp} from '@react-navigation/stack';
|
||||||
import {getDateOnlyString, getFormattedEventTime} from '../../utils/Planning';
|
import {getDateOnlyString, getTimeOnlyString} from '../../utils/Planning';
|
||||||
import DateManager from '../../managers/DateManager';
|
import DateManager from '../../managers/DateManager';
|
||||||
import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen';
|
import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen';
|
||||||
import {apiRequest, ERROR_TYPE} from '../../utils/WebData';
|
import {apiRequest, ERROR_TYPE} from '../../utils/WebData';
|
||||||
|
@ -96,12 +96,9 @@ class PlanningDisplayScreen extends React.Component<PropsType, StateType> {
|
||||||
const {navigation} = this.props;
|
const {navigation} = this.props;
|
||||||
const {displayData} = this;
|
const {displayData} = this;
|
||||||
if (displayData == null) return null;
|
if (displayData == null) return null;
|
||||||
let subtitle = getFormattedEventTime(
|
let subtitle = getTimeOnlyString(displayData.date_begin);
|
||||||
displayData.date_begin,
|
|
||||||
displayData.date_end,
|
|
||||||
);
|
|
||||||
const dateString = getDateOnlyString(displayData.date_begin);
|
const dateString = getDateOnlyString(displayData.date_begin);
|
||||||
if (dateString !== null)
|
if (dateString !== null && subtitle != null)
|
||||||
subtitle += ` | ${DateManager.getInstance().getTranslatedDate(
|
subtitle += ` | ${DateManager.getInstance().getTranslatedDate(
|
||||||
dateString,
|
dateString,
|
||||||
)}`;
|
)}`;
|
||||||
|
|
|
@ -12,7 +12,7 @@ import {
|
||||||
generateEventAgenda,
|
generateEventAgenda,
|
||||||
getCurrentDateString,
|
getCurrentDateString,
|
||||||
getDateOnlyString,
|
getDateOnlyString,
|
||||||
getFormattedEventTime,
|
getTimeOnlyString,
|
||||||
} from '../../utils/Planning';
|
} from '../../utils/Planning';
|
||||||
import CustomAgenda from '../../components/Overrides/CustomAgenda';
|
import CustomAgenda from '../../components/Overrides/CustomAgenda';
|
||||||
import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
|
import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
|
||||||
|
@ -198,7 +198,7 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
|
||||||
<Divider />
|
<Divider />
|
||||||
<List.Item
|
<List.Item
|
||||||
title={item.title}
|
title={item.title}
|
||||||
description={getFormattedEventTime(item.date_begin, item.date_end)}
|
description={getTimeOnlyString(item.date_begin)}
|
||||||
left={(): React.Node => (
|
left={(): React.Node => (
|
||||||
<Avatar.Image
|
<Avatar.Image
|
||||||
source={{uri: item.logo}}
|
source={{uri: item.logo}}
|
||||||
|
@ -215,7 +215,7 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
|
||||||
<Divider />
|
<Divider />
|
||||||
<List.Item
|
<List.Item
|
||||||
title={item.title}
|
title={item.title}
|
||||||
description={getFormattedEventTime(item.date_begin, item.date_end)}
|
description={getTimeOnlyString(item.date_begin)}
|
||||||
onPress={onPress}
|
onPress={onPress}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import {stringToDate} from './Planning';
|
import {stringToDate} from './Planning';
|
||||||
import type {EventType} from '../screens/Home/HomeScreen';
|
import type {PlanningEventType} from './Planning';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Gets the time limit depending on the current day:
|
* Gets the time limit depending on the current day:
|
||||||
|
@ -20,20 +20,6 @@ export function getTodayEventTimeLimit(): Date {
|
||||||
return now;
|
return now;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets the duration (in milliseconds) of an event
|
|
||||||
*
|
|
||||||
* @param event {EventType}
|
|
||||||
* @return {number} The number of milliseconds
|
|
||||||
*/
|
|
||||||
export function getEventDuration(event: EventType): number {
|
|
||||||
const start = stringToDate(event.date_begin);
|
|
||||||
const end = stringToDate(event.date_end);
|
|
||||||
let duration = 0;
|
|
||||||
if (start != null && end != null) duration = end - start;
|
|
||||||
return duration;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Gets events starting after the limit
|
* Gets events starting after the limit
|
||||||
*
|
*
|
||||||
|
@ -42,11 +28,11 @@ export function getEventDuration(event: EventType): number {
|
||||||
* @return {Array<Object>}
|
* @return {Array<Object>}
|
||||||
*/
|
*/
|
||||||
export function getEventsAfterLimit(
|
export function getEventsAfterLimit(
|
||||||
events: Array<EventType>,
|
events: Array<PlanningEventType>,
|
||||||
limit: Date,
|
limit: Date,
|
||||||
): Array<EventType> {
|
): Array<PlanningEventType> {
|
||||||
const validEvents = [];
|
const validEvents = [];
|
||||||
events.forEach((event: EventType) => {
|
events.forEach((event: PlanningEventType) => {
|
||||||
const startDate = stringToDate(event.date_begin);
|
const startDate = stringToDate(event.date_begin);
|
||||||
if (startDate != null && startDate >= limit) {
|
if (startDate != null && startDate >= limit) {
|
||||||
validEvents.push(event);
|
validEvents.push(event);
|
||||||
|
@ -55,44 +41,19 @@ export function getEventsAfterLimit(
|
||||||
return validEvents;
|
return validEvents;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets the event with the longest duration in the given array.
|
|
||||||
* If all events have the same duration, return the first in the array.
|
|
||||||
*
|
|
||||||
* @param events
|
|
||||||
*/
|
|
||||||
export function getLongestEvent(events: Array<EventType>): EventType {
|
|
||||||
let longestEvent = events[0];
|
|
||||||
let longestTime = 0;
|
|
||||||
events.forEach((event: EventType) => {
|
|
||||||
const time = getEventDuration(event);
|
|
||||||
if (time > longestTime) {
|
|
||||||
longestTime = time;
|
|
||||||
longestEvent = event;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return longestEvent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Gets events that have not yet ended/started
|
* Gets events that have not yet ended/started
|
||||||
*
|
*
|
||||||
* @param events
|
* @param events
|
||||||
*/
|
*/
|
||||||
export function getFutureEvents(events: Array<EventType>): Array<EventType> {
|
export function getFutureEvents(
|
||||||
|
events: Array<PlanningEventType>,
|
||||||
|
): Array<PlanningEventType> {
|
||||||
const validEvents = [];
|
const validEvents = [];
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
events.forEach((event: EventType) => {
|
events.forEach((event: PlanningEventType) => {
|
||||||
const startDate = stringToDate(event.date_begin);
|
const startDate = stringToDate(event.date_begin);
|
||||||
const endDate = stringToDate(event.date_end);
|
if (startDate != null && startDate > now) validEvents.push(event);
|
||||||
if (startDate != null) {
|
|
||||||
if (startDate > now) validEvents.push(event);
|
|
||||||
else if (endDate != null) {
|
|
||||||
if (endDate > now || endDate < startDate)
|
|
||||||
// Display event if it ends the following day
|
|
||||||
validEvents.push(event);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
return validEvents;
|
return validEvents;
|
||||||
}
|
}
|
||||||
|
@ -101,23 +62,19 @@ export function getFutureEvents(events: Array<EventType>): Array<EventType> {
|
||||||
* Gets the event to display in the preview
|
* Gets the event to display in the preview
|
||||||
*
|
*
|
||||||
* @param events
|
* @param events
|
||||||
* @return {EventType | null}
|
* @return {PlanningEventType | null}
|
||||||
*/
|
*/
|
||||||
export function getDisplayEvent(events: Array<EventType>): EventType | null {
|
export function getDisplayEvent(
|
||||||
|
events: Array<PlanningEventType>,
|
||||||
|
): PlanningEventType | null {
|
||||||
let displayEvent = null;
|
let displayEvent = null;
|
||||||
if (events.length > 1) {
|
if (events.length > 1) {
|
||||||
const eventsAfterLimit = getEventsAfterLimit(
|
const eventsAfterLimit = getEventsAfterLimit(
|
||||||
events,
|
events,
|
||||||
getTodayEventTimeLimit(),
|
getTodayEventTimeLimit(),
|
||||||
);
|
);
|
||||||
if (eventsAfterLimit.length > 0) {
|
if (eventsAfterLimit.length > 0) [displayEvent] = eventsAfterLimit;
|
||||||
if (eventsAfterLimit.length === 1) [displayEvent] = eventsAfterLimit;
|
else [displayEvent] = events;
|
||||||
else displayEvent = getLongestEvent(events);
|
} else if (events.length === 1) [displayEvent] = events;
|
||||||
} else {
|
|
||||||
displayEvent = getLongestEvent(events);
|
|
||||||
}
|
|
||||||
} else if (events.length === 1) {
|
|
||||||
[displayEvent] = events;
|
|
||||||
}
|
|
||||||
return displayEvent;
|
return displayEvent;
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,13 +3,13 @@
|
||||||
export type PlanningEventType = {
|
export type PlanningEventType = {
|
||||||
id: number,
|
id: number,
|
||||||
title: string,
|
title: string,
|
||||||
logo: string,
|
|
||||||
date_begin: string,
|
date_begin: string,
|
||||||
date_end: string,
|
|
||||||
description: string,
|
|
||||||
club: string,
|
club: string,
|
||||||
category_id: number,
|
category_id: number,
|
||||||
|
description: string,
|
||||||
|
place: string,
|
||||||
url: string,
|
url: string,
|
||||||
|
logo: string | null,
|
||||||
};
|
};
|
||||||
|
|
||||||
// Regex used to check date string validity
|
// Regex used to check date string validity
|
||||||
|
@ -120,50 +120,6 @@ export function getTimeOnlyString(dateString: string): string | null {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns a string corresponding to the event start and end times in the following format:
|
|
||||||
*
|
|
||||||
* HH:MM - HH:MM
|
|
||||||
*
|
|
||||||
* If the end date is not specified or is equal to start time, only start time will be shown.
|
|
||||||
*
|
|
||||||
* If the end date is not on the same day, 23:59 will be shown as end time
|
|
||||||
*
|
|
||||||
* @param start Start time in YYYY-MM-DD HH:MM:SS format
|
|
||||||
* @param end End time in YYYY-MM-DD HH:MM:SS format
|
|
||||||
* @return {string} Formatted string or "/ - /" on error
|
|
||||||
*/
|
|
||||||
export function getFormattedEventTime(start: string, end: string): string {
|
|
||||||
let formattedStr = '/ - /';
|
|
||||||
const startDate = stringToDate(start);
|
|
||||||
const endDate = stringToDate(end);
|
|
||||||
|
|
||||||
if (
|
|
||||||
startDate !== null &&
|
|
||||||
endDate !== null &&
|
|
||||||
startDate.getTime() !== endDate.getTime()
|
|
||||||
) {
|
|
||||||
formattedStr = `${String(startDate.getHours()).padStart(2, '0')}:${String(
|
|
||||||
startDate.getMinutes(),
|
|
||||||
).padStart(2, '0')} - `;
|
|
||||||
if (
|
|
||||||
endDate.getFullYear() > startDate.getFullYear() ||
|
|
||||||
endDate.getMonth() > startDate.getMonth() ||
|
|
||||||
endDate.getDate() > startDate.getDate()
|
|
||||||
)
|
|
||||||
formattedStr += '23:59';
|
|
||||||
else
|
|
||||||
formattedStr += `${String(endDate.getHours()).padStart(2, '0')}:${String(
|
|
||||||
endDate.getMinutes(),
|
|
||||||
).padStart(2, '0')}`;
|
|
||||||
} else if (startDate !== null)
|
|
||||||
formattedStr = `${String(startDate.getHours()).padStart(2, '0')}:${String(
|
|
||||||
startDate.getMinutes(),
|
|
||||||
).padStart(2, '0')}`;
|
|
||||||
|
|
||||||
return formattedStr;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Checks if the given description can be considered empty.
|
* Checks if the given description can be considered empty.
|
||||||
* <br>
|
* <br>
|
||||||
|
|
Loading…
Reference in a new issue