diff options
| author | Simo Sorce <simo@redhat.com> | 2015-02-22 17:12:13 -0500 |
|---|---|---|
| committer | Patrick Uiterwijk <puiterwijk@redhat.com> | 2015-02-24 16:58:25 +0100 |
| commit | 76f93f4ed448ebdd0766c627eb63d5c11afb1205 (patch) | |
| tree | 1054bd8bf4d084d7ee55dd746027536311670d20 | |
| parent | 48541ed04194c8eaa194ba323b8baf0eb5f074ad (diff) | |
| download | ipsilon-76f93f4ed448ebdd0766c627eb63d5c11afb1205.tar.gz ipsilon-76f93f4ed448ebdd0766c627eb63d5c11afb1205.tar.xz ipsilon-76f93f4ed448ebdd0766c627eb63d5c11afb1205.zip | |
Add dynamic list to plugin_config forms
This little javascript allows us to dyamically add form fields in
the ComplexList and MappingList tables. Makes it much easier to add
elements to these lists.
Signed-off-by: Simo Sorce <simo@redhat.com>
Reviewed-by: Patrick Uiterwijk <puiterwijk@redhat.com>
| -rw-r--r-- | templates/admin/plugin_config.html | 42 | ||||
| -rw-r--r-- | templates/master-admin.html | 2 |
2 files changed, 40 insertions, 4 deletions
diff --git a/templates/admin/plugin_config.html b/templates/admin/plugin_config.html index 18792a2..79f6319 100644 --- a/templates/admin/plugin_config.html +++ b/templates/admin/plugin_config.html @@ -1,4 +1,30 @@ {% extends "master-admin.html" %} +{% block scripts %} + <script> + $( document ).on("click", ".add-field", + function() { + var buttonRow = $(this).parents(".add-row") + var ourTable = $(this).parents(".extensible-table") + var lastRow = $(ourTable).find(".list-field:last") + var newRow = $(lastRow).clone() + var lastIndex = parseInt(newRow.find("td:first").text()) + newRow.find("td:first").text(lastIndex + 1) + var inputFields = newRow.find("input") + for (i = 0; i < inputFields.length; i++) { + var separator = (lastIndex-1).toString()+"-" + var nArr = $(inputFields[i]).attr("name").split(separator) + var newidx = lastIndex.toString()+"-" + if (nArr.length === 2) { + $(inputFields[i]).attr("name", nArr[0]+newidx+nArr[1]) + } + $(inputFields[i]).attr("value", "") + } + $(newRow).appendTo(ourTable) + $(buttonRow).appendTo(ourTable) + } + ); + </script> +{% endblock %} {% block main %} {% if user.is_admin %} @@ -69,11 +95,11 @@ {% endif -%} > {% elif v.__class__.__name__ == 'ComplexList' -%} - <table class="table table-striped"> + <table class="table table-striped extensible-table"> <tr><th>#</th><th>Name</th><th>Delete</th></tr> {% for line in value -%} {%- set basename = "%s %d-"|format(v.name, loop.index0) -%} - <tr> + <tr class="list-field"> <td>{{loop.index}}</td> <td> <input type="text" name="{{basename}}name" @@ -90,13 +116,17 @@ </td> </tr> {% endfor -%} + <tr class="add-row"> + <td><button class="btn add-field" type="button"> + </button></td> + <td colspan=3 /> + </tr> </table> {% elif v.__class__.__name__ == 'MappingList' -%} - <table class="table table-striped"> + <table class="table table-striped extensible-table"> <tr><th>#</th><th>From</th><th>To</th><th>Delete</th></tr> {% for line in value -%} {%- set basename = "%s %d-"|format(v.name, loop.index0) -%} - <tr> + <tr class="list-field"> <td>{{loop.index}}</td> <td> <input type="text" name="{{basename}}from" @@ -122,6 +152,10 @@ </td> </tr> {% endfor -%} + <tr class="add-row"> + <td><button class="btn add-field" type="button"> + </button></td> + <td colspan=3 /> + </tr> </table> {% else -%} {{ v.__class__.__name__ }} diff --git a/templates/master-admin.html b/templates/master-admin.html index c058360..e838111 100644 --- a/templates/master-admin.html +++ b/templates/master-admin.html @@ -19,6 +19,8 @@ $( document ).tooltip(); </script> {% endif %} + {% block scripts %} + {% endblock %} </head> <body> <nav class="navbar navbar-default navbar-pf" role="navigation"> |