frontend visualisation of anchors & comments

.gitignore

@@ -2,4 +2,5 @@
 CHANGELOG.md
 test.json
 server.py
-/workflows
+/workflows
+/spaß

editor.js

@@ -563,9 +563,11 @@ function generatePanelContent(selection) {
         viewerList.appendChild(v);
       });
       children.push(viewerList);
+    } else if (content instanceof Roles) {
+      content.format().forEach(child => children.push(child));
     } else {
       var p = document.createElement('p');
-      var text = document.createTextNode(JSON.stringify(data[key]));
+      var text = document.createTextNode((key == 'comment') ? data[key].join(' ') : JSON.stringify(data[key]));
       p.appendChild(text);
       children.push(p);
     }
@@ -681,9 +683,7 @@ function prepareWorkflow() {
     var messages = [];
     state.stateData.messages.forEach(msg => messages.push(new Message(msg)));
     state.stateData.messages = messages;
-    var viewers = [];
-    state.stateData.viewers.viewers.forEach(v => viewers.push(new Role(v)));
-    state.stateData.viewers.viewers = viewers;
+    state.stateData.viewers = new Viewers(state.stateData.viewers);
     state.stateData.payload = new Payload(state.stateData.payload);
     nodeIndex.add(state.id, state.name);
   })
@@ -692,15 +692,9 @@ function prepareWorkflow() {
     var messages = [];
     action.actionData.messages.forEach(msg => messages.push(new Message(msg)));
     action.actionData.messages = messages;
-    var viewers = [];
-    action.actionData.viewers.viewers.forEach(v => viewers.push(new Role(v)));
-    action.actionData.viewers.viewers = viewers;
-    var actors = [];
-    action.actionData.actors.actors.forEach(v => actors.push(new Role(v)));
-    action.actionData.actors.actors = actors;
-    var viewActors = [];
-    action.actionData['actor Viewers'].viewers.forEach(v => viewActors.push(new Role(v)));
-    action.actionData['actor Viewers'].viewers = viewActors;
+    action.actionData.viewers = new Viewers(action.actionData.viewers);
+    action.actionData.actors = new Actors(action.actionData.actors);
+    action.actionData['actor Viewers'] = new Viewers(action.actionData['actor Viewers']);
     action.actionData.form = new Payload(action.actionData.form);
     actionIndex.add(action.id, action.name);
   })

workflow.js

@@ -20,6 +20,66 @@ class Role {
   }
 }
 
+class Roles {
+  constructor(json, roleName) {
+    this.roleName = roleName
+    this.anchor = json.anchor && new Anchor(json.anchor)
+    this[roleName] = [];
+    for (const role of json[roleName])
+      this[roleName].push(new Role(role));
+    this.comment = json.comment;
+  }
+
+  format() {
+    var r = document.createElement('h4');
+    var roles = document.createTextNode('Roles');
+    r.appendChild(roles);
+    var rolesList = document.createElement('ul');
+    this[this.roleName].forEach(r => {
+      var role = document.createElement('li');
+      role.appendChild(document.createTextNode(r.name));
+      rolesList.appendChild(role);
+    });
+    var result = [];
+    if (this.comment.length > 0) {
+      var c = document.createElement('h4');
+      c.innerText = 'Comment';
+      var comment = document.createElement('p');
+      comment.innerText = this.comment.join(' ');
+      result.push(c, comment);
+    }
+    if (this.anchor) {
+      var a = document.createElement('h4');
+      a.appendChild(this.anchor.format());
+      result.push(a);
+    } else result.push(r)
+    result.push(rolesList);
+    return result;
+  }
+}
+
+class Viewers extends Roles {
+  constructor(json) {
+    super(json, 'viewers');
+  }
+}
+
+class Actors extends Roles {
+  constructor(json) {
+    super(json, 'actors');
+  }
+}
+class Anchor {
+  constructor(json) {
+    this.name = json.name;
+    this.type = json.type;
+  }
+
+  format() {
+    return document.createTextNode(`${this.type == 'alias' ? '*' : '&'}${this.name}`);
+  }
+}
+
 class Message {
 
   constructor(json) {
@@ -28,8 +88,7 @@ class Message {
     this.fallbackLang = content['fallback-lang'];
     this.translations = content.translations;
     this.status = json.status;
-    this.viewers = [];
-    json.viewers.viewers.forEach(v => this.viewers.push(new Role(v)));
+    this.viewers = new Viewers(json.viewers);
     
   }
 
@@ -37,19 +96,16 @@ class Message {
     var v = document.createElement('h3');
     var viewers = document.createTextNode('Viewers');
     v.appendChild(viewers);
-    var viewerList = document.createElement('ul');
-    this.viewers.forEach(v => {
-      var viewer = document.createElement('li');
-      viewer.appendChild(document.createTextNode(v.name));
-      viewerList.appendChild(viewer);
-    });
+    var viewerList = this.viewers.format();
     var h = document.createElement('h3');
     var heading = document.createTextNode('Status');
     h.appendChild(heading);
     var p = document.createElement('p');
     var text = document.createTextNode(this.status);
     p.appendChild(text);
-    var result = [v, viewerList, h, p];
+    var result = [v];
+    result = result.concat(viewerList);
+    result.push(h, p);
     h = document.createElement('h3');
     heading = document.createTextNode(this.fallbackLang);
     h.appendChild(heading);