DMC/wg-selfserve
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rearranged client population code to be more legible

Browse Source 
Also changed the css to use a class instead of svg elements directly.
This makes it easier to switch libraries for qr generation.
This commit is contained in:
Erik Thuning 2025-03-28 13:38:31 +01:00
parent 098e380436
commit 409123b038
2 changed files with 15 additions and 10 deletions
public/static
script.jsstyle.css

15
public/static/script.js

@ -72,22 +72,26 @@
const config = template.querySelector('config');
make_api_request('GET', '/configs/' + config_id)
.then((data) => {
const qr = QRCode({msg: data.data,
pad: 0,
ecl: 'L'});
qr.setAttribute('aria-label', 'QR code');
qr.setAttribute('shape-rendering', 'crisp-edges');
config.id = 'config-' + config_id;
config.querySelector('name').textContent = data.name;
config.querySelector('description').textContent = data.description;
config.querySelector('data').textContent = data.data;
const qr = QRCode({msg: data.data,
pad: 0,
ecl: 'L'});
qr.classList.add('qr');
qr.setAttribute('aria-label', 'QR code');
qr.setAttribute('shape-rendering', 'crisp-edges');
config.querySelector('qrcode').replaceWith(qr);
const expires = config.querySelector('expires');
if(data.expires) {
expires.textContent = data.expires;
} else {
config.removeChild(expires);
}
const link = config.querySelector('.conffile');
link.setAttribute('href',
dlprefix + encodeURIComponent(data.data));
@ -100,6 +104,7 @@
.addEventListener('click', (event) => {
link.click();
});
const config_children = configs_parent.children;
for(let i = 0; i < config_children.length; i++) {
const child = config_children[i];

10
public/static/style.css

@ -123,7 +123,7 @@ config > expires {
config > expires:before {
content: 'Expires: ';
}
config > svg {
config > .qr {
grid-area: qr;
padding: 0.5rem;
background-color: #FFFFFF;
@ -278,7 +278,7 @@ button.delete:hover {
"footer";
grid-template-rows: min-content auto auto 280px 2.8rem;
}
config > svg {
config > .qr {
justify-self: center;
width: 280px;
height: 280px;
@ -294,7 +294,7 @@ button.delete:hover {
"qr footer";
grid-template-rows: min-content auto auto 240px;
}
config > svg {
config > .qr {
justify-self: start;
align-self: start;
height: 240px;
@ -320,7 +320,7 @@ button.delete:hover {
"footer";
grid-template-rows: min-content auto auto 280px 2.8rem;
}
config > svg {
config > .qr {
justify-self: center;
width: 280px;
height: 280px;
@ -332,7 +332,7 @@ button.delete:hover {
display: flex;
flex-direction: column;
}
config > svg {
config > .qr {
width: auto;
height: auto;
max-width: 100%;