diff --git a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/index.html b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/index.html index a2cf452..8591724 100644 --- a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/index.html +++ b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/index.html @@ -7,6 +7,24 @@

Hello, World!

Welcome to my first web page.

+ +
+ + +
+ + + + + + + + + + + +
IDName
+ \ No newline at end of file diff --git a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/script.js b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/script.js index 016e6aa..e7d6a06 100644 --- a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/script.js +++ b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/script.js @@ -1,3 +1,45 @@ -fetch('https://localhost:5001/api/Customer') +let customers = []; +getCustomers(); + +async function getCustomers() +{ + await fetch('https://localhost:5001/api/Customer') .then(x => x.json()) - .then(y => console.log(y)); \ No newline at end of file + .then(y => { + customers = y; + console.log(customers); + display(); + }); +} + +function display() +{ + document.getElementById('resultarea').innerHTML = ''; + + customers.forEach(t => { + document.getElementById('resultarea').innerHTML += + '' + + t.id + + '' + + t.name + + ''; + }); +} + +function addCustomer() +{ + let customerName = document.getElementById('customername').value; + + fetch('https://localhost:5001/api/Customer', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ name: customerName }) + }) + .then(response => response) + .then(data => + { + console.log("Success: ", data) + getCustomers(); + }) + .catch(error => console.error("Error: ", error)); +} \ No newline at end of file diff --git a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/style.css b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/style.css index 46800d1..031ba92 100644 --- a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/style.css +++ b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/style.css @@ -1,2 +1,37 @@ -body { +table +{ + width: 100%; } + +table, th, td +{ + border: 1px solid black; +} + +table +{ + border-collapse: collapse; +} + +th,td +{ + padding: 5px; +} + +th +{ + background-color: rgb(127, 255, 138); +} + +#formdiv +{ + display: flex; + flex-direction: column; + margin-bottom: 20px; +} + +#formdiv button input +{ + margin: 10px; + padding: 5px; +} \ No newline at end of file