Addedlocation functions to main
This commit is contained in:
parent
c59a75b24e
commit
7e6eab1ee7
2 changed files with 53 additions and 49 deletions
|
|
@ -1,16 +1,18 @@
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import ScanBlock from './ScanBlock';
|
import ScanBlock from './ScanBlock';
|
||||||
import Table from './Table';
|
import Table from './Table';
|
||||||
|
import { getLocation } from './main';
|
||||||
|
|
||||||
const LocationBlock = () => {
|
const LocationBlock = () => {
|
||||||
const [locationData, setLocationData] = useState('');
|
const [data, setData] = useState([]);
|
||||||
const [display, setDisplay] = useState('');
|
const [display, setDisplay] = useState('');
|
||||||
|
const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${data.lat},${data.lon}&markers=color:red%7Clabel:%7C${data.lat},${data.lon}&size=500x200&zoom=10&key=AIzaSyB-YN-X8PGBSPd7NOaQu4csVhgJUnF3ZGk`;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetch('https://api.vytal.io/ip/')
|
fetch('https://api.vytal.io/ip/')
|
||||||
.then((response) => response.json())
|
.then((response) => response.json())
|
||||||
.then((data) => {
|
.then((json) => {
|
||||||
setLocationData(data);
|
setData(getLocation(json));
|
||||||
setDisplay(1);
|
setDisplay(1);
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
|
|
@ -18,41 +20,6 @@ const LocationBlock = () => {
|
||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${locationData.lat},${locationData.lon}&markers=color:red%7Clabel:%7C${locationData.lat},${locationData.lon}&size=500x200&zoom=10&key=AIzaSyB-YN-X8PGBSPd7NOaQu4csVhgJUnF3ZGk`;
|
|
||||||
|
|
||||||
const data = [
|
|
||||||
{
|
|
||||||
key: 'country',
|
|
||||||
title: 'Country',
|
|
||||||
value: locationData.country,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'regionName',
|
|
||||||
title: 'Region',
|
|
||||||
value: locationData.regionName,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'lat',
|
|
||||||
title: 'City',
|
|
||||||
value: locationData.city,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'zip',
|
|
||||||
title: 'Zip code',
|
|
||||||
value: locationData.zip,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'lat',
|
|
||||||
title: 'Latitude',
|
|
||||||
value: locationData.lat,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'lon',
|
|
||||||
title: 'Longitude',
|
|
||||||
value: locationData.lon,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ScanBlock>
|
<ScanBlock>
|
||||||
<h1>Location</h1>
|
<h1>Location</h1>
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,54 @@ import md5 from 'crypto-js/md5';
|
||||||
import Bowser from 'bowser';
|
import Bowser from 'bowser';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
|
export {
|
||||||
|
getLocation,
|
||||||
|
getSoftware,
|
||||||
|
getHardware,
|
||||||
|
getWebGL,
|
||||||
|
getBattery,
|
||||||
|
getFingerprint,
|
||||||
|
getHash,
|
||||||
|
getName,
|
||||||
|
handleSave,
|
||||||
|
};
|
||||||
|
|
||||||
|
const getLocation = (locationData) => {
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
key: 'country',
|
||||||
|
title: 'Country',
|
||||||
|
value: locationData.country,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'regionName',
|
||||||
|
title: 'Region',
|
||||||
|
value: locationData.regionName,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'lat',
|
||||||
|
title: 'City',
|
||||||
|
value: locationData.city,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'zip',
|
||||||
|
title: 'Zip code',
|
||||||
|
value: locationData.zip,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'lat',
|
||||||
|
title: 'Latitude',
|
||||||
|
value: locationData.lat,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'lon',
|
||||||
|
title: 'Longitude',
|
||||||
|
value: locationData.lon,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
|
||||||
const getHardware = () => {
|
const getHardware = () => {
|
||||||
const data = [
|
const data = [
|
||||||
{
|
{
|
||||||
|
|
@ -229,14 +277,3 @@ const handleSave = (e, hash, setSaved) => {
|
||||||
});
|
});
|
||||||
setSaved(true);
|
setSaved(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
export {
|
|
||||||
getSoftware,
|
|
||||||
getHardware,
|
|
||||||
getWebGL,
|
|
||||||
getBattery,
|
|
||||||
getFingerprint,
|
|
||||||
getHash,
|
|
||||||
getName,
|
|
||||||
handleSave,
|
|
||||||
};
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue