TypoMustakes/Prog4_Beadando
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

js client officially done

Browse Source
This commit is contained in:
Miskolczi Richárd
2024-05-06 18:39:27 +02:00
parent 1e6e576318
commit aaf0fd6623
8 changed files with 374 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/customers/customers.html
View File

@@ -9,9 +9,6 @@
<body> <body>
<h1>Customers</h1> <h1>Customers</h1>
<br> <br>
<a href="#add" class="bookmark">Want to add a new line?</a>
<br>
<br>
<table class="queryresults"> <table class="queryresults">
<thead> <thead>
<tr> <tr>
@@ -23,7 +20,6 @@
<tbody id="resultarea"> <tbody id="resultarea">
</tbody> </tbody>
</table> </table>
<h2 id="add">Add a new line</h2>
<div id="forms"></div> <div id="forms"></div>
<h2 id="saveresult"></h2> <h2 id="saveresult"></h2>
</body> </body>

5
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/customers/customers.js
View File

@@ -32,7 +32,7 @@ function display()
document.getElementById('resultarea').innerHTML += document.getElementById('resultarea').innerHTML +=
'<tr>' + '<tr>' +
'<td colspan="4">' + '<td colspan="4">' +
'<a class="bookmark" href="#add">Add new</a>' + '<button type="button" onclick="addcustomer()">Add new</button>' +
'</td>' + '</td>' +
'</tr>'; '</tr>';
} }
@@ -77,7 +77,7 @@ function editcustomer(id)
'<table class="inputs">' + '<table class="inputs">' +
'<tr>' + '<tr>' +
'<td>ID</td>' + '<td>ID</td>' +
'<td class="inputcell"><input type="text" id="in_id" readonly value="' + existing_item.id + '"></td>' + '<td style="background-color: rgba(0, 0, 0, 0.1);" class="inputcell"><input type="text" id="in_id" readonly value="' + existing_item.id + '"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td>Name</td>' + '<td>Name</td>' +
@@ -130,6 +130,7 @@ function savecustomer(method)
.then(data => { .then(data => {
console.log("Success: ", data) console.log("Success: ", data)
document.getElementById('forms').innerHTML = '';
document.getElementById('saveresult').innerHTML = ''; document.getElementById('saveresult').innerHTML = '';
document.getElementById('saveresult').innerHTML += document.getElementById('saveresult').innerHTML +=
'Saved customer ' + customer_name + ' successfully'; 'Saved customer ' + customer_name + ' successfully';

36
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/employees/employees.html
View File

@@ -9,9 +9,6 @@
<body> <body>
<h1>Employees</h1> <h1>Employees</h1>
<br> <br>
<a href="#add" class="bookmark">Want to add a new line?</a>
<br>
<br>
<table class="queryresults"> <table class="queryresults">
<thead> <thead>
<tr> <tr>
@@ -23,36 +20,7 @@
<tbody id="resultarea"> <tbody id="resultarea">
</tbody> </tbody>
</table> </table>
<h2 id="add">Add a new line</h2> <div id="forms"></div>
<table class="inputs"> <h2 id="saveresult"></h2>
<tr>
<td>ID</td>
<td class="inputcell"><input type="text" id="in_id"></td>
</tr>
<tr>
<td>Name</td>
<td class="inputcell"><input type="text" id="in_name"></td>
</tr>
<tr>
<td>Email</td>
<td class="inputcell"><input type="text" id="in_email"></td>
</tr>
<tr>
<td>Phone</td>
<td class="inputcell"><input type="text" id="in_phone"></td>
</tr>
<tr>
<td>Maintainer ID</td>
<td class="inputcell"><input type="text" id="in_maintainer_id"></td>
</tr>
<tr>
<td>Manager ID</td>
<td class="inputcell"><input type="text" id="in_manager_id"></td>
</tr>
<tr>
<td colspan="2"><button onclick="addemployee()">Save</button></td>
</tr>
</table>
<h2 id="addresult"></h2>
</body> </body>
</html> </html>

146
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/employees/employees.js
View File

@@ -25,63 +25,124 @@ function display()
'</td><td>' '</td><td>'
+ '<button type="button" onclick="deleteemployee(' + t.id + ')">Delete</button>' + '<button type="button" onclick="deleteemployee(' + t.id + ')">Delete</button>'
+ '</td><td>' + '</td><td>'
+ '<button type="button" onclick="updateemployee(' + t.id + ')">Edit</button>' + '<button type="button" onclick="editemployee(' + t.id + ')">Edit</button>'
+ '</td></tr>'; + '</td></tr>';
}); });
} document.getElementById('resultarea').innerHTML +=
'<tr>' +
function updateemployee(id) '<td colspan="4">' +
{ '<button type="button" onclick="addemployee()">Add new</button>' +
let employee_id = document.getElementById('in_id').value; '</td>' +
let employee_name = document.getElementById('in_name').value; '</tr>';
let employee_email = document.getElementById('in_email').value;
let employee_phone = document.getElementById('in_phone').value;
let employee_manager_id = document.getElementById('in_manager_id').value;
let employee_maintainer_id = document.getElementById('in_maintainer_id').value;
fetch ('https://localhost:5001/api/Employee/' + id, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
id: employee_id,
name: employee_name,
email: employee_email,
phone: employee_phone,
manager_id: employee_manager_id,
maintainer_id: employee_maintainer_id
})
})
} }
function addemployee() function addemployee()
{ {
let employee_id = document.getElementById('in_id').value; document.getElementById('forms').innerHTML = '';
let employee_name = document.getElementById('in_name').value; document.getElementById('forms').innerHTML +=
let employee_email = document.getElementById('in_email').value; '<table class="inputs">' +
let employee_phone = document.getElementById('in_phone').value; '<tr>' +
let employee_manager_id = document.getElementById('in_manager_id').value; '<td>ID</td>' +
let employee_maintainer_id = document.getElementById('in_maintainer_id').value; '<td class="inputcell"><input type="text" id="in_id"></td>' +
'</tr>' +
'<tr>' +
'<td>Name</td>' +
'<td class="inputcell"><input type="text" id="in_name"></td>' +
'</tr>' +
'<tr>' +
'<td>Email</td>' +
'<td class="inputcell"><input type="text" id="in_email"></td>' +
'</tr>' +
'<tr>' +
'<td>Phone</td>' +
'<td class="inputcell"><input type="text" id="in_phone"></td>' +
'</tr>' +
'<tr>' +
'<td>Manager ID</td>' +
'<td class="inputcell"><input type="text" id="in_manager_id"></td>' +
'</tr>' +
'<td>Maintainer ID</td>' +
'<td class="inputcell"><input type="text" id="in_maintainer_id"></td>' +
'</tr>' +
'<tr>' +
'<td colspan="2"><button onclick="saveemployee(\'PUT\')">Add</button></td>' +
'</tr>' +
'</table>';
}
function editemployee(id)
{
existing_item = employees.find(x => x.id == id);
document.getElementById('forms').innerHTML = '';
document.getElementById('forms').innerHTML +=
'<table class="inputs">' +
'<tr>' +
'<td>ID</td>' +
'<td style="background-color: rgba(0, 0, 0, 0.1);" class="inputcell"><input type="text" id="in_id" readonly value="' + existing_item.id + '"></td>' +
'</tr>' +
'<tr>' +
'<td>Name</td>' +
'<td class="inputcell"><input type="text" id="in_name" value="' + existing_item.name + '"></td>' +
'</tr>' +
'<tr>' +
'<td>Email</td>' +
'<td class="inputcell"><input type="text" id="in_email" value="' + existing_item.email + '"></td>' +
'</tr>' +
'<tr>' +
'<td>Phone</td>' +
'<td class="inputcell"><input type="text" id="in_phone" value="' + existing_item.phone + '"></td>' +
'</tr>' +
'<tr>' +
'<td>Manager ID</td>' +
'<td class="inputcell"><input type="text" id="in_manager_id" value="' + existing_item.manageR_ID + '"></td>' +
'</tr>' +
'<tr>' +
'<td>Maintainer ID</td>' +
'<td class="inputcell"><input type="text" id="in_maintainer_id" value="' + existing_item.maintaineR_ID + '"></td>' +
'</tr>' +
'<tr>' +
'<td colspan="2"><button onclick="saveemployee(\'POST\')">Update</button></td>' +
'</tr>' +
'</table>';
}
function saveemployee(method)
{
if (method != 'POST' && method != 'PUT')
{
console.error('Invalid method: ' + method);
return;
}
employee_id = document.getElementById('in_id').value;
employee_name = document.getElementById('in_name').value;
employee_email = document.getElementById('in_email').value;
employee_phone = document.getElementById('in_phone').value;
employee_manager_id = document.getElementById('in_manager_id').value;
employee_maintainer_id = document.getElementById('in_maintainer_id').value;
fetch('https://localhost:5001/api/Employee', { fetch('https://localhost:5001/api/Employee', {
method: 'PUT', method: method,
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ body: JSON.stringify({
id: employee_id, id: employee_id,
name: employee_name, name: employee_name,
email: employee_email, email: employee_email,
phone: employee_phone, phone: employee_phone,
manager_id: employee_manager_id, maintaineR_ID: employee_maintainer_id,
maintainer_id: employee_maintainer_id manageR_ID: employee_manager_id
}) })
}) })
.then(response => response) .then(response => response)
.then(data => { .then(data => {
console.log("Success: ", data) console.log("Success: ", data)
document.getElementById('addresult').innerHTML = ''; document.getElementById('forms').innerHTML = '';
document.getElementById('addresult').innerHTML += document.getElementById('saveresult').innerHTML = '';
'Added employee ' + employee_name + ' successfully'; document.getElementById('saveresult').innerHTML +=
'Saved employee ' + employee_name + ' successfully';
getemployees(); getemployees();
@@ -89,14 +150,16 @@ function addemployee()
.catch(error => { .catch(error => {
console.error("Error: ", error); console.error("Error: ", error);
document.getElementById('addresult').innerHTML = ''; document.getElementById('saveresult').innerHTML = '';
document.getElementById('addresult').innerHTML += document.getElementById('saveresult').innerHTML +=
'Failed to add maintainer team ' + employee_name; 'Failed to save employee ' + employee_name;
}); });
} }
function deleteemployee(id) function deleteemployee(id)
{ {
document.getElementById('forms').innerHTML = '';
fetch('https://localhost:5001/api/Employee/' + id, { fetch('https://localhost:5001/api/Employee/' + id, {
method: 'DELETE', method: 'DELETE',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
@@ -105,6 +168,11 @@ function deleteemployee(id)
.then(data => .then(data =>
{ {
console.log("Success: ", data) console.log("Success: ", data)
document.getElementById('saveresult').innerHTML = '';
document.getElementById('saveresult').innerHTML +=
'Deleted employee number ' + id + ' successfully';
getemployees(); getemployees();
}) })
.catch(error => console.error("Error: ", error)); .catch(error => console.error("Error: ", error));

32
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/maintainer_teams/maintainerteam.html
View File

@@ -2,15 +2,12 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Maintainer Team</title> <title>Teams</title>
<link rel="stylesheet" type="text/css" href="../style.css"> <link rel="stylesheet" type="text/css" href="../style.css">
<script src="maintainerteam.js"></script> <script src="maintainerteam.js"></script>
</head> </head>
<body> <body>
<h1>Maintainer team</h1> <h1>Maintainer teams</h1>
<br>
<a href="#add" class="bookmark">Want to add a new line?</a>
<br>
<br> <br>
<table class="queryresults"> <table class="queryresults">
<thead> <thead>
@@ -23,28 +20,7 @@
<tbody id="resultarea"> <tbody id="resultarea">
</tbody> </tbody>
</table> </table>
<h2 id="add">Add a new line</h2> <div id="forms"></div>
<table class="inputs"> <h2 id="saveresult"></h2>
<tr>
<td>ID</td>
<td class="inputcell"><input type="text" id="in_id"></td>
</tr>
<tr>
<td>Name</td>
<td class="inputcell"><input type="text" id="in_name"></td>
</tr>
<tr>
<td>Email</td>
<td class="inputcell"><input type="text" id="in_email"></td>
</tr>
<tr>
<td>Leader ID</td>
<td class="inputcell"><input type="text" id="in_leader_id"></td>
</tr>
<tr>
<td colspan="2"><button onclick="addmaintainerteam()">Save</button></td>
</tr>
</table>
<h2 id="addresult"></h2>
</body> </body>
</html> </html>

143
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/maintainer_teams/maintainerteam.js
View File

@@ -1,13 +1,13 @@
let maintainerteams = []; let teams = [];
getmaintainerteams(); getteams();
async function getmaintainerteams() async function getteams()
{ {
await fetch('https://localhost:5001/api/MaintainerTeam') await fetch('https://localhost:5001/api/MaintainerTeam')
.then(x => x.json()) .then(x => x.json())
.then(y => { .then(y => {
maintainerteams = y; teams = y;
console.log(maintainerteams); console.log(teams);
display(); display();
}); });
} }
@@ -16,79 +16,131 @@ function display()
{ {
document.getElementById('resultarea').innerHTML = ''; document.getElementById('resultarea').innerHTML = '';
maintainerteams.forEach(t => { teams.forEach(t => {
document.getElementById('resultarea').innerHTML += document.getElementById('resultarea').innerHTML +=
'<tr><td>' '<tr><td>'
+ t.id + + t.id +
'</td><td>' '</td><td>'
+ t.name + + t.name +
'</td><td>' '</td><td>'
+ '<button type="button" onclick="deletemaintainerteam(' + t.id + ')">Delete</button>' + '<button type="button" onclick="deleteteam(' + t.id + ')">Delete</button>'
+ '</td><td>' + '</td><td>'
+ '<button type="button" onclick="updatemaintainerteam(' + t.id + ')">Edit</button>' + '<button type="button" onclick="editteam(' + t.id + ')">Edit</button>'
+ '</td></tr>'; + '</td></tr>';
}); });
document.getElementById('resultarea').innerHTML +=
'<tr>' +
'<td colspan="4">' +
'<button type="button" onclick="addteam()">Add new</button>' +
'</td>' +
'</tr>';
} }
function updatemaintainerteam(id) function addteam()
{ {
let maintainerteam_id = document.getElementById('in_id').value; document.getElementById('forms').innerHTML = '';
let maintainerteam_name = document.getElementById('in_name').value; document.getElementById('forms').innerHTML +=
let maintainerteam_email = document.getElementById('in_email').value; '<table class="inputs">' +
let maintainerteam_leader_id = document.getElementById('in_leader_id').value; '<tr>' +
'<td>ID</td>' +
fetch ('https://localhost:5001/api/MaintainerTeam/' + id, { '<td class="inputcell"><input type="text" id="in_id"></td>' +
method: 'POST', '</tr>' +
headers: { 'Content-Type': 'application/json' }, '<tr>' +
body: JSON.stringify({ '<td>Name</td>' +
id: maintainerteam_id, '<td class="inputcell"><input type="text" id="in_name"></td>' +
name: maintainerteam_name, '</tr>' +
email: maintainerteam_email, '<tr>' +
leader_id: maintainerteam_leader_id '<td>Email</td>' +
}) '<td class="inputcell"><input type="text" id="in_email"></td>' +
}) '</tr>' +
'<tr>' +
'<td>Leader ID</td>' +
'<td class="inputcell"><input type="text" id="in_leader_id"></td>' +
'</tr>' +
'<tr>' +
'<td colspan="2"><button onclick="saveteam(\'PUT\')">Add</button></td>' +
'</tr>' +
'</table>';
} }
function addmaintainerteam() function editteam(id)
{ {
let maintainerteam_id = document.getElementById('in_id').value; existing_item = teams.find(x => x.id == id);
let maintainerteam_name = document.getElementById('in_name').value;
let maintainerteam_email = document.getElementById('in_email').value; document.getElementById('forms').innerHTML = '';
let maintainerteam_leader_id = document.getElementById('in_leader_id').value; document.getElementById('forms').innerHTML +=
'<table class="inputs">' +
'<tr>' +
'<td>ID</td>' +
'<td style="background-color: rgba(0, 0, 0, 0.1);" class="inputcell"><input type="text" id="in_id" readonly value="' + existing_item.id + '"></td>' +
'</tr>' +
'<tr>' +
'<td>Name</td>' +
'<td class="inputcell"><input type="text" id="in_name" value="' + existing_item.name + '"></td>' +
'</tr>' +
'<tr>' +
'<td>Email</td>' +
'<td class="inputcell"><input type="text" id="in_email" value="' + existing_item.email + '"></td>' +
'</tr>' +
'<tr>' +
'<td>Leader ID</td>' +
'<td class="inputcell"><input type="text" id="in_leader_id" value="' + existing_item.leadeR_ID + '"></td>' +
'</tr>' +
'<tr>' +
'<td colspan="2"><button onclick="saveteam(\'POST\')">Update</button></td>' +
'</tr>' +
'</table>';
}
function saveteam(method)
{
if (method != 'POST' && method != 'PUT')
{
console.error('Invalid method: ' + method);
return;
}
team_id = document.getElementById('in_id').value;
team_name = document.getElementById('in_name').value;
team_email = document.getElementById('in_email').value;
team_leader_id = document.getElementById('in_leader_id').value;
fetch('https://localhost:5001/api/MaintainerTeam', { fetch('https://localhost:5001/api/MaintainerTeam', {
method: 'PUT', method: method,
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ body: JSON.stringify({
id: maintainerteam_id, id: team_id,
name: maintainerteam_name, name: team_name,
email: maintainerteam_email, email: team_email,
leader_id: maintainerteam_leader_id leadeR_ID: team_leader_id
}) })
}) })
.then(response => response) .then(response => response)
.then(data => { .then(data => {
console.log("Success: ", data) console.log("Success: ", data)
document.getElementById('addresult').innerHTML = ''; document.getElementById('forms').innerHTML = '';
document.getElementById('addresult').innerHTML += document.getElementById('saveresult').innerHTML = '';
'Added maintainer team ' + maintainerteam_name + ' successfully'; document.getElementById('saveresult').innerHTML +=
'Saved team ' + team_name + ' successfully';
getmaintainerteams(); getteams();
}) })
.catch(error => { .catch(error => {
console.error("Error: ", error); console.error("Error: ", error);
document.getElementById('addresult').innerHTML = ''; document.getElementById('saveresult').innerHTML = '';
document.getElementById('addresult').innerHTML += document.getElementById('saveresult').innerHTML +=
'Failed to add maintainer team ' + maintainerteam_name; 'Failed to save team ' + team_name;
}); });
} }
function deletemaintainerteam(id) function deleteteam(id)
{ {
document.getElementById('forms').innerHTML = '';
fetch('https://localhost:5001/api/MaintainerTeam/' + id, { fetch('https://localhost:5001/api/MaintainerTeam/' + id, {
method: 'DELETE', method: 'DELETE',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
@@ -97,7 +149,12 @@ function deletemaintainerteam(id)
.then(data => .then(data =>
{ {
console.log("Success: ", data) console.log("Success: ", data)
getmaintainerteams();
document.getElementById('saveresult').innerHTML = '';
document.getElementById('saveresult').innerHTML +=
'Deleted team number ' + id + ' successfully';
getteams();
}) })
.catch(error => console.error("Error: ", error)); .catch(error => console.error("Error: ", error));
} }

49
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/services/services.html
View File

@@ -9,9 +9,6 @@
<body> <body>
<h1>Services</h1> <h1>Services</h1>
<br> <br>
<a href="#add" class="bookmark">Want to add a new line?</a>
<br>
<br>
<table class="queryresults"> <table class="queryresults">
<thead> <thead>
<tr> <tr>
@@ -23,49 +20,7 @@
<tbody id="resultarea"> <tbody id="resultarea">
</tbody> </tbody>
</table> </table>
<br> <div id="forms"></div>
<h2 id="add">Add a new line</h2> <h2 id="saveresult"></h2>
<table class="inputs">
<tr>
<td>ID</td>
<td class="inputcell"><input type="text" id="in_id"></td>
</tr>
<tr>
<td>Maintainer</td>
<td class="inputcell"><input type="text" id="in_maintainer_id"></td>
</tr>
<tr>
<td>Name</td>
<td class="inputcell"><input type="text" id="in_name"></td>
</tr>
<tr>
<td>Version</td>
<td class="inputcell"><input type="text" id="in_version"></td>
</tr>
<tr>
<td>Account</td>
<td class="inputcell"><input type="text" id="in_account"></td>
</tr>
<tr>
<td>Notes</td>
<td class="inputcell"><input type="text" id="in_notes"></td>
</tr>
<tr>
<td>Service domain</td>
<td class="inputcell"><input type="text" id="in_domain"></td>
</tr>
<tr>
<td>IP</td>
<td class="inputcell"><input type="text" id="in_ip"></td>
</tr>
<tr>
<td>Port</td>
<td class="inputcell"><input type="text" id="in_port"></td>
</tr>
<tr>
<td colspan="2"><button onclick="addemployee()">Save</button></td>
</tr>
</table>
<div id="addresult"></div>
</body> </body>
</html> </html>

197
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/services/services.js
View File

@@ -1,7 +1,7 @@
let services = []; let services = [];
getServices(); getservices();
async function getServices() async function getservices()
{ {
await fetch('https://localhost:5001/api/Service') await fetch('https://localhost:5001/api/Service')
.then(x => x.json()) .then(x => x.json())
@@ -23,90 +23,174 @@ function display()
'</td><td>' '</td><td>'
+ t.name + + t.name +
'</td><td>' '</td><td>'
+ '<button type="button" onclick="deleteService(' + t.id + ')">Delete</button>' + '<button type="button" onclick="deleteservice(' + t.id + ')">Delete</button>'
+ '</td><td>' + '</td><td>'
+ '<button type="button" onclick="updateService(' + t.id + ')">Edit</button>' + '<button type="button" onclick="editservice(' + t.id + ')">Edit</button>'
+ '</td></tr>'; + '</td></tr>';
}); });
document.getElementById('resultarea').innerHTML +=
'<tr>' +
'<td colspan="4">' +
'<button type="button" onclick="addservice()">Add new</button>' +
'</td>' +
'</tr>';
} }
function updateService(id) function addservice()
{ {
let service_id = document.getElementById('in_id').value; document.getElementById('forms').innerHTML = '';
let service_maintainer_id = document.getElementById('in_maintainer_id').value; document.getElementById('forms').innerHTML +=
let service_name = document.getElementById('in_name').value; '<table class="inputs">' +
let service_version = document.getElementById('in_version').value; '<tr>' +
let service_account = document.getElementById('in_account').value; '<td>ID</td>' +
let service_notes = document.getElementById('in_notes').value; '<td class="inputcell"><input type="text" id="in_id"></td>' +
let service_domain = document.getElementById('in_domain').value; '</tr>' +
let service_ip = document.getElementById('in_ip').value; '<tr>' +
let service_port = document.getElementById('in_port').value; '<td>Name</td>' +
'<td class="inputcell"><input type="text" id="in_name"></td>' +
fetch ('https://localhost:5001/api/Service/' + id, { '</tr>' +
method: 'POST', '<tr>' +
headers: { 'Content-Type': 'application/json' }, '<td>IP address</td>' +
body: JSON.stringify({ '<td class="inputcell"><input type="text" id="in_ip_address"></td>' +
id: service_id, '</tr>' +
maintainer_id: service_maintainer_id, '<tr>' +
name: service_name, '<td>Port</td>' +
version: service_version, '<td class="inputcell"><input type="text" id="in_port"></td>' +
account: service_account, '</tr>' +
notes: service_notes, '<tr>' +
service_domain: service_domain, '<td>Version</td>' +
ip: service_ip, '<td class="inputcell"><input type="text" id="in_version"></td>' +
port: service_port '</tr>' +
}) '<tr>' +
}) '<td>Account</td>' +
'<td class="inputcell"><input type="text" id="in_account"></td>' +
'</tr>' +
'<tr>' +
'<td>Service domain</td>' +
'<td class="inputcell"><input type="text" id="in_service_domain"></td>' +
'</tr>' +
'<tr>' +
'<td>Notes</td>' +
'<td class="inputcell"><input type="text" id="in_notes"></td>' +
'</tr>' +
'<tr>' +
'<td>Maintainer ID</td>' +
'<td class="inputcell"><input type="text" id="in_maintainer_id"></td>' +
'</tr>' +
'<tr>' +
'<td colspan="2"><button onclick="saveservice(\'PUT\')">Add</button></td>' +
'</tr>' +
'</table>';
} }
function addService() function editservice(id)
{ {
let service_id = document.getElementById('in_id').value; existing_item = services.find(x => x.id == id);
let service_maintainer_id = document.getElementById('in_maintainer_id').value;
let service_name = document.getElementById('in_name').value; document.getElementById('forms').innerHTML = '';
let service_version = document.getElementById('in_version').value; document.getElementById('forms').innerHTML +=
let service_account = document.getElementById('in_account').value; '<table class="inputs">' +
let service_notes = document.getElementById('in_notes').value; '<tr>' +
let service_domain = document.getElementById('in_domain').value; '<td>ID</td>' +
let service_ip = document.getElementById('in_ip').value; '<td style="background-color: rgba(0, 0, 0, 0.1);" class="inputcell"><input type="text" id="in_id" readonly value="' + existing_item.id + '"></td>' +
let service_port = document.getElementById('in_port').value; '</tr>' +
'<tr>' +
'<td>Name</td>' +
'<td class="inputcell"><input type="text" id="in_name" value="' + existing_item.name + '"></td>' +
'</tr>' +
'<tr>' +
'<td>IP address</td>' +
'<td class="inputcell"><input type="text" id="in_ip_address" value="' + existing_item.ip + '"></td>' +
'</tr>' +
'<tr>' +
'<td>Port</td>' +
'<td class="inputcell"><input type="text" id="in_port" value="' + existing_item.port + '"></td>' +
'</tr>' +
'<tr>' +
'<td>Version</td>' +
'<td class="inputcell"><input type="text" id="in_version" value="' + existing_item.version + '"></td>' +
'</tr>' +
'<tr>' +
'<td>Account</td>' +
'<td class="inputcell"><input type="text" id="in_account" value="' + existing_item.account + '"></td>' +
'</tr>' +
'<tr>' +
'<td>Service domain</td>' +
'<td class="inputcell"><input type="text" id="in_service_domain" value="' + existing_item.servicE_DOMAIN + '"></td>' +
'</tr>' +
'<tr>' +
'<td>Notes</td>' +
'<td class="inputcell"><input type="text" id="in_notes" value="' + existing_item.notes + '"></td>' +
'</tr>' +
'<tr>' +
'<td>Maintainer ID</td>' +
'<td class="inputcell"><input type="text" id="in_maintainer_id" value="' + existing_item.maintaineR_ID + '"></td>' +
'</tr>' +
'<tr>' +
'<td colspan="2"><button onclick="saveservice(\'POST\')">Update</button></td>' +
'</tr>' +
'</table>';
}
function saveservice(method)
{
if (method != 'POST' && method != 'PUT')
{
console.error('Invalid method: ' + method);
return;
}
service_id = document.getElementById('in_id').value;
service_name = document.getElementById('in_name').value;
service_ip = document.getElementById('in_ip_address').value;
service_port = document.getElementById('in_port').value;
service_version = document.getElementById('in_version').value;
service_account = document.getElementById('in_account').value;
service_service_domain = document.getElementById('in_service_domain').value;
service_notes = document.getElementById('in_notes').value;
service_maintainer_id = document.getElementById('in_maintainer_id').value;
fetch('https://localhost:5001/api/Service', { fetch('https://localhost:5001/api/Service', {
method: 'PUT', method: method,
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ body: JSON.stringify({
id: service_id, id: service_id,
maintainer_id: service_maintainer_id,
name: service_name, name: service_name,
ip: service_ip,
port: service_port,
version: service_version, version: service_version,
account: service_account, account: service_account,
servicE_DOMAIN: service_service_domain,
notes: service_notes, notes: service_notes,
service_domain: service_domain, maintaineR_ID: service_maintainer_id
ip: service_ip,
port: service_port
}) })
}) })
.then(response => response) .then(response => response)
.then(data => { .then(data => {
console.log("Success: ", data) console.log("Success: ", data)
document.getElementById('addresult').innerHTML = ''; document.getElementById('forms').innerHTML = '';
document.getElementById('addresult').innerHTML += document.getElementById('saveresult').innerHTML = '';
'<h2>Added service ' + service_name + ' successfully</h2>'; document.getElementById('saveresult').innerHTML +=
'Saved service ' + service_name + ' successfully';
getservices();
getServices();
}) })
.catch(error => { .catch(error => {
console.error("Error: ", error); console.error("Error: ", error);
document.getElementById('addresult').innerHTML = ''; document.getElementById('saveresult').innerHTML = '';
document.getElementById('addresult').innerHTML += document.getElementById('saveresult').innerHTML +=
'<h2>Failed to add service ' + service_name + '</h2>'; 'Failed to save service ' + service_name;
}); });
} }
function deleteService(id) function deleteservice(id)
{ {
document.getElementById('forms').innerHTML = '';
fetch('https://localhost:5001/api/Service/' + id, { fetch('https://localhost:5001/api/Service/' + id, {
method: 'DELETE', method: 'DELETE',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
@@ -115,7 +199,12 @@ function deleteService(id)
.then(data => .then(data =>
{ {
console.log("Success: ", data) console.log("Success: ", data)
getServices();
document.getElementById('saveresult').innerHTML = '';
document.getElementById('saveresult').innerHTML +=
'Deleted service number ' + id + ' successfully';
getservices();
}) })
.catch(error => console.error("Error: ", error)); .catch(error => console.error("Error: ", error));
} }