restore/export data popup, TODO: backend for restore data

web/app.html

@@ -39,8 +39,8 @@
       <div class="btn-group mr-2" role="group" aria-label="Toggle show group">
         <button id="global_toggleshow" class="btn btn-secondary" type="button">show hidden</button>
       </div>
-      <div class="btn-group mr-2" role="group" aria-label="export">
-        <button id="export_data_button" class="btn btn-secondary" type="button">export</button>
+      <div class="btn-group mr-2" role="group" aria-label="export restore">
+        <button id="export_restore" class="btn btn-secondary" type="button">manage data</button>
       </div>
     </div>
 </div>
@@ -97,6 +97,27 @@
   </div>
 </div>
 
+<!-- popup export restore -->
+<div id="restorePopup" class="popup">
+  <div class="popup-content">
+      <div id="exportdata_content">
+        <button id="export_data_button" class="btn btn-secondary" type="button">export</button>
+      </div>
+      <p><br/>Restore from file:</p>
+      <div class="btn-toolbar" role="toolbar">
+        <div class="btn-group mr-2" role="group">
+            <div class="custom-file">
+                <input type="file" class="custom-file-input" id="inputGroupFile01">
+                <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
+            </div>
+        </div>
+        <div class="btn-group mr-2" role="group">
+            <button id="submit_restore" type="submit" class="btn btn-primary">Submit</button>
+        </div>
+      </div>
+  </div>
+</div>
+
 <!--popup confirmation window-->
 <div id="confirmationPopup" class="popup">
   <div class="popup-content">
@@ -116,4 +137,5 @@
 <script src="{{ url_for('static', filename='rendergraphs.js') }}"></script>
 <script src="{{ url_for('static', filename='list.js') }}"></script>
 <script src="{{ url_for('static', filename='csv.js') }}"></script>
+<script src="{{ url_for('static', filename='restore.js') }}"></script>
 <script src="{{ url_for('static', filename='app.js') }}"></script>

web/csv.js

@@ -1,11 +1,11 @@
 // CSV to JS object
 function csvToObject(csvData) {
   const rows = csvData.split('\n');
-  const headers = rows[0].split(',');
+  const headers = rows[0].split(';');
   const dataArray = [];
 
   for (let i = 1; i < rows.length; i++) {
-    const values = rows[i].trim().split(','); // trim to remove linebreak
+    const values = rows[i].trim().split(';'); // trim to remove linebreak
     if (rows[i] != '') {
         //don't treat empty lines
         const obj = {};
@@ -21,19 +21,22 @@ function csvToObject(csvData) {
 
 // JS object to CSV
 function objectToCsv(objArray) {
+  console.log(objArray)
   const array = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
   let csv = '';
   // field names in first line
   const fields = Object.keys(array[0]);
-  csv += fields.join(',') + '\r\n'; // \r\n for cross platform compatibility
+  csv += fields.join(';') + '\n';
   // data rows
   for (let i = 0; i < array.length; i++) {
     let line = '';
     for (let index in array[i]) {
-      if (line !== '') line += ',';
+      if (line !== '') {
+        line += ';';
+      }
       line += array[i][index];
     }
-    csv += line + '\r\n';
+    csv += line + '\n';
   }
   return csv;
 }

web/popups.js

@@ -224,3 +224,8 @@ document.addEventListener('DOMContentLoaded', function () {
     confirmationPopup.style.display = 'none';
   });
 });
+
+// restore/export data popup
+document.getElementById("export_restore").addEventListener("click", function () {
+            restorePopup.style.display = 'flex';
+        });

web/restore.js

@@ -0,0 +1,56 @@
+function handleFileUpload(event) {
+  const file = document.getElementById('inputGroupFile01').files[0];
+  const reader = new FileReader();
+
+  reader.onload = function(e) {
+    const rawData = e.target.result;
+    var blocks = rawData.split('#####');
+    blocks.shift() // 1st element is empty
+    console.log(blocks);
+    var data = {};
+    blocks.forEach(function (block) {
+          const split = block.indexOf('\n');
+          const table_name = block.substring(0, split);
+          const content = csvToObject(block.substring(split+1));
+          data[table_name] = content;
+    });
+    restore_request(data);
+  };
+  reader.readAsText(file);
+}
+
+async function restore_request(data) {
+  try {
+    // SELECT uuid, itemid, skuid, choice, attributes, image, show
+    const apiUrl = `${currentUrl}app/restore`;
+    const postData = {
+        data: data
+    };
+
+    const requestOptions = {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(postData)
+    };
+
+    await fetch(apiUrl, requestOptions)
+            .catch(error => {
+            console.error('Error during POST request:', error);
+            });
+
+  } catch (error) {
+    console.error('Error fetching data item: ', error);
+    throw error;
+  }
+}
+
+// change file picker text on file upload
+$(".custom-file-input").on("change", function() {
+  var fileName = $(this).val().split("\\").pop();
+  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
+});
+
+// Event listener restore from file
+document.getElementById('submit_restore').addEventListener("click", handleFileUpload);