');
+
+ var dataContent = `
+
+ Name
+
+
+
+ Logical Port
+
+
+
+ VLAN ID
+
+
+
Logical Port - ${data.logical_port.name}
+
+
+ Name
+
+
+
+ Channel
+
+
+
+ Trunk
+
+
+
+ Description
+
+
+
Physical Ports
+
+ `;
+
+ data.physical_ports.forEach(function(physical_port, index){
+ dataContent += `
+
Physical Port - ${physical_port.display_name}
+
+
+ Name
+
+
+
+ Device
+
+
+
+ Logical Port
+
+
+
+ Description
+
+ `;
+ })
+ element.append(dataContent);
+
+ this.Modal("no_button_lg", title, element);
+ }
+},
+ $ctl.application.Modal
+);
+
$ctl.application.Devicectl.ModalVirtualPort = $tc.extend(
"ModalVirtualPort",
{
@@ -1453,6 +1524,7 @@ $ctl.application.Devicectl.ModalVirtualPort = $tc.extend(
var form = this.form = new twentyc.rest.Form(
$ctl.template("form_virtual_port")
);
+ var LogicalPortsList = [];
var logical_port_select = this.logical_port_select = new twentyc.rest.Select(
form.element.find('select[name="logical_port"]')
@@ -1465,14 +1537,141 @@ $ctl.application.Devicectl.ModalVirtualPort = $tc.extend(
logical_port_select.load().then(() => {
if (virtual_port) { logical_port_select.element.val(virtual_port.logical_port) }
});
+
+ console.log(virtual_port)
+
+ $.ajax({
+ url: `/api/facility/digital_reality/${fullctl.devicectl.facility_slug()}/logical_ports/`,
+ type: 'GET',
+ success: function(response) {
+ logical_ports_data = response.data
+ response.data.forEach(function(data) {
+ LogicalPortsList.push({
+ logical_ports_name: data.display_name
+ });
+ });
+ },
+ error: function(xhr, status, error) {
+ console.error(xhr.responseText);
+ },
+ async: false
+ });
+ // channel
+ var logical_port_channel = form.element.find('input[name="logical_port_channel"]');
+ if (virtual_port) {
+ logical_port_channel.val(virtual_port.logical_port.channel)
+ }
+
+ // trunk
+ var logical_port_trunk = form.element.find('input[name="logical_port_trunk"]')
+ if (virtual_port) {
+ logical_port_trunk.val(virtual_port.logical_port.trunk)
+ }
+
+ // description
+ var logical_port_description = form.element.find('input[name="logical_port_description"]');
+ if (virtual_port) {
+ logical_port_description.val(virtual_port.logical_port.description)
+ }
this.virtual_port = virtual_port;
+ physical_ports = form.element.find('.physical-ports-container');
+
+ // Creation of a Port
+ if (!virtual_port) {
+ var phyical_data_content = `
+
+
+
+
+ Logical Port
+
+
+
+
+
+
+
+ `
+ physical_ports.append(phyical_data_content)
+ var logical_ports_select = form.element.find('#physical_port-logical_port');
+ logical_ports_select.append($('
').attr('value', '').text('Create matching logical port'));
+
+ $.each(LogicalPortsList, function(index, logical_port) {
+ var option = $(' ').attr('value', logical_port.logical_ports_name).text(logical_port.logical_ports_name);
+ logical_ports_select.append(option);
+ });
+ }
+
if (virtual_port) {
- title = "Edit " + virtual_port.display_name;
+ title = "Edit Virtual Port" + virtual_port.display_name;
form.method = "PUT"
form.form_action = virtual_port.id;
form.fill(virtual_port);
+ virtual_port.physical_ports.forEach(function(port, index){
+ var physicaldataContent = `
+
+
+ Physical Port Name
+
+
+
+ Logical Port
+
+
+
+
+
+
').attr('value', '').text(`${port.logical_port_name}`));
+
+ $.each(LogicalPortsList, function(index, logical_port) {
+ if (port.logical_port_name !== logical_port.logical_ports_name) {
+ var option = $(' ').attr('value', logical_port.logical_ports_name).text(logical_port.logical_ports_name);
+ logical_ports_select.append(option);
+ }
+ })
+ });
form.element.find('input[type="text"],select,input[type="checkbox"]').each(function () {
if (!grainy.check(virtual_port.grainy + "." + $(this).attr("name"), "u")) {
@@ -1483,6 +1682,42 @@ $ctl.application.Devicectl.ModalVirtualPort = $tc.extend(
$(this.form).on("api-write:before", (ev, e, payload) => {
payload["id"] = virtual_port.id;
+ payload["physical_ports"] = []
+ payload.logical_port_data = {
+ channel: payload.logical_port_channel,
+ description: payload.logical_port_description,
+ name: payload.logical_port_name,
+ trunk: payload.logical_port_trunk
+ }
+ delete payload.logical_port_channel;
+ delete payload.logical_port_description;
+ delete payload.logical_port_name;
+ delete payload.logical_port_trunk;
+
+ var count = 0;
+ for (var key in payload) {
+ // Check if the key starts with "physical"
+ if (key.startsWith("physical")) {
+ // Increment the count
+ count++;
+ }
+ }
+ iterate_times = count / 4
+
+ for (var i = 0; i < iterate_times; i++) {
+ payload.physical_ports.push({
+ name: payload[`physical_port_name_${i}`],
+ device_name: payload[`physical_port_device_name_${i}`],
+ logical_port: payload[`physical_logical_port_${i}`],
+ description: payload[`physical_port_description_${i}`],
+ })
+
+ delete payload[`physical_port_name_${i}`];
+ delete payload[`physical_port_device_name_${i}`];
+ delete payload[`physical_logical_port_${i}`];
+ delete payload[`physical_port_description_${i}`];
+ }
+
});
}
diff --git a/src/django_devicectl/static/devicectl/v2/ports/ports.js b/src/django_devicectl/static/devicectl/v2/ports/ports.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/django_devicectl/templates/devicectl/v2/base.html b/src/django_devicectl/templates/devicectl/v2/base.html
index 4308cfc0..c50280a8 100644
--- a/src/django_devicectl/templates/devicectl/v2/base.html
+++ b/src/django_devicectl/templates/devicectl/v2/base.html
@@ -165,9 +165,6 @@
{% include "devicectl/v2/tool/device/main.html" %}
- {% include "devicectl/v2/tool/virtual_ports/main.html" %}
- {% include "devicectl/v2/tool/logical_ports/main.html" %}
- {% include "devicectl/v2/tool/physical_ports/main.html" %}
diff --git a/src/django_devicectl/templates/devicectl/v2/tool/device/main.html b/src/django_devicectl/templates/devicectl/v2/tool/device/main.html
index d0dc66ae..fef66f42 100644
--- a/src/django_devicectl/templates/devicectl/v2/tool/device/main.html
+++ b/src/django_devicectl/templates/devicectl/v2/tool/device/main.html
@@ -24,6 +24,9 @@