Created a UI for editting a media's metadata. Had to add a new macro to

wtforms.html in the process.

3 files changed, 131 insertions, 1 deletions

diff --git a/mediagoblin/templates/mediagoblin/edit/metadata.html b/mediagoblin/templates/mediagoblin/edit/metadata.html
index 3f97555e..cbf74106 100644
--- a/mediagoblin/templates/mediagoblin/edit/metadata.html
+++ b/mediagoblin/templates/mediagoblin/edit/metadata.html
@@ -17,7 +17,113 @@
 #}
 {%- extends "mediagoblin/base.html" %}
 {% import "/mediagoblin/utils/wtforms.html" as wtforms_util %}
+{% block mediagoblin_head %}
+  <script>
+    function add_new_row(table_id, row_number, input_prefix) {
+        new_row = $('<tr>').append(
+                      $('<td>').attr(
+                      'class','form_field_input').append(
+                          $('<input>').attr('name',
+                          input_prefix + row_number + "-identifier").attr('id',
+                          input_prefix + row_number + "-identifier")
+                      )
+                  ).append(
+                      $('<td>').attr(
+                      'class','form_field_input').append(
+                          $('<input>').attr('name',
+                          input_prefix + row_number + "-value").attr('id',
+                          input_prefix + row_number + "-value")
+                      )
+                  );
+        $(table_id).append(new_row);
+    }
+    function clear_empty_rows(list_id) {
+        $('table'+list_id+' tr').each(function(row){
+            id_input = $(this).find('td').find('input');
+            value_input = $(this).find('td').next().find('input');
+            if ((value_input.attr('value') == "") && 
+                    (id_input.attr('value') == "")) {
+                $(this).remove();
+            }
+        })
+    }
 
+    $(document).ready(function(){
+        var context_lines = {{ form.context | length }};
+        var metadata_lines = {{ form.media_metadata | length }};
+        $("#add_new_metadata_row").click(function(){
+            add_new_row("#metadata_list", 
+                        metadata_lines,
+                        'media_metadata-');
+            metadata_lines += 1;
+        })
+        $("#add_new_context_row").click(function(){
+            add_new_row("#context_list", 
+                        context_lines,
+                        'context-');
+            context_lines += 1;
+        })
+        $("#clear_empty_rows").click(function(){
+            clear_empty_rows("#context_list");
+            clear_empty_rows("#metadata_list");
+        })
+    })
+  </script>
+{% endblock %}
 {% block mediagoblin_content %}
-  {{ wtforms_util.render_divs(form) }}
+  <h2>{% trans media_name=media.title -%}
+    Metadata for "{{ media_name }}"{% endtrans %}</h2>
+  <form action="" method="POST" id="metadata_form">
+<!-- This table holds all the information about the metadata's context.
+     visit http:/wwww.json-ld.org for more information. -->
+  <h3>{% trans %}Context{% endtrans %}</h3>
+  <table class="metadata_editor" id="context_list">
+    <tr>
+      <td><a class="strong highlight">
+        {% trans %}Identifier{% endtrans %}</a></td>
+      <td><a class="strong highlight">{% trans %}Value{% endtrans %}</a></td>
+    </tr>
+  {% for miniform in form.context -%}
+    {{ wtforms_util.render_table_row(miniform) }}
+  {% endfor -%}
+  </table>
+
+  <table class="metadata_editor" id="buttons_top">
+    <tr>
+      <td><input type=button value="{% trans %}Add new Row{% endtrans %}"
+        class="button_action" id="add_new_context_row" /></td>
+      <td></td>
+    </tr>
+  </table>
+
+<!-- This table holds all the information about the media entry's metadata -->
+  <h3>{% trans %}Data{% endtrans %}</h3>
+  <table class="metadata_editor" id="metadata_list" >
+    <tr>
+      <td><a class="strong highlight">
+        {% trans %}Identifier{% endtrans %}</a></td>
+      <td><a class="strong highlight">{% trans %}Value{% endtrans %}</a></td>
+    </tr>
+  {% for miniform in form.media_metadata -%}
+    {{ wtforms_util.render_table_row(miniform) }}
+  {% endfor -%}
+  </table>
+
+<!-- These are the buttons you use to control the form -->
+  <table class="metadata_editor" id="buttons_bottom">
+    <tr>
+      <td><input type=button value="{% trans %}Add new Row{% endtrans %}"
+        class="button_action" id="add_new_metadata_row" />
+      </td>
+      <td><input type=submit value="{% trans %}Update Metadata{% endtrans %}" 
+        class="button_action_highlight" /></td>
+    </tr>
+    <tr>
+      <td><input type=button value="{% trans %}Clear empty Rows{% endtrans %}"
+        class="button_action" id="clear_empty_rows" /></td>
+    </tr>
+  </table>
+  {{ csrf_token }}
+  </form>
+  
 {% endblock mediagoblin_content %}
diff --git a/mediagoblin/templates/mediagoblin/utils/metadata_table.html b/mediagoblin/templates/mediagoblin/utils/metadata_table.html
index 2eb57af3..0c67264a 100644
--- a/mediagoblin/templates/mediagoblin/utils/metadata_table.html
+++ b/mediagoblin/templates/mediagoblin/utils/metadata_table.html
@@ -33,4 +33,10 @@
         {%- endfor %}
       </table>
   {% endif %}
+  {% if request.user and request.user.has_privilege('admin') %}
+      <a href="{{ request.urlgen('mediagoblin.edit.metadata',
+                    user=media_entry.get_uploader.username,
+                    media_id=media_entry.id) }}">
+        {% trans %}Edit Metadata{% endtrans %}</a>
+  {% endif %}
 {%- endmacro %}
diff --git a/mediagoblin/templates/mediagoblin/utils/wtforms.html b/mediagoblin/templates/mediagoblin/utils/wtforms.html
index e079274e..e861b674 100644
--- a/mediagoblin/templates/mediagoblin/utils/wtforms.html
+++ b/mediagoblin/templates/mediagoblin/utils/wtforms.html
@@ -87,6 +87,24 @@
   {% endfor %}
 {%- endmacro %}
 
+{% macro render_table_row(form) %}
+  <tr>
+  {%- for field in form %}
+    <td class="form_field_input">
+      {{field}}
+      {%- if field.errors -%}
+        <br />
+        <ul class="errors">
+          {% for error in field.errors %}
+            <li>{{error}}</li>
+          {%- endfor %}
+        </ul>
+      {%- endif -%}
+    </td>
+  {%- endfor %}
+  </tr>
+{%- endmacro %}
+
 {# Render a boolean field #}
 {% macro render_bool(field) %}
   <div class="boolean">