|
<!DOCTYPE html> |
|
<html lang="ru"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Получение информации о группе</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
text-align: center; |
|
background-color: #f0f0f0; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
h1 { |
|
background-color: #4CAF50; |
|
color: white; |
|
padding: 20px; |
|
margin: 0; |
|
border-bottom: 2px solid #388E3C; |
|
} |
|
.input-row { |
|
display: flex; |
|
justify-content: center; |
|
gap: 10px; |
|
margin-top: 20px; |
|
} |
|
.input-row input, .input-row select { |
|
padding: 10px; |
|
font-size: 16px; |
|
border: 1px solid #ccc; |
|
border-radius: 5px; |
|
} |
|
button[type="submit"] { |
|
color: white; |
|
background-color: #4CAF50; |
|
border: none; |
|
cursor: pointer; |
|
padding: 10px 20px; |
|
font-size: 16px; |
|
border-radius: 5px; |
|
margin-top: 20px; |
|
} |
|
button[type="submit"]:hover { |
|
background-color: #388E3C; |
|
} |
|
.result-table { |
|
width: 50%; |
|
margin: 20px auto; |
|
border-collapse: collapse; |
|
} |
|
.result-table th, .result-table td { |
|
border: 1px solid #ddd; |
|
padding: 8px; |
|
} |
|
.result-table th { |
|
background-color: #4CAF50; |
|
color: white; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<h1>Получение списка параметров группы</h1> |
|
<form id="groupForm"> |
|
<div class="input-row"> |
|
<label for="groupId">Идентификатор группы:</label> |
|
<input type="text" id="groupId" name="groupId" required> |
|
</div> |
|
<div class="input-row"> |
|
<label for="apiToken">API Токен:</label> |
|
<input type="text" id="apiToken" name="apiToken" required> |
|
</div> |
|
<button type="submit">Получить список параметров группы</button> |
|
</form> |
|
<div id="result"></div> |
|
|
|
<script> |
|
document.addEventListener('DOMContentLoaded', function() { |
|
const groupForm = document.getElementById('groupForm'); |
|
const resultDiv = document.getElementById('result'); |
|
groupForm.addEventListener('submit', function(event) { |
|
event.preventDefault(); |
|
const groupId = document.getElementById('groupId').value; |
|
const apiToken = document.getElementById('apiToken').value; |
|
const url = `https://diamonik7777-up-fail.hf.space/api/group/${groupId}/parameters?apiToken=${apiToken}`; |
|
fetch(url, { |
|
method: 'GET', |
|
headers: { |
|
'Content-Type': 'application/json' |
|
} |
|
}) |
|
.then(response => { |
|
if (!response.ok) { |
|
throw new Error('Network response was not ok ' + response.statusText); |
|
} |
|
return response.json(); |
|
}) |
|
.then(data => { |
|
if (data.error) { |
|
resultDiv.innerHTML = `<p style="color: red;">Ошибка: ${data.error}</p>`; |
|
} else { |
|
displayResult(data.collection); |
|
} |
|
}) |
|
.catch(error => { |
|
resultDiv.innerHTML = `<p style="color: red;">Ошибка: ${error.message}</p>`; |
|
}); |
|
}); |
|
|
|
function displayResult(collection) { |
|
let list_id = collection[0].list_id; |
|
let phone_id = collection.find(item => item.title === "phone")?.id || "Не найдено"; |
|
let name_id = collection.find(item => item.title === "name")?.id || "Не найдено"; |
|
|
|
let tableHTML = ` |
|
<table class="result-table"> |
|
<thead> |
|
<tr> |
|
<th>Ключ</th> |
|
<th>Параметр</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<tr> |
|
<td>list_id</td> |
|
<td>${list_id}</td> |
|
</tr> |
|
<tr> |
|
<td>phone_id</td> |
|
<td>${phone_id}</td> |
|
</tr> |
|
<tr> |
|
<td>name_id</td> |
|
<td>${name_id}</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
`; |
|
|
|
resultDiv.innerHTML = tableHTML; |
|
} |
|
}); |
|
</script> |
|
</body> |
|
</html> |
