From 0c3bd112348cc6221b3e0befcf117252861c0e68 Mon Sep 17 00:00:00 2001
From: Arthur de Jong <arthur@arthurdejong.org>
Date: Sun, 16 Aug 2020 18:51:10 +0200
Subject: Allow downloading the dashboard as a JSON file

---
 src/index.html    |  1 +
 src/munin-plot.js | 40 +++++++++++++++++++++++++++++-----------
 2 files changed, 30 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/index.html b/src/index.html
index dbb6cf1..cbfc515 100644
--- a/src/index.html
+++ b/src/index.html
@@ -189,6 +189,7 @@
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-sm btn-primary" id="saveDashboardClipboard" title="Copy data to clipboard"><i class="fa fa-copy"></i></button>
+            <button type="button" class="btn btn-sm btn-primary" id="saveDashboardFile" title="Download as file"><i class="fa fa-file-download"></i></button>
           </div>
         </form>
       </div>
diff --git a/src/munin-plot.js b/src/munin-plot.js
index ef22a4a..7728f3a 100644
--- a/src/munin-plot.js
+++ b/src/munin-plot.js
@@ -725,6 +725,22 @@ $(document).ready(function () {
     $('#saveDashboard .alert').remove()
   })
 
+  // output readable but compact JSON
+  function getSaveDashboardData() {
+    var value = '{\n'
+    var name = $('#saveDashboardName').val()
+    if (name) {
+      value += '  "name": ' + JSON.stringify(name) + ',\n'
+    }
+    if ($('#saveDashboardDateRange:checked').length) {
+      var dateRange = JSON.parse(localStorage.getItem('dateRange'))
+      value += '  "dateRange": ' + JSON.stringify(dateRange) + ',\n'
+    }
+    var graphs = JSON.parse(localStorage.getItem('shownGraphs'))
+    value += '  "graphs": ' + JSON.stringify(graphs) + '\n}'
+    return value
+  }
+
   // save dialog copy data to clipboard
   $('#saveDashboardClipboard').on('click', function (event) {
     // create a temporary text area
@@ -735,17 +751,7 @@ $(document).ready(function () {
       top: '-1000px'
     })
     // fill text area with JSON
-    textarea.value = '{\n'
-    var name = $('#saveDashboardName').val()
-    if (name) {
-      textarea.value += '  "name": ' + JSON.stringify(name) + ',\n'
-    }
-    if ($('#saveDashboardDateRange:checked').length) {
-      var dateRange = JSON.parse(localStorage.getItem('dateRange'))
-      textarea.value += '  "dateRange": ' + JSON.stringify(dateRange) + ',\n'
-    }
-    var graphs = JSON.parse(localStorage.getItem('shownGraphs'))
-    textarea.value += '  "graphs": ' + JSON.stringify(graphs) + '\n}'
+    textarea.value = getSaveDashboardData()
     // copy text area to clipboard
     $('#saveDashboard form').append(textarea)
     textarea.select()
@@ -760,6 +766,18 @@ $(document).ready(function () {
     })
   })
 
+  // save dashboard definition to file
+  $('#saveDashboardFile').on('click', function (event) {
+    var element = document.createElement('a')
+    element.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(getSaveDashboardData() + '\n'))
+    element.setAttribute('download', 'dashboard.json')
+    element.style.display = 'none'
+    document.body.appendChild(element)
+    element.click()
+    document.body.removeChild(element)
+    $('#saveDashboard').modal('hide')
+  })
+
   // handle showing and hiding of the load dashboard dialog
   $('#loadDashboard').on('shown.bs.modal', function () {
     $('#loadDashboardData').trigger('focus')
-- 
cgit v1.2.3