render compose submissions

Author: hcientist

teleband/templates/assignments/assignment_list.html

@@ -1,7 +1,10 @@
 {% extends "base.html" %}
 
 {% block content %}
-hello<br>
+<script>
+  const compositions = [];
+  const containers = [];
+</script>
 {% comment %} https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col#usage_notes {% endcomment %}
 <table class="dashboard">
   <colgroup>
@@ -101,18 +104,60 @@
           <td>{{ assn.instrument.id }}</td>
           <td>{{ assn.instrument.name }}</td>
           <td>{{ sub.id }}</td>
+          {% if assn.activity.category == 'Create' %}
+          <td>
+            Create, see below
+          </td>
+          {% else %}
           <td>{{ sub.content }}</td>
+          {% endif %}
           <td>{{ sub.submitted }}</td>
           <td>{{ sub.grade }}</td>
           <td>{{ sub.self_grade }}</td>
           <td>{{ att.id }}</td>
           <td>{{ att.file }}</td>
           <td>{{ att.submitted }}</td>
         </tr>
-        {% endfor %}
+        {% if assn.activity.category == 'Create' %}
+          <tr>  
+            <td colspan="22">
+              <div class="" id="flat-{{sub.id}}"></div>
+              <script>
+                compositions.push({{ sub.content | safe }})
+                containers.push(document.getElementById('flat-{{sub.id}}'))
+              </script>
+            </td>
+          </tr>
+        {% endif %}
       {% endfor %}
-    {% endif %}
-    </tbody>
+    {% endfor %}
+  {% endif %}
+  </tbody>
   {% endfor %}
 </table>
-{% endblock content %}
+{% endblock content %}
+
+{% block custom_javascript %}
+  <script src="https://prod.flat-cdn.com/embed-js/v2.3.0/embed.min.js"></script>
+  <script>
+    for (let i=0; i<compositions.length; i++) {
+      let embed = new Flat.Embed(containers[i], {
+        score: 'blank',
+        embedParams: {
+          appId: '60a51c906bcde01fc75a3ad0',
+          layout: 'responsive',
+          branding: false,
+          themePrimary: '#450084',
+          controlsDisplay: false,
+          controlsPlay: false,
+          controlsFullscreen: false,
+          controlsZoom: false,
+          controlsPrint: false,
+          displayFirstLinePartsNames: false,
+          toolsetId: '64be80de738efff96cc27edd',
+        },
+      });
+      embed.loadJSON(compositions[i]);
+    }
+  </script>
+{% endblock custom_javascript %}

teleband/templates/base.html

@@ -112,5 +112,8 @@
     </script>
     {% endcomment %}
     {% endblock inline_javascript %}
+
+    {% block custom_javascript %}
+    {% endblock custom_javascript %}
   </body>
 </html>