Commit 2e03af13 authored by Ash Crow's avatar Ash Crow 🛠

[Front] Finished the JS QRcode generator

parent 5ebe1e28
import qrcode
import io
from django.db import models
from django.core.files.uploadedfile import InMemoryUploadedFile
class WMQRCode(models.Model):
qrwm_baseurl = 'https://qrwm.org/'
qid = models.CharField(max_length=255)
project_id = models.CharField(max_length=255)
qrcode = models.ImageField(upload_to='qrcode', blank=True, null=True)
def get_absolute_url(self):
return self.qrwm_baseurl + self.qid + '/' + self.project_id
def generate_qrcode(self):
qr = qrcode.QRCode(
version=1,
error_correction=qrcode.constants.ERROR_CORRECT_L,
box_size=6,
border=0,
)
qr.add_data(self.get_absolute_url())
qr.make(fit=True)
img = qr.make_image()
buffer = io.StringIO()
img.save(buffer)
filename = 'events-%s.png' % (self.id)
filebuffer = InMemoryUploadedFile(
buffer, None, filename, 'image/png', buffer.len, None)
self.qrcode.save(filename, filebuffer)
# Create your models here.
......@@ -6,6 +6,14 @@ body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
#qr-generator {
margin-bottom: 60px;
}
#qr-description {
font-style: italic;
}
.footer {
position: absolute;
bottom: 0;
......
{% extends 'home/base.html' %}
{% load staticfiles %}
{% block head %}
<link rel="stylesheet" href="{% static 'home/css/autocomplete.css' %}">
{% endblock head %}
{% block content %}
<div class="bg-light">
<div id="qr-generator" class="bg-light">
<h1>New QRCode</h1>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="username">Wikidata item</label>
<label for="form-qid">Wikidata item</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" id="qid" placeholder="Q90" required>
<input type="text" class="form-control" id="form-qid" placeholder="Q90" required>
<div class="invalid-feedback" style="width: 100%;">
The Qid is required.
</div>
......@@ -22,8 +22,8 @@
</div>
<div class="mb-3">
<label for="country">Project tag</label>
<select class="custom-select d-block w-100" id="country">
<label for="form-project">Project tag</label>
<select class="custom-select d-block w-100" id="form-project">
<option value=""></option>
<option>wikisevran</option>
</select>
......@@ -31,8 +31,10 @@
</div>
<div class="col-md-6">
<p id="url"></p>
<div id="qrcodegenerator"></div>
<h2 id="qr-label"></h2>
<p id="qr-description"></p>
<div id="qr-img"></div>
<p id="qr-url"></p>
</div>
</div>
{% endblock content %}
......@@ -42,26 +44,96 @@
<script type="text/javascript" src="{% static 'home/js/jquery.autocomplete.min.js' %}"></script>
<script type="text/javascript">
$( document ).ready(function(){
$('#qid').autocomplete({
serviceUrl: '/api/qid', # https://www.wikidata.org/w/api.php?action=wbsearchentities&language=fr&format=json&search=
onSelect: function (suggestion) {
alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
var base_url = "https://qrwm.org/";
var qrcode_data = {
url: "",
qid: "",
project: "",
label: "",
description: ""
};
var qrcodeUpdate = function (data = {}) {
console.log(data);
// Merge the new data with the old one
for (arg in data) {
qrcode_data[arg] = data[arg];
}
console.log(qrcode_data);
// Update the URL if needed
if (qrcode_data.qid !== "") {
var url_suffix = qrcode_data.qid;
if (qrcode_data.project !== "") {
url_suffix += "?pk_campaign=" + qrcode_data.project;
}
});
qrcode_data.url = base_url + url_suffix;
} else {
qrcode_data.url = base_url;
}
// Update the fields
$( "#qr-label" ).html(qrcode_data.label);
$( "#qr-description" ).html(qrcode_data.description);
$( "#qr-url" ).html('<a href="' + qrcode_data.url +' ">' + qrcode_data.url + "</a>");
var base_url = "https://qrwm.org/";
var qrcode_url = base_url + 'Q90' ;
// Update the image
var container = $('#qr-img');
container.empty();
var qrcode = kjua({
text: qrcode_data.url,
minVersion: 4,
size: 300,
rounded: 100,
});
container.append(qrcode);
};
$( "#url" ).html('<a href="' + qrcode_url +' ">' + qrcode_url + "</a>");
$('#form-qid').autocomplete({
lookup: function (query, done) {
$.ajax({
url: "https://www.wikidata.org/w/api.php",
dataType: "jsonp",
data: {
action: "wbsearchentities",
format: "json",
origin: "*",
language: "fr",
formatversion: 2,
search: query
}
}).done( function( data) {
var suggestions = []
for (let s of data.search) {
var value = s.label
if (s.description) {
value += " (" + s.description + ")"
}
suggestions.push({ "value": value, "data": s.id, "label": s.label, "description" : s.description })
}
var result = {
suggestions: suggestions
} ;
done(result);
});
},
onSelect: function (suggestion) {
console.log('You selected: ' + suggestion.data + ', ' + suggestion.label);
qrcodeUpdate({
"qid": suggestion.data,
"label": suggestion.label,
"description" : suggestion.description
});
}
});
var el = kjua({
text: qrcode_url,
minVersion: 4,
size: 300,
rounded: 100,
$('#form-project').change(function() {
qrcodeUpdate({"project": this.value });
});
document.querySelector('#qrcodegenerator').appendChild(el);
});
</script>
{% endblock footerjs %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment