rodude123/my-portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added in ability to add a new project with and with an image and update a project with and without image. If a project is the main project then it cannot be deleted and when a new main project is selected it gets moved to the top.

Browse Source 
Signed-off-by: rodude123 <rodude123@gmail.com>
This commit is contained in:
Rohit Pai
2023-02-07 03:09:14 +00:00
parent fd64eb92b0
commit 2c612e5776
10 changed files with 237 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/index.php
+15 -7
View File
@@ -218,17 +218,17 @@ $app->patch("/projectData/{id}", function (Request $request, Response $response,
$data = $request->getParsedBody();
if ($args["id"] != "undefined")
{
if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["projectLink"]) || empty($data["gitLink"]))
if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["gitLink"]))
{
// uh oh sent some empty data
$response->getBody()->write(json_encode(array("error" => "Only some of the data was sent")));
return $response->withStatus(400);
}
if (!$projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], "", $data["projectLink"], $data["gitLink"]))
if (!$projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]))
{
// uh oh something went wrong
$response->getBody()->write(json_encode(array("error" => "Something went wrong")));
$response->getBody()->write(json_encode(array("error" => "Something went wrong", "data" => $projectData->updateProjectData($args["id"], $data["title"], $data["isMainProject"], $data["information"], $data["projectLink"], $data["gitLink"]))));
return $response->withStatus(500);
}
return $response;
@@ -243,13 +243,21 @@ $app->delete("/projectData/{id}", function (Request $request, Response $response
global $projectData;
if ($args["id"] != null)
{
if (!$projectData->deleteProjectData($args["id"]))
$message = $projectData->deleteProjectData($args["id"]);
if ($message === "error")
{
// uh oh something went wrong
$response->getBody()->write(json_encode(array("error" => "Something went wrong")));
$response->getBody()->write(json_encode(array("error" => "Something went wrong or the project with ID ".$args["id"]."does not exist")));
return $response->withStatus(500);
}
if ($message === "cannot delete")
{
//uh oh cannot delete the main project
$response->getBody()->write(json_encode(array("error" => "Cannot delete the main project")));
return $response->withStatus(409);
}
return $response;
}
@@ -261,7 +269,7 @@ $app->post("/projectData", function (Request $request, Response $response)
{
global $projectData;
$data = $request->getParsedBody();
if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["projectLink"]) || empty($data["gitLink"]))
if (empty($data["title"]) || empty($data["isMainProject"]) || empty($data["information"]) || empty($data["gitLink"]))
{
// uh oh sent some empty data
$response->getBody()->write(json_encode(array("error" => "Only some of the data was sent")));
@@ -272,7 +280,7 @@ $app->post("/projectData", function (Request $request, Response $response)
if (!is_int($insertedID))
{
// uh oh something went wrong
$response->getBody()->write(json_encode(array("error" => "Something went wrong")));
$response->getBody()->write(json_encode(array("error" => "Something went wrong", "message" => $insertedID)));
return $response->withStatus(500);
}
src/api/projectData.php
+62 -21
View File
@@ -18,7 +18,7 @@ class projectData
function getProjectData(): array
{
$conn = dbConn();
$stmt = $conn->prepare("SELECT ID, title, isMainProject, information, imgLocation, projectLink, gitLink FROM projects;");
$stmt = $conn->prepare("SELECT ID, title, isMainProject, information, imgLocation, projectLink, gitLink FROM projects ORDER BY isMainProject DESC;");
$stmt->execute();
// set the resulting array to associative
@@ -37,52 +37,66 @@ class projectData
* Update project data in the database with the given ID
* @param string $ID - ID of the project in the database to update
* @param string $title - Title of the project
* @param bool $isMainProject - Is the project a main project or not
* @param string $isMainProject - Is the project a main project or not
* @param string $information - Information about the project
* @param string $imgLocation - Location of the image
* @param string $projectLink - Link to the project
* @param string $gitLink - Link to the github repository
* @param string $gitLink - Link to the git repository
* @return bool - True if project was updated, false if not and there was an error
*/
function updateProjectData(string $ID, string $title, bool $isMainProject, string $information, string $imgLocation, string $projectLink, string $gitLink): bool
function updateProjectData(string $ID, string $title, string $isMainProject, string $information, string $projectLink, string $gitLink): bool
{
$conn = dbConn();
$stmt = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information, imgLocation = :imgLocation, projectLink = :projectLink, gitLink = :gitLink WHERE ID = :ID");
if ($isMainProject === "true")
{
$stmtMainProject = $conn->prepare("UPDATE projects SET isMainProject = 0;");
$stmtMainProject->execute();
}
$stmt = $conn->prepare("UPDATE projects SET title = :title, isMainProject = :isMainProject, information = :information, projectLink = :projectLink, gitLink = :gitLink WHERE ID = :ID");
$stmt->bindParam(":title", $title);
$stmt->bindParam(":isMainProject", $isMainProject);
$isMainProj = ($isMainProject) ? 1 : 0;
$stmt->bindParam(":isMainProject", $isMainProj);
$stmt->bindParam(":information", $information);
$stmt->bindParam(":imgLocation", $imgLocation);
$stmt->bindParam(":projectLink", $projectLink);
$stmt->bindParam(":gitLink", $gitLink);
$stmt->bindParam(":ID", $ID);
$stmt->execute();
if ($stmt->rowCount() > 0)
{
return true;
}
return false;
return $stmt->execute();
}
/**
* Delete project data from the database
* @param int $ID - ID of the project in the database to delete
* @return bool - True if project was deleted, false if not and there was an error
* @return string - True if project was deleted, false if not and there was an error
*/
function deleteProjectData(int $ID): bool
function deleteProjectData(int $ID): string
{
$conn = dbConn();
// check if the project is a main project if it is return false
$stmtMainProject = $conn->prepare("SELECT isMainProject FROM projects WHERE ID = :ID");
$stmtMainProject->bindParam(":ID", $ID);
$stmtMainProject->execute();
$result = $stmtMainProject->fetch(PDO::FETCH_ASSOC);
if ($result["isMainProject"] === "1")
{
return "cannot delete";
}
$this->deleteImage($ID);
$stmt = $conn->prepare("DELETE FROM projects WHERE ID = :ID");
$stmt->bindParam(":ID", $ID);
$stmt->execute();
if ($stmt->rowCount() > 0)
{
return true;
return "ok";
}
return false;
return "error";
}
/**
@@ -96,10 +110,18 @@ class projectData
*/
function addProjectData(string $title, string $isMainProject, string $information, string $projectLink, string $gitLink): int|bool
{
$conn = dbConn();
if ($isMainProject === "true")
{
$stmtMainProject = $conn->prepare("UPDATE projects SET isMainProject = 0;");
$stmtMainProject->execute();
}
$stmt = $conn->prepare("INSERT INTO projects (title, isMainProject, information, projectLink, gitLink) VALUES (:title, :isMainProject, :information, :projectLink, :gitLink)");
$stmt->bindParam(":title", $title);
$stmt->bindParam(":isMainProject", $isMainProject);
$isMainProj = ($isMainProject) ? 1 : 0;
$stmt->bindParam(":isMainProject", $isMainProj);
$stmt->bindParam(":information", $information);
$stmt->bindParam(":projectLink", $projectLink);
$stmt->bindParam(":gitLink", $gitLink);
@@ -148,6 +170,7 @@ class projectData
if (file_exists($targetFile))
{
$this->deleteImage($ID);
// update the database with the new image location
$conn = dbConn();
$stmt = $conn->prepare("UPDATE projects SET imgLocation = :imgLocation WHERE ID = :ID");
@@ -165,4 +188,22 @@ class projectData
return "Couldn't upload the image";
}
/**
* Delete the image from the server
* @param int $ID - ID of the project in the database
*/
private function deleteImage(int $ID): void
{
$conn = dbConn();
$imgStmt = $conn->prepare("SELECT imgLocation FROM projects WHERE ID = :ID");
$imgStmt->bindParam(":ID", $ID);
$imgStmt->execute();
$imgLocation = $imgStmt->fetch(PDO::FETCH_ASSOC)["imgLocation"];
if ($imgLocation != null)
{
unlink($imgLocation);
}
}
}
src/editor/editor.html
-1
View File
@@ -13,7 +13,6 @@
<ul>
<li><a href="#" id="goToCV"><span>&lt;</span>CV<span>&gt;</span></a></li>
<li><a href="#" id="goToProjects" class="active"><span>&lt;</span>Projects<span>&gt;</span></a></li>
<li><a href="#" id="goToSettings"><span>&lt;</span>Settings<span>&gt;</span></a></li>
<li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li>
</ul>
</nav>
src/editor/js/editor.js
+78 -17
View File
@@ -14,7 +14,6 @@ document.addEventListener('DOMContentLoaded', () =>
document.querySelector("#dateFromE").max = new Date().toISOString().split("T")[0];
document.querySelector("#dateFromW").max = new Date().toISOString().split("T")[0];
fetch("/api/timelineData/edu").then(res =>
{
res.json().then(json =>
@@ -56,11 +55,11 @@ document.addEventListener('DOMContentLoaded', () =>
{
json.forEach(item =>
{
addProject(item["ID"], (item["imgLocation"] === "") ? "../imgs/placeholder.png" : item["imgLocation"], item["title"], item["information"], item["projectLink"], item["gitLink"]);
addProject(item["ID"], (item["isMainProject"] === "1" ? "true" : "false"), (item["imgLocation"] === "") ? "../imgs/placeholder.png" : item["imgLocation"], item["title"], item["information"], item["projectLink"], item["gitLink"]);
})
return;
}
document.querySelector("#projects").innerHTML = "No project data found";
document.querySelector("#projList").innerHTML = "No project data found";
})
})
})
@@ -177,7 +176,7 @@ document.querySelector("#addProj").addEventListener("submit", e =>
data.append("title", document.querySelector("#projTitle").value);
data.append("isMainProject", document.querySelector("#isMainProject").checked ? "true" : "false");
data.append("information", document.querySelector("#projInfo").value);
data.append("projectLink", document.querySelector("#projLink").value);
data.append("projectLink", (document.querySelector("#projLink").value) ? document.querySelector("#projLink").value : "N/A");
data.append("gitLink", document.querySelector("#gitLink").value);
let imgData = new FormData();
@@ -197,7 +196,7 @@ document.querySelector("#addProj").addEventListener("submit", e =>
{
if (imgData.get("img") === "undefined")
{
addProject(newProjectData.ID, "../imgs/placeholder.png", data.get("title"), data.get("information"), data.get("projectLink"), data.get("gitLink"));
addProject(newProjectData.ID, data.get("isMainProject"),"../imgs/placeholder.png", data.get("title"), data.get("information"), data.get("projectLink"), data.get("gitLink"));
document.querySelector("#addProj").reset();
return;
}
@@ -220,11 +219,12 @@ document.querySelector("#addProj").addEventListener("submit", e =>
}
showErrorMessage(newProjectData.error, "proj");
}).then(res => res.json().then(newProjectImage =>
{
if (res.ok)
{
addProject(newProjectID, newProjectImage.imgLocation, data.get("title"), data.get("information"), data.get("projectLink"), data.get("gitLink"));
addProject(newProjectID, data.get("isMainProject"), newProjectImage.imgLocation, data.get("title"), data.get("information"), data.get("projectLink"), data.get("gitLink"));
document.querySelector("#addProj").reset();
return;
}
@@ -574,12 +574,14 @@ function updateProjectItem(id, e)
e.preventDefault();
let data = {}
data["title"] = document.querySelector(`#title${id}`).value;
data["isMainProject"] = document.querySelector(`#isMainProject${id}`).checked;
data["img"] = document.querySelector(`#img${id}`).files[0];
data["isMainProject"] = document.querySelector(`#isMainProject${id}`).checked ? "true" : "false";
data["information"] = document.querySelector(`#info${id}`).value;
data["projectLink"] = document.querySelector(`#viewProj${id}`).value;
data["gitLink"] = document.querySelector(`#git${id}`).value;
let imgData = new FormData();
imgData.append("img", document.querySelector(`#img${id}`).files[0]);
fetch("/api/projectData/" + id, {
method: "PATCH",
body: JSON.stringify(data),
@@ -591,9 +593,60 @@ function updateProjectItem(id, e)
{
if (res.ok)
{
if (imgData.get("img") === "undefined")
{
if (data["isMainProject"] === "true")
{
document.querySelectorAll(".isMainProject input").forEach(item => item.checked = false);
document.querySelector(`#isMainProject${id}`).checked = true;
document.querySelector("#projList").prepend(document.querySelector(`#projectItem${id}`));
}
document.querySelector(`#projectItem${id}`).classList.toggle("editing");
document.querySelector(`#title${id}`).setAttribute("disabled", "");
document.querySelector(`#info${id}`).setAttribute("disabled", "");
return;
}
console.log("updating image")
return fetch("/api/projectImage/" + id, {
method: "POST",
body: imgData,
headers: {
"Authorization": "Bearer " + localStorage.getItem("token")
}
});
}
if (res.status === 401)
{
window.location.href = "./";
return;
}
res.json().then(projectDataError =>
{
document.querySelector(`#projError${id}`).classList.remove("hidden");
document.querySelector(`#projError${id} div`).innerHTML = projectDataError.error;
});
}).then(res => res.json().then(updatedProjectImage =>
{
if (res.ok)
{
if (data["isMainProject"] === "true")
{
document.querySelectorAll(".isMainProject input").forEach(item => item.checked = false);
document.querySelector(`#isMainProject${id}`).checked = true;
document.querySelector("#projList").prepend(document.querySelector(`#projectItem${id}`));
}
document.querySelector(`#projectItem${id}`).classList.toggle("editing");
document.querySelector(`#title${id}`).setAttribute("disabled", "");
document.querySelector(`#info${id}`).setAttribute("disabled", "");
document.querySelector(`#projectImage${id}`).src = updatedProjectImage.imgLocation;
return;
}
@@ -603,12 +656,10 @@ function updateProjectItem(id, e)
return;
}
res.json().then(json =>
{
document.querySelector(`#projError${id}`).classList.remove("hidden");
document.querySelector(`#projError${id} div`).innerHTML = json.error;
});
});
document.querySelector(`#projError${id}`).classList.remove("hidden");
document.querySelector(`#projError${id} div`).innerHTML = projectDataError.error;
}));
}
@@ -655,13 +706,14 @@ function deleteProjectItem(id)
/**
* Adds a new project to the page
* @param {number} id the id of the project from the database
* @param {string} isMainProject is it the main project
* @param {string} imgLocation the relative path of the image
* @param {string} title the title of the project
* @param {string} information the information about the project
* @param {string} projectLink the link to the project
* @param {string} gitLink the link to the git repository
*/
function addProject(id, imgLocation, title, information, projectLink, gitLink)
function addProject(id , isMainProject, imgLocation, title, information, projectLink, gitLink)
{
let projectItem = document.createElement("form");
projectItem.id = "projectItem" + id;
@@ -672,7 +724,7 @@ function addProject(id, imgLocation, title, information, projectLink, gitLink)
<button class="edit" type="button" id="edit${id}" onclick="editProjectItem(${id})"><i class="fa-solid fa-pen-to-square"></i></button>
<button class="delete" type="button" id="delete${id}" onclick="deleteProjectItem(${id})"><i class="fa-solid fa-trash"></i></button>
</div>
<img class="displayedImage" src="${(imgLocation === "N/A") ? "../imgs/500x400.jpg" : imgLocation}" alt="image preivew of the project">
<img class="displayedImage" id="projectImage${id}" src="${imgLocation}" alt="image preivew of the project">
<div class="formControl imageContainer">
<input type="file" name="img${id}" id="img${id}">
</div>
@@ -681,7 +733,7 @@ function addProject(id, imgLocation, title, information, projectLink, gitLink)
</div>
<div class="formControl isMainProject">
<label class="checkContainer" for="isMainProject${id}">Is It The Main Project
<input type="checkbox" id="isMainProject${id}" name="isMainProject${id}">
<input type="checkbox" id="isMainProject${id}" name="isMainProject${id}" ${(isMainProject === "true" ? "checked" : "")}>
<span class="checkmark"></span>
</label>
</div>
@@ -704,5 +756,14 @@ function addProject(id, imgLocation, title, information, projectLink, gitLink)
<a href="${(gitLink === "N/A") ? "#" : gitLink}" class="btn btnOutline boxShadowIn boxShadowOut">${(gitLink === "N/A") ? "disabled=\"disabled\"" : ""}Git</a>
</div>
`;
if (isMainProject === "true")
{
document.querySelectorAll(".isMainProject input").forEach(item => item.checked = false);
document.querySelector("#projList").prepend(projectItem);
return;
}
document.querySelector("#projList").appendChild(projectItem);
}
src/js/main.js
+2 -2
View File
@@ -171,7 +171,7 @@ function getProjectData()
document.getElementById("mainProj").innerHTML = `
<h1>${item["title"]}</h1>
<div>
<img src="imgs/1000x800.jpg" alt="">
<img src="${(item["imgLocation"] === "") ? "../imgs/placeholder.png" : item["imgLocation"]}" alt="">
<div class="flexRow">
<p>${item["information"]}</p>
<div class="flexCol">
@@ -186,7 +186,7 @@ function getProjectData()
document.querySelector("#otherProj div").innerHTML += `
<div class="oProjItem">
<img src="imgs/500x400.jpg" alt="">
<img src="${(item["imgLocation"] === "") ? "../imgs/placeholder.png" : item["imgLocation"]}" alt="">
<div class="flexCol">
<div>
<h3>${item["title"]}</h3>