This commit is contained in:
jokob-sk
2025-03-29 17:03:59 +11:00
parent f2e218230e
commit a0561b2016
7 changed files with 264 additions and 31 deletions

View File

@@ -1884,6 +1884,7 @@ input[readonly] {
margin-bottom: 7px;
z-index: 1;
display: flex;
opacity: 0.7;
}
.workflows .section-title
@@ -1905,18 +1906,18 @@ input[readonly] {
.workflows .button-container
{
display: contents;
/* display: contents; */
text-align: center;
width: 100%;
/* width: 100%; */
}
.workflows .panel:hover{
/* .workflows .panel:hover{
opacity: 1;
}
.workflows .panel{
opacity: 0.8;
}
} */
.workflows .bottom-buttons button
{
@@ -1939,6 +1940,48 @@ input[readonly] {
width:100%;
} */
.red-hover-text:hover
{
color: var(--color-red) !important;
}
.green-hover-text:hover
{
color: var(--color-green) !important;
}
.workflows .bckg-icon-1-line
{
font-size: 3em;
display: block;
position: absolute;
opacity: 0.1;
right: 0.1em;
}
.workflows .bckg-icon-2-line
{
font-size: 6em;
display: block;
position: absolute;
opacity: 0.1;
right: 0.1em;
}
.workflows .bckg-icon-3-line
{
font-size: 9em;
display: block;
position: absolute;
opacity: 0.1;
right: 0.1em;
}
.workflows .remove-condition
{
z-index: 1;
}
.workflows .workflow-card
{
display: block;

View File

@@ -34,12 +34,12 @@
let workflows = [];
let fieldOptions = [
"devMac", "devName", "devOwner", "devType", "devVendor", "devFavorite",
"devName", "devOwner", "devType", "devVendor", "devFavorite",
"devGroup", "devComments", "devFirstConnection", "devLastConnection",
"devLastIP", "devStaticIP", "devScan", "devLogEvents", "devAlertEvents",
"devAlertDown", "devSkipRepeated", "devLastNotification", "devPresentLastScan",
"devIsNew", "devLocation", "devIsArchived", "devParentMAC", "devParentPort",
"devIcon", "devGUID", "devSite", "devSSID", "devSyncHubNode", "devSourcePlugin"
"devIcon", "devSite", "devSSID", "devSyncHubNode", "devSourcePlugin"
];
let triggerTypes = [
@@ -160,11 +160,15 @@ function generateWorkflowUI(wf, wfIndex) {
$wfCollapsiblePanel.append($wfNameInput)
let $triggersIcon = $("<i>", {
class: "fa-solid fa-bolt"
});
let $triggerTitle = $("<div>",
{
class:"section-title"
}
).text("Trigger:")
).append($triggersIcon).append(" Trigger:")
// Trigger Section with dropdowns
let $triggerSection = $("<div>",
@@ -189,32 +193,43 @@ function generateWorkflowUI(wf, wfIndex) {
`wf-${wfIndex}-trigger-event-type`
);
let $triggerIcon = $("<i>", {
class: "fa-solid fa-bolt bckg-icon-2-line"
});
$triggerSection.append($triggerTypeDropdown);
$triggerSection.append($eventTypeDropdown);
$triggerSection.append($triggerIcon);
$wfCollapsiblePanel.append($triggerSection);
// Conditions
let $conditionsTitle = $("<div>",
{
class:"section-title"
}
).text("Conditions:")
let $conditionsContainer = $("<div>",
{
class: "col-sm-12 col-sx-12"
}
).append($conditionsTitle);
let $conditionsIcon = $("<i>", {
class: "fa-solid fa-arrows-split-up-and-left fa-rotate-270"
});
let $conditionsTitle = $("<div>", {
class: "section-title"
}).append($conditionsIcon).append(" Conditions:");
let $conditionsContainer = $("<div>", {
class: "col-sm-12 col-sx-12"
}).append($conditionsTitle);
$conditionsContainer.append(renderConditions(wfIndex, `[${wfIndex}]`, 0, wf.conditions));
$wfCollapsiblePanel.append($conditionsContainer);
let $actionsIcon = $("<i>", {
class: "fa-solid fa-person-running fa-flip-horizontal"
});
let $actionsTitle = $("<div>",
{
class:"section-title"
}
).text("Actions:")
).append($actionsIcon).append(" Actions:")
// Actions with action.field as dropdown
let $actionsContainer = $("<div>",
@@ -233,6 +248,7 @@ function generateWorkflowUI(wf, wfIndex) {
class: "panel col-sm-12 col-sx-12"
});
// Dropdown for action.type
let $actionDropdown= createEditableDropdown(
`[${wfIndex}].actions[${actionIndex}].type`,
@@ -242,10 +258,16 @@ function generateWorkflowUI(wf, wfIndex) {
`wf-${wfIndex}-actionIndex-${actionIndex}-type`
);
$actionEl.append($actionDropdown);
// how big should the background icon be
let numberOfLines = 1
if(action.type == "update_field")
{
numberOfLines = 3
// Dropdown for action.field
let $fieldDropdown = createEditableDropdown(
`[${wfIndex}].actions[${actionIndex}].field`,
@@ -279,7 +301,7 @@ function generateWorkflowUI(wf, wfIndex) {
});
let $actionRemoveButton = $("<div>", {
class: "pointer remove-action ",
class: "pointer remove-action red-hover-text",
actionIndex: actionIndex,
wfIndex: wfIndex
})
@@ -287,7 +309,12 @@ function generateWorkflowUI(wf, wfIndex) {
$actionRemoveButtonWrap.append($actionRemoveButton);
let $actionIcon = $("<i>", {
class: `fa-solid fa-person-running fa-flip-horizontal bckg-icon-${numberOfLines}-line `
});
$actionElWrap.append($actionEl)
$actionElWrap.append($actionIcon)
$actionElWrap.append($actionRemoveButtonWrap)
$actionsContainer.append($actionElWrap);
@@ -301,7 +328,7 @@ function generateWorkflowUI(wf, wfIndex) {
class: "fa-solid fa-plus"
});
let $actionAddButton = $("<div>", {
class : "pointer add-action",
class : "pointer add-action green-hover-text",
lastActionIndex : lastActionIndex,
wfIndex: wfIndex
}).append($actionAddIcon).append("Add Action")
@@ -317,7 +344,7 @@ function generateWorkflowUI(wf, wfIndex) {
});
let $wfRemoveButton = $("<div>", {
class: "pointer remove-wf",
class: "pointer remove-wf red-hover-text",
wfIndex: wfIndex
})
.append($wfRemoveIcon) // Add icon
@@ -381,6 +408,10 @@ function renderConditions(wfIndex, parentIndexPath, conditionGroupsIndex, condit
} else {
// INDIVIDUAL CONDITIONS
let $conditionIcon = $("<i>", {
class: "fa-solid fa-arrows-split-up-and-left fa-rotate-270 bckg-icon-3-line "
});
let $conditionItem = $("<div>",
{
class: "panel col-sm-12 col-sx-12",
@@ -388,6 +419,8 @@ function renderConditions(wfIndex, parentIndexPath, conditionGroupsIndex, condit
wfIndex: wfIndex
});
$conditionItem.append($conditionIcon); // Append background icon
let $conditionItemsWrap = $("<div>",
{
class: "conditionItemsWrap col-sm-11 col-sx-12"
@@ -419,6 +452,7 @@ function renderConditions(wfIndex, parentIndexPath, conditionGroupsIndex, condit
"condition-value-input"
);
$conditionItemsWrap.append($fieldDropdown); // Append field dropdown
$conditionItemsWrap.append($operatorDropdown); // Append operator dropdown
$conditionItemsWrap.append($editableInput); // Append editable input for condition value
@@ -428,7 +462,7 @@ function renderConditions(wfIndex, parentIndexPath, conditionGroupsIndex, condit
class: "fa-solid fa-trash"
});
let $conditionRemoveButton = $("<div>", {
class : "pointer remove-condition ",
class : "pointer remove-condition red-hover-text",
conditionIndex : conditionIndex,
wfIndex: wfIndex,
parentIndexPath: parentIndexPath
@@ -455,7 +489,7 @@ function renderConditions(wfIndex, parentIndexPath, conditionGroupsIndex, condit
class: "fa-solid fa-plus"
});
let $conditionAddButton = $("<div>", {
class: "pointer add-condition col-sx-12",
class: "pointer add-condition green-hover-text col-sx-12",
wfIndex: wfIndex,
parentIndexPath: parentIndexPath
}).append($conditionAddIcon).append("Add Condition");
@@ -467,7 +501,7 @@ function renderConditions(wfIndex, parentIndexPath, conditionGroupsIndex, condit
class: "fa-solid fa-trash"
});
let $conditionGroupRemoveButton = $("<div>", {
class: "pointer remove-condition-group col-sx-12",
class: "pointer remove-condition-group red-hover-text col-sx-12",
lastConditionIndex: lastConditionIndex,
wfIndex: wfIndex,
parentIndexPath: parentIndexPath
@@ -485,7 +519,7 @@ function renderConditions(wfIndex, parentIndexPath, conditionGroupsIndex, condit
class: "fa-solid fa-plus"
});
let $conditionsGroupAddButton = $("<div>", {
class: "pointer add-condition-group col-sx-12",
class: "pointer add-condition-group green-hover-text col-sx-12",
wfIndex: wfIndex,
parentIndexPath: parentIndexPath
}).append($conditionsGroupAddIcon).append("Add Group");