import { IonApp, IonButtons, IonContent, IonFooter, IonHeader, IonToolbar, setupIonicReact, } from '@ionic/react'; /* Core CSS required for Ionic components to work properly */ import '@ionic/react/css/core.css'; /* Basic CSS for apps built with Ionic */ import '@ionic/react/css/normalize.css'; import '@ionic/react/css/structure.css'; import '@ionic/react/css/typography.css'; /* Optional CSS utils that can be commented out */ import '@ionic/react/css/padding.css'; import '@ionic/react/css/float-elements.css'; import '@ionic/react/css/text-alignment.css'; import '@ionic/react/css/text-transformation.css'; import '@ionic/react/css/flex-utils.css'; import '@ionic/react/css/display.css'; /* Theme variables */ import './theme/variables.css'; import dispatch from './workers/dispatcher-main'; import LiveMap from './components/map/LiveMap'; import { atom, useAtom } from 'jotai'; import { atomWithHash } from 'jotai/utils'; import { MapScope } from './components/map/types'; import { debounce } from 'lodash'; import GetLocation from './components/buttons/GetLocation'; import { geoPoint } from './components/map/types'; import Back from './components/buttons/Back'; import Forward from './components/buttons/Forward'; import CurrentLocation from './components/map/CurrentLocation'; import GpxImport from './components/dialogs/GpxImport'; // import { initDb } from './db'; // import PouchDB from 'pouchdb'; // import PouchDBFind from 'pouchdb-find'; // PouchDB.plugin(PouchDBFind); setupIonicReact(); // See https://stackoverflow.com/questions/71538643/property-wakelock-does-not-exist-on-type-navigator const requestWakeLock = async () => { const anyNav: any = navigator; if ('wakeLock' in navigator) { try { const wakeLock = await anyNav['wakeLock'].request('screen'); } catch (err: any) { // The wake lock request fails - usually system-related, such as low battery. console.log(`Wake lock request failed: ${err.name}, ${err.message}`); } } else { console.log('No wake lock support here...'); } }; const handleVisibilityChange = () => { if (document.hidden) { console.log('Application hidden'); } else { console.log('Application visible'); requestWakeLock(); } }; // See https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API document.addEventListener('visibilitychange', handleVisibilityChange, false); requestWakeLock(); const initialScope: MapScope = { center: { lat: -37.8403508, lon: 77.5539501 }, zoom: 13, tileProvider: 'osm', }; const scopeAtom = atomWithHash('scope', initialScope); export const setCenterAtom = atom(null, (get, set, center: geoPoint) => { const previousScope = get(scopeAtom); const newScope: MapScope = { ...previousScope, center: center, }; set(scopeAtom, newScope); }); // const db = new PouchDB('dyomedea', { auto_compaction: true, revs_limit: 10 }); // initDb(db); dispatch({ action: 'initDb' }); /** * * @returns The root app component */ const App: React.FC = () => { const [scope, setScope] = useAtom(scopeAtom); console.log(`App, scope: ${JSON.stringify(scope)}`); return ( ]} /> ); }; export default App;