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 9.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  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>Loading...</app>
  28. <div id="blazor-error-ui">
  29. An unhandled error has occurred.
  30. <a href="" class="reload">Reload</a>
  31. <a class="dismiss">🗙</a>
  32. </div>
  33. <!-- The actual snackbar -->
  34. <div id="snackbarDiv">
  35. <div id="snackbar">A new version of this app is available. Click <a id="reload" style="color:deepskyblue">here</a> to update. Eventually you have to restart it manually.</div>
  36. </div>
  37. <script src="_framework/blazor.webassembly.js"></script>
  38. <script src="_content/TG.Blazor.IndexedDB/indexedDb.Blazor.js"></script>
  39. <script>
  40. let newWorker;
  41. function showUpdateBar() {
  42. let snackbarDiv = document.getElementById('snackbarDiv');
  43. let snackbar = document.getElementById('snackbar');
  44. snackbar.className = 'show';
  45. snackbarDiv.className = 'show';
  46. }
  47. function hideUpdateBar() {
  48. let snackbarDiv = document.getElementById('snackbarDiv');
  49. let snackbar = document.getElementById('snackbar');
  50. snackbar.className = '';
  51. snackbarDiv.className = '';
  52. }
  53. // The click event on the pop up notification
  54. document.getElementById('reload').addEventListener('click', function () {
  55. newWorker.postMessage({ action: 'skipWaiting' });
  56. hideUpdateBar();
  57. });
  58. if ('serviceWorker' in navigator) {
  59. navigator.serviceWorker.register('service-worker.js').then(reg => {
  60. reg.addEventListener('updatefound', () => {
  61. // A wild service worker has appeared in reg.installing!
  62. newWorker = reg.installing;
  63. newWorker.addEventListener('statechange', () => {
  64. // Has newWorker.state changed?
  65. switch (newWorker.state) {
  66. case 'installed':
  67. if (navigator.serviceWorker.controller) {
  68. // new update available
  69. showUpdateBar();
  70. }
  71. // No update available
  72. break;
  73. }
  74. });
  75. });
  76. }).catch((err) => console.log('Failed to register Service worker.', err));
  77. let refreshing;
  78. navigator.serviceWorker.addEventListener('controllerchange', function () {
  79. if (refreshing) return;
  80. window.location = window.location.origin;
  81. refreshing = true;
  82. console.log('Reload to page ' + window.location.origin + ' on controller change.');
  83. });
  84. }
  85. </script>
  86. <script>
  87. function BlazorSetLocalStorage(key, value) {
  88. localStorage.setItem(key, value);
  89. }
  90. function BlazorGetLocalStorage(key) {
  91. return localStorage.getItem(key);
  92. }
  93. function BlazorRegisterStorageEvent(component) {
  94. window.addEventListener("storage", async e => {
  95. await component.invokeMethodAsync("OnStorageUpdated", e.key);
  96. });
  97. }
  98. function registerOnlineStatusHandler(dotNetObjRef) {
  99. function onlineStatusHandler() {
  100. dotNetObjRef.invokeMethodAsync("SetOnlineStatus", navigator.onLine);
  101. };
  102. onlineStatusHandler();
  103. window.addEventListener("online", onlineStatusHandler);
  104. window.addEventListener("offline", onlineStatusHandler);
  105. }
  106. function IsGeoLocationAllowed(dotNetObjRef) {
  107. navigator.permissions.query({ name: 'geolocation' }).then(function (result) {
  108. console.log("GeoLocation permission: " + result.state);
  109. result.onchange = function () {
  110. console.log("GeoLocation permission: " + result.state);
  111. dotNetObjRef.invokeMethodAsync("GeoLocationPermissionChanged", result.state);
  112. }
  113. dotNetObjRef.invokeMethodAsync("GeoLocationPermissionChanged", result.state);
  114. return result.state;
  115. });
  116. return "";
  117. }
  118. function RemoveScrollLock(dotNetObjRef) {
  119. document.querySelector("body.mdc-dialog-scroll-lock")?.classList.remove("mdc-dialog-scroll-lock");
  120. }
  121. function MoveCursorToNextInput(dotNetObjRef, key) {
  122. if (key == "Enter" || key == "ArrowRight") {
  123. var activeElement = document.activeElement;
  124. var inputs = getKeyboardFocusableElements();
  125. var arr = Array.prototype.slice.call(inputs)
  126. var index = arr.indexOf(activeElement);
  127. if (index + 1 < arr.length && CanNavigateForward(activeElement, key)) {
  128. activeElement.dispatchEvent(new Event('focusout'));
  129. setTimeout(function () { arr[index + 1].focus(); }, 50);
  130. if (arr[index + 1].localName.includes('input') || arr[index + 1].localName.includes('textarea')) {
  131. setTimeout(function () { arr[index + 1].select(); }, 50);
  132. }
  133. }
  134. }
  135. }
  136. function MoveCursorToPreviousInput(dotNetObjRef) {
  137. var activeElement = document.activeElement;
  138. var inputs = getKeyboardFocusableElements();
  139. var arr = Array.prototype.slice.call(inputs)
  140. var index = arr.indexOf(activeElement);
  141. if (index - 1 >= 0 && CanNavigateBack(activeElement)) {
  142. activeElement.dispatchEvent(new Event('focusout'));
  143. setTimeout(function () { arr[index + 1].focus(); }, 50);
  144. if (arr[index - 1].localName.includes('input') || arr[index - 1].localName.includes('textarea')) {
  145. setTimeout(function () { arr[index - 1].select(); }, 50);
  146. }
  147. }
  148. }
  149. function DispatchKeyboardEvent(dotNetObjRef, key) {
  150. window.dispatchEvent(new KeyboardEvent('keydown', { 'key': key }));
  151. }
  152. function getKeyboardFocusableElements(element = document) {
  153. return [...element.querySelectorAll('input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])')]
  154. .filter(el => el.localName != 'li' && !el.getAttribute("aria-hidden"))
  155. }
  156. function CanNavigateForward(element, key) {
  157. if (element.getAttribute('class').includes('select') || element.getAttribute('class').includes('button')) {
  158. if (key == "Enter") {
  159. return false;
  160. }
  161. return true;
  162. } else {
  163. return key == "Enter" || element.selectionStart == element.value.length
  164. || (element.selectionStart == 0 && element.selectionEnd == element.value.length);
  165. }
  166. }
  167. function CanNavigateBack(element) {
  168. if (element.getAttribute('class').includes('select') || element.getAttribute('class').includes('button')) {
  169. return true;
  170. } else {
  171. return element.selectionStart == null || element.selectionStart == 0;
  172. }
  173. }
  174. function CheckConstrainedInput(dotNetObjRef, key) {
  175. const ignoredKeys = ["Backspace", "Tab"];
  176. var theEvent = window.event;
  177. var activeElement = document.activeElement;
  178. var regex = new RegExp(activeElement.pattern);
  179. if (!ignoredKeys.includes(key) && !regex.test(activeElement.value + key)) {
  180. theEvent.returnValue = false;
  181. if (theEvent.preventDefault) theEvent.preventDefault();
  182. }
  183. }
  184. </script>
  185. <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
  186. integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  187. crossorigin="">
  188. </script>
  189. </body>
  190. </html>