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

Replaced out links with webwiews + added available rooms webview

Browse source
This commit is contained in:
keplyx 2019-11-02 15:44:19 +01:00
parent 23d9a614d2
commit db98144a0d
11 changed files with 306 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
components/BaseContainer.js
View file

@ -16,7 +16,8 @@ type Props = {
headerRightButton: React.Node,
children: React.Node,
hasTabs: boolean,
hasBackButton: boolean
hasBackButton: boolean,
hasSideMenu: boolean,
}
type State = {
@ -32,6 +33,7 @@ export default class BaseContainer extends React.Component<Props, State> {
headerRightButton: <View/>,
hasTabs: false,
hasBackButton: false,
hasSideMenu: true,
};
@ -69,6 +71,29 @@ export default class BaseContainer extends React.Component<Props, State> {
this.willBlurSubscription.remove();
}
getMainContainer() {
return (
<Container>
<CustomHeader
navigation={this.props.navigation} title={this.props.headerTitle}
leftButton={
<Touchable
style={{padding: 6}}
onPress={() => this.toggle()}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="menu"/>
</Touchable>
}
rightButton={this.props.headerRightButton}
hasTabs={this.props.hasTabs}
hasBackButton={this.props.hasBackButton}/>
{this.props.children}
</Container>
);
}
render() {
return (
<View style={{
@ -76,27 +101,13 @@ export default class BaseContainer extends React.Component<Props, State> {
width: '100%',
height: '100%'
}}>
<CustomSideMenu
navigation={this.props.navigation} isOpen={this.state.isOpen}
onChange={(isOpen) => this.updateMenuState(isOpen)}>
<Container>
<CustomHeader
navigation={this.props.navigation} title={this.props.headerTitle}
leftButton={
<Touchable
style={{padding: 6}}
onPress={() => this.toggle()}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="menu"/>
</Touchable>
}
rightButton={this.props.headerRightButton}
hasTabs={this.props.hasTabs}
hasBackButton={this.props.hasBackButton}/>
{this.props.children}
</Container>
</CustomSideMenu>
{this.props.hasSideMenu ?
<CustomSideMenu
navigation={this.props.navigation} isOpen={this.state.isOpen}
onChange={(isOpen) => this.updateMenuState(isOpen)}>
{this.getMainContainer()}
</CustomSideMenu> :
this.getMainContainer()}
</View>
);
}

5
components/FetchedDataSectionList.js
View file

@ -272,6 +272,10 @@ export default class FetchedDataSectionList extends React.Component<Props, State
return false;
}
hasSideMenu() {
return true;
}
/**
* Get the section list render using the generated dataset
*
@ -356,6 +360,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
headerRightButton={this.getRightButton()}
hasTabs={this.hasTabs()}
hasBackButton={this.hasBackButton()}
hasSideMenu={this.hasSideMenu()}
>
{this.hasTabs() ?
<Tabs

18
components/Sidebar.js
View file

@ -11,10 +11,6 @@ const deviceHeight = Dimensions.get("window").height;
const drawerCover = require("../assets/drawer-cover.png");
const WIKETUD_LINK = "https://www.etud.insa-toulouse.fr/wiketud";
const AMICALE_LINK = "https://www.etud.insa-toulouse.fr/~amicale";
const TUTOR_INSA_LINK = "https://www.etud.insa-toulouse.fr/~tutorinsa/";
type Props = {
navigation: Object,
};
@ -46,21 +42,23 @@ export default class SideBar extends React.Component<Props, State> {
this.dataSet = [
{
name: "Amicale",
route: "amicale",
route: "AmicaleScreen",
icon: "web",
link: AMICALE_LINK
},
{
name: "Wiketud",
route: "wiketud",
route: "WiketudScreen",
icon: "wikipedia",
link: WIKETUD_LINK
},
{
name: "Tutor'INSA",
route: "tutorinsa",
route: "TutorInsaScreen",
icon: "school",
link: TUTOR_INSA_LINK
},
{
name: "Salles dispo",
route: "AvailableRoomScreen",
icon: "calendar-check",
},
{
name: i18n.t('screens.menuSelf'),

102
components/WebViewScreen.js Normal file
View file

@ -0,0 +1,102 @@
// @flow
import * as React from 'react';
import {Linking, Platform, View} from 'react-native';
import {Spinner} from 'native-base';
import WebView from "react-native-webview";
import Touchable from "react-native-platform-touchable";
import CustomMaterialIcon from "../components/CustomMaterialIcon";
import ThemeManager from "../utils/ThemeManager";
import BaseContainer from "../components/BaseContainer";
type Props = {
navigation: Object,
url: string,
customInjectedJS: string,
headerTitle: string,
hasHeaderBackButton: boolean,
hasSideMenu: boolean,
}
/**
* Class defining a webview screen.
*/
export default class WebViewScreen extends React.Component<Props> {
static defaultProps = {
customInjectedJS: '',
hasBackButton: false,
hasSideMenu: true,
};
webview: WebView;
openWebLink() {
Linking.openURL(this.props.url).catch((err) => console.error('Error opening link', err));
}
getHeaderButton(clickAction: Function, icon: string) {
return (
<Touchable
style={{padding: 6}}
onPress={() => clickAction()}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon={icon}/>
</Touchable>
);
}
getRefreshButton() {
return (
<View style={{flexDirection: 'row'}}>
{this.getHeaderButton(() => this.openWebLink(), 'web')}
{this.getHeaderButton(() => this.refreshWebview(), 'refresh')}
</View>
);
};
refreshWebview() {
this.webview.reload();
}
render() {
const nav = this.props.navigation;
return (
<BaseContainer
navigation={nav}
headerTitle={this.props.headerTitle}
headerRightButton={this.getRefreshButton()}
hasBackButton={this.props.hasHeaderBackButton}
hasSideMenu={this.props.hasSideMenu}>
<WebView
ref={ref => (this.webview = ref)}
source={{uri: this.props.url}}
style={{
width: '100%',
height: '100%',
}}
startInLoadingState={true}
injectedJavaScript={this.props.customInjectedJS}
javaScriptEnabled={true}
renderLoading={() =>
<View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
position: 'absolute',
top: 0,
right: 0,
width: '100%',
height: '100%',
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}}>
<Spinner/>
</View>
}
/>
</BaseContainer>
);
}
}

9
navigation/AppNavigator.js
View file

@ -9,9 +9,14 @@ import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen';
import ProximoAboutScreen from '../screens/Proximo/ProximoAboutScreen';
import SelfMenuScreen from '../screens/SelfMenuScreen';
import TutorInsaScreen from "../screens/TutorInsaScreen";
import AmicaleScreen from "../screens/AmicaleScreen";
import WiketudScreen from "../screens/WiketudScreen";
import AvailableRoomScreen from "../screens/AvailableRoomScreen";
import DebugScreen from '../screens/DebugScreen';
import {fromRight} from "react-navigation-transitions";
/**
* Create a stack navigator using the drawer to handle navigation between screens
*/
@ -25,6 +30,10 @@ function createAppContainerWithInitialRoute(initialRoute: string) {
AboutScreen: {screen: AboutScreen},
AboutDependenciesScreen: {screen: AboutDependenciesScreen},
SelfMenuScreen: {screen: SelfMenuScreen},
TutorInsaScreen: {screen: TutorInsaScreen},
AmicaleScreen: {screen: AmicaleScreen},
WiketudScreen: {screen: WiketudScreen},
AvailableRoomScreen: {screen: AvailableRoomScreen},
ProxiwashAboutScreen: {screen: ProxiwashAboutScreen},
ProximoAboutScreen: {screen: ProximoAboutScreen},
DebugScreen: {screen: DebugScreen},

32
screens/AmicaleScreen.js Normal file
View file

@ -0,0 +1,32 @@
// @flow
import * as React from 'react';
import ThemeManager from "../utils/ThemeManager";
import WebViewScreen from "../components/WebViewScreen";
type Props = {
navigation: Object,
}
const URL = 'https://www.etud.insa-toulouse.fr/~amicale';
/**
* Class defining the app's planex screen.
* This screen uses a webview to render the planex page
*/
export default class AmicaleScreen extends React.Component<Props> {
render() {
const nav = this.props.navigation;
return (
<WebViewScreen
navigation={nav}
url={URL}
headerTitle={'Amicale'}
hasHeaderBackButton={true}
hasSideMenu={false}/>
);
}
}

40
screens/AvailableRoomScreen.js Normal file
View file

@ -0,0 +1,40 @@
// @flow
import * as React from 'react';
import ThemeManager from "../utils/ThemeManager";
import WebViewScreen from "../components/WebViewScreen";
type Props = {
navigation: Object,
}
const URL = 'http://planex.insa-toulouse.fr/salles.php';
/**
* Class defining the app's planex screen.
* This screen uses a webview to render the planex page
*/
export default class AvailableRoomScreen extends React.Component<Props> {
customInjectedJS: string;
constructor() {
super();
this.customInjectedJS = '';
}
render() {
const nav = this.props.navigation;
return (
<WebViewScreen
navigation={nav}
url={URL}
customInjectedJS={this.customInjectedJS}
headerTitle={'SAlles dispo'}
hasHeaderBackButton={true}
hasSideMenu={false}/>
);
}
}

62
screens/PlanexScreen.js
View file

@ -1,13 +1,8 @@
// @flow
import * as React from 'react';
import {Platform, View} from 'react-native';
import {Spinner} from 'native-base';
import WebView from "react-native-webview";
import Touchable from "react-native-platform-touchable";
import CustomMaterialIcon from "../components/CustomMaterialIcon";
import ThemeManager from "../utils/ThemeManager";
import BaseContainer from "../components/BaseContainer";
import WebViewScreen from "../components/WebViewScreen";
type Props = {
navigation: Object,
@ -18,13 +13,13 @@ const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
const CUSTOM_CSS_GENERAL = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customMobile.css';
const CUSTOM_CSS_NIGHTMODE = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customDark.css';
/**
* Class defining the app's planex screen.
* This screen uses a webview to render the planex page
*/
export default class PlanningScreen extends React.Component<Props> {
export default class PlanexScreen extends React.Component<Props> {
webview: WebView;
customInjectedJS: string;
constructor() {
@ -36,54 +31,15 @@ export default class PlanningScreen extends React.Component<Props> {
this.customInjectedJS += 'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_NIGHTMODE + '" type="text/css"/>\';';
}
getRefreshButton() {
return (
<Touchable
style={{padding: 6}}
onPress={() => this.refreshWebview()}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="refresh"/>
</Touchable>
);
};
refreshWebview() {
this.webview.reload();
}
render() {
const nav = this.props.navigation;
return (
<BaseContainer navigation={nav} headerTitle={'Planex'} headerRightButton={this.getRefreshButton()}>
<WebView
ref={ref => (this.webview = ref)}
source={{uri: PLANEX_URL}}
style={{
width: '100%',
height: '100%',
}}
startInLoadingState={true}
injectedJavaScript={this.customInjectedJS}
javaScriptEnabled={true}
renderLoading={() =>
<View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
position: 'absolute',
top: 0,
right: 0,
width: '100%',
height: '100%',
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}}>
<Spinner/>
</View>
}
/>
</BaseContainer>
<WebViewScreen
navigation={nav}
url={PLANEX_URL}
customInjectedJS={this.customInjectedJS}
headerTitle={'Planex'}
hasHeaderBackButton={false}/>
);
}
}

4
screens/SelfMenuScreen.js
View file

@ -64,6 +64,10 @@ export default class SelfMenuScreen extends FetchedDataSectionList {
return true;
}
hasSideMenu() : boolean {
return false;
}
createDataset(fetchedData: Object) {
let result = [];
// Prevent crash by giving a default value when fetchedData is empty (not yet available)

32
screens/TutorInsaScreen.js Normal file
View file

@ -0,0 +1,32 @@
// @flow
import * as React from 'react';
import ThemeManager from "../utils/ThemeManager";
import WebViewScreen from "../components/WebViewScreen";
type Props = {
navigation: Object,
}
const URL = 'https://www.etud.insa-toulouse.fr/~tutorinsa/';
/**
* Class defining the app's planex screen.
* This screen uses a webview to render the planex page
*/
export default class TutorInsaScreen extends React.Component<Props> {
render() {
const nav = this.props.navigation;
return (
<WebViewScreen
navigation={nav}
url={URL}
headerTitle={'Tutor\'INSA'}
hasHeaderBackButton={true}
hasSideMenu={false}/>
);
}
}

32
screens/WiketudScreen.js Normal file
View file

@ -0,0 +1,32 @@
// @flow
import * as React from 'react';
import ThemeManager from "../utils/ThemeManager";
import WebViewScreen from "../components/WebViewScreen";
type Props = {
navigation: Object,
}
const URL = 'https://www.etud.insa-toulouse.fr/wiketud';
/**
* Class defining the app's planex screen.
* This screen uses a webview to render the planex page
*/
export default class WiketudScreen extends React.Component<Props> {
render() {
const nav = this.props.navigation;
return (
<WebViewScreen
navigation={nav}
url={URL}
headerTitle={'Wiketud'}
hasHeaderBackButton={true}
hasSideMenu={false}/>
);
}
}