Add information updater to corpus page.

app/templates/corpora/corpus.html.j2

@@ -1,10 +1,80 @@
 {% extends "limited_width.html.j2" %}
 
 {% block page_content %}
+<script>
+  var corpus_user_id = {{ corpus.user_id }}
+  socket.emit('inspect_user', corpus_user_id);
+</script>
+<script>
+  var CORPUS_ID = {{ corpus.id }}
+  var foreignCorpusFlag;
+  {% if current_user.id == corpus.user_id %}
+  foreignCorpusFlag = false;
+  {% else %}
+  foreignCorpusFlag = true;
+  {% endif %}
+
+  class InformationUpdater {
+    constructor(corpusId) {
+      this.corpusId = corpusId;
+      if (foreignCorpusFlag) {
+        foreignCorporaSubscribers.push(this);
+      } else {
+        corporaSubscribers.push(this);
+      }
+    }
+
+    _init() {
+      if (foreignCorpusFlag) {
+        this.corpus = foreignCorpora[this.corpusId];
+      } else {
+        this.corpus = corpora[this.corpusId];
+      }
+
+      // Status
+      this.setStatus(this.corpus.status);
+    }
+
+    _update(patch) {
+      var pathArray;
+
+      for (let operation of patch) {
+        /* "/corpusId/valueName" -> ["corpusId", "valueName"] */
+        pathArray = operation.path.split("/").slice(1);
+        if (pathArray[0] != this.corpusId) {continue;}
+        switch(operation.op) {
+          case "add":
+            break;
+          case "delete":
+            location.reload();
+            break;
+          case "replace":
+            if (pathArray[1] === "status") {
+              this.setStatus(operation.value);
+            }
+            break;
+          default:
+            break;
+        }
+      }
+    }
+
+    setStatus(status) {
+      var statusElement;
+      statusElement = document.getElementById("status");
+      statusElement.classList.remove(...Object.values(CorpusList.STATUS_COLORS));
+      statusElement.classList.add(CorpusList.STATUS_COLORS[status] || CorpusList.STATUS_COLORS['default']);
+      statusElement.innerText = status;
+    }
+  }
+
+  var informationUpdater = new InformationUpdater(CORPUS_ID);
+</script>
+
 <div class="col s12 m4">
   <h3 id="title">{{ corpus.title }}</h3>
   <p id="description">{{ corpus.description }}</p>
-  <a class="waves-effect waves-light btn">{{ corpus.status }}</a>
+  <a class="waves-effect waves-light btn" id="status">{{ corpus.status }}</a>
 </div>
 
 <div class="col s12 m8">