Add GUI support for saving planner remarks.

They get saved to `/project/:project/info/plan/remarks`.

lib/www/client/source/src/views/Plan.vue

@@ -30,6 +30,47 @@
             </v-list-item>
           </v-list>
         </v-menu>
+        
+        <v-card>
+          <v-card-title class="text-overline">
+            Comments
+            <template v-if="writeaccess">
+              <v-btn v-if="!editRemarks"
+                class="ml-3"
+                small
+                icon
+                title="Edit comments"
+                @click="editRemarks=true"
+              >
+                <v-icon small>mdi-square-edit-outline</v-icon>
+              </v-btn>
+              
+              <v-btn v-else
+                class="ml-3"
+                small
+                icon
+                title="Save comments"
+                @click="saveRemarks"
+              >
+                <v-icon>mdi-content-save-edit-outline</v-icon>
+              </v-btn>
+            </template>
+          </v-card-title>
+          
+          <v-card-text v-if="editRemarks">
+            <v-textarea
+              v-model="remarks"
+              class="markdown"
+              placeholder="Plan comments"
+              dense
+              auto-grow
+              rows="1"
+            ></v-textarea>
+          </v-card-text>
+          
+          <v-card-text v-if="remarks && !editRemarks" v-html="$options.filters.markdown(remarks)"></v-card-text>
+          
+        </v-card>
 
         <v-data-table
         :headers="headers"
@@ -336,6 +377,8 @@ export default {
         }
       ],
       items: [],
+      remarks: null,
+      editRemarks: false,
       filter: null,
       num_lines: null,
       activeItem: null,
@@ -612,6 +655,27 @@ export default {
         return false;
       }
     },
+    
+    async saveRemarks () {
+      const url = `/project/${this.$route.params.project}/info/plan/remarks`;
+      let res;
+      if (this.remarks) {
+        const init = {
+          method: "PUT",
+          headers: { "Content-Type": "text/plain" },
+          body: this.remarks
+        };
+        await this.api([url, init, (e, r) => res = r]);
+      } else {
+        const init = {
+          method: "DELETE"
+        };
+        await this.api([url, init, (e, r) => res = r]);
+      }
+      if (res && res.ok) {
+        this.editRemarks = false;
+      }
+    },
 
     async getPlannedLines () {
 
@@ -635,6 +699,11 @@ export default {
       }
     },
     
+    async getPlannerRemarks () {
+      const url = `/project/${this.$route.params.project}/info/plan/remarks`;
+      this.remarks = await this.api([url]) || "";
+    },
+    
     async getSequences () {
       const url = `/project/${this.$route.params.project}/sequence`;
       this.sequences = await this.api([url]) || [];
@@ -652,6 +721,7 @@ export default {
   async mounted () {
     await this.getPlannerConfig();
     this.getPlannedLines();
+    this.getPlannerRemarks();
   }
 
 }