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/prop-types': 'off',
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import * as React from 'react';
|
||||
import Navbar from './Navbar';
|
||||
import Table from './Table';
|
||||
import TableWrap from './TableWrap';
|
||||
import '../styles/App.css';
|
||||
|
||||
const App = () => (
|
||||
<div className="App">
|
||||
<Navbar />
|
||||
<Table />
|
||||
<TableWrap />
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,140 +1,20 @@
|
|||
import * as React from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import Bowser from 'bowser';
|
||||
|
||||
const Table = () => {
|
||||
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>
|
||||
<col className="column-one" />
|
||||
<div className="title">Software</div>
|
||||
const Table = ({ title, data }) => (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Browser:</td>
|
||||
<td>{browser}</td>
|
||||
<th>{title}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Browser version:</td>
|
||||
<td>{browserVersion}</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>
|
||||
</table>
|
||||
);
|
||||
};
|
||||
|
||||
</thead>
|
||||
{data.map((item) => (
|
||||
<tbody key={item.title}>
|
||||
<tr>
|
||||
<td>{item.title}:</td>
|
||||
<td>{item.value}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
))}
|
||||
</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