HomeGenie Forum
General Category => General Discussion => Topic started by: raptorjr on January 07, 2017, 01:08:55 PM
-
I'm trying to make some changes to HG. One thing I didn't like was the dialog used when adding modules. Annoying that I only could add one and then had to open the dialog again.
So I have changed it to work like the Module cleanup dialog. I can now add several modules to a group with just clicking in the list. But my problem is with the appearance if the list. I can't get it to look like the Module cleanup list.
Since I know where little about HTML I think I must be missing some inheritance or something, since the code for the two dialogs looks the same.
This is the original from html/pages/configure/maintenance/main.html:
<div id="systemsettings_modulesdelete" class="ui-corner-all hg-popup-a" data-role="popup" data-position-to="window" data-transition="pop" data-overlay-theme="b">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
<div data-role="header" class="ui-corner-top">
<h1 data-locale-id="configure_system_deletemodule">Delete Module</h1>
</div>
<div class="ui-content ui-corner-bottom ui-content" style="height:280px;max-height:280px;overflow-y:scroll;overflow-x:hidden;">
<ul id="configure_interfaces_modules_list" data-role="listview"></ul>
</div>
<div data-role="footer" data-tap-toggle="false" style="height:54px">
<p align="center">Tap a module to delete it.</p>
</div>
</div>
And this is my copy in html/pages/configure/groups/listmodules.html
<div id="automation_group_modulechoose" class="ui-corner-all hg-popup-a" data-role="popup" data-position-to="window" data-transition="pop" data-overlay-theme="b">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
<div data-role="header" class="ui-corner-top">
<h1 data-locale-id="configure_module_newmoduleadd">Add New Module</h1>
</div>
<div class="ui-content ui-corner-bottom ui-content" style="height:280px;max-height:280px;overflow-y:scroll;overflow-x:hidden;">
<ul id="automation_group_module_list" data-role="listview"></ul>
</div>
<div data-role="footer" data-tap-toggle="false" style="height:54px">
<p align="center" data-locale-id="configure_automation_group_modulechoose_desc">Tap a module to add it.</p>
</div>
</div>
Added a picture how it looks. And that isn't the look I want. It should look like the Module cleanup dialog in Maintenance.
Any help appreciated.
-
No HTML gurus here? =)
-
i do a rapid try to find but i can confirm = I am not a guru ! :)
-
Thanks for trying =) Have no clue what I have missed. Have looked at both files thousands of times, feels like it, and can't find any difference. But somewhere there must be a difference. But maybe in another file?
It works, but I also want it to look good, like the rest of HG.
-
Take a look at $$.RefreshModulesList function in the _maintenance.js. The all magic of adding list item elements to the module list of Module cleanup dialog
<ul id="configure_interfaces_modules_list" data-role="listview"></ul>
is there.
After rendering your <li> should look like this:
<li data-icon="minus" data-context-domain="HomeAutomation.EnergyMonitor" data-context-address="1">
<a class="ui-btn ui-btn-icon-right ui-icon-minus">1 Energy Monitor</a>
</li>
-
My problem is not adding items to the listview. The problem is that it doesn't look like it should, like the listview in Clean up Modules. It looks like I show in the picture above. Compare with the list in Clean up modules.
This is the code from RefreshModulesList that adds item to that list in _maintenance.js
$('#configure_interfaces_modules_list').append($('<li/>', {
'data-icon': 'minus',
'data-context-domain': mod.Domain,
'data-context-address': mod.Address
})
.append($('<a/>',
{
'text': mod.Address + ' ' + mod.Name
})));
When looking at the HTML code created by this you get, for the first two lines of the listview:
<ul class="ui-listview" id="configure_interfaces_modules_list" data-role="listview">
<li class="ui-li-divider ui-bar-inherit ui-first-child" role="heading" data-role="list-divider">Favourites.Link</li>
<li data-context-address="1" data-context-domain="Favourites.Link" data-icon="minus">
<a class="ui-btn ui-btn-icon-right ui-icon-minus">1 DIY HomeGenie Server</a>
</li>
The code I have in GetModulesListVireItems, _groupmodules.js:
$('#automation_group_module_list').append($('<li/>', {
'data-icon': 'minus',
'data-context-domain': module.Domain,
'data-context-address': module.Address
})
.append($('<a/>',
{
'text': module.Address + ' ' + (module.Name != '' ? module.Name : (module.Description != '' ? module.Description : module.DeviceType))
})));
Produces this kind of listview rows:
<ul class="ui-listview" id="automation_group_module_list" data-role="listview">
<li data-role="list-divider">Favourites.Link</li>
<li data-context-address="1" data-context-domain="Favourites.Link" data-icon="minus">
<a>1 DIY HomeGenie Server</a>
</li>
As you can see, the HTML that my code produces is missing
class="ui-li-divider ui-bar-inherit ui-first-child" role="heading"
in the divider.
And
class="ui-btn ui-btn-icon-right ui-icon-minus"
in the link.
For me as a JS/HTML newbie it should produce the same kind of looking lists, but it doesn't. Therefore I thought that there was a problem with the properties for the whole list. Inheritance or something.
-
Yes, you should add missing classes, because CSS classes define element's visual style.
It seems that call
$('#configure_interfaces_modules_list').listview('refresh');
adds them (it is a function from jQuery Mobile, see docs (https://api.jquerymobile.com/listview/)).
Also for quick and dirty check you can add them in .append() function:
.append($('<a class="ui-btn ui-btn-icon-right ui-icon-minus" />', ...
-
Thank you!!!! That works. Totally missed that line about the refresh. Things work a little different than the programming I'm used to.