Add the option for downloading a JSON dump for debugging

Hide it by default.

ref #34

src/components/ExporterButtons.vue

@@ -84,6 +84,14 @@ function uploadScale(retries = 1): Promise<string> {
 
 defineExpose({ uploadScale })
 
+function downloadDebugDump() {
+  const link = document.createElement('a')
+  link.download = sanitizeFilename(scale.scale.title) + '.json'
+  link.href = 'data:application/json,' + encodeURIComponent(uploadBody.value)
+  // Open save dialog
+  link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
+}
+
 function copyToClipboard() {
   if (API_URL) {
     uploadScale().then((url) => {
@@ -182,6 +190,10 @@ function doExport(exporter: ExporterKey) {
     <p class="warning">File export is known to be broken on Safari. Root cause unknown.</p>
     <button class="warning" @click="state.showSafariWarning = false">Dismiss</button>
   </div>
+  <a v-if="state.debug" href="#" class="btn debug" @click="downloadDebugDump"
+    ><p><strong>Debug dump (.json)</strong></p>
+    <p>Copy of the data sent to the server.</p></a
+  >
   <a href="#" class="btn" @click="doExport('anamarkv1')">
     <p><strong>AnaMark v1 tuning (.tun)</strong></p>
     <p>Tuning file for various synths</p>
@@ -276,4 +288,7 @@ function doExport(exporter: ExporterKey) {
 button.warning {
   margin-bottom: 0.5em;
 }
+.btn.debug {
+  border: var(--color-dark-indicator) 1px dashed;
+}
 </style>

src/stores/state.ts

@@ -51,6 +51,9 @@ export const useStateStore = defineStore('state', () => {
   // The app doesn't fully work on Safari. Inform the user.
   const showSafariWarning = ref(storage.getItem('showSafariWarning') !== 'false')
 
+  // Debugging features.
+  const debug = ref(storage.getItem('debug') === 'true')
+
   /**
    * Convert live state to a format suitable for storing on the server.
    */
@@ -87,7 +90,8 @@ export const useStateStore = defineStore('state', () => {
     degreeUpCode,
     degreeDownCode,
     shareStatistics,
-    showSafariWarning
+    showSafariWarning,
+    debug
   })
   watch(
     colorScheme,
@@ -125,6 +129,7 @@ export const useStateStore = defineStore('state', () => {
     degreeDownCode,
     shareStatistics,
     showSafariWarning,
+    debug,
     // Methods
     toJSON,
     fromJSON

src/views/PreferencesView.vue

@@ -50,6 +50,10 @@ const scale = useScaleStore()
             <label for="gas">Computational budget (gas)</label>
             <input id="gas" type="number" min="1" v-model="scale.gas" />
           </div>
+          <div class="control checkbox-container">
+            <input id="debug" type="checkbox" v-model="state.debug" />
+            <label for="debug" class="right-of-checkbox">Enable debugging features</label>
+          </div>
         </div>
       </div>
       <div class="column">