1013 lines
29 KiB
JavaScript
1013 lines
29 KiB
JavaScript
import { UserOutlined } from "@ant-design/icons";
|
|
import { Avatar, Badge, Tooltip } from "antd";
|
|
import { createContext, useEffect, useRef, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { Buffer } from "buffer";
|
|
import { v4 as uuidv4 } from "uuid";
|
|
|
|
/**
|
|
* constants
|
|
*/
|
|
export const Constants = {
|
|
COLORS: {
|
|
PRIMARY: "#e67e22",
|
|
SECONDARY: "#9b59b6",
|
|
ICON_INFO: "#08c",
|
|
},
|
|
TEXT_EMPTY_PLACEHOLDER: "-/-",
|
|
API_ADDRESS: "http://localhost:8080/v1",
|
|
STATIC_CONTENT_ADDRESS: "http://localhost:8080/",
|
|
WS_ADDRESS: "ws://localhost:8080/ws",
|
|
ROUTE_PATHS: {
|
|
GROUP_TASKS: "/group-tasks",
|
|
GROUP_TASKS_VIEW: "/group-tasks/",
|
|
},
|
|
GROUP_TASKS_STATUS: {
|
|
FINISHED: 1,
|
|
RUNNING: 2,
|
|
CANCELED: 3,
|
|
FAILED: 4,
|
|
INPUT_REQUIRED: 5,
|
|
},
|
|
GLOBALS: {
|
|
MIN_USERNAME_LENGTH: 2,
|
|
MAX_USERNAME_LENGTH: 20,
|
|
MIN_PASSWORD_LENGTH: 6,
|
|
MAX_PASSWORD_LENGTH: 64,
|
|
MIN_ROLE_DISPLAY_NAME: 3,
|
|
MAX_ROLE_DISPLAY_NAME: 30,
|
|
MAX_ROLE_DESCRIPTION: 80,
|
|
},
|
|
MAX_AVATAR_SIZE: 5 * 1024 * 1024,
|
|
ACCEPTED_FILE_TYPES: ["image/png", "image/jpeg", "image/jpg"],
|
|
PERMISSIONS: {
|
|
GROUP_TASKS: {
|
|
OVERVIEW: {
|
|
XYNewTask: "group_tasks.overview.XY.new_task",
|
|
XYReloadGroupConfig: "group_tasks.overview.XY.reload_group_config",
|
|
XYView: "group_tasks.overview.XY.view",
|
|
},
|
|
HISTORY: "group_tasks.history",
|
|
},
|
|
ALL_USERS: {
|
|
ACTION: {
|
|
CHANGE_ROLE: "all_users.action.change_role",
|
|
},
|
|
},
|
|
SCANNER: {
|
|
USE_SCANNERS: "scanner.use_scanners",
|
|
},
|
|
ADMIN_AREA: {
|
|
ROLES: {
|
|
CREATE_NEW_ROLE: "admin_area.roles.create_new_role",
|
|
UPDATE_ROLE: "admin_area.roles.update_role",
|
|
DELETE_ROLE: "admin_area.roles.delete_role",
|
|
MOVE_ROLE_UP_DOWN: "admin_area.roles.move_role_up_down",
|
|
},
|
|
LOGS: "admin_area.logs",
|
|
},
|
|
},
|
|
};
|
|
|
|
/*
|
|
This ID is needed because the message is sent to all clients connected to the backend server when a task is locked and unlocked.
|
|
With this ID the client checks if the respective browser tab of the user is the initiator of the lock.
|
|
*/
|
|
//export const GroupTasksStepsLockedAndUserUpdateInputValueRememberId =
|
|
//window.crypto.randomUUID();
|
|
export const GroupTasksStepsLockedAndUserUpdateInputValueRememberId = uuidv4();
|
|
|
|
/**
|
|
* user session
|
|
*/
|
|
export function UseUserSession() {
|
|
const getUserSession = () => {
|
|
return getUserSessionFromLocalStorage();
|
|
};
|
|
|
|
const [userSession, setUserSession] = useState(getUserSession());
|
|
|
|
const saveUserSession = (session) => {
|
|
setUserSession(session);
|
|
|
|
if (session === undefined) {
|
|
localStorage.removeItem("session");
|
|
} else {
|
|
setUserSessionToLocalStorage(session);
|
|
}
|
|
};
|
|
|
|
return {
|
|
setUserSession: saveUserSession,
|
|
userSession,
|
|
};
|
|
}
|
|
|
|
export function getUserSessionFromLocalStorage() {
|
|
return localStorage.getItem("session");
|
|
}
|
|
|
|
export function setUserSessionToLocalStorage(session) {
|
|
localStorage.setItem("session", session);
|
|
}
|
|
|
|
export function handleUnauthorizedStatus(status) {
|
|
if (status === 401) {
|
|
setUserSessionToLocalStorage("");
|
|
window.location.href = "/";
|
|
}
|
|
}
|
|
|
|
/**
|
|
* websocket
|
|
*/
|
|
let l = "loading...";
|
|
|
|
let webSocketContextPreview = {
|
|
User: {
|
|
Id: "",
|
|
Username: l,
|
|
Email: l,
|
|
Sessions: [],
|
|
Permissions: [],
|
|
},
|
|
AllUsers: [],
|
|
AllRoles: [],
|
|
ConnectionBadgeStatus: "error",
|
|
ConnectedWebSocketUsersCount: 0,
|
|
CategoryGroups: [],
|
|
GroupTasks: [],
|
|
GroupTasksSteps: [],
|
|
Scanners: [],
|
|
UserProfileStateUsername: l,
|
|
UserProfileStateEmail: l,
|
|
AdminAreaRolesPermissions: [],
|
|
};
|
|
|
|
export const WebSocketContext = createContext(webSocketContextPreview);
|
|
|
|
// commands received from the backend server
|
|
const ReceivedMessagesCommands = {
|
|
InitUserSocketConnection: 1,
|
|
UpdateConnectedUsers: 2,
|
|
NewGroupTaskStarted: 3,
|
|
NewGroupTaskStep: 4,
|
|
UpdateGroupTaskStep: 5,
|
|
UpdateGroupTask: 6,
|
|
ReloadingGroupTasks: 7,
|
|
GroupTasksReloaded: 8,
|
|
UpdateUserSessions: 9,
|
|
UpdateAllUsersUserAvatar: 10,
|
|
NewScanner: 11,
|
|
DeleteScanner: 12,
|
|
UpdateScannerUsedByUserId: 13,
|
|
ScanResult: 14,
|
|
UpdateScannerLastUsed: 15,
|
|
TaskLocked: 16,
|
|
TaskUnlocked: 17,
|
|
UserProfileUpdated: 18,
|
|
AdminAreaNewRoleCreated: 19,
|
|
AdminAreaRoleUpdated: 20,
|
|
AdminAreaUpdateRoleSortingOrder: 21,
|
|
AdminAreaRoleDeleted: 22,
|
|
UserRoleUpdated: 23,
|
|
RolePermissionsUpdated: 24,
|
|
ErrorNoPermissions: 25,
|
|
};
|
|
|
|
// commands sent to the backend server
|
|
export const SentMessagesCommands = {
|
|
StartGroupTasks: 1,
|
|
TaskFailedTryAgainRunTaskStep: 2,
|
|
TaskContinueTaskStep: 3,
|
|
ReloadGroupTasks: 4,
|
|
TaskLocking: 5,
|
|
UpdateUserProfile: 6,
|
|
AdminAreaCreateNewRole: 7,
|
|
AdminAreaUpdateRole: 8,
|
|
AdminAreaUpdateRoleSortingOrder: 9,
|
|
AdminAreaDeleteRole: 10,
|
|
UpdateUserRole: 11,
|
|
};
|
|
|
|
export function WebSocketProvider({
|
|
children,
|
|
userSession,
|
|
setUserSession,
|
|
notificationApi,
|
|
}) {
|
|
const [isReady, setIsReady] = useState(false);
|
|
const [connectionBadgeStatus, setConnectionBadgeStatus] = useState(
|
|
webSocketContextPreview.ConnectionBadgeStatus
|
|
);
|
|
const [connectedWebSocketUsersCount, setConnectedWebSocketUsersCount] =
|
|
useState(0);
|
|
const [user, setUser] = useState(webSocketContextPreview.User);
|
|
const [allUsers, setAllUsers] = useState(webSocketContextPreview.AllUsers);
|
|
const [allRoles, setAllRoles] = useState(webSocketContextPreview.AllRoles);
|
|
const [categoryGroups, setCategoryGroups] = useState(
|
|
webSocketContextPreview.CategoryGroups
|
|
);
|
|
// these are all group tasks that are then filtered and displayed in the respective tables for the category
|
|
const [groupTasks, setGroupTasks] = useState([]);
|
|
const [groupTasksSteps, setGroupTasksSteps] = useState([]);
|
|
const [scanners, setScanners] = useState([]);
|
|
const navigate = useNavigate();
|
|
const StartGroupTasksOpenModalRememberIdRef = useRef(null);
|
|
const [userProfileStateUsername, setUserProfileStateUsername] = useState(
|
|
webSocketContextPreview.UserProfileStateUsername
|
|
);
|
|
const [userProfileStateEmail, setUserProfileStateEmail] = useState(
|
|
webSocketContextPreview.UserProfileStateEmail
|
|
);
|
|
const [adminAreaRolesPermissions, setAdminAreaRolesPermissions] = useState(
|
|
webSocketContextPreview.AdminAreaRolesPermissions
|
|
);
|
|
|
|
const ws = useRef(null);
|
|
|
|
const connect = () => {
|
|
ws.current = new WebSocket(Constants.WS_ADDRESS + "?auth=" + userSession);
|
|
|
|
ws.current.onopen = () => {
|
|
console.log("connected");
|
|
setConnectionBadgeStatus("success");
|
|
setIsReady(true);
|
|
};
|
|
|
|
ws.current.onmessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
console.log("received message", data);
|
|
|
|
const cmd = data.Cmd;
|
|
const body = data.Body;
|
|
|
|
switch (cmd) {
|
|
case ReceivedMessagesCommands.InitUserSocketConnection:
|
|
if (body.User.Permissions === null) {
|
|
body.User.Permissions = [];
|
|
}
|
|
|
|
setUser(body.User);
|
|
setUserProfileStateEmail(body.User.Email);
|
|
setUserProfileStateUsername(body.User.Username);
|
|
setAllUsers(body.AllUsers);
|
|
setAllRoles(body.AllRoles);
|
|
setCategoryGroups(body.CategoryGroups);
|
|
setGroupTasks(body.GroupTasks);
|
|
setGroupTasksSteps(body.GroupTasksSteps);
|
|
if (body.Scanners !== null) setScanners(body.Scanners);
|
|
|
|
if (body.AdminArea.RolesPermissions !== null)
|
|
setAdminAreaRolesPermissions(body.AdminArea.RolesPermissions);
|
|
|
|
localStorage.setItem("userId", body.User.Id);
|
|
break;
|
|
case ReceivedMessagesCommands.UpdateConnectedUsers:
|
|
setConnectedWebSocketUsersCount(body.WebSocketUsersCount);
|
|
setAllUsers((arr) => {
|
|
const newArr = [...arr];
|
|
|
|
const arrIndex = arr.findIndex((arr1) => arr1.Id === body.UserId);
|
|
|
|
newArr[arrIndex].ConnectionStatus = body.ConnectionStatus;
|
|
newArr[arrIndex].LastOnline = body.LastOnline;
|
|
|
|
return newArr;
|
|
});
|
|
break;
|
|
case ReceivedMessagesCommands.NewGroupTaskStarted:
|
|
setGroupTasks((arr) => [...arr, body]);
|
|
|
|
if (
|
|
body.RememberId === StartGroupTasksOpenModalRememberIdRef.current
|
|
) {
|
|
navigate(`${Constants.ROUTE_PATHS.GROUP_TASKS}/${body.Id}`);
|
|
}
|
|
break;
|
|
case ReceivedMessagesCommands.NewGroupTaskStep:
|
|
setGroupTasksSteps((arr) => [...arr, body]);
|
|
|
|
scrollToNextStep(body.GroupTasksId, body.Step);
|
|
break;
|
|
case ReceivedMessagesCommands.UpdateGroupTaskStep:
|
|
setGroupTasksSteps((arr) => {
|
|
const newArr = [...arr];
|
|
|
|
newArr[arr.findIndex((arr1) => arr1.Id === body.Id)] = body;
|
|
|
|
return newArr;
|
|
});
|
|
|
|
scrollToNextStep(body.GroupTasksId, body.Step);
|
|
break;
|
|
case ReceivedMessagesCommands.UpdateGroupTask:
|
|
setGroupTasks((arr) => {
|
|
const newArr = [...arr];
|
|
|
|
newArr[arr.findIndex((arr1) => arr1.Id === body.Id)] = body;
|
|
|
|
return newArr;
|
|
});
|
|
break;
|
|
case ReceivedMessagesCommands.ReloadingGroupTasks:
|
|
notificationApi["warning"]({
|
|
message: `Group ${body} is reloading`,
|
|
duration: 2,
|
|
});
|
|
break;
|
|
case ReceivedMessagesCommands.GroupTasksReloaded:
|
|
setCategoryGroups((arr) => {
|
|
const newArr = [...arr];
|
|
|
|
newArr[
|
|
arr.findIndex((arr1) => arr1.category === body.Category)
|
|
].groups = body.UpdatedGroups;
|
|
|
|
return newArr;
|
|
});
|
|
|
|
notificationApi["info"]({
|
|
message: `Group ${body.Category} reloaded`,
|
|
duration: 2,
|
|
});
|
|
break;
|
|
case ReceivedMessagesCommands.UpdateUserSessions:
|
|
setUser((arr) => ({ ...arr, Sessions: body }));
|
|
break;
|
|
case ReceivedMessagesCommands.UpdateAllUsersUserAvatar:
|
|
setAllUsers((arr) => {
|
|
const newArr = [...arr];
|
|
|
|
newArr[arr.findIndex((arr1) => arr1.Id === body.UserId)].Avatar =
|
|
body.Avatar;
|
|
|
|
return newArr;
|
|
});
|
|
break;
|
|
case ReceivedMessagesCommands.NewScanner:
|
|
setScanners((arr) => [...arr, body]);
|
|
break;
|
|
case ReceivedMessagesCommands.DeleteScanner:
|
|
setScanners((arr) => arr.filter((arr) => arr.Id !== body.Id));
|
|
break;
|
|
case ReceivedMessagesCommands.UpdateScannerUsedByUserId:
|
|
setScanners((arr) => {
|
|
const newArr = [...arr];
|
|
|
|
newArr[
|
|
arr.findIndex((arr1) => arr1.Id === body.ScannerId)
|
|
].UsedByUserId = body.UsedByUserId;
|
|
|
|
return newArr;
|
|
});
|
|
break;
|
|
case ReceivedMessagesCommands.ScanResult:
|
|
const decodedScanResult = Buffer.from(body, "base64").toString();
|
|
|
|
if (decodedScanResult === "" || decodedScanResult === null) {
|
|
notificationApi["error"]({
|
|
message: `Failed to decode scan result`,
|
|
description: "See in developer console",
|
|
});
|
|
|
|
console.error(
|
|
"Received scan result: ",
|
|
body,
|
|
"Decoded result: ",
|
|
decodedScanResult
|
|
);
|
|
break;
|
|
}
|
|
|
|
notificationApi["info"]({
|
|
message: `Scan Result`,
|
|
description: Buffer.from(body, "base64").toString(),
|
|
});
|
|
|
|
new Audio(
|
|
`${Constants.STATIC_CONTENT_ADDRESS}sounds/scan_result.mp3`
|
|
).play();
|
|
|
|
break;
|
|
case ReceivedMessagesCommands.UpdateScannerLastUsed:
|
|
setScanners((arr) => {
|
|
const newArr = [...arr];
|
|
|
|
newArr[
|
|
arr.findIndex((arr1) => arr1.Id === body.ScannerId)
|
|
].LastUsed = body.LastUsed;
|
|
|
|
return newArr;
|
|
});
|
|
break;
|
|
case ReceivedMessagesCommands.TaskLocked:
|
|
if (
|
|
body.rememberId ===
|
|
GroupTasksStepsLockedAndUserUpdateInputValueRememberId
|
|
)
|
|
break;
|
|
|
|
setGroupTasksSteps((arr) => {
|
|
const newArr = [...arr];
|
|
|
|
newArr[
|
|
arr.findIndex(
|
|
(arr1) =>
|
|
arr1.GroupTasksId === body.groupTaskId &&
|
|
arr1.Step === body.step
|
|
)
|
|
].LockedByUserId = body.lockedByUserId;
|
|
|
|
return newArr;
|
|
});
|
|
|
|
// update input value
|
|
// html based DOM manipulation
|
|
const foundInput = document.getElementById(body.element);
|
|
|
|
if (foundInput) {
|
|
// this timeout is needed because the previous useState for the lockedByUserId takes some milliseconds to complete
|
|
setTimeout(() => setNativeValue(foundInput, body.value), 50);
|
|
}
|
|
|
|
// update group task step as html based DOM manipulation only works if user has no other modal open
|
|
setGroupTasksSteps((arr) => {
|
|
const newArr = [...arr];
|
|
|
|
const stepIndex = arr.findIndex(
|
|
(arr1) =>
|
|
arr1.GroupTasksId === body.groupTaskId &&
|
|
arr1.Step === body.step
|
|
);
|
|
|
|
if (stepIndex === -1) return newArr;
|
|
|
|
let inputs = [];
|
|
|
|
if (newArr[stepIndex].Inputs !== "") {
|
|
inputs = JSON.parse(newArr[stepIndex].Inputs);
|
|
}
|
|
|
|
let parameterFound = false;
|
|
|
|
for (let i = 0; i < inputs.length; i++) {
|
|
if (inputs[i].parameterName === body.parameterName) {
|
|
inputs[i].value = body.value;
|
|
parameterFound = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!parameterFound) {
|
|
let obj = {};
|
|
|
|
obj["parameterName"] = body.parameterName;
|
|
obj["value"] = body.value;
|
|
|
|
inputs.push(obj);
|
|
}
|
|
|
|
newArr[stepIndex].Inputs = JSON.stringify(inputs);
|
|
|
|
return newArr;
|
|
});
|
|
|
|
break;
|
|
case ReceivedMessagesCommands.TaskUnlocked:
|
|
if (
|
|
body.rememberId ===
|
|
GroupTasksStepsLockedAndUserUpdateInputValueRememberId
|
|
)
|
|
break;
|
|
|
|
setGroupTasksSteps((arr) => {
|
|
const newArr = [...arr];
|
|
|
|
newArr[
|
|
arr.findIndex(
|
|
(arr1) =>
|
|
arr1.GroupTasksId === body.GroupTaskId &&
|
|
arr1.Step === body.Step
|
|
)
|
|
].LockedByUserId = "";
|
|
|
|
return newArr;
|
|
});
|
|
break;
|
|
case ReceivedMessagesCommands.UserProfileUpdated:
|
|
setUser((user) => {
|
|
const updatedUser = { ...user };
|
|
|
|
if (user.Id === body.UserId) {
|
|
if (body.Changes.Username !== undefined) {
|
|
updatedUser.Username = body.Changes.Username;
|
|
setUserProfileStateUsername(body.Changes.Username);
|
|
}
|
|
if (body.Changes.Email !== undefined) {
|
|
updatedUser.Email = body.Changes.Email;
|
|
setUserProfileStateEmail(body.Changes.Email);
|
|
}
|
|
}
|
|
|
|
return updatedUser;
|
|
});
|
|
|
|
if (body.Changes.Username !== undefined) {
|
|
setAllUsers((arr) => {
|
|
const newArr = [...arr];
|
|
|
|
newArr[
|
|
arr.findIndex((arr1) => arr1.Id === body.UserId)
|
|
].Username = body.Changes.Username;
|
|
|
|
return newArr;
|
|
});
|
|
}
|
|
|
|
// feedback message for the user who has changed his profile
|
|
if (body.Result !== undefined) {
|
|
if (body.Result.Username !== undefined) {
|
|
if (body.Result.Username === 0) {
|
|
notificationApi["success"]({
|
|
message: `Username changed`,
|
|
description: `Changed to ${body.Changes.Username}`,
|
|
});
|
|
} else {
|
|
notificationApi["error"]({
|
|
message: `Username could not be changed`,
|
|
description: "Username already in use",
|
|
});
|
|
}
|
|
}
|
|
|
|
if (body.Result.Email !== undefined) {
|
|
if (body.Result.Email === 0) {
|
|
notificationApi["success"]({
|
|
message: `Email changed`,
|
|
description: `Changed to ${body.Changes.Email}`,
|
|
});
|
|
} else {
|
|
notificationApi["error"]({
|
|
message: `Email could not be changed`,
|
|
description: "Email already in use",
|
|
});
|
|
}
|
|
}
|
|
|
|
if (body.Result.Password !== undefined) {
|
|
if (body.Result.Password === 1) {
|
|
notificationApi["error"]({
|
|
message: `Old password is wrong`,
|
|
description: `Please check your entered old password`,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
case ReceivedMessagesCommands.AdminAreaNewRoleCreated:
|
|
setAllRoles((arr) => [...arr, body]);
|
|
|
|
setAdminAreaRolesPermissions((arr) => [
|
|
...arr,
|
|
{ RoleId: body.Id, Permissions: [] },
|
|
]);
|
|
break;
|
|
case ReceivedMessagesCommands.AdminAreaRoleUpdated:
|
|
setAllRoles((arr) => {
|
|
const newArr = [...arr];
|
|
|
|
const arrIndex = arr.findIndex((arr1) => arr1.Id === body.RoleId);
|
|
|
|
if (body.Changes.DisplayName !== undefined) {
|
|
newArr[arrIndex].DisplayName = body.Changes.DisplayName;
|
|
}
|
|
|
|
if (body.Changes.Description !== undefined) {
|
|
newArr[arrIndex].Description = body.Changes.Description;
|
|
}
|
|
|
|
return newArr;
|
|
});
|
|
|
|
if (
|
|
body.Changes.AddedPermissions !== undefined ||
|
|
body.Changes.RemovedPermissions !== undefined
|
|
) {
|
|
setAdminAreaRolesPermissions((arr) => {
|
|
const newArr = [...arr];
|
|
|
|
const roleIndex = arr.findIndex(
|
|
(item) => item.RoleId === body.RoleId
|
|
);
|
|
|
|
if (body.Changes.AddedPermissions !== undefined) {
|
|
if (newArr[roleIndex].Permissions === null) {
|
|
newArr[roleIndex].Permissions = body.Changes.AddedPermissions;
|
|
} else {
|
|
newArr[roleIndex].Permissions = newArr[
|
|
roleIndex
|
|
].Permissions.concat(body.Changes.AddedPermissions);
|
|
}
|
|
}
|
|
|
|
if (body.Changes.RemovedPermissions !== undefined) {
|
|
newArr[roleIndex].Permissions = newArr[
|
|
roleIndex
|
|
].Permissions.filter(
|
|
(permission) =>
|
|
!body.Changes.RemovedPermissions.includes(permission)
|
|
);
|
|
}
|
|
|
|
return newArr;
|
|
});
|
|
}
|
|
|
|
if (body.Result !== undefined) {
|
|
if (body.Result.DisplayName !== undefined) {
|
|
if (body.Result.DisplayName === 1) {
|
|
notificationApi["error"]({
|
|
message: `Display name could be changed`,
|
|
description: `Display name already in use`,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
case ReceivedMessagesCommands.AdminAreaUpdateRoleSortingOrder:
|
|
setAllRoles((arr) => {
|
|
const newArr = [...arr];
|
|
|
|
const updatedRoleIndex = newArr.findIndex(
|
|
(role) => role.Id === body.RoleId
|
|
);
|
|
|
|
const currentSortingOrder = newArr[updatedRoleIndex].SortingOrder;
|
|
|
|
if (body.Direction === 0) {
|
|
newArr[updatedRoleIndex].SortingOrder =
|
|
newArr[updatedRoleIndex].SortingOrder - 1;
|
|
} else {
|
|
newArr[updatedRoleIndex].SortingOrder =
|
|
newArr[updatedRoleIndex].SortingOrder + 1;
|
|
}
|
|
|
|
const newSortingOrder = newArr[updatedRoleIndex].SortingOrder;
|
|
|
|
for (let i = 0; i < newArr.length; i++) {
|
|
if (newArr[i].Id !== newArr[updatedRoleIndex].Id) {
|
|
if (newArr[i].SortingOrder === newSortingOrder) {
|
|
newArr[i].SortingOrder = currentSortingOrder;
|
|
} else if (
|
|
newArr[i].SortingOrder < currentSortingOrder &&
|
|
newArr[i].SortingOrder >= newSortingOrder
|
|
) {
|
|
newArr[i].SortingOrder = newArr[i].SortingOrder + 1;
|
|
} else if (
|
|
newArr[i].SortingOrder > currentSortingOrder &&
|
|
newArr[i].SortingOrder <= newSortingOrder
|
|
) {
|
|
newArr[i].SortingOrder = newArr[i] - 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
newArr.sort((a, b) => a.SortingOrder - b.SortingOrder);
|
|
|
|
return newArr;
|
|
});
|
|
break;
|
|
case ReceivedMessagesCommands.AdminAreaRoleDeleted:
|
|
setAllRoles((arr) => {
|
|
let newArr = [...arr];
|
|
|
|
const deletedRole = newArr.find((r) => r.Id === body.RoleId);
|
|
|
|
newArr = newArr.filter((role) => role.Id !== body.RoleId);
|
|
|
|
for (let i = 0; i < newArr.length; i++) {
|
|
if (newArr[i].SortingOrder > deletedRole.SortingOrder) {
|
|
newArr[i].SortingOrder = newArr[i].SortingOrder - 1;
|
|
}
|
|
}
|
|
|
|
return newArr;
|
|
});
|
|
|
|
setAdminAreaRolesPermissions((arr) => {
|
|
let newArr = [...arr];
|
|
|
|
newArr = newArr.filter(
|
|
(rolePermission) => rolePermission.RoleId !== body.RoleId
|
|
);
|
|
|
|
return newArr;
|
|
});
|
|
break;
|
|
case ReceivedMessagesCommands.UserRoleUpdated:
|
|
setAllUsers((arr) => {
|
|
const newArr = [...arr];
|
|
|
|
newArr[newArr.findIndex((user) => user.Id === body.UserId)].RoleId =
|
|
body.RoleId;
|
|
|
|
return newArr;
|
|
});
|
|
|
|
if (body.Permissions !== undefined) {
|
|
setUser((user) => {
|
|
const updatedUser = { ...user };
|
|
|
|
if (body.Permissions === null) {
|
|
updatedUser.Permissions = [];
|
|
} else {
|
|
updatedUser.Permissions = body.Permissions;
|
|
}
|
|
|
|
return updatedUser;
|
|
});
|
|
}
|
|
break;
|
|
case ReceivedMessagesCommands.RolePermissionsUpdated:
|
|
if (
|
|
body.AddedPermissions !== undefined ||
|
|
body.RemovedPermissions !== undefined
|
|
) {
|
|
setUser((user) => {
|
|
const updatedUser = { ...user };
|
|
|
|
if (body.AddedPermissions !== undefined) {
|
|
updatedUser.Permissions = updatedUser.Permissions.concat(
|
|
body.AddedPermissions
|
|
);
|
|
}
|
|
|
|
if (body.RemovedPermissions !== undefined) {
|
|
updatedUser.Permissions = updatedUser.Permissions.filter(
|
|
(permission) => !body.RemovedPermissions.includes(permission)
|
|
);
|
|
}
|
|
|
|
return updatedUser;
|
|
});
|
|
}
|
|
break;
|
|
case ReceivedMessagesCommands.ErrorNoPermissions:
|
|
notificationApi["error"]({
|
|
message: `No permissions`,
|
|
description: `Please contact the administrator`,
|
|
});
|
|
break;
|
|
|
|
default:
|
|
console.error("unknown command", cmd);
|
|
break;
|
|
}
|
|
};
|
|
|
|
ws.current.onclose = (event) => {
|
|
setIsReady(false);
|
|
setConnectionBadgeStatus("error");
|
|
console.warn("closed", event);
|
|
|
|
// custom code defined by the backend server
|
|
if (event.code === 4001 || event.code === 4002) {
|
|
//Unauthorized || SessionClosed
|
|
|
|
setUserSession();
|
|
window.location.href = "/";
|
|
return;
|
|
}
|
|
|
|
if (event.reason.code === 1005) return;
|
|
|
|
console.warn("reconnecting...");
|
|
|
|
setTimeout(() => connect(), 1000);
|
|
};
|
|
};
|
|
|
|
useEffect(() => {
|
|
connect();
|
|
|
|
//return () => socket.close();
|
|
return () => ws.current.close();
|
|
}, []);
|
|
|
|
const SendSocketMessage = (cmd, body) => {
|
|
if (isReady) {
|
|
ws.current.send(JSON.stringify({ Cmd: cmd, Body: body }));
|
|
} else {
|
|
notificationApi["error"]({
|
|
message: `Websocket is not ready`,
|
|
description: `Please check your internet connection`,
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<WebSocketContext.Provider
|
|
value={{
|
|
ConnectionBadgeStatus: connectionBadgeStatus,
|
|
ConnectedWebSocketUsersCount: connectedWebSocketUsersCount,
|
|
CategoryGroups: categoryGroups,
|
|
GroupTasks: groupTasks,
|
|
User: user,
|
|
AllUsers: allUsers,
|
|
AllRoles: allRoles,
|
|
Scanners: scanners,
|
|
SendSocketMessage: SendSocketMessage,
|
|
GroupTasksSteps: groupTasksSteps,
|
|
setGroupTasksSteps: setGroupTasksSteps,
|
|
StartGroupTasksOpenModalRememberIdRef:
|
|
StartGroupTasksOpenModalRememberIdRef,
|
|
UserProfileStateUsername: userProfileStateUsername,
|
|
setUserProfileStateUsername: setUserProfileStateUsername,
|
|
UserProfileStateEmail: userProfileStateEmail,
|
|
setUserProfileStateEmail: setUserProfileStateEmail,
|
|
AdminAreaRolesPermissions: adminAreaRolesPermissions,
|
|
}}
|
|
>
|
|
{children}
|
|
</WebSocketContext.Provider>
|
|
);
|
|
}
|
|
|
|
function scrollToNextStep(groupTaskId, step) {
|
|
setTimeout(
|
|
() =>
|
|
document
|
|
.getElementById(`${groupTaskId}-scroll-${step - 1}`)
|
|
?.scrollIntoView({ behavior: "smooth" }),
|
|
200
|
|
);
|
|
}
|
|
|
|
// https://stackoverflow.com/a/52486921
|
|
function setNativeValue(element, value) {
|
|
let lastValue = element.value;
|
|
element.value = value;
|
|
let event = new Event("input", { target: element, bubbles: true });
|
|
// React 15
|
|
event.simulated = true;
|
|
// React 16
|
|
let tracker = element._valueTracker;
|
|
if (tracker) {
|
|
tracker.setValue(lastValue);
|
|
}
|
|
element.dispatchEvent(event);
|
|
}
|
|
|
|
export function FormatDatetime(datetime) {
|
|
if (datetime === "0001-01-01T00:00:00Z") {
|
|
return Constants.TEXT_EMPTY_PLACEHOLDER;
|
|
}
|
|
|
|
return new Date(datetime).toLocaleString("de-DE");
|
|
}
|
|
|
|
export function GetDuration(startTime, endTime) {
|
|
if (endTime === "0001-01-01T00:00:00Z") {
|
|
return Constants.TEXT_EMPTY_PLACEHOLDER;
|
|
}
|
|
|
|
const diff = Math.abs(new Date(startTime) - new Date(endTime));
|
|
|
|
if (diff === 0) {
|
|
return "0ms";
|
|
}
|
|
|
|
const milliseconds = diff % 1000;
|
|
const seconds = Math.floor(diff / 1000);
|
|
const minutes = Math.floor(seconds / 60);
|
|
const hours = Math.floor(minutes / 60);
|
|
const days = Math.floor(hours / 24);
|
|
|
|
let result = "";
|
|
|
|
if (days > 0) {
|
|
result += days + "d ";
|
|
}
|
|
|
|
if (hours > 0) {
|
|
result += (hours % 24) + "h ";
|
|
}
|
|
|
|
if (minutes > 0) {
|
|
result += (minutes % 60) + "m ";
|
|
}
|
|
|
|
if (seconds > 0) {
|
|
result += (seconds % 60) + "s ";
|
|
}
|
|
|
|
if (milliseconds > 0) {
|
|
result += milliseconds + "ms";
|
|
}
|
|
|
|
return result.trim();
|
|
}
|
|
|
|
export function getConnectionStatusItem(connectionStatus) {
|
|
return connectionStatus === 0 ? (
|
|
<Badge status="error" text="Offline" />
|
|
) : (
|
|
<Badge status="success" text="Online" />
|
|
);
|
|
}
|
|
|
|
export function MyAvatar({
|
|
avatarWidth,
|
|
avatar,
|
|
tooltip,
|
|
tooltipTitle,
|
|
allUsers,
|
|
userId,
|
|
}) {
|
|
const MyDefaultAvatar = () => {
|
|
return <Avatar size={avatarWidth} icon={<UserOutlined />} />;
|
|
};
|
|
|
|
if (avatar === undefined || avatar === null) {
|
|
if (allUsers !== undefined && userId !== undefined) {
|
|
const user = allUsers.find((u) => u.Id === userId);
|
|
|
|
if (user === undefined) return <MyDefaultAvatar />;
|
|
|
|
avatar = user.Avatar;
|
|
tooltipTitle = user.Username;
|
|
} else {
|
|
return <MyDefaultAvatar />;
|
|
}
|
|
}
|
|
|
|
const MyAvat = () => {
|
|
return (
|
|
<Avatar
|
|
size={avatarWidth}
|
|
src={Constants.STATIC_CONTENT_ADDRESS + "avatars/" + avatar}
|
|
/>
|
|
);
|
|
};
|
|
|
|
if (tooltip) {
|
|
return (
|
|
<Tooltip placement="top" trigger="hover" title={tooltipTitle}>
|
|
<>
|
|
<MyAvat />
|
|
</>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
return <MyAvat />;
|
|
}
|
|
|
|
export function getUserId() {
|
|
return localStorage.getItem("userId");
|
|
}
|
|
|
|
const emailRegex =
|
|
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
|
|
|
export function isEmailValid(email) {
|
|
return emailRegex.test(email);
|
|
}
|
|
|
|
export function CapitalizeFirstLetter(string) {
|
|
return string.charAt(0).toUpperCase() + string.slice(1);
|
|
}
|
|
|
|
export function hasPermission(userPermissions, permission) {
|
|
return userPermissions.includes(permission);
|
|
}
|
|
|
|
export function hasXYPermission(userPermissions, permission, xyValue) {
|
|
return userPermissions.includes(
|
|
permission.replace("XY", xyValue.toLowerCase())
|
|
);
|
|
}
|
|
|
|
export function hasOnePermission(userPermissions, ...permissions) {
|
|
for (const permission of permissions) {
|
|
if (userPermissions.includes(permission)) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
export function hasOneXYPermission(userPermissions, xyValue, ...permissions) {
|
|
for (const permission of permissions) {
|
|
if (
|
|
userPermissions.includes(permission.replace("XY", xyValue.toLowerCase()))
|
|
) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|