282 lines
9.3 KiB
TypeScript
282 lines
9.3 KiB
TypeScript
// import { useAuth0 } from "@auth0/auth0-react";
|
||
import { Typography } from "@mui/material";
|
||
import Tour, { TourStep } from "common/Tour";
|
||
import { random } from "lodash";
|
||
import moment from "moment";
|
||
import { useGlobalState, useSnackbar, useUserAPI } from "providers";
|
||
import React, { useEffect, useState } from "react";
|
||
import { Step } from "react-joyride";
|
||
// import Emoji from "react-emoji-render";
|
||
|
||
interface Props {
|
||
setDetailTabState?: ( detail: "inventory" | "sensors" | "analytics" | "presets" | "alerts" | "transactions", buttonIndex: number) => void
|
||
}
|
||
|
||
export default function BinTour(props: Props) {
|
||
// const { userID } = useAuth0();
|
||
const {setDetailTabState} = props
|
||
const [{ user }, dispatch] = useGlobalState();
|
||
const userID = user.id()
|
||
const { error } = useSnackbar();
|
||
const [isTourRunning, setIsTourRunning] = useState(true);
|
||
const [joyKey, setJoyKey] = useState(random());
|
||
const userAPI = useUserAPI();
|
||
|
||
useEffect(() => {
|
||
if (user.status.finishedBinIntro.length < 1) {
|
||
setIsTourRunning(true);
|
||
setJoyKey(random(1000000));
|
||
}
|
||
}, [user]);
|
||
|
||
const endTour = () => {
|
||
setIsTourRunning(false);
|
||
if (user) {
|
||
user.status.finishedBinIntro = moment().toJSON();
|
||
userAPI
|
||
.updateUser(userID, user.protobuf())
|
||
.then(() => dispatch({ key: "user", value: user }))
|
||
.catch((err: any) => error(err));
|
||
}
|
||
};
|
||
|
||
const getTourSteps = (): TourStep[] => {
|
||
let steps: TourStep[] = [
|
||
{
|
||
title: (
|
||
<React.Fragment>
|
||
Welcome to Bin Management 🎉
|
||
{/* <Emoji text=" 🎉" /> */}
|
||
</React.Fragment>
|
||
),
|
||
content: (
|
||
<React.Fragment>
|
||
<Typography variant="subtitle2" gutterBottom>
|
||
{"Hello " + user.name() + " 👋"}
|
||
{/* <Emoji text=" 👋" /> */}
|
||
</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
Looks like this is your first time using our bin management system! Let me show you
|
||
around.
|
||
</Typography>
|
||
</React.Fragment>
|
||
),
|
||
target: "body",
|
||
placement: "center",
|
||
disableBeacon: true
|
||
},
|
||
{
|
||
title: "Sensors",
|
||
content: (
|
||
<React.Fragment>
|
||
<Typography variant="body2" paragraph>
|
||
In the bin sensors menu, you can attach components from your devices to the bin. This
|
||
allows you to view component data right from the bin it's attached to, as well as
|
||
other automation features.
|
||
</Typography>
|
||
</React.Fragment>
|
||
),
|
||
target: "#tour-bin-sensors",
|
||
placement: "bottom",
|
||
disableBeacon: false
|
||
},
|
||
{
|
||
title: "Settings",
|
||
content: (
|
||
<React.Fragment>
|
||
<Typography variant="body2" paragraph>
|
||
Bin settings lets you rename your bin, and change various bin specifications.
|
||
</Typography>
|
||
</React.Fragment>
|
||
),
|
||
target: "#tour-bin-settings",
|
||
placement: "bottom",
|
||
disableBeacon: false
|
||
},
|
||
{
|
||
title: "More Options",
|
||
content: (
|
||
<React.Fragment>
|
||
<Typography variant="body2" paragraph>
|
||
Access this menu if you want to leave the bin, share it, or view the bin's associated
|
||
users and teams.
|
||
</Typography>
|
||
</React.Fragment>
|
||
),
|
||
target: "#tour-bin-kebab",
|
||
placement: "bottom",
|
||
disableBeacon: false
|
||
},
|
||
{
|
||
title: "View Other Data",
|
||
content: (
|
||
<React.Fragment>
|
||
<Typography variant="body2" paragraph>
|
||
Use these tabs to view other Bin Details such as inventory levels over time,
|
||
alerts and interactions for connected components, and data for attached sensors
|
||
</Typography>
|
||
</React.Fragment>
|
||
),
|
||
target: "#tour-graph-tabs",
|
||
placement: "bottom",
|
||
disableBeacon: false
|
||
},
|
||
{
|
||
title: "Inventory",
|
||
content: (
|
||
<React.Fragment>
|
||
<Typography variant="body2" paragraph>
|
||
The inventory tab shows your bins inventory level over a specified window as well as the times the bin mode was changed.
|
||
</Typography>
|
||
</React.Fragment>
|
||
),
|
||
target: "#tour-details",
|
||
placement: "left-start",
|
||
disableBeacon: false,
|
||
onNext: () => {
|
||
if (setDetailTabState) setDetailTabState("sensors", 1)
|
||
}
|
||
},
|
||
{
|
||
title: "Sensors",
|
||
content: (
|
||
<React.Fragment>
|
||
<Typography variant="body2" paragraph>
|
||
The sensors tab shows readings from attached sensors over time
|
||
</Typography>
|
||
</React.Fragment>
|
||
),
|
||
target: "#tour-details",
|
||
placement: "left-start",
|
||
disableBeacon: false,
|
||
onNext: () => {
|
||
if (setDetailTabState) setDetailTabState("analytics", 2)
|
||
}
|
||
},
|
||
{
|
||
title: "Analytics",
|
||
content: (
|
||
<React.Fragment>
|
||
<Typography variant="body2" paragraph>
|
||
The analysis tab shows analytic bin data using attached sensors
|
||
</Typography>
|
||
</React.Fragment>
|
||
),
|
||
target: "#tour-details",
|
||
placement: "left-start",
|
||
disableBeacon: false,
|
||
onNext: () => {
|
||
if (setDetailTabState) setDetailTabState("alerts", 3)
|
||
}
|
||
},
|
||
{
|
||
title: "Alerts and Interactions",
|
||
content: (
|
||
<React.Fragment>
|
||
<Typography variant="body2" paragraph>
|
||
The Alerts tab allows you to view or add any new interactions or alerts for connected components
|
||
and displays recent notifications from those alerts
|
||
</Typography>
|
||
</React.Fragment>
|
||
),
|
||
target: "#tour-details",
|
||
placement: "left-start",
|
||
disableBeacon: false,
|
||
onNext: () => {
|
||
if (setDetailTabState) setDetailTabState("presets", 4)
|
||
}
|
||
},
|
||
{
|
||
title: "Bin Mode Presets",
|
||
content: (
|
||
<React.Fragment>
|
||
<Typography variant="body2" paragraph>
|
||
The Presets tab allows you to create custom presets for the interactions for a device when changing bin modes
|
||
</Typography>
|
||
</React.Fragment>
|
||
),
|
||
target: "#tour-details",
|
||
placement: "left-start",
|
||
disableBeacon: false,
|
||
onNext: () => {
|
||
if (setDetailTabState) setDetailTabState("transactions", 5)
|
||
}
|
||
},
|
||
{
|
||
title: "Bin Transactions",
|
||
content: (
|
||
<React.Fragment>
|
||
<Typography variant="body2" paragraph>
|
||
The transactions tab allows view any pending transaction when using a hybrid inventory control
|
||
</Typography>
|
||
</React.Fragment>
|
||
),
|
||
target: "#tour-details",
|
||
placement: "left-start",
|
||
disableBeacon: false,
|
||
onNext: () => {
|
||
if (setDetailTabState) setDetailTabState("inventory", 0)
|
||
}
|
||
},
|
||
{
|
||
title: "Bin Conditions",
|
||
content: (
|
||
<React.Fragment>
|
||
<Typography variant="body2" paragraph>
|
||
This section will display conditions based on the bin mode
|
||
</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
Storage Mode: simply displays the Storage conditions by itself with the target temperature and moisture set in the bin settings
|
||
</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
Other Modes: will display the interactions for the bins devices that are controlling a fan or heater on the bin as well as the storage conditions
|
||
</Typography>
|
||
</React.Fragment>
|
||
),
|
||
target: "#tour-conditions",
|
||
placement: "right",
|
||
disableBeacon: false
|
||
},
|
||
{
|
||
title: "Change Mode",
|
||
content: (
|
||
<React.Fragment>
|
||
<Typography variant="body2" paragraph>
|
||
Sensors need to be attached to change bin mode.
|
||
</Typography>
|
||
<ul>
|
||
<li>Storage mode: default</li>
|
||
<li>
|
||
Cooldown mode: use fans to hold bin temperature lower ❆❅
|
||
{/* <Emoji text=" ❆❅" /> */}
|
||
</li>
|
||
<li>
|
||
Drying mode: use heat to dry grain ☀️ (only visible when the target moisture is lower than the starting moisture in the bin settings)
|
||
{/* <Emoji text=" ☀️" /> */}
|
||
</li>
|
||
<li>
|
||
Hydrating mode: use humid air to hydrate grain (only visible when the target moisture is higher than the starting moisture in the bin settings)
|
||
</li>
|
||
</ul>
|
||
</React.Fragment>
|
||
),
|
||
target: "#tour-bin-mode",
|
||
placement: "bottom",
|
||
disableBeacon: false
|
||
}
|
||
];
|
||
return steps;
|
||
};
|
||
|
||
// if this intro has been done, return null
|
||
if (user.status.finishedBinIntro.length > 1) return null;
|
||
|
||
// if the user hasn't done the first intro, return null
|
||
if (user.status.finishedIntro.length < 1) return null;
|
||
|
||
return (
|
||
<div key={joyKey}>
|
||
<Tour run={isTourRunning} steps={getTourSteps()} endTourCallback={endTour} />
|
||
</div>
|
||
);
|
||
}
|