manager control over form of print tag

ereuse_devicehub/static/js/print.pdf.js

@@ -0,0 +1,58 @@
+$(document).ready(function() {
+    STORAGE_KEY = 'tag-spec-key';
+    $("#printerType").on("change", change_size);
+    change_size();
+    load_size();
+    // printpdf();
+})
+
+function qr_draw(url) {
+    var qrcode = new QRCode(document.getElementById("qrcode"), {
+        text: url,
+        width: 128,
+        height: 128,
+        colorDark : "#000000",
+        colorLight : "#ffffff",
+        correctLevel : QRCode.CorrectLevel.H
+    });
+}
+
+function save_size() {
+    var height = $("#height-tag").val();
+    var width = $("#width-tag").val();
+    var sizePreset = $("#printerType").val();
+    var data = {"height": height, "width": width, "sizePreset": sizePreset};
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+}
+
+function load_size() {
+    var data = JSON.parse(localStorage.getItem(STORAGE_KEY));
+    if (data){
+        $("#height-tag").val(data.height);
+        $("#width-tag").val(data.width);
+        $("#printerType").val(data.sizePreset);
+    };
+}
+
+function reset_size() {
+    localStorage.removeItem(STORAGE_KEY);
+    $("#printerType").val('brotherSmall');
+    change_size();
+}
+
+function change_size() {
+    var sizePreset = $("#printerType").val();
+    if (sizePreset == 'brotherSmall') {
+        $("#height-tag").val(29);
+        $("#width-tag").val(62);
+    } else if (sizePreset == 'smallTagPrinter') {
+        $("#height-tag").val(59);
+        $("#width-tag").val(97);
+    }
+}
+
+function printpdf() {
+    var height = $("#height-tag").val();
+    var width = $("#width-tag").val();
+    console.log(height);
+}

ereuse_devicehub/templates/inventory/tag_details.html

@@ -75,19 +75,30 @@
                   <label class="col-form-label col-sm-2">Width</label>
                   <div class="col-sm-10">
                     <div class="input-group mb-3">
-                      <input class="form-control" name='width-tag' type="number" value="62" min="52" max="300" />
+                      <input class="form-control" id="width-tag" name='width-tag' type="number" value="62" min="52" max="300" />
                       <span class="input-group-text">mm</span>
                     </div>
                   </div>
                   <label class="col-form-label col-sm-2">Height</label>
                   <div class="col-sm-10">
                     <div class="input-group mb-3">
-                      <input class="form-control" name='height-tag' type="number" value="29" min="28" max="200" />
+                      <input class="form-control" id="height-tag" name='height-tag' type="number" value="29" min="28" max="200" />
                       <span class="input-group-text">mm</span>
                     </div>
                   </div>
                 </div>
               </div>
+              <div class="row">
+                <div class="col-lg-3 col-md-4">
+                    <a href="javascript:printpdf()" class="btn btn-success">Print</a>
+                </div>
+                <div class="col-lg-3 col-md-4">
+                    <a href="javascript:save_size()" class="btn btn-primary">Save</a>
+                </div>
+                <div class="col-lg-3 col-md-4">
+                    <a href="javascript:reset_size()" class="btn btn-danger">Reset</a>
+                </div>
+              </div>
 
             </div>
 
@@ -96,16 +107,11 @@
     </div>
   </div>
 </section>
+<script src="{{ url_for('static', filename='js/jquery-3.6.0.min.js') }}"></script>
 <script src="{{ url_for('static', filename='js/qrcode.js') }}"></script>
 <script src="{{ url_for('static', filename='js/pdf.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/print.pdf.js') }}"></script>
 <script type="text/javascript">
-    var qrcode = new QRCode(document.getElementById("qrcode"), {
+    qr_draw("{{url_for('inventory.devices.device_details', id=tag.device.devicehub_id, _external=True)}}")
-            text: "{{url_for('inventory.devices.device_details', id=tag.device.devicehub_id, _external=True)}}",
-            width: 128,
-            height: 128,
-            colorDark : "#000000",
-            colorLight : "#ffffff",
-            correctLevel : QRCode.CorrectLevel.H
-     });
 </script>
 {% endblock main %}