223 lines
8.3 KiB
HTML
223 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<title>Home</title>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
|
|
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Poppins', sans-serif;
|
|
}
|
|
body {
|
|
color: #404E67;
|
|
background: -webkit-linear-gradient(left, #03d9ff, #0004ff);
|
|
}
|
|
.table-wrapper {
|
|
width: 700px;
|
|
margin: 30px auto;
|
|
background: #fff;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 1px 1px rgba(0,0,0,.05);
|
|
}
|
|
.table-title {
|
|
padding-bottom: 10px;
|
|
margin: 0 0 10px;
|
|
}
|
|
.table-title h2 {
|
|
margin: 6px 0 0;
|
|
font-size: 22px;
|
|
}
|
|
.table-title .add-new {
|
|
float: right;
|
|
height: 30px;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
text-shadow: none;
|
|
min-width: 100px;
|
|
border-radius: 50px;
|
|
line-height: 13px;
|
|
}
|
|
.table-title .add-new i {
|
|
margin-right: 4px;
|
|
}
|
|
.table-title .add-new{
|
|
background: -webkit-linear-gradient(left, #03d9ff, #0004ff);
|
|
}
|
|
table.table {
|
|
table-layout: fixed;
|
|
}
|
|
table.table tr th, table.table tr td {
|
|
border-color: #dfdfdf;;
|
|
}
|
|
table.table th i {
|
|
font-size: 13px;
|
|
margin: 0 5px;
|
|
cursor: pointer;
|
|
}
|
|
table.table th:last-child {
|
|
width: 100px;
|
|
}
|
|
table.table td a {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
margin: 0 5px;
|
|
min-width: 24px;
|
|
}
|
|
table.table td a.add {
|
|
color: #27C46B;
|
|
}
|
|
table.table td a.edit {
|
|
color: #FFC107;
|
|
}
|
|
table.table td a.delete {
|
|
color: #E34724;
|
|
}
|
|
table.table td i {
|
|
font-size: 19px;
|
|
}
|
|
table.table td a.add i {
|
|
font-size: 24px;
|
|
margin-right: -1px;
|
|
position: relative;
|
|
top: 3px;
|
|
}
|
|
table.table .form-control {
|
|
height: 32px;
|
|
line-height: 32px;
|
|
box-shadow: none;
|
|
border-radius: 2px;
|
|
}
|
|
table.table .form-control.error {
|
|
border-color: #f50000;
|
|
}
|
|
table.table td .add {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<script>
|
|
$(document).ready(function(){
|
|
|
|
fetch(window.location.origin+"/handlers", {
|
|
method: 'GET',
|
|
}).then(resp => resp.json()
|
|
).then(data => {
|
|
data.forEach(e=> {
|
|
var row = "<tr><td style='word-break:break-all;'>"+e.topic+"</td><td style='word-break:break-all;'>"+e.message+"</td><td style='word-break:break-all;'>"+e.requestUrl+"</td><td><a class='delete' title=''\
|
|
data-original-title='Delete'><i class='material-icons'></i></a></td></tr>";
|
|
$("table").append(row);
|
|
})
|
|
}).catch((error) => {console.log(error)});
|
|
|
|
var actions = "<a class='add' title='Add' ><i class='material-icons'>\
|
|
</i></a><a class='delete' title='Delete' ><i class='material-icons'></i></a>";
|
|
|
|
// Append table with add row form on add new button click
|
|
$(".add-new").click(function(){
|
|
$(this).attr("disabled", "disabled");
|
|
var index = $("table tbody tr:last-child").index();
|
|
var row = '<tr>' +
|
|
'<td style="word-break:break-all;"><input type="text" class="form-control" name="name" id="name"></td>' +
|
|
'<td style="word-break:break-all;"><input type="text" class="form-control" name="department" id="department"></td>' +
|
|
'<td style="word-break:break-all;"><input type="text" class="form-control" name="phone" id="phone"></td>' +
|
|
'<td style="word-break:break-all;">' + actions + '</td>' +
|
|
'</tr>';
|
|
$("table").append(row);
|
|
$("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
|
|
});
|
|
|
|
// Add row on add button click
|
|
$(document).on("click", ".add", function(){
|
|
var empty = false;
|
|
var input = $(this).parents("tr").find('input[type="text"]');
|
|
let values = []
|
|
input.each(function(){
|
|
values.push($(this).val())
|
|
if(!$(this).val()){
|
|
$(this).addClass("error");
|
|
empty = true;
|
|
} else{
|
|
$(this).removeClass("error");
|
|
}
|
|
});
|
|
$(this).parents("tr").find(".error").first().focus();
|
|
if(!empty){
|
|
input.each(function(){
|
|
$(this).parent("td").html($(this).val());
|
|
});
|
|
$(this).parents("tr").find(".add, .edit").toggle();
|
|
$(".add-new").removeAttr("disabled");
|
|
fetch(window.location.origin+"/handlers/add", {
|
|
method: 'POST',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({topic: values[0], message: values[1], requestUrl: values[2] })
|
|
}).then((resp) => {}).then((body) => {}).catch((error) => {});
|
|
}
|
|
});
|
|
// Delete row on delete button click
|
|
$(document).on("click", ".delete", function(){
|
|
let values = []
|
|
let doDelete = true
|
|
let parentTr = $(this).parent().siblings().each(function(){
|
|
values.push($(this).html())
|
|
doDelete = $(this).children().length <= 0
|
|
})
|
|
if(doDelete){
|
|
fetch(window.location.origin+"/handlers/remove", {
|
|
method: 'POST',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({topic: values[0], message: values[1], requestUrl: values[2] })
|
|
}).then((resp) => {}).then((body) => {}).catch((error) => {});
|
|
}
|
|
$(this).parents("tr").remove();
|
|
$(".add-new").removeAttr("disabled");
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container-lg">
|
|
<div class="table-responsive">
|
|
<div class="table-wrapper">
|
|
<div class="table-title">
|
|
<div class="row">
|
|
<div class="col-sm-8"><h2>Message Handlers</h2></div>
|
|
<div class="col-sm-4">
|
|
<button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i> Add New</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Topic</th>
|
|
<th>Message</th>
|
|
<th>Request Url</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |