Small refactor into backend & frontend
This commit is contained in:
1
frontend/config.js
Normal file
1
frontend/config.js
Normal file
@@ -0,0 +1 @@
|
||||
const backend_api = 'http://localhost:8001/'
|
||||
45
frontend/index.html
Normal file
45
frontend/index.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>zetikettes 0.2</title>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<!-- Compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
|
||||
|
||||
<!-- Compiled and minified JavaScript -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
||||
|
||||
<script src="config.js"></script>
|
||||
<script src="zetikettes.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="container center orange-text">
|
||||
<h1>Zétikwett's</h1>
|
||||
</header>
|
||||
<main class="container row">
|
||||
<div class="col m6 offset-m3 s12">
|
||||
<ul class="collapsible" id="appbody"></ul>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="page-footer">
|
||||
<div class="container row">
|
||||
<span class="col right">displayed with recycled electrons.</span>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
45
frontend/newtikette.html
Normal file
45
frontend/newtikette.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>zetikettes 0.2</title>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<!-- Compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
|
||||
|
||||
<!-- Compiled and minified JavaScript -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
||||
|
||||
<script src="config.js"></script>
|
||||
<script src="newtikette.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="container center orange-text">
|
||||
<h1>Zétikwett's</h1>
|
||||
</header>
|
||||
<main class="container row">
|
||||
<div class="col m6 offset-m3 s12">
|
||||
<div id="appbody" class="container"></div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="page-footer">
|
||||
<div class="container row">
|
||||
<span class="col right">displayed with recycled electrons.</span>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
125
frontend/newtikette.js
Normal file
125
frontend/newtikette.js
Normal file
@@ -0,0 +1,125 @@
|
||||
const params = [
|
||||
['dluo', 'DLUO', true],
|
||||
['lot', 'Nº de lot', true],
|
||||
['qty', 'Poids net (g)', true],
|
||||
['teneur', 'Teneur en fruits (%)', false],
|
||||
['fruit', 'Quantité de fruits pour 100g (g)', false],
|
||||
]
|
||||
|
||||
function post() {
|
||||
const lemot = $('input[type=password]').val();
|
||||
const formdata = new FormData($('form')[0]);
|
||||
formdata.append('lemotdepasse', lemot);
|
||||
$.ajax({
|
||||
url: backend_api + `newtikette`,
|
||||
type: 'POST',
|
||||
data: formdata,
|
||||
|
||||
contentType: false,
|
||||
processData: false,
|
||||
|
||||
xhr: function () {
|
||||
var myXhr = $.ajaxSettings.xhr();
|
||||
if (myXhr.upload) {
|
||||
// For handling the progress of the upload
|
||||
myXhr.upload.addEventListener('progress', function (e) {
|
||||
if (e.lengthComputable) {
|
||||
$('progress').attr({
|
||||
value: e.loaded,
|
||||
max: e.total,
|
||||
});
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
return myXhr;
|
||||
}
|
||||
})
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
if (err.status == 403) {
|
||||
M.toast({html: 'access denied'});
|
||||
} else if (err.status == 500) {
|
||||
M.toast({html: 'server error'});
|
||||
}
|
||||
})
|
||||
.always(() => {
|
||||
$('.progress').hide();
|
||||
$('.btn').removeClass('disabled');
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(async () => {
|
||||
const appbody = $("#appbody");
|
||||
const block = $('<form class="section">');
|
||||
block.append($(`<div class="input-field"><label class="active">Title</label>
|
||||
<input type="text" name="title" value="Gelée de brandade aux cêpes biou">`));
|
||||
block.append($(`<div class="input-field"><label class="active">
|
||||
<input type="checkbox" name="landscape"><span>landscape</span></label>`));
|
||||
const subst = $('<div class="section"><label class="active">Substitutions</label><p></p>');
|
||||
for (let param of params) {
|
||||
subst.append($(`<div><label class="active"><input type="checkbox" name="${param[0]}" ${param[2] ? 'checked': ''}>
|
||||
<span>\${${param[0]}}: ${param[1]}</span></label>`));
|
||||
}
|
||||
block.append(subst);
|
||||
|
||||
block.append(`<div class="file-field input-field">
|
||||
<div class="btn">
|
||||
<span>File</span>
|
||||
<input type="file" name="sticker" accept=".svg">
|
||||
</div>
|
||||
<div class="file-path-wrapper">
|
||||
<input class="file-path validate" type="text" placeholder="Template .svg file">
|
||||
</div>
|
||||
`)
|
||||
|
||||
const loader = $('<div class="progress"><div class="determinate"></div></div>')
|
||||
.hide();
|
||||
|
||||
let setup = false;
|
||||
|
||||
const action = $('<div class="section">')
|
||||
.append($('<a class="btn">add newtikette<a>')
|
||||
.click(() => {
|
||||
if (!setup) {
|
||||
setup = true;
|
||||
$('input[type=password]').on('keydown', e => {
|
||||
if (e.keyCode == 13 && !e.repeat) {
|
||||
$('.modal').modal('close');
|
||||
post();
|
||||
}
|
||||
});
|
||||
$("#pushgo").click(() => { post(); });
|
||||
}
|
||||
|
||||
$('.modal').modal('open');
|
||||
$('input[type=password]').focus();
|
||||
|
||||
loader.show();
|
||||
$('.btn').addClass("disabled");
|
||||
$('.modal-close').removeClass("disabled");
|
||||
|
||||
})
|
||||
.append(loader));
|
||||
|
||||
const lemotdepasse = $(`
|
||||
<div id="modal1" class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>A lemotdepasse is needed</h4>
|
||||
<div class="input-field"><label class="active">lemotdepasse</label>
|
||||
<input type="password">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn modal-close" id="pushgo">go</a>
|
||||
</div>
|
||||
`);
|
||||
|
||||
appbody
|
||||
.append(lemotdepasse)
|
||||
.append(block)
|
||||
.append(action);
|
||||
|
||||
$(".modal").modal();
|
||||
});
|
||||
91
frontend/zetikettes.js
Normal file
91
frontend/zetikettes.js
Normal file
@@ -0,0 +1,91 @@
|
||||
const params = {
|
||||
'dluo': 'DLUO',
|
||||
'lot': 'Nº de lot',
|
||||
'qty': 'Poids net (g)',
|
||||
'vol': 'Volume net (cL)',
|
||||
'teneur': 'Teneur en fruits (%)',
|
||||
'fruit': 'Quantité de fruits pour 100g (g)',
|
||||
}
|
||||
|
||||
function loadAll(zetikettes) {
|
||||
const appbody = $("#appbody");
|
||||
for (let zett of zetikettes) {
|
||||
const block = $('<div class="section">');
|
||||
for (let sub in zett.subs) {
|
||||
block.append($(`<div class="input-field"><label class="active">${params[sub]}</label><input type="text" name="${sub}" value="${zett.subs[sub]}">`));
|
||||
}
|
||||
const loader = $('<div class="progress"><div class="indeterminate"></div></div>')
|
||||
.hide();
|
||||
|
||||
const action = $('<div class="section">')
|
||||
.append($('<a class="btn">generate<a>')
|
||||
.click(() => {
|
||||
const subs = block.find(':text')
|
||||
.toArray()
|
||||
.reduce((obj, el) => ({...obj, [el.name]: el.value}), {});
|
||||
const req = {
|
||||
sticker: zett.sticker,
|
||||
subs,
|
||||
landscape: zett.landscape,
|
||||
};
|
||||
|
||||
loader.show();
|
||||
$('.btn').addClass("disabled");
|
||||
|
||||
$.post(backend_api, JSON.stringify(req))
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
const pdfbtn = $(`<a class="btn" href="${backend_api}/data/${data.file}" target="_blank">open pdf</a>`);
|
||||
action.append(pdfbtn);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
.always(() => {
|
||||
loader.hide();
|
||||
$('.btn').removeClass('disabled');
|
||||
});
|
||||
})
|
||||
.append(loader));
|
||||
|
||||
appbody
|
||||
.append($('<li>')
|
||||
.append($(`<div class="collapsible-header"><h6 class="blue-text">${zett.title}</h6></div>`))
|
||||
.append($('<div class="collapsible-body">')
|
||||
.append(block)
|
||||
.append(action)));
|
||||
}
|
||||
|
||||
$('.collapsible').collapsible();
|
||||
|
||||
konami();
|
||||
}
|
||||
|
||||
function konami() {
|
||||
var k = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65],
|
||||
n = 0;
|
||||
$(document).keydown(function (e) {
|
||||
if (e.keyCode === k[n++]) {
|
||||
if (n === k.length) {
|
||||
document.location.href = 'newtikette.html';
|
||||
}
|
||||
}
|
||||
else {
|
||||
n = 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(async () => {
|
||||
try {
|
||||
const resp = await $.ajax({
|
||||
url: backend_api + 'list',
|
||||
timeout: 1000,
|
||||
});
|
||||
loadAll(resp.tikettes);
|
||||
} catch(e) {
|
||||
const appbody = $("#appbody");
|
||||
appbody.append(`<li>Could not reach backend server`);
|
||||
throw e;
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user