1.修改部分代码风格，实现风格统一 2.添加数据刷新时间到config中 3.将html单独放到文件中并且添加一些相关说明
This commit is contained in:
209
gateway/templates/config.html
Normal file
209
gateway/templates/config.html
Normal file
@ -0,0 +1,209 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>PLC Gateway Configuration</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; margin: 20px; }
|
||||
h1 { color: #2c3e50; }
|
||||
.config-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 1200px;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
font-family: monospace;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
.status-message {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
}
|
||||
.success { background-color: #d4edda; color: #155724; }
|
||||
.error { background-color: #f8d7da; color: #721c24; }
|
||||
.info { background-color: #d1ecf1; color: #0c5460; }
|
||||
.config-help {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background-color: #f8f9fa;
|
||||
border-left: 4px solid #3498db;
|
||||
}
|
||||
.config-help h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.doc-link {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background-color: #e9f7fe;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>PLC Gateway Configuration</h1>
|
||||
|
||||
<div class="doc-link">
|
||||
<p><a href="/api/doc">View API documentation</a> - Learn how to use the API</p>
|
||||
</div>
|
||||
|
||||
<div class="config-container">
|
||||
<p>Edit the configuration JSON below. Be careful with the syntax.</p>
|
||||
|
||||
<form id="configForm">
|
||||
<textarea id="configEditor" name="config">{{ config_json }}</textarea>
|
||||
<div class="button-group">
|
||||
<button type="button" onclick="validateConfig()">Validate</button>
|
||||
<button type="button" onclick="saveConfig(false)">Save</button>
|
||||
<button type="button" onclick="saveConfig(true)">Save & Reload</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="statusMessage" class="status-message"></div>
|
||||
|
||||
<div class="config-help">
|
||||
<h3>Configuration Guide</h3>
|
||||
<p><strong>PLC Configuration:</strong></p>
|
||||
<ul>
|
||||
<li><code>name</code>: Unique name for the PLC</li>
|
||||
<li><code>ip</code>: IP address of the PLC</li>
|
||||
<li><code>rack</code>: Rack number (usually 0)</li>
|
||||
<li><code>slot</code>: Slot number (usually 1 for S7-1200)</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Data Area Configuration:</strong></p>
|
||||
<ul>
|
||||
<li><code>name</code>: Name of the data area</li>
|
||||
<li><code>type</code>: <code>read</code>, <code>write</code>, or <code>read_write</code></li>
|
||||
<li><code>db_number</code>: DB number (e.g., 100 for DB100)</li>
|
||||
<li><code>offset</code>: Starting byte offset</li>
|
||||
<li><code>size</code>: Size in bytes</li>
|
||||
<li><code>structure</code> (optional): Define how to parse the data</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre>{
|
||||
"plcs": [
|
||||
{
|
||||
"name": "PLC1",
|
||||
"ip": "192.168.0.10",
|
||||
"rack": 0,
|
||||
"slot": 1,
|
||||
"areas": [
|
||||
{
|
||||
"name": "DB100_Read",
|
||||
"type": "read",
|
||||
"db_number": 100,
|
||||
"offset": 0,
|
||||
"size": 4000,
|
||||
"structure": [
|
||||
{"name": "temperature", "type": "real", "offset": 0},
|
||||
{"name": "pressure", "type": "int", "offset": 4}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showStatus(message, type) {
|
||||
const statusDiv = document.getElementById('statusMessage');
|
||||
statusDiv.textContent = message;
|
||||
statusDiv.className = 'status-message ' + type;
|
||||
statusDiv.style.display = 'block';
|
||||
}
|
||||
|
||||
function validateConfig() {
|
||||
try {
|
||||
const config = JSON.parse(document.getElementById('configEditor').value);
|
||||
fetch('/api/config/validate', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Basic ' + btoa('{{ username }}:{{ password }}')
|
||||
},
|
||||
body: JSON.stringify(config)
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(err => { throw new Error(err.message || 'Validation failed'); });
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (data.valid) {
|
||||
showStatus('Configuration is valid!', 'success');
|
||||
} else {
|
||||
showStatus('Validation error: ' + data.message, 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showStatus('Validation error: ' + error.message, 'error');
|
||||
});
|
||||
} catch (e) {
|
||||
showStatus('JSON error: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function saveConfig(reload) {
|
||||
try {
|
||||
const config = JSON.parse(document.getElementById('configEditor').value);
|
||||
const url = reload ? '/api/config?reload=true' : '/api/config';
|
||||
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Basic ' + btoa('{{ username }}:{{ password }}')
|
||||
},
|
||||
body: JSON.stringify(config)
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(err => { throw new Error(err.message || 'Save failed'); });
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
const msg = reload ?
|
||||
'Configuration saved and reloaded successfully!' :
|
||||
'Configuration saved successfully. Restart to apply changes.';
|
||||
showStatus(msg, 'success');
|
||||
} else {
|
||||
showStatus('Save error: ' + data.message, 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showStatus('Error: ' + error.message, 'error');
|
||||
});
|
||||
} catch (e) {
|
||||
showStatus('JSON error: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user