Client side QR Codes (#4357)

* Add JS for qrcodejs

Ref: https://davidshimjs.github.io/qrcodejs/

* Simple function for rendering a QR code

* Refactor QR code view for Part

* Replace QR code view for SupplierPart

* Refactor QR codes for stock item and stock location models

* Remove base QRCodeView entirely

InvenTree/InvenTree/static/script/qrcode.min.js

@@ -0,0 +1 @@
+var QRCode;!function(){function a(a){this.mode=c.MODE_8BIT_BYTE,this.data=a,this.parsedData=[];for(var b=[],d=0,e=this.data.length;e>d;d++){var f=this.data.charCodeAt(d);f>65536?(b[0]=240|(1835008&f)>>>18,b[1]=128|(258048&f)>>>12,b[2]=128|(4032&f)>>>6,b[3]=128|63&f):f>2048?(b[0]=224|(61440&f)>>>12,b[1]=128|(4032&f)>>>6,b[2]=128|63&f):f>128?(b[0]=192|(1984&f)>>>6,b[1]=128|63&f):b[0]=f,this.parsedData=this.parsedData.concat(b)}this.parsedData.length!=this.data.length&&(this.parsedData.unshift(191),this.parsedData.unshift(187),this.parsedData.unshift(239))}function b(a,b){this.typeNumber=a,this.errorCorrectLevel=b,this.modules=null,this.moduleCount=0,this.dataCache=null,this.dataList=[]}function i(a,b){if(void 0==a.length)throw new Error(a.length+"/"+b);for(var c=0;c<a.length&&0==a[c];)c++;this.num=new Array(a.length-c+b);for(var d=0;d<a.length-c;d++)this.num[d]=a[d+c]}function j(a,b){this.totalCount=a,this.dataCount=b}function k(){this.buffer=[],this.length=0}function m(){return"undefined"!=typeof CanvasRenderingContext2D}function n(){var a=!1,b=navigator.userAgent;return/android/i.test(b)&&(a=!0,aMat=b.toString().match(/android ([0-9]\.[0-9])/i),aMat&&aMat[1]&&(a=parseFloat(aMat[1]))),a}function r(a,b){for(var c=1,e=s(a),f=0,g=l.length;g>=f;f++){var h=0;switch(b){case d.L:h=l[f][0];break;case d.M:h=l[f][1];break;case d.Q:h=l[f][2];break;case d.H:h=l[f][3]}if(h>=e)break;c++}if(c>l.length)throw new Error("Too long data");return c}function s(a){var b=encodeURI(a).toString().replace(/\%[0-9a-fA-F]{2}/g,"a");return b.length+(b.length!=a?3:0)}a.prototype={getLength:function(){return this.parsedData.length},write:function(a){for(var b=0,c=this.parsedData.length;c>b;b++)a.put(this.parsedData[b],8)}},b.prototype={addData:function(b){var c=new a(b);this.dataList.push(c),this.dataCache=null},isDark:function(a,b){if(0>a||this.moduleCount<=a||0>b||this.moduleCount<=b)throw new Error(a+","+b);return this.modules[a][b]},getModuleCount:function(){return this.moduleCount},make:function(){this.makeImpl(!1,this.getBestMaskPattern())},makeImpl:function(a,c){this.moduleCount=4*this.typeNumber+17,this.modules=new Array(this.moduleCount);for(var d=0;d<this.moduleCount;d++){this.modules[d]=new Array(this.moduleCount);for(var e=0;e<this.moduleCount;e++)this.modules[d][e]=null}this.setupPositionProbePattern(0,0),this.setupPositionProbePattern(this.moduleCount-7,0),this.setupPositionProbePattern(0,this.moduleCount-7),this.setupPositionAdjustPattern(),this.setupTimingPattern(),this.setupTypeInfo(a,c),this.typeNumber>=7&&this.setupTypeNumber(a),null==this.dataCache&&(this.dataCache=b.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,c)},setupPositionProbePattern:function(a,b){for(var c=-1;7>=c;c++)if(!(-1>=a+c||this.moduleCount<=a+c))for(var d=-1;7>=d;d++)-1>=b+d||this.moduleCount<=b+d||(this.modules[a+c][b+d]=c>=0&&6>=c&&(0==d||6==d)||d>=0&&6>=d&&(0==c||6==c)||c>=2&&4>=c&&d>=2&&4>=d?!0:!1)},getBestMaskPattern:function(){for(var a=0,b=0,c=0;8>c;c++){this.makeImpl(!0,c);var d=f.getLostPoint(this);(0==c||a>d)&&(a=d,b=c)}return b},createMovieClip:function(a,b,c){var d=a.createEmptyMovieClip(b,c),e=1;this.make();for(var f=0;f<this.modules.length;f++)for(var g=f*e,h=0;h<this.modules[f].length;h++){var i=h*e,j=this.modules[f][h];j&&(d.beginFill(0,100),d.moveTo(i,g),d.lineTo(i+e,g),d.lineTo(i+e,g+e),d.lineTo(i,g+e),d.endFill())}return d},setupTimingPattern:function(){for(var a=8;a<this.moduleCount-8;a++)null==this.modules[a][6]&&(this.modules[a][6]=0==a%2);for(var b=8;b<this.moduleCount-8;b++)null==this.modules[6][b]&&(this.modules[6][b]=0==b%2)},setupPositionAdjustPattern:function(){for(var a=f.getPatternPosition(this.typeNumber),b=0;b<a.length;b++)for(var c=0;c<a.length;c++){var d=a[b],e=a[c];if(null==this.modules[d][e])for(var g=-2;2>=g;g++)for(var h=-2;2>=h;h++)this.modules[d+g][e+h]=-2==g||2==g||-2==h||2==h||0==g&&0==h?!0:!1}},setupTypeNumber:function(a){for(var b=f.getBCHTypeNumber(this.typeNumber),c=0;18>c;c++){var d=!a&&1==(1&b>>c);this.modules[Math.floor(c/3)][c%3+this.moduleCount-8-3]=d}for(var c=0;18>c;c++){var d=!a&&1==(1&b>>c);this.modules[c%3+this.moduleCount-8-3][Math.floor(c/3)]=d}},setupTypeInfo:function(a,b){for(var c=this.errorCorrectLevel<<3|b,d=f.getBCHTypeInfo(c),e=0;15>e;e++){var g=!a&&1==(1&d>>e);6>e?this.modules[e][8]=g:8>e?this.modules[e+1][8]=g:this.modules[this.moduleCount-15+e][8]=g}for(var e=0;15>e;e++){var g=!a&&1==(1&d>>e);8>e?this.modules[8][this.moduleCount-e-1]=g:9>e?this.modules[8][15-e-1+1]=g:this.modules[8][15-e-1]=g}this.modules[this.moduleCount-8][8]=!a},mapData:function(a,b){for(var c=-1,d=this.moduleCount-1,e=7,g=0,h=this.moduleCount-1;h>0;h-=2)for(6==h&&h--;;){for(var i=0;2>i;i++)if(null==this.modules[d][h-i]){var j=!1;g<a.length&&(j=1==(1&a[g]>>>e));var k=f.getMask(b,d,h-i);k&&(j=!j),this.modules[d][h-i]=j,e--,-1==e&&(g++,e=7)}if(d+=c,0>d||this.moduleCount<=d){d-=c,c=-c;break}}}},b.PAD0=236,b.PAD1=17,b.createData=function(a,c,d){for(var e=j.getRSBlocks(a,cLine truncated

InvenTree/InvenTree/views.py

@@ -320,44 +320,6 @@ class AjaxView(AjaxMixin, View):
         return self.renderJsonResponse(request)
 
 
-class QRCodeView(AjaxView):
-    """An 'AJAXified' view for displaying a QR code.
-
-    Subclasses should implement the get_qr_data(self) function.
-    """
-
-    ajax_template_name = "qr_code.html"
-
-    def get(self, request, *args, **kwargs):
-        """Return json with qr-code data."""
-        self.request = request
-        self.pk = self.kwargs['pk']
-        return self.renderJsonResponse(request, None, context=self.get_context_data())
-
-    def get_qr_data(self):
-        """Returns the text object to render to a QR code.
-
-        The actual rendering will be handled by the template
-        """
-        return None
-
-    def get_context_data(self):
-        """Get context data for passing to the rendering template.
-
-        Explicity passes the parameter 'qr_data'
-        """
-        context = {}
-
-        qr = self.get_qr_data()
-
-        if qr:
-            context['qr_data'] = qr
-        else:
-            context['error_msg'] = 'Error generating QR code'
-
-        return context
-
-
 class AjaxUpdateView(AjaxMixin, UpdateView):
     """An 'AJAXified' UpdateView for updating an object in the db.
 

InvenTree/company/templates/company/supplier_part.html

@@ -270,10 +270,10 @@ src="{% static 'img/blank_image.png' %}"
 {% if barcodes %}
 
 $("#show-qr-code").click(function() {
-    launchModalForm("{% url 'supplier-part-qr' part.pk %}",
-    {
-        no_post: true,
-    });
+    showQRDialog(
+        '{% trans "Supplier Part QR Code" %}',
+        '{"supplierpart": {{ part.pk }}}'
+    );
 });
 
 $("#barcode-link").click(function() {

InvenTree/company/urls.py

@@ -26,7 +26,6 @@ manufacturer_part_urls = [
 
 supplier_part_urls = [
     re_path(r'^(?P<pk>\d+)/', include([
-        re_path('^qr_code/?', views.SupplierPartQRCode.as_view(), name='supplier-part-qr'),
         re_path('^.*$', views.SupplierPartDetail.as_view(template_name='company/supplier_part.html'), name='supplier-part-detail'),
     ]))
 

InvenTree/company/views.py

@@ -4,7 +4,7 @@ from django.urls import reverse
 from django.utils.translation import gettext_lazy as _
 from django.views.generic import DetailView, ListView
 
-from InvenTree.views import InvenTreeRoleMixin, QRCodeView
+from InvenTree.views import InvenTreeRoleMixin
 from plugin.views import InvenTreePluginViewMixin
 
 from .models import Company, ManufacturerPart, SupplierPart
@@ -112,18 +112,3 @@ class SupplierPartDetail(InvenTreePluginViewMixin, DetailView):
     context_object_name = 'part'
     queryset = SupplierPart.objects.all()
     permission_required = 'purchase_order.view'
-
-
-class SupplierPartQRCode(QRCodeView):
-    """View for displaying a QR code for a StockItem object."""
-
-    ajax_form_title = _("Stock Item QR Code")
-    role_required = 'stock.view'
-
-    def get_qr_data(self):
-        """Generate QR code data for the StockItem."""
-        try:
-            part = SupplierPart.objects.get(id=self.pk)
-            return part.format_barcode()
-        except SupplierPart.DoesNotExist:
-            return None

InvenTree/part/api.py

@@ -2118,9 +2118,6 @@ part_api_urls = [
         # BOM download
         re_path(r'^bom-download/?', views.BomDownload.as_view(), name='api-bom-download'),
 
-        # QR code download
-        re_path(r'^qr_code/?', views.PartQRCode.as_view(), name='api-part-qr'),
-
         # Old pricing endpoint
         re_path(r'^pricing2/', views.PartPricing.as_view(), name='part-pricing'),
 

InvenTree/part/templates/part/part_base.html

@@ -447,11 +447,9 @@
 
     {% if barcodes %}
     $("#show-qr-code").click(function() {
-        launchModalForm(
-            "{% url 'api-part-qr' part.id %}",
-            {
-                no_post: true,
-            }
+        showQRDialog(
+            '{% trans "Part QR Code" %}',
+            '{"part": {{ part.pk }}}',
         );
     });
 

InvenTree/part/test_views.py

@@ -113,28 +113,3 @@ class PartDetailTest(PartViewTestCase):
         response = self.client.get(reverse('api-bom-download', args=(1,)), HTTP_X_REQUESTED_WITH='XMLHttpRequest')
         self.assertEqual(response.status_code, 200)
         self.assertIn('streaming_content', dir(response))
-
-
-class PartQRTest(PartViewTestCase):
-    """Tests for the Part QR Code AJAX view."""
-
-    def test_html_redirect(self):
-        """A HTML request for a QR code should be redirected (use an AJAX request instead)"""
-        response = self.client.get(reverse('api-part-qr', args=(1,)))
-        self.assertEqual(response.status_code, 302)
-
-    def test_valid_part(self):
-        """Test QR code response for a Part"""
-        response = self.client.get(reverse('api-part-qr', args=(1,)), HTTP_X_REQUESTED_WITH='XMLHttpRequest')
-        self.assertEqual(response.status_code, 200)
-
-        data = str(response.content)
-
-        self.assertIn('Part QR Code', data)
-        self.assertIn('<img src=', data)
-
-    def test_invalid_part(self):
-        """Test response for an invalid Part ID value"""
-        response = self.client.get(reverse('api-part-qr', args=(9999,)), HTTP_X_REQUESTED_WITH='XMLHttpRequest')
-
-        self.assertEqual(response.status_code, 200)

InvenTree/part/views.py

@@ -16,8 +16,7 @@ from common.models import InvenTreeSetting
 from common.views import FileManagementAjaxView, FileManagementFormView
 from company.models import SupplierPart
 from InvenTree.helpers import str2bool, str2int
-from InvenTree.views import (AjaxUpdateView, AjaxView, InvenTreeRoleMixin,
-                             QRCodeView)
+from InvenTree.views import AjaxUpdateView, AjaxView, InvenTreeRoleMixin
 from plugin.views import InvenTreePluginViewMixin
 from stock.models import StockItem, StockLocation
 
@@ -372,22 +371,6 @@ class PartDetailFromIPN(PartDetail):
         return super(PartDetailFromIPN, self).get(request, *args, **kwargs)
 
 
-class PartQRCode(QRCodeView):
-    """View for displaying a QR code for a Part object."""
-
-    ajax_form_title = _("Part QR Code")
-
-    role_required = 'part.view'
-
-    def get_qr_data(self):
-        """Generate QR code data for the Part."""
-        try:
-            part = Part.objects.get(id=self.pk)
-            return part.format_barcode()
-        except Part.DoesNotExist:
-            return None
-
-
 class PartImageSelect(AjaxUpdateView):
     """View for selecting Part image from existing images."""
 

InvenTree/stock/templates/stock/item_base.html

@@ -523,10 +523,10 @@ $('#stock-edit-status').click(function () {
 {% endif %}
 
 $("#show-qr-code").click(function() {
-    launchModalForm("{% url 'stock-item-qr' item.id %}",
-    {
-        no_post: true,
-    });
+    showQRDialog(
+        '{% trans "Stock Item QR Code" %}',
+        '{"stockitem": {{ item.pk }}}',
+    );
 });
 
 {% if barcodes %}

InvenTree/stock/templates/stock/location.html

@@ -399,10 +399,10 @@
 
     {% if barcodes %}
     $('#show-qr-code').click(function() {
-        launchModalForm("{% url 'stock-location-qr' location.id %}",
-        {
-            no_post: true,
-        });
+        showQRDialog(
+            '{% trans "Stock Location QR Code" %}',
+            '{"stocklocation": {{ location.pk }}}'
+        );
     });
 
     $("#barcode-link").click(function() {

InvenTree/stock/urls.py

@@ -7,8 +7,6 @@ from stock import views
 location_urls = [
 
     re_path(r'^(?P<pk>\d+)/', include([
-        re_path(r'^qr_code/?', views.StockLocationQRCode.as_view(), name='stock-location-qr'),
-
         # Anything else - direct to the location detail view
         re_path('^.*$', views.StockLocationDetail.as_view(), name='stock-location-detail'),
     ])),
@@ -16,8 +14,6 @@ location_urls = [
 ]
 
 stock_item_detail_urls = [
-    re_path(r'^qr_code/', views.StockItemQRCode.as_view(), name='stock-item-qr'),
-
     # Anything else - direct to the item detail view
     re_path('^.*$', views.StockItemDetail.as_view(), name='stock-item-detail'),
 ]

InvenTree/stock/views.py

@@ -2,11 +2,10 @@
 
 from django.http import HttpResponseRedirect
 from django.urls import reverse
-from django.utils.translation import gettext_lazy as _
 from django.views.generic import DetailView, ListView
 
 import common.settings
-from InvenTree.views import InvenTreeRoleMixin, QRCodeView
+from InvenTree.views import InvenTreeRoleMixin
 from plugin.views import InvenTreePluginViewMixin
 
 from .models import StockItem, StockLocation
@@ -101,34 +100,3 @@ class StockItemDetail(InvenTreeRoleMixin, InvenTreePluginViewMixin, DetailView):
                 return HttpResponseRedirect(reverse('stock-index'))
 
         return super().get(request, *args, **kwargs)
-
-
-class StockLocationQRCode(QRCodeView):
-    """View for displaying a QR code for a StockLocation object."""
-
-    ajax_form_title = _("Stock Location QR code")
-
-    role_required = ['stock_location.view', 'stock.view']
-
-    def get_qr_data(self):
-        """Generate QR code data for the StockLocation."""
-        try:
-            loc = StockLocation.objects.get(id=self.pk)
-            return loc.format_barcode()
-        except StockLocation.DoesNotExist:
-            return None
-
-
-class StockItemQRCode(QRCodeView):
-    """View for displaying a QR code for a StockItem object."""
-
-    ajax_form_title = _("Stock Item QR Code")
-    role_required = 'stock.view'
-
-    def get_qr_data(self):
-        """Generate QR code data for the StockItem."""
-        try:
-            item = StockItem.objects.get(id=self.pk)
-            return item.format_barcode()
-        except StockItem.DoesNotExist:
-            return None

InvenTree/templates/js/translated/modals.js

@@ -15,6 +15,7 @@
     getFieldValue,
     reloadFieldOptions,
     showModalImage,
+    showQRDialog,
     showQuestionDialog,
     showModalSpinner,
 */
@@ -590,19 +591,18 @@ function renderErrorMessage(xhr) {
 }
 
 
+/* Display a modal dialog message box.
+*
+* title - Title text
+* content - HTML content of the dialog window
+*/
 function showAlertDialog(title, content, options={}) {
-    /* Display a modal dialog message box.
-     *
-     * title - Title text
-     * content - HTML content of the dialog window
-     */
 
     if (options.alert_style) {
         // Wrap content in an alert block
         content = `<div class='alert alert-block alert-${options.alert_style}'>${content}</div>`;
     }
 
-
     var modal = createNewModal({
         title: title,
         closeText: '{% trans "Close" %}',
@@ -612,6 +612,36 @@ function showAlertDialog(title, content, options={}) {
     modalSetContent(modal, content);
 
     $(modal).modal('show');
+
+    if (options.after_render) {
+        options.after_render(modal);
+    }
+}
+
+
+/*
+ * Display a simple modal window with a QR code
+ */
+function showQRDialog(title, data, options={}) {
+
+    let content = `
+    <div id='qrcode-container' style='margin: auto; width: 256px; padding: 25px;'>
+        <div id='qrcode'></div>
+    </div>`;
+
+    options.after_render = function(modal) {
+        let qrcode = new QRCode('qrcode', {
+            width: 256,
+            height: 256,
+        });
+        qrcode.makeCode(data);
+    };
+
+    showAlertDialog(
+        title,
+        content,
+        options
+    );
 }
 
 

InvenTree/templates/third_party_js.html

@@ -35,3 +35,4 @@
 <script defer type='text/javascript' src="{% static 'easymde/easymde.min.js' %}"></script>
 <script defer type='text/javascript' src="{% static 'script/randomColor.min.js' %}"></script>
 <script defer type='text/javascript' src="{% static 'script/html5-qrcode.min.js' %}"></script>
+<script defer type='text/javascript' src="{% static 'script/qrcode.min.js' %}"></script>