{"version":3,"sources":["components/Geolocation/geolocation.component.tsx"],"names":["GeolocationComponent","props","idGeoWatch","state","position","coords","latitude","longitude","accuracy","altitude","altitudeAccuracy","heading","speed","timestamp","geolocationStatus","isGeolocationSupported","navigator","geolocation","embedMapUrl","setPositionIntoState","bind","permissions","query","name","then","permissionStatus","console","log","setState","onchange","onChangeGeolocationStatus","this","watchPosition","clearWatch","undefined","latitudeDiff","Math","abs","message","className","Date","e","warn","title","width","height","frameBorder","scrolling","marginHeight","marginWidth","src","renderMap","id","href","renderPosition","Component"],"mappings":"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","file":"static/js/4.ebbd5ff9.chunk.js","sourcesContent":["import React, { Component, Fragment } from 'react';\nimport { Message } from 'components/Message/message.component';\n\ntype GeolocationState = {\n    position: Position,\n    geolocationStatus: string,\n    isGeolocationSupported: boolean,\n    embedMapUrl: string,\n};\n\nexport default class GeolocationComponent extends Component<{}, GeolocationState> {\n\n    private idGeoWatch: number | undefined;\n\n    constructor(props: {}) {\n        super(props);\n        this.state = {\n            position: { coords: { latitude: 0, longitude: 0, accuracy: 0, altitude: 0, altitudeAccuracy: 0, heading: 0, speed: 0 }, timestamp: 0 },\n            geolocationStatus: '',\n            isGeolocationSupported: !!navigator.geolocation,\n            embedMapUrl: ''\n        };\n\n        this.setPositionIntoState = this.setPositionIntoState.bind(this);\n    }\n\n    // After the component did mount, we set the state each second.\n    componentDidMount() {\n        navigator.permissions.query({ name: 'geolocation' })\n            .then(function (permissionStatus) {\n                console.log('geolocation permission state is ', permissionStatus.state);\n                return permissionStatus;\n            })\n            .then(permissionStatus => {\n                this.setState({\n                    ...this.state,\n                    geolocationStatus: permissionStatus.state\n                });\n                permissionStatus.onchange = () => this.onChangeGeolocationStatus(permissionStatus);\n            });\n        this.watchPosition();\n    }\n\n    componentWillUnmount() {\n        this.clearWatch();\n    }\n\n    onChangeGeolocationStatus(permissionStatus: PermissionStatus) {\n        this.setState({\n            ...this.state,\n            geolocationStatus: permissionStatus.state\n        });\n    }\n\n    watchPosition() {\n        if (navigator.geolocation) {\n            this.idGeoWatch = navigator.geolocation.watchPosition(this.setPositionIntoState);\n        }\n    }\n\n    clearWatch() {\n        if (navigator.geolocation && this.idGeoWatch !== undefined) {\n            navigator.geolocation.clearWatch(this.idGeoWatch);\n        }\n    }\n\n    setPositionIntoState(position: Position) {\n        const latitudeDiff = Math.abs(this.state.position.coords.latitude - position.coords.latitude);\n        const longitudeDiff = Math.abs(this.state.position.coords.longitude - position.coords.longitude);\n\n        // Only update embedded map when position has significant changed\n        const embedMapUrl = (longitudeDiff >= 0.009 || latitudeDiff >= 0.009)\n            ? `https://www.openstreetmap.org/export/embed.html?bbox=${position.coords.longitude + 0.002},${position.coords.latitude + 0.001},${position.coords.longitude - 0.002},${position.coords.latitude - 0.001}&layer=mapnik&marker=${position.coords.latitude}%2C${position.coords.longitude}&amp;map=16`\n            : this.state.embedMapUrl;\n\n        this.setState({\n            ...this.state,\n            position,\n            embedMapUrl\n        });\n    }\n\n    renderMessage(message: string) {\n        return (<h1>{message}</h1>);\n    }\n\n    renderPosition() {\n        return (\n            <div className=\"mapInfo\">\n                <h2 className=\"mainTitle\">Informations</h2>\n                <p className=\"title\">Accuracy: <span>{this.state.position.coords.accuracy}</span></p>\n                <p className=\"title\">Altitude: <span>{this.state.position.coords.altitude}</span></p>\n                <p className=\"title\">Alt accuracy: <span>{this.state.position.coords.altitudeAccuracy}</span></p>\n                <p className=\"title\">Heading: <span>{this.state.position.coords.heading}</span></p>\n                <p className=\"title\">Latitude: <span>{this.state.position.coords.latitude}</span></p>\n                <p className=\"title\">Longitude: <span>{this.state.position.coords.longitude}</span></p>\n                <p className=\"title\">Speed: <span>{this.state.position.coords.speed}</span></p>\n                <p className=\"title\">timestamp: <span>{this.state.position.timestamp}</span></p>\n                <p className=\"title\">Date: <span>{() => { try {new Date(this.state.position.timestamp)} catch(e){console.warn(`Not date ${this.state.position.timestamp}`)}}}</span></p>\n            </div>);\n    }\n\n    renderMap() {\n        return (\n            <Fragment>\n                <iframe title=\"map\" width=\"100%\" height=\"30%\" frameBorder=\"0\" scrolling=\"no\" marginHeight={0} marginWidth={0} src={this.state.embedMapUrl}></iframe>\n            </Fragment>\n        );\n    }\n\n    render() {\n        if (!this.state.isGeolocationSupported) {\n            return (<Message message='Your browser do not support geolocation api.' />)\n        }\n\n        if (this.state.geolocationStatus !== 'granted') {\n            switch (this.state.geolocationStatus) {\n                case 'denied':\n                    return (<Message message='You have denied access to your geolocation api.' />);\n                case 'prompt':\n                    return (<Message message='Please allow us to access your geolocation api.' />);\n                default:\n                    return (<Message message='Loading...' />);\n            }\n        }\n\n        return (<div>\n            <div>\n                {this.renderMap()}\n                <br /><small><a id=\"mapLink\" href={`https://www.openstreetmap.org/?mlat=${this.state.position.coords.latitude}&amp;mlon=${this.state.position.coords.longitude}#map=16/${this.state.position.coords.latitude}/${this.state.position.coords.longitude}`}>View Larger Map</a></small>\n            </div>\n            <div>\n                {this.renderPosition()}\n            </div>\n        </div>);\n    }\n}"],"sourceRoot":""}