import { Box } from "@mui/material";
import { makeStyles } from "@mui/styles";
import { useMobile } from "hooks";
import moment from "moment";
import { pond } from "protobuf-ts/pond";
import { useGlobalState } from "providers";
import React from "react";
const useStyles = makeStyles(() => ({
st0: {
fill: "#434343"
},
st1: {
stroke: "#F6EB14",
strokeWidth: 4,
strokeMiterlimit: 10
},
st2: {
fill: "#272727"
},
st3: {
stroke: "#272727",
strokeWidth: 6,
strokeMiterlimit: 10
},
st4: {
fill: "#FFFFFF"
},
vals: {
fontSize: 8,
strokeWidth: 0.7,
filter: "drop-shadow(20px 20px 20px rgb(0 0 0))"
},
fanState: {
fontSize: 5
},
fontBase: {
fontWeight: 650,
fill: "white"
}
}));
interface Props {
finalTemp: number;
ambientTemp: number;
innerTemps: { t1: number; t2: number };
innerPressures: { p1: number; p2: number };
ambientSelector: () => JSX.Element;
tempChainSelector: () => JSX.Element;
pressureChainSelector: () => JSX.Element;
pcaState: pond.PCAState;
// pcaFanState: boolean;
checkInTime: string;
}
export default function GateSVG(props: Props) {
const {
finalTemp,
ambientTemp,
innerTemps,
innerPressures,
ambientSelector,
tempChainSelector,
pressureChainSelector,
pcaState,
// pcaFanState,
checkInTime
} = props;
const classes = useStyles();
const isMobile = useMobile();
const [{ user }] = useGlobalState();
//old plane that was back facing
// const ghostPlane = () => {
// return (
//
// );
// };
//add svg's of other types of planes
const frontFacingPlaneWindowed = () => {
return (
);
};
const display = () => {
return (
{/* {ghostPlane()} */}
{frontFacingPlaneWindowed()}
);
};
const convertFinalTemp = (temp: number) => {
if (user.settings.temperatureUnit === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT) {
return temp * 1.8 + 32;
}
return temp;
};
const finalTempDisplay = (temp: number) => {
let display = "--"
if(pcaState === pond.PCAState.PCA_STATE_IN_BOUNDS || pcaState === pond.PCAState.PCA_STATE_OUT_BOUNDS){
if(temp < 60 && temp > -40 && !isNaN(temp) && temp !== 0){
display = convertFinalTemp(finalTemp).toFixed(2) + (user.settings.temperatureUnit === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? "°F" : "°C")
}
}
return display
}
const renderValues = () => {
let values: JSX.Element[] = [];
//add the final temp display to the array
values.push(
{finalTempDisplay(finalTemp)}
);
//add the ambient temp display to the array
values.push(
Ambient: {ambientTemp}
{user.settings.temperatureUnit === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT
? "°F"
: "°C"}
);
//add the inner temps display (t1,t2) to the array
values.push(
T1: {innerTemps.t1}
{user.settings.temperatureUnit === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT
? "°F"
: "°C"}
, T2: {innerTemps.t2}
{user.settings.temperatureUnit === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT
? "°F"
: "°C"}
);
//add the inner temps display (t1,t2) to the array
values.push(
P1: {innerPressures.p1}{" "}
{user.settings.pressureUnit === pond.PressureUnit.PRESSURE_UNIT_INCHES_OF_WATER
? "iwg"
: "kPa"}
, P2: {innerPressures.p2}{" "}
{user.settings.pressureUnit === pond.PressureUnit.PRESSURE_UNIT_INCHES_OF_WATER
? "iwg"
: "kPa"}
);
return values;
};
const pcaRed = () => {
return (
{/* */}
);
};
const pcaGreen = () => {
return (
);
};
const pcaFan = () => {
return (
{/* PCA Fan: {pcaFanState ? "ON" : "OFF"} */}
PCA Fan: {pcaState === pond.PCAState.PCA_STATE_OFF ? "OFF" : "ON"}
);
};
const deviceCheckIn = () => {
return (
Last Checked In: {moment(checkInTime).fromNow()}
);
};
return (
);
}