feat: port, instance bulk
This commit is contained in:
Malopieds
parent
dadaabcd3a
commit
0abe7386d0
@ -1,109 +1,121 @@
|
|||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { User } from "../../type/UserType";
|
|
||||||
import { Tp } from "../../type/TpType";
|
|
||||||
|
|
||||||
function BulkUsers() {
|
function BulkUsers() {
|
||||||
const [userData, setUserData] = useState([]);
|
const [userData, setUserData] = useState([]);
|
||||||
const [practical, setPractical] = useState("0");
|
const [practical, setPractical] = useState("0");
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [tps, setTps] = useState([]);
|
const [tps, setTps] = useState([]);
|
||||||
|
|
||||||
const handlePracticalChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
const handlePracticalChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||||
setPractical(e.target.value);
|
setPractical(e.target.value);
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
axios.get("/api/tps").then((res) => {
|
|
||||||
setTps(res.data);
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const selectedFile = event.target.files[0];
|
|
||||||
parseCSV(selectedFile);
|
|
||||||
};
|
|
||||||
|
|
||||||
const parseCSV = (file: File) => {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = (event: ProgressEvent<FileReader>) => {
|
|
||||||
const text = event.target.result;
|
|
||||||
const rows = text.split("\n").map((row) => row.split(","));
|
|
||||||
const formattedData = rows.map((row) => ({
|
|
||||||
name: row[0],
|
|
||||||
email: row[1],
|
|
||||||
// Add other fields as necessary
|
|
||||||
}));
|
|
||||||
setUserData(formattedData);
|
|
||||||
};
|
};
|
||||||
reader.readAsText(file);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = () => {
|
useEffect(() => {
|
||||||
// Handle submission logic (e.g., sending data to the backend)
|
axios.get("/api/tps").then((res) => {
|
||||||
console.log(practical);
|
setTps(res.data);
|
||||||
axios
|
});
|
||||||
.post("/api/users/jdmi", {
|
}, []);
|
||||||
users: userData.filter((user) => user.name !== ""),
|
|
||||||
tpId: practical,
|
|
||||||
})
|
|
||||||
.then(() => navigate(`/admin/users`));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
<div className="max-w-md mx-auto p-5">
|
const selectedFile = event.target.files[0];
|
||||||
<h2 className="text-2xl font-bold mb-4">Bulk User Creation</h2>
|
parseCSV(selectedFile);
|
||||||
<input
|
};
|
||||||
type="file"
|
|
||||||
accept=".csv"
|
const parseCSV = (file: File) => {
|
||||||
onChange={handleFileChange}
|
const reader = new FileReader();
|
||||||
className="file-input file-input-bordered w-full mb-4"
|
reader.onload = (event: ProgressEvent<FileReader>) => {
|
||||||
/>
|
const text = event.target.result;
|
||||||
{userData.length > 0 && (
|
const rows = text.split("\n").map((row) => row.split(","));
|
||||||
<div className="overflow-x-auto">
|
const formattedData = rows.map((row) => ({
|
||||||
<table className="table w-full">
|
name: row[0],
|
||||||
<thead>
|
email: row[1],
|
||||||
<tr>
|
password: row[2],
|
||||||
<th>Name</th>
|
instance_name: row[3],
|
||||||
<th>Email</th>
|
instance_ssh: row[4],
|
||||||
</tr>
|
instance_port: row[5],
|
||||||
</thead>
|
instance_pwd: row[6],
|
||||||
<tbody>
|
}));
|
||||||
{userData.map((user, index) => (
|
setUserData(formattedData);
|
||||||
<tr key={index}>
|
};
|
||||||
<td>{user.name}</td>
|
reader.readAsText(file);
|
||||||
<td>{user.email}</td>
|
};
|
||||||
</tr>
|
|
||||||
))}
|
const handleSubmit = () => {
|
||||||
</tbody>
|
// Handle submission logic (e.g., sending data to the backend)
|
||||||
</table>
|
console.log(practical);
|
||||||
|
axios
|
||||||
|
.post("/api/users/jdmi", {
|
||||||
|
users: userData.filter((user) => user.name !== ""),
|
||||||
|
tpId: practical,
|
||||||
|
})
|
||||||
|
.then(() => navigate(`/admin/users`));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-md mx-auto p-5">
|
||||||
|
<h2 className="text-2xl font-bold mb-4">Bulk User Creation</h2>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
accept=".csv"
|
||||||
|
onChange={handleFileChange}
|
||||||
|
className="file-input file-input-bordered w-full mb-4"
|
||||||
|
/>
|
||||||
|
{userData.length > 0 && (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="table w-full">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Email</th>
|
||||||
|
<th>Password</th>
|
||||||
|
<th>Instance name</th>
|
||||||
|
<th>Instance ssh</th>
|
||||||
|
<th>Instance port</th>
|
||||||
|
<th>Instance pwd</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{userData.map((user, index) => (
|
||||||
|
<tr key={index}>
|
||||||
|
<td>{user.name}</td>
|
||||||
|
<td>{user.email}</td>
|
||||||
|
<td>{user.password}</td>
|
||||||
|
<td>{user.instance_name}</td>
|
||||||
|
<td>{user.instance_ssh}</td>
|
||||||
|
<td>{user.instance_port}</td>
|
||||||
|
<td>{user.instance_pwd}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-gray-700 font-semibold mb-2">Tp:</label>
|
||||||
|
<select
|
||||||
|
name="practical"
|
||||||
|
value={practical}
|
||||||
|
onChange={handlePracticalChange}
|
||||||
|
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
return <option value="0">Empty</option>;
|
||||||
|
{tps.map((tp: TpType.Tp) => {
|
||||||
|
return <option value={tp.id}>{tp.name}</option>;
|
||||||
|
})}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={handleSubmit}
|
||||||
|
className="btn btn-primary mt-4"
|
||||||
|
disabled={userData.length === 0}
|
||||||
|
>
|
||||||
|
Create Users
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
);
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-gray-700 font-semibold mb-2">Tp:</label>
|
|
||||||
<select
|
|
||||||
name="practical"
|
|
||||||
value={practical}
|
|
||||||
onChange={() => handlePracticalChange}
|
|
||||||
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
>
|
|
||||||
return <option value="0">Empty</option>;
|
|
||||||
{tps.map((tp: Tp) => {
|
|
||||||
return <option value={tp.id}>{tp.name}</option>;
|
|
||||||
})}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={handleSubmit}
|
|
||||||
className="btn btn-primary mt-4"
|
|
||||||
disabled={userData.length === 0}
|
|
||||||
>
|
|
||||||
Create Users
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default BulkUsers;
|
export default BulkUsers;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user