Add bag-info.txt interface (closes #13)

This provides basic support for bag-info.txt field editing.
We may wish to allow multi-line inputs but should survey the
user requirements first.

src/css/main.css

@@ -51,6 +51,16 @@ output {
  display: none;
 }
 
+/* Bag Info */
+
+.bag-info :invalid {
+ border-color: red;
+}
+
+.bag-info td:last-child {
+ width: 50px;
+}
+
 /* File Selection */
 
 .dropzone {

src/index.html

@@ -131,7 +131,102 @@ <h2>Create a bag</h2>
  </div>
  </div>
 
- <div class="form-group text-center">Bag Info coming soon</div>
+ <div class="form-group bag-info">
+ <table class="table table-striped">
+ <caption class="text-center">
+ <h3>Bag Info</h3>
+ </caption>
+ <thead>
+ <tr>
+ <th>Label</th>
+ <th>Value</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <input type="text" readonly class="bag-info-label form-control" value="Bag-Software-Agent">
+ </td>
+ <td>
+ <input type="text" readonly class="bag-info-value form-control" value="Bagger-JS (https://github.com/LibraryOfCongress/bagger-js/)">
+ </td>
+ <td></td>
+ </tr>
+ <template id="bag-info-element-template">
+ <tr>
+ <td>
+ <input type="text" class="bag-info-label form-control" placeholder="Label" pattern="^[^\s][^:\n\r]+[^\s]$">
+ </td>
+ <td>
+ <input type="text" class="bag-info-value form-control" placeholder="Value">
+ </td>
+ <td>
+ <button type="button" class="delete-row btn btn-default" title="Delete">❌</button>
+ </td>
+ </tr>
+ </template>
+ </tbody>
+ <tfoot>
+ <tr>
+ <td colspan="3">
+ <div class="btn-group add-element">
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ New Element
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <!-- This is the common field list from the RFC except for Bag-Size and Bagging-Date which should not be set by users -->
+ <li>
+ <a href="#" data-label="Bag-Count">Bag-Count</a>
+ </li>
+ <li>
+ <a href="#" data-label="Bag-Group-Identifier">Bag-Group-Identifier</a>
+ </li>
+ <li>
+ <a href="#" data-label="Bagging-Date">Bagging-Date</a>
+ </li>
+ <li>
+ <a href="#" data-label="Contact-Email">Contact-Email</a>
+ </li>
+ <li>
+ <a href="#" data-label="Contact-Name">Contact-Name</a>
+ </li>
+ <li>
+ <a href="#" data-label="Contact-Phone">Contact-Phone</a>
+ </li>
+ <li>
+ <a href="#" data-label="External-Description">External-Description</a>
+ </li>
+ <li>
+ <a href="#" data-label="External-Identifier">External-Identifier</a>
+ </li>
+ <li>
+ <a href="#" data-label="Internal-Sender-Description">Internal-Sender-Description</a>
+ </li>
+ <li>
+ <a href="#" data-label="Internal-Sender-Identifier">Internal-Sender-Identifier</a>
+ </li>
+ <li>
+ <a href="#" data-label="Organization-Address">Organization-Address</a>
+ </li>
+ <li>
+ <a href="#" data-label="Payload-Oxum">Payload-Oxum</a>
+ </li>
+ <li>
+ <a href="#" data-label="Source-Organization">Source-Organization</a>
+ </li>
+ <li role="separator" class="divider"></li>
+ <li>
+ <a href="#" data-label="">Other…</a>
+ </li>
+ </ul>
+ </div>
+ </td>
+ </tr>
+ </tfoot>
+ </table>
+ </div>
  </form>
  </div>
 

src/js/BagInfo.js

@@ -0,0 +1,67 @@
+/*
+ UI for editing bag-info.txt values
+*/
+
+export default class BagInfo {
+ constructor(container) {
+ this.container = container;
+
+ this.elementBody = container.querySelector("tbody");
+
+ this.elementTemplate = container.querySelector(
+ "template#bag-info-element-template"
+ );
+
+ this.addElement(
+ "Bagging-Date",
+ new Date().toISOString().substring(0, 10)
+ );
+
+ container
+ .querySelector(".add-element .dropdown-menu")
+ .addEventListener("click", evt => {
+ if ("label" in evt.target.dataset) {
+ this.addElement(evt.target.dataset.label);
+ return false;
+ }
+ });
+
+ this.elementBody.addEventListener("click", evt => {
+ if (evt.target.classList.contains("delete-row")) {
+ evt.target.parentNode.parentNode.remove();
+ }
+ });
+ }
+
+ addElement(label, value) {
+ label = (label || "").trim();
+ value = (value || "").trim();
+
+ let entryTemplate = document.importNode(
+ this.elementTemplate.content,
+ true
+ );
+
+ entryTemplate.querySelector(".bag-info-label").value = label;
+ entryTemplate.querySelector(".bag-info-value").value = value;
+
+ this.elementBody.appendChild(entryTemplate);
+ }
+
+ getValues() {
+ // This is not a Map because bag-info.txt allows multiple values for the same label and we must preserve ordering:
+ let info = [];
+ this.container.querySelectorAll("tbody tr").forEach(row => {
+ let labelInput = row.querySelector(
+ "input.bag-info-label:not(:invalid)"
+ );
+ let valueInput = row.querySelector(
+ "input.bag-info-value:not(:invalid)"
+ );
+ if (labelInput && valueInput) {
+ info.push([labelInput.value, valueInput.value]);
+ }
+ });
+ return info;
+ }
+}

src/js/Bagger.js

@@ -2,6 +2,7 @@
 
 import {$} from "./utils.js";
 import BagEntry from "./BagEntry.js";
+import BagInfo from "./BagInfo.js";
 import Dashboard from "./Dashboard.js";
 import SelectFiles from "./SelectFiles.js";
 import StorageManager from "./StorageManager.js";
@@ -15,6 +16,8 @@ export default class Bagger {
  // manifests after a successful upload:
  this.bagEntries = new Map();
 
+ this.bagInfo = new BagInfo($(".bag-info", elem));
+
  this.dashboard = new Dashboard($(".dashboard", elem));
 
  this.storage = new StorageManager($(".server-info", elem), status => {
@@ -389,10 +392,13 @@ export default class Bagger {
  );
  }
 
- // FIXME: Bag Info UI — https://github.com/LibraryOfCongress/bagger-js/issues/13
  let bagInfo = "Bag-Size: " + filesize(totalBytes, {round: 1});
  bagInfo += "\nPayload-Oxum: " + totalBytes + "." + totalFiles + "\n";
 
+ this.bagInfo.getValues().forEach(([label, value]) => {
+ bagInfo += `${label}: ${value}\n`;
+ });
+
  let bagIt = "BagIt-Version: 1.0\nTag-File-Character-Encoding: UTF-8\n";
 
  // FIXME: implement tag manifests!