#507 Create QR-code internally

interfaces/Config/templates/config_general.tmpl

@@ -219,7 +219,7 @@
         $.ajax({
           type: "POST",
           url: "../../tapi",
-          data: {mode:'config', name:'set_nzbkey', apikey: \$('#apikey').val()},
+          data: { mode:'config', name:'set_nzbkey', apikey: \$('#apikey').val() },
           success: function(msg){
             \$('#nzbkey').val(msg);
             document.location = document.location;
@@ -229,17 +229,13 @@
     });
 
     \$('.show_qrcode').click(function (e) {
-        // Make QR code
-        var qrcode = \$('<img />', {
-            src: 'https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=' + \$(this).attr('rel'),
-            alt: 'loading...',
-            width: 300,
-            height: 300
-        });
-        
         // Show in modal
         \$('#modal_qr .modal-dialog').width(330)
-        \$('#modal_qr .modal-body').html(qrcode)
+        \$('#modal_qr .modal-body').html('').qrcode({
+            "size": 280,
+            "color": "#3a3",
+            "text": \$(this).attr('rel')
+        });
         \$('#modal_qr').modal('show');
         
         // No save on this button click

interfaces/Config/templates/staticcfg/css/style.css

@@ -429,6 +429,10 @@ tr.separator {
     opacity: 0 !important;
     transition: all 0.3s !important;
 }
+#modal_qr .modal-body canvas {
+    padding: 10px;
+    margin-bottom: 10px;
+}
 
 .modal.in .modal-dialog {
     transform: scale(1) !important;
@@ -611,12 +615,7 @@ ul.tabs li.active a {
     color: #000;
     cursor: default;
 }
-.ui-tooltip-qrcode {
-    max-width: 320px;
-}
-.ui-tooltip-qrcode img {
-    margin: 0 auto;
-}
+
 .checkbox-days {
     float:  left;
 }