File uploader for json (#9)

Vinit-Pandit · web-flow · commit 9680099b611c · 2024-04-29T11:39:06.000-04:00
Signed-off-by: MeastroZI &lt;vinitsharma2480@gmail.com&gt;
Signed-off-by: Vinit Pandit &lt;106718914+MeastroZI@users.noreply.github.com&gt;
diff --git a/www/app.js b/www/app.js
@@ -3,6 +3,7 @@ import 'codemirror/mode/javascript/javascript'
 import { Chart } from 'chart.js/dist/chart'
 import analyze from '../js/analyze'
 import taxonomy from '..'
+/* global FileReader */
 
 // From https://arxiv.org/abs/2201.02089
 const EXAMPLE_JSON = {
@@ -178,8 +179,55 @@ function onAnalyze (value) {
   }
 }
 
-document.getElementById('analyze').addEventListener('click', () => {
-  return onAnalyze(code.getValue())
+const LoaderElement = document.createElement('div')
+LoaderElement.classList.add('loader')
+const fileInputElement = document.getElementById('fileInput')
+const removeBtn = document.getElementById('remove')
+
+function showLoader (bool) {
+  if (bool) {
+    document.querySelector('main').appendChild(LoaderElement)
+    document.getElementById('overlay').style.display = 'block'
+  } else {
+    document.querySelector('main').removeChild(LoaderElement)
+    document.getElementById('overlay').style.display = 'none'
+  }
+}
+
+function analyzer () {
+  const file = fileInputElement.files[0]
+  showLoader(true)
+  if (file) {
+    const reader = new FileReader()
+    reader.onload = function (event) {
+      const contents = event.target.result
+      onAnalyze(contents)
+      showLoader(false)
+    }
+    reader.readAsText(file)
+  } else {
+    onAnalyze(code.getValue())
+    showLoader(false)
+  }
+}
+
+removeBtn.addEventListener('click', () => {
+  fileInputElement.value = ''
+  code.setValue('')
+  code.setOption('readOnly', false)
+  removeBtn.classList.add('uk-disabled')
+})
+
+fileInputElement.addEventListener('change', (e) => {
+  if (e.target.files[0]) {
+    code.setValue('Reading from input file')
+    code.setOption('readOnly', true)
+    removeBtn.classList.remove('uk-disabled')
+  } else {
+    console.log('else is clicked')
+    removeBtn.classList.add('uk-disabled')
+  }
 })
 
+document.getElementById('analyze').addEventListener('click', analyzer)
 onAnalyze(code.getValue())
diff --git a/www/index.html b/www/index.html
@@ -13,10 +13,18 @@
   <script defer data-domain="sourcemeta.github.io/json-taxonomy" src="https://plausible.io/js/plausible.js"></script>
 </head>
 <body>
+  <!-- element to make the page unresponsive in loading time -->
+  <div id="overlay"></div>
+  
   <main class="uk-child-width-expand uk-grid-collapse uk-grid uk-grid-match" uk-grid>
     <div id="editor" class="uk-width-1-2@m"></div>
     <div id="results" class="uk-padding-small uk-width-1-2@m">
-      <button id="analyze" class="uk-button uk-button-primary uk-width-1-1">Analyze JSON</button>
+
+      <div>
+        <input type="file" id="fileInput" accept="application/json"  class="uk-input uk-form-file">
+        <button id="remove" class="uk-button uk-button-danger uk-margin-small uk-width-1-1 uk-disabled">Remove File</button>
+        <button id="analyze" class="uk-button uk-button-primary uk-width-1-1">Analyze JSON</button>
+      </div>
 
       <div id="json-error" class="uk-alert-danger uk-margin uk-padding-small">
         <span>The JSON document you entered is invalid. Please enter a new one and click the <b>Analyze JSON</b> button again.</span>
diff --git a/www/style.css b/www/style.css
@@ -9,3 +9,36 @@
 .CodeMirror {
   height: 100% !important;
 }
+
+.loader {
+  width: 50px; 
+  height: 50px;
+  position: fixed;
+  top: 50%; 
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 6px solid #666; 
+  border-top: 6px solid #2c3e50;
+  border-radius: 50%; 
+  animation: spin 1s linear infinite; 
+}
+
+#overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  display: none;
+}
+
+@keyframes spin {
+  from {
+      transform: rotate(0deg);
+  }
+  to {
+      transform: rotate(360deg);
+  }
+}
