Skip to content

Commit

Permalink
working progress bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@nickbristow
nickbristow committed Oct 31, 2023
1 parent 3058bb1 commit 050b86d
Show file tree
Hide file tree
Showing 3 changed files with 7,037 additions and 2,017 deletions.
42 changes: 41 additions & 1 deletion front-end/app/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,4 +88,44 @@
color: white;
}
}
}

}

.no-content::before{
content: "" !important;
}

.parse-icon::before{
background-image: url("/parsing.svg");
background-position: 50% 25%;
}

.geolocation-icon::before {
background-image: url("/geolocatting.svg");
background-position: 50% 25%;
}

.exporting-icon::before {
background-image: url("/exporting-data-fields.svg");
background-position: 50% 25%;
}

.standardizing-icon::before {
background-image: url("/standardizing.svg");
background-position: 50% 25%;
}

.fhir-icon::before {
background-image: url("/converting-to-fhir.svg");
background-position: 50% 25%;
}

.usa-step-indicator__segment--complete::before{
background-color: #162E51 !important;
}

.usa-step-indicator-in-progress::before{
background-color: #005ea2 !important;
box-shadow: inset 0 0 0 0.25rem #005ea2, 0 0 0 0.25rem #fff !important;
}

191 changes: 96 additions & 95 deletions front-end/app/upload_file/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,31 @@
'use client'
import { useData } from '@/utils/DataContext';

import { FileInput, FormGroup, Label, Button, Alert } from '@trussworks/react-uswds'
import { FileInput, FormGroup, Button } from '@trussworks/react-uswds'
import { useState, useRef, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import SingleFileInput from '@/components/SingleFileInput/SingleFileInput';
import LinkAccordion from '@/components/LinkAccordion/LinkAccordion';
import * as changeCase from "change-case";
import { v4 } from 'uuid';
import {formatData, ProgressData, Step} from './utils'

export default function UploadFile() {
const router = useRouter();
const url = 'ws://localhost:8080/process-ws'
const [formData, setFormData] = useState({}); // State for form data
const [progress, setProgress] = useState(""); // State for progress
const [socket, setSocket] = useState(null);
const [progress, setProgress] = useState<ProgressData | null>(null); // State for progress
const [socket, setSocket] = useState<WebSocket | null>(null);
const fileInputRef = useRef(); // Define the ref
const [file, setFile] = useState({name: ''});
const [file, setFile] = useState<File | null>(null);

const handleSubmit = async (e: any) => {
e.preventDefault();
if (file) {
const formData = new FormData();
formData.append('upload_file', file);
formData.append('message_type', 'ecr');
formData.append('include_error_types', 'errors');
try {
const response = await fetch(process_url, {
method: 'POST',
body: formData,
});
const data = await response.json();
setData(data);
router.push('/export')
} catch (error) {
console.error('Error uploading file', error);
}
}
}
const handleSubmit = () => {
// Send form data to the server via a WebSocket
if(!file || !socket){
return 'false';
}
const formData = new FormData();
formData.append("file", file);

socket.send(file)
};
const handleFileChange = (e: any) => {
const selectedFile = e.target.files[0];
setFile(selectedFile);
Expand All @@ -47,10 +35,7 @@ export default function UploadFile() {
const ws = new WebSocket(url);

ws.onmessage = (event) => {
console.log('new message')
// const data = JSON.parse(event.data);
// console.log(data)
setProgress(event.data);
setProgress(formatData(event.data));
};

ws.onclose = () => {
Expand All @@ -64,68 +49,86 @@ export default function UploadFile() {
};
}, []);

const stepClass = (step: Step)=>{
let classStr = ""
classStr = step.progressState === "complete" ? "usa-step-indicator__segment--complete" : "";
classStr += step.progressState === "in-progress" ?
" usa-step-indicator-in-progress" : "";
console.log("step", step)
console.log("iconClass", step.iconClass)
classStr += step.progressState !== 'incomplete' ?
` ${step.iconClass}`: '';
return classStr;
}

const stepHtml = (data: any) => {

const stepHtml = (data: ProgressData) => {
let html: any[] = []
if(data["steps"]){
data["steps"].forEach((step: any )=> {
let stub = step["endpoint"].split('/').pop();
let complete = ""
let serviceName = changeCase.sentenceCase(step["service"])
.replace("Fhir", "FHIR")
if(stub){
complete = isComplete(step, data) ?
"usa-step-indicator__segment--complete" : "";
}
if(data.steps){
data.steps.forEach((step: Step )=> {
let classStr = stepClass(step)
let serviceName = step.formalName ? step.formalName :
changeCase.sentenceCase(step.service).replace("Fhir", "FHIR")
html.push(
<li className={'usa-step-indicator__segment ' + complete} key={v4()}>
<span className="usa-step-indicator__segment-label">{serviceName}<span className="usa-sr-only">${complete ? "complete" : ""}</span></span>
<li className={'usa-step-indicator__segment no-content ' + classStr} key={v4()}>
<span className="usa-step-indicator__segment-label">{serviceName}
<span className="usa-sr-only">${step.complete ? "complete" : ""}</span>
</span>
</li>
)
});
}
return html;
}

const isComplete = (step: any, data: any) => {
let stub = step["endpoint"].split('/').pop();
return data[stub] && data[stub]["status_code"] == 200
}

const checkComplete = (data: any) => {
if(!data || !data['steps']){
return false;
const alertHtml = (data: ProgressData) => {
if (!data.complete){
return (
<div className="usa-alert usa-alert--warning usa-alert--no-icon">
<div className="usa-alert__body">
<h4 className="usa-alert__heading">Your eCR is still processing</h4>
<p className="usa-alert__text">
We are processing the file you uploaded
({file && file["name"] ? file["name"] : ''}). Click the 'Cancel' button to
process a different file.
</p>
</div>
</div>
)
} else {
return (
<div className="usa-alert usa-alert--success usa-alert--no-icon">
<div className="usa-alert__body">
<h4 className="usa-alert__heading">
Your eCR has been processed successfully
</h4>
<p className="usa-alert__text">
Click the 'Continue' button to view or download your data or click the
'Cancel' button to process a different file.
</p>
</div>
</div>
)
}
for(let step of data["steps"]){
if(!isComplete(step, data)){
console.log('step', false)
return false;
}
};
console.log('complete', true)
return true
}

const progressHtml = () =>{
let progressJSON = JSON.parse(progress);
let complete = checkComplete(progressJSON)
if(!progress || !file){
return (<></>)
}
return (
<>
<h1>Processing your eCR</h1>
<p>
<p className="margin-bottom-3 margin-top-3">
View the progress of your eCR through our pipeline
</p>
<div className="usa-alert usa-alert--warning">
<div className="usa-alert__body">
<h4 className="usa-alert__heading">Your eCR is still processing</h4>
<p className="usa-alert__text">
We are processing the file you uploaded ({file["name"] ? file["name"] : ''}). Click the 'Cancel' button to process a different file.
</p>
</div>
</div>
<div className="usa-step-indicator usa-step-indicator--counters margin-top-3" aria-label="progress">
{alertHtml(progress)}
<div
className="usa-step-indicator usa-step-indicator--counters margin-top-3"
aria-label="progress"
>
<ol className="usa-step-indicator__segments">
{stepHtml(progressJSON)}
{stepHtml(progress)}
</ol>
</div>
<div className='margin-top-4'>
Expand All @@ -134,7 +137,7 @@ export default function UploadFile() {
type="button"
className="usa-button"
onClick={()=>location.reload()}
disabled={checkComplete(progressJSON) ? false : true}
disabled={progress.complete ? false : true}
>
Continue
</button>
Expand All @@ -146,28 +149,26 @@ export default function UploadFile() {
return progressHtml()
} else {
return (
<div>
<h1 className='margin-bottom-1'>Upload your eCR</h1>
<p>Select an eCR .zip file to process</p>
<div className="usa-alert usa-alert--info margin-bottom-1">
<div className="usa-alert__body">
<p className="usa-alert__text">
This tool is only for test data. Please do not upload patient data to this site.
</p>
</div>
<div className="margin-3">
<h1 className='font-sans-xl text-bold'>Upload your eCR</h1>
<p className="font-sans-lg text-light">Select an eCR .zip file to process</p>
<div className="usa-alert usa-alert--info usa-alert--no-icon maxw-tablet">
<div className="usa-alert__body padding-0">
<p className="usa-alert__text font-sans-xs text-bold">
This tool is only for test data. Please do not upload patient data to this site.
</p>
</div>
</div>
<FormGroup>
<Label htmlFor="file-input-single">Input accepts a single file</Label>
<FileInput
id="file-input-single"
name="file-input-single"
onChange={(handleFileChange)}
className='width-lg margin-bottom-1'
itemRef='fileInputRef'
/>
<Button type="button" onClick={handleSubmit}>Upload</Button>
</FormGroup>
</div>
<FormGroup>
<FileInput id="file-input-single"
name="file-input-single" onChange={(handleFileChange)}
/>
<div className="margin-top-205">
<LinkAccordion></LinkAccordion>
</div>
<Button className="margin-top-3" disabled={!file} type="button" onClick={handleSubmit}>Continue</Button>
</FormGroup>
</div>
)
}
}
Loading

0 comments on commit 050b86d

Please sign in to comment.