From 91fb44f0f8a605ec32e3d6d4a4d8be3a484ec619 Mon Sep 17 00:00:00 2001 From: Tuncay Kaplan Date: Sun, 20 Feb 2022 18:35:18 +0300 Subject: [PATCH 1/6] 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/6] 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/6] 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: { From 880815f0434f58bd9bc2cf4a048890a8e7159190 Mon Sep 17 00:00:00 2001 From: sdsr Date: Sun, 19 Jun 2022 15:16:21 -0500 Subject: [PATCH 4/6] Add sensor info section above PlotMap --- packages/react-app/src/App.less | 45 ++++++++++++------- packages/react-app/src/components/Header.tsx | 20 +++------ .../react-app/src/components/ParcelInfo.tsx | 8 ++-- .../react-app/src/components/PlotList.tsx | 2 +- .../src/components/SensorHeaderInfo.tsx | 7 +++ packages/react-app/src/components/index.ts | 2 +- .../src/containers/ParcelInfoContainer.tsx | 10 +++-- packages/react-app/src/views/BrowsePlots.tsx | 5 ++- 8 files changed, 59 insertions(+), 40 deletions(-) create mode 100644 packages/react-app/src/components/SensorHeaderInfo.tsx diff --git a/packages/react-app/src/App.less b/packages/react-app/src/App.less index eccaf83e..8313d081 100644 --- a/packages/react-app/src/App.less +++ b/packages/react-app/src/App.less @@ -257,6 +257,23 @@ select:focus { } } +/* Parcel Info */ +.parcel-info { + border-left: 1px solid @gray-4; + padding: 1rem; +} + +/* Header */ +.search-and-connect-wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; + + @media (max-width: 1024px) { + justify-content: initial; + } +} + /* BrowsePlots Layout */ .progress-bar-indicator { margin-left: 3rem; @@ -291,49 +308,47 @@ select:focus { height: 100%; display: grid; grid-template-columns: 400px 1fr; - grid-template-rows: 3rem 4rem 1fr; + grid-template-rows: 4rem 230px 1fr; grid-column-gap: 0px; grid-row-gap: 0px; @media (max-width: 1024px) { grid-template-columns: 1fr; - grid-template-rows: 3rem repeat(2, 4rem) 300px 4rem 5fr; + grid-template-rows: 0 repeat(2, 4rem) 300px 4rem 5fr; } // Responsive for mobile landscape screens @media (max-height: 500px) { - grid-template-rows: 3rem repeat(2, 4rem) 300px 4rem 600px; + grid-template-rows: 0 repeat(2, 4rem) 300px 4rem 600px; } } -.progress-bar { - grid-area: 1 / 1 / 2 / 3; -} .logo-link { - grid-area: 2 / 1 / 3 / 2; + grid-area: 1 / 1 / 2 / 2; } .connect-wallet-section { - grid-area: 2 / 2 / 3 / 3; + grid-area: 1 / 2 / 2 / 3; border-color: @gray-4; - justify-content: flex-end; + justify-content: space-between; +} +.parcel-info { + grid-area: 2 / 2 / 3 / 3; } .plot-detail { - grid-area: 3 / 1 / 4 / 2; + grid-area: 2 / 1 / 4 / 2; } .plot-tabs { - grid-area: 3 / 1 / 4 / 2; + grid-area: 2 / 1 / 4 / 2; width: 100%; } .plot-map { grid-area: 3 / 2 / 4 / 3; + border-left: 1px solid @gray-4; } @media (max-width: 1024px) { - .progress-bar { - grid-area: 1 / 1 / 2 / 2; - } .logo-link { - grid-area: 2 / 1 / 3 / 2; + grid-area: 1 / 1 / 2 / 2; } .connect-wallet-section { grid-area: 3 / 1 / 4 / 2; diff --git a/packages/react-app/src/components/Header.tsx b/packages/react-app/src/components/Header.tsx index 4d72f481..fc0bf4f3 100644 --- a/packages/react-app/src/components/Header.tsx +++ b/packages/react-app/src/components/Header.tsx @@ -1,24 +1,16 @@ import React from "react"; -import { ConnectWalletButton, SearchPlots } from "."; -import { ParcelInfoContainer } from "../containers"; +import { ConnectWalletButton, SearchPlots, SensorHeaderInfo } from "."; interface Props { connectWallet: () => void; } 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 28873997..8dbcac81 100644 --- a/packages/react-app/src/components/ParcelInfo.tsx +++ b/packages/react-app/src/components/ParcelInfo.tsx @@ -28,7 +28,7 @@ interface DataBoxProps { } function DataBox({ value, label, unit }: DataBoxProps): JSX.Element { return ( -
+
{value}
@@ -36,7 +36,7 @@ function DataBox({ value, label, unit }: DataBoxProps): JSX.Element {
{unit}
- View History + View History
); } @@ -50,7 +50,7 @@ export default function ParcelInfo({ sensorData }: Props): JSX.Element { const fetchedTime = tsToDate(timestamp); return ( -
+
Globe
@@ -59,7 +59,7 @@ export default function ParcelInfo({ sensorData }: Props): JSX.Element { BENNET CREEK ROAD, POWELL WYOMING 82435
-
It’s currently {localisedTime}
[-7 GMT] -------------- Last transmissoin +
It’s currently {localisedTime}
[-7 GMT] -------------- Last transmissoin ~{timesAgo(fetchedTime)} ago{" "} view on MachineFi diff --git a/packages/react-app/src/components/PlotList.tsx b/packages/react-app/src/components/PlotList.tsx index 4e04729c..1ebb960c 100644 --- a/packages/react-app/src/components/PlotList.tsx +++ b/packages/react-app/src/components/PlotList.tsx @@ -27,7 +27,7 @@ export default function PlotList({ plots, emptyMessage }: Props) { }; return ( -
+
{displayedPlots.map((plot: Plot, idx: number) => ( {/* modulo delay by 10 because plot buttons are added in batches of 10 */} diff --git a/packages/react-app/src/components/SensorHeaderInfo.tsx b/packages/react-app/src/components/SensorHeaderInfo.tsx new file mode 100644 index 00000000..1a411df7 --- /dev/null +++ b/packages/react-app/src/components/SensorHeaderInfo.tsx @@ -0,0 +1,7 @@ +import * as React from "react"; + +const SensorHeaderInfo = () => { + return
Parcel 0
; +}; + +export default SensorHeaderInfo; diff --git a/packages/react-app/src/components/index.ts b/packages/react-app/src/components/index.ts index 26f98646..e6432368 100644 --- a/packages/react-app/src/components/index.ts +++ b/packages/react-app/src/components/index.ts @@ -4,7 +4,6 @@ export { default as PlotMap } from "./PlotMap"; export { default as PlotButton } from "./PlotButton"; export { default as PlotDetail } from "./PlotDetail"; export { default as PlotList } from "./PlotList"; -export { default as ProgressBar } from "./ProgressBar"; export { default as BuyPlot } from "./BuyPlot"; export { default as ViewPlot } from "./ViewPlot"; export { default as PlotTabs } from "./PlotTabs"; @@ -13,3 +12,4 @@ export { default as Header } from "./Header"; export { default as ConnectWalletButton } from "./ConnectWalletButton"; export { default as SearchPlots } from "./SearchPlots"; export { default as ParcelInfo } from "./ParcelInfo"; +export { default as SensorHeaderInfo } from "./SensorHeaderInfo"; diff --git a/packages/react-app/src/containers/ParcelInfoContainer.tsx b/packages/react-app/src/containers/ParcelInfoContainer.tsx index c8d0d29c..0facf2ec 100644 --- a/packages/react-app/src/containers/ParcelInfoContainer.tsx +++ b/packages/react-app/src/containers/ParcelInfoContainer.tsx @@ -33,11 +33,15 @@ function ParcelInfoContainer(): JSX.Element { variables: { deviceId: PEBBLE_DEVICE_ID }, client: pebbleClient, }); - if (loading) return

Sensor Data Loading ...

; + if (loading) return

Sensor Data Loading ...

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

Sensor Data Load Failed.

; + if (error) return

Sensor Data Load Failed.

; console.log(data?.pebble_device_record[0]); - return ; + return ( +
+ +
+ ); } export default ParcelInfoContainer; diff --git a/packages/react-app/src/views/BrowsePlots.tsx b/packages/react-app/src/views/BrowsePlots.tsx index eb0c11f1..e59d9e39 100644 --- a/packages/react-app/src/views/BrowsePlots.tsx +++ b/packages/react-app/src/views/BrowsePlots.tsx @@ -4,7 +4,7 @@ import { Link } from "react-router-dom"; import { toast } from "react-toastify"; import { useContractLoader, useAppSelector, useAppDispatch, useUserSigner } from "../hooks"; -import { PlotMap, ProgressBar, PlotDetail, LogoDisplay, Header } from "../components"; +import { PlotMap, PlotDetail, LogoDisplay, Header } from "../components"; import { setPlots } from "../actions"; import { PlotTabs } from "../components"; import { Plot } from "../models/Plot"; @@ -13,6 +13,7 @@ import { fetchedPlots, setCommunalLand, setParcelGeojson } from "../actions/plot import { fetchMetadata } from "../data"; import updatePlots from "../helpers/UpdatePlots"; import { setWhitelistedAmount } from "../actions/userSlice"; +import { ParcelInfoContainer } from "../containers"; interface Props { networkProvider: any; @@ -127,7 +128,6 @@ export default function BrowsePlots({ networkProvider, web3Modal }: Props) { return (
- @@ -137,6 +137,7 @@ export default function BrowsePlots({ networkProvider, web3Modal }: Props) { )}
+ {/* key prop is to cause rerendering whenever it changes */} Date: Sun, 19 Jun 2022 15:23:13 -0500 Subject: [PATCH 5/6] Remove ProgressBar and make adjustments for small screens --- packages/react-app/src/App.less | 3 +++ .../react-app/src/components/ProgressBar.tsx | 21 ------------------- .../src/components/SensorHeaderInfo.tsx | 2 +- 3 files changed, 4 insertions(+), 22 deletions(-) delete mode 100644 packages/react-app/src/components/ProgressBar.tsx diff --git a/packages/react-app/src/App.less b/packages/react-app/src/App.less index 8313d081..efa77ec9 100644 --- a/packages/react-app/src/App.less +++ b/packages/react-app/src/App.less @@ -365,4 +365,7 @@ select:focus { .plot-detail { grid-area: 6 / 1 / 7 / 2; } + .sensor-header-info { + display: none; + } } diff --git a/packages/react-app/src/components/ProgressBar.tsx b/packages/react-app/src/components/ProgressBar.tsx deleted file mode 100644 index c6179809..00000000 --- a/packages/react-app/src/components/ProgressBar.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from "react"; -import { useAppSelector } from "../hooks"; - -export default function ProgressBar() { - const plots = useAppSelector(state => state.plots.plots); - const percent_sold = Math.ceil((plots.filter(plot => plot.sold).length / plots.length) * 100); - return ( -
- {plots.length > 0 && (percent_sold < 100 ? "Parcel 0 sale is live!" : "Parcel 0 sale is sold out!")} - {plots.length === 0 && "Fetching plots..."} - {percent_sold < 100 ? ( -
-
-
-
- {percent_sold > 0 ? `${percent_sold}% already sold!` : "Be the first owner!"} -
- ) : null} -
- ); -} diff --git a/packages/react-app/src/components/SensorHeaderInfo.tsx b/packages/react-app/src/components/SensorHeaderInfo.tsx index 1a411df7..d5b6a2ce 100644 --- a/packages/react-app/src/components/SensorHeaderInfo.tsx +++ b/packages/react-app/src/components/SensorHeaderInfo.tsx @@ -1,7 +1,7 @@ import * as React from "react"; const SensorHeaderInfo = () => { - return
Parcel 0
; + return
Parcel 0
; }; export default SensorHeaderInfo; From 1145a05ed082cef66816c4bd5664324fc7905db5 Mon Sep 17 00:00:00 2001 From: sdsr Date: Sun, 19 Jun 2022 15:23:36 -0500 Subject: [PATCH 6/6] Minor adjustment to sensors section for small screens --- packages/react-app/src/App.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-app/src/App.less b/packages/react-app/src/App.less index efa77ec9..133612ca 100644 --- a/packages/react-app/src/App.less +++ b/packages/react-app/src/App.less @@ -362,6 +362,9 @@ select:focus { grid-area: 5 / 1 / 7 / 2; max-width: 100vw; } + .parcel-info { + display: none; + } .plot-detail { grid-area: 6 / 1 / 7 / 2; }