Skip to content

W
web-ui
Commit b32256c3 by Owen Ryan Ang
Options

Merge branch 'development-mobile' into 'feature-WG-402'

# Conflicts: # WebGde/WebContent/WebGde-Widgets/config.js # WebGde/WebContent/script.js
parents 0dd54c6c aa4e9def
Showing with 391 additions and 56 deletions
WebGde/.classpath
...@@ -6,9 +6,8 @@ ...@@ -6,9 +6,8 @@
<attribute name="maven.pomderived" value="true"/> <attribute name="maven.pomderived" value="true"/>
</attributes> </attributes>
</classpathentry> </classpathentry>
<classpathentry exported="true" kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8"> <classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8">
<attributes> <attributes>
<attribute name="module" value="true"/>
<attribute name="maven.pomderived" value="true"/> <attribute name="maven.pomderived" value="true"/>
</attributes> </attributes>
</classpathentry> </classpathentry>
...@@ -18,16 +17,29 @@ ...@@ -18,16 +17,29 @@
<attribute name="org.eclipse.jst.component.dependency" value="/WEB-INF/lib"/> <attribute name="org.eclipse.jst.component.dependency" value="/WEB-INF/lib"/>
</attributes> </attributes>
</classpathentry> </classpathentry>
<classpathentry kind="con" path="org.eclipse.payara.tools.lib.system"> <classpathentry kind="src" output="target/test-classes" path="src/test/java">
<attributes>
<attribute name="test" value="true"/>
<attribute name="optional" value="true"/>
<attribute name="maven.pomderived" value="true"/>
</attributes>
</classpathentry>
<classpathentry kind="con" path="fish.payara.eclipse.tools.server.lib.system">
<attributes> <attributes>
<attribute name="owner.project.facets" value="jst.web"/> <attribute name="owner.project.facets" value="jst.web"/>
</attributes> </attributes>
</classpathentry> </classpathentry>
<classpathentry kind="src" output="target/test-classes" path="src/test/java"> <classpathentry excluding="**" kind="src" output="target/classes" path="src/main/resources">
<attributes> <attributes>
<attribute name="test" value="true"/> <attribute name="maven.pomderived" value="true"/>
<attribute name="optional" value="true"/> <attribute name="optional" value="true"/>
</attributes>
</classpathentry>
<classpathentry excluding="**" kind="src" output="target/test-classes" path="src/test/resources">
<attributes>
<attribute name="maven.pomderived" value="true"/> <attribute name="maven.pomderived" value="true"/>
<attribute name="test" value="true"/>
<attribute name="optional" value="true"/>
</attributes> </attributes>
</classpathentry> </classpathentry>
<classpathentry kind="output" path="target/classes"/> <classpathentry kind="output" path="target/classes"/>
......
WebGde/.settings/org.eclipse.wst.common.project.facet.core.xml
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<faceted-project> <faceted-project>
<runtime name="Payara Server 5 (5.2022.5)"/> <runtime name="Payara"/>
<fixed facet="jst.web"/> <fixed facet="jst.web"/>
<fixed facet="java"/> <fixed facet="java"/>
<fixed facet="wst.jsdt.web"/> <fixed facet="wst.jsdt.web"/>
......
WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.css 0 → 100644
/* Reset and General Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
html,
body {
min-height: 100vh;
height: 100%;
margin: 0;
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
overflow-y: hidden;
}
/* Main Container */
#containerId {
max-width: 900px;
margin: 2rem 1rem;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 2rem;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Element List Wrapper */
.element-list {
max-height: 70vh;
overflow-y: auto;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid #e0e0e0;
}
/* Element Containers */
.element-container {
display: flex;
flex-direction: column;
background-color: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 1.5rem;
padding: 1rem;
transition: all 0.3s ease;
cursor: pointer;
}
.element-container:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.element-container.selected {
background-color: #d3e5ff;
border-color: #007bff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* Element Item */
.element-item {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Element Details */
.extra-details {
margin-top: 1rem;
font-size: 0.9rem;
color: #7d7d7d;
}
/* Detail Item */
.detail-item {
margin-top: 0.5rem;
padding: 0.5rem 0;
border-top: 1px solid #e0e0e0;
font-size: 0.9rem;
color: #7d7d7d;
}
/* Buttons */
button {
padding: 1rem 2rem;
border: none;
border-radius: 50px;
font-size: 1rem;
color: #fff;
background-color: #007bff;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.1s ease;
}
button:active {
transform: scale(0.95);
}
button.encode:hover,
button.encode:active {
background-color: #0056b3;
}
button.new {
background-color: #28a745;
}
button.new:hover,
button.new:active {
background-color: #218838;
}
.button-container {
margin-top: auto;
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
}
button.disabled {
background-color: #ccc;
cursor: not-allowed;
}
/* Media Queries */
@media (max-width: 768px) {
#containerId {
padding: 1rem;
}
.element-container,
button {
padding: 1rem;
}
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.js 0 → 100644
const API_ROOT = "http://18.233.158.67:8080/bpo/req";
export class ElementListWidget {
global = {
container: null,
newButton: null,
encodeButton: null,
selectedElement: null,
workers: []
};
constructor(nodeId, containerId) {
this.nodeId = nodeId;
this.global.container = document.getElementById(containerId);
if (!this.global.container) {
this.global.container = document.createElement('div');
this.global.container.id = containerId;
document.body.appendChild(this.global.container);
}
this.workerId = sessionStorage.getItem("user_id");
this.init(nodeId, this.workerId);
}
async init(nodeId, workerId) {
console.log(`Fetching workers for node ID: ${nodeId}`);
const workerResponse = await fetchWorkersForNode(nodeId);
console.log("Worker API Response:", workerResponse);
if (workerResponse.successful && Array.isArray(workerResponse.workers)) {
this.global.workers = workerResponse.workers;
} else {
console.error('Failed to fetch workers:', workerResponse);
return;
}
const selectedWorker = this.global.workers.find(worker => worker.workerId === workerId);
if (!selectedWorker) {
console.error(`Worker with ID ${workerId} not found.`);
return;
}
/* console.log(`Fetching elements for node ID: ${nodeId}`);*/
const elementResponse = await fetchElementsForNode(nodeId);
/* console.log("Elements API Response:", elementResponse);*/
if (elementResponse.successful && Array.isArray(elementResponse.elements)) {
this.elements = elementResponse.elements.filter(element =>
selectedWorker.queueIndex.includes(element.queueIndex)
);
} else {
this.elements = [];
console.error('Failed to fetch elements or received malformed data:', elementResponse);
}
this.render();
}
render() {
this.global.container.innerHTML = "";
// Helper function to deselect all elements and remove their extra details
const deselectAll = () => {
document.querySelectorAll(".element-container.selected").forEach(el => {
el.classList.remove("selected");
this.removeExtraDetails(el);
});
this.global.selectedElement = null;
this.global.encodeButton.disabled = true;
this.global.encodeButton.classList.add("disabled");
};
// Initialize the encode button as disabled
this.global.encodeButton = document.createElement("button");
this.global.encodeButton.textContent = "ENCODE";
this.global.encodeButton.disabled = true;
this.global.encodeButton.classList.add("disabled");
// Create an element list container for the elements
const elementList = document.createElement("div");
elementList.classList.add("element-list");
this.elements.forEach(element => {
const elementContainer = document.createElement("div");
elementContainer.classList.add("element-container");
const elementDiv = document.createElement("div");
elementDiv.classList.add("element-item");
const elementIdSpan = document.createElement("span");
elementIdSpan.textContent = element.elementId;
elementDiv.appendChild(elementIdSpan);
elementContainer.appendChild(elementDiv);
elementList.appendChild(elementContainer);
// Move the click event listener from the elementDiv to the elementContainer
elementContainer.addEventListener("click", () => {
if (elementContainer.classList.contains("selected")) {
deselectAll();
} else {
deselectAll();
elementContainer.classList.add("selected");
this.global.selectedElement = element;
this.showExtraDetails(element, elementContainer);
this.global.encodeButton.disabled = false;
this.global.encodeButton.classList.remove("disabled");
}
});
});
this.global.container.appendChild(elementList); // Add the wrapped elements to the main container
// Create a parent div for the buttons
const buttonContainer = document.createElement("div");
buttonContainer.classList.add("button-container");
this.global.encodeButton.addEventListener("click", () => {
if (this.global.encodeButton.disabled) {
return;
}
if (this.global.selectedElement) {
this.handleEncodeClick(this.global.selectedElement);
}
});
buttonContainer.appendChild(this.global.encodeButton);
const newButton = document.createElement("button");
newButton.textContent = "NEW";
newButton.addEventListener("click", () => this.handleNewClick());
buttonContainer.appendChild(newButton);
this.global.container.appendChild(buttonContainer);
this.global.newButton = newButton;
}
getContainer() {
return this.global.container;
}
getNewButton() {
return this.global.newButton;
}
getEncodeButton() {
return this.global.encodeButton;
}
showExtraDetails(element, elementContainer) {
// Remove existing extra details if any
this.removeExtraDetails(elementContainer);
// Check if there are any extra details
if (element.extraDetails && Object.keys(element.extraDetails).length > 0) {
Object.entries(element.extraDetails).forEach(([key, value]) => {
const detailDiv = document.createElement("div");
detailDiv.classList.add("detail-item");
const detailSpan = document.createElement("span");
detailSpan.textContent = `${key}: ${value}`;
detailDiv.appendChild(detailSpan);
elementContainer.appendChild(detailDiv);
});
}
}
removeExtraDetails(elementContainer) {
const detailsItems = elementContainer.querySelectorAll(".detail-item");
if (detailsItems.length > 0) {
detailsItems.forEach(detailItem => {
detailItem.remove();
});
}
}
}
async function fetchWorkersForNode(nodeId) {
const response = await fetch(`${API_ROOT}/nodes/${nodeId}/workers`);
return await response.json();
}
async function fetchElementsForNode(nodeId) {
const response = await fetch(`${API_ROOT}/nodes/${nodeId}/elements`);
return await response.json();
}
WebGde/WebContent/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<title>Data Input Field</title> <head>
<meta charset="UTF-8"> <title>Data Input Field</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css"> <link rel="stylesheet" href="./style.css">
<link id="loginStylesheet" rel="stylesheet" href="./WebGde-Widgets/LogInWidget/LoginStyle.css"> <link rel="stylesheet" href="./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css">
<script type="module" src="./script.js"></script> <link rel="stylesheet" href="./WebGde-Widgets/ElementListWidget/ElementListWidget.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" <link id="loginStylesheet" rel="stylesheet" href="./WebGde-Widgets/LogInWidget/LoginStyle.css">
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script type="module" src="./script.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.6.0.min.js"
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" type="text/javascript"></script> integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css"> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"
<script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script> type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script> <link rel="stylesheet" href="./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<!-- <script src="https://auth.svi.cloud/auth/js/keycloak.js"></script> <script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
<script type="text/javascript" src="./keycloak-login.js"></script> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
</head> <!-- <script src="https://auth.svi.cloud/auth/js/keycloak.js"></script>
<body> <script type="text/javascript" src="./keycloak-login.js"></script> -->
</body>
</head>
<body>
</body>
</html> </html>
\ No newline at end of file
WebGde/WebContent/style.css
...@@ -544,17 +544,6 @@ span#filename { ...@@ -544,17 +544,6 @@ span#filename {
margin-top: 15%; margin-top: 15%;
} }
.loader {
font-size: 10px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
animation: mulShdSpin 1.1s infinite ease;
transform: translateZ(0);
}
@keyframes mulShdSpin { @keyframes mulShdSpin {
0%, 0%,
100% { 100% {
...@@ -1010,19 +999,6 @@ span#filename { ...@@ -1010,19 +999,6 @@ span#filename {
border: 0px !important; border: 0px !important;
} }
.loader {
font-size: 10px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
left: 34px;
top: 37px;
text-indent: -9999em;
animation: mulShdSpin 1.1s infinite ease;
transform: translateZ(0);
}
@keyframes mulShdSpin { @keyframes mulShdSpin {
0%, 0%,
100% { 100% {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment