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

things

Browse Source
This commit is contained in:
TypoMustakes
2024-04-23 18:19:57 +02:00
parent d981b8afa0
commit ce81ab4070
3 changed files with 134 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/index.html
View File

@@ -5,27 +5,86 @@
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my first web page.</p>
<div class="datatable">
<div class="list">
<h1>Customers:</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tbody id="resultarea">
<div id="formdiv">
<input type="text" id="customername" placeholder="Customer name">
<button id="add" onclick="addCustomer()">Add</button>
</tbody>
</table>
</div>
<h2>Create new customer:</h2>
<div class="formdiv">
<table>
<tr>
<td>
<input type="text" id="customername" placeholder="Customer name">
</td>
</tr>
<tr>
<td>
<input type="text" id="customeremail" placeholder="Email address">
</td>
</tr>
<tr>
<td>
<input type="text" id="customerphone" placeholder="Phone number">
</td>
</tr>
<tr>
<td>
<button id="add" onclick="addCustomer()">Add</button>
</td>
</tr>
</table>
</div>
<h2>Edit customer:</h2>
<div class="formdiv">
<table>
<tr>
<td>
<input type="text" id="customerid" placeholder="Customer ID">
</td>
</tr>
<tr>
<td>
<input type="text" id="customername" placeholder="Customer name">
</td>
</tr>
<tr>
<td>
<input type="text" id="customeremail" placeholder="Email address">
</td>
</tr>
<tr>
<td>
<input type="text" id="customerphone" placeholder="Phone number">
</td>
</tr>
<tr>
<td>
<input type="text" id="customerserviceid" placeholder="Service ID">
</td>
</tr>
<tr>
<td>
<button id="add" onclick="editCustomer()">Add</button>
</td>
</tr>
</table>
</div>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="resultarea">
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>

30
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/script.js
View File

@@ -26,20 +26,46 @@ function display()
'</td><td>'
+ t.name +
'</td><td>'
+ '<button type="button" onclick="deleteCustomer(' + t.id + ')">Delete</button>' +
'</td></tr>';
+ '<button type="button" onclick="deleteCustomer(' + t.id + ')">Delete</button>'
+ '</td><td>'
+ '<button type="button" onclick="updateCustomer(' + t.id + ')">Update</button>'
+ '</td></tr>';
});
}
function updateCustomer(id)
{
let customerId = document.getElementById('customerid').value;
let customerName = document.getElementById('customername').value;
let customerPhone = document.getElementById('customerphone').value;
let customerEmail = document.getElementById('customeremail').value;
let customerServiceId = document.getElementById('customerserviceid').value;
fetch ('https://localhost:5001/api/Customer/' + id, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: 'Updated Name',
phone: 'Updated Phone',
customerEmail: 'Updated Email'
})
})
}
function addCustomer()
{
let customerName = document.getElementById('customername').value;
let customerPhone = document.getElementById('customerphone').value;
let customerEmail = document.getElementById('customeremail').value;
fetch('https://localhost:5001/api/Customer', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: customerName,
phone: customerPhone,
customerEmail: customerEmail
})
})
.then(response => response)

38
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/style.css
View File

@@ -3,35 +3,55 @@
width: 100%;
}
table, th, td
.list table, .list th, .list td
{
border: 1px solid black;
}
table
.list table
{
border-collapse: collapse;
}
th,td
.list th, .list td
{
padding: 5px;
}
th
.list th
{
background-color: rgb(127, 255, 138);
}
#formdiv
.list button
{
width: 100%;
height: 30px;
box-sizing: border-box;
}
.formdiv
{
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
#formdiv button input
.formdiv table
{
margin: 10px;
padding: 5px;
border: none;
}
.formdiv button, .formdiv input
{
width: 100%;
height: 60px;
box-sizing: border-box;
}
.datatable *
{
padding: 10;
}