Added table component
This commit is contained in:
z0ccc
parent
82fc118fe0
commit
fe2f008d54
3 changed files with 149 additions and 186 deletions
|
|
@ -3,7 +3,7 @@
|
|||
--text: #212121;
|
||||
--background: #fff;
|
||||
--scrollbar: #ccc;
|
||||
--navbar: #F7F9F9;
|
||||
--navbar: #FBFCFC;
|
||||
--icon: #AAB7B8;
|
||||
--border: #F0F3F4;
|
||||
}
|
||||
|
|
|
|||
192
src/App.jsx
192
src/App.jsx
|
|
@ -1,191 +1,13 @@
|
|||
import * as React from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import * as Bowser from 'bowser';
|
||||
import Navbar from './Navbar';
|
||||
import Table from './Table';
|
||||
import './App.css';
|
||||
|
||||
const updateDOM = (id, text) => {
|
||||
document.getElementById(id).innerHTML += text;
|
||||
};
|
||||
|
||||
const App = () => {
|
||||
useEffect(() => {
|
||||
const uaResult = Bowser.parse(navigator.userAgent);
|
||||
updateDOM('browser', uaResult.browser.name);
|
||||
updateDOM('browserVersion', uaResult.browser.version);
|
||||
updateDOM('browserEngine', uaResult.engine.name);
|
||||
updateDOM('os', `${uaResult.os.name} ${uaResult.os.versionName}`);
|
||||
|
||||
updateDOM('language', navigator.language);
|
||||
updateDOM('timezone', Intl.DateTimeFormat().resolvedOptions().timeZone);
|
||||
const date = new Date();
|
||||
updateDOM('offset', date.getTimezoneOffset());
|
||||
updateDOM('cookies', navigator.cookieEnabled);
|
||||
updateDOM('java', navigator.javaEnabled());
|
||||
updateDOM('dnt', navigator.doNotTrack ? 'true' : 'false');
|
||||
|
||||
const pluginsLength = navigator.plugins.length;
|
||||
let plugins = '';
|
||||
for (let i = 0; i < pluginsLength; i++) {
|
||||
if (i !== 0) plugins += ', ';
|
||||
plugins += navigator.plugins[i].name;
|
||||
}
|
||||
updateDOM('plugins', plugins);
|
||||
|
||||
updateDOM('platform', uaResult.platform.type);
|
||||
updateDOM('screenSize', `${window.screen.width}x${window.screen.height}`);
|
||||
updateDOM('color', window.screen.colorDepth);
|
||||
|
||||
navigator.getBattery().then((battery) => {
|
||||
updateDOM('batteryLevel', `${Math.round(battery.level * 100)}%`);
|
||||
updateDOM('batteryStatus', battery.charging ? 'Charging' : 'Not charging');
|
||||
});
|
||||
|
||||
updateDOM('memory', `${navigator.deviceMemory}GB`);
|
||||
updateDOM('cores', navigator.hardwareConcurrency);
|
||||
updateDOM('maxTouch', navigator.maxTouchPoints);
|
||||
const gl = document.createElement('canvas').getContext('webgl');
|
||||
const ext = gl.getExtension('WEBGL_debug_renderer_info');
|
||||
updateDOM('vendor', gl.getParameter(ext.UNMASKED_VENDOR_WEBGL));
|
||||
updateDOM('renderer', gl.getParameter(ext.UNMASKED_RENDERER_WEBGL));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<Navbar />
|
||||
<table>
|
||||
<col className="column-one" />
|
||||
<div className="title">Software</div>
|
||||
<tr>
|
||||
<td>Browser:</td>
|
||||
<td>
|
||||
<div id="browser" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Browser version:</td>
|
||||
<td>
|
||||
<div id="browserVersion" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Browser engine:</td>
|
||||
<td>
|
||||
<div id="browserEngine" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Operating system:</td>
|
||||
<td>
|
||||
<div id="os" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Language:</td>
|
||||
<td>
|
||||
<div id="language" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timezone:</td>
|
||||
<td>
|
||||
<div id="timezone" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timezone offset:</td>
|
||||
<td>
|
||||
<div id="offset" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cookies enabled:</td>
|
||||
<td>
|
||||
<div className="capitalize" id="cookies" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Java enabled:</td>
|
||||
<td>
|
||||
<div className="capitalize" id="java" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DNT header enabled:</td>
|
||||
<td>
|
||||
<div className="capitalize" id="dnt" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Plugins:</td>
|
||||
<td>
|
||||
<div id="plugins" />
|
||||
</td>
|
||||
</tr>
|
||||
<div className="title">Hardware</div>
|
||||
<tr>
|
||||
<td>Platform:</td>
|
||||
<td>
|
||||
<div className="capitalize" id="platform" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Screen resolution:</td>
|
||||
<td>
|
||||
<div id="screenSize" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Color Resolution:</td>
|
||||
<td>
|
||||
<div id="color" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Battery level:</td>
|
||||
<td>
|
||||
<div id="batteryLevel" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Battery status:</td>
|
||||
<td>
|
||||
<div id="batteryStatus" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Device memory:</td>
|
||||
<td>
|
||||
<div id="memory" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td># of CPU cores:</td>
|
||||
<td>
|
||||
<div id="cores" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Max touchpoints:</td>
|
||||
<td>
|
||||
<div id="maxTouch" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WebGL vendor:</td>
|
||||
<td>
|
||||
<div id="vendor" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WebGL renderer:</td>
|
||||
<td>
|
||||
<div id="renderer" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const App = () => (
|
||||
<div className="App">
|
||||
<Navbar />
|
||||
<Table />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
141
src/Table.js
Normal file
141
src/Table.js
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
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>
|
||||
<tr>
|
||||
<td>Browser:</td>
|
||||
<td>{browser}</td>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Table;
|
||||
Loading…
Add table
Reference in a new issue