fix: build

This commit is contained in:
Malopieds 2025-02-25 09:27:29 +01:00
parent 6f9f4d8121
commit 5ac4bc1c56
Signed by: malopieds
GPG Key ID: 2E9430D75356529B
12 changed files with 156 additions and 120 deletions

View File

@ -46,9 +46,10 @@ const Navigation: React.FC<NavigationProps> = ({
navigate("/login");
}
});
localStorage.setItem("theme", theme);
if (theme) localStorage.setItem("theme", theme);
const localTheme = localStorage.getItem("theme");
document.querySelector("html").setAttribute("data-theme", localTheme);
const doc = document.querySelector("html");
if (doc) doc.setAttribute("data-theme", localTheme || "dark");
}, [theme, navigate]);
return (

View File

@ -2,9 +2,10 @@ import { useEffect, useState } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { Tp } from "../type/TpType";
import { DashboardType } from "../type/Dashboard";
function Dashboard() {
const [dashboard, setDashboard] = useState(null);
const [dashboard, setDashboard] = useState<DashboardType | null>(null);
const username = localStorage.getItem("username");
useEffect(() => {
axios.get("/api/dashboard").then((res) => {

View File

@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { Instance } from "../type/InstanceType";
function Instances() {
const [instances, setInstances] = useState([]);
@ -15,7 +16,7 @@ function Instances() {
<div className="container mx-auto py-10">
<h1 className="text-3xl font-bold mb-6 text-center">Your instances</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{instances.map((instance) => (
{instances.map((instance: Instance) => (
<div
key={instance.id}
className="card card-compact bg-base-200 shadow-lg p-4"

View File

@ -1,6 +1,3 @@
import axios from "axios";
import { useState } from "react";
function PageTest() {
return (
<>

View File

@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { Tp } from "../type/TpType";
function Practicals() {
const [tps, setTps] = useState([]);
@ -15,7 +16,7 @@ function Practicals() {
<div className="container mx-auto py-10">
<h1 className="text-3xl font-bold mb-6 text-center">Your TPs</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{tps.map((practical) => (
{tps.map((practical: Tp) => (
<div
key={practical.id}
className="card card-compact bg-base-200 shadow-lg p-4"

View File

@ -1,121 +1,126 @@
import axios from "axios";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { BulkUserCreattionType } from "../../type/BulkUserCreattionType";
import { Tp } from "../../type/TpType";
import { CSVParseType } from "../../type/CSVParseType";
function BulkUsers() {
const [userData, setUserData] = useState([]);
const [practical, setPractical] = useState("0");
const navigate = useNavigate();
const [tps, setTps] = useState([]);
const [userData, setUserData] = useState<CSVParseType[]>([]);
const [practical, setPractical] = useState("0");
const navigate = useNavigate();
const [tps, setTps] = useState([]);
const handlePracticalChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
setPractical(e.target.value);
const handlePracticalChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
setPractical(e.target.value);
};
useEffect(() => {
axios.get("/api/tps").then((res) => {
setTps(res.data);
});
}, []);
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.files) {
const selectedFile = event.target.files[0];
parseCSV(selectedFile);
}
};
const parseCSV = (file: File) => {
const reader = new FileReader();
reader.onload = (event: ProgressEvent<FileReader>) => {
if (event.target) {
const text = event.target.result!.toString();
const rows = text.split("\n").map((row) => row.split(","));
const formattedData = rows.map((row) => ({
name: row[0],
email: row[1],
password: row[2],
instance_name: row[3],
instance_ssh: row[4],
instance_port: row[5],
instance_pwd: row[6],
}));
setUserData(formattedData);
}
};
reader.readAsText(file);
};
useEffect(() => {
axios.get("/api/tps").then((res) => {
setTps(res.data);
});
}, []);
const handleSubmit = () => {
axios
.post("/api/users/jdmi", {
users: userData.filter((user: CSVParseType) => user.name !== ""),
tpId: practical,
})
.then(() => navigate(`/admin/users`));
};
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],
password: row[2],
instance_name: row[3],
instance_ssh: row[4],
instance_port: row[5],
instance_pwd: row[6],
}));
setUserData(formattedData);
};
reader.readAsText(file);
};
const handleSubmit = () => {
// Handle submission logic (e.g., sending data to the backend)
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>
return (
<div className="max-w-7xl 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 mb-4"
/>
{userData.length > 0 && (
<div className="overflow-x-auto w-full">
<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: BulkUserCreattionType, index: number) => (
<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: 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;

View File

@ -1,5 +1,6 @@
import axios from "axios";
import { useEffect, useState } from "react";
import { User } from "../../type/UserType";
function Users() {
const [users, setUsers] = useState([]);
@ -11,13 +12,12 @@ function Users() {
});
}, [reload]);
const handleEditUser = (userId) => {
const handleEditUser = (userId: number) => {
alert(`Edit user with ID: ${userId}`);
};
const deleteJDMIUsers = () => {
axios.delete("/api/users").then((res) => {
console.log(res.data);
axios.delete("/api/users").then(() => {
setReload(reload + 1);
});
};
@ -48,7 +48,7 @@ function Users() {
</tr>
</thead>
<tbody>
{users.map((user, index) => (
{users.map((user: User, index: number) => (
<tr key={user.id} className="hover:bg-gray-100">
<td className="p-4">{index + 1}</td>
<td className="p-4">{user.name}</td>

View File

@ -0,0 +1,9 @@
export interface BulkUserCreattionType {
name: string;
email: string;
password: string;
instance_name: string;
instance_ssh: string;
instance_port: string;
instance_pwd: string;
}

9
src/type/CSVParseType.ts Normal file
View File

@ -0,0 +1,9 @@
export interface CSVParseType {
name: string;
email: string;
password: string;
instance_name: string;
instance_ssh: string;
instance_port: string;
instance_pwd: string;
}

7
src/type/Dashboard.ts Normal file
View File

@ -0,0 +1,7 @@
import { Instance } from "./InstanceType";
import { Tp } from "./TpType";
export interface DashboardType {
tps: Tp[];
instances: Instance[];
}

View File

@ -5,4 +5,7 @@ export interface Tp {
pdfLink: string;
respo: string;
date: string;
ssh: string;
port: string;
pwd: string;
}

View File

@ -4,4 +4,6 @@ export interface User {
id: number;
name: string;
instances: Instance[];
email: string;
roles: string;
}