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

js client complete rework

Browse Source
This commit is contained in:
Miskolczi Richárd
2024-04-30 10:16:11 +02:00
parent e40638e3a4
commit b67fe03ff5
8 changed files with 342 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/customers.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Customers</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Customers</h1>
<br>
<a href="#add" class="bookmark">Want to add a new line?</a>
<br>
<br>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th colspan="2">Actions</th>
</tr>
</thead>
</table>
<h2 id="add">Add a new line</h2>
<table class="inputs">
<tr>
<th>ID</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Name</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Email</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Phone</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Service ID</th>
<th><input type="text"></th>
</tr>
</table>
</body>
</html>

71
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/edit.html Normal file
View File

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>edit</title>
</head>
<body>
<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>
<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>
<script src="script.js"></script>
</body>
</html>

47
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/employees.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Employees</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Employees</h1>
<br>
<a href="#add" class="bookmark">Want to add a new line?</a>
<br>
<br>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th colspan="2">Actions</th>
</tr>
</thead>
</table>
<h2 id="add">Add a new line</h2>
<table class="inputs">
<tr>
<th>ID</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Name</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Email</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Phone</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Maintainer ID</th>
<th><input type="text"></th>
</tr>
</table>
</body>
</html>

BIN
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/img/backround.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

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

@@ -1,90 +1,18 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Company Manager</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<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">
</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>
<script src="script.js"></script>
<h1>Tables</h1>
<a href="services.html" class="button">Services</a>
<br>
<a href="employees.html" class="button">Employees</a>
<br>
<a href="customers.html" class="button">Customers</a>
<br>
<a href="maintainerteam.html" class="button">Maintainer Team</a>
</body>
</html>

43
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/maintainerteam.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maintainer Team</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Maintainer team</h1>
<br>
<a href="#add" class="bookmark">Want to add a new line?</a>
<br>
<br>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th colspan="2">Actions</th>
</tr>
</thead>
</table>
<h2 id="add">Add a new line</h2>
<table class="inputs">
<tr>
<th>ID</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Name</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Email</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Leader ID</th>
<th><input type="text"></th>
</tr>
</table>
</body>
</html>

63
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/services.html Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>services</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Services</h1>
<br>
<a href="#add" class="bookmark">Want to add a new line?</a>
<br>
<br>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th colspan="2">Actions</th>
</tr>
</thead>
</table>
<h2 id="add">Add a new line</h2>
<table class="inputs">
<tr>
<th>ID</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Maintainer</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Name</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Version</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Account</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Notes</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Service domain</th>
<th><input type="text"></th>
</tr>
<tr>
<th>IP</th>
<th><input type="text"></th>
</tr>
<tr>
<th>Port</th>
<th><input type="text"></th>
</tr>
</table>
</body>
</html>

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

@@ -1,11 +1,68 @@
table
body{
background-image: url("img/backround.jpg");
background-position: right top;
background-opacity: 0.8;
background-size: cover;
}
h1{
text-align: center;
color: white;
font-size: 40px
}
h2{
text-align: center;
color: white
}
input{
color: black;
background: transparent;
border: 2px solid white;
}
input:focus{
border: 2px solid #ff5c33;
outline: none;
}
a.button{
display: block;
margin-right: 500px;
margin-left: 500px;
padding: 30px 90px;
border: 3px solid white;
border-radius: 10px;
text-align: center;
text-decoration: none;
font-size: 20px;
color: white;
}
a.button:hover{
background: rgba(255, 255, 255, 0.25);
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
a.bookmark{
text-align: right;
font-size: 20px;
color: white;
text-decoration: none;
margin: 50px;
}
table.inputs{
text-align: left;
margin: 250px;
}
table
{
width: 100%;
font-size: 20px;
color: white;
}
.list table, .list th, .list td
{
border: 1px solid black;
border: 1px solid white:
}
.list table
@@ -18,10 +75,7 @@
padding: 5px;
}
.list th
{
background-color: rgb(127, 255, 138);
}
.list button
{
@@ -29,29 +83,3 @@
height: 30px;
box-sizing: border-box;
}
.formdiv
{
display: flex;
flex-direction: column;
}
.formdiv table
{
border: none;
}
.formdiv button, .formdiv input
{
width: 100%;
height: 60px;
box-sizing: border-box;
}
.datatable *
{
padding: 10;
}