Isaak
5d35eec1d8
Enhanced the UI with improved padding, line-height, container box shadow, text alignment, and button hover effects. Integrated error handling for the submit button to display HTTP request errors effectively. Corrected script tag indentation.
119 lines
3.5 KiB
HTML
119 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>YAML Editor</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
background-color: #f8f9fa;
|
|
color: #212529;
|
|
margin: 0;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.container {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
padding: 20px;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
}
|
|
|
|
.button {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
margin: 10px 5px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
<script type="text/javascript"
|
|
src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.2.7.nomodule.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container" id="appContainer">
|
|
<label for="yamlContent"></label><textarea id="yamlContent" rows="10"></textarea><br>
|
|
<button class="button" onclick="loadData()">Reload Data</button>
|
|
<button class="button" onclick="saveData()">Save Data</button>
|
|
<div id="statusMessage"></div>
|
|
</div>
|
|
<script>
|
|
function displayStatus(message) {
|
|
document.getElementById('statusMessage').textContent = message;
|
|
}
|
|
|
|
async function loadData() {
|
|
try {
|
|
displayStatus('Loading data...');
|
|
const response = await fetch('/data');
|
|
if (!response.ok) {
|
|
displayStatus(`HTTP error! Status: ${response.status}`);
|
|
return;
|
|
}
|
|
const data = await response.json();
|
|
if (typeof data !== 'object' || data === null || !('text' in data)) {
|
|
displayStatus('Invalid format in response data');
|
|
return;
|
|
}
|
|
document.getElementById('yamlContent').value = data.text || '';
|
|
} catch (error) {
|
|
console.error('Error loading data:', error);
|
|
displayStatus(`Failed to load data: ${error.message}`);
|
|
} finally {
|
|
displayStatus('');
|
|
}
|
|
}
|
|
|
|
function saveData() {
|
|
const content = document.getElementById('yamlContent').value;
|
|
displayStatus('Saving data...');
|
|
fetch('/data', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({text: content}),
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
}
|
|
return response.text();
|
|
})
|
|
.then(data => {
|
|
alert(data);
|
|
displayStatus('');
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
displayStatus('Failed to save data.');
|
|
});
|
|
}
|
|
|
|
loadData();
|
|
</script>
|
|
</body>
|
|
</html>
|