Include basic csv file parsing.

package-lock.json

@@ -4800,6 +4800,11 @@
         }
       }
     },
+    "csv-parse": {
+      "version": "4.16.0",
+      "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-4.16.0.tgz",
+      "integrity": "sha512-Zb4tGPANH4SW0LgC9+s9Mnequs9aqn7N3/pCqNbVjs2XhEF6yWNU2Vm4OGl1v2Go9nw8rXt87Cm2QN/o6Vpqgg=="
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",

package.json

@@ -9,6 +9,7 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
+    "csv-parse": "^4.16.0",
     "express": "^4.17.1",
     "gh-pages": "^3.2.3",
     "react": "^17.0.2",

src/App.js

@@ -19,6 +19,7 @@ import TestHeader from './TestHeader'; // Test Header!
 import TestPanel from './TestPanel'; // Dudley's Test Panel
 
 const axios = require('axios');
+const parse = require('csv-parse/lib/sync')
 
 const BACKEND_URL = process.env.REACT_APP_GITPOD_WORKSPACE_URL||process.env.REACT_APP_BACKEND_URL||'https://projectdivar.com:4504'; //You can specify a .env file locally with REACT_APP_BACKEND_URL defining a URL to retrieve data from.
 
@@ -428,6 +429,9 @@ function TableEditor(p) {
 	const [submitVals,setSubmitVal] = useReducer(updateVals,initialVals)
 	const [loading,setLoading] = useState(false)
 	const [dependencies,setDependencies] = useState([])
+	const [importAllowed,setImportAllowed] = useState(false)
+	const [fileData,setFileData] = useState(undefined)
+	const [debugMessage,setDebugMessage] = useState("")
 	
 	function SubmitBoxes() {
 		axios.post(BACKEND_URL+p.path,submitVals)
@@ -448,6 +452,26 @@ function TableEditor(p) {
 		setUpdate(true)
 	},[p.path])
 
+	useEffect(()=>{
+		var promises=[]
+		parse(fileData,{columns:true,skip_empty_lines:true}).forEach((entry)=>{
+			promises.push(axios.post(BACKEND_URL+p.path,entry))
+		})
+		Promise.allSettled(promises)
+		.then(()=>{
+			setUpdate(true)
+		})
+	},[fileData])
+
+	useEffect(()=>{
+		for (var col of fields) {
+			if (col.name==="name") {
+				setImportAllowed(true)
+				break;
+			}
+		}
+	},[fields])
+	
 	useEffect(()=>{
 		if (update) {
 			setLoading(true)
@@ -482,6 +506,14 @@ function TableEditor(p) {
 	{!loading?
 		<div className="table-responsive">
 			<table cellPadding="10" className="table text-light table-padding">
+			  {importAllowed&&<caption><label className="buttonLabel" for="uploads">Import CSV</label><input onChange={(f)=>{
+				const reader = new FileReader()
+				reader.onload=(ev)=>{
+					setFileData(ev.target.result)
+				}
+				reader.readAsText(f.target.files[0])
+			  }} style={{opacity:0}} id="uploads" type="file" accept=".txt,.csv"/></caption>}
+			  {JSON.stringify(debugMessage)}
 			  <thead>
 				<tr>
 					<th className="table-padding"></th>

src/style.css

@@ -947,3 +947,8 @@ p.adminNav hr {
 	border-bottom: 1px solid white;
 	margin: 10px 0;
 }
+.buttonLabel{
+	border: 2px solid black;
+	background:white;
+	color:black;
+}