diff --git a/docs/CUSTOM_PROPERTIES.md b/docs/CUSTOM_PROPERTIES.md new file mode 100755 index 00000000..18c7b3e0 --- /dev/null +++ b/docs/CUSTOM_PROPERTIES.md @@ -0,0 +1,85 @@ +# Custom Properties for Network Devices + +![Custom Properties](/docs/img/CUSTOM_PROPERTIES/Device_Custom_Properties.png) + +## Overview + +This functionality allows you to define **custom properties** for network devices, which can store and display additional information on the device listing page. By marking properties as visible, you can enhance the user interface with quick actions, notes, or external links. + +### Key Features: +- **Customizable Properties**: Define specific properties for each device. +- **Visibility Control**: Choose which properties are displayed on the device listing page. +- **Interactive Elements**: Include actions like links, modals, and device management directly in the interface. + +--- + +## Defining Custom Properties + +Custom properties are structured as a list of objects, where each property includes the following fields: + +| Field | Description | +|--------------------|-----------------------------------------------------------------------------| +| `CUSTPROP_icon` | The icon (Base64-encoded HTML) displayed for the property. | +| `CUSTPROP_type` | The action type (e.g., `show_notes`, `link`, `delete_dev`). | +| `CUSTPROP_name` | A short name or title for the property. | +| `CUSTPROP_args` | Arguments for the action (e.g., URL or modal text). | +| `CUSTPROP_notes` | Additional notes or details displayed when applicable. | +| `CUSTPROP_show` | A boolean to control visibility (`true` to show on the listing page). | + +--- + +## Available Action Types + +- **Show Notes**: Displays a modal with a title and additional notes. + - **Example**: Show firmware details or custom messages. +- **Link**: Redirects to a specified URL in the current browser tab. (**Arguments** Needs to contain the full URL.) +- **Link (New Tab)**: Opens a specified URL in a new browser tab. (**Arguments** Needs to contain the full URL.) +- **Delete Device**: Deletes the device using its MAC address. +- **Run Plugin**: Placeholder for executing custom plugins (not implemented yet). + +--- + +## Usage on the Device Listing Page + +![Custom Properties](/docs/img/CUSTOM_PROPERTIES/Device_Custom_Properties_vid.gif) + +Visible properties (`CUSTPROP_show: true`) are displayed as interactive icons in the device listing. Each icon can perform one of the following actions based on the `CUSTPROP_type`: + +1. **Modals (e.g., Show Notes)**: + - Displays detailed information in a popup modal. + - Example: Firmware version details. + +2. **Links**: + - Redirect to an external or internal URL. + - Example: Open a device's documentation or external site. + +3. **Device Actions**: + - Manage devices with actions like delete. + - Example: Quickly remove a device from the network. + +4. **Plugins**: + - Future placeholder for running custom plugin scripts. + - **Note**: Not implemented yet. + +--- + +## Example Scenarios + +1. **Device Documentation Link**: + - Add a custom property with `CUSTPROP_type` set to `link` or `link_new_tab` to allow quick navigation to the documentation. + +2. **Firmware Details**: + - Use `CUSTPROP_type: show_notes` to display firmware versions or upgrade instructions in a modal. + +3. **Device Removal**: + - Enable device removal functionality using `CUSTPROP_type: delete_dev`. + +--- + +## Notes + +- **Plugin Functionality**: The `run_plugin` action type is currently not implemented and will show an alert if used. +- **Custom Icons (Experimental 🧪)**: Use Base64-encoded HTML to provide custom icons for each property. You can add your icons in Setttings via the `CUSTPROP_icon` settings +- **Visibility Control**: Only properties with `CUSTPROP_show: true` will appear on the listing page. + +This feature provides a flexible way to enhance device management and display with interactive elements tailored to your needs. diff --git a/docs/img/CUSTOM_PROPERTIES/Device_Custom_Properties.png b/docs/img/CUSTOM_PROPERTIES/Device_Custom_Properties.png new file mode 100755 index 00000000..2d1b95c0 Binary files /dev/null and b/docs/img/CUSTOM_PROPERTIES/Device_Custom_Properties.png differ diff --git a/docs/img/CUSTOM_PROPERTIES/Device_Custom_Properties_vid.gif b/docs/img/CUSTOM_PROPERTIES/Device_Custom_Properties_vid.gif new file mode 100755 index 00000000..b21eeafa Binary files /dev/null and b/docs/img/CUSTOM_PROPERTIES/Device_Custom_Properties_vid.gif differ diff --git a/front/css/app.css b/front/css/app.css index 94b7d83a..b8a604f4 100755 --- a/front/css/app.css +++ b/front/css/app.css @@ -1382,9 +1382,36 @@ input[readonly] { } /* ----------------------------------------------------------------- */ -/* MODAL popups */ +/* Device details */ /* ----------------------------------------------------------------- */ +.dataTables_length label .form-control, .dataTables_filter label .form-control +{ + float: none; +} + + +.form-inline .input-group +{ + width: 100%; +} + +.input-group .actionIcon +{ + height: 2.4em; +} + +.input-group .actionIcon:hover +{ + backdrop-filter: brightness(50%); + background-color: rgba(0, 0, 0, 0.2); /* darkens the background */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + transition: box-shadow 0.1s ease-in-out, background-color 0.1s ease-in-out; +} + +/* ----------------------------------------------------------------- */ +/* MODAL popups */ +/* ----------------------------------------------------------------- */ #modal-input-textarea { width: 100%; diff --git a/front/deviceDetailsEdit.php b/front/deviceDetailsEdit.php index 4814a5fc..5ac7a10e 100755 --- a/front/deviceDetailsEdit.php +++ b/front/deviceDetailsEdit.php @@ -14,26 +14,21 @@
-
@@ -83,32 +78,55 @@ DevDetail_MainInfo_Title: { data: ["devMac", "devLastIP", "devName", "devOwner", "devType", "devVendor", "devGroup", "devIcon", "devLocation", "devComments"], docs: "https://github.com/jokob-sk/NetAlertX/blob/main/docs/DEVICE_MANAGEMENT.md", - iconClass: "fa fa-pencil" + iconClass: "fa fa-pencil", + inputGroupClasses: "field-group col-lg-4 col-sm-6 col-xs-12", + labelClasses: "col-sm-4 col-xs-12 control-label", + inputClasses: "col-sm-8 col-xs-12 input-group" }, // Group for session information DevDetail_SessionInfo_Title: { data: ["devStatus", "devLastConnection", "devFirstConnection"], docs: "https://github.com/jokob-sk/NetAlertX/blob/main/docs/SESSION_INFO.md", - iconClass: "fa fa-calendar" + iconClass: "fa fa-calendar", + inputGroupClasses: "field-group col-lg-4 col-sm-6 col-xs-12", + labelClasses: "col-sm-4 col-xs-12 control-label", + inputClasses: "col-sm-8 col-xs-12 input-group" }, // Group for event and alert settings DevDetail_EveandAl_Title: { data: ["devAlertEvents", "devAlertDown", "devSkipRepeated"], docs: "https://github.com/jokob-sk/NetAlertX/blob/main/docs/NOTIFICATIONS.md", - iconClass: "fa fa-bell" + iconClass: "fa fa-bell", + inputGroupClasses: "field-group col-lg-4 col-sm-6 col-xs-12", + labelClasses: "col-sm-4 col-xs-12 control-label", + inputClasses: "col-sm-8 col-xs-12 input-group" }, // Group for network details DevDetail_MainInfo_Network_Title: { data: ["devParentMAC", "devParentPort", "devSSID", "devSite"], docs: "https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md", - iconClass: "fa fa-network-wired" + iconClass: "fa fa-network-wired", + inputGroupClasses: "field-group col-lg-4 col-sm-6 col-xs-12", + labelClasses: "col-sm-4 col-xs-12 control-label", + inputClasses: "col-sm-8 col-xs-12 input-group" }, // Group for other fields like static IP, archived status, etc. DevDetail_DisplayFields_Title: { data: ["devStaticIP", "devIsNew", "devFavorite", "devIsArchived"], docs: "https://github.com/jokob-sk/NetAlertX/blob/main/docs/DEVICE_DISPLAY_SETTINGS.md", - iconClass: "fa fa-list-check" - + iconClass: "fa fa-list-check", + inputGroupClasses: "field-group col-lg-4 col-sm-6 col-xs-12", + labelClasses: "col-sm-4 col-xs-12 control-label", + inputClasses: "col-sm-8 col-xs-12 input-group" + }, + // Group for Custom properties. + DevDetail_CustomProperties_Title: { + data: ["devCustomProps"], + docs: "https://github.com/jokob-sk/NetAlertX/blob/main/docs/CUSTOM_PROPERTIES.md", + iconClass: "fa fa-list", + inputGroupClasses: "field-group col-lg-12 col-sm-12 col-xs-12", + labelClasses: "col-sm-12 col-xs-12 control-label", + inputClasses: "col-sm-12 col-xs-12 input-group" } }; @@ -126,7 +144,7 @@ // Loop over each field group to generate sections for each category Object.entries(fieldGroups).forEach(([groupName, obj]) => { - const groupDiv = $('
').addClass('field-group col-lg-4 col-sm-6 col-xs-12'); // Create a div for each group with responsive Bootstrap classes + const groupDiv = $('
').addClass(obj.inputGroupClasses); // Create a div for each group with responsive Bootstrap classes // Add group title and documentation link groupDiv.append(`
${getString(groupName)} @@ -137,7 +155,7 @@
- `); + `); // Filter relevant settings for the current group const groupSettings = settings.filter(set => obj.data.includes(set.setKey.replace('NEWDEV_', ''))); @@ -193,15 +211,15 @@ // Generate the input field HTML const inputFormHtml = `
-