From 4600264f395be286770e9c7d05b93ada19b9e365 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20Chili=C5=84ski?= Date: Thu, 17 Jun 2021 14:24:31 +0200 Subject: [PATCH] improvement: refreshed netdev ip forms --- lib/locale/pl_PL/strings.php | 1 + templates/default/netdev/netdevinfobox.html | 3 +- templates/default/netdev/netdevipaddbox.html | 491 ++++++++++-------- templates/default/netdev/netdevipeditbox.html | 343 +++++++----- templates/default/netdev/netdevipinfobox.html | 176 ++++--- templates/default/node/nodeaddbox.html | 2 +- templates/default/node/nodeeditbox.html | 14 +- 7 files changed, 605 insertions(+), 425 deletions(-) diff --git a/lib/locale/pl_PL/strings.php b/lib/locale/pl_PL/strings.php index ba6741a52d..08ff4e1ceb 100644 --- a/lib/locale/pl_PL/strings.php +++ b/lib/locale/pl_PL/strings.php @@ -1392,6 +1392,7 @@ $_LANG['Network Balance Sheet'] = 'Historia operacji finansowych'; $_LANG['Network Devices'] = 'Urządzenia sieciowe'; $_LANG['Network Devices:'] = 'Urządzenia sieciowe:'; +$_LANG['Network Device'] = 'Urządzenie sieciowe'; $_LANG['Assigned Network Device:'] = 'Przypisane urządzenie sieciowe:'; $_LANG['Network Devices ($a):'] = 'Urządzenia sieciowe ($a):'; $_LANG['Network devices list'] = 'Lista urządzeń sieciowych'; diff --git a/templates/default/netdev/netdevinfobox.html b/templates/default/netdev/netdevinfobox.html index b303550eff..3b61481df3 100644 --- a/templates/default/netdev/netdevinfobox.html +++ b/templates/default/netdev/netdevinfobox.html @@ -1,5 +1,6 @@ - +
diff --git a/templates/default/netdev/netdevipaddbox.html b/templates/default/netdev/netdevipaddbox.html index f7ffb81309..ed2133183b 100644 --- a/templates/default/netdev/netdevipaddbox.html +++ b/templates/default/netdev/netdevipaddbox.html @@ -1,226 +1,279 @@ - - - -
- - - - - - - - - -
- - - {trans("Name:")} - - -
- - -
- - - - - - - - - - - - - {if ConfigHelper::checkConfig('phpui.public_ip')} - - - - - - {/if} - - - - - - - - - - - - - -
- - - {trans("Network:")} - - - {if (ConfigHelper::checkConfig('phpui.show_assigned_networks_only')) && ConfigHelper::checkConfig('phpui.public_ip')} - - {/if} -
- - - {trans("IP address:")} - - - »»» -
- {trans("Select first free address")} -
- {trans( - - {trans("Pub. IP address:")} - - - - »»» -
- - - {trans("MAC address:")} - - {mac_address_selection form="ipadd" macs=$nodeipdata.macs} -
- - - {trans("Password:")} - - »»» -
- - - {trans("Options:")} - - + + + + + + + + + + + + + + + + + + + + + + + + +
+ {icon name="node"} + + {trans("Name")} + + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + {if ConfigHelper::checkConfig('phpui.public_ip')} + + + + + + {/if} + + + + + + + + + + + + + + + + + + + + + + + + + +
+ {icon name="network"} + + {trans("Network")} + + +
+ {icon name="routed"} + + {trans("IP address")} + + + {button type="link" onClick="return ipchoosewin({ + ipelem: document.editipaddr['ipadd[ipaddr]'], + ip: document.editipaddr['ipadd[ipaddr]'].value, + netelem: document.editipaddr['ipadd[netid]'], + netid: document.editipaddr['ipadd[netid]'].value, + device: {$netdev.id} + });" tip="Click to select IP from the list" + icon="next"} +
+ {button type="link" id="selectfirstfreeaddress" icon="download" + label="Select first free address"} +
+ {icon name="routed"} + + {trans("Pub. IP address")} + + + + {button type="link" onClick="return ipchoosewin({ + ipelem: document.editipaddr['ipadd[ipaddr_pub]'], + ip: document.editipaddr['ipadd[ipaddr_pub]'].value, + netelem: document.editipaddr['ipadd[pubnetid]'], + netid: document.editipaddr['ipadd[pubnetid]'].value, + privnetid: document.editipaddr['ipadd[netid]'].value, + device: {$netdev.id} + });" tip="Click to select IP from the list" + icon="next"} +
+ {icon name="mac"} + + {trans("MAC address")} + + {mac_address_selection form="ipadd" macs=$nodeipdata.macs} +
+ {icon name="password"} + + {trans("Password")} + + + {button type="link" id="genpasswd" icon="next" + tip="Click to generate random password"} +
+ {icon name="options"} + + {trans("Options")} + + + + + + {if ConfigHelper::checkConfig('phpui.radius')} + + {/if} +
+ {icon name="netdev"} + + {trans("Type")} + + {foreach $_SESSIONTYPES as $idx => $sessiontype} +
+ {/foreach} +
+ {if $nodeipdata.access} + {$icon = "connected"} + {else} + {$icon = "disconnected"} + {/if} + {icon name=$icon id="statusico"} + + {trans("Status")} + + +
+ 		+ + + + + + + + + + + +
+ {icon name="info"} + + {trans("Description")} + + +
+
+
+ {button type="submit" icon="save" label="Submit"} + {button icon="cancel" label="Cancel" href="?m=netdevinfo&id={$netdev.id}"} +
+ + + diff --git a/templates/default/netdev/netdevipeditbox.html b/templates/default/netdev/netdevipeditbox.html index f56c17b551..ab0c74354b 100644 --- a/templates/default/netdev/netdevipeditbox.html +++ b/templates/default/netdev/netdevipeditbox.html @@ -1,45 +1,75 @@ -
+ + + + + + + + + + - + + + + + + - - - - - - -
- + + {icon name="node"} - {trans("Name:")} + + {trans("Name")} - - ({$nodeipdata.id|string_format:"%04d"}) + + + (#{$nodeipdata.id})
- + + + +
+ + + + + -
- + -
+ @@ -48,130 +78,130 @@ - - {if ConfigHelper::checkConfig('phpui.public_ip')} - - - - - + + + + + {/if} -
- + {icon name="network"} - {trans("Network:")} + {trans("Network")} - {foreach $networks as $net} - + {/foreach} - {if (ConfigHelper::checkConfig('phpui.show_assigned_networks_only')) && ConfigHelper::checkConfig('phpui.public_ip')} - - {/if}
- + {icon name="routed"} - {trans("IP address:")} + {trans("IP address")} - - »»» -
- {trans("Select first free address")} + 		+
+ + {button type="link" onClick="return ipchoosewin({ + ipelem: document.editipaddr['ipadd[ipaddr]'], + ip: document.editipaddr['ipadd[ipaddr]'].value, + netelem: document.editipaddr['ipadd[netid]'], + netid: document.editipaddr['ipadd[netid]'].value, + device: {$netdev.id} + });" tip="Click to select IP from the list" + icon="next"} +
+ {button type="link" id="selectfirstfreeaddress" icon="download" + label="Select first free address"}
- - - {trans("Pub. IP address:")} - - - - »»» -
+ {icon name="routed"} + + {trans("Pub. IP address")} + +
+ + + {button type="link" onClick="return ipchoosewin({ + ipelem: document.editipaddr['ipadd[ipaddr_pub]'], + ip: document.editipaddr['ipadd[ipaddr_pub]'].value, + netelem: document.editipaddr['ipadd[pubnetid]'], + netid: document.editipaddr['ipadd[pubnetid]'].value, + privnetid: document.editipaddr['ipadd[netid]'].value, + device: {$netdev.id} + });" tip="Click to select IP from the list" + icon="next"} +
+
- + {icon name="mac"} - {trans("MAC:")} + {trans("MAC")} + {mac_address_selection form="ipadd" macs=$nodeipdata.macs}
- + {icon name="password"} - {trans("Password:")} + {trans("Password")} - - »»» + + {button type="link" id="genpasswd" icon="next" + tip="Click to generate random password"}
- {trans( + {icon name="options"} - {trans("Options:")} + {trans("Options")} {if ConfigHelper::checkConfig('phpui.radius')} {/if} @@ -179,68 +209,82 @@
- + {icon name="netdev"} - {trans("Type:")} + {trans("Type")} {foreach $_SESSIONTYPES as $idx => $sessiontype}
+
{/foreach}
- 		- - - - - - + + - @@ -261,14 +306,42 @@ diff --git a/templates/default/netdev/netdevipinfobox.html b/templates/default/netdev/netdevipinfobox.html index a1dc8743da..648fae7725 100644 --- a/templates/default/netdev/netdevipinfobox.html +++ b/templates/default/netdev/netdevipinfobox.html @@ -12,6 +12,22 @@ white-space: nowrap; } + .cell-flex { + display: flex; + flex-wrap: wrap; + } + + @media screen and (max-width: 500px) { + .cell-flex > div select { + max-width: 185px; + white-space: normal; + } + + .cell-flex > div { + max-width: 165px; + } + } + .mac-address { cursor: pointer; } @@ -23,38 +39,50 @@
+ + + + + + -
- + {icon name="info"} - {trans("Description:")} + {trans("Description")} - +
- + {if $nodeipdata.access} + {$icon = "connected"} + {else} + {$icon = "disconnected"} + {/if} + {icon name=$icon id="statusico"} - {trans("Status:")} + {trans("Status")} - + +
- + {icon name="user"} - {trans("Created:")}
- {trans("Modified:")} + {trans("Created")} +
+ {trans("Modified")} 		- {$nodeipdata.createdby|escape}, {$nodeipdata.creationdateh}
- {if $nodeipdata.moddate}{$nodeipdata.modifiedby|escape}, {$nodeipdata.moddateh}{else}-{/if} + 		+
+ {$nodeipdata.createdby|escape}, {$nodeipdata.creationdateh} +
+ {if $nodeipdata.moddate}{$nodeipdata.modifiedby|escape}, {$nodeipdata.moddateh}{else}-{/if} +
@@ -250,9 +294,10 @@
- {trans("Submit")} - {trans("Cancel")} + + {button type="submit" icon="save" label="Submit"} + {button icon="cancel" label="Cancel" + href="?m=netdevinfo&id={$netdev.id}{if isset($nodeipdata.id)}&ip={$nodeipdata.id}{/if}"}
- + + + + + + - - - - + + - - @@ -313,13 +368,12 @@ $('.mac-address-copy-to-clipboard').on('lms:clipboard:click', function() { return $(this).closest('tr').find('.mac-address').text().trim(); }); - }); - $('#delete-address').click(function() { - confirmDialog($t("Are you sure, you want to delete address '$a' from database?", $(this).prev().val()), this).done(function() { - location.href = $(this).attr('href'); + $('#delete-address').click(function() { + confirmDialog($t("Are you sure, you want to delete address '$a' from database?", $(this).prev().val()), this).done(function() { + location.href = $(this).attr('data-href'); + }); }); - return false; }); diff --git a/templates/default/node/nodeaddbox.html b/templates/default/node/nodeaddbox.html index 8062137707..57bd71ef7f 100644 --- a/templates/default/node/nodeaddbox.html +++ b/templates/default/node/nodeaddbox.html @@ -351,7 +351,7 @@
{/foreach} diff --git a/templates/default/node/nodeeditbox.html b/templates/default/node/nodeeditbox.html index 0c649c847d..7fda8a2c9f 100644 --- a/templates/default/node/nodeeditbox.html +++ b/templates/default/node/nodeeditbox.html @@ -400,7 +400,7 @@
{/foreach} @@ -542,9 +542,9 @@ - @@ -578,7 +578,7 @@ $('#statusico').toggleClass('lms-ui-icon-connected', status).toggleClass('lms-ui-icon-disconnected', !status); }); - $('#genpasswd').click(function(event) { + $('#genpasswd').click(function() { var length = {ConfigHelper::getConfig('phpui.node_password_length', ConfigHelper::getConfig('phpui.nodepassword_length', '16'))}; if (length > 32) { length = 32; @@ -586,13 +586,11 @@ if ($('#passwordcontainer').val().length > 0) { confirmDialog($t("Are you sure, you want to generate new password?"), this).done(function() { $( '#passwordcontainer' ).val(generate_random_string(length, "{ConfigHelper::getConfig('phpui.node_password_allowed_characters', ConfigHelper::getConfig('phpui.nodepassword_allowed_characters', 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'))|replace:'"':'\"'}")); - event.preventDefault(); }); - return false; } else { $( '#passwordcontainer' ).val(generate_random_string(length, "{ConfigHelper::getConfig('phpui.node_password_allowed_characters', ConfigHelper::getConfig('phpui.nodepassword_allowed_characters', 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'))|replace:'"':'\"'}")); - return false; } + return false; }); $('#set_gps').click( function() {
- + + {button type="link" icon="node" class="lms-ui-button-clipboard" data_clipboard_text="{$nodeipdata.id|string_format:"%04d"}"} - {$nodeipdata.name} ({$nodeipdata.id|string_format:"%04d"}) + + {$nodeipdata.name} (#{$nodeipdata.id})
- +
+ + + + + - - -
- +
+ - - @@ -62,7 +90,7 @@ {icon name="routed" class="lms-ui-button-clipboard fa-fw" data_clipboard_text=$nodeipdata.ip} {/if} @@ -125,10 +151,10 @@ {if !disable_active_links || ($nodeipdata.chkmac + $nodeipdata.halfduplex + $nas) != 0} {/if} -
- + {icon name="network"} - {trans("Network:")} + {trans("Network")} - {$nodeipdata.netname} + + + + {$nodeipdata.netname} + +
- {trans("IP address:")} + {trans("IP address")} {$nodeipdata.ip} @@ -75,7 +103,7 @@ {icon name="routed" class="lms-ui-button-clipboard fa-fw" data_clipboard_text=$nodeipdata.ip_pub} - {trans("Pub. IP address:")} + {trans("Pub. IP address")} {$nodeipdata.ip_pub} @@ -89,7 +117,7 @@ {icon name="mac" class="lms-ui-button-clipboard mac-address-copy-to-clipboard fa-fw" data_clipboard_handler="1"} - {trans("MAC address:")} + {trans("MAC address")} - + {icon name="password"} - {trans("Password:")} + {trans("Password")} - {if ConfigHelper::checkConfig('phpui.protect_passwords')} - - {else} + {if !ConfigHelper::checkConfig('phpui.protect_passwords')} {$nodeipdata.passwd} {/if} + {button type="link" icon="clipboard" class="lms-ui-button-clipboard" + data_clipboard_text="{$nodeipdata.passwd|escape}"}
- {trans( + {icon name="option"} - {trans("Options:")} + {trans("Options")} {if $disable_active_links} @@ -162,10 +188,10 @@ {if !$disable_active_links || $nodeipdata.authtype != 0}
- + {icon name="netdev"} - {trans("Type:")} + {trans("Type")} {if $disable_active_links} @@ -185,10 +211,10 @@
+
- +
+ @@ -198,68 +224,97 @@ {if $nodeipdata.info} - + {/if} - -
- + {icon name="description"} - {trans("Description:")} - - {$nodeipdata.info} + {trans("Description")} + +
+ + + + +
+
{$nodeipdata.info|replace:"\n":"
"}
+
+
+ {if $nodeipdata.access} + {$icon = "connected"} + {else} + {$icon = "disconnected"} + {/if} {if $disable_active_links} - + {icon name=$icon} {else} - + + {icon name=$icon} + {/if} - {trans("Status:")} + {trans("Status")} - {if $nodeipdata.access}{trans("connected")}{else}{trans("disconnected")}{/if} + {if $nodeipdata.access} + {trans("connected")} + {else} + {trans("disconnected")} + {/if}
- + {icon name="time"} - {trans("Last online:")} + {trans("Last online")} - {if $nodeipdata.lastonline}{$nodeipdata.lastonlinedate}{else}-{/if} + {if $nodeipdata.lastonline} + {$nodeipdata.lastonlinedate} + {else} + - + {/if}
- + {icon name="user"} - {trans("Created:")}
- {trans("Modified:")} + {trans("Created")} +
+ {trans("Modified")} 		- {$nodeipdata.createdby|escape}, {$nodeipdata.creationdateh}
- {if $nodeipdata.moddate}{$nodeipdata.modifiedby|escape}, {$nodeipdata.moddateh}{else}-{/if} + 		+
+ {$nodeipdata.createdby|escape}, {$nodeipdata.creationdateh} +
+ {if $nodeipdata.moddate}{$nodeipdata.modifiedby|escape}, {$nodeipdata.moddateh}{else}-{/if} +
+
+
- {trans("Edit")} + + {button type="link-button" id="edit-button" icon="edit" label="Edit" + href="?m=netdevedit&id={$netdev.id}&action=editip&ip={$nodeipdata.id}"} - {trans("Delete")} + {button id="delete-address" icon="delete" label="Delete" + data_href="?m=netdevedit&id={$netdev.id}&action=ipdel&ip={$nodeipdata.id}"}
- {button type="submit" id="save-button" icon="save" label="Submit"} - {button id="cancel-button" icon="cancel" label="Cancel" href="?m=nodeinfo&id={$nodeinfo.id}"} + + {button type="submit" icon="save" label="Submit"} + {button icon="cancel" label="Cancel" href="?m=nodeinfo&id={$nodeinfo.id}"}