From e737dd3ebe34f39f454196ab5250198a979147b7 Mon Sep 17 00:00:00 2001
From: mperezsa <19-mperezsa@users.noreply.022e47118ec0>
Date: Thu, 25 Nov 2021 12:48:25 +0000
Subject: [PATCH] Upload New File
---
.../client/src/components/pages/TrackUnits.js | 114 ++++++++++++++++++
1 file changed, 114 insertions(+)
create mode 100644 PROF-XXI FW Tool/client/src/components/pages/TrackUnits.js
diff --git a/PROF-XXI FW Tool/client/src/components/pages/TrackUnits.js b/PROF-XXI FW Tool/client/src/components/pages/TrackUnits.js
new file mode 100644
index 0000000..0760c60
--- /dev/null
+++ b/PROF-XXI FW Tool/client/src/components/pages/TrackUnits.js
@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import Footer from "../../components/Footer";
+import "./Default.css";
+import "./Tracking.css";
+import axios from "axios";
+
+function TrackUnits() {
+ const [unit, setUnit] = useState({
+ unitId: "",
+ unitName: "",
+ unitType: "",
+ unitDescription: "",
+ accessType: "",
+ });
+
+ const [units, setUnits] = useState([]);
+ const [participants, setParticipants] = useState([]);
+
+ const handleChange = (e) => {
+ const fieldName = e.target.name;
+ const fieldValue = e.target.value;
+ setUnit({ ...unit, [fieldName]: fieldValue });
+ };
+
+ const [profile, setProfile] = useState(
+ JSON.parse(localStorage.getItem("profile"))
+ );
+
+ const config = {
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${profile.token}`,
+ },
+ };
+
+ const fetchData = async (e) => {
+ const { data } = await axios.get("/api/units/manageunit", config);
+ setUnits(data.unitsResult);
+ };
+
+ const fetchParticipants = async () => {
+ const { data } = await axios.get(
+ `/api/links/participants/${unit.unitId}`,
+ config
+ );
+ setParticipants(data.participantsResult);
+ };
+
+ useEffect(() => {
+ document.title = "Track your units";
+ setProfile(JSON.parse(localStorage.getItem("profile")));
+ if (!profile?.token) {
+ window.location = "/login";
+ }
+
+ fetchData();
+ fetchParticipants();
+ }, [unit.unitId]);
+
+ return (
+ <>
+ <h2> Track units participants </h2>
+ <div className="table-container">
+ <div>
+ <form className="form">
+ <label htmlFor="unit"> Change Unit : </label>
+ <select
+ id="unitId"
+ name="unitId"
+ value={unit.unitId}
+ onChange={handleChange}
+ >
+ <option> Select your unit Please </option>
+ {units?.map((unit) => (
+ <option key={unit.idunit} value={unit.idunit}>
+ {unit.name}
+ </option>
+ ))}
+ </select>
+ <Link to="/workingarea">
+ <button className="btn"> Working area</button>
+ </Link>
+ </form>
+ </div>
+
+ <div>
+ <table className="track">
+ <tr>
+ <th>Participant full name</th>
+ <th>Email</th>
+ <th>Date of Answering the scan</th>
+ </tr>
+
+ {participants.map((e) => {
+ return (
+ <tr key={e.date}>
+ <td>
+ {e.participantfirstname} {e.participantlastname}
+ </td>
+ <td>{e.participantemail}</td>
+ <td>{e.date}</td>
+ </tr>
+ );
+ })}
+ </table>
+ </div>
+ </div>
+ <Footer />
+ </>
+ );
+}
+
+export default TrackUnits;
--
GitLab