tudor.stanciu
/
network-resurrector-frontend
mirror of https://dev.azure.com/tstanciu94/NetworkResurrector/_git/NetworkResurrector_Frontend
1
0
Fork 0
Code Issues 2 Packages Projects Releases Wiki Activity

log screen

master
Tudor Stanciu 2021-04-17 17:33:29 +03:00
parent 8250f361df
commit 7b01d3d102
3 changed files with 120 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
package-lock.json generated
View File

@ -1843,6 +1843,14 @@
"react-is": "^16.8.0 || ^17.0.0"
}
},
"@mattiasbuelens/web-streams-polyfill": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@mattiasbuelens/web-streams-polyfill/-/web-streams-polyfill-0.2.1.tgz",
"integrity": "sha512-oKuFCQFa3W7Hj7zKn0+4ypI8JFm4ZKIoncwAC6wd5WwFW2sL7O1hpPoJdSWpynQ4DJ4lQ6MvFoVDmCLilonDFg==",
"requires": {
"@types/whatwg-streams": "^0.0.7"
}
},
"@nodelib/fs.scandir": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@ -2499,6 +2507,11 @@
}
}
},
"@types/whatwg-streams": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/@types/whatwg-streams/-/whatwg-streams-0.0.7.tgz",
"integrity": "sha512-6sDiSEP6DWcY2ZolsJ2s39ZmsoGQ7KVwBDI3sESQsEm9P2dHTcqnDIHRZFRNtLCzWp7hCFGqYbw5GyfpQnJ01A=="
},
"@types/yargs": {
"version": "15.0.11",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.11.tgz",
@ -6541,6 +6554,11 @@
"bser": "2.1.1"
}
},
"fetch-readablestream": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/fetch-readablestream/-/fetch-readablestream-0.2.0.tgz",
"integrity": "sha512-qu4mXWf4wus4idBIN/kVH+XSer8IZ9CwHP+Pd7DL7TuKNC1hP7ykon4kkBjwJF3EMX2WsFp4hH7gU7CyL7ucXw=="
},
"figgy-pudding": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@ -7639,6 +7657,11 @@
"resolved": "https://registry.npmjs.org/immer/-/immer-7.0.9.tgz",
"integrity": "sha512-Vs/gxoM4DqNAYR7pugIxi0Xc8XAun/uy7AQu4fLLqaTBHxjOP9pJ266Q9MWA/ly4z6rAFZbvViOtihxUZ7O28A=="
},
"immutable": {
"version": "3.8.2",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
"integrity": "sha1-wkOZUUVbs5kT2vKBN28VMOEErfM="
},
"import-cwd": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@ -10362,6 +10385,11 @@
"through2": "^2.0.0"
}
},
"mitt": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/mitt/-/mitt-1.2.0.tgz",
"integrity": "sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw=="
},
"mixin-deep": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
@ -12686,6 +12714,34 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-lazylog": {
"version": "4.5.3",
"resolved": "https://registry.npmjs.org/react-lazylog/-/react-lazylog-4.5.3.tgz",
"integrity": "sha512-lyov32A/4BqihgXgtNXTHCajXSXkYHPlIEmV8RbYjHIMxCFSnmtdg4kDCI3vATz7dURtiFTvrw5yonHnrS+NNg==",
"requires": {
"@mattiasbuelens/web-streams-polyfill": "^0.2.0",
"fetch-readablestream": "^0.2.0",
"immutable": "^3.8.2",
"mitt": "^1.1.2",
"prop-types": "^15.6.1",
"react-string-replace": "^0.4.1",
"react-virtualized": "^9.21.0",
"text-encoding-utf-8": "^1.0.1",
"whatwg-fetch": "^2.0.4"
},
"dependencies": {
"whatwg-fetch": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
"integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
}
}
},
"react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"react-refresh": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@ -12803,6 +12859,14 @@
"workbox-webpack-plugin": "5.1.4"
}
},
"react-string-replace": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/react-string-replace/-/react-string-replace-0.4.4.tgz",
"integrity": "sha512-FAMkhxmDpCsGTwTZg7p/2v+/GTmxAp73so3fbSvlAcBBX36ujiGRNEaM/1u+jiYQrArhns+7eE92g2pi5E5FUA==",
"requires": {
"lodash": "^4.17.4"
}
},
"react-toastify": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-6.2.0.tgz",
@ -12824,6 +12888,19 @@
"prop-types": "^15.6.2"
}
},
"react-virtualized": {
"version": "9.22.3",
"resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.3.tgz",
"integrity": "sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==",
"requires": {
"@babel/runtime": "^7.7.2",
"clsx": "^1.0.4",
"dom-helpers": "^5.1.3",
"loose-envify": "^1.4.0",
"prop-types": "^15.7.2",
"react-lifecycles-compat": "^3.0.4"
}
},
"read-pkg": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@ -14830,6 +14907,11 @@
"minimatch": "^3.0.4"
}
},
"text-encoding-utf-8": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/text-encoding-utf-8/-/text-encoding-utf-8-1.0.2.tgz",
"integrity": "sha512-8bw4MY9WjdsD2aMtO0OzOCY3pXGYNx2d2FfHRVUKkiCPDWjKuOlhLVASS+pD7VkLTVjW268LYJHwsnPFlBpbAg=="
},
"text-table": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",

1
package.json
View File

@ -17,6 +17,7 @@
"react-dom": "^17.0.1",
"react-flags": "^0.1.18",
"react-i18next": "^11.4.0",
"react-lazylog": "^4.5.3",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-toastify": "^6.2.0"

76
src/features/machines/components/MachineLog.js
View File

@ -1,48 +1,46 @@
import React from "react";
import {
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Typography
} from "@material-ui/core";
import Box from "@material-ui/core/Box";
import React, { useState } from "react";
import { Typography } from "@material-ui/core";
import { Box, Button } from "@material-ui/core";
import { LazyLog, ScrollFollow } from "react-lazylog";
const MachineLog = () => {
const history = [
{ date: "2020-01-05", customerId: "11091700", amount: 3 },
{ date: "2020-01-02", customerId: "Anonymous", amount: 1 }
];
const [logs, setLogs] = useState(["Welcome..."]);
const addLog = text => {
setLogs(prev => [...prev, text]);
};
const randomLog = () => {
addLog(
"Text messaging, or texting, is the act of composing and sending electronic messages"
);
addLog(
"The term originally referred to messages sent using the Short Message Service (SMS). "
);
};
return (
<Box margin={1}>
<Typography variant="h6" gutterBottom component="div">
History
Logs
</Typography>
<Table size="small" aria-label="purchases">
<TableHead>
<TableRow>
<TableCell>Date</TableCell>
<TableCell>Customer</TableCell>
<TableCell align="right">Amount</TableCell>
<TableCell align="right">Total price ($)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{history.map(historyRow => (
<TableRow key={historyRow.date}>
<TableCell component="th" scope="row">
{historyRow.date}
</TableCell>
<TableCell>{historyRow.customerId}</TableCell>
<TableCell align="right">{historyRow.amount}</TableCell>
<TableCell align="right">
{Math.round(historyRow.amount * 5 * 100) / 100}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<div style={{ height: 200 }}>
<ScrollFollow
startFollowing={true}
render={({ follow, onScroll }) => (
<LazyLog
extraLines={1}
enableSearch
text={logs.join("\n")}
caseInsensitive
follow={follow}
onScroll={onScroll}
/>
)}
/>
</div>
<Button variant="contained" color="primary" onClick={randomLog}>
Add
</Button>
</Box>
);
};