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

reworked adding/editing, not done yet

Browse Source
This commit is contained in:
Miskolczi Richárd
2024-05-06 17:47:53 +02:00
parent bcff903cd6
commit 5da41e0c80
2 changed files with 97 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,31 +24,7 @@
</tbody> </tbody>
</table> </table>
<h2 id="add">Add a new line</h2> <h2 id="add">Add a new line</h2>
<table class="inputs"> <div id="forms"></div>
<tr> <h2 id="saveresult"></h2>
<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>Service ID</td>
<td class="inputcell"><input type="text" id="in_service_id"></td>
</tr>
<tr>
<td colspan="2"><button onclick="addcustomer()">Save</button></td>
</tr>
</table>
<h2 id="addresult"></h2>
</body> </body>
</html> </html>

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

@@ -25,74 +25,125 @@ function display()
'</td><td>' '</td><td>'
+ '<button type="button" onclick="deletecustomer(' + t.id + ')">Delete</button>' + '<button type="button" onclick="deletecustomer(' + t.id + ')">Delete</button>'
+ '</td><td>' + '</td><td>'
+ '<button type="button" onclick="updatecustomer(' + t.id + ')">Edit</button>' + '<button type="button" onclick="editcustomer(' + t.id + ')">Edit</button>'
+ '</td></tr>'; + '</td></tr>';
}); });
} }
function updatecustomer(id)
{
let customer_id = document.getElementById('in_id').value;
let customer_name = document.getElementById('in_name').value;
let customer_email = document.getElementById('in_email').value;
let customer_phone = document.getElementById('in_phone').value;
let customer_service_id = document.getElementById('in_service_id').value;
fetch ('https://localhost:5001/api/Customer/' + id, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
id: customer_id,
name: customer_name,
email: customer_email,
phone: customer_phone,
service_id: customer_service_id
})
})
}
function addcustomer() function addcustomer()
{ {
let customer_id = document.getElementById('in_id').value; document.getElementById('forms').innerHTML = '';
let customer_name = document.getElementById('in_name').value; document.getElementById('forms').innerHTML +=
let customer_email = document.getElementById('in_email').value; '<table class="inputs">' +
let customer_phone = document.getElementById('in_phone').value; '<tr>' +
let customer_service_id = document.getElementById('in_service_id').value; '<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>Service ID</td>' +
'<td class="inputcell"><input type="text" id="in_service_id"></td>' +
'</tr>' +
'<tr>' +
'<td colspan="2"><button onclick="savecustomer(\'PUT\')">Add</button></td>' +
'</tr>' +
'</table>';
}
function editcustomer(id)
{
existing_item = customers.find(x => x.id == id);
document.getElementById('forms').innerHTML = '';
document.getElementById('forms').innerHTML +=
'<table class="inputs">' +
'<tr>' +
'<td>ID</td>' +
'<td 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>Service ID</td>' +
'<td class="inputcell"><input type="text" id="in_service_id" value="' + existing_item.servicE_ID + '"></td>' +
'</tr>' +
'<tr>' +
'<td colspan="2"><button onclick="savecustomer(\'POST\')">Update</button></td>' +
'</tr>' +
'</table>';
}
function savecustomer(method)
{
if (method != 'POST' && method != 'PUT')
{
console.error('Invalid method: ' + method);
return;
}
customer_id = document.getElementById('in_id').value;
customer_name = document.getElementById('in_name').value;
customer_email = document.getElementById('in_email').value;
customer_phone = document.getElementById('in_phone').value;
customer_service_id = document.getElementById('in_service_id').value;
fetch('https://localhost:5001/api/Customer', { fetch('https://localhost:5001/api/Customer', {
method: 'PUT', method: method,
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ body: JSON.stringify({
id: customer_id, id: customer_id,
name: customer_name, name: customer_name,
email: customer_email, email: customer_email,
phone: customer_phone, phone: customer_phone,
service_id: customer_service_id servicE_ID: customer_service_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('saveresult').innerHTML = '';
document.getElementById('addresult').innerHTML += document.getElementById('saveresult').innerHTML +=
'Added customer ' + customer_name + ' successfully'; 'Saved customer ' + customer_name + ' successfully';
getcustomers(); getcustomers();
}) })
.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 customer ' + customer_name; 'Failed to save customer ' + customer_name;
}); });
} }
function deletecustomer(id) function deletecustomer(id)
{ {
document.getElementById('forms').innerHTML = '';
fetch('https://localhost:5001/api/Customer/' + id, { fetch('https://localhost:5001/api/Customer/' + id, {
method: 'DELETE', method: 'DELETE',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
@@ -101,6 +152,11 @@ function deletecustomer(id)
.then(data => .then(data =>
{ {
console.log("Success: ", data) console.log("Success: ", data)
document.getElementById('saveresult').innerHTML = '';
document.getElementById('saveresult').innerHTML +=
'Deleted customer number ' + id + ' successfully';
getcustomers(); getcustomers();
}) })
.catch(error => console.error("Error: ", error)); .catch(error => console.error("Error: ", error));