|
|
@@ -0,0 +1,104 @@
|
|
|
+import Datatable from "@/components/Tables/Datatable";
|
|
|
+import { Button } from "reactstrap";
|
|
|
+import Link from "next/link";
|
|
|
+import moment from "moment";
|
|
|
+import React, { Component } from "react";
|
|
|
+import { getLog2 } from "@/actions/log";
|
|
|
+import { connect } from "react-redux";
|
|
|
+
|
|
|
+class TableRiwayatt extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ dataRiwayat: "",
|
|
|
+ };
|
|
|
+ }
|
|
|
+ componentDidMount = async () => {
|
|
|
+ const { token } = this.props;
|
|
|
+ const dataRiwayat = await getLog2(this.props.token);
|
|
|
+ this.setState({ dataRiwayat });
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ console.log(this.state.dataRiwayat.data?.map(e => e.id))
|
|
|
+ return (
|
|
|
+ <div className="card b ">
|
|
|
+ <div style={{ height: 500 }} className="card-body card-over">
|
|
|
+ {this.state.dataRiwayat && (
|
|
|
+ <Datatable options={{
|
|
|
+ responsive: false, ordering: false, keys: false, lengthChange: false, searching: false, aLengthMenu: [500], paging: false, scrollX: true, scrollY: "370px",
|
|
|
+ bordered: true
|
|
|
+ }}>
|
|
|
+ <table className="table w-100" data-order='[[3, "desc"]]'>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>Timelapse</th>
|
|
|
+ <th>Username</th>
|
|
|
+ <th>IPv4</th>
|
|
|
+ <th>Menu</th>
|
|
|
+ <th>Deskripsi</th>
|
|
|
+ {/* <th>Created</th> */}
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ {this.state.dataRiwayat && this.state.dataRiwayat.data?.map(value => (
|
|
|
+ <tr>
|
|
|
+ <td style={{ width: 175 }}>
|
|
|
+ <div className="media align-items-center">
|
|
|
+ <div className="media-body d-flex">
|
|
|
+ <div>
|
|
|
+ <p>{value.createdAt && (moment(value.createdAt).format("DD-MM-YYYY, hh:mm a"))}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td style={{ minWidth: 130 }}>
|
|
|
+ <div className="media align-items-center">
|
|
|
+ <div className="media-body d-flex">
|
|
|
+ <div>
|
|
|
+ <p>{value.user?.nama}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td style={{ minWidth: 120 }}>
|
|
|
+ <div className="media align-items-center">
|
|
|
+ <div className="media-body d-flex">
|
|
|
+ <div>
|
|
|
+ <p>{value.ipv4}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td style={{ minWidth: 150 }}>
|
|
|
+ <div className="media align-items-center">
|
|
|
+ <div className="media-body d-flex">
|
|
|
+ <div>
|
|
|
+ <p>{value.menu}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td style={{ minWidth: 350 }}>
|
|
|
+ <div className="media align-items-center">
|
|
|
+ <div className="media-body d-flex">
|
|
|
+ <div>
|
|
|
+ <p>{value.aktivitas}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ ))}
|
|
|
+
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </Datatable>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </div >
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+const mapStateToProps = (state) => ({ token: state.token });
|
|
|
+export default connect(mapStateToProps)(TableRiwayatt);
|