ysimard/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Added webview communication and display popup on planex event click

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-14 18:56:50 +02:00
parent 7d2bdc0d34
commit c684872a54
5 changed files with 102 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Screens/WebViewScreen.js
View file

@ -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}
/>

8
src/screens/Proxiwash/ProxiwashScreen.js
View file

@ -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));

88
src/screens/Websites/PlanexScreen.js
View file

@ -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">\');' +
'$("head").append(\'<link rel="stylesheet" href="' + CUSTOM_CSS_GENERAL + '" type="text/css"/>\');';
FULL_CALENDAR_SETTINGS +
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);

5
src/utils/Planning.js
View file

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

6
src/utils/withCollapsible.js
View file

@ -2,7 +2,7 @@ import React from 'react';
import {useCollapsibleStack} from "react-navigation-collapsible";
export const withCollapsible = (Component: any) => {
return (props: any) => {
return <Component collapsibleStack={useCollapsibleStack()} {...props} />;
};
return React.forwardRef((props: any, ref: any) => {
return <Component collapsibleStack={useCollapsibleStack()} ref={ref} {...props} />;
});
};