add label to tool sensor indicator
parent
dc9bbe6f66
commit
b48029528f
|
@ -12,27 +12,45 @@ describe("<SensorList/>", function () {
|
|||
const fakeProps = (): SensorListProps => {
|
||||
const pins: Pins = {
|
||||
50: {
|
||||
mode: 0,
|
||||
value: 1
|
||||
mode: 1,
|
||||
value: 500,
|
||||
},
|
||||
51: {
|
||||
mode: 1,
|
||||
value: 500
|
||||
}
|
||||
mode: 0,
|
||||
value: 1,
|
||||
},
|
||||
52: {
|
||||
mode: 0,
|
||||
value: 1,
|
||||
},
|
||||
53: {
|
||||
mode: 0,
|
||||
value: 0,
|
||||
},
|
||||
};
|
||||
const fakeSensor1 = fakeSensor();
|
||||
const fakeSensor2 = fakeSensor();
|
||||
const fakeSensor3 = fakeSensor();
|
||||
const fakeSensor4 = fakeSensor();
|
||||
fakeSensor1.body.id = 1;
|
||||
fakeSensor1.body.pin = 51;
|
||||
fakeSensor1.body.mode = 1;
|
||||
fakeSensor1.body.mode = 0;
|
||||
fakeSensor1.body.label = "GPIO 51";
|
||||
fakeSensor2.body.id = 2;
|
||||
fakeSensor2.body.pin = 50;
|
||||
fakeSensor2.body.mode = 0;
|
||||
fakeSensor2.body.mode = 1;
|
||||
fakeSensor2.body.label = "GPIO 50 - Moisture";
|
||||
fakeSensor3.body.id = 3;
|
||||
fakeSensor3.body.pin = 52;
|
||||
fakeSensor3.body.mode = 0;
|
||||
fakeSensor3.body.label = "GPIO 52 - Tool Verification";
|
||||
fakeSensor4.body.id = 4;
|
||||
fakeSensor4.body.pin = 53;
|
||||
fakeSensor4.body.mode = 0;
|
||||
fakeSensor4.body.label = "GPIO 53 - Tool Verification";
|
||||
return {
|
||||
dispatch: jest.fn(),
|
||||
sensors: [fakeSensor2, fakeSensor1],
|
||||
sensors: [fakeSensor2, fakeSensor1, fakeSensor3, fakeSensor4],
|
||||
pins,
|
||||
disabled: false
|
||||
};
|
||||
|
@ -42,12 +60,18 @@ describe("<SensorList/>", function () {
|
|||
const wrapper = mount(<SensorList {...fakeProps()} />);
|
||||
const labels = wrapper.find("label");
|
||||
const pinNumbers = wrapper.find("p");
|
||||
expect(labels.first().text()).toEqual("GPIO 51");
|
||||
expect(pinNumbers.first().text()).toEqual("51");
|
||||
expect(wrapper.find(".indicator").first().text()).toEqual("500");
|
||||
expect(labels.last().text()).toEqual("GPIO 50 - Moisture");
|
||||
expect(pinNumbers.last().text()).toEqual("50");
|
||||
expect(wrapper.find(".indicator").last().text()).toEqual("1");
|
||||
expect(labels.at(0).text()).toEqual("GPIO 51");
|
||||
expect(pinNumbers.at(0).text()).toEqual("51");
|
||||
expect(wrapper.find(".indicator").at(0).text()).toEqual("1");
|
||||
expect(labels.at(1).text()).toEqual("GPIO 50 - Moisture");
|
||||
expect(pinNumbers.at(1).text()).toEqual("50");
|
||||
expect(wrapper.find(".indicator").at(1).text()).toEqual("500");
|
||||
expect(labels.at(2).text()).toEqual("GPIO 52 - Tool Verification");
|
||||
expect(pinNumbers.at(2).text()).toEqual("52");
|
||||
expect(wrapper.find(".indicator").at(2).text()).toEqual("1 (NO TOOL)");
|
||||
expect(labels.at(3).text()).toEqual("GPIO 53 - Tool Verification");
|
||||
expect(pinNumbers.at(3).text()).toEqual("53");
|
||||
expect(wrapper.find(".indicator").at(3).text()).toEqual("0 (TOOL ON)");
|
||||
});
|
||||
|
||||
const expectedPayload = (pin_number: number, pin_mode: 0 | 1) =>
|
||||
|
@ -60,10 +84,10 @@ describe("<SensorList/>", function () {
|
|||
it("reads sensors", () => {
|
||||
const wrapper = mount(<SensorList {...fakeProps()} />);
|
||||
const readSensorBtn = wrapper.find("button");
|
||||
readSensorBtn.first().simulate("click");
|
||||
expect(mockDevice.readPin).toHaveBeenCalledWith(expectedPayload(51, 1));
|
||||
readSensorBtn.last().simulate("click");
|
||||
expect(mockDevice.readPin).toHaveBeenLastCalledWith(expectedPayload(50, 0));
|
||||
readSensorBtn.at(0).simulate("click");
|
||||
expect(mockDevice.readPin).toHaveBeenCalledWith(expectedPayload(51, 0));
|
||||
readSensorBtn.at(1).simulate("click");
|
||||
expect(mockDevice.readPin).toHaveBeenLastCalledWith(expectedPayload(50, 1));
|
||||
expect(mockDevice.readPin).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
|
|
|
@ -38,11 +38,17 @@ const SensorReadingDisplay =
|
|||
({ label, value, mode }: SensorReadingDisplayProps) => {
|
||||
const moistureSensor = label.toLowerCase().includes("moisture") ?
|
||||
"moisture-sensor" : "";
|
||||
return <div className={`sensor-reading-display ${moistureSensor}`}>
|
||||
const toolSensor = label.toLowerCase().includes("verification") ?
|
||||
"tool-verification-sensor" : "";
|
||||
const valueLabel = toolSensor
|
||||
? `${value} (${value ? t("NO TOOL") : t("TOOL ON")})`
|
||||
: value;
|
||||
return <div
|
||||
className={`sensor-reading-display ${moistureSensor} ${toolSensor}`}>
|
||||
{isNumber(value) && value >= 0 &&
|
||||
<div className="indicator" style={calcIndicatorStyle({ value, mode })}>
|
||||
<span style={calcValueStyle({ value, mode })}>
|
||||
{value}
|
||||
{valueLabel}
|
||||
</span>
|
||||
</div>}
|
||||
</div>;
|
||||
|
|
|
@ -1195,6 +1195,11 @@ ul {
|
|||
&.moisture-sensor {
|
||||
background: linear-gradient(to right, rgba($blue, 0) 20%, $blue 80%, rgba($blue, 0) 85%);
|
||||
}
|
||||
&.tool-verification-sensor {
|
||||
span {
|
||||
margin-left: 3.5rem !important;
|
||||
}
|
||||
}
|
||||
border-style: solid;
|
||||
border-color: $dark_gray;
|
||||
border-width: 0.1px;
|
||||
|
|
Loading…
Reference in New Issue