Add contextual info about sailline CSV files.

The information that has to go on those and their layout is not
very obvious so adding a contextual help dialogue and an example
file puts the user on the right track.

Closes #319

lib/www/client/source/src/components/project-settings/preplots-preplot.vue

@@ -23,7 +23,34 @@
           label="File format"
           :items="preplotFileTypes"
           v-model="fileType"
-        ></v-select>
+          :append-outer-icon="fileClass == 'saillines' && fileType == 'x-sl+csv' ? 'mdi-help-circle-outline' : ''"
+        >
+          <template v-slot:append-outer="" v-if="fileClass == 'saillines' && fileType == 'x-sl+csv'">
+            <v-menu :close-on-content-click="false" v-model="tooltip">
+              <template v-slot:activator="{ on, attrs }">
+                <v-btn icon v-bind="attrs" title="Information on sailline CSV files" @click="tooltip = !tooltip"><v-icon>mdi-help-circle-outline</v-icon></v-btn>
+              </template>
+
+              <v-card>
+                <v-card-title>Saillines CSV format</v-card-title>
+                <v-card-text>
+                  <p>
+                    The input CSV should have the following comma-separated fields:
+                      <dl>
+                        <dt><code>sail_line</code></dt> <dd>The vessel line number</dd>
+                        <dt><code>incr</code></dt> <dd><em>1</em> if this line is to be shot in the incrementing shot points direction, <em>0</em> or blank otherwise</dd>
+                        <dt><code>ntba</code></dt> <dd><em>1</em> if this line is not to be acquired</dd>
+                        <dt><code>remarks</code></dt> <dd>Any comments pertinent to the line. Supports <a target="_blank" href="https://commonmark.org/help/">Markdown</a>.</dd>
+                        <dt><code>meta.colour</code></dt> <dd>An <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">HTML colour</a>. Changes the background colour of the line in Dougal's ‘Lines’ tab.</dd>
+                        <dt><code>source_line</code></dt> <dd>The source line number. This column should be repeated once per gun array.</dd>
+                      </dl>
+                    </p>
+                    <p>See an <a target="_blank" href="https://gitlab.com/-/snippets/4873650">example file</a> (<a title="Direct download" href="https://gitlab.com/-/snippets/4873650/raw/main/preplots-saillines-example.csv?inline=false"><v-icon dense small>mdi-paperclip</v-icon></a>)</p>
+                </v-card-text>
+              </v-card>
+            </v-menu>
+          </template>
+        </v-select>
 
         <v-text-field v-if="value.class == 'S'"
           class="mb-3"
@@ -218,6 +245,7 @@ export default {
         { text: "16 kiB", value: 1024*16 },
         { text: "32 kiB", value: 1024*32 },
       ],
+      tooltip: false,
     };
   },