209 lines
7.1 KiB
HTML
209 lines
7.1 KiB
HTML
<!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> |