Jannex
/
admin-dashboard-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dynamic machines

main
alex 2023-09-07 22:13:34 +02:00
parent b16b26ca56
commit 7b0b7f7033
4 changed files with 126 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/locales/de/translation.json
View File

@ -65,14 +65,18 @@
"button": {
"startTask": "Aufgabe starten"
},
"select": { "placeholder": "Wählen Sie einen Gruppentyp" },
"select": {
"placeholder": "Wählen Sie einen Gruppentyp",
"machinePlaceholder": "Wählen Sie eine Maschine"
},
"form": {
"item": {
"groupTypeDescription.label": "Beschreibung",
"groupTypeDescription.tooltip.title": "Diese Beschreibung hilft, im Nachhinein zu verstehen, worum es bei dieser Aufgabe ging"
}
},
"h3": "Füllen Sie die globalen Werte aus"
"h3": "Füllen Sie die globalen Werte aus",
"noNotesSpecified": "Keine Notizen angegeben"
},
"tag.global": "Global",
"groupTasksViewModal": {

8
public/locales/en/translation.json
View File

@ -65,14 +65,18 @@
"button": {
"startTask": "Start Task"
},
"select": { "placeholder": "Select a Group Type" },
"select": {
"placeholder": "Select a Group Type",
"machinePlaceholder": "Select a Machine"
},
"form": {
"item": {
"groupTypeDescription.label": "Description",
"groupTypeDescription.tooltip.title": "This description helps to understand what this task was about afterwards"
}
},
"h3": "Fill in the global values"
"h3": "Fill in the global values",
"noNotesSpecified": "No notes specified"
},
"tag.global": "Global",
"groupTasksViewModal": {

53
src/Pages/GroupTasks/Overview/GroupTasksViewModal.js
View File

@ -559,6 +559,10 @@ export default function GroupTasksViewModal({ isOpen }) {
)
return <></>;
const parsedGlobalInputs = JSON.parse(
currentGroupTask.current.GlobalInputs
);
return (
<>
<h2
@ -571,33 +575,23 @@ export default function GroupTasksViewModal({ isOpen }) {
</h2>
<span>
{JSON.parse(currentGroupTask.current.GlobalInputs).map(
(globalInput) => {
return (
<span key={globalInput.parameterName + globalInput.value}>
<span style={{ fontWeight: "bold" }}>
{
groupTasksContext.categoryGroup.groups
.find(
(group) =>
group.id === currentGroupTask.current.GroupId
)
.globalInputs.find(
(gI) => gI.parameterName === globalInput.parameterName
).displayName
}
:{" "}
</span>
<span>
{globalInput.value !== ""
? globalInput.value
: Constants.TEXT_EMPTY_PLACEHOLDER}
</span>
<br />
</span>
);
}
)}
{Object.keys(parsedGlobalInputs).map((globalInput) => (
<span key={globalInput}>
<span style={{ fontWeight: "bold" }}>
{
groupTasksContext.categoryGroup.groups
.find(
(group) => group.id === currentGroupTask.current.GroupId
)
.globalInputs.find((gI) => gI.parameterName === globalInput)
.displayName
}
:{" "}
</span>
<span>{parsedGlobalInputs[globalInput].value}</span>
<br />
</span>
))}
</span>
</>
);
@ -729,10 +723,7 @@ function InputRequiredHandler({
if (globalInputs === undefined || !groupTaskParameter.global) return null;
const globalInputValue = globalInputs.find(
(globalInput) =>
globalInput.parameterName === groupTaskParameter.parameterName
);
const globalInputValue = globalInputs[groupTaskParameter.parameterName];
return globalInputValue !== undefined ? globalInputValue.value : "";
};

162
src/Pages/GroupTasks/Overview/GroupTypeSelectionModal.js
View File

@ -17,8 +17,7 @@ import { useTranslation } from "react-i18next";
import { useWebSocketContext } from "../../../Contexts/WebSocketContext";
import { useGroupTasksContext } from "../../../Contexts/GroupTasksContext";
import { SentMessagesCommands } from "../../../Handlers/WebSocketMessageHandler";
import { useEffect, useState } from "react";
import { MyUserAvatar } from "../../../Components/MyAvatar";
import { useEffect, useRef, useState } from "react";
export default function GroupTypeSelectionModal({
isOpen,
@ -33,6 +32,8 @@ export default function GroupTypeSelectionModal({
const groupTasksContext = useGroupTasksContext();
const { t } = useTranslation();
const handleCancel = () => setIsOpen(false);
const groupTypeDescriptionRef = useRef("");
const groupGlobalInputsRef = useRef({});
const isStartTaskPossible = () => {
if (
@ -59,54 +60,22 @@ export default function GroupTypeSelectionModal({
const handleStartTask = () => {
let canTaskBeStarted = true;
const groupTaskDescription = document.getElementById(
"fitem-grouptypedescription"
).value;
if (groupTaskDescription === "") {
if (groupTypeDescriptionRef.current === "") {
canTaskBeStarted = false;
}
const userSpecifiedGlobalInputForm = document.getElementById(
"groupTypeSelectionUserSpecifiedGlobalInputForm"
);
// checking if there is some global input with empty value
const globalInputsKeys = Object.keys(groupGlobalInputsRef.current);
let globalInputs = [];
if (canTaskBeStarted && userSpecifiedGlobalInputForm !== null) {
const userSpecifiedGlobalInputs =
userSpecifiedGlobalInputForm.getElementsByTagName("input");
if (userSpecifiedGlobalInputs.length > 0) {
for (let i = 0; i < userSpecifiedGlobalInputs.length; i++) {
if (userSpecifiedGlobalInputs[i].value === "") {
canTaskBeStarted = false;
break;
}
globalInputs.push({
parameterName: userSpecifiedGlobalInputs[i].id,
value: userSpecifiedGlobalInputs[i].value,
});
if (globalInputsKeys.length === 0) {
canTaskBeStarted = false;
} else {
Object.keys(groupGlobalInputsRef.current).forEach((key) => {
if (groupGlobalInputsRef.current[key].value === "") {
canTaskBeStarted = false;
return;
}
}
const userSpecifiedGlobalTextareas =
userSpecifiedGlobalInputForm.getElementsByTagName("textarea");
if (userSpecifiedGlobalTextareas.length > 0) {
for (let i = 0; i < userSpecifiedGlobalTextareas.length; i++) {
if (userSpecifiedGlobalTextareas[i].value === "") {
canTaskBeStarted = false;
break;
}
globalInputs.push({
parameterName: userSpecifiedGlobalTextareas[i].id,
value: userSpecifiedGlobalTextareas[i].value,
});
}
}
});
}
if (!canTaskBeStarted) {
@ -143,11 +112,15 @@ export default function GroupTypeSelectionModal({
category: categoryGroup.category,
id: currentSelectedModalGroupType,
groupName: groupName,
description: groupTaskDescription,
description: groupTypeDescriptionRef.current,
numberOfSteps: parseInt(numberOfSteps),
globalInputs: globalInputs,
globalInputs: groupGlobalInputsRef.current,
rememberId: rememberId, // used to open the modal when group task is started by backend and send via websocket back
});
// reset
groupTypeDescriptionRef.current = "";
groupGlobalInputsRef.current = {};
};
return (
@ -207,7 +180,11 @@ export default function GroupTypeSelectionModal({
}}
required
>
<Input id="fitem-grouptypedescription" />
<Input
onInput={(e) =>
(groupTypeDescriptionRef.current = e.nativeEvent.target.value)
}
/>
</Form.Item>
</Form>
)}
@ -216,23 +193,21 @@ export default function GroupTypeSelectionModal({
categoryGroup={categoryGroup}
currentSelectedModalGroupType={currentSelectedModalGroupType}
notificationApi={notificationApi}
groupGlobalInputsRef={groupGlobalInputsRef}
/>
</Modal>
);
}
function SelectMachineComponent({ t, globalInput }) {
function SelectMachineComponent({ t, globalInput, groupGlobalInputsRef }) {
const [loading, setLoading] = useState(false);
const [options, setOptions] = useState([]);
const responseData = useRef([]);
useEffect(() => {
console.log("useEffect");
setLoading(true);
myFetch("/machines", "POST", {}).then((data) => {
console.log("data", data);
myFetch("/machines", "POST", globalInput.options).then((data) => {
const processedOptions = {};
data.forEach((item, index) => {
@ -242,12 +217,22 @@ function SelectMachineComponent({ t, globalInput }) {
processedOptions[partName] = [];
}
console.log("item.part_detail.Name", item.part_detail.Name);
let parsedNotes = "";
if (item.Notes !== "") {
try {
parsedNotes = JSON.parse(item.Notes);
} catch (error) {}
}
processedOptions[partName].push({
key: item.part_detail.Name + "-" + index,
label: JSON.parse(item.Notes).displayName,
key: index + item.part_detail.Name,
label:
parsedNotes === ""
? t("groupTasks.groupTypeSelectionModal.noNotesSpecified")
: parsedNotes.displayName,
value: index,
disabled: parsedNotes === "",
});
});
@ -260,7 +245,7 @@ function SelectMachineComponent({ t, globalInput }) {
);
setOptions(finalOptions);
responseData.current = data;
setLoading(false);
});
}, []);
@ -268,11 +253,20 @@ function SelectMachineComponent({ t, globalInput }) {
return (
<Select
loading={loading}
placeholder={t("groupTasks.groupTypeSelectionModal.select.placeholder")}
placeholder={t(
"groupTasks.groupTypeSelectionModal.select.machinePlaceholder"
)}
style={{ width: "100%" }}
id={globalInput.parameterName}
options={options}
onSelect={(value) => console.log("onSelect", value)}
onSelect={(value) => {
const parsedNotes = JSON.parse(responseData.current[value].Notes);
groupGlobalInputsRef.current[globalInput.parameterName] = {
value: parsedNotes.displayName,
data: parsedNotes,
};
}}
/>
);
}
@ -281,6 +275,7 @@ function GroupGlobalInputs({
categoryGroup,
currentSelectedModalGroupType,
notificationApi,
groupGlobalInputsRef,
}) {
const { t } = useTranslation();
@ -303,23 +298,36 @@ function GroupGlobalInputs({
group.id === currentSelectedModalGroupType &&
group.globalInputs?.length > 0
) {
group.globalInputs.forEach((globalInput) => {
group.globalInputs.forEach((globalInput, index) => {
// this is needed for the check if user clicks on start task button and there is some global input with empty value
groupGlobalInputsRef.current[globalInput.parameterName] = {
value: "",
};
switch (globalInput.type) {
case "text":
elements.push(
<Form.Item
key={"fitem-" + globalInput.parameterName}
key={index}
label={getLabel(globalInput.displayName)}
required
>
<Input id={globalInput.parameterName} />
<Input
id={globalInput.parameterName}
onChange={(e) =>
(groupGlobalInputsRef.current[globalInput.parameterName] =
{
value: e.nativeEvent.target.value,
})
}
/>
</Form.Item>
);
break;
case "number":
elements.push(
<Form.Item
key={"fitem-" + globalInput.parameterName}
key={index}
label={getLabel(globalInput.displayName)}
required
>
@ -327,6 +335,10 @@ function GroupGlobalInputs({
style={{ width: "100%" }}
max={Number.MAX_SAFE_INTEGER}
id={globalInput.parameterName}
onInput={(value) =>
(groupGlobalInputsRef.current[globalInput.parameterName] =
{ value: value })
}
/>
</Form.Item>
);
@ -334,24 +346,34 @@ function GroupGlobalInputs({
case "textarea":
elements.push(
<Form.Item
key={"fitem-" + globalInput.parameterName}
key={index}
label={getLabel(globalInput.displayName)}
required
>
<TextArea id={globalInput.parameterName} />
<TextArea
id={globalInput.parameterName}
onChange={(e) =>
(groupGlobalInputsRef.current[globalInput.parameterName] =
{
value: e.nativeEvent.target.value,
})
}
/>
</Form.Item>
);
break;
case "select_machine":
console.log("globalInput", globalInput);
elements.push(
<Form.Item
key={"fitem-" + globalInput.parameterName}
key={index}
label={getLabel(globalInput.displayName)}
required
>
<SelectMachineComponent t={t} globalInput={globalInput} />
<SelectMachineComponent
t={t}
globalInput={globalInput}
groupGlobalInputsRef={groupGlobalInputsRef}
/>
</Form.Item>
);
break;