Added new table layout
This commit is contained in:
z0ccc
parent
fd7f1ce99f
commit
4c69ed3560
4 changed files with 181 additions and 137 deletions
|
|
@ -32,5 +32,6 @@ module.exports = {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
'react/jsx-one-expression-per-line': 'off',
|
'react/jsx-one-expression-per-line': 'off',
|
||||||
|
'react/prop-types': 'off',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import Navbar from './Navbar';
|
import Navbar from './Navbar';
|
||||||
import Table from './Table';
|
import TableWrap from './TableWrap';
|
||||||
import '../styles/App.css';
|
import '../styles/App.css';
|
||||||
|
|
||||||
const App = () => (
|
const App = () => (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<Table />
|
<TableWrap />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,140 +1,20 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useState, useEffect } from 'react';
|
|
||||||
import Bowser from 'bowser';
|
|
||||||
|
|
||||||
const Table = () => {
|
const Table = ({ title, data }) => (
|
||||||
const [batLevel, setBatLevel] = useState('');
|
|
||||||
const [batStatus, setBatStatus] = useState('');
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
navigator.getBattery().then((res) => {
|
|
||||||
setBatLevel(`${Math.round(res.level * 100)}%`);
|
|
||||||
setBatStatus(res.charging ? 'Charging' : 'Not charging');
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const uaResult = Bowser.parse(navigator.userAgent);
|
|
||||||
const browser = uaResult.browser.name;
|
|
||||||
const browserVersion = uaResult.browser.version;
|
|
||||||
const browserEngine = uaResult.engine.name;
|
|
||||||
const os = `${uaResult.os.name} ${uaResult.os.versionName}`;
|
|
||||||
const platform = uaResult.platform.type;
|
|
||||||
const language = navigator.language;
|
|
||||||
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
||||||
const date = new Date();
|
|
||||||
const offset = date.getTimezoneOffset();
|
|
||||||
const cookies = navigator.cookieEnabled ? 'True' : 'False';
|
|
||||||
const java = navigator.javaEnabled() ? 'True' : 'False';
|
|
||||||
const dnt = navigator.doNotTrack ? 'True' : 'False';
|
|
||||||
|
|
||||||
const pluginsLength = navigator.plugins.length;
|
|
||||||
let pluginList = '';
|
|
||||||
for (let i = 0; i < pluginsLength; i++) {
|
|
||||||
if (i !== 0) pluginList += ', ';
|
|
||||||
pluginList += navigator.plugins[i].name;
|
|
||||||
}
|
|
||||||
|
|
||||||
const plugins = pluginList;
|
|
||||||
const screenSize = `${window.screen.width}x${window.screen.height}`;
|
|
||||||
const color = window.screen.colorDepth;
|
|
||||||
const memory = `${navigator.deviceMemory}GB`;
|
|
||||||
const cores = navigator.hardwareConcurrency;
|
|
||||||
const maxTouch = navigator.maxTouchPoints;
|
|
||||||
const gl = document.createElement('canvas').getContext('webgl');
|
|
||||||
const ext = gl.getExtension('WEBGL_debug_renderer_info');
|
|
||||||
const vendor = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL);
|
|
||||||
const renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL);
|
|
||||||
return (
|
|
||||||
<table>
|
<table>
|
||||||
<col className="column-one" />
|
<thead>
|
||||||
<div className="title">Software</div>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>Browser:</td>
|
<th>{title}</th>
|
||||||
<td>{browser}</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
|
</thead>
|
||||||
|
{data.map((item) => (
|
||||||
|
<tbody key={item.title}>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Browser version:</td>
|
<td>{item.title}:</td>
|
||||||
<td>{browserVersion}</td>
|
<td>{item.value}</td>
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Browser engine:</td>
|
|
||||||
<td>{browserEngine}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Operating system:</td>
|
|
||||||
<td>{os}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Language:</td>
|
|
||||||
<td>{language}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Timezone:</td>
|
|
||||||
<td>{timezone}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Timezone offset:</td>
|
|
||||||
<td>{offset}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Cookies enabled:</td>
|
|
||||||
<td>{cookies}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Java enabled:</td>
|
|
||||||
<td>{java}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>DNT header enabled:</td>
|
|
||||||
<td>{dnt}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Plugins:</td>
|
|
||||||
<td>{plugins}</td>
|
|
||||||
</tr>
|
|
||||||
<div className="title">Hardware</div>
|
|
||||||
<tr>
|
|
||||||
<td>Platform:</td>
|
|
||||||
<td>{platform}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Screen resolution:</td>
|
|
||||||
<td>{screenSize}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Color Resolution:</td>
|
|
||||||
<td>{color}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Battery level:</td>
|
|
||||||
<td>{batLevel}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Battery status:</td>
|
|
||||||
<td>{batStatus}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Device memory:</td>
|
|
||||||
<td>{memory}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td># of CPU cores:</td>
|
|
||||||
<td>{cores}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Max touchpoints:</td>
|
|
||||||
<td>{maxTouch}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>WebGL vendor:</td>
|
|
||||||
<td>{vendor}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>WebGL renderer:</td>
|
|
||||||
<td>{renderer}</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
))}
|
||||||
</table>
|
</table>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
export default Table;
|
export default Table;
|
||||||
|
|
|
||||||
163
src/components/TableWrap.js
Normal file
163
src/components/TableWrap.js
Normal file
|
|
@ -0,0 +1,163 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import Bowser from 'bowser';
|
||||||
|
import Table from './Table';
|
||||||
|
|
||||||
|
const sortArr = (arr) => {
|
||||||
|
const arrLength = arr.length;
|
||||||
|
let list = '';
|
||||||
|
for (let i = 0; i < arrLength; i++) {
|
||||||
|
if (i !== 0) list += ', ';
|
||||||
|
list += arr[i];
|
||||||
|
}
|
||||||
|
return list;
|
||||||
|
};
|
||||||
|
|
||||||
|
const TableWrap = () => {
|
||||||
|
const uaResult = Bowser.parse(navigator.userAgent);
|
||||||
|
const date = new Date();
|
||||||
|
const pluginsLength = navigator.plugins.length;
|
||||||
|
|
||||||
|
let pluginList = '';
|
||||||
|
for (let i = 0; i < pluginsLength; i++) {
|
||||||
|
if (i !== 0) pluginList += ', ';
|
||||||
|
pluginList += navigator.plugins[i].name;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [batLevel, setBatLevel] = useState('');
|
||||||
|
const [batStatus, setBatStatus] = useState('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if ('getBattery' in navigator) {
|
||||||
|
navigator.getBattery().then((res) => {
|
||||||
|
setBatLevel(`${Math.round(res.level * 100)}%`);
|
||||||
|
setBatStatus(res.charging ? 'Charging' : 'Not charging');
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setBatLevel('N/A');
|
||||||
|
setBatStatus('N/A');
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const gl = document.createElement('canvas').getContext('webgl');
|
||||||
|
const ext = gl.getExtension('WEBGL_debug_renderer_info');
|
||||||
|
|
||||||
|
const software = [
|
||||||
|
{
|
||||||
|
title: 'Browser',
|
||||||
|
value: uaResult.browser.name,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Browser version',
|
||||||
|
value: uaResult.browser.version,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Browser engine',
|
||||||
|
value: uaResult.browser.engine || 'N/A',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'OS',
|
||||||
|
value: `${uaResult.os.name} ${uaResult.os.versionName}`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'OS version',
|
||||||
|
value: uaResult.os.version,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Platform',
|
||||||
|
value: navigator.platform,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'System type',
|
||||||
|
value: uaResult.platform.type,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'User Agent',
|
||||||
|
value: navigator.userAgent || 'N/A',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Preferred language',
|
||||||
|
value: navigator.language || 'N/A',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Languages',
|
||||||
|
value: sortArr(navigator.languages) || 'N/A',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Timezone',
|
||||||
|
value: Intl.DateTimeFormat().resolvedOptions().timeZone || 'N/A',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Timezone offset',
|
||||||
|
value: date.getTimezoneOffset() || 'N/A',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Cookies enabled',
|
||||||
|
value: navigator.cookieEnabled ? 'True' : 'False',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Java enabled',
|
||||||
|
value: navigator.javaEnabled() ? 'True' : 'False',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'DNT header enabled',
|
||||||
|
value: navigator.doNotTrack ? 'True' : 'False',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Automated browser',
|
||||||
|
value: navigator.webdriver ? 'True' : 'False',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Plugins',
|
||||||
|
value: pluginList || 'N/A',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const hardware = [
|
||||||
|
{
|
||||||
|
title: 'Screen resolution',
|
||||||
|
value: `${window.screen.width}x${window.screen.height}`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Color Resolution',
|
||||||
|
value: window.screen.colorDepth,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Battery level',
|
||||||
|
value: batLevel,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Battery status',
|
||||||
|
value: batStatus,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Device memory',
|
||||||
|
value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '# of CPU cores',
|
||||||
|
value: navigator.hardwareConcurrency || 'N/A',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Max touchpoints',
|
||||||
|
value: navigator.maxTouchPoints,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'WebGL vendor',
|
||||||
|
value: gl.getParameter(ext.UNMASKED_VENDOR_WEBGL),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'WebGL renderer',
|
||||||
|
value: gl.getParameter(ext.UNMASKED_RENDERER_WEBGL),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="frontRight">
|
||||||
|
<Table title="Software" data={software} />
|
||||||
|
<Table title="Hardware" data={hardware} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TableWrap;
|
||||||
Loading…
Add table
Reference in a new issue