Application Android et IOS pour l'amicale des élèves https://play.google.com/store/apps/details?id=fr.amicaleinsat.application
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

PlanexWebview.tsx 5.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. import React from 'react';
  2. import { StyleSheet, View } from 'react-native';
  3. import GENERAL_STYLES from '../../constants/Styles';
  4. import Urls from '../../constants/Urls';
  5. import DateManager from '../../managers/DateManager';
  6. import { PlanexGroupType } from '../../screens/Planex/GroupSelectionScreen';
  7. import ErrorView from './ErrorView';
  8. import WebViewScreen from './WebViewScreen';
  9. import i18n from 'i18n-js';
  10. import { useTheme } from 'react-native-paper';
  11. type Props = {
  12. currentGroup?: PlanexGroupType;
  13. injectJS: string;
  14. onMessage: (event: { nativeEvent: { data: string } }) => void;
  15. };
  16. const styles = StyleSheet.create({
  17. error: {
  18. position: 'absolute',
  19. height: '100%',
  20. width: '100%',
  21. },
  22. });
  23. // Watch for changes in the calendar and call the remove alpha function to prevent invisible events
  24. const OBSERVE_MUTATIONS_INJECTED =
  25. 'function removeAlpha(node) {\n' +
  26. ' let bg = node.css("background-color");\n' +
  27. ' if (bg.match("^rgba")) {\n' +
  28. " let a = bg.slice(5).split(',');\n" +
  29. ' // Fix for tooltips with broken background\n' +
  30. ' if (parseInt(a[0]) === parseInt(a[1]) && parseInt(a[1]) === parseInt(a[2]) && parseInt(a[2]) === 0) {\n' +
  31. " a[0] = a[1] = a[2] = '255';\n" +
  32. ' }\n' +
  33. " let newBg ='rgb(' + a[0] + ',' + a[1] + ',' + a[2] + ')';\n" +
  34. ' node.css("background-color", newBg);\n' +
  35. ' }\n' +
  36. '}\n' +
  37. '// Observe for planning DOM changes\n' +
  38. 'let observer = new MutationObserver(function(mutations) {\n' +
  39. ' for (let i = 0; i < mutations.length; i++) {\n' +
  40. " if (mutations[i]['addedNodes'].length > 0 &&\n" +
  41. ' ($(mutations[i][\'addedNodes\'][0]).hasClass("fc-event") || $(mutations[i][\'addedNodes\'][0]).hasClass("tooltiptopicevent")))\n' +
  42. " removeAlpha($(mutations[i]['addedNodes'][0]))\n" +
  43. ' }\n' +
  44. '});\n' +
  45. '// observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
  46. 'observer.observe(document.querySelector("body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
  47. '// Run remove alpha a first time on whole planning. Useful when code injected after planning fully loaded.\n' +
  48. '$(".fc-event-container .fc-event").each(function(index) {\n' +
  49. ' removeAlpha($(this));\n' +
  50. '});';
  51. // Overrides default settings to send a message to the webview when clicking on an event
  52. const FULL_CALENDAR_SETTINGS = `
  53. let calendar = $('#calendar').fullCalendar('getCalendar');
  54. calendar.option({
  55. eventClick: function (data, event, view) {
  56. let message = {
  57. title: data.title,
  58. color: data.color,
  59. start: data.start._d,
  60. end: data.end._d,
  61. };
  62. window.ReactNativeWebView.postMessage(JSON.stringify(message));
  63. }
  64. });`;
  65. // Mobile friendly CSS
  66. const CUSTOM_CSS =
  67. '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}';
  68. // Dark mode CSS, to be used with the mobile friendly css
  69. const CUSTOM_CSS_DARK =
  70. 'body{background-color:#121212}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:#222}.fc-toolbar .fc-center>*,h2,table{color:#fff}.fc-event-container{color:#121212}.fc-event-container .fc-bg{opacity:0.2;background-color:#000}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}';
  71. // Inject the custom css into the webpage
  72. const INJECT_STYLE = `$('head').append('<style>${CUSTOM_CSS}</style>');`;
  73. // Inject the dark mode into the webpage, to call after the custom css inject above
  74. const INJECT_STYLE_DARK = `$('head').append('<style>${CUSTOM_CSS_DARK}</style>');`;
  75. /**
  76. * Generates custom JavaScript to be injected into the webpage
  77. *
  78. * @param groupID The current group selected
  79. */
  80. const generateInjectedJS = (
  81. group: PlanexGroupType | undefined,
  82. darkMode: boolean
  83. ) => {
  84. let customInjectedJS = `$(document).ready(function() {
  85. ${OBSERVE_MUTATIONS_INJECTED}
  86. ${INJECT_STYLE}
  87. ${FULL_CALENDAR_SETTINGS}`;
  88. if (group) {
  89. customInjectedJS += `displayAde(${group.id});`;
  90. }
  91. if (DateManager.isWeekend(new Date())) {
  92. customInjectedJS += `calendar.next();`;
  93. }
  94. if (darkMode) {
  95. customInjectedJS += INJECT_STYLE_DARK;
  96. }
  97. customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
  98. return customInjectedJS;
  99. };
  100. function PlanexWebview(props: Props) {
  101. const theme = useTheme();
  102. return (
  103. <View style={GENERAL_STYLES.flex}>
  104. <WebViewScreen
  105. url={Urls.planex.planning}
  106. initialJS={generateInjectedJS(props.currentGroup, theme.dark)}
  107. injectJS={props.injectJS}
  108. onMessage={props.onMessage}
  109. showAdvancedControls={false}
  110. showControls={props.currentGroup !== undefined}
  111. />
  112. {!props.currentGroup ? (
  113. <ErrorView
  114. icon={'account-clock'}
  115. message={i18n.t('screens.planex.noGroupSelected')}
  116. style={styles.error}
  117. />
  118. ) : null}
  119. </View>
  120. );
  121. }
  122. export default PlanexWebview;