Many interface changes

app/library/templates/library/document_annotate.html

@@ -78,8 +78,8 @@
   {% for tag, inst in document.work.music_tags %}
     <li class="is-clickable" onclick="assignInstrument('{{tag}}', this)")>{{ inst }}</li>
   {% endfor %}
-    <li><a onclick="document.getElementById('add-modal').classList.add('is-active')">Add instrument</a></li>
   </ul>
+  <a onclick="document.getElementById('add-modal').classList.add('is-active')">Add Tag</a>
   </div>
   <div class="column is-narrow">
     <div class="has-text-centered">
@@ -122,7 +122,7 @@
           <input type="number" class="input" max="4" min="1" size="3" id="add-instrument-variant"/>
         </span>
         <span class="control">
-          <button class="button is-primary" onclick="addInstrument()">Add</button>
+          <button class="button is-primary" onclick="addInstrument();">Add</button>
         </span>
       </div>
     </section>
@@ -301,7 +301,14 @@
     variant.value = '';
     name.value = '';
 
+    let li = document.createElement('li');
+    li.classList.add("is-clickable");
+    li.addEventListener('click', () => assignInstrument(tag, li));
+    li.innerHTML = get_instrument(tag);
+    document.getElementById('unassigned-area').appendChild(li);
+    
     addTag(tag, pageNum, pageNum);
+    closeAddModal();
   }
 
   function assignInstrument(tag, el) {
@@ -334,11 +341,6 @@
     del.className = "icon is-action";
     del.innerHTML = '<i class="fas fa-trash-alt" title="Remove this tag"></i>';
     del.addEventListener('click', () => {
-      let li = document.createElement('li');
-      li.classList.add("is-clickable");
-      li.addEventListener('click', () => assignInstrument(tag, li));
-      li.innerHTML = get_instrument(el.dataset.tag);
-      document.getElementById('unassigned-area').appendChild(li);
       el.remove();
       dirty=true;
     });

app/library/templates/library/item_list.html

@@ -1,21 +1,14 @@
 {% extends "interface/project_base.html" %}
 
-{% block admin %}
-<a class="button is-link" href="{% url 'item_list_manage' project.pk %}">
-    <span class="icon"><i class="fas fa-list"></i></span>
-    <span>Change items</span>
-</a>
-{% endblock %}
-
 {% block page %}
 <form action="" method="post" target="_blank">
 {% csrf_token %}
 <div>
-    <div class="field is-grouped is-grouped-centered">
-        <div class="field has-addons control">
+    <div class="field is-grouped is-grouped-centered is-grouped-multiline">
+        <div class="field has-addons control has-addons-centered is-expanded">
             
-            <span class="control">
-                <a class="button is-static">Your Instrument</a>
+            <span class="control is-hidden-mobile">
+                <a class="button is-static">Instrument</a>
             </span>
 
             <span class="control">
@@ -47,12 +40,12 @@
     </div>
 </div>
 
-<table class="table is-striped is-fullwidth">
+<table class="table is-striped mx-auto">
     <thead>
         <tr>
             <th/>
             <th>Piece</th>
-            <th>Running time</th>
+            <th class="is-hidden-mobile">Running time</th>
             <th>Part</th>
             <th/>
         </tr>
@@ -68,11 +61,11 @@
                     {{ item.work.name }}
                     {% endif %}
                 </td>
-                <td>{% firstof item.work.running_time "------" %}</td>
+                <td class="is-hidden-mobile">{% firstof item.work.running_time "------" %}</td>
                 <td class="select-cell">
                     <input type="hidden" name="works" value="{{ item.work.pk }}"/>
-                    <span class="select is-small">
-                    <select name="instruments">
+                    <span class="select is-small" style="width: 100%">
+                    <select name="instruments" id="part-{{ item.work.pk }}" style="width: 100%">
                         <option value='-'>None</option>
                         {% for tag, name in item.work.digital_parts %}
                         <option value='{{ tag }}'>{{ name }}</option>
@@ -81,7 +74,9 @@
                     </span>
                 </td>
                 <td>
-                    <a href=""><i class="fas fa-download"></i></a>
+                    <span class="is-action" onclick="downloadPart({{ item.work.collection_id }}, {{ item.work.pk }})">
+                        <i class="fas fa-download" title="Download Part"></i>
+                    </span>
                 </td>
             </tr>
         {% endfor %}
@@ -90,11 +85,13 @@
         <tr>
             <td/>
             <td/>
-            <td>{{ running_time }}</td>
+            <td>{% firstof running_time "------" %}</td>
             <td/>
             <td>
+            <!--
                 <button class="button is-link is-small" type="submit"><span class="icon"><i class="fas fa-copy"></i></span><span>Single combined PDF</span></button>
                 <a class="button is-link is-small"><span class="icon"><i class="fas fa-archive"></i></span><span>Individual files (zipped)</span></a>
+            -->
             </td>
         </tr>
     </tfoot>
@@ -154,6 +151,17 @@ function selectParts(inst, part) {
 
 }
 
+function downloadPart(collection, work) {
+    let part = document.getElementById("part-" + work).value;
+    if (part == '-') {
+        alert("No part selected!");
+        return;
+    }
+    console.log(part);
+    let url = "/collections/" + collection + "/works/" + work + "/download?tag=" + part;
+    window.location = url;
+}
+
 document.getElementById("instrument-name").value = localStorage.getItem('instrument-name', 'All');
 document.getElementById("part-preference").value = localStorage.getItem('part-preference', 'Any');
 updateParts();

app/library/templates/library/project_detail.html

@@ -1,12 +1,50 @@
-<h4 class="is-size-4">Items</h4>
-<ul>
-{% for item in project.items.all %}
-    {% with work=item.work %}
-    <li>
-        <a href="{% url 'work_detail' item.work.collection.pk item.work.pk %}">{{ item.work.name }}</a>
-    </li>
-    {% endwith %}
-{% empty %}
-    <li>There are no items listed yet for this project - please check back later...</li>
-{% endfor %}
-</ul>
+<div class="panel">
+    <p class="panel-heading">
+        Items
+    </p>
+  
+    {% for item in project.items.all %}
+        {% with work=item.work %}
+        <a class="panel-block" onclick="showDownloadOptions('{% url 'work_parts' work.collection_id  work.pk %}')">
+            {{ item.work.name }}
+        </a>
+        {% endwith %}
+    {% empty %}
+        <span class="panel-block">
+            There are no items listed yet for this project - please check back later...
+        </span>
+    {% endfor %}
+</div>
+
+<div class="modal" id="download-modal">
+  <div class="modal-background" onclick="closeDownloadModal()"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Parts</p>
+      <button class="delete" aria-label="close" onclick="closeDownloadModal()"></button>
+    </header>
+    <section class="modal-card-body" id="download-target">
+    </section>
+  </div>
+</div>
+
+<script>
+
+function showDownloadOptions(url) {
+    let target = document.getElementById("download-target");
+    target.innerHTML = "Loading available parts...";
+
+    document.getElementById("download-modal").classList.add('is-active');
+    fetch(url).then((data) => {
+        console.log(data);
+        data.text().then((text) => {
+            target.innerHTML = text;
+        });
+    });
+}
+
+function closeDownloadModal() {
+    document.getElementById("download-modal").classList.remove('is-active');
+}
+
+</script>

app/library/templates/library/work_parts_fragment.html

@@ -0,0 +1,25 @@
+<h3 class="subtitle">{{ work.name }}</h3>
+<div class="block">
+{% for tag, name in work.digital_parts %}
+<a class="tag is-info" href="{% url 'work_download' work.collection_id work.pk %}?tag={{ tag }}">{{ name }}</a>
+{% endfor %}
+</div>
+
+<h3 class="subtitle">Files</h3>
+<table class="table is-narrow is-fullwidth">
+<tbody>
+    {% for doc in work.pdfs %}
+    <tr>
+        <td><a href="{{ doc.upload.url }}">{{ doc.filename }}</a></td>
+    </tr>
+    {% empty %}
+    <tr>
+        <td>There are no files available for this work</td>
+    </tr>
+    {% endfor %}
+</tbody>
+</table>
+
+<p>
+<a href="{% url 'work_detail' work.collection_id work.pk %}">More details...</a>
+</p>