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

82
package-lock.json generated
View File

@ -1843,6 +1843,14 @@
"react-is": "^16.8.0 || ^17.0.0" "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": { "@nodelib/fs.scandir": {
"version": "2.1.3", "version": "2.1.3",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz", "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": { "@types/yargs": {
"version": "15.0.11", "version": "15.0.11",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.11.tgz", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.11.tgz",
@ -6541,6 +6554,11 @@
"bser": "2.1.1" "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": { "figgy-pudding": {
"version": "3.5.2", "version": "3.5.2",
"resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz", "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", "resolved": "https://registry.npmjs.org/immer/-/immer-7.0.9.tgz",
"integrity": "sha512-Vs/gxoM4DqNAYR7pugIxi0Xc8XAun/uy7AQu4fLLqaTBHxjOP9pJ266Q9MWA/ly4z6rAFZbvViOtihxUZ7O28A==" "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": { "import-cwd": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@ -10362,6 +10385,11 @@
"through2": "^2.0.0" "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": { "mixin-deep": {
"version": "1.3.2", "version": "1.3.2",
"resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz", "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", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" "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": { "react-refresh": {
"version": "0.8.3", "version": "0.8.3",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@ -12803,6 +12859,14 @@
"workbox-webpack-plugin": "5.1.4" "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": { "react-toastify": {
"version": "6.2.0", "version": "6.2.0",
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-6.2.0.tgz", "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-6.2.0.tgz",
@ -12824,6 +12888,19 @@
"prop-types": "^15.6.2" "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": { "read-pkg": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@ -14830,6 +14907,11 @@
"minimatch": "^3.0.4" "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": { "text-table": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",

View File

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

View File

@ -1,48 +1,46 @@
import React from "react"; import React, { useState } from "react";
import { import { Typography } from "@material-ui/core";
Table, import { Box, Button } from "@material-ui/core";
TableBody, import { LazyLog, ScrollFollow } from "react-lazylog";
TableCell,
TableHead,
TableRow,
Typography
} from "@material-ui/core";
import Box from "@material-ui/core/Box";
const MachineLog = () => { const MachineLog = () => {
const history = [ const [logs, setLogs] = useState(["Welcome..."]);
{ date: "2020-01-05", customerId: "11091700", amount: 3 }, const addLog = text => {
{ date: "2020-01-02", customerId: "Anonymous", amount: 1 } 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 ( return (
<Box margin={1}> <Box margin={1}>
<Typography variant="h6" gutterBottom component="div"> <Typography variant="h6" gutterBottom component="div">
History Logs
</Typography> </Typography>
<Table size="small" aria-label="purchases"> <div style={{ height: 200 }}>
<TableHead> <ScrollFollow
<TableRow> startFollowing={true}
<TableCell>Date</TableCell> render={({ follow, onScroll }) => (
<TableCell>Customer</TableCell> <LazyLog
<TableCell align="right">Amount</TableCell> extraLines={1}
<TableCell align="right">Total price ($)</TableCell> enableSearch
</TableRow> text={logs.join("\n")}
</TableHead> caseInsensitive
<TableBody> follow={follow}
{history.map(historyRow => ( onScroll={onScroll}
<TableRow key={historyRow.date}> />
<TableCell component="th" scope="row"> )}
{historyRow.date} />
</TableCell> </div>
<TableCell>{historyRow.customerId}</TableCell> <Button variant="contained" color="primary" onClick={randomLog}>
<TableCell align="right">{historyRow.amount}</TableCell> Add
<TableCell align="right"> </Button>
{Math.round(historyRow.amount * 5 * 100) / 100}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box> </Box>
); );
}; };