diff options
| -rw-r--r-- | server/templates/server/doc_list.html | 10 | ||||
| -rw-r--r-- | server/urls.py | 1 | ||||
| -rw-r--r-- | server/views.py | 45 | ||||
| -rw-r--r-- | static/lazyload.js | 180 | ||||
| -rw-r--r-- | templates/registration/base_admin.html | 1 | ||||
| -rw-r--r-- | templates/registration/base_client.html | 1 |
6 files changed, 227 insertions, 11 deletions
diff --git a/server/templates/server/doc_list.html b/server/templates/server/doc_list.html index 2499245..f98cbd5 100644 --- a/server/templates/server/doc_list.html +++ b/server/templates/server/doc_list.html @@ -160,6 +160,9 @@ {% elif doc.0.status == "autosign" %} <i class="material-icons">assignment_turned_in</i> {% endif %} + {% if settings.DEBUG %} + {{doc.0.id}}: + {% endif %} {{doc.0.document_type.name}} <span class="badge" data-badge-caption="">{{doc.0.user.first_name}} {{doc.0.user.last_name}}</span> </div> @@ -416,7 +419,7 @@ <div class="col s12"> <div class="card"> <div class="card-image"> - {% if doc.5 %}<img src="data:;base64,{{ doc.5 }}">{% endif %} + {% if doc.5 %}<img class="lazyload" data-src="{{ doc.5 }}">{% endif %} </div> </div> </div> @@ -425,7 +428,7 @@ <div class="col s12"> <div class="card"> <div class="card-image"> - {% if doc.6 %}<img src="data:;base64,{{ doc.6 }}">{% endif %} + {% if doc.6 %}<img class="lazyload" data-src="{{ doc.6 }}">{% endif %} </div> </div> </div> @@ -434,7 +437,7 @@ <div class="col s12"> <div class="card"> <div class="card-image"> - {% if doc.7 %}<img src="data:;base64,{{ doc.7 }}">{% endif %} + {% if doc.7 %}<img class="lazyload" data-src="{{ doc.7 }}">{% endif %} </div> </div> </div> @@ -465,6 +468,7 @@ $(document).ready(function(){ update(); document.getElementById('progress_bar').className = "determinate"; {% endif %} + lazyload(); }); function resetModal() { diff --git a/server/urls.py b/server/urls.py index 3c4f66f..087e7ad 100644 --- a/server/urls.py +++ b/server/urls.py @@ -16,4 +16,5 @@ urlpatterns = [ path('docpreview', views.docpreview, name='docpreview'), path('progress', views.get_progress, name='progress'), path('request', views.data_request, name='request'), + path('media/<int:id>/<str:t>', views.media_request, name='media'), ] diff --git a/server/views.py b/server/views.py index 9ea1d3f..c7983e2 100644 --- a/server/views.py +++ b/server/views.py @@ -915,17 +915,13 @@ def doclist(request): if i.medical_data: medical = i.medical_data if medical.vac_certificate.name: - with open(medical.vac_certificate.name, 'rb') as image_file: - vac_file = base64.b64encode(image_file.read()).decode() + vac_file = "/server/media/" + str(i.id) + "/vac_certificate" if medical.health_care_certificate.name: - with open(medical.health_care_certificate.name, 'rb') as image_file: - health_file = base64.b64encode(image_file.read()).decode() + health_file = "/server/media/" + str(i.id) + "/health_care_certificate" if i.signed_doc: - with open(i.signed_doc.name, 'rb') as image_file: - sign_doc_file = base64.b64encode( - image_file.read()).decode() + sign_doc_file = "/server/media/" + str(i.id) + "/signed_doc" doc_group = i.user.groups.values_list('name', flat=True)[0] @@ -1139,6 +1135,10 @@ def docpreview(request): document = Document.objects.filter(code=code)[0] parent_group = document.user.groups.values_list('name', flat=True)[0] + # user has not permission to view document + if parent_group not in groups: + return + # prepare images in base64 vac_file = "" health_file = "" @@ -1183,4 +1183,33 @@ def data_request(request): data += user.email + ", " data = data[:-2] context["data"] = data - return render(request, 'server/data_request.html', context)
\ No newline at end of file + return render(request, 'server/data_request.html', context) + +def media_request(request, id=0, t=""): + doc = Document.objects.get(id=id) + doc_group = doc.user.groups.values_list('name', flat=True)[0] + + # check if user can view media + if request.user.is_staff: + # user is staff + groups = request.user.groups.values_list('name', flat=True) + if doc_group not in groups: + return + elif request.user.has_perm("client.staff"): + # user is psudo-staff + groups = request.user.groups.values_list('name', flat=True)[1:] + if doc_group not in groups: + return + else: + # is normal user + if doc.user != request.user: + return + + if t == "health_care_certificate": + image_file = doc.medical_data.health_care_certificate + elif t == "vac_certificate": + image_file = doc.medical_data.vac_certificate + elif t == "signed_doc": + image_file = doc.signed_doc + + return FileResponse(image_file, filename=image_file.name)
\ No newline at end of file diff --git a/static/lazyload.js b/static/lazyload.js new file mode 100644 index 0000000..6b76a3c --- /dev/null +++ b/static/lazyload.js @@ -0,0 +1,180 @@ +/*! + * Lazy Load - JavaScript plugin for lazy loading images + * + * Copyright (c) 2007-2019 Mika Tuupola + * + * Licensed under the MIT license: + * http://www.opensource.org/licenses/mit-license.php + * + * Project home: + * https://appelsiini.net/projects/lazyload + * + * Version: 2.0.0-rc.2 + * + */ + +(function (root, factory) { + if (typeof exports === "object") { + module.exports = factory(root); + } else if (typeof define === "function" && define.amd) { + define([], factory); + } else { + root.LazyLoad = factory(root); + } +}) (typeof global !== "undefined" ? global : this.window || this.global, function (root) { + + "use strict"; + + if (typeof define === "function" && define.amd){ + root = window; + } + + const defaults = { + src: "data-src", + srcset: "data-srcset", + selector: ".lazyload", + root: null, + rootMargin: "0px", + threshold: 0 + }; + + /** + * Merge two or more objects. Returns a new object. + * @private + * @param {Boolean} deep If true, do a deep (or recursive) merge [optional] + * @param {Object} objects The objects to merge together + * @returns {Object} Merged values of defaults and options + */ + const extend = function () { + + let extended = {}; + let deep = false; + let i = 0; + let length = arguments.length; + + /* Check if a deep merge */ + if (Object.prototype.toString.call(arguments[0]) === "[object Boolean]") { + deep = arguments[0]; + i++; + } + + /* Merge the object into the extended object */ + let merge = function (obj) { + for (let prop in obj) { + if (Object.prototype.hasOwnProperty.call(obj, prop)) { + /* If deep merge and property is an object, merge properties */ + if (deep && Object.prototype.toString.call(obj[prop]) === "[object Object]") { + extended[prop] = extend(true, extended[prop], obj[prop]); + } else { + extended[prop] = obj[prop]; + } + } + } + }; + + /* Loop through each object and conduct a merge */ + for (; i < length; i++) { + let obj = arguments[i]; + merge(obj); + } + + return extended; + }; + + function LazyLoad(images, options) { + this.settings = extend(defaults, options || {}); + this.images = images || document.querySelectorAll(this.settings.selector); + this.observer = null; + this.init(); + } + + LazyLoad.prototype = { + init: function() { + + /* Without observers load everything and bail out early. */ + if (!root.IntersectionObserver) { + this.loadImages(); + return; + } + + let self = this; + let observerConfig = { + root: this.settings.root, + rootMargin: this.settings.rootMargin, + threshold: [this.settings.threshold] + }; + + this.observer = new IntersectionObserver(function(entries) { + Array.prototype.forEach.call(entries, function (entry) { + if (entry.isIntersecting) { + self.observer.unobserve(entry.target); + let src = entry.target.getAttribute(self.settings.src); + let srcset = entry.target.getAttribute(self.settings.srcset); + if ("img" === entry.target.tagName.toLowerCase()) { + if (src) { + entry.target.src = src; + } + if (srcset) { + entry.target.srcset = srcset; + } + } else { + entry.target.style.backgroundImage = "url(" + src + ")"; + } + } + }); + }, observerConfig); + + Array.prototype.forEach.call(this.images, function (image) { + self.observer.observe(image); + }); + }, + + loadAndDestroy: function () { + if (!this.settings) { return; } + this.loadImages(); + this.destroy(); + }, + + loadImages: function () { + if (!this.settings) { return; } + + let self = this; + Array.prototype.forEach.call(this.images, function (image) { + let src = image.getAttribute(self.settings.src); + let srcset = image.getAttribute(self.settings.srcset); + if ("img" === image.tagName.toLowerCase()) { + if (src) { + image.src = src; + } + if (srcset) { + image.srcset = srcset; + } + } else { + image.style.backgroundImage = "url('" + src + "')"; + } + }); + }, + + destroy: function () { + if (!this.settings) { return; } + this.observer.disconnect(); + this.settings = null; + } + }; + + root.lazyload = function(images, options) { + return new LazyLoad(images, options); + }; + + if (root.jQuery) { + const $ = root.jQuery; + $.fn.lazyload = function (options) { + options = options || {}; + options.attribute = options.attribute || "data-src"; + new LazyLoad($.makeArray(this), options); + return this; + }; + } + + return LazyLoad; +}); diff --git a/templates/registration/base_admin.html b/templates/registration/base_admin.html index 6d5d590..8dde1b0 100644 --- a/templates/registration/base_admin.html +++ b/templates/registration/base_admin.html @@ -113,6 +113,7 @@ </main> <script type="text/javascript" src="{% static 'jquery-3.5.1.min.js' %}"></script> <script type="text/javascript" src="{% static 'materialize.min.js' %}"></script> + <script type="text/javascript" src="{% static 'lazyload.js' %}"></script> <script> $(document).ready(function(){ $('.tooltipped').tooltip(); diff --git a/templates/registration/base_client.html b/templates/registration/base_client.html index 3957c9c..fcef3b0 100644 --- a/templates/registration/base_client.html +++ b/templates/registration/base_client.html @@ -113,6 +113,7 @@ </main> <script type="text/javascript" src="{% static 'jquery-3.5.1.min.js' %}"></script> <script type="text/javascript" src="{% static 'materialize.min.js' %}"></script> + <script type="text/javascript" src="{% static 'lazyload.js' %}"></script> <script> $(document).ready(function(){ $('.tooltipped').tooltip(); |