292 lines
10 KiB
HTML
292 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Workbench</title>
|
|
|
|
<!-- JSTree default style -->
|
|
<link rel="stylesheet" href="/backend/jstree/dist/themes/default/style.min.css" />
|
|
|
|
<style>
|
|
h1 {
|
|
color: rgb(7, 9, 121); /* Changes text color to blue */
|
|
font-size: 2rem; /* Example: increase font size */
|
|
text-align: center; /* Example: center the text */
|
|
margin-top: 30px; /* Example: adjust margin */
|
|
margin-left: 50px;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
header {
|
|
height: 80px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
background-color: hsl(231, 73%, 61%);
|
|
border-top-left-radius: 100px;
|
|
}
|
|
|
|
#container {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
nav {
|
|
width: 200px;
|
|
background-color: hsl(231, 73%, 61%);
|
|
padding: 10px;
|
|
overflow-y: auto; /* Scrollbar if needed */
|
|
}
|
|
|
|
/* The iframe replaces the old #content <div> */
|
|
#contentFrame {
|
|
flex-grow: 1;
|
|
border: none;
|
|
}
|
|
|
|
/* ======================== MODAL STYLES ======================== */
|
|
.modal {
|
|
display: none; /* Hidden by default */
|
|
position: fixed;
|
|
z-index: 9999; /* On top of other elements */
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto; /* Enable scroll if needed */
|
|
background-color: rgba(0,0,0,0.4); /* Black/gray overlay */
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: #fff;
|
|
margin: 10% auto; /* 10% from top, center horizontally */
|
|
padding: 20px;
|
|
width: 300px; /* Adjust as needed */
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
|
position: relative;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.modal h2 {
|
|
margin: 0 0 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
.modal label {
|
|
display: block;
|
|
margin: 10px 0 5px;
|
|
}
|
|
|
|
.modal input[type="text"],
|
|
.modal input[type="password"] {
|
|
width: 100%;
|
|
padding: 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.modal button {
|
|
margin-top: 15px;
|
|
padding: 10px 20px;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
border: none;
|
|
background-color: hsl(231, 73%, 61%);
|
|
color: #fff;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.modal button:hover {
|
|
background-color: hsl(231, 73%, 70%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Workbench</h1>
|
|
<img src="logo.png" alt="Logo" style="height: 50px;">
|
|
</header>
|
|
|
|
<div id="container">
|
|
<nav>
|
|
<div id="tree"></div>
|
|
</nav>
|
|
<!-- Use an IFRAME instead of a <div id="content"> -->
|
|
<iframe id="contentFrame" name="contentFrame" width="100%" height="100%"></iframe>
|
|
</div>
|
|
|
|
<!-- ================ MODAL HTML ================ -->
|
|
<div id="loginModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" id="closeModal">×</span>
|
|
<h2>Login </h2>
|
|
<form id="loginForm" onsubmit="regLogin(); return false;">
|
|
<label for="stationNumber">Station Number:</label>
|
|
<input type="text" id="stationNumber" />
|
|
|
|
<label for="username">Username:</label>
|
|
<input type="text" id="username" />
|
|
|
|
<label for="password">Password:</label>
|
|
<input type="password" id="password" />
|
|
|
|
<!-- Add more fields if needed (e.g. Client ID) -->
|
|
|
|
<button type="submit">Login</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- jQuery and jsTree scripts -->
|
|
<script src="/backend/jquery/jquery-3.7.1.min.js"></script>
|
|
<script src="/backend/jstree/dist/jstree.min.js"></script>
|
|
|
|
<script>
|
|
// ---------------------- SESSION CHECK ----------------------
|
|
// Example: Let's say sessionContext or "globallogin" is initially null
|
|
let globallogin = null; // or read from sessionStorage if desired
|
|
|
|
// If no session context, show the modal
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
if (!globallogin) {
|
|
document.getElementById('loginModal').style.display = 'block';
|
|
}
|
|
});
|
|
|
|
// Close button for the modal
|
|
document.getElementById('closeModal').addEventListener('click', () => {
|
|
document.getElementById('loginModal').style.display = 'none';
|
|
});
|
|
|
|
// --------------- JSTree Initialization ---------------
|
|
$(function () {
|
|
$('#tree').jstree({
|
|
'core': {
|
|
'data': [
|
|
{
|
|
"text": "TR",
|
|
"icon": "tr.png",
|
|
"children": [
|
|
{ "text": "Workorder", "a_attr": { "data-page": "Workorder.html" } },
|
|
{ "text": "Station", "a_attr": { "data-page": "Station.html" } }
|
|
]
|
|
},
|
|
{
|
|
"text": "PM",
|
|
"icon": "pm.png",
|
|
"children": [
|
|
{ "text": "Seite 1", "a_attr": { "data-page": "pm_seite1.html" } },
|
|
{ "text": "Seite 2", "a_attr": { "data-page": "pm_seite2.html" } }
|
|
]
|
|
},
|
|
{
|
|
"text": "Import",
|
|
"children": [
|
|
{ "text": "PART", "a_attr": { "data-page": "PARTImport.html" } },
|
|
{ "text": "BOM", "a_attr": { "data-page": "BOMImport.html" } },
|
|
{ "text": "ERPGroup", "a_attr": { "data-page": "ErpAdd.html" } },
|
|
{ "text": "Contacts", "a_attr": { "data-page": "Contacts.html" } },
|
|
{ "text": "UserImport", "a_attr": { "data-page": "Useradd.html" } }
|
|
|
|
]
|
|
}
|
|
],
|
|
'html': true
|
|
}
|
|
});
|
|
|
|
// Larger variant if you want bigger icons
|
|
$.jstree.defaults.core.themes.variant = "large";
|
|
|
|
// When the user clicks a node
|
|
$('#tree').on('select_node.jstree', function (e, data) {
|
|
if (data.node.a_attr && data.node.a_attr['data-page']) {
|
|
const page = data.node.a_attr['data-page'];
|
|
// Instead of fetch/parse, we set the iframe's src:
|
|
document.getElementById('contentFrame').src = page;
|
|
}
|
|
});
|
|
});
|
|
|
|
// ============== LOGIN FUNCTION (REST CALL) ==============
|
|
const protocol = window.location.protocol;
|
|
const host = window.location.host;
|
|
const url = protocol + "//" + host;
|
|
|
|
|
|
|
|
function regLogin() {
|
|
const stationNumber = document.getElementById("stationNumber").value.trim();
|
|
const username = document.getElementById("username").value.trim();
|
|
const password = document.getElementById("password").value;
|
|
|
|
if (!stationNumber) {
|
|
stationNumber = "00000001";
|
|
}
|
|
|
|
|
|
// Example body structure (adjust to your exact API requirements)
|
|
const bodyData = {
|
|
"sessionValidationStruct": {
|
|
"stationNumber": stationNumber,
|
|
"stationPassword": "",
|
|
"user": username,
|
|
"password": password,
|
|
"client": "01",
|
|
"registrationType": "U",
|
|
"systemIdentifier": "Webclient"
|
|
}
|
|
};
|
|
|
|
fetch(url + '/mes/imsapi/rest/actions/regLogin', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(bodyData)
|
|
})
|
|
.then(response => response.json())
|
|
.then(login => {
|
|
console.log("Login response:", login);
|
|
globallogin = login; // store globally
|
|
sessionStorage.setItem("globallogin", JSON.stringify(login));
|
|
sessionStorage.setItem("stationNumber", stationNumber);
|
|
sessionStorage.setItem("url", url);
|
|
sessionStorage.setItem("persID", globallogin.result.sessionContext.persId);
|
|
|
|
if (login.result.return_value != 0) {
|
|
// If login fails, show error
|
|
alert("Login fehlgeschlagen. Error code: " + login.result.return_value);
|
|
} else {
|
|
// If login succeeds, hide modal
|
|
document.getElementById('loginModal').style.display = 'none';
|
|
// You may then load an initial page in the iframe, etc.
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Login error:', error);
|
|
alert('Fehler bei der Anmeldung. Bitte prüfen Sie die Konsole.');
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|