vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

Hide loading screen only after JS loaded

Browse source
This commit is contained in:
Arnaud Vergnet 2021-05-22 19:14:03 +02:00
parent fe96d9f8a1
commit b15b200846
2 changed files with 39 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/Screens/PlanexWebview.tsx
View file

@ -67,6 +67,14 @@ calendar.option({
}
});`;
export const JS_LOADED_MESSAGE = '1';
const NOTIFY_JS_INJECTED = `
function notifyJsInjected() {
window.ReactNativeWebView.postMessage('${JS_LOADED_MESSAGE}');
}
`;
// Mobile friendly CSS
const CUSTOM_CSS =
'body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-time{font-size:.5rem}#calendar .fc-month-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-month-view .fc-content-skeleton .fc-time{font-size:.7rem}.fc-axis{font-size:.8rem;width:15px!important}.fc-day-header{font-size:.8rem}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}';
@ -93,7 +101,8 @@ const generateInjectedJS = (
let customInjectedJS = `$(document).ready(function() {
${OBSERVE_MUTATIONS_INJECTED}
${INJECT_STYLE}
${FULL_CALENDAR_SETTINGS}`;
${FULL_CALENDAR_SETTINGS}
${NOTIFY_JS_INJECTED}`;
if (group) {
customInjectedJS += `displayAde(${group.id});`;
}
@ -103,7 +112,7 @@ const generateInjectedJS = (
if (darkMode) {
customInjectedJS += INJECT_STYLE_DARK;
}
customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
customInjectedJS += `notifyJsInjected();});true;`; // Prevents crash on ios
return customInjectedJS;
};

43
src/screens/Planex/PlanexScreen.tsx
View file

@ -31,7 +31,9 @@ import { MASCOT_STYLE } from '../../components/Mascot/Mascot';
import MascotPopup from '../../components/Mascot/MascotPopup';
import { getPrettierPlanexGroupName } from '../../utils/Utils';
import GENERAL_STYLES from '../../constants/Styles';
import PlanexWebview from '../../components/Screens/PlanexWebview';
import PlanexWebview, {
JS_LOADED_MESSAGE,
} from '../../components/Screens/PlanexWebview';
import PlanexBottomBar from '../../components/Animations/PlanexBottomBar';
import {
getPreferenceString,
@ -39,6 +41,7 @@ import {
PlanexPreferenceKeys,
} from '../../utils/asyncStorage';
import { usePlanexPreferences } from '../../context/preferencesContext';
import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen';
const styles = StyleSheet.create({
container: {
@ -65,6 +68,7 @@ function PlanexScreen() {
}
>();
const [injectJS, setInjectJS] = useState('');
const [loading, setLoading] = useState(true);
const getCurrentGroup: () => PlanexGroupType | undefined = useCallback(() => {
let currentGroupString = getPreferenceString(
@ -132,22 +136,26 @@ function PlanexScreen() {
* @param event
*/
const onMessage = (event: { nativeEvent: { data: string } }) => {
const data: {
start: string;
end: string;
title: string;
color: string;
} = JSON.parse(event.nativeEvent.data);
const startDate = dateToString(new Date(data.start), true);
const endDate = dateToString(new Date(data.end), true);
const startString = getTimeOnlyString(startDate);
const endString = getTimeOnlyString(endDate);
if (event.nativeEvent.data === JS_LOADED_MESSAGE) {
setLoading(false);
} else {
const data: {
start: string;
end: string;
title: string;
color: string;
} = JSON.parse(event.nativeEvent.data);
const startDate = dateToString(new Date(data.start), true);
const endDate = dateToString(new Date(data.end), true);
const startString = getTimeOnlyString(startDate);
const endString = getTimeOnlyString(endDate);
let msg = `${DateManager.getInstance().getTranslatedDate(startDate)}\n`;
if (startString != null && endString != null) {
msg += `${startString} - ${endString}`;
let msg = `${DateManager.getInstance().getTranslatedDate(startDate)}\n`;
if (startString != null && endString != null) {
msg += `${startString} - ${endString}`;
}
showDialog(data.title, msg, data.color);
}
showDialog(data.title, msg, data.color);
};
/**
@ -202,6 +210,11 @@ function PlanexScreen() {
<View style={GENERAL_STYLES.flex}>{getWebView()}</View>
)}
</View>
{loading ? (
<View style={styles.container}>
<BasicLoadingScreen />
</View>
) : null}
{showMascot ? (
<MascotPopup
title={i18n.t('screens.planex.mascotDialog.title')}