lazyload images

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();