147 lines
4.1 KiB
TypeScript
147 lines
4.1 KiB
TypeScript
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 Gpxes from './components/map/Gpxes';
|
|
// 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' });
|
|
//dispatch({ action: 'getGpxesForViewport', params: { type: 'tech' } });
|
|
/**
|
|
*
|
|
* @returns The root app component
|
|
*/
|
|
const App: React.FC = () => {
|
|
const [scope, setScope] = useAtom(scopeAtom);
|
|
|
|
console.log(`App, scope: ${JSON.stringify(scope)}`);
|
|
return (
|
|
<IonApp>
|
|
<IonContent fullscreen={true}>
|
|
<IonApp>
|
|
<LiveMap
|
|
scope={scope}
|
|
setScope={debounce(setScope, 1000)}
|
|
numberOfTiledLayers={5}
|
|
slippyGraphics={[
|
|
<CurrentLocation key='currentLocation' />,
|
|
<Gpxes key='gpxes' />,
|
|
]}
|
|
/>
|
|
</IonApp>
|
|
</IonContent>
|
|
<IonHeader className='ion-no-border' translucent={true}>
|
|
<IonToolbar>
|
|
<IonButtons slot='start'>
|
|
<Back />
|
|
<Forward />
|
|
</IonButtons>
|
|
<IonButtons slot='end'>
|
|
<GpxImport />
|
|
</IonButtons>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
<IonFooter className='ion-no-border'>
|
|
<IonToolbar>
|
|
<IonButtons>
|
|
<GetLocation />
|
|
</IonButtons>
|
|
</IonToolbar>
|
|
</IonFooter>
|
|
</IonApp>
|
|
);
|
|
};
|
|
|
|
export default App;
|