aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAndrea Lepori <alepori@student.ethz.ch>2020-12-10 14:01:22 +0100
committerAndrea Lepori <alepori@student.ethz.ch>2020-12-10 14:01:22 +0100
commit856ad4734e168c1b56f349244acd0cc14fcd8d78 (patch)
tree0b8551b20c7df925fd9b3b408349f66dc81cf162
parentrenaming, max partecipant number, only "capi" docs (diff)
downloadscout-subs-856ad4734e168c1b56f349244acd0cc14fcd8d78.tar.gz
scout-subs-856ad4734e168c1b56f349244acd0cc14fcd8d78.zip
lazyload images
Diffstat (limited to '')
-rw-r--r--server/templates/server/doc_list.html10
-rw-r--r--server/urls.py1
-rw-r--r--server/views.py45
-rw-r--r--static/lazyload.js180
-rw-r--r--templates/registration/base_admin.html1
-rw-r--r--templates/registration/base_client.html1
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();