2024-04-16 14:30:27 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<title>Configuration Editor</title>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
|
|
|
|
|
<script type="module" src="/ux/curio-ux.mjs"></script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body style="visibility:hidden">
|
|
|
|
|
<!-- Get the machines -->
|
|
|
|
|
<script type="module">
|
|
|
|
|
import { LitElement, html, css } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js';
|
|
|
|
|
window.customElements.define('config-list', class MyElement extends LitElement {
|
|
|
|
|
connectedCallback() {
|
|
|
|
|
super.connectedCallback();
|
|
|
|
|
}
|
|
|
|
|
constructor() {
|
|
|
|
|
super();
|
|
|
|
|
this.layers = [];
|
|
|
|
|
this.topo = [];
|
|
|
|
|
this.loadData();
|
|
|
|
|
this.message = this.readCookie('message');
|
|
|
|
|
this.eraseCookie('message');
|
2024-05-04 08:35:30 +00:00
|
|
|
this.addName = '';
|
2024-04-16 14:30:27 +00:00
|
|
|
}
|
|
|
|
|
static get styles() {
|
|
|
|
|
return [css`
|
|
|
|
|
.alert {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
color: green;
|
|
|
|
|
}
|
|
|
|
|
`];
|
|
|
|
|
}
|
|
|
|
|
render() {
|
|
|
|
|
return html`
|
|
|
|
|
${this.message ? html`<div class="alert">${this.message}</div>` : ''}
|
|
|
|
|
<table>
|
|
|
|
|
${this.layers.map((layer, index) => html`
|
|
|
|
|
<tr>
|
2024-04-19 15:08:21 +00:00
|
|
|
<td style="width: 50%"><a href="/config/edit.html?layer=${layer}"><button>${layer}</button></a></td>
|
2024-04-16 14:30:27 +00:00
|
|
|
<td>
|
|
|
|
|
Used By: ${(f=> f.length?f.map(topo => html`${topo.Server}`):'-')(
|
|
|
|
|
this.topo.filter(topo => topo.LayersCSV.split(",").includes(layer)))}
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
`)}
|
|
|
|
|
</table>
|
2024-05-04 08:35:30 +00:00
|
|
|
<input autofocus type="text" id="layername" placeholder="Layer Name" @change=${this.updateName}>
|
|
|
|
|
<button class="button" @click=${this.addLayer}>Add Layer</button>
|
|
|
|
|
<hr>
|
|
|
|
|
<span>
|
|
|
|
|
To delete a layer, use ysqlsh to issue the following command:<br>
|
|
|
|
|
<code lang=sql>DELETE FROM curio.harmony_config WHERE title = 'my_layer_name';</code>
|
|
|
|
|
</span>
|
2024-04-16 14:30:27 +00:00
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
loadData() {
|
|
|
|
|
Promise.all([
|
|
|
|
|
axios.get('/api/config/layers'),
|
|
|
|
|
axios.get('/api/config/topo'),
|
|
|
|
|
axios.get('/api/config/default')
|
|
|
|
|
])
|
|
|
|
|
.then(responses => {
|
|
|
|
|
this.layers = responses[0].data;
|
|
|
|
|
this.layers.unshift('default');
|
|
|
|
|
this.topo = responses[1].data;
|
|
|
|
|
super.requestUpdate();
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('Error fetching data:', error);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
readCookie(name) {
|
|
|
|
|
const cookies = document.cookie.split(';');
|
|
|
|
|
for (let i = 0; i < cookies.length; i++) {
|
|
|
|
|
const cookie = cookies[i].trim();
|
|
|
|
|
if (cookie.startsWith(name + '=')) {
|
|
|
|
|
return cookie.substring(name.length + 1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return '';
|
|
|
|
|
}
|
|
|
|
|
eraseCookie(name) {
|
|
|
|
|
document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
|
|
|
|
|
}
|
2024-05-04 08:35:30 +00:00
|
|
|
|
|
|
|
|
updateName(e) {
|
|
|
|
|
this.addName = e.target.value;
|
|
|
|
|
}
|
|
|
|
|
addLayer() {
|
|
|
|
|
// get a name
|
|
|
|
|
var v = this.addName;
|
|
|
|
|
if (v === '') {
|
|
|
|
|
alert('Error: Layer name cannot be empty');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
axios.post('/api/config/addlayer', { name: v })
|
|
|
|
|
.then(response => {
|
|
|
|
|
window.location.href = '/config/edit.html?layer=' + v;
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
alert('Error adding layer:', error);
|
|
|
|
|
});
|
|
|
|
|
}
|
2024-04-16 14:30:27 +00:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
<curio-ux>
|
2024-04-19 15:08:21 +00:00
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-3">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-3" style="width: 70%">
|
|
|
|
|
<h1 style="text-wrap: none">Configuration Editor</h1>
|
|
|
|
|
<h3 style="text-wrap: none">Click on a layer to edit its configuration</h3>
|
|
|
|
|
<config-list></config-list>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-3">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-04-16 14:30:27 +00:00
|
|
|
</curio-ux>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
