Implement editing of most planned sequence details

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

@@ -43,24 +43,91 @@
         @contextmenu:row="contextMenu"
         >
 
-          <template v-slot:item.ts0="{value}">
-            <span>{{ value.slice(0, 16) }}</span>
+          <template v-slot:item.sequence="{item, value}">
+            <v-edit-dialog
+              large
+              @open="editItem(item, 'sequence')"
+              @save="edit = null"
+              @cancel="edit.value = item.sequence; edit = null"
+            >
+              <span>{{ value }}</span>
+              <template v-slot:input>
+                <v-text-field v-if="edit"
+                  type="number"
+                  v-model.number="edit.value"
+                  single-line
+                >
+                </v-text-field>
+              </template>
+            </v-edit-dialog>
           </template>
 
-          <template v-slot:item.ts1="{value}">
-            <span>{{ value.slice(0, 16) }}</span>
+          <template v-slot:item.name="{item, value}">
+            <v-edit-dialog
+              large
+              @open="editItem(item, 'name')"
+              @save="edit = null"
+              @cancel="edit.value = item.name; edit = null"
+            >
+              <span>{{ value }}</span>
+              <template v-slot:input>
+                <v-text-field v-if="edit"
+                  v-model="edit.value"
+                  single-line
+                >
+                </v-text-field>
+              </template>
+            </v-edit-dialog>
+          </template>
+
+          <template v-slot:item.ts0="{item, value}">
+            <v-edit-dialog
+              large
+              @open="editItem(item, 'ts0', item.ts1.toISOString())"
+              @save="edit = null"
+              @cancel="edit.value = item.ts0; edit = null"
+            >
+              <span>{{ value.toISOString ? value.toISOString().slice(0, 16) : "" }}</span>
+              <template v-slot:input>
+                <v-text-field v-if="edit"
+                  type="datetime-local"
+                  v-model="edit.value"
+                  single-line
+                >
+                </v-text-field>
+              </template>
+            </v-edit-dialog>
+          </template>
+
+          <template v-slot:item.ts1="{item, value}">
+            <v-edit-dialog
+              large
+              @open="editItem(item, 'ts1', item.ts1.toISOString())"
+              @save="edit = null"
+              @cancel="edit.value = item.ts1; edit = null"
+            >
+              <span>{{ value.toISOString ? value.toISOString().slice(0, 16) : "" }}</span>
+              <template v-slot:input>
+                <v-text-field v-if="edit"
+                  type="datetime-local"
+                  v-model="edit.value"
+                  single-line
+                >
+                </v-text-field>
+              </template>
+            </v-edit-dialog>
           </template>
 
           <template v-slot:item.length="props">
-            <span>{{ Math.round(props.value) }} m</span>
+            <span style="white-space:nowrap;">{{ Math.round(props.value) }} m</span>
           </template>
 
           <template v-slot:item.azimuth="props">
-            <span>{{ props.value.toFixed(1) }} °</span>
+            <span style="white-space:nowrap;">{{ props.value.toFixed(1) }} °</span>
           </template>
           
           <template v-slot:item.remarks="{item}">
-            <v-text-field v-if="edit && edit.line == item.line && edit.key == 'remarks'"
+            <v-text-field v-if="edit && edit.sequence == item.sequence && edit.key == 'remarks'"
               type="text"
               v-model="edit.value"
               prepend-icon="mdi-restore"
@@ -85,8 +152,45 @@
 
           </template>
 
+          <template v-slot:item.speed="{item}">
+            <v-edit-dialog
+              large
+              @open="editItem(item, 'speed', knots(item).toFixed(1))"
+              @save="edit = null"
+              @cancel="edit.value = undefined; edit = null"
+            >
+              <span style="white-space:nowrap;">{{ knots(item).toFixed(1) }} kt</span>
+              <template v-slot:input>
+                <v-text-field v-if="edit"
+                  type="number"
+                  min="0"
+                  step="0.1"
+                  v-model.number="edit.value"
+                  single-line
+                >
+                </v-text-field>
+              </template>
+            </v-edit-dialog>
+          </template>
+
           <template v-slot:item.lag="{item}">
-            <span>{{ Math.round(lagAfter(item) / (60*1000)) }} min</span>
+            <v-edit-dialog
+              large
+              @open="editItem(item, 'lagAfter', Math.round(lagAfter(item)/(60*1000)))"
+              @save="edit = null"
+              @cancel="edit.value = undefined; edit = null"
+            >
+              <span>{{ Math.round(lagAfter(item) / (60*1000)) }} min</span>
+              <template v-slot:input>
+                <v-text-field v-if="edit"
+                  type="number"
+                  min="0"
+                  v-model="edit.value"
+                  single-line
+                >
+                </v-text-field>
+              </template>
+            </v-edit-dialog>
           </template>
           
         </v-data-table>
@@ -160,6 +264,10 @@ export default {
           value: "remarks",
           text: "Remarks"
         },
+        {
+          value: "speed",
+          text: "Speed"
+        },
         {
           text: "Line change after",
           value: "lag",
@@ -170,7 +278,7 @@ export default {
       filter: null,
       num_lines: null,
       activeItem: null,
-      edit: null, // {line, key, value}
+      edit: null, // {sequence, key, value}
       queuedReload: false,
 
       plannerConfig: null,
@@ -191,24 +299,38 @@ export default {
 
     async edit (newVal, oldVal) {
       if (newVal === null && oldVal !== null) {
-        const item = this.items.find(i => i.line == oldVal.line);
+        const item = this.items.find(i => i.sequence == oldVal.sequence);
         
         // Get around this Vuetify ‘feature’
         // https://github.com/vuetifyjs/vuetify/issues/4144
         if (oldVal.value === null) oldVal.value = "";
         
-        if (item && item[oldVal.key] != oldVal.value) {
-          if (await this.saveItem(oldVal)) {
-            item[oldVal.key] = oldVal.value;
-          } else {
-            this.edit = oldVal;
+        if (item) {
+          if (oldVal.key == "lagAfter") {
+            // We need to shift the times for every subsequent sequence
+            const delta = oldVal.value*60*1000 - this.lagAfter(item);
+            await this.shiftTimesAfter(item, delta);
+          } else if (oldVal.key == "speed") {
+            const v = oldVal.value*(1.852/3.6)/1000; // m/s
+            const ts1 = new Date(item.ts0.valueOf() + item.length / v);
+            const delta = ts1 - item.ts1;
+            await this.shiftTimesAfter(item, delta);
+            await this.saveItem({sequence: item.sequence, key: 'ts1', value: ts1});
+          } else if (oldVal.key == "sequence") {
+            await this.shiftSequences(oldVal.value-item.sequence);
+          } else if (item[oldVal.key] != oldVal.value) {
+            if (await this.saveItem(oldVal)) {
+              item[oldVal.key] = oldVal.value;
+            } else {
+              this.edit = oldVal;
+            }
           }
         }
       }
     },
 
     async serverEvent (event) {
-      if (event.channel == "preplot_lines" && event.payload.pid == this.$route.params.project) {
+      if (event.channel == "planned_lines" && event.payload.pid == this.$route.params.project) {
         if (!this.loading && !this.queuedReload) {
           // Do not force a non-cached response if refreshing as a result
           // of an event notification. We will assume that the server has
@@ -238,11 +360,11 @@ export default {
   methods: {
 
     lagAfter (item) {
-      const pos = this.items.indexOf(item);
-      if (pos != -1) {
-        const nextItem = this.items[pos+1];
-        if (nextItem) {
-          return new Date(nextItem.ts0) - new Date(item.ts1);
+      const pos = this.items.indexOf(item)+1;
+      if (pos != 0) {
+        if (pos < this.items.length) {
+          const nextItem = this.items[pos];
+          return nextItem.ts0 - item.ts1;
         }
       } else {
         console.warn("Item not found in list", item);
@@ -250,6 +372,11 @@ export default {
       return this.plannerConfig.defaultLineChangeDuration * 60*1000;
     },
 
+    knots (item) {
+      const v = item.length / ((item.ts1-item.ts0)/1000); // m/s
+      return v*3.6/1.852;
+    },
+    
     contextMenu (e, {item}) {
       e.preventDefault();
       this.contextMenuShow = false;
@@ -267,11 +394,61 @@ export default {
       await this.getPlannedLines();
     },
 
-    editItem (item, key) {
+    async shiftSequences(delta) {
+      // We go backwards so as to avoid conflicts.
+      for (const line of [...this.items].reverse()) {
+        const sequence = line.sequence+delta;
+        const url = `/project/${this.$route.params.project}/plan/${line.sequence}`;
+        const init = {
+          method: "PATCH",
+          headers: {"Content-Type": "application/json"},
+          body: {sequence}
+        }
+        await this.api([url, init]);
+      }
+    },
+
+    async shiftTimesAfter(item, delta) {
+      const pos = this.items.indexOf(item)+1;
+      if (pos != 0) {
+        const modifiedLines = this.items.slice(pos);
+        if (modifiedLines.length) {
+          modifiedLines.reverse();
+          for (const line of modifiedLines) {
+            const ts0 = new Date(line.ts0.valueOf() + delta);
+            const ts1 = new Date(line.ts1.valueOf() + delta);
+            const url = `/project/${this.$route.params.project}/plan/${line.sequence}`;
+            const init = {
+              method: "PATCH",
+              headers: {"Content-Type": "application/json"},
+              body: {ts1, ts0}
+            }
+            await this.api([url, init]);
+          }
+        }
+      } else {
+        console.warn("Item", item, "not found");
+      }
+    },
+
+    editLagAfter (item) {
+      const pos = this.items.indexOf(item)+1;
+      if (pos != 0) {
+        if (pos < this.items.length) {
+          // Not last item
+          this.editedItems = this.items.slice(pos);
+        } else {
+        }
+      } else {
+        console.warn("Item", item, "not found");
+      }
+    },
+
+    editItem (item, key, value) {
       this.edit = {
-        line: item.line,
+        sequence: item.sequence,
         key,
-        value: item[key]
+        value: value === undefined ? item[key] : value
       }
     },
     
@@ -279,7 +456,7 @@ export default {
       if (!edit)  return;
       
       try {
-        const url = `/project/${this.$route.params.project}/plan/${edit.line}`;
+        const url = `/project/${this.$route.params.project}/plan/${edit.sequence}`;
         const init = {
           method: "PATCH",
           body: {
@@ -301,7 +478,10 @@ export default {
 
       this.queuedReload = false;
       this.items = await this.api([url]) || [];
-
+      for (const item of this.items) {
+        item.ts0 = new Date(item.ts0);
+        item.ts1 = new Date(item.ts1);
+      }
     },
 
     async getPlannerConfig () {
@@ -328,9 +508,9 @@ export default {
     ...mapActions(["api"])
   },
 
-  mounted () {
+  async mounted () {
+    await this.getPlannerConfig();
     this.getPlannedLines();
-    this.getPlannerConfig();
   }
 
 }