From 91fb44f0f8a605ec32e3d6d4a4d8be3a484ec619 Mon Sep 17 00:00:00 2001 From: Tuncay Kaplan Date: Sun, 20 Feb 2022 18:35:18 +0300 Subject: [PATCH 1/3] add sensor data --- .../src/assets/images/icon-chart.png | Bin 0 -> 139 bytes packages/react-app/src/components/Header.tsx | 13 ++-- .../react-app/src/components/ParcelInfo.tsx | 67 ++++++++++++++++++ packages/react-app/src/components/index.ts | 1 + .../src/containers/ParcelInfoContainer.tsx | 43 +++++++++++ packages/react-app/src/containers/index.ts | 1 + packages/react-app/src/utils.ts | 38 ++++++++++ packages/react-app/tailwind.config.js | 14 +++- yarn.lock | 22 ++++++ 9 files changed, 193 insertions(+), 6 deletions(-) create mode 100644 packages/react-app/src/assets/images/icon-chart.png create mode 100644 packages/react-app/src/components/ParcelInfo.tsx create mode 100644 packages/react-app/src/containers/ParcelInfoContainer.tsx create mode 100644 packages/react-app/src/containers/index.ts create mode 100644 packages/react-app/src/utils.ts diff --git a/packages/react-app/src/assets/images/icon-chart.png b/packages/react-app/src/assets/images/icon-chart.png new file mode 100644 index 0000000000000000000000000000000000000000..2ff98f138b6295ed23b13c59f2dddb2cbaca41fc GIT binary patch literal 139 zcmeAS@N?(olHy`uVBq!ia0vp^aX>7=$P6SsWpBg)DaPU;cPGZ1Cw1z99L@rd$YKTt zZeb8+WSBKa0w~B9;1lA?E-t{*5#<^-ogXM7=jq}YQZXkv;Q;%;KL-!~WM(oDjG1H4 g(J=dSdPWh$#hUx2ixv8WfGQb0UHx3vIVCg!0K void; } -export default function Header({ connectWallet }: Props) { +export default function Header({ connectWallet }: Props): JSX.Element { return ( -
- - +
+ +
+ + +
); } diff --git a/packages/react-app/src/components/ParcelInfo.tsx b/packages/react-app/src/components/ParcelInfo.tsx new file mode 100644 index 00000000..23f2d573 --- /dev/null +++ b/packages/react-app/src/components/ParcelInfo.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import { timesAgo, tsToDate } from "../utils"; +import IconChart from "../assets/images/icon-chart.png"; +interface SensorData { + snr: number; + vbat: number; + latitude: number; + longitude: number; + gas_resistance: number; + temperature: number; + pressure: number; + humidity: number; + light: number; + temperature2: number; + gyroscope: [number, number, number]; + accelerometer: [number, number, number]; + timestamp: string; + random: string; +} +interface Props { + sensorData: SensorData; +} +interface DataBoxProps { + value: string; + label: string; + unit?: string; +} +function DataBox({ value, label, unit }: DataBoxProps): JSX.Element { + return ( +
+
+ {value} +
+ {label} +
{unit}
+
+
+ View History +
+ ); +} +export default function ParcelInfo({ sensorData }: Props): JSX.Element { + const { temperature, pressure, humidity, gas_resistance, timestamp } = sensorData; + const localisedTime = new Date().toLocaleTimeString("en-US", { + timeZone: "America/Denver", + hour: "2-digit", + minute: "2-digit", + }); + const fetchedTime = tsToDate(timestamp); + + return ( +
+
PARCEL 0
+ It’s currently {localisedTime} [-7 GMT] -------------- Last transmissoin ~ + {timesAgo(fetchedTime)} ago{" "} + + view on MachineFi + +
+ + + + +
+
+ ); +} diff --git a/packages/react-app/src/components/index.ts b/packages/react-app/src/components/index.ts index 96edb57c..26f98646 100644 --- a/packages/react-app/src/components/index.ts +++ b/packages/react-app/src/components/index.ts @@ -12,3 +12,4 @@ export { default as LogoDisplay } from "./LogoDisplay"; export { default as Header } from "./Header"; export { default as ConnectWalletButton } from "./ConnectWalletButton"; export { default as SearchPlots } from "./SearchPlots"; +export { default as ParcelInfo } from "./ParcelInfo"; diff --git a/packages/react-app/src/containers/ParcelInfoContainer.tsx b/packages/react-app/src/containers/ParcelInfoContainer.tsx new file mode 100644 index 00000000..c8d0d29c --- /dev/null +++ b/packages/react-app/src/containers/ParcelInfoContainer.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { gql, useQuery, InMemoryCache, ApolloClient } from "@apollo/client"; +import { ParcelInfo } from "../components"; + +const PEBBLE_DEVICE_ID = "351358813276802"; +const pebbleUri = "https://pebble.iotex.me/v1/graphql"; + +const pebbleClient = new ApolloClient({ + uri: pebbleUri, + cache: new InMemoryCache(), +}); + +const GET_SENSOR_DATA = gql` + query getDevices($deviceId: String!) { + pebble_device_record( + limit: 1 + order_by: { timestamp: desc } + where: { imei: { _eq: $deviceId }, latitude: { _neq: "200.0000000" } } + ) { + temperature + humidity + gas_resistance + pressure + latitude + longitude + timestamp + } + } +`; + +function ParcelInfoContainer(): JSX.Element { + const { loading, error, data } = useQuery(GET_SENSOR_DATA, { + variables: { deviceId: PEBBLE_DEVICE_ID }, + client: pebbleClient, + }); + if (loading) return

Sensor Data Loading ...

; + if (error) console.log(error); + if (error) return

Sensor Data Load Failed.

; + console.log(data?.pebble_device_record[0]); + return ; +} + +export default ParcelInfoContainer; diff --git a/packages/react-app/src/containers/index.ts b/packages/react-app/src/containers/index.ts new file mode 100644 index 00000000..6cd0c774 --- /dev/null +++ b/packages/react-app/src/containers/index.ts @@ -0,0 +1 @@ +export { default as ParcelInfoContainer } from "./ParcelInfoContainer" \ No newline at end of file diff --git a/packages/react-app/src/utils.ts b/packages/react-app/src/utils.ts new file mode 100644 index 00000000..27ae6c0c --- /dev/null +++ b/packages/react-app/src/utils.ts @@ -0,0 +1,38 @@ +export function tsToDate(ts: string): Date { + return new Date(Number(ts) * 1000); +} + +export function timesAgo(date: Date): string { // source: https://stackoverflow.com/a/55999110/458679 + const seconds = Math.floor((+new Date() - +date) / 1000); // get the diffrence of date object sent with current date time of the system time + let interval = Math.floor(seconds / 31536000); // divide seconds by seconds in avg for a year to get years + + //conditioning based on years derived above + if (interval > 1) { + return interval + " years"; + } + interval = Math.floor(seconds / 2592000); // months check similar to years + if (interval > 1) { + return interval + " months"; + } + interval = Math.floor(seconds / 86400); // days check similar to above + if (interval > 1) { + return interval + " days"; + } + interval = Math.floor(seconds / 3600); // hours check + if (interval > 1) { + return interval + " hours"; + } + interval = Math.floor(seconds / 60); // minutes check + if (interval > 1) { + return interval + " min"; + } + return Math.floor(seconds) + " seconds"; // seconds check at the end +} + +// withYears 22 years +// withMonths 9 months +// withDays 5 days +// withPreviousDay 24 hours +// withHours 2 hours +// withMinutes 5 min + diff --git a/packages/react-app/tailwind.config.js b/packages/react-app/tailwind.config.js index 6b5ea366..7dc407b2 100644 --- a/packages/react-app/tailwind.config.js +++ b/packages/react-app/tailwind.config.js @@ -7,8 +7,20 @@ module.exports = { base: "14px", lg: "16px", xl: "20px", + xxl: "28px", + }, + extend: { + colors: { + "green-1": "#00FFA8", + "green-2": "#038B5C", + }, + lineHeight: { + 2: "10px", + }, + padding: { + "50px": "50px", + }, }, - extend: {}, }, variants: { extend: {}, diff --git a/yarn.lock b/yarn.lock index 54ac3434..63c00217 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2984,6 +2984,11 @@ "@types/minimatch" "*" "@types/node" "*" +"@types/history@^4.7.11": + version "4.7.11" + resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64" + integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA== + "@types/hoist-non-react-statics@^3.3.0": version "3.3.1" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" @@ -3159,6 +3164,23 @@ hoist-non-react-statics "^3.3.0" redux "^4.0.0" +"@types/react-router-dom@^5.3.2": + version "5.3.3" + resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83" + integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw== + dependencies: + "@types/history" "^4.7.11" + "@types/react" "*" + "@types/react-router" "*" + +"@types/react-router@*": + version "5.1.18" + resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.18.tgz#c8851884b60bc23733500d86c1266e1cfbbd9ef3" + integrity sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g== + dependencies: + "@types/history" "^4.7.11" + "@types/react" "*" + "@types/react@*": version "17.0.19" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.19.tgz#8f2a85e8180a43b57966b237d26a29481dacc991" From 8f2415a59952b0c2238cd2dad9f21abda8bddbcc Mon Sep 17 00:00:00 2001 From: Tuncay Kaplan Date: Sun, 20 Feb 2022 22:40:42 +0300 Subject: [PATCH 2/3] hide sale progress bar --- packages/react-app/src/views/BrowsePlots.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-app/src/views/BrowsePlots.tsx b/packages/react-app/src/views/BrowsePlots.tsx index 9a48f37e..691a9bce 100644 --- a/packages/react-app/src/views/BrowsePlots.tsx +++ b/packages/react-app/src/views/BrowsePlots.tsx @@ -123,7 +123,7 @@ export default function BrowsePlots({ networkProvider, web3Modal }: Props) { return ( <> - + {/* */}
From a27be0af111ebebf4896e3d1a66ee74dc242b23b Mon Sep 17 00:00:00 2001 From: Tuncay Kaplan Date: Sun, 20 Feb 2022 22:41:39 +0300 Subject: [PATCH 3/3] add lat long and address + arrange elements --- .../src/assets/images/icon-globe.svg | 3 +++ packages/react-app/src/components/Header.tsx | 13 +++++++----- .../react-app/src/components/ParcelInfo.tsx | 20 +++++++++++++------ packages/react-app/tailwind.config.js | 4 ++++ 4 files changed, 29 insertions(+), 11 deletions(-) create mode 100644 packages/react-app/src/assets/images/icon-globe.svg diff --git a/packages/react-app/src/assets/images/icon-globe.svg b/packages/react-app/src/assets/images/icon-globe.svg new file mode 100644 index 00000000..038b46f9 --- /dev/null +++ b/packages/react-app/src/assets/images/icon-globe.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/react-app/src/components/Header.tsx b/packages/react-app/src/components/Header.tsx index a58eb461..986b6db8 100644 --- a/packages/react-app/src/components/Header.tsx +++ b/packages/react-app/src/components/Header.tsx @@ -6,12 +6,15 @@ interface Props { } export default function Header({ connectWallet }: Props): JSX.Element { return ( -
- -
- - +
+
+
PARCEL 0
+
+ + +
+
); } diff --git a/packages/react-app/src/components/ParcelInfo.tsx b/packages/react-app/src/components/ParcelInfo.tsx index 23f2d573..28873997 100644 --- a/packages/react-app/src/components/ParcelInfo.tsx +++ b/packages/react-app/src/components/ParcelInfo.tsx @@ -1,6 +1,7 @@ import React from "react"; import { timesAgo, tsToDate } from "../utils"; import IconChart from "../assets/images/icon-chart.png"; +import IconGlobe from "../assets/images/icon-globe.svg"; interface SensorData { snr: number; vbat: number; @@ -40,7 +41,7 @@ function DataBox({ value, label, unit }: DataBoxProps): JSX.Element { ); } export default function ParcelInfo({ sensorData }: Props): JSX.Element { - const { temperature, pressure, humidity, gas_resistance, timestamp } = sensorData; + const { temperature, pressure, humidity, gas_resistance, timestamp, latitude, longitude } = sensorData; const localisedTime = new Date().toLocaleTimeString("en-US", { timeZone: "America/Denver", hour: "2-digit", @@ -49,14 +50,21 @@ export default function ParcelInfo({ sensorData }: Props): JSX.Element { const fetchedTime = tsToDate(timestamp); return ( -
-
PARCEL 0
- It’s currently {localisedTime} [-7 GMT] -------------- Last transmissoin ~ - {timesAgo(fetchedTime)} ago{" "} +
+
+ Globe +
+ {latitude}, {longitude} +
+ BENNET CREEK ROAD, POWELL WYOMING 82435 +
+
+
It’s currently {localisedTime}
[-7 GMT] -------------- Last transmissoin + ~{timesAgo(fetchedTime)} ago{" "} view on MachineFi -
+
diff --git a/packages/react-app/tailwind.config.js b/packages/react-app/tailwind.config.js index 7dc407b2..b9845564 100644 --- a/packages/react-app/tailwind.config.js +++ b/packages/react-app/tailwind.config.js @@ -11,6 +11,7 @@ module.exports = { }, extend: { colors: { + "green-0": "rgba(153, 248, 181, 0.5)", "green-1": "#00FFA8", "green-2": "#038B5C", }, @@ -20,6 +21,9 @@ module.exports = { padding: { "50px": "50px", }, + maxWidth: { + "750px": "750px", + }, }, }, variants: {