esap/sdc_portal/templates/sdc_portal/search.html

@@ -6,14 +6,27 @@
 {% block content %}
 
     <script type="text/javascript">   
-        $(document).ready(function () { // called at page init
 
+        $(document).ready(function () { // called at page init
             if ('{{ json_dt_data|safe }}' != '') {
 
                 // get data and column info from context
                 var data = {{ json_dt_data|safe }};
                 var cols = {{ json_dt_cols|safe }};
 
+                console.log("all cols:", cols);
+
+                for (var i = 0; i < cols.length; i++) {
+                    if (cols[i].title == 'access_url') {                    
+                        console.log(cols[i].title);
+
+                        for (var j = 0; j < data.length; j++) {
+                            data[j][i] = '<a class="accessURL" target="_blank">' + data[j][i] + '</a>';
+                        }
+                    }
+                }
+
+
                 // construct datatable
                 dt = new DataTable('#demo_datatable', {
                     data: data,
@@ -22,8 +35,65 @@
                     scrollX: true,    // allow horizontal scrolling
                 });
             }
+        });
+
+
+        $('#demo_datatable').ready(function() {
+            const errorModal = new bootstrap.Modal('#error-modal');
+            const responseStatusCheck = (response) => {
+                if (response.status === 401) {
+                    throw "Please, log in to download files!";
+                }
+                return response;
+            }
 
+            $('.accessURL').click(function() {
+                url = $(this).text();
+
+                fileName = url.split('/').pop()
+                url = "https://dcache-dev.ctaodc.ch:2880/sdc-data/" + fileName;
+
+                fetch("/esap-api/accounts/user-profiles/?format=json", {
+                    method: 'GET'
                 })
+                .then(responseStatusCheck)
+                .then((response) => response.json())
+                .then(async (json) => {
+                    if (!json.results?.length) {
+                        throw "Please, log in to download files!";
+                    }
+
+                    token = json.results[0].oidc_access_token;
+
+                    return await fetch(url, {
+                        method: 'GET',
+                        headers: {
+                            Authorization: `Bearer ${token}`
+                        }
+                    });
+                })
+                .then(responseStatusCheck)
+                .then((response) => response.blob())
+                .then((blob) => {
+                    const a = document.createElement("a");
+                    if(blob.type === "") {
+                        blob = blob.slice(0, blob.size, "attachment/plain");
+                    }
+                    a.href = URL.createObjectURL(blob);
+                    a.download = fileName;
+                    a.click();
+                    URL.revokeObjectURL(url);
+                })
+                .catch((err)=> {
+                    if (typeof(err) !== "string"){
+                        err = "Impossible to download files right now. Please retry later!";
+                    }
+                    $('#error-message').text(err);
+                    errorModal.show();
+                })
+            })
+        })
+
     </script>
 
 
@@ -121,6 +191,22 @@
 
 
     </div>
+    <div class="modal" tabindex="-1" id="error-modal">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Error</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <p id="error-message">Unable to download files right now. Please retry later!</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+      </div>