more G-Labs products

Author Topic: Need HTML help  (Read 895 times)

January 07, 2017, 01:08:55 PM
Read 895 times

raptorjr

  • ***
  • Information
  • Full Member
  • Posts: 78
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:
Code: [Select]
       <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
Code: [Select]
    <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.

January 09, 2017, 05:27:17 PM
Reply #1

raptorjr

  • ***
  • Information
  • Full Member
  • Posts: 78
No HTML gurus here? =)

January 10, 2017, 09:08:25 PM
Reply #2

nolio

  • *****
  • Information
  • Global Moderator
  • Posts: 544
i do a rapid try to find but i can confirm = I am not a guru ! :)

January 10, 2017, 11:31:01 PM
Reply #3

raptorjr

  • ***
  • Information
  • Full Member
  • Posts: 78
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.

January 26, 2017, 10:37:02 PM
Reply #4

Bounz

  • ***
  • Information
  • Full Member
  • Posts: 94
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
Code: [Select]
<ul id="configure_interfaces_modules_list" data-role="listview"></ul>is there.

After rendering your <li> should look like this:
Code: [Select]
<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>
« Last Edit: January 26, 2017, 10:39:01 PM by Bounz »

January 26, 2017, 11:00:22 PM
Reply #5

raptorjr

  • ***
  • Information
  • Full Member
  • Posts: 78
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

Code: [Select]
           
$('#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:

Quote
<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:

Code: [Select]
$('#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:

Quote
<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.


January 27, 2017, 09:12:15 PM
Reply #6

Bounz

  • ***
  • Information
  • Full Member
  • Posts: 94
Yes, you should add missing classes, because CSS classes define element's visual style.
It seems that call
Code: [Select]
$('#configure_interfaces_modules_list').listview('refresh');adds them (it is a function from jQuery Mobile, see docs).

Also for quick and dirty check you can add them in .append() function:
Code: [Select]
.append($('<a class="ui-btn ui-btn-icon-right ui-icon-minus" />', ...

January 28, 2017, 11:19:09 AM
Reply #7

raptorjr

  • ***
  • Information
  • Full Member
  • Posts: 78
Thank you!!!! That works. Totally missed that line about the refresh. Things work a little different than the programming I'm used to.