PWA Fundvelo der Caritas.
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.

index.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. <!DOCTYPE html>
  2. <html lang="de-ch">
  3. <head>
  4. <title>Caritas PWA</title>
  5. <base href="/" /> <!--For localhost development-->
  6. <!--<base href="/cwebplusApp/" />--> <!--For VM-CARITAS-->
  7. <!--<base href="/cwebplusApp/" />--> <!--For cwebplus.ch-->
  8. <meta charset="utf-8" />
  9. <meta name="description" content="Caritas PWA, developed by INTEGRATE AG, Switzerland">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
  11. <meta name="apple-mobile-web-app-status-bar" content="#db001b">
  12. <meta name="theme-color" content="#db001b">
  13. <script src="_content/BlazorAnimate/blazorAnimateInterop.js"></script>
  14. <script src="_content/MatBlazor/dist/matBlazor.js"></script>
  15. <link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />
  16. <link href="css/united/bootstrap.min.css" rel="stylesheet" />
  17. <link href="css/united/_bootswatch.min.css" rel="stylesheet" />
  18. <link href="css/united/_variables.min.css" rel="stylesheet" />
  19. <link href="css/app.css" rel="stylesheet" />
  20. <link href="manifest.json" rel="manifest" />
  21. <link rel="apple-touch-icon" href="icons/icon-60@3x.png" />
  22. <link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet"
  23. integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  24. crossorigin="" />
  25. </head>
  26. <body>
  27. <app>App wird geladen...</app>
  28. <div id="blazor-error-ui">
  29. Unbehandelter Fehler ist aufgetreten.
  30. <a href="" class="reload">Neu laden</a>
  31. <a class="dismiss">🗙</a>
  32. </div>
  33. <!-- The actual snackbar -->
  34. <div id="snackbarDiv">
  35. <div id="snackbar">Eine neue Version der App ist verfügbar. Klicken Sie <a id="reload" style="color:deepskyblue">hier</a> um die App zu aktualisieren. Eventuell müssen Sie die App neu starten.</div>
  36. </div>
  37. <div class="ios-prompt">
  38. <span style="color: rgb(187, 187, 187); float: right; margin-top: -14px; margin-right: -11px;">&times;</span>
  39. <p style="margin-top: -3px; line-height: 1.3rem;">Um die App auf dem Homebildschirm zu installieren, klicken Sie auf <img src="images/ios-share-icon.png" style="display: inline-block; margin-top: 0px; margin-bottom: 4px; height: 16px; width: auto;"> und dann "Zum Home-Bildschirm".</p>
  40. </div>
  41. <script src="_framework/blazor.webassembly.js"></script>
  42. <script src="_content/TG.Blazor.IndexedDB/indexedDb.Blazor.js"></script>
  43. <script>
  44. let newWorker;
  45. function showUpdateBar() {
  46. let snackbarDiv = document.getElementById('snackbarDiv');
  47. let snackbar = document.getElementById('snackbar');
  48. snackbar.className = 'show';
  49. snackbarDiv.className = 'show';
  50. }
  51. function hideUpdateBar() {
  52. let snackbarDiv = document.getElementById('snackbarDiv');
  53. let snackbar = document.getElementById('snackbar');
  54. snackbar.className = '';
  55. snackbarDiv.className = '';
  56. }
  57. // The click event on the pop up notification
  58. document.getElementById('reload').addEventListener('click', function () {
  59. newWorker.postMessage({ action: 'skipWaiting' });
  60. hideUpdateBar();
  61. });
  62. if ('serviceWorker' in navigator) {
  63. navigator.serviceWorker.register('service-worker.js').then(reg => {
  64. reg.addEventListener('updatefound', () => {
  65. // A wild service worker has appeared in reg.installing!
  66. newWorker = reg.installing;
  67. newWorker.addEventListener('statechange', () => {
  68. // Has newWorker.state changed?
  69. switch (newWorker.state) {
  70. case 'installed':
  71. if (navigator.serviceWorker.controller) {
  72. // new update available
  73. showUpdateBar();
  74. }
  75. // No update available
  76. break;
  77. }
  78. });
  79. });
  80. }).catch((err) => console.log('Failed to register Service worker.', err));
  81. let refreshing;
  82. navigator.serviceWorker.addEventListener('controllerchange', function () {
  83. if (refreshing) return;
  84. window.location = window.location.origin;
  85. refreshing = true;
  86. console.log('Reload to page ' + window.location.origin + ' on controller change.');
  87. });
  88. }
  89. </script>
  90. <script>
  91. function BlazorSetLocalStorage(key, value) {
  92. localStorage.setItem(key, value);
  93. }
  94. function BlazorGetLocalStorage(key) {
  95. return localStorage.getItem(key);
  96. }
  97. function BlazorRegisterStorageEvent(component) {
  98. window.addEventListener("storage", async e => {
  99. await component.invokeMethodAsync("OnStorageUpdated", e.key);
  100. });
  101. }
  102. function registerOnlineStatusHandler(dotNetObjRef) {
  103. function onlineStatusHandler() {
  104. dotNetObjRef.invokeMethodAsync("SetOnlineStatus", navigator.onLine);
  105. };
  106. onlineStatusHandler();
  107. window.addEventListener("online", onlineStatusHandler);
  108. window.addEventListener("offline", onlineStatusHandler);
  109. }
  110. function IsGeoLocationAllowed(dotNetObjRef) {
  111. navigator.permissions.query({ name: 'geolocation' }).then(function (result) {
  112. console.log("GeoLocation permission: " + result.state);
  113. result.onchange = function () {
  114. console.log("GeoLocation permission: " + result.state);
  115. dotNetObjRef.invokeMethodAsync("GeoLocationPermissionChanged", result.state);
  116. }
  117. dotNetObjRef.invokeMethodAsync("GeoLocationPermissionChanged", result.state);
  118. return result.state;
  119. });
  120. return "";
  121. }
  122. function RemoveScrollLock(dotNetObjRef) {
  123. document.querySelector("body.mdc-dialog-scroll-lock")?.classList.remove("mdc-dialog-scroll-lock");
  124. }
  125. function MoveCursorToNextInput(dotNetObjRef, key) {
  126. if (key == "Enter" || key == "ArrowRight") {
  127. var activeElement = document.activeElement;
  128. var inputs = getKeyboardFocusableElements();
  129. var arr = Array.prototype.slice.call(inputs)
  130. var index = arr.indexOf(activeElement);
  131. if (index + 1 < arr.length && CanNavigateForward(activeElement, key)) {
  132. activeElement.dispatchEvent(new Event('focusout'));
  133. setTimeout(function () { arr[index + 1].focus(); }, 50);
  134. if (arr[index + 1].localName.includes('input') || arr[index + 1].localName.includes('textarea')) {
  135. setTimeout(function () { arr[index + 1].select(); }, 50);
  136. }
  137. }
  138. }
  139. }
  140. function MoveCursorToPreviousInput(dotNetObjRef) {
  141. var activeElement = document.activeElement;
  142. var inputs = getKeyboardFocusableElements();
  143. var arr = Array.prototype.slice.call(inputs)
  144. var index = arr.indexOf(activeElement);
  145. if (index - 1 >= 0 && CanNavigateBack(activeElement)) {
  146. activeElement.dispatchEvent(new Event('focusout'));
  147. setTimeout(function () { arr[index + 1].focus(); }, 50);
  148. if (arr[index - 1].localName.includes('input') || arr[index - 1].localName.includes('textarea')) {
  149. setTimeout(function () { arr[index - 1].select(); }, 50);
  150. }
  151. }
  152. }
  153. function DispatchKeyboardEvent(dotNetObjRef, key) {
  154. window.dispatchEvent(new KeyboardEvent('keydown', { 'key': key }));
  155. }
  156. function getKeyboardFocusableElements(element = document) {
  157. return [...element.querySelectorAll('input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])')]
  158. .filter(el => el.localName != 'li' && !el.getAttribute("aria-hidden"))
  159. }
  160. function CanNavigateForward(element, key) {
  161. if (element.getAttribute('class').includes('select') || element.getAttribute('class').includes('button')) {
  162. if (key == "Enter") {
  163. return false;
  164. }
  165. return true;
  166. } else {
  167. return key == "Enter" || element.selectionStart == element.value.length
  168. || (element.selectionStart == 0 && element.selectionEnd == element.value.length);
  169. }
  170. }
  171. function CanNavigateBack(element) {
  172. if (element.getAttribute('class').includes('select') || element.getAttribute('class').includes('button')) {
  173. return true;
  174. } else {
  175. return element.selectionStart == null || element.selectionStart == 0;
  176. }
  177. }
  178. function CheckConstrainedInput(dotNetObjRef, key) {
  179. const ignoredKeys = ["Backspace", "Tab"];
  180. var theEvent = window.event;
  181. var activeElement = document.activeElement;
  182. var regex = new RegExp(activeElement.pattern);
  183. if (!ignoredKeys.includes(key) && !regex.test(activeElement.value + key)) {
  184. theEvent.returnValue = false;
  185. if (theEvent.preventDefault) theEvent.preventDefault();
  186. }
  187. }
  188. </script>
  189. <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
  190. integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  191. crossorigin="">
  192. </script>
  193. <!-- ----------------- iOS Support for home screen ----------------- -->
  194. <script>
  195. function showIosInstall() {
  196. let iosPrompt = document.querySelector(".ios-prompt");
  197. iosPrompt.style.display = "block";
  198. iosPrompt.addEventListener("click", () => {
  199. iosPrompt.style.display = "none";
  200. });
  201. }
  202. function iOSInstallerCheck() {
  203. // Detects if device is on iOS
  204. const isIOS = () => {
  205. const userAgent = window.navigator.userAgent.toLowerCase();
  206. return /iphone|ipad|ipod/.test(userAgent);
  207. }
  208. // Detects if device is in standalone mode
  209. const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);
  210. // Checks if should display install popup notification:
  211. if (isIOS() && !isInStandaloneMode()) {
  212. showIosInstall();
  213. }
  214. }
  215. iOSInstallerCheck();
  216. </script>
  217. </body>
  218. </html>