{% import "edit_macros.html" as edit_macros %} {% extends "base.html" %} {% block body %} {% block edit_form_prefix %} <div class="ui segment"> <h1 class="ui header">Edit File Entity</h1> <form class="ui form" id="edit_file_form" method="POST" action="{% if editgroup %}/editgroup/{{ editgroup.editgroup_id }}{% endif %}/file/{{ existing_ident }}/edit"> {% endblock %} {{ form.hidden_tag() }} <h3 class="ui dividing header">Editgroup Metadata</h3> {{ edit_macros.editgroup_dropdown(form, editgroup, potential_editgroups) }} <br> <h3 class="ui dividing header">File Metadata</h3> {{ edit_macros.form_field_inline(form.size, "required") }} {{ edit_macros.form_field_inline(form.mimetype) }} {{ edit_macros.form_field_inline(form.md5) }} {{ edit_macros.form_field_inline(form.sha1, "required") }} {{ edit_macros.form_field_inline(form.sha256) }} <br> <h3 class="ui dividing header">Locations (URLs)</h3> <i>Public web (no login/paywall) locations of this exact file (should match by hashes).</i> <br><br> <div class="list-group" id="url_list" name="url_list"> {% for cform in form.urls %} <div class="list-group-item ui grid" style="padding-right: 1em;"> {{ cform.hidden_tag() }} <div class="one wide column middle aligned center aligned" style="padding-bottom: 0px; padding-right: 0px; padding-left: 0px;"> </div> <div class="three wide column" style="padding-bottom: 0px; padding-left: 0px;"> <div class="field {% if cform.rel.errors %}error{% endif %}"> {{ cform.rel() }} </div> </div> <div class="eleven wide column" style="padding-bottom: 0px;"> <div class="field {% if cform.url.errors %}error{% endif %}"> {{ cform.url() }} {{ edit_macros.form_field_errors(cform.url) }} </div> </div> <div class="one wide column right aligned" style="padding-bottom: 0px; padding-left: 0rem;"> <button type="button" class="ui icon red button delete-url-button"><i class="trash icon"></i></button> </div> </div> {% endfor %} </div> <br> <button type="button" id="add-url-button" class="ui right floated icon green button" style="margin-right: 0.3rem;"> <i class="plus icon"></i> </button> <br> <h3 class="ui dividing header">Releases</h3> <i>Usually one, but sometimes multiple Release entities (by FCID) that this file is a fulltext copy of.</i> <br><br> <div class="list-group" id="release_id_list" name="release_id_list"> {% for rfield in form.release_ids %} <div class="list-group-item ui grid" style="padding-right: 1em;"> <div class="one wide column middle aligned center aligned" style="padding-bottom: 0px; padding-right: 0px; padding-left: 0px;"> </div> <div class="fourteen wide column" style="padding-bottom: 0px;"> <div class="field {% if rfield.errors %}error{% endif %}"> {{ rfield() }} {{ edit_macros.form_field_errors(rfield) }} </div> </div> <div class="one wide column right aligned" style="padding-bottom: 0px; padding-left: 0rem;"> <button type="button" class="ui icon red button delete-release_id-button"><i class="trash icon"></i></button> </div> </div> {% endfor %} </div> <br> <button type="button" id="add-release_id-button" class="ui right floated icon green button" style="margin-right: 0.3rem;"> <i class="plus icon"></i> </button> <br> <h3 class="ui dividing header">Submit</h3> {{ edit_macros.form_field_basic(form.edit_description) }} This description will be attached to the individual edit, not to the editgroup as a whole. {% block edit_form_suffix %} <br><br> <input class="ui primary submit button" type="submit" value="Update File!"> <p> <i>Edit will be part of the current editgroup, which needs to be submited and approved before the change is included in the catalog.</i> </form> </div> {% endblock %} {% endblock %} {% block postscript %} <script> <!-- Form code --> $(document).ready(function() { $('.ui.dropdown') .dropdown(); var fixup_url_numbering = function(group_item) { items = Array.from(group_item.querySelectorAll(".list-group-item")) for (var i = 0; i < items.length; i++) { var item_el = items[i]; input_el = item_el.querySelectorAll("input")[0]; select_el = item_el.querySelectorAll("select")[0]; //console.log(input_el.id); //console.log(select_el.id); input_el.id = "urls-" + i + "-url"; input_el.name = input_el.id; select_el.id = "urls-" + i + "-rel"; select_el.name = select_el.id; //console.log(input_el.id); //console.log(select_el.id); }; console.log("re-named url rows up to i=" + i); }; var url_list = document.getElementById('url_list'); fixup_url_numbering(url_list); var url_delete_handler = function(ev) { row = ev.target.parentNode.parentNode; // I don't understand why this hack is needed; maybe because of the sortable stuff? if(!row.classList.contains("list-group-item")) { row = row.parentNode; } // console.log(row); console.assert(row.classList.contains("list-group-item")); row.parentNode.removeChild(row); fixup_url_numbering(url_list); }; var attach_url_delete_handler = function(topthing) { Array.from(topthing.querySelectorAll(".delete-url-button")).forEach((el) => { el.addEventListener("click", url_delete_handler); }); }; attach_url_delete_handler(document); // XXX: really need some way to not duplicate this code from above... var url_template = ` <div class="list-group-item ui grid" style="padding-right: 1em;"> <div class="one wide column middle aligned center aligned" style="padding-bottom: 0px; padding-right: 0px; padding-left: 0px;"> </div> <div class="three wide column" style="padding-bottom: 0px; padding-left: 0px;"> <select id="urls-X-rel" name="urls-X-rel"><option selected value="web">Public Web</option><option value="webarchive">Web Archive</option><option value="repository">Repository</option><option value="social">Academic Social Network</option><option value="publisher">Publisher</option><option value="dweb">Decentralized Web</option></select> </div> <div class="eleven wide column" style="padding-bottom: 0px;"> <input id="urls-X-url" name="urls-X-url" type="text" value=""> </div> <div class="one wide column right aligned" style="padding-bottom: 0px; padding-left: 0rem;"> <button type="button" class="ui icon red button delete-url-button"><i class="trash icon"></i></button> </div> </div> `; var add_url_button = document.getElementById("add-url-button"); add_url_button.addEventListener("click", function(){ url_list.insertAdjacentHTML('beforeend', url_template); attach_url_delete_handler(url_list.lastElementChild); fixup_url_numbering(url_list); }); var fixup_release_id_numbering = function(group_item) { items = Array.from(group_item.querySelectorAll(".list-group-item")) for (var i = 0; i < items.length; i++) { var item_el = items[i]; input_el = item_el.querySelectorAll("input")[0]; //console.log(input_el.id); input_el.id = "release_ids-" + i; input_el.name = input_el.id; //console.log(input_el.id); }; console.log("re-named release_id rows up to i=" + i); }; var release_id_list = document.getElementById('release_id_list'); fixup_release_id_numbering(release_id_list); var release_id_delete_handler = function(ev) { row = ev.target.parentNode.parentNode; // I don't understand why this hack is needed; maybe because of the sortable stuff? if(!row.classList.contains("list-group-item")) { row = row.parentNode; } // console.log(row); console.assert(row.classList.contains("list-group-item")); row.parentNode.removeChild(row); fixup_release_id_numbering(release_id_list); }; var attach_release_id_delete_handler = function(topthing) { Array.from(topthing.querySelectorAll(".delete-release_id-button")).forEach((el) => { el.addEventListener("click", release_id_delete_handler); }); }; attach_release_id_delete_handler(document); // XXX: really need some way to not duplicate this code from above... var release_id_template = ` <div class="list-group-item ui grid" style="padding-right: 1em;"> <div class="one wide column middle aligned center aligned" style="padding-bottom: 0px; padding-right: 0px; padding-left: 0px;"> </div> <div class="fourteen wide column" style="padding-bottom: 0px;"> <div class="field "> <input id="release_ids-X" name="release_ids-X" type="text" value="" required> </div> </div> <div class="one wide column right aligned" style="padding-bottom: 0px; padding-left: 0rem;"> <button type="button" class="ui icon red button delete-release_id-button"><i class="trash icon"></i></button> </div> </div> `; var add_release_id_button = document.getElementById("add-release_id-button"); add_release_id_button.addEventListener("click", function(){ release_id_list.insertAdjacentHTML('beforeend', release_id_template); attach_release_id_delete_handler(release_id_list.lastElementChild); fixup_release_id_numbering(release_id_list); }); console.log("Page loaded"); }); </script> {% endblock %}