A wrapping client and label printing

For now, the server does the printing. Later it should probably be split into a different service.
2022-09-07 19:08:49 +02:00
parent 0c9c893237
commit 235d9272ed
5 changed files with 203 additions and 13 deletions
--- a/client/wrap.html
+++ b/client/wrap.html
@@ -0,0 +1,45 @@
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <title>chikin wrap 0.1</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">
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        <!-- Compiled and minified JavaScript -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+
+        <script src="wrap.js"></script>
+
+        <style>
+body {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+}
+
+main {
+    flex: 1 0 auto;
+}
+        </style>
+    </head>
+    <body>
+        <header class="page-header center amber brown-text">
+            <h1>Chikin wrap</h1>
+        </header>
+        <main class="container row">
+            <div class="col m6 offset-m3 s12">
+                <div id="appbody"></div>
+            </div>
+        </main>
+        <footer class="page-footer">
+            <div class="container row">
+                <span class="col right">displayed with recycled electrons.</span>
+            </div>
+        </footer>
+    </body>
+</html>
--- a/client/wrap.js
+++ b/client/wrap.js
@@ -0,0 +1,102 @@
+const config = 'dev';
+const backend_api = {
+    'prod': '/zetikettes/srv/',
+    'dev': 'http://scrawny.local:3000',
+}[config];
+
+const token = localStorage.getItem('token');
+
+async function getBandz() {
+    const uri = `${backend_api}/bandz`;
+    const res = await $.ajax(uri, {headers: {Authorization: `Bearer ${token}`}});
+    return res.bandz;
+}
+
+async function wrapAChikin(req) {
+    const uri = `${backend_api}/wrap`;
+    const res = await $.ajax(uri, {
+        type: 'POST',
+        contentType: 'application/json',
+        data: JSON.stringify(req),
+        headers: {Authorization: `Bearer ${token}`},
+    });
+    return res.chikinId;
+}
+
+function printLabel(chikinId) {
+    const uri = `${backend_api}/print`;
+    $.ajax(uri, {
+        type: 'POST',
+        contentType: 'application/json',
+        data: JSON.stringify({chikinId}),
+        headers: {Authorization: `Bearer ${token}`},
+    });
+}
+
+$(document).ready(() => {
+    const appbody = $("#appbody");
+
+    const bandSelect = $('<div class="input-field col s12">')
+        .append(
+            $('<select>')
+                .append('<option disabled selected>Choose a band</option>')
+        )
+        .append('<label>Band</label>');
+
+    const block = $('<div class="section">');
+    block
+        .append(bandSelect)
+        .append($('<div class="input-field col s12">')
+            .append('<input type="text" class="datepicker">')
+            .append('<label>Date of wrapping</label>')
+        );
+
+    const loader = $('<div class="progress"><div class="indeterminate"></div></div>')
+        .hide();
+
+    const action = $('<div class="section">')
+        .append(
+            $('<a class="btn">wrap-a-chikin<i class="material-icons right">send</i></a>')
+            .click(async () => {
+                loader.show();
+                $('.btn').addClass("disabled");
+
+                const req = {
+                    bandId: $('select').val(),
+                    wrapDate: $('.datepicker').val(),
+                    weight: $('#weight').val(),
+                };
+
+                try {
+                    const chikinId = await wrapAChikin(req);
+                    printLabel(chikinId);
+                } finally {
+                    loader.hide();
+                    $('#weight').val('');
+                    $('.btn').removeClass('disabled');
+                }
+            })
+        );
+
+    block
+        .append(
+            $('<div class="input-field col s12">')
+            .append('<input type="text" inputmode="decimal" id="weight">')
+            .append('<label>weight (g)</label>')
+        )
+        .append(
+            $('<div class="input-field col s12">')
+            .append(action)
+            .append(loader)
+        )
+    ;
+    appbody.append(block);
+
+    getBandz().then(bandz => {
+        $('select').append(bandz.map(band => `<option value="${band.id}">${band.name}</option>`));
+        $('select').formSelect();
+    });
+
+    $('select').formSelect();
+    $('.datepicker').datepicker({setDefaultDate: true, defaultDate: new Date()});
+});