@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
95 lines (90 loc) • 5.99 kB
JavaScript
/**
* 2024-10-31 GeoLocation code originally migrated from PhotoForm Webpart sample
* Happy Halloween 2024!
*
fps-library-v2 imports
import { getGeoLocation, UnknownGeoLocation } from from '@mikezimm/fps-core-v7/lib/components/atoms/BrowserAPIs/GeoLocation/funcitons';
import { IFpsGeolocationPosition, IFpsGpsLocationFormProps, } from from '@mikezimm/fps-core-v7/lib/components/atoms/Inputs/GeoLocation/interfaces';
import { FPSReactJSON, } from '../../ReactJSON/ReactJSONObjectV2';
import '@mikezimm/fps-styles/dist/fps-GeoLocation.css'; // Import your CSS file
import FPSToggle from '../../Toggle/component';
Local project imports
import { FPSReactJSON, } from '@mikezimm/fps-library-v2/lib/components/atoms/ReactJSON/ReactJSONObjectV2';
import { getGeoLocation, UnknownGeoLocation } from './funcitons';
import { IFpsGeolocationPosition, IFpsGpsLocationFormProps, } from './interfaces';
import './fps-GeoLocation.css'; // Import your CSS file
import FPSToggle from '../../Toggle/component';
*/
import * as React from 'react';
import { useState, } from 'react';
import { getGeoLocation, UnknownGeoLocation } from '@mikezimm/fps-core-v7/lib/components/atoms/Inputs/GeoLocation/functions';
import { FPSReactJSON, } from '../../ReactJSON/ReactJSONObjectV2';
import FPSToggle from '../Toggle/component';
require('@mikezimm/fps-styles/dist/fps-GeoLocation.css');
// https://github.com/fps-solutions/FPS-Photo-Form/issues/61
const FpsGpsLocationForm = (props) => {
const { style = {}, className, buttonClass, onGetLocation, onSubmit, enableDetails = true, allowEditing = false, showAltitude = true, heading = 'GPS Location Form' } = props;
const [showDetails, setShowDetails] = useState(false);
const [debugMode, setDebugMode] = useState(false);
const [position, setPosition] = useState(UnknownGeoLocation);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [readOnly, setReadOnly] = useState(allowEditing);
const handleGetLocation = async () => {
const locationDetails = await getGeoLocation(debugMode);
if (debugMode)
alert(`debugMode GpsLocationForm ~ 33: ${JSON.stringify(locationDetails)}`);
setPosition(locationDetails);
if (onGetLocation)
onGetLocation(locationDetails);
};
const handleDetailsChange = (checked) => {
setShowDetails(checked); // Update the state when toggle changes
};
const handleDebugChange = (checked) => {
setDebugMode(checked); // Update the state when toggle changes
};
const handleReset = (e) => {
setPosition(UnknownGeoLocation);
if (onGetLocation)
onGetLocation(UnknownGeoLocation);
};
const handleSubmit = (e) => {
if (onSubmit)
onSubmit(position);
};
if (debugMode && position.status !== 'Success')
alert(`debugMode GpsLocationForm ~ 55: ${JSON.stringify(position)}`);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const coords = position.coords ? position.coords : {};
const { latitude = '', longitude = '', altitude = '' } = coords;
const buttonClassName = `action-button ${buttonClass ? buttonClass : ''}`;
return (React.createElement("div", { className: `gps-form ${showAltitude ? 'fps-altitude' : ''} ${className ? className : ''}`, style: style },
heading ? React.createElement("h2", null, heading) : undefined,
React.createElement("div", { style: { display: 'flex' } },
React.createElement("button", { className: buttonClassName, onClick: handleGetLocation }, "Get Current Location"),
React.createElement("button", { className: buttonClassName, onClick: handleReset }, "Clear"),
!enableDetails ? undefined : React.createElement(FPSToggle, { containerStyle: { marginLeft: 'auto', minWidth: '0px' }, label: "Show Details", onText: "", offText: "", onChange: handleDetailsChange }),
!enableDetails ? undefined : React.createElement(FPSToggle, { containerStyle: { marginLeft: 'auto', minWidth: '0px' }, label: "Debug", onText: "", offText: "", onChange: handleDebugChange })),
React.createElement("form", { onSubmit: handleSubmit, className: `form ${showAltitude ? 'fps-altitude' : ''}` },
React.createElement("div", { className: "form-group", style: { marginLeft: '0px' } },
React.createElement("label", null,
"Latitude:",
React.createElement("input", { type: "text", value: latitude, readOnly: readOnly, className: "input-field" }))),
React.createElement("div", { className: "form-group" },
React.createElement("label", null,
"Longitude:",
React.createElement("input", { type: "text", value: longitude, readOnly: readOnly, className: "input-field" }))),
showAltitude === true ?
React.createElement("div", { className: "form-group" },
React.createElement("label", null,
"Altitude:",
React.createElement("input", { type: "text", value: position.status === 'Success' && altitude === null ? 'Not Avail' : altitude, readOnly: readOnly, className: "input-field" }))) : undefined,
React.createElement("div", { className: "form-group" },
React.createElement("label", null,
"Additional Info:",
React.createElement("input", { type: "text", value: position.message, readOnly: readOnly, className: "input-field" }))),
onSubmit ? React.createElement("button", { type: "submit", className: "submit-button" }, "Submit") : undefined),
showDetails ? React.createElement(FPSReactJSON, { name: 'position object', jsonObject: position }) : undefined));
};
export default FpsGpsLocationForm;
//# sourceMappingURL=component.js.map