Add "advanced configuration" view.

This view shows a tree view of the raw JSON configuration
object, allowing the user to add / edit / delete any properties
whatsoever. It is semi-hidden behind a context menu. The user
has to right-click on the header of the left-hand column showing
the list of configuration sections and then click on the red
"advanced configuration" button. In the advanced configuration
view there is another button to go back to normal configuration.

It is only possible to save / refresh the configuration from the
normal view.

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

@@ -21,11 +21,14 @@
       </v-row>
     </v-overlay>
 
+    <v-window v-model="viewMode">
+      <v-window-item>
     <v-row>
       <v-col cols="4">
         <v-toolbar
           dense
           flat
+          @contextmenu="showContextMenu"
         >
           <v-toolbar-title>
             Survey configuration
@@ -137,12 +140,64 @@
         </v-card>
       </v-col>
     </v-row>
+      </v-window-item>
+
+      <v-window-item>
+        <v-row>
+          <v-col cols="12">
+            <v-toolbar
+              dense
+              flat
+              @contextmenu="showContextMenu"
+            >
+              <v-toolbar-title>
+                Advanced survey configuration
+              </v-toolbar-title>
+              <v-spacer/>
+              <v-btn small outlined @click="viewMode=0">Go to normal configuration</v-btn>
+            </v-toolbar>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12">
+            <dougal-json-builder
+              name="Dougal configuration"
+              v-model="configuration"
+            ></dougal-json-builder>
+          </v-col>
+        </v-row>
+      </v-window-item>
+
+    </v-window>
+
+    <v-menu
+      v-model="contextMenu"
+      :position-x="contextMenuX"
+      :position-y="contextMenuY"
+      absolute
+      offset-y
+    >
+      <v-list dense>
+        <v-list-item>
+          <v-btn
+            small
+            outlined
+            color="red"
+            title="Not a good idea"
+            @click="viewMode=1"
+          >Advanced configuration…</v-btn>
+        </v-list-item>
+      </v-list>
+    </v-menu>
   </v-container>
 </template>
 
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import { deepSet } from '@/lib/utils';
+
+import DougalJsonBuilder from '@/components/json-builder/json-builder';
 
 import DougalProjectSettingsNameId from '@/components/project-settings/name-id';
 import DougalProjectSettingsGroups from '@/components/project-settings/groups';
@@ -190,6 +245,10 @@ const components = {
 export default {
   name: "DougalProjectSettings",
 
+  components: {
+    DougalJsonBuilder
+  },
+
   data () {
     return {
       configuration: null,
@@ -358,7 +417,12 @@ export default {
         }
       ],
 
-      dialog: false
+
+      viewMode: 0,
+      dialog: false,
+      contextMenu: false,
+      contextMenuX: null,
+      contextMenuY: null
     };
   },
 
@@ -491,6 +555,16 @@ export default {
     closeDialog () {
     },
 
+    showContextMenu (e) {
+      e.preventDefault();
+      this.contextMenu = false
+      this.contextMenuX = e.clientX
+      this.contextMenuY = e.clientY
+      this.$nextTick(() => {
+        this.contextMenu = true
+      })
+    },
+
     ...mapActions(["api", "showSnack"])
 
   },