CREATE: view diagrams integrated

frontend/src/config/assets.config.js

+export const assetsUrl = "http://localhost:5000/outputs";

frontend/src/pages/GeneratedDiagrams.js

 import axios from "axios";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import React, { useEffect, useState } from "react";
 import Sidebar from "../components/sidebar/Sidebar";
 import TopNav from "../components/topnav/TopNav";
-import Table from "../components/table/Table";
-import Badge from "../components/badge/Badge";
-import Spinner from "../components/loading/Spinner";
-import { RiDeleteBinLine } from "react-icons/ri";
-import Popup from "./Popup";
+import { assetsUrl } from "../config/assets.config";
 
 const ViewAssignment = () => {
-	const siteId = localStorage.getItem("site");
-	const [Materials, setMaterials] = useState([]);
-	const students = [
-		{
-			email: "email@gmail.com",
-			submittedAt: "2022-04-05",
-			submission: "IT1912192.png",
-			plagiarismPercentage: 40,
-			CorrectnessPercentage: 70,
-		},
-		{
-			email: "email@gmail.com",
-			submittedAt: "2022-04-05",
-			submission: "IT1912192.png",
-			plagiarismPercentage: 10,
-			CorrectnessPercentage: 70,
-		},
-		{
-			email: "email@gmail.com",
-			submittedAt: "2022-04-05",
-			submission: "IT1912192.png",
-			plagiarismPercentage: 30,
-			CorrectnessPercentage: 70,
-		},
-	];
-	const fields = [
-		"",
-		"Student Email",
-		"Submission",
-		"Plagiarism Percentage",
-		"Correctness Percentage",
-		"Submitted At",
-		"Action",
-	];
-	const permissionStatus = {
-		pending: "warning",
-		approved: "success",
-		rejected: "danger",
-	};
-	const [OrderDetail, setOrderDetail] = useState([]);
+	const { id } = useParams();
+	const [diagrams, setDiagrams] = useState({});
 	const [Loading, setLoading] = useState(false);
-	const [Trigger, setTrigger] = useState(false);
-	const [Name, setName] = useState("");
-	const [Id, setId] = useState("");
-	const [ItemName, setItemName] = useState("");
-	const [Description, setDescription] = useState("");
-
-	const [Order, setOrder] = useState({
-		item: {},
-		quantity: 0,
-		siteid: siteId,
-		requiredDate: "",
-		urgentOrder: false,
-	});
-	console.log(Order);
-
-	const FetchData = async () => {
-		const resMaterials = await axios.get(`materials`);
-		setMaterials(resMaterials.data.materials);
 
-		const resOrders = await axios.get("/orders");
-		setOrderDetail(resOrders.data.orders);
-
-		if (resOrders.statusText === "OK") {
-			setLoading(true);
+	const getDiagrams = async () => {
+		setLoading(true);
+		try {
+			const res = await axios.get("/diagrams/" + id);
+			console.log(res);
+			setDiagrams(res.data.diagrams);
+			setLoading(false);
+		} catch (err) {
+			console.log(err.response);
 		}
 	};
 
 	useEffect(() => {
-		FetchData();
+		getDiagrams();
 	}, []);
 
-	const orderHandler = async () => {
-		try {
-			console.log(Order);
-			const res = await axios.post("/orders", Order);
-			if (res.statusText === "OK") {
-				window.location.reload();
-			}
-		} catch (Err) {
-			console.log(Err.response);
-		}
-	};
-
 	return (
 		<div>
 			<Sidebar />
@@ -105,7 +37,7 @@ const ViewAssignment = () => {
 							<h1 className="page-header">CTSE Assignment 01</h1>
 						</div>
 						<div className="col-1" style={{ marginTop: "1rem" }}>
-							<Link to={`/auth/teacher/assignments/1`}>
+							<Link to={`/auth/teacher/assignments/${id}`}>
 								<button className="view-btn">Back to Assignment</button>
 							</Link>
 						</div>
@@ -118,8 +50,9 @@ const ViewAssignment = () => {
 								<br />
 								<div className="flex" style={{ justifyContent: "center" }}>
 									<img
-										src="https://d2slcw3kip6qmk.cloudfront.net/marketing/pages/chart/what-is-a-use-case-diagram-in-UML/UML_use_case_example-800x707.PNG"
+										src={assetsUrl + diagrams.usecase_diagram}
 										alt="usecase"
+										style={{ width: "100%", height: "100%" }}
 									/>
 								</div>
 							</div>
@@ -132,8 +65,9 @@ const ViewAssignment = () => {
 								<br />
 								<div className="flex" style={{ justifyContent: "center" }}>
 									<img
-										src="https://www.researchgate.net/profile/Sergi-Valverde/publication/225686440/figure/fig3/AS:667828239732738@1536234068086/A-simple-class-diagram-for-a-commercial-software-application-in-UML-notation-The.png"
+										src={assetsUrl + diagrams.class_diagram}
 										alt="usecase"
+										style={{ width: "100%", height: "100%" }}
 									/>
 								</div>
 							</div>

frontend/src/pages/ViewAssignment.js

@@ -6,8 +6,6 @@ import TopNav from "../components/topnav/TopNav";
 import Table from "../components/table/Table";
 import Badge from "../components/badge/Badge";
 import Spinner from "../components/loading/Spinner";
-import { RiDeleteBinLine } from "react-icons/ri";
-import Popup from "./Popup";
 
 const ViewAssignment = () => {
 	const { id } = useParams();
@@ -86,7 +84,7 @@ const ViewAssignment = () => {
 			<td>{item.submittedAt}</td>
 			<td>
 				<div style={{ display: "flex", alignItems: "center" }}>
-					<Link to={``}>
+					<Link to={""}>
 						<button className="view-btn">View</button>
 					</Link>
 				</div>
@@ -110,7 +108,7 @@ const ViewAssignment = () => {
 										</h3>
 									</div>
 									<div className="col-1">
-										<Link to={`/auth/teacher/assignments/1/diagrams`}>
+										<Link to={`/auth/teacher/assignments/${id}/diagrams`}>
 											<button className="view-btn">View Generated Diagrams</button>
 										</Link>
 									</div>