banquise/intra-front
13
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

WIP: update: adaptations to use the new backend #1

Draft
arthur.wambst wants to merge 21 commits from dev into master
pull from: dev
merge into: banquise:master
Conversation 0 Commits 21 Files Changed 18 +37 -37
4 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 31ffd227c7 - Show all commits

8
src/App.tsx
View File

@ -2,9 +2,9 @@ import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom"; import { BrowserRouter, Route, Routes } from "react-router-dom";
import Navigation from "./component/Navigation/Navigation"; import Navigation from "./component/Navigation/Navigation";
import Dashboard from "./pages/Dashboard"; import Dashboard from "./pages/Dashboard";
import Practicals from "./pages/Practicals"; import Immersions from "./pages/Immersions";
import Instances from "./pages/Instances"; import Instances from "./pages/Instances";
import Practical from "./pages/Practical"; import Immersion from "./pages/Immersion";
import LoginPage from "./pages/Login"; import LoginPage from "./pages/Login";
import PageTest from "./pages/PageTest"; import PageTest from "./pages/PageTest";
import CreateTp from "./pages/admin/CreateTp"; import CreateTp from "./pages/admin/CreateTp";
@ -21,8 +21,8 @@ function App() {
<Navigation> <Navigation>
<Routes> <Routes>
<Route path="/" element={<Dashboard />} /> <Route path="/" element={<Dashboard />} />
<Route path="/tps" element={<Practicals />} /> <Route path="/immersion" element={<Immersions />} />
<Route path="/tps/:id" element={<Practical />} /> <Route path="/immersion/:id" element={<Immersion />} />
<Route path="/instances" element={<Instances />} /> <Route path="/instances" element={<Instances />} />
<Route path="/profile" element={<PageTest />} /> <Route path="/profile" element={<PageTest />} />
<Route path="/login" element={<LoginPage />} /> <Route path="/login" element={<LoginPage />} />

4
src/component/Navigation/Navigation.tsx
View File

@ -183,8 +183,8 @@ const Navigation: React.FC<NavigationProps> = ({
<li> <li>
<div> <div>
<DocumentTextIcon className="size-6" /> <DocumentTextIcon className="size-6" />
<Link to="/tps" onClick={toggleDrawer}> <Link to="/immersion" onClick={toggleDrawer}>
TPs Immersions
</Link> </Link>
</div> </div>
</li> </li>

36
src/pages/Practical.tsx → src/pages/Immersion.tsx
View File

@ -3,11 +3,11 @@ import axios from "axios";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import { Tp } from "../type/TpType"; import { Ji } from "../type/JiType";
function Practical() { function Immersion() {
const { id } = useParams(); const { id } = useParams();
const [tp, setTp] = useState<Tp>(); const [ji, setJi] = useState<Ji>();
const copyText = (copy: string) => { const copyText = (copy: string) => {
navigator.clipboard.writeText(copy); navigator.clipboard.writeText(copy);
@ -18,24 +18,24 @@ function Practical() {
}; };
useEffect(() => { useEffect(() => {
axios.get(`/api/tps/${id}`).then((res) => { axios.get(`/api/ji/${id}`).then((res) => {
setTp(res.data); setJi(res.data);
}); });
}, [id]); }, [id]);
return ( return (
<> <>
{tp && ( {ji && (
<> <>
<h1 className="text-3xl font-bold mb-2 ms-10">{tp.name}</h1> <h1 className="text-3xl font-bold mb-2 ms-10">{ji.name}</h1>
<div className="px-6"> <div className="px-6">
<div className="flex flex-col lg:flex-row"> <div className="flex flex-col lg:flex-row">
<div className="lg:w-2/3 p-4"> <div className="lg:w-2/3 p-4">
<div className="w-full h-[80vh] bg-gray-200 rounded-lg overflow-hidden mb-4"> <div className="w-full h-[80vh] bg-gray-200 rounded-lg overflow-hidden mb-4">
<iframe <iframe
src={tp.pdfLink} src={ji.pdfLink}
className="w-full h-full" className="w-full h-full"
title={`${tp.name} PDF`} title={`${ji.name} PDF`}
></iframe> ></iframe>
</div> </div>
</div> </div>
@ -46,7 +46,7 @@ function Practical() {
Information Information
</h2> </h2>
<ul className="space-y-4"> <ul className="space-y-4">
<li>{tp.description}</li> <li>{ji.description}</li>
<li className="flex justify-between"> <li className="flex justify-between">
<span>Duration:</span> <span>Duration:</span>
<span className="font-medium">2 hours</span> <span className="font-medium">2 hours</span>
@ -74,9 +74,9 @@ function Practical() {
<span>SSH:</span> <span>SSH:</span>
<div <div
className="flex gap-2 items-center" className="flex gap-2 items-center"
onClick={() => copyText(tp.ssh)} onClick={() => copyText(ji.ssh)}
> >
<span className="font-medium">{tp.ssh}</span> <span className="font-medium">{ji.ssh}</span>
<div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded"> <div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
<ClipboardIcon className="size-6" /> <ClipboardIcon className="size-6" />
</div> </div>
@ -86,9 +86,9 @@ function Practical() {
<span>Port:</span> <span>Port:</span>
<div <div
className="flex gap-2 items-center" className="flex gap-2 items-center"
onClick={() => copyText(tp.port)} onClick={() => copyText(ji.port)}
> >
<span className="font-medium">{tp.port}</span> <span className="font-medium">{ji.port}</span>
<div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded"> <div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
<ClipboardIcon className="size-6" /> <ClipboardIcon className="size-6" />
</div> </div>
@ -98,9 +98,9 @@ function Practical() {
<span>Password:</span> <span>Password:</span>
<div <div
className="flex gap-2 items-center" className="flex gap-2 items-center"
onClick={() => copyText(tp.pwd)} onClick={() => copyText(ji.pwd)}
> >
<span className="font-normal">{tp.pwd}</span> <span className="font-normal">{ji.pwd}</span>
<div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded"> <div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
<ClipboardIcon className="size-6" /> <ClipboardIcon className="size-6" />
</div> </div>
@ -109,7 +109,7 @@ function Practical() {
</ul> </ul>
</div> </div>
<a <a
href={tp.pdfLink} href={ji.pdfLink}
target="_blank" target="_blank"
className="card w-full bg-base-200 shadow-md hover:shadow-lg transition-shadow rounded-lg mt-6" className="card w-full bg-base-200 shadow-md hover:shadow-lg transition-shadow rounded-lg mt-6"
> >
@ -132,4 +132,4 @@ function Practical() {
); );
} }
export default Practical; export default Immersion;

26
src/pages/Practicals.tsx → src/pages/Immersions.tsx
View File

@ -1,32 +1,32 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import axios from "axios"; import axios from "axios";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Tp } from "../type/TpType"; import { Ji } from "../type/JiType";
function Practicals() { function Immersions() {
const [tps, setTps] = useState([]); const [jis, setJis] = useState([]);
useEffect(() => { useEffect(() => {
axios.get("/api/tps").then((res) => { axios.get("/api/ji/listall").then((res) => {
setTps(res.data); setJis(res.data);
}); });
}, []); }, []);
return ( return (
<div className="container mx-auto py-10"> <div className="container mx-auto py-10">
<h1 className="text-3xl font-bold mb-6 text-center">Your TPs</h1> <h1 className="text-3xl font-bold mb-6 text-center">Journees d immersion - Activities</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{tps.map((practical: Tp) => ( {jis.map((ji: Ji) => (
<div <div
key={practical.id} key={ji.id}
className="card card-compact bg-base-200 shadow-lg p-4" className="card card-compact bg-base-200 shadow-lg p-4"
> >
<div className="card-body"> <div className="card-body">
<h2 className="card-title">{practical.name}</h2> <h2 className="card-title">{ji.name}</h2>
<p>{practical.description}</p> <p>{ji.description}</p>
<div className="card-actions justify-end"> <div className="card-actions justify-end">
<Link to={`/tps/${practical.id}`} className="btn btn-primary"> <Link to={`/immersion/${ji.id}`} className="btn btn-primary">
Learn More Open activity
</Link> </Link>
</div> </div>
</div> </div>
@ -37,4 +37,4 @@ function Practicals() {
); );
} }
export default Practicals; export default Immersions;