diff --git a/src/components/Screens/PlanexWebview.tsx b/src/components/Screens/PlanexWebview.tsx
index 6614156..67a1f7b 100644
--- a/src/components/Screens/PlanexWebview.tsx
+++ b/src/components/Screens/PlanexWebview.tsx
@@ -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;
};
diff --git a/src/screens/Planex/PlanexScreen.tsx b/src/screens/Planex/PlanexScreen.tsx
index b11163f..86e5819 100644
--- a/src/screens/Planex/PlanexScreen.tsx
+++ b/src/screens/Planex/PlanexScreen.tsx
@@ -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() {
{getWebView()}
)}
+ {loading ? (
+
+
+
+ ) : null}
{showMascot ? (