add alternate processing views

datakind · Jan 30, 2025 · e670019 · e670019
1 parent ffeb43b
commit e670019
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 25 deletions.
diff --git a/resources/js/Components/LoadingDots.jsx b/resources/js/Components/LoadingDots.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export default function LoadingDots({ mainMsg,className }) {
+    if (mainMsg == undefined || mainMsg == "") {
+        return null;
+    }
+
+    return (
+      <div className={classNames(className,
+                            "flex w-full",
+                          )}>
+         <div className='flex space-x-2 justify-center items-center'>
+        <span className='text-lg font-semibold'>{mainMsg}</span>
+    <div className='size-6 h-2 w-2 bg-black rounded-full animate-bounce [animation-delay:-0.2s]'></div>
+    <div className='size-6 h-2 w-2 bg-black rounded-full animate-bounce [animation-delay:-0.1s]'></div>
+    <div className='size-6 h-2 w-2 bg-black rounded-full animate-bounce'></div>
+</div>
+        </div>);
+}
+
+
+
diff --git a/resources/js/Components/Spinner.jsx b/resources/js/Components/Spinner.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export default function Spinner({ mainMsg,className }) {
+    if (mainMsg == undefined || mainMsg == "") {
+        return null;
+    }
+
+    return (
+      <div className={classNames(className,
+                            "flex w-full flex-row justify-center items-center gap-x-6",
+                          )}>
+<span className="flex inline-block align-[-0.125em] text-lg">{mainMsg}</span>
+    <div
+  className="flex text-gray-700 inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em] text-surface motion-reduce:animate-[spin_1.5s_linear_infinite]"
+  role="status">
+</div>
+        </div>);
+}
+
+
+
diff --git a/resources/js/Pages/Dashboard.jsx b/resources/js/Pages/Dashboard.jsx
@@ -1,10 +1,6 @@
 import AppLayout from '@/Layouts/AppLayout';
-import BigDangerAlert from '@/Components/BigDangerAlert';
-import BigSuccessAlert from '@/Components/BigSuccessAlert';
-import DangerAlert from '@/Components/DangerAlert';
-import SuccessAlert from '@/Components/SuccessAlert';
-import ProgressBar from '@/Components/ProgressBar';
-import HeaderLabel from '@/Components/HeaderLabel';
+import LoadingDots from '@/Components/LoadingDots';
+import Spinner from '@/Components/Spinner';
 
 import React, { useState, ChangeEvent, useRef, useEffect } from 'react';
 import {
@@ -24,12 +20,11 @@ export default function Dashboard() {
             )}
         >
             <div className="py-12 w-full">
-                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                    DEBUGGING USE: view components:
-                                            <BigDangerAlert mainMsg="hello"></BigDangerAlert>
-                        <BigSuccessAlert mainMsg="hello" msgDetails="hellohello"></BigSuccessAlert>
-                </div>
+DASHBOARD PAGE: for now used for debugging
             </div>
+            <LoadingDots mainMsg="Validation in progress"></LoadingDots>
+                        <Spinner mainMsg="Validation in progress"></Spinner>
+
         </AppLayout>
     );
 }
diff --git a/resources/js/Pages/FileUpload.jsx b/resources/js/Pages/FileUpload.jsx
@@ -19,6 +19,7 @@ import ProgressBar from '@/Components/ProgressBar';
 import BigSuccessAlert from '@/Components/BigSuccessAlert';
 import BigDangerAlert from '@/Components/BigDangerAlert';
 import HeaderLabel from '@/Components/HeaderLabel';
+import LoadingDots from '@/Components/LoadingDots';
 
 export default function FileUpload() {
 
@@ -27,17 +28,15 @@ export default function FileUpload() {
     const [files, setFiles] = useState([]);
     const [currentStep, setCurrentStep] = useState(1);
     const [validationResults, setValidationResults] = useState({});
-    const [progress, setProgress] = useState(0);
 
     const steps = [
         { label: 'Upload data', step: 1 },
         { label: 'Data validation', step: 2 },
         { label: 'Save', step: 3 },
     ];
 
-    // Progress as a percentage.
-    const renderProcessingBar = (progress) => {
-        return (<ProgressBar className="flex" progressMsg="Validation in progress..." amt={progress}></ProgressBar>)
+    const renderProcessing = () => {
+        return (<LoadingDots mainMsg="Validation in progress"></LoadingDots>)
     }
 
  const renderValidationResults = (validationResults) => {
@@ -233,8 +232,6 @@ const renderUpload = (files, fileStatus) => {
         }
 
         setCurrentStep(2);
-        setProgress(5);
-        const incrProgressBy = Math.floor(1/files.length * 90);
 
         // Clear validation status
         //setValidationResults({});
@@ -259,35 +256,35 @@ const renderUpload = (files, fileStatus) => {
 
                     return axios.post('/file-validate-api/'+'14c81c50935e41518561c2fc3bdabc0f'+ '/' + filenameConstructed).then(res2 => {
                         localValidationResults[filenameConstructed]="ok";
-                                    console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa5");
-                                    setProgress(progress+incrProgressBy);
+                                    console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa5"+JSON.stringify(res2));
+
+//at this point getting:
+//aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa5{"data":"Internal Server Error","status":200,"statusText":"OK","headers":{"cache-control":"no-cache, private","connection":"close","content-type":"text/html; charset=UTF-8","date":"Thu, 30 Jan 2025 02:57:24 GMT","host":"127.0.0.1:8000","vary":"X-Inertia","x-powered-by":"PHP/8.2.26"},"config":{"transitional":{"silentJSONParsing":true,"forcedJSONParsing":true,"clarifyTimeoutError":false},"transformRequest":[null],"transformResponse":[null],"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"maxBodyLength":-1,"headers":{"Accept":"application/json, text/plain, */*","X-Requested-With":"XMLHttpRequest","X-XSRF-TOKEN":"eyJpdiI6ImhtSlVsQ1NLZ0xBb3ZwdU9WUWRWdVE9PSIsInZhbHVlIjoieFRJRHNNKzZEZTZSdmcyTzg5SEJGNFg1bDV6bVc2djVZZ3BlVGJWb0cvNEtDZ2ltM2oyVlg5U3dnQlVPd3dLcnQ0bmhQVTJtTUhPRm0yd3Z4THpQT2RvNHJ6UWhoUm8xWWdoWTFNSnBsRHRWSnFETGFvdTNCRVI4cnRlbjRxU3AiLCJtYWMiOiIyNTNlNzBkMWQ0ZGU1YTMyZGFiNDkzNmM5MmQzNzVmYTcyNjJmN2ZmMWIwZWFiMzgwMzRjNDcwZDcwNGNlY2ExIiwidGFnIjoiIn0="},"method":"post","url":"/file-validate-api/14c81c50935e41518561c2fc3bdabc0f/1738205842885_tester1_29_v4.csv"},"request":{}}
+
+
+
                                     return;
 
                     }).catch(e => {
                                     console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa4" + e);
 
                             localValidationResults[filenameConstructed] = "[Validation] " + e;
-                                                                setProgress(progress+incrProgressBy);
 
                     });
 
                 }).catch(e => {
                                 console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa3" + e);
 
                     localValidationResults[filenameConstructed] = "[Upload] " +e;
-                                                        setProgress(progress+incrProgressBy);
 
         });
             }).catch(e => {
                             console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaa2");
 
                 localValidationResults[filenameConstructed] = "[Upload URL retrieval] " + e;
-                                                    setProgress(progress+incrProgressBy);
 
         });
         })).then(() => {
-            setProgress(100);
-
             setValidationResults(localValidationResults);
             setCurrentStep(3);
             return;
@@ -330,7 +327,7 @@ const renderUpload = (files, fileStatus) => {
 {(currentStep == 1) ? 
 (renderUpload(files, fileStatus)) :
     ( (currentStep == 2) ? 
-            (renderProcessingBar(progress)) : 
+            (renderProcessing()) : 
             (renderValidationResults(validationResults))
 
 )

diff --git a/resources/js/Pages/Welcome.jsx b/resources/js/Pages/Welcome.jsx
@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import AppLayout from '@/Layouts/AppLayout';
+import LoadingDots from '@/Components/LoadingDots';
+
 // Front page.
 
 export default function Welcome() {