ResMan: API + IP table integration WIP
This commit is contained in:
root
parent
7713bf00ae
commit
10e1c5bc8b
@ -1,178 +1,80 @@
|
|||||||
|
```html
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>ResMan</title>
|
<title>Resource Manager</title>
|
||||||
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
|
body{
|
||||||
|
background:#f5f6fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card{
|
||||||
|
margin-bottom:20px;
|
||||||
|
}
|
||||||
|
|
||||||
.ip{
|
.ip{
|
||||||
font-size:12px;
|
font-size:0.9em;
|
||||||
color:#666;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="bg-light">
|
<body>
|
||||||
|
|
||||||
<div class="container mt-4">
|
<div class="container mt-4">
|
||||||
|
|
||||||
<h2 class="mb-4">Resource Manager</h2>
|
<h2>Resource Manager</h2>
|
||||||
|
|
||||||
<button class="btn btn-primary mb-3" onclick="openModal()">Neue Ressource</button>
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
Neue Resource
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-body">
|
||||||
|
|
||||||
|
<div class="row g-2">
|
||||||
|
|
||||||
|
<div class="col">
|
||||||
|
<input id="name" class="form-control" placeholder="Name">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col">
|
||||||
|
<input id="customer" class="form-control" placeholder="Customer">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col">
|
||||||
|
<select id="status" class="form-select">
|
||||||
|
<option value="aktiv">aktiv</option>
|
||||||
|
<option value="gekündigt">gekündigt</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col">
|
||||||
|
<button class="btn btn-primary" onclick="createResource()">Create</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h4>Aktive Ressourcen</h4>
|
<h4>Aktive Ressourcen</h4>
|
||||||
|
<div id="activeResources"></div>
|
||||||
|
|
||||||
<table class="table table-bordered table-striped">
|
<h4 class="mt-4">Gekündigte Ressourcen</h4>
|
||||||
|
<div id="cancelledResources"></div>
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Provider</th>
|
|
||||||
<th>Produkt</th>
|
|
||||||
<th>CPU</th>
|
|
||||||
<th>RAM</th>
|
|
||||||
<th>Disk</th>
|
|
||||||
<th>IPs</th>
|
|
||||||
<th>Status</th>
|
|
||||||
<th>Aktionen</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody id="activeResources"></tbody>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<h4 class="mt-5">Gekündigte Ressourcen</h4>
|
|
||||||
|
|
||||||
<table class="table table-bordered table-striped">
|
|
||||||
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Provider</th>
|
|
||||||
<th>Produkt</th>
|
|
||||||
<th>IPs</th>
|
|
||||||
<th>Kündigungsdatum</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody id="cancelledResources"></tbody>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- MODAL -->
|
|
||||||
|
|
||||||
<div class="modal fade" id="resourceModal">
|
|
||||||
|
|
||||||
<div class="modal-dialog modal-lg">
|
|
||||||
|
|
||||||
<div class="modal-content">
|
|
||||||
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title">Ressource</h5>
|
|
||||||
<button class="btn-close" data-bs-dismiss="modal"></button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="modal-body">
|
|
||||||
|
|
||||||
<input type="hidden" id="resourceId">
|
|
||||||
|
|
||||||
|
|
||||||
<div class="row g-3">
|
|
||||||
|
|
||||||
<div class="col-md-4">
|
|
||||||
<label>Name</label>
|
|
||||||
<input class="form-control" id="name">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-4">
|
|
||||||
<label>Produkt</label>
|
|
||||||
<input class="form-control" id="produkt">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-4">
|
|
||||||
<label>Provider</label>
|
|
||||||
<input class="form-control" id="provider">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
<label>CPU</label>
|
|
||||||
<input class="form-control" id="cpu">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
<label>RAM</label>
|
|
||||||
<input class="form-control" id="ram">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
<label>Disk</label>
|
|
||||||
<input class="form-control" id="disk">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
<label>OS</label>
|
|
||||||
<input class="form-control" id="os">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
<label>Kosten / Monat</label>
|
|
||||||
<input class="form-control" id="kosten_monat">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
<label>Status</label>
|
|
||||||
|
|
||||||
<select class="form-select" id="status">
|
|
||||||
<option value="aktiv">Aktiv</option>
|
|
||||||
<option value="gekündigt">Gekündigt</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
<label>Kündigungsdatum</label>
|
|
||||||
<input type="date" class="form-control" id="kuendigungsdatum">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="modal-footer">
|
|
||||||
|
|
||||||
<button class="btn btn-success" onclick="saveResource()">Speichern</button>
|
|
||||||
|
|
||||||
<button class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
const API="/resman/api/resources";
|
const API="/resman/api";
|
||||||
|
|
||||||
|
|
||||||
function statusBadge(status){
|
function statusBadge(status){
|
||||||
|
|
||||||
@ -181,229 +83,244 @@ return `<span class="badge bg-dark">Gekündigt</span>`;
|
|||||||
}
|
}
|
||||||
|
|
||||||
return `<span class="badge bg-success">Aktiv</span>`;
|
return `<span class="badge bg-success">Aktiv</span>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderResource(r){
|
||||||
|
|
||||||
|
return `
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
|
||||||
|
<div class="card-body">
|
||||||
|
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h5>${r.name || ""}</h5>
|
||||||
|
${statusBadge(r.status)}
|
||||||
|
<br>
|
||||||
|
<small>${r.customer || ""}</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-sm btn-danger" onclick="deleteResource(${r.id})">
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<strong>IPs</strong>
|
||||||
|
|
||||||
|
<div id="ips-${r.id}" class="mb-2"></div>
|
||||||
|
|
||||||
|
<div class="input-group input-group-sm">
|
||||||
|
|
||||||
|
<input class="form-control" placeholder="IP" id="ip-${r.id}">
|
||||||
|
|
||||||
|
<select class="form-select" id="type-${r.id}">
|
||||||
|
<option value="public">public</option>
|
||||||
|
<option value="private">private</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<input class="form-control" placeholder="comment" id="comment-${r.id}">
|
||||||
|
|
||||||
|
<button class="btn btn-primary" onclick="addIP(${r.id})">
|
||||||
|
Add
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
`;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadResources(){
|
||||||
|
|
||||||
|
const activeDiv=document.getElementById("activeResources");
|
||||||
|
const cancelledDiv=document.getElementById("cancelledResources");
|
||||||
|
|
||||||
|
activeDiv.innerHTML="";
|
||||||
|
cancelledDiv.innerHTML="";
|
||||||
|
|
||||||
|
try{
|
||||||
|
|
||||||
|
const res=await fetch(`${API}/resources/active`);
|
||||||
|
const active=await res.json();
|
||||||
|
|
||||||
|
active.forEach(r=>{
|
||||||
|
activeDiv.innerHTML+=renderResource(r);
|
||||||
|
|
||||||
|
setTimeout(()=>loadIPs(r.id),100);
|
||||||
|
});
|
||||||
|
|
||||||
|
}catch(e){
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
try{
|
||||||
|
|
||||||
|
const res=await fetch(`${API}/resources/cancelled`);
|
||||||
|
const cancelled=await res.json();
|
||||||
|
|
||||||
|
cancelled.forEach(r=>{
|
||||||
|
cancelledDiv.innerHTML+=renderResource(r);
|
||||||
|
|
||||||
|
setTimeout(()=>loadIPs(r.id),100);
|
||||||
|
});
|
||||||
|
|
||||||
|
}catch(e){
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
async function createResource(){
|
||||||
|
|
||||||
|
const name=document.getElementById("name").value;
|
||||||
|
const customer=document.getElementById("customer").value;
|
||||||
|
const status=document.getElementById("status").value;
|
||||||
|
|
||||||
|
await fetch(`${API}/resources`,{
|
||||||
|
method:"POST",
|
||||||
|
headers:{
|
||||||
|
"Content-Type":"application/json"
|
||||||
|
},
|
||||||
|
body:JSON.stringify({
|
||||||
|
name,
|
||||||
|
customer,
|
||||||
|
status
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById("name").value="";
|
||||||
|
document.getElementById("customer").value="";
|
||||||
|
|
||||||
|
loadResources();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteResource(id){
|
||||||
|
|
||||||
|
await fetch(`${API}/resources/${id}`,{
|
||||||
|
method:"DELETE"
|
||||||
|
});
|
||||||
|
|
||||||
|
async function addIP(resourceId){
|
||||||
|
|
||||||
|
const ip=document.getElementById("ip-"+resourceId).value;
|
||||||
|
const type=document.getElementById("type-"+resourceId).value;
|
||||||
|
const comment=document.getElementById("comment-"+resourceId).value;
|
||||||
|
|
||||||
|
if(!ip){
|
||||||
|
alert("IP fehlt");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await fetch("/resman/api/resources/"+resourceId+"/ips",{
|
||||||
|
method:"POST",
|
||||||
|
headers:{
|
||||||
|
"Content-Type":"application/json"
|
||||||
|
},
|
||||||
|
body:JSON.stringify({
|
||||||
|
ip:ip,
|
||||||
|
type:type,
|
||||||
|
comment:comment
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
loadResources();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
loadResources();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
async function loadIPs(resourceId){
|
async function loadIPs(resourceId){
|
||||||
|
|
||||||
try{
|
const container=document.getElementById("ips-"+resourceId);
|
||||||
|
|
||||||
const res=await fetch(`/resman/api/resources/${resourceId}/ips`);
|
const res=await fetch(`${API}/resources/${resourceId}/ips`);
|
||||||
const data=await res.json();
|
const data=await res.json();
|
||||||
|
|
||||||
if(!data.length) return "";
|
|
||||||
|
|
||||||
let html="";
|
let html="";
|
||||||
|
|
||||||
data.forEach(ip=>{
|
data.forEach(ip=>{
|
||||||
html+=`<div class="ip">${ip.ip} (${ip.type || ""})</div>`;
|
|
||||||
});
|
|
||||||
|
|
||||||
return html;
|
html+=`
|
||||||
|
|
||||||
}catch(e){
|
<div class="d-flex justify-content-between border rounded p-1 mb-1 ip">
|
||||||
|
|
||||||
return "";
|
<div>
|
||||||
|
<strong>${ip.ip}</strong>
|
||||||
|
<span class="text-muted">(${ip.type})</span>
|
||||||
|
<small>${ip.comment || ""}</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
}
|
<button class="btn btn-sm btn-danger"
|
||||||
|
onclick="deleteIP(${ip.id},${resourceId})">
|
||||||
|
X
|
||||||
|
</button>
|
||||||
|
|
||||||
}
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
async function loadResources(){
|
|
||||||
|
|
||||||
const activeTable=document.getElementById("activeResources");
|
|
||||||
const cancelledTable=document.getElementById("cancelledResources");
|
|
||||||
|
|
||||||
if(!activeTable || !cancelledTable){
|
|
||||||
console.error("Table elements not found");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ACTIVE */
|
|
||||||
|
|
||||||
const activeRes=await fetch(API+"/active");
|
|
||||||
const activeData=await activeRes.json();
|
|
||||||
|
|
||||||
let activeHTML="";
|
|
||||||
|
|
||||||
for(const r of activeData){
|
|
||||||
|
|
||||||
const ips=await loadIPs(r.id);
|
|
||||||
|
|
||||||
activeHTML+=`
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
|
|
||||||
<td>${r.name || ""}</td>
|
|
||||||
<td>${r.provider || ""}</td>
|
|
||||||
<td>${r.produkt || ""}</td>
|
|
||||||
<td>${r.cpu || ""}</td>
|
|
||||||
<td>${r.ram || ""}</td>
|
|
||||||
<td>${r.disk || ""}</td>
|
|
||||||
<td>${ips}</td>
|
|
||||||
<td>${statusBadge(r.status)}</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
<button class="btn btn-sm btn-warning" onclick='editResource(${JSON.stringify(r)})'>Edit</button>
|
|
||||||
|
|
||||||
<button class="btn btn-sm btn-info" onclick='copyResource(${JSON.stringify(r)})'>Copy</button>
|
|
||||||
|
|
||||||
<button class="btn btn-sm btn-danger" onclick="deleteResource(${r.id})">Delete</button>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
activeTable.innerHTML=activeHTML;
|
|
||||||
|
|
||||||
|
|
||||||
/* CANCELLED */
|
|
||||||
|
|
||||||
const cancelledRes=await fetch(API+"/cancelled");
|
|
||||||
const cancelledData=await cancelledRes.json();
|
|
||||||
|
|
||||||
let cancelledHTML="";
|
|
||||||
|
|
||||||
for(const r of cancelledData){
|
|
||||||
|
|
||||||
const ips=await loadIPs(r.id);
|
|
||||||
|
|
||||||
cancelledHTML+=`
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
|
|
||||||
<td>${r.name || ""}</td>
|
|
||||||
<td>${r.provider || ""}</td>
|
|
||||||
<td>${r.produkt || ""}</td>
|
|
||||||
<td>${ips}</td>
|
|
||||||
<td>${r.kuendigungsdatum || ""}</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
`;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
cancelledTable.innerHTML=cancelledHTML;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function openModal(){
|
|
||||||
|
|
||||||
document.getElementById("resourceId").value="";
|
|
||||||
|
|
||||||
document.querySelectorAll("#resourceModal input").forEach(e=>e.value="");
|
|
||||||
|
|
||||||
new bootstrap.Modal(document.getElementById("resourceModal")).show();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function editResource(r){
|
|
||||||
|
|
||||||
document.getElementById("resourceId").value=r.id;
|
|
||||||
|
|
||||||
Object.keys(r).forEach(key=>{
|
|
||||||
|
|
||||||
const el=document.getElementById(key);
|
|
||||||
|
|
||||||
if(el) el.value=r[key] || "";
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
new bootstrap.Modal(document.getElementById("resourceModal")).show();
|
container.innerHTML=html;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function addIP(resourceId){
|
||||||
|
|
||||||
|
const ip=document.getElementById("ip-"+resourceId).value;
|
||||||
|
const type=document.getElementById("type-"+resourceId).value;
|
||||||
|
const comment=document.getElementById("comment-"+resourceId).value;
|
||||||
|
|
||||||
function copyResource(r){
|
await fetch(`${API}/resources/${resourceId}/ips`,{
|
||||||
|
|
||||||
r.id=null;
|
|
||||||
|
|
||||||
editResource(r);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
async function saveResource(){
|
|
||||||
|
|
||||||
const id=document.getElementById("resourceId").value;
|
|
||||||
|
|
||||||
const payload={
|
|
||||||
|
|
||||||
name:document.getElementById("name").value,
|
|
||||||
produkt:document.getElementById("produkt").value,
|
|
||||||
provider:document.getElementById("provider").value,
|
|
||||||
cpu:document.getElementById("cpu").value,
|
|
||||||
ram:document.getElementById("ram").value,
|
|
||||||
disk:document.getElementById("disk").value,
|
|
||||||
os:document.getElementById("os").value,
|
|
||||||
kosten_monat:document.getElementById("kosten_monat").value,
|
|
||||||
status:document.getElementById("status").value,
|
|
||||||
kuendigungsdatum:document.getElementById("kuendigungsdatum").value
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
if(id){
|
|
||||||
|
|
||||||
await fetch(API+"/"+id,{
|
|
||||||
method:"PUT",
|
|
||||||
headers:{"Content-Type":"application/json"},
|
|
||||||
body:JSON.stringify(payload)
|
|
||||||
});
|
|
||||||
|
|
||||||
}else{
|
|
||||||
|
|
||||||
await fetch(API,{
|
|
||||||
method:"POST",
|
method:"POST",
|
||||||
headers:{"Content-Type":"application/json"},
|
headers:{
|
||||||
body:JSON.stringify(payload)
|
"Content-Type":"application/json"
|
||||||
|
},
|
||||||
|
body:JSON.stringify({
|
||||||
|
ip,
|
||||||
|
type,
|
||||||
|
comment
|
||||||
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
|
document.getElementById("ip-"+resourceId).value="";
|
||||||
|
document.getElementById("comment-"+resourceId).value="";
|
||||||
|
|
||||||
|
loadIPs(resourceId);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
bootstrap.Modal.getInstance(document.getElementById("resourceModal")).hide();
|
async function deleteIP(ipId,resourceId){
|
||||||
|
|
||||||
|
await fetch(`${API}/ips/${ipId}`,{
|
||||||
|
method:"DELETE"
|
||||||
|
});
|
||||||
|
|
||||||
|
loadIPs(resourceId);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
loadResources();
|
loadResources();
|
||||||
|
});
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
async function deleteResource(id){
|
|
||||||
|
|
||||||
if(!confirm("Wirklich löschen?")) return;
|
|
||||||
|
|
||||||
await fetch(API+"/"+id,{method:"DELETE"});
|
|
||||||
|
|
||||||
loadResources();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
window.onload=loadResources;
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user