Added webview communication and display popup on planex event click

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<Props> {
 
     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<Props> {
                 onNavigationStateChange={navState => {
                     this.canGoBack = navState.canGoBack;
                 }}
+                onMessage={this.props.onMessage}
                 // Animations
                 onScroll={onScroll}
             />

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<Props, State> {
 
     render() {
         const nav = this.props.navigation;
+        const {containerPaddingTop} = this.props.collapsibleStack;
         return (
             <View>
                 <Banner
+                    style={{
+                    marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
+                }}
                     visible={this.state.bannerVisible}
                     actions={[
                         {
@@ -450,4 +456,4 @@ class ProxiwashScreen extends React.Component<Props, State> {
     }
 }
 
-export default withTheme(ProxiwashScreen);
+export default withCollapsible(withTheme(ProxiwashScreen));

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<Props, State> {
+class PlanexScreen extends React.Component<Props, State> {
+
+    webScreenRef: Object;
 
     customInjectedJS: string;
     onHideBanner: Function;
@@ -92,6 +123,9 @@ export default class PlanexScreen extends React.Component<Props, State> {
         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<Props, State> {
      */
     constructor() {
         super();
+        this.webScreenRef = React.createRef();
         this.customInjectedJS =
-            '$(document).ready(function() {' +
+            "$(document).ready(function() {" +
             OBSERVE_MUTATIONS_INJECTED +
-            '$("head").append(\'<meta name="viewport" content="width=device-width, initial-scale=0.9">\');' +
+            FULL_CALENDAR_SETTINGS +
-            '$("head").append(\'<link rel="stylesheet" href="' + CUSTOM_CSS_GENERAL + '" type="text/css"/>\');';
+            LISTEN_TO_MESSAGES +
+            "$('head').append('<meta name=\"viewport\" content=\"width=device-width, initial-scale=0.9\">');" +
+            "$('head').append('<link rel=\"stylesheet\" href=\"" + CUSTOM_CSS_GENERAL + '" type="text/css"/>\');';
 
         if (ThemeManager.getNightMode())
             this.customInjectedJS += '$("head").append(\'<link rel="stylesheet" href="' + CUSTOM_CSS_NIGHTMODE + '" type="text/css"/>\');';
@@ -137,13 +174,45 @@ export default class PlanexScreen extends React.Component<Props, State> {
         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 (
             <View style={{
                 height: '100%'
             }}>
                 <Banner
+                    style={{
+                        marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
+                    }}
                     visible={this.state.bannerVisible}
                     actions={[
                         {
@@ -163,12 +232,21 @@ export default class PlanexScreen extends React.Component<Props, State> {
                 >
                     {i18n.t('planexScreen.enableStartScreen')}
                 </Banner>
+                <AlertDialog
+                    visible={this.state.dialogVisible}
+                    onDismiss={this.hideDialog}
+                    title={this.state.dialogTitle}
+                    message={this.state.dialogMessage}/>
                 <WebViewScreen
+                    ref={this.webScreenRef}
                     navigation={nav}
                     url={PLANEX_URL}
-                    customJS={this.customInjectedJS}/>
+                    customJS={this.customInjectedJS}
+                    onMessage={this.onMessage}
+                />
             </View>
         );
     }
 }
 
+export default withCollapsible(PlanexScreen);

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;
 }

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 React.forwardRef((props: any, ref: any) => {
-        return <Component collapsibleStack={useCollapsibleStack()} {...props} />;
+        return <Component collapsibleStack={useCollapsibleStack()} ref={ref} {...props} />;
-    };
+    });
 };