diff --git a/src/components/Screens/WebViewScreen.js b/src/components/Screens/WebViewScreen.js index 2d53cc5..929ae4d 100644 --- a/src/components/Screens/WebViewScreen.js +++ b/src/components/Screens/WebViewScreen.js @@ -17,6 +17,7 @@ type Props = { url: string, customJS: string, collapsibleStack: Object, + onMessage: Function, } const AnimatedWebView = Animated.createAnimatedComponent(WebView); @@ -111,6 +112,10 @@ class WebViewScreen extends React.PureComponent { onOpenClicked = () => Linking.openURL(this.props.url); + postMessage = (message: string) => { + this.webviewRef.current.getNode().postMessage(message); + } + /** * Gets the loading indicator * @@ -167,6 +172,7 @@ class WebViewScreen extends React.PureComponent { onNavigationStateChange={navState => { this.canGoBack = navState.canGoBack; }} + onMessage={this.props.onMessage} // Animations onScroll={onScroll} /> diff --git a/src/screens/Proxiwash/ProxiwashScreen.js b/src/screens/Proxiwash/ProxiwashScreen.js index e57f526..ee31776 100644 --- a/src/screens/Proxiwash/ProxiwashScreen.js +++ b/src/screens/Proxiwash/ProxiwashScreen.js @@ -14,6 +14,7 @@ import CustomModal from "../../components/Custom/CustomModal"; import AprilFoolsManager from "../../managers/AprilFoolsManager"; import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton"; import ProxiwashSectionHeader from "../../components/Lists/ProxiwashSectionHeader"; +import {withCollapsible} from "../../utils/withCollapsible"; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json"; @@ -25,6 +26,7 @@ const LIST_ITEM_HEIGHT = 64; type Props = { navigation: Object, theme: Object, + collapsibleStack: Object, } type State = { @@ -416,9 +418,13 @@ class ProxiwashScreen extends React.Component { render() { const nav = this.props.navigation; + const {containerPaddingTop} = this.props.collapsibleStack; return ( { } } -export default withTheme(ProxiwashScreen); +export default withCollapsible(withTheme(ProxiwashScreen)); diff --git a/src/screens/Websites/PlanexScreen.js b/src/screens/Websites/PlanexScreen.js index 4fd7658..3c80667 100644 --- a/src/screens/Websites/PlanexScreen.js +++ b/src/screens/Websites/PlanexScreen.js @@ -7,13 +7,21 @@ import {Avatar, Banner} from "react-native-paper"; import i18n from "i18n-js"; import {View} from "react-native"; import AsyncStorageManager from "../../managers/AsyncStorageManager"; +import AlertDialog from "../../components/Dialog/AlertDialog"; +import {withCollapsible} from "../../utils/withCollapsible"; +import {dateToString, getTimeOnlyString} from "../../utils/Planning"; +import DateManager from "../../managers/DateManager"; type Props = { navigation: Object, + collapsibleStack: Object, } type State = { bannerVisible: boolean, + dialogVisible: boolean, + dialogTitle: string, + dialogMessage: string, } @@ -79,11 +87,34 @@ const OBSERVE_MUTATIONS_INJECTED = '$(".fc-event-container .fc-event").each(function(index) {\n' + ' removeAlpha($(this));\n' + '});'; + +const FULL_CALENDAR_SETTINGS = + `var calendar = $('#calendar').fullCalendar('getCalendar'); + calendar.option({ + eventClick: function (data, event, view) { + var message = { + title: data.title, + color: data.color, + start: data.start._d, + end: data.end._d, + }; + window.ReactNativeWebView.postMessage(JSON.stringify(message)); + } + });`; + +const LISTEN_TO_MESSAGES = + `document.addEventListener("message", function(event) { + console.log("Received post message", event);//Get Event from React Native + alert(event.data); + }, false);` + /** * Class defining the app's Planex screen. * This screen uses a webview to render the page */ -export default class PlanexScreen extends React.Component { +class PlanexScreen extends React.Component { + + webScreenRef: Object; customInjectedJS: string; onHideBanner: Function; @@ -92,6 +123,9 @@ export default class PlanexScreen extends React.Component { bannerVisible: AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' && AsyncStorageManager.getInstance().preferences.defaultStartScreen.current !== 'Planex', + dialogVisible: false, + dialogTitle: "", + dialogMessage: "", }; /** @@ -99,11 +133,14 @@ export default class PlanexScreen extends React.Component { */ constructor() { super(); + this.webScreenRef = React.createRef(); this.customInjectedJS = - '$(document).ready(function() {' + + "$(document).ready(function() {" + OBSERVE_MUTATIONS_INJECTED + - '$("head").append(\'\');' + - '$("head").append(\'\');'; + FULL_CALENDAR_SETTINGS + + LISTEN_TO_MESSAGES + + "$('head').append('');" + + "$('head').append('\');'; if (ThemeManager.getNightMode()) this.customInjectedJS += '$("head").append(\'\');'; @@ -137,13 +174,45 @@ export default class PlanexScreen extends React.Component { this.props.navigation.navigate('settings'); } + sendMessage = () => { + let data= 'coucou' + this.webScreenRef.current.postMessage(data); + } + + onMessage = (event: Object) => { + let data = JSON.parse(event.nativeEvent.data); + let startDate = dateToString(new Date(data.start), true); + let endDate = dateToString(new Date(data.end), true); + let msg = DateManager.getInstance().getTranslatedDate(startDate) + "\n"; + msg += getTimeOnlyString(startDate) + ' - ' + getTimeOnlyString(endDate); + this.showDialog(data.title, msg) + }; + + showDialog = (title: string, message: string) => { + this.setState({ + dialogVisible: true, + dialogTitle: title, + dialogMessage: message, + }); + }; + + hideDialog = () => { + this.setState({ + dialogVisible: false, + }); + }; + render() { const nav = this.props.navigation; + const {containerPaddingTop} = this.props.collapsibleStack; return ( { > {i18n.t('planexScreen.enableStartScreen')} + + customJS={this.customInjectedJS} + onMessage={this.onMessage} + /> ); } } +export default withCollapsible(PlanexScreen); \ No newline at end of file diff --git a/src/utils/Planning.js b/src/utils/Planning.js index 5c4aab8..8a1b405 100644 --- a/src/utils/Planning.js +++ b/src/utils/Planning.js @@ -119,11 +119,12 @@ export function stringToDate(dateString: string): Date | null { * @param date The date object to convert * @return {string} The converted string */ -export function dateToString(date: Date): string { +export function dateToString(date: Date, isUTC: boolean): string { const day = String(date.getDate()).padStart(2, '0'); const month = String(date.getMonth() + 1).padStart(2, '0'); //January is 0! const year = date.getFullYear(); - const hours = String(date.getHours()).padStart(2, '0'); + const h = isUTC ? date.getUTCHours() : date.getHours(); + const hours = String(h).padStart(2, '0'); const minutes = String(date.getMinutes()).padStart(2, '0'); return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes; } diff --git a/src/utils/withCollapsible.js b/src/utils/withCollapsible.js index 0cb5cad..fc1fad2 100644 --- a/src/utils/withCollapsible.js +++ b/src/utils/withCollapsible.js @@ -2,7 +2,7 @@ import React from 'react'; import {useCollapsibleStack} from "react-navigation-collapsible"; export const withCollapsible = (Component: any) => { - return (props: any) => { - return ; - }; + return React.forwardRef((props: any, ref: any) => { + return ; + }); };