2023-02-22 23:02:49 +00:00
|
|
|
import { html, render, useState, useEffect } from './vendor/preact/standalone.js';
|
2022-04-29 17:13:03 +00:00
|
|
|
|
2022-04-29 02:29:10 +00:00
|
|
|
import { getRecords } from './api.js';
|
|
|
|
|
2022-04-29 17:13:03 +00:00
|
|
|
|
2022-04-29 02:29:10 +00:00
|
|
|
const rdataInputProperties = {
|
2023-02-22 23:02:49 +00:00
|
|
|
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'},
|
2022-04-29 16:04:12 +00:00
|
|
|
};
|
2022-04-29 02:29:10 +00:00
|
|
|
|
2023-02-22 23:02:49 +00:00
|
|
|
const recordTypes = {
|
|
|
|
'A': 'address',
|
|
|
|
'AAAA': 'address',
|
|
|
|
'SRV': 'service',
|
|
|
|
'CNAME': 'alias',
|
|
|
|
'NS': 'name_server',
|
|
|
|
'SOA': 'soa',
|
|
|
|
};
|
2022-04-29 02:29:10 +00:00
|
|
|
|
2023-02-22 23:02:49 +00:00
|
|
|
const recordTypeNames = {
|
|
|
|
'address': 'Adresse IP',
|
|
|
|
'service': 'Service',
|
|
|
|
'alias': 'Alias',
|
|
|
|
'name_server': 'Serveur de nom',
|
|
|
|
'soa': 'SOA',
|
|
|
|
}
|
2022-04-29 02:29:10 +00:00
|
|
|
|
2023-02-22 23:02:49 +00:00
|
|
|
function getNameForRecord(name, type) {
|
|
|
|
return name;
|
|
|
|
}
|
2022-04-29 02:29:10 +00:00
|
|
|
|
2023-02-22 23:02:49 +00:00
|
|
|
function getTypeForRecord(name, type) {
|
|
|
|
return recordTypes[type];
|
2022-04-29 02:29:10 +00:00
|
|
|
}
|
|
|
|
|
2023-02-22 23:02:49 +00:00
|
|
|
function processRecords(records) {
|
|
|
|
return records.reduce((acc, record) => {
|
|
|
|
let name = getNameForRecord(record.Name, record.Type);
|
|
|
|
let type = getTypeForRecord(record.Name, record.Type);
|
|
|
|
if (!(name in acc)) {
|
|
|
|
acc[name] = {};
|
|
|
|
}
|
|
|
|
if (!(type in acc[name])) {
|
|
|
|
acc[name][type] = [];
|
|
|
|
}
|
|
|
|
acc[name][type].push(record);
|
|
|
|
return acc;
|
|
|
|
}, {});
|
|
|
|
}
|
|
|
|
const recordsKeys = {
|
|
|
|
'address': (record) => { return [[ 'Address', record.Address ]] },
|
|
|
|
'service': (record) => { /* TODO */ },
|
|
|
|
'alias': (record) => { return [[ 'Target', record.Target ]] },
|
|
|
|
'name_server': (record) => { return [[ 'Target', record.Target ]] },
|
|
|
|
'soa': (record) => {
|
|
|
|
return [
|
|
|
|
[ 'MasterServerName', record.MasterServerName ],
|
|
|
|
[ 'MaintainerName', record.MaintainerName ],
|
|
|
|
[ 'Refresh', record.Refresh ],
|
|
|
|
[ 'Retry', record.Retry ],
|
|
|
|
[ 'Expire', record.Expire ],
|
|
|
|
[ 'Minimum', record.Minimum ],
|
|
|
|
[ 'Serial', record.Serial ],
|
|
|
|
]
|
|
|
|
},
|
2022-04-29 02:29:10 +00:00
|
|
|
}
|
|
|
|
|
2023-02-22 23:02:49 +00:00
|
|
|
function FriendlyRecord({type, record}) {
|
|
|
|
let keys = recordsKeys[type](record);
|
|
|
|
if (keys.length == 1) {
|
|
|
|
return html`<span>${keys[0][1]}</span>`;
|
|
|
|
} else {
|
|
|
|
return html`
|
|
|
|
<dl>
|
|
|
|
${keys.map(([name, value]) => {return html`<dt><span>${rdataInputProperties[name].label}</span></dt><dd>${value}</dd>`})}
|
|
|
|
</dl>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
}
|
2022-04-29 02:29:10 +00:00
|
|
|
|
2023-02-22 23:02:49 +00:00
|
|
|
function RecordsByName({ name, recordSets }) {
|
2022-04-29 02:33:00 +00:00
|
|
|
return html`
|
2023-02-22 23:02:49 +00:00
|
|
|
<article>
|
|
|
|
<h3>${name}</h4>
|
|
|
|
<div>
|
|
|
|
${Object.entries(recordSets).map(
|
|
|
|
([type, records]) => {
|
|
|
|
return html`
|
|
|
|
<article>
|
|
|
|
<h4>${recordTypeNames[type]}</h4>
|
|
|
|
<ul>
|
|
|
|
${records.map(record => html`<li><${FriendlyRecord} type=${type} record=${record}/></li>`)}
|
|
|
|
</ul>
|
|
|
|
</article>
|
|
|
|
`;
|
2022-04-29 16:04:12 +00:00
|
|
|
}
|
2023-02-22 23:02:49 +00:00
|
|
|
)}
|
2022-04-29 16:04:12 +00:00
|
|
|
</div>
|
2023-02-22 23:02:49 +00:00
|
|
|
</article>
|
2022-04-29 02:33:00 +00:00
|
|
|
`;
|
2022-04-29 02:29:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2023-02-22 23:02:49 +00:00
|
|
|
|
|
|
|
function RecordListFriendly({ zone }) {
|
|
|
|
const [records, setRecords] = useState({});
|
|
|
|
const [editable, setEditable] = useState(false);
|
2022-04-29 02:29:10 +00:00
|
|
|
|
2022-04-29 02:33:00 +00:00
|
|
|
useEffect(() => {
|
|
|
|
getRecords(zone)
|
2023-02-22 23:02:49 +00:00
|
|
|
.then((res) => setRecords(processRecords(res)));
|
|
|
|
}, [zone]);
|
|
|
|
|
|
|
|
return html`
|
|
|
|
${Object.entries(records).map(
|
|
|
|
([name, recordSets]) => {
|
|
|
|
return html`
|
|
|
|
|
|
|
|
<${RecordsByName} name=${name} recordSets=${recordSets}/>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
)}
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
|
|
|
function NewRecordFormFriendly({ zone }) {
|
|
|
|
return html`
|
|
|
|
<form class="new-record">
|
|
|
|
<div>
|
|
|
|
<label for="domain">Domaine</label>
|
|
|
|
<div>
|
|
|
|
<input type="text" id="domain"/>
|
|
|
|
<span>.${ zone }</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<label for="record_type">Type d'enregistrement</label>
|
|
|
|
<select id="record_type">
|
|
|
|
<option>Adresse IP</option>
|
|
|
|
<option>Alias</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<input type="text"/>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<input type="submit" value="Enregistrer"/>
|
|
|
|
<button role="button">Anuler</button>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
`;
|
|
|
|
}
|
2022-04-29 02:29:10 +00:00
|
|
|
|
2023-02-22 23:02:49 +00:00
|
|
|
function ZoneRecords({ zone }) {
|
|
|
|
const [addNewRecord, setAddNewRecord] = useState(false);
|
|
|
|
const [newRecords, setNewRecords] = useState([]);
|
2022-04-29 02:29:10 +00:00
|
|
|
|
2022-04-29 02:33:00 +00:00
|
|
|
return html`
|
2023-02-22 23:02:49 +00:00
|
|
|
<header>
|
|
|
|
<h2>Enregistrements</h2>
|
|
|
|
<button onClick=${() => setNewRecords([...newRecords, NewRecordFormFriendly({ zone })])}>Ajouter un enregistrement</button>
|
|
|
|
<button>Éditer la zone</button>
|
|
|
|
</header>
|
|
|
|
${newRecords}
|
|
|
|
<${RecordListFriendly} zone=${zone} />
|
2022-04-29 02:33:00 +00:00
|
|
|
`;
|
2022-04-29 02:29:10 +00:00
|
|
|
}
|
|
|
|
|
2022-04-29 17:13:03 +00:00
|
|
|
export default function(element, { zone }) {
|
2023-02-22 23:02:49 +00:00
|
|
|
render(html`<${ZoneRecords} zone=${zone} />`, element);
|
2022-04-29 17:13:03 +00:00
|
|
|
};
|