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.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. <!DOCTYPE html>
  2. <html lang="de-ch">
  3. <head>
  4. <title>Caritas PWA</title>
  5. <base href="/" />
  6. <meta charset="utf-8" />
  7. <meta name="description" content="Caritas PWA, developed by INTEGRATE AG, Switzerland">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
  9. <meta name="apple-mobile-web-app-status-bar" content="#db001b">
  10. <meta name="theme-color" content="#db001b">
  11. <script src="_content/BlazorAnimate/blazorAnimateInterop.js"></script>
  12. <script src="_content/MatBlazor/dist/matBlazor.js"></script>
  13. <link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />
  14. <link href="css/united/bootstrap.min.css" rel="stylesheet" />
  15. <link href="css/united/_bootswatch.min.css" rel="stylesheet" />
  16. <link href="css/united/_variables.min.css" rel="stylesheet" />
  17. <link href="css/app.css" rel="stylesheet" />
  18. <link href="manifest.json" rel="manifest" />
  19. <link rel="apple-touch-icon" href="icons/icon-60@3x.png" />
  20. <link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet"
  21. integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  22. crossorigin="" />
  23. </head>
  24. <body>
  25. <app>Loading...</app>
  26. <div id="blazor-error-ui">
  27. An unhandled error has occurred.
  28. <a href="" class="reload">Reload</a>
  29. <a class="dismiss">🗙</a>
  30. </div>
  31. <!-- The actual snackbar -->
  32. <div id="snackbarDiv">
  33. <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>
  34. </div>
  35. <script src="_framework/blazor.webassembly.js"></script>
  36. <script src="_content/TG.Blazor.IndexedDB/indexedDb.Blazor.js"></script>
  37. <script>
  38. let newWorker;
  39. function showUpdateBar() {
  40. let snackbarDiv = document.getElementById('snackbarDiv');
  41. let snackbar = document.getElementById('snackbar');
  42. snackbar.className = 'show';
  43. snackbarDiv.className = 'show';
  44. }
  45. function hideUpdateBar() {
  46. let snackbarDiv = document.getElementById('snackbarDiv');
  47. let snackbar = document.getElementById('snackbar');
  48. snackbar.className = '';
  49. snackbarDiv.className = '';
  50. }
  51. // The click event on the pop up notification
  52. document.getElementById('reload').addEventListener('click', function () {
  53. newWorker.postMessage({ action: 'skipWaiting' });
  54. hideUpdateBar();
  55. });
  56. if ('serviceWorker' in navigator) {
  57. navigator.serviceWorker.register('service-worker.js').then(reg => {
  58. reg.addEventListener('updatefound', () => {
  59. // A wild service worker has appeared in reg.installing!
  60. newWorker = reg.installing;
  61. newWorker.addEventListener('statechange', () => {
  62. // Has newWorker.state changed?
  63. switch (newWorker.state) {
  64. case 'installed':
  65. if (navigator.serviceWorker.controller) {
  66. // new update available
  67. showUpdateBar();
  68. }
  69. // No update available
  70. break;
  71. }
  72. });
  73. });
  74. }).catch((err) => console.log('Failed to register Service worker.', err));
  75. let refreshing;
  76. navigator.serviceWorker.addEventListener('controllerchange', function () {
  77. if (refreshing) return;
  78. window.location = window.location.origin;
  79. refreshing = true;
  80. console.log('Reload to page ' + window.location.origin + ' on controller change.');
  81. });
  82. }
  83. </script>
  84. <script>
  85. function BlazorSetLocalStorage(key, value) {
  86. localStorage.setItem(key, value);
  87. }
  88. function BlazorGetLocalStorage(key) {
  89. return localStorage.getItem(key);
  90. }
  91. function BlazorRegisterStorageEvent(component) {
  92. window.addEventListener("storage", async e => {
  93. await component.invokeMethodAsync("OnStorageUpdated", e.key);
  94. });
  95. }
  96. function registerOnlineStatusHandler(dotNetObjRef) {
  97. function onlineStatusHandler() {
  98. dotNetObjRef.invokeMethodAsync("SetOnlineStatus", navigator.onLine);
  99. };
  100. onlineStatusHandler();
  101. window.addEventListener("online", onlineStatusHandler);
  102. window.addEventListener("offline", onlineStatusHandler);
  103. }
  104. function IsGeoLocationAllowed(dotNetObjRef) {
  105. navigator.permissions.query({ name: 'geolocation' }).then(function (result) {
  106. console.log("GeoLocation permission: " + result.state);
  107. result.onchange = function () {
  108. console.log("GeoLocation permission: " + result.state);
  109. dotNetObjRef.invokeMethodAsync("GeoLocationPermissionChanged", result.state);
  110. }
  111. dotNetObjRef.invokeMethodAsync("GeoLocationPermissionChanged", result.state);
  112. return result.state;
  113. });
  114. return "";
  115. }
  116. function RemoveScrollLock(dotNetObjRef) {
  117. document.querySelector("body.mdc-dialog-scroll-lock")?.classList.remove("mdc-dialog-scroll-lock");
  118. }
  119. function MoveCursorToNextInput(dotNetObjRef, key) {
  120. if (key == "Enter" || key == "ArrowRight") {
  121. var activeElement = document.activeElement;
  122. var inputs = getKeyboardFocusableElements();
  123. var arr = Array.prototype.slice.call(inputs)
  124. var index = arr.indexOf(activeElement);
  125. if (index + 1 < arr.length && CanNavigateForward(activeElement, key)) {
  126. activeElement.dispatchEvent(new Event('focusout'));
  127. setTimeout(function () { arr[index + 1].focus(); }, 50);
  128. if (arr[index + 1].localName.includes('input') || arr[index + 1].localName.includes('textarea')) {
  129. setTimeout(function () { arr[index + 1].select(); }, 50);
  130. }
  131. }
  132. }
  133. }
  134. function MoveCursorToPreviousInput(dotNetObjRef) {
  135. var activeElement = document.activeElement;
  136. var inputs = getKeyboardFocusableElements();
  137. var arr = Array.prototype.slice.call(inputs)
  138. var index = arr.indexOf(activeElement);
  139. if (index - 1 >= 0 && CanNavigateBack(activeElement)) {
  140. activeElement.dispatchEvent(new Event('focusout'));
  141. setTimeout(function () { arr[index + 1].focus(); }, 50);
  142. if (arr[index - 1].localName.includes('input') || arr[index - 1].localName.includes('textarea')) {
  143. setTimeout(function () { arr[index - 1].select(); }, 50);
  144. }
  145. }
  146. }
  147. function DispatchKeyboardEvent(dotNetObjRef, key) {
  148. window.dispatchEvent(new KeyboardEvent('keydown', { 'key': key }));
  149. }
  150. function getKeyboardFocusableElements(element = document) {
  151. return [...element.querySelectorAll('input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])')]
  152. .filter(el => el.localName != 'li' && !el.getAttribute("aria-hidden"))
  153. }
  154. function CanNavigateForward(element, key) {
  155. if (element.getAttribute('class').includes('select') || element.getAttribute('class').includes('button')) {
  156. if (key == "Enter") {
  157. return false;
  158. }
  159. return true;
  160. } else {
  161. return key == "Enter" || element.selectionStart == element.value.length
  162. || (element.selectionStart == 0 && element.selectionEnd == element.value.length);
  163. }
  164. }
  165. function CanNavigateBack(element) {
  166. if (element.getAttribute('class').includes('select') || element.getAttribute('class').includes('button')) {
  167. return true;
  168. } else {
  169. return element.selectionStart == null || element.selectionStart == 0;
  170. }
  171. }
  172. function CheckConstrainedInput(dotNetObjRef, key) {
  173. const ignoredKeys = ["Backspace", "Tab"];
  174. var theEvent = window.event;
  175. var activeElement = document.activeElement;
  176. var regex = new RegExp(activeElement.pattern);
  177. if (!ignoredKeys.includes(key) && !regex.test(activeElement.value + key)) {
  178. theEvent.returnValue = false;
  179. if (theEvent.preventDefault) theEvent.preventDefault();
  180. }
  181. }
  182. </script>
  183. <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
  184. integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  185. crossorigin="">
  186. </script>
  187. </body>
  188. </html>