776
edits
Changes
Jump to navigation
Jump to search
Line 775:
Line 775: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Server Manager2 create panel for contrib (view source)
Revision as of 12:17, 9 March 2022
, 12:17, 9 March 2022→The Partials files can be used to keep the structure in mulitple files.
</syntaxhighlight>
</syntaxhighlight>
Note the use of Javascript to present to user with dialogs for confirmation and the WinPopup msg. This was done in the original using extra panels. Although some do not like Javascript, I feel it is here to stay and presents opportunities in terms of interfaces that are best taken advantage of. The main challenge is to work out how to pass the various perl based data to and from the JS routines. Note I use a hidden field for this in one case. And the html request parameters for the others. It can be a challenge to get the mixture of double and single quotes correct!
Note the use of Javascript to present to user with dialogs for confirmation and the WinPopup msg. This was done in the original using extra panels. Although some do not like Javascript, I feel it is here to stay and presents opportunities in terms of interfaces that are best taken advantage of. The main challenge is to work out how to pass the various perl based data to and from the JS routines. Note I use a hidden field for this in one case. And the html request parameters for the others. It can be a challenge to get the mixture of double and single quotes correct!
==== Adding Javascript and CSS to the .ep file ====
You can use the tag helpers "Javascript" and "Stylesheet"to add inline content to a .ep file, here is an example from the DHCPManager to add notification that the scan is being performed. Under the AdminLTE theme, the button is changed to show a "Scanning" text and also a spinner. In the default theme thje text is shown, but the AdminLTE/Bootstrap spinner classes are ignored.
This code fits in between the final html tags and the "%end" command:<syntaxhighlight lang="css">
%= javascript begin
document.getElementById("scanLeases").style.display="none";
function showSpinner(){
document.getElementById("scanLeases").style.display="none";
document.getElementById("load").style.display="inline";
}
%end
%= stylesheet begin
.spinnerButtonOverlay,
.spinnerButtonOverlay:hover,
.spinnerButtonOverlay:any-link ,
.spinnerButtonOverlay:focus ,
.spinnerButtonOverlay:active {
appearance: auto;
user-select: none;
align-items: flex-start;
cursor: default;
box-sizing: border-box;
background-color: #efefef;
color: black;
padding: 1px 6px;
border-width: 2px;
border-style: outset;
border-color: darkgrey;
border-image: initial;
}
%end
</syntaxhighlight>For completion sake here is the replacement button (with AdminLTE spinner) html/mojolicious helper tags:<syntaxhighlight lang="html">
%= button_to $c->l('dhcpd_CONNECTED_IP') => '/dhcpd1', onclick=>"showSpinner()", id=>"scanLeases"
<button class ="btn btn-primary spinnerButtonOverlay" type = "submit" id="load" style="display:true">
Scanning <!--%= $c->l('dhcpd_CONNECTED_IP')-->
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
</button>
</syntaxhighlight>Note the Id codes used to allow the JS to find the controls.
===Translation Strings files===
===Translation Strings files===