118 lines
3.7 KiB
JavaScript
118 lines
3.7 KiB
JavaScript
import { html, Component, render, createContext, useState, useEffect } from './vendor/preact/standalone.js';
|
|
|
|
import { getRecords } from './api.js';
|
|
|
|
|
|
const rdataInputProperties = {
|
|
Address: {label: 'adresse', type: 'text'},
|
|
Serial: {label: 'serial', type: 'number'},
|
|
Minimum: {label: 'minimum', type: 'number'},
|
|
Retry: {label: 'nouvelle tentative', type: 'number'},
|
|
Refresh: {label: 'actualisation', type: 'number'},
|
|
MaintainerName: {label: 'contact', type: 'text'},
|
|
MasterServerName: {label: 'serveur primaire', type: 'text'},
|
|
Expire: {label: 'expiration', type: 'number'},
|
|
Target: {label: 'cible', type: 'text'},
|
|
};
|
|
|
|
const Editable = createContext(false);
|
|
|
|
|
|
function RDataInput({ name, value = '', index = 0 }) {
|
|
const {label, type} = rdataInputProperties[name] || {label: name, type: 'text'};
|
|
|
|
return html`
|
|
<${Editable.Consumer}>
|
|
${
|
|
(editable) => {
|
|
if (editable) {
|
|
return html`
|
|
<div>
|
|
<label for=record_${index}_${name}>${label}:</label>
|
|
<input id=record_${index}_${name} type=${type} value=${value} />
|
|
</div>
|
|
`;
|
|
} else {
|
|
return html`
|
|
<div>
|
|
<dt>${label}:</dt>
|
|
<dd>${value}</dd>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
}
|
|
<//>
|
|
`;
|
|
}
|
|
|
|
function RData({ rdata, index }) {
|
|
const { Address: address } = rdata;
|
|
return Object.entries(rdata).map(([name, value]) => html`<${RDataInput} name=${name} value=${value} index=${index} />`);
|
|
}
|
|
|
|
|
|
function Record({name, ttl, type, rdata, index = 0}) {
|
|
return html`
|
|
<tr>
|
|
<td class=domain>${name}</div>
|
|
<td class=type>${type}</div>
|
|
<td class=ttl>${ttl}</div>
|
|
<td class=rdata>
|
|
<${Editable.Consumer}>
|
|
${
|
|
(editable) => {
|
|
if (editable) {
|
|
return html`<${RData} rdata=${rdata} index=${index}/>`
|
|
} else {
|
|
return html`<dl><${RData} rdata=${rdata} index=${index}/></dl>`
|
|
}
|
|
}
|
|
}
|
|
|
|
<//>
|
|
</div>
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
function RecordList({ zone }) {
|
|
const [records, setRecords] = useState([]);
|
|
const [editable, setEditable] = useState(false);
|
|
|
|
const toggleEdit = () => setEditable(!editable);
|
|
|
|
useEffect(() => {
|
|
getRecords(zone)
|
|
.then((res) => setRecords(res));
|
|
}, []);
|
|
|
|
|
|
return html`
|
|
<${Editable.Provider} value=${editable}>
|
|
<button onclick=${toggleEdit}>${ editable ? 'Save' : 'Edit'}</button>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th>Type</th>
|
|
<th>TTL</th>
|
|
<th>Données</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${records.map(
|
|
({Name, Class, TTL, Type, ...rdata}, index) => {
|
|
return html`<${Record} name=${Name} ttl=${TTL} type=${Type} rdata=${rdata} index=${index}/>`
|
|
}
|
|
)}
|
|
</tbody>
|
|
</ul>
|
|
<//>
|
|
`;
|
|
}
|
|
|
|
export default function(element, { zone }) {
|
|
render(html`<${RecordList} zone=${zone} />`, element);
|
|
};
|