fix indentation
This commit is contained in:
parent
c04090adaf
commit
db82f8564c
7 changed files with 155 additions and 155 deletions
|
|
@ -2,21 +2,21 @@ const baseUrl = '/api/v1';
|
|||
|
||||
|
||||
function apiGet(url) {
|
||||
return fetch(`${baseUrl}/${url}`)
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
// do something here
|
||||
throw new Error('Not ok');
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
return fetch(`${baseUrl}/${url}`)
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
// do something here
|
||||
throw new Error('Not ok');
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function getRecords(zone) {
|
||||
return apiGet(`zones/${zone}/records`)
|
||||
return apiGet(`zones/${zone}/records`)
|
||||
}
|
||||
|
||||
export {
|
||||
getRecords,
|
||||
getRecords,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,99 +2,99 @@ import { html, Component, render, createContext, useState, useEffect } from 'htt
|
|||
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'},
|
||||
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'};
|
||||
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>
|
||||
<span class=label>${label}:</span>
|
||||
<span class=value>${value}</span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
<//>
|
||||
`;
|
||||
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>
|
||||
<span class=label>${label}:</span>
|
||||
<span class=value>${value}</span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
<//>
|
||||
`;
|
||||
}
|
||||
|
||||
function RData({ rdata, index }) {
|
||||
const { Address: address } = rdata;
|
||||
return Object.entries(rdata).map(([name, value]) => html`<${RDataInput} name=${name} value=${value} index=${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><${RData} rdata=${rdata} index=${index}/></div>
|
||||
</tr>
|
||||
`;
|
||||
return html`
|
||||
<tr>
|
||||
<td class=domain>${name}</div>
|
||||
<td class=type>${type}</div>
|
||||
<td class=ttl>${ttl}</div>
|
||||
<td class=rdata><${RData} rdata=${rdata} index=${index}/></div>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
function RecordList({ zone }) {
|
||||
const [records, setRecords] = useState([]);
|
||||
const [editable, setEditable] = useState(false);
|
||||
const [records, setRecords] = useState([]);
|
||||
const [editable, setEditable] = useState(false);
|
||||
|
||||
const toggleEdit = () => setEditable(!editable);
|
||||
const toggleEdit = () => setEditable(!editable);
|
||||
|
||||
useEffect(() => {
|
||||
getRecords(zone)
|
||||
.then((res) => setRecords(res));
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
getRecords(zone)
|
||||
.then((res) => setRecords(res));
|
||||
}, [])
|
||||
|
||||
|
||||
return html`
|
||||
<${Editable.Provider} value=${editable}>
|
||||
<button onclick=${toggleEdit}>${ editable ? 'Save' : 'Edit'}</button>
|
||||
<table class=record-list>
|
||||
<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>
|
||||
<//>
|
||||
`;
|
||||
return html`
|
||||
<${Editable.Provider} value=${editable}>
|
||||
<button onclick=${toggleEdit}>${ editable ? 'Save' : 'Edit'}</button>
|
||||
<table class=record-list>
|
||||
<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 { RecordList };
|
||||
|
|
|
|||
|
|
@ -1,41 +1,41 @@
|
|||
body {
|
||||
color: #2e2033;
|
||||
color: #2e2033;
|
||||
}
|
||||
.record-list {
|
||||
border-collapse: collapse;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.record-list .rdata {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.record-list th, .record-list td {
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
padding: 0.25rem;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.record-list thead {
|
||||
background: #ccb9ff;
|
||||
color: #39004d;
|
||||
background: #ccb9ff;
|
||||
color: #39004d;
|
||||
}
|
||||
|
||||
.record-list tbody tr:nth-child(even) td {
|
||||
background: #ccb9ff3d;
|
||||
background: #ccb9ff3d;
|
||||
}
|
||||
|
||||
.record-list tbody tr .rdata span.label,
|
||||
.record-list tbody tr .rdata label {
|
||||
display: inline-block;
|
||||
padding: 0.1em 0.5em;
|
||||
background: #cecece;
|
||||
font-size: 0.7rem;
|
||||
border-radius: 0.5em;
|
||||
margin-right: 0.1rem;
|
||||
display: inline-block;
|
||||
padding: 0.1em 0.5em;
|
||||
background: #cecece;
|
||||
font-size: 0.7rem;
|
||||
border-radius: 0.5em;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
|
||||
.record-list tbody tr .rdata > div {
|
||||
margin: 0.1rem 0.5rem 0.1rem 0;
|
||||
margin: 0.1rem 0.5rem 0.1rem 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,48 +10,48 @@ use tera::{Tera, Context};
|
|||
|
||||
|
||||
pub struct TemplateState {
|
||||
tera: Tera,
|
||||
tera: Tera,
|
||||
}
|
||||
|
||||
impl TemplateState {
|
||||
pub fn new(template_directory: &Path) -> Self {
|
||||
let template_glob = template_directory.join("**").join("*");
|
||||
match Tera::new(template_glob.to_str().expect("valid glob path string")) {
|
||||
Ok(tera) => TemplateState { tera },
|
||||
Err(e) => {
|
||||
println!("Loading templates failed: {}", e);
|
||||
exit(1)
|
||||
}
|
||||
}
|
||||
}
|
||||
pub fn new(template_directory: &Path) -> Self {
|
||||
let template_glob = template_directory.join("**").join("*");
|
||||
match Tera::new(template_glob.to_str().expect("valid glob path string")) {
|
||||
Ok(tera) => TemplateState { tera },
|
||||
Err(e) => {
|
||||
println!("Loading templates failed: {}", e);
|
||||
exit(1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pub struct Template<'t, S: Serialize> {
|
||||
pub name: &'t str,
|
||||
pub context: S,
|
||||
pub name: &'t str,
|
||||
pub context: S,
|
||||
}
|
||||
|
||||
impl<'r, S: Serialize> Template<'r, S> {
|
||||
pub fn new(name: &'r str, context: S) -> Self {
|
||||
Template {
|
||||
name,
|
||||
context
|
||||
}
|
||||
}
|
||||
pub fn new(name: &'r str, context: S) -> Self {
|
||||
Template {
|
||||
name,
|
||||
context
|
||||
}
|
||||
}
|
||||
|
||||
fn render(self, tera: &Tera) -> Result<(ContentType, String), Status> {
|
||||
let context = Context::from_serialize(self.context).map_err(|e| {
|
||||
error!("Failed to serialize context: {}", e);
|
||||
Status::InternalServerError
|
||||
})?;
|
||||
fn render(self, tera: &Tera) -> Result<(ContentType, String), Status> {
|
||||
let context = Context::from_serialize(self.context).map_err(|e| {
|
||||
error!("Failed to serialize context: {}", e);
|
||||
Status::InternalServerError
|
||||
})?;
|
||||
|
||||
let content = tera.render(self.name, &context).map_err(|e| {
|
||||
error!("Failed to render template `{}`: {}", self.name, e);
|
||||
Status::InternalServerError
|
||||
})?;
|
||||
let content = tera.render(self.name, &context).map_err(|e| {
|
||||
error!("Failed to render template `{}`: {}", self.name, e);
|
||||
Status::InternalServerError
|
||||
})?;
|
||||
|
||||
Ok((ContentType::HTML, content))
|
||||
}
|
||||
Ok((ContentType::HTML, content))
|
||||
}
|
||||
}
|
||||
|
||||
impl<'r, 't, S: Serialize> Responder<'r, 'static> for Template<'t, S> {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}{% endblock title %}Nomilo</title>
|
||||
<link rel="stylesheet" type="text/css" href="/styles/main.css">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}{% endblock title %}Nomilo</title>
|
||||
<link rel="stylesheet" type="text/css" href="/styles/main.css">
|
||||
</head>
|
||||
<body>
|
||||
{% block content %}{% endblock content %}
|
||||
{% block scripts %}{% endblock scripts %}
|
||||
{% block content %}{% endblock content %}
|
||||
{% block scripts %}{% endblock scripts %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,16 +3,16 @@
|
|||
{% block title %}Login ⋅ {% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
<main>
|
||||
{% if error %}
|
||||
<p>
|
||||
{{ error }}
|
||||
</p>
|
||||
{% endif %}
|
||||
<form method="POST" action="/login">
|
||||
<input type="text" name="username">
|
||||
<input type="password" name="password">
|
||||
<input type="submit" value="Se connecter">
|
||||
</form>
|
||||
</main>
|
||||
<main>
|
||||
{% if error %}
|
||||
<p>
|
||||
{{ error }}
|
||||
</p>
|
||||
{% endif %}
|
||||
<form method="POST" action="/login">
|
||||
<input type="text" name="username">
|
||||
<input type="password" name="password">
|
||||
<input type="submit" value="Se connecter">
|
||||
</form>
|
||||
</main>
|
||||
{% endblock content %}
|
||||
|
|
|
|||
|
|
@ -3,16 +3,16 @@
|
|||
{% block title %}{{ zone }} ⋅ Records ⋅ {% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
<main></main>
|
||||
<main></main>
|
||||
{% endblock content %}
|
||||
|
||||
{% block scripts %}
|
||||
<script type="module">
|
||||
const zoneName = "{{ zone }}";
|
||||
<script type="module">
|
||||
const zoneName = "{{ zone }}";
|
||||
|
||||
import { RecordList } from '/scripts/records.js';
|
||||
import { html, render } from 'https://unpkg.com/htm/preact/standalone.mjs';
|
||||
import { RecordList } from '/scripts/records.js';
|
||||
import { html, render } from 'https://unpkg.com/htm/preact/standalone.mjs';
|
||||
|
||||
render(html`<${RecordList} zone=${zoneName} />`, document.querySelector('main'));
|
||||
</script>
|
||||
render(html`<${RecordList} zone=${zoneName} />`, document.querySelector('main'));
|
||||
</script>
|
||||
{% endblock scripts %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue