forked from vergnet/application-amicale
Added webview communication and display popup on planex event click
This commit is contained in:
parent
7d2bdc0d34
commit
c684872a54
5 changed files with 102 additions and 11 deletions
|
@ -17,6 +17,7 @@ type Props = {
|
||||||
url: string,
|
url: string,
|
||||||
customJS: string,
|
customJS: string,
|
||||||
collapsibleStack: Object,
|
collapsibleStack: Object,
|
||||||
|
onMessage: Function,
|
||||||
}
|
}
|
||||||
|
|
||||||
const AnimatedWebView = Animated.createAnimatedComponent(WebView);
|
const AnimatedWebView = Animated.createAnimatedComponent(WebView);
|
||||||
|
@ -111,6 +112,10 @@ class WebViewScreen extends React.PureComponent<Props> {
|
||||||
|
|
||||||
onOpenClicked = () => Linking.openURL(this.props.url);
|
onOpenClicked = () => Linking.openURL(this.props.url);
|
||||||
|
|
||||||
|
postMessage = (message: string) => {
|
||||||
|
this.webviewRef.current.getNode().postMessage(message);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Gets the loading indicator
|
* Gets the loading indicator
|
||||||
*
|
*
|
||||||
|
@ -167,6 +172,7 @@ class WebViewScreen extends React.PureComponent<Props> {
|
||||||
onNavigationStateChange={navState => {
|
onNavigationStateChange={navState => {
|
||||||
this.canGoBack = navState.canGoBack;
|
this.canGoBack = navState.canGoBack;
|
||||||
}}
|
}}
|
||||||
|
onMessage={this.props.onMessage}
|
||||||
// Animations
|
// Animations
|
||||||
onScroll={onScroll}
|
onScroll={onScroll}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -14,6 +14,7 @@ import CustomModal from "../../components/Custom/CustomModal";
|
||||||
import AprilFoolsManager from "../../managers/AprilFoolsManager";
|
import AprilFoolsManager from "../../managers/AprilFoolsManager";
|
||||||
import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
|
import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
|
||||||
import ProxiwashSectionHeader from "../../components/Lists/ProxiwashSectionHeader";
|
import ProxiwashSectionHeader from "../../components/Lists/ProxiwashSectionHeader";
|
||||||
|
import {withCollapsible} from "../../utils/withCollapsible";
|
||||||
|
|
||||||
const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
|
const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
|
||||||
|
|
||||||
|
@ -25,6 +26,7 @@ const LIST_ITEM_HEIGHT = 64;
|
||||||
type Props = {
|
type Props = {
|
||||||
navigation: Object,
|
navigation: Object,
|
||||||
theme: Object,
|
theme: Object,
|
||||||
|
collapsibleStack: Object,
|
||||||
}
|
}
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
|
@ -416,9 +418,13 @@ class ProxiwashScreen extends React.Component<Props, State> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const nav = this.props.navigation;
|
const nav = this.props.navigation;
|
||||||
|
const {containerPaddingTop} = this.props.collapsibleStack;
|
||||||
return (
|
return (
|
||||||
<View>
|
<View>
|
||||||
<Banner
|
<Banner
|
||||||
|
style={{
|
||||||
|
marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
|
||||||
|
}}
|
||||||
visible={this.state.bannerVisible}
|
visible={this.state.bannerVisible}
|
||||||
actions={[
|
actions={[
|
||||||
{
|
{
|
||||||
|
@ -450,4 +456,4 @@ class ProxiwashScreen extends React.Component<Props, State> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default withTheme(ProxiwashScreen);
|
export default withCollapsible(withTheme(ProxiwashScreen));
|
||||||
|
|
|
@ -7,13 +7,21 @@ import {Avatar, Banner} from "react-native-paper";
|
||||||
import i18n from "i18n-js";
|
import i18n from "i18n-js";
|
||||||
import {View} from "react-native";
|
import {View} from "react-native";
|
||||||
import AsyncStorageManager from "../../managers/AsyncStorageManager";
|
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 = {
|
type Props = {
|
||||||
navigation: Object,
|
navigation: Object,
|
||||||
|
collapsibleStack: Object,
|
||||||
}
|
}
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
bannerVisible: boolean,
|
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' +
|
'$(".fc-event-container .fc-event").each(function(index) {\n' +
|
||||||
' removeAlpha($(this));\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.
|
* Class defining the app's Planex screen.
|
||||||
* This screen uses a webview to render the page
|
* 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;
|
customInjectedJS: string;
|
||||||
onHideBanner: Function;
|
onHideBanner: Function;
|
||||||
|
@ -92,6 +123,9 @@ export default class PlanexScreen extends React.Component<Props, State> {
|
||||||
bannerVisible:
|
bannerVisible:
|
||||||
AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' &&
|
AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' &&
|
||||||
AsyncStorageManager.getInstance().preferences.defaultStartScreen.current !== 'Planex',
|
AsyncStorageManager.getInstance().preferences.defaultStartScreen.current !== 'Planex',
|
||||||
|
dialogVisible: false,
|
||||||
|
dialogTitle: "",
|
||||||
|
dialogMessage: "",
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -99,11 +133,14 @@ export default class PlanexScreen extends React.Component<Props, State> {
|
||||||
*/
|
*/
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
this.webScreenRef = React.createRef();
|
||||||
this.customInjectedJS =
|
this.customInjectedJS =
|
||||||
'$(document).ready(function() {' +
|
"$(document).ready(function() {" +
|
||||||
OBSERVE_MUTATIONS_INJECTED +
|
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())
|
if (ThemeManager.getNightMode())
|
||||||
this.customInjectedJS += '$("head").append(\'<link rel="stylesheet" href="' + CUSTOM_CSS_NIGHTMODE + '" type="text/css"/>\');';
|
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');
|
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() {
|
render() {
|
||||||
const nav = this.props.navigation;
|
const nav = this.props.navigation;
|
||||||
|
const {containerPaddingTop} = this.props.collapsibleStack;
|
||||||
return (
|
return (
|
||||||
<View style={{
|
<View style={{
|
||||||
height: '100%'
|
height: '100%'
|
||||||
}}>
|
}}>
|
||||||
<Banner
|
<Banner
|
||||||
|
style={{
|
||||||
|
marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
|
||||||
|
}}
|
||||||
visible={this.state.bannerVisible}
|
visible={this.state.bannerVisible}
|
||||||
actions={[
|
actions={[
|
||||||
{
|
{
|
||||||
|
@ -163,12 +232,21 @@ export default class PlanexScreen extends React.Component<Props, State> {
|
||||||
>
|
>
|
||||||
{i18n.t('planexScreen.enableStartScreen')}
|
{i18n.t('planexScreen.enableStartScreen')}
|
||||||
</Banner>
|
</Banner>
|
||||||
|
<AlertDialog
|
||||||
|
visible={this.state.dialogVisible}
|
||||||
|
onDismiss={this.hideDialog}
|
||||||
|
title={this.state.dialogTitle}
|
||||||
|
message={this.state.dialogMessage}/>
|
||||||
<WebViewScreen
|
<WebViewScreen
|
||||||
|
ref={this.webScreenRef}
|
||||||
navigation={nav}
|
navigation={nav}
|
||||||
url={PLANEX_URL}
|
url={PLANEX_URL}
|
||||||
customJS={this.customInjectedJS}/>
|
customJS={this.customInjectedJS}
|
||||||
|
onMessage={this.onMessage}
|
||||||
|
/>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default withCollapsible(PlanexScreen);
|
|
@ -119,11 +119,12 @@ export function stringToDate(dateString: string): Date | null {
|
||||||
* @param date The date object to convert
|
* @param date The date object to convert
|
||||||
* @return {string} The converted string
|
* @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 day = String(date.getDate()).padStart(2, '0');
|
||||||
const month = String(date.getMonth() + 1).padStart(2, '0'); //January is 0!
|
const month = String(date.getMonth() + 1).padStart(2, '0'); //January is 0!
|
||||||
const year = date.getFullYear();
|
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');
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||||
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
|
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||||
import {useCollapsibleStack} from "react-navigation-collapsible";
|
import {useCollapsibleStack} from "react-navigation-collapsible";
|
||||||
|
|
||||||
export const withCollapsible = (Component: any) => {
|
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} />;
|
||||||
};
|
});
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue