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"> <link rel="stylesheet" type="text/css" href="style.css">
</head> </head>
<body> <body>
<h1>Hello, World!</h1> <div class="datatable">
<p>Welcome to my first web page.</p> <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"> </tbody>
<input type="text" id="customername" placeholder="Customer name"> </table>
<button id="add" onclick="addCustomer()">Add</button> </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> </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> <script src="script.js"></script>
</body> </body>
</html> </html>

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

@@ -26,20 +26,46 @@ function display()
'</td><td>' '</td><td>'
+ t.name + + t.name +
'</td><td>' '</td><td>'
+ '<button type="button" onclick="deleteCustomer(' + t.id + ')">Delete</button>' + + '<button type="button" onclick="deleteCustomer(' + t.id + ')">Delete</button>'
'</td></tr>'; + '</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() function addCustomer()
{ {
let customerName = document.getElementById('customername').value; let customerName = document.getElementById('customername').value;
let customerPhone = document.getElementById('customerphone').value;
let customerEmail = document.getElementById('customeremail').value;
fetch('https://localhost:5001/api/Customer', { fetch('https://localhost:5001/api/Customer', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ body: JSON.stringify({
name: customerName, name: customerName,
phone: customerPhone,
customerEmail: customerEmail
}) })
}) })
.then(response => response) .then(response => response)

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

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