From f7d4af5d9ca46d300a58b6d013101f3171df6b69 Mon Sep 17 00:00:00 2001
From: myh <95896306+Anchor-x@users.noreply.github.com>
Date: Wed, 5 Jun 2024 16:13:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9F=A5=E6=89=BE=E8=AE=BE=E5=A4=87=E5=92=8C?=
 =?UTF-8?q?=E5=AE=9E=E4=BD=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/LookupDevice.js |  56 +++++++++++
 frontend/src/components/LookupEntity.js | 121 ++++++++++++++++++++++++
 2 files changed, 177 insertions(+)
 create mode 100644 frontend/src/components/LookupDevice.js
 create mode 100644 frontend/src/components/LookupEntity.js

diff --git a/frontend/src/components/LookupDevice.js b/frontend/src/components/LookupDevice.js
new file mode 100644
index 0000000..42da3e1
--- /dev/null
+++ b/frontend/src/components/LookupDevice.js
@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import ManageDevice from './ManageDevice';
+
+import { Input, Divider } from 'antd';
+
+const { Search } = Input;
+
+class LookupDevice extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      match: {
+        params: {
+          deviceId: 1
+        }
+      },
+      searched: false
+    }
+  }
+
+  lookupDevice(value) {
+    this.setState({
+      match: {
+        params: {
+          deviceId: value
+        }
+      },
+      searched: true
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        <p>
+          Search for any device.
+        </p>
+        <Search
+          placeholder="Device ID"
+          onSearch={value => this.lookupDevice(value)}
+          size="large"
+          enterButton
+        />
+        {this.state.searched &&
+          <div>
+            <Divider />
+            <ManageDevice match={this.state.match} />
+          </div>
+        }
+      </div>
+    )
+  }
+}
+
+export default LookupDevice;
\ No newline at end of file
diff --git a/frontend/src/components/LookupEntity.js b/frontend/src/components/LookupEntity.js
new file mode 100644
index 0000000..3859e04
--- /dev/null
+++ b/frontend/src/components/LookupEntity.js
@@ -0,0 +1,121 @@
+import DeviceManager, { getDefaultAccount } from '../DeviceManager';
+import ethUtil from 'ethereumjs-util';
+
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { Button, Tag, Card, Input, Divider, Timeline, message } from 'antd';
+
+const Search = Input.Search;
+
+const eventsToSave = ['EntityDataUpdated', 'DeviceCreated', 'DeviceTransfered', 'DeviceSigned'];
+
+class LookupEntity extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      loading: false,
+      searchValue: '',
+      address: this.props.match.params.address,
+      data: [],
+      searched: false
+    }
+
+    this.lookupEntity = this.lookupEntity.bind(this);
+  }
+
+  componentWillMount() {
+    const { address } = this.state;
+    if (address != null) {
+      this.reloadWithAddress(address);
+    }
+  }
+
+  reloadWithAddress(address) {
+    this.setState({
+      searchValue: address
+    })
+    this.lookupEntity(address).then(() => { });
+  }
+
+  async lookupEntity(address) {
+    if (!ethUtil.isValidAddress(address)) {
+      message.error('Invalid entity address.');
+      return;
+    }
+
+    this.setState({
+      loading: true
+    });
+
+    try {
+      let instance = await DeviceManager;
+
+      let allEvents = instance.allEvents({ fromBlock: 0, toBlock: 'latest' });
+      allEvents.get((error, logs) => {
+        let filteredData = logs.filter(el => eventsToSave.includes(el.event) && (el.args.owner === address || el.args.oldOwner === address || el.args.newOwner === address || el.args.signer === address));
+        if (!error) {
+          this.setState({
+            address: address,
+            data: filteredData,
+            loading: false,
+            searched: true
+          })
+        }
+      });
+    } catch (error) {
+      console.log(error);
+      message.error(error.message);
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <p>
+          Search for any entity.
+        </p>
+        <Search
+          placeholder="Input address"
+          onSearch={value => this.lookupEntity(value)}
+          size="large"
+          enterButton
+          value={this.state.searchValue}
+          onChange={(e) => this.setState({ searchValue: e.target.value })}
+        />
+        <br /><br />
+        <Button size="small" onClick={() => this.setState({ searchValue: getDefaultAccount() })}>Set to my address</Button>
+        {this.state.searched &&
+          <div>
+            <Divider />
+            <Card loading={this.state.loading} title={'Historical events for entity (oldest to newest)'}>
+              {this.state.data.length !== 0 ?
+                <div>
+                  <p style={{ marginBottom: '20px' }}>Events that are filtered are {eventsToSave.join(', ')} </p>
+                  <Timeline style={{ marginTop: '10px' }}>
+                    {this.state.data.map(el => {
+                      if (el.event === 'EntityDataUpdated')
+                        return <Timeline.Item>Entity data updated to <code>{el.args.newData}</code></Timeline.Item>
+                      if (el.event === 'DeviceCreated')
+                        return <Timeline.Item color='green'>Created device with &nbsp;<Link to={"/manage-device/" + el.args.deviceId.toNumber()}><Tag>ID {el.args.deviceId.toNumber()}</Tag></Link>, identifier <code>{el.args.identifier}</code>, metadata hash <code>{el.args.metadataHash}</code> and firmware hash <code>{el.args.firmwareHash}</code></Timeline.Item>
+                      if (el.event === 'DeviceTransfered')
+                        return <Timeline.Item color='orange'>Device with &nbsp;<Link to={"/manage-device/" + el.args.deviceId.toNumber()}><Tag>ID {el.args.deviceId.toNumber()}</Tag></Link>transfered {el.args.newOwner === this.state.address && <span>from &nbsp;<Tag onClick={() => this.reloadWithAddress(el.args.oldOwner)}>{el.args.oldOwner}</Tag></span>}{el.args.oldOwner === this.state.address && <span>to &nbsp;<Tag onClick={() => this.reloadWithAddress(el.args.newOwner)}>{el.args.newOwner}</Tag></span>}</Timeline.Item>
+                      if (el.event === 'DeviceSigned')
+                        return <Timeline.Item color='purple'>Signed device with &nbsp;<Link to={"/manage-device/" + el.args.deviceId.toNumber()}><Tag>ID {el.args.deviceId.toNumber()}</Tag></Link></Timeline.Item>
+                      else
+                        return null
+                    })}
+                  </Timeline>
+                </div>
+                :
+                <p><em>empty</em></p>
+              }
+            </Card>
+          </div>
+        }
+      </div>
+    )
+  }
+}
+
+export default LookupEntity;
\ No newline at end of file